(globalThis["webpackChunkverso"] = globalThis["webpackChunkverso"] || []).push([[1782],{

/***/ 41782:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const react_1 = __importDefault(__webpack_require__(96540));
const client_1 = __webpack_require__(5338);
const yield_main_1 = __webpack_require__(56187);
const perf_tooling_1 = __webpack_require__(56822);
const PageFactory_1 = __webpack_require__(24755);
const event_registry_1 = __webpack_require__(89245);
async function bootClient(pageComponent) {
    (0, event_registry_1.registerKendraEvents)();
    // mount and render the app
    const appElement = react_1.default.createElement(PageFactory_1.PageFactory.create(pageComponent), window.__PRELOADED_STATE__);
    const mountNode = document.getElementById('app-root');
    await (0, yield_main_1.yieldToMain)();
    (0, perf_tooling_1.perfMark)('react-hydrate-start');
    (0, client_1.hydrateRoot)(mountNode, appElement);
}
exports["default"] = bootClient;
//# sourceMappingURL=bootstrap-client-app.entry.js.map

/***/ }),

/***/ 21244:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState, useEffect } = __webpack_require__(96540);
const { connect: connectToStore } = __webpack_require__(67851);
const { loadData } = __webpack_require__(55918);
const GroupedNavigation = __webpack_require__(26223);
const loaders = __webpack_require__(62930);
const { LoaderWrapper } = __webpack_require__(86286);
const UtilityLede = __webpack_require__(50829);
const { TrackComponentChannel } = __webpack_require__(78788);
const mapStateToProps = (state, { storeKey }) => {
    return {
        data: state.groupedNavigation?.[storeKey] || null
    };
};
const mapDispatchToProps = (dispatch) => ({
    setData: (storeKey, data) => {
        dispatch({
            type: 'MERGE_KEY',
            key: `groupedNavigation`,
            value: { [storeKey]: data }
        });
    }
});
/**
 * GroupedNavigationContainer component
 *
 * @param {object} props - React props
 * @param {object} props.data - Data to pass to child component
 * @param {string} props.dataUrl - endpoint url
 * @param {string} props.loaderType - what type of loader to show while data is fetched
 * @param {string} props.storeKey - identifier of the data in store and in response from endpoint
 * @param {string} props.filterLabel - Optional Label for filter
 * @param {string} props.analyticsEventForFilter - Optional Google Analytics event string to capture filter search
 * @param {boolean} props.hasAtoZIndex - flag to show an A to Z index on child GroupedNavigation component, false by default
 * @param {boolean} props.hasFilter - flag to show a filter on child GroupedNavigation component, false by default
 * @param {func} props.setData - save fetched data in store
 * @returns {ReactElement} <GroupedNavigation>
 */
const GroupedNavigationContainer = ({ dataUrl, storeKey, data, setData, loaderType = 'Circle', ...rest }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'GroupedNavigationContainer'
        });
    }, []);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(false);
    const Loader = loaders[loaderType];
    async function handleDataFetching() {
        if (data || !dataUrl)
            return;
        setLoading(true);
        try {
            const response = await loadData({
                url: `${dataUrl}`
            });
            const groupedNavigationData = response ? response[storeKey] : [];
            setData(storeKey, groupedNavigationData);
        }
        catch (err) {
            setError(true);
        }
        finally {
            setLoading(false);
        }
    }
    useEffect(() => {
        handleDataFetching();
        // Linter is disabled because if we put data as dependency, it will create loop of
        // setData cause update of data prop - > rerender -> data fetch calls setData
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [dataUrl]);
    return (React.createElement(React.Fragment, null,
        error && (React.createElement(UtilityLede.ContentCenterNoBackground, { ariaLive: "polite", className: "brand-background__lede", dangerousHed: "Oops", dangerousDek: "something went wrong" })),
        loading && (React.createElement(LoaderWrapper, null,
            React.createElement(Loader, null))),
        data && React.createElement(GroupedNavigation, { groupedLinks: data, ...rest })));
};
GroupedNavigationContainer.propTypes = {
    analyticsEventForFilter: PropTypes.string,
    data: PropTypes.array,
    dataUrl: PropTypes.string.isRequired,
    filterLabel: PropTypes.string,
    hasAtoZIndex: PropTypes.bool,
    hasFilter: PropTypes.bool,
    loaderType: PropTypes.string,
    setData: PropTypes.func.isRequired,
    storeKey: PropTypes.string.isRequired
};
module.exports = connectToStore(mapStateToProps, mapDispatchToProps)(GroupedNavigationContainer);
//# sourceMappingURL=GroupedNavigationContainer.js.map

/***/ }),

/***/ 16035:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(21244);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 56141:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const SummaryCollageEight = __webpack_require__(84446);
const SummaryCollageTweleve = __webpack_require__(99383);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * BestStories component
 *
 * @param {object} props - React props
 * @param {string} [props.dangerousDek] - The container dek
 * @param {string} [props.dangerousHed] - The container title
 * @param {Array} props.items - The container items, each of which consists of subitems
 * @param {bool} [props.dangerousCategoryTitle] - section title
 * @param {bool} [props.shouldEnableCardLevelBookmark] - Optional flag to enable bookmarks on bundle page
 * @param {bool} [props.shouldEnableCommentsCount] - Optional flag to enable comments count on bundle page
 * @param {boolean} [props.shouldEnableBundleComponentAnalytics] - feature flag to append data-section-title attribute for analytics
 * @param {boolean} [props.shouldEnableBookmarkDrawers] - flag to enable bookmark drawer functionality
 *
 * @returns {ReactElement} <>
 */
const BestStories = ({ dangerousDek = '', dangerousHed = "Todays's Pick", items = [], dangerousCategoryTitle = 'Most Recent', shouldEnableBundleComponentAnalytics = false, shouldEnableBookmarkDrawers = false, shouldEnableCardLevelBookmark = false, shouldEnableCommentsCount = false }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'BestStories'
        });
    }, []);
    // First 3 items for Today's pick
    const sumCollageFourItems = items.slice(0, 3);
    // last 5 items for Most Recent
    const sumListItems = items.slice(3, 8);
    if (items.length === 12) {
        return (React.createElement(SummaryCollageTweleve, { dangerousHed: dangerousHed, dangerousDek: dangerousDek, items: items, rightColumnFeature: {
                header: '',
                itemIndex: 0,
                hideOnMobile: false,
                overrideFeaturedLinks: false
            }, shouldTrackSnowplowEvent: true, shouldUseDekAsHed: true, hasUnderlineHed: false, hideRubricItemSummary: true, isCenterAlignedWithTopDividerOnly: true, shouldHideBylines: false, summaryItemVariation: "TextBelowLeft", summaryListHed: dangerousCategoryTitle, summaryListSummaryItemVariation: "SideBySideThirdsImageRight", summaryItemRubricVariation: "DiscoveryItem", summarySectionTitleVariation: "TextLeftLineAboveWithHedBackground", sectionTitleVariation: "TextLeftLineAboveWithHedBackground", isBestStories: true }));
    }
    return (React.createElement(SummaryCollageEight, { dangerousHed: dangerousHed, dangerousDek: dangerousDek, dangerousCategoryTitle: dangerousCategoryTitle, items: items, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, sumCollageFourItems: sumCollageFourItems, sumListItems: sumListItems, shouldEnableBookmarkDrawers: shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark: shouldEnableCardLevelBookmark, shouldEnableCommentsCount: shouldEnableCommentsCount }));
};
BestStories.propTypes = {
    dangerousCategoryTitle: PropTypes.string,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    items: PropTypes.array,
    shouldEnableBookmarkDrawers: PropTypes.bool,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldEnableCardLevelBookmark: PropTypes.bool,
    shouldEnableCommentsCount: PropTypes.bool
};
BestStories.displayName = 'BestStories';
module.exports = BestStories;
//# sourceMappingURL=BestStories.js.map

/***/ }),

/***/ 31498:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const BestStories = __webpack_require__(56141);
module.exports = asConfiguredComponent(BestStories, 'BestStories');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 26066:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { default: JsonmlToReact } = __webpack_require__(1165);
const { TrackComponentChannel } = __webpack_require__(78788);
const { processLinks, processCeros, processTiktok, processSidebarHeadings } = __webpack_require__(74804);
const BlockquoteEmbed = __webpack_require__(57885);
const BlueskyEmbed = __webpack_require__(49033);
const RedditEmbed = __webpack_require__(97883);
const mapInlineEmbeds = __webpack_require__(51009);
const { BodyWrapper } = __webpack_require__(29912);
// Create instance with custom converters
const jsonmlToReact = new JsonmlToReact({
    a: processLinks,
    blockquote: ({ props }) => ({ type: BlockquoteEmbed, props }),
    bluesky: ({ props }) => ({ type: BlueskyEmbed, props }),
    reddit: ({ meta, ...props }) => {
        return {
            type: RedditEmbed,
            props: {
                ...props,
                ...JSON.parse(decodeURIComponent(meta))
            }
        };
    },
    ceros: processCeros,
    h2: processSidebarHeadings,
    tiktok: processTiktok,
    'inline-embed': mapInlineEmbeds
});
/**
 * Body component renders body formated as JsonML as react components
 *
 * @param {object} props - React props
 * @param {Array} props.body - Required body formatted as JsonML document.
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.children] - Optional instance with custom converters
 * @param {boolean} [props.shouldDisableMaxWidth] - Optional makes sure content spans across the screen for screen widths > 1600px (FeatureLargeCallout)
 * @param {boolean} [props.shouldEnableDataJourneyHook] - optional to add `data-journey-hook` attr based on this flag
 * @param {boolean} [props.shouldEnableFullArticleInverted] - Optional flag to enable full inverted article
 *
 * @returns {ReactElement} <div>
 */
const Body = ({ body = ['div'], className, children, shouldDisableMaxWidth = false, shouldEnableDataJourneyHook = true, shouldEnableFullArticleInverted }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'Body'
        });
    }, []);
    const bodyProps = {
        className: classnames('body', className),
        shouldDisableMaxWidth,
        shouldEnableFullArticleInverted
    };
    if (shouldEnableDataJourneyHook) {
        bodyProps['data-journey-hook'] = 'client-content';
    }
    return (React.createElement(BodyWrapper, { ...bodyProps, "data-testid": "BodyWrapper" }, children || jsonmlToReact.convert(body)));
};
Body.propTypes = {
    body: PropTypes.array,
    children: PropTypes.node,
    className: PropTypes.string,
    shouldDisableMaxWidth: PropTypes.bool,
    shouldEnableDataJourneyHook: PropTypes.bool,
    shouldEnableFullArticleInverted: PropTypes.bool
};
module.exports = Body;
//# sourceMappingURL=Body.js.map

/***/ }),

/***/ 22652:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(26066);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 29912:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { calculateSpacing, getColorToken, getTypographyStyles, getLinkStyles, styledProperty, getColorStyles, firstLetterDropCap } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { AssetEmbedWrapper } = __webpack_require__(41108);
const { ContentPromoEmbedHedWrapper } = __webpack_require__(63665);
const { universalGridCore } = __webpack_require__(89085);
const { CaptionCredit, CaptionText } = __webpack_require__(38860);
const { ButtonCalloutWrapper } = __webpack_require__(65881);
const BodyWrapper = styled.div.withConfig({
    displayName: 'BodyWrapper'
}) `
  ${getTypographyStyles('typography.definitions.consumptionEditorial.body-core')}
  padding: 0;
  max-width: ${BREAKPOINTS.xxl};
  color: ${getColorToken('colors.consumption.body.standard.body')};

  ${styledProperty('shouldDisableMaxWidth', true, `@media (min-width: ${BREAKPOINTS.fullBleed}) {
      max-width: none;
    }`)}

  hr {
    clear: both;
    margin: ${calculateSpacing(5, 'px')} auto;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: ${calculateSpacing(2, 'px')} 0;
    color: ${getColorToken('colors.consumption.body.standard.subhed')};
  }

  h2,
  h3,
  h4,
  h5 {
    margin-top: ${calculateSpacing(5, 'px')};
  }

  h1,
  ${ContentPromoEmbedHedWrapper}, h2 {
    ${getTypographyStyles('typography.definitions.consumptionEditorial.subhed-break-primary')}
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    ${({ shouldEnableFullArticleInverted, theme }) => shouldEnableFullArticleInverted &&
    `color: ${getColorToken(theme, 'colors.consumption.body.inverted.subhed')}`}
  }

  h3 {
    ${getTypographyStyles('typography.definitions.consumptionEditorial.subhed-break-secondary')}
  }

  h4,
  h5,
  h6 {
    ${getTypographyStyles('typography.definitions.consumptionEditorial.body-core')}

    font-weight: bold;
  }

  hr {
    border: 0;
    background: ${getColorToken('colors.consumption.body.standard.divider')};
    height: 2px;
  }

  .body__container > p,
  .container--body-inner > p,
  .container--full-inner > p {
    margin: ${calculateSpacing(2, 'px')} 0;
  }

  a:not(.button) {
    ${({ theme }) => getLinkStyles(theme, 'colors.consumption.body.standard.link', 'colors.consumption.body.standard.link-hover')}
    transition: color 200ms ease;
  }

  p {
    a,
    strong,
    em {
      line-height: inherit;
    }
  }

  ol,
  ul {
    margin: ${calculateSpacing(2, 'px')} 0 ${calculateSpacing(2, 'px')}
      ${calculateSpacing(4)};
    padding: 0;

    li {
      margin-left: ${calculateSpacing(2)};
    }
  }

  && {
    ${AssetEmbedWrapper} {
      display: block;
      margin: 0 auto ${calculateSpacing(3, 'px')} auto;
      padding: 0;
      width: 100%;

      img {
        width: 100%;
        height: auto;
      }

      &.callout--group-item-1 {
        margin: 0 auto ${calculateSpacing(5, 'px')} auto;
      }
      ${({ shouldEnableFullArticleInverted, theme }) => shouldEnableFullArticleInverted &&
    `
      ${CaptionText}, ${CaptionCredit} {
        color: ${getColorStyles(theme, 'color', 'colors.consumption.lead.inverted.description')};
      }`}
    }
  }

  .heading-h1,
  .heading-h2,
  .heading-h3,
  .heading-h4,
  .heading-h5,
  .heading-h6 {
    margin: ${calculateSpacing(2, 'px')} 0;
    color: ${getColorToken('colors.consumption.body.standard.subhed')};
  }

  .heading-h2,
  .heading-h3,
  .heading-h4,
  .heading-h5 {
    margin-top: ${calculateSpacing(5, 'px')};
  }

  .heading-h1,
  .heading-h2 {
    ${getTypographyStyles('typography.definitions.consumptionEditorial.subhed-break-primary')}
  }

  .heading-h3 {
    ${getTypographyStyles('typography.definitions.consumptionEditorial.subhed-break-secondary')}
  }

  .heading-h1,
  .heading-h2,
  .heading-h3,
  .heading-h4,
  .heading-h5,
  .heading-h6 {
    ${({ shouldEnableFullArticleInverted, theme }) => shouldEnableFullArticleInverted &&
    `color: ${getColorToken(theme, 'colors.consumption.body.inverted.subhed')}`}
  }

  .heading-h4 {
    ${getTypographyStyles('typography.definitions.consumptionEditorial.subhed-aux-primary')}
  }

  .heading-h5,
  .heading-h6 {
    ${getTypographyStyles('typography.definitions.consumptionEditorial.subhed-aux-secondary')}
  }

  &.body__container {
    p.has-dropcap {
      &::first-letter {
        ${firstLetterDropCap};
      }

      &.has-dropcap__lead-standard-heading {
        &::first-letter {
          padding: 0.1em 0.05em 0 0;
          color: ${getColorToken('colors.consumption.lead.standard.heading')};
        }
      }
    }
  }

  .container--full,
  .container--body {
    ${universalGridCore()}
  }

  .container + .container {
    margin-top: ${calculateSpacing(-2)};
  }

  .container--full-inner {
    grid-column: 1 / -1;
  }

  .container--body-inner {
    grid-column: 1 / -1;

    @media (min-width: ${BREAKPOINTS.md}) {
      grid-column: 3 / span 8;
    }
  }

  .container:first-of-type {
    .body__container > *:first-child,
    .container--body-inner > *:first-child,
    .container--full-inner > *:first-child {
      margin-top: 0;

      *:first-child {
        margin-top: 0;
      }
    }
  }

  .lead-in-text-callout {
    ${getTypographyStyles('typography.definitions.discovery.hed-bulletin-primary')}
    display: inline-block;
    margin-top: 50px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }

  .lead-in-text-callout:first-of-type {
    margin-top: 0;
  }
  ${({ shouldEnableFullArticleInverted, theme }) => shouldEnableFullArticleInverted &&
    `
  ${ButtonCalloutWrapper} {
    a {
      background: white;
    }
    span {
      color: black;
    }
  
      a {
        &:hover {
        border-color: ${getColorToken(theme, 'colors.consumption.body.inverted.link')};
        border-width: 2px;
        border-style: solid;
        background-color: ${getColorToken(theme, 'colors.consumption.body.inverted.link')};
        }
        &:active {
          border-color: ${getColorToken(theme, 'colors.consumption.body.inverted.link')};
          border-width: 2px;
          border-style: solid;
          background-color: ${getColorToken(theme, 'colors.consumption.body.inverted.link')};
          }
      }
      span {
        &:hover {
          color: ${getColorToken(theme, 'colors.interactive.base.white')};
        }
        &:active {
          color: ${getColorToken(theme, 'colors.interactive.base.white')};
        }
      }
  } `}
`;
module.exports = {
    BodyWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 62077:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { BREAKPOINTS } = __webpack_require__(96472);
const { applyGridSpacing, cssVariablesGrid } = __webpack_require__(1123);
const { minScreen, calculateSpacing, getColorToken, getTypographyStyles, firstLetterDropCap } = __webpack_require__(26865);
const { maxThresholds } = __webpack_require__(99906);
const Body = __webpack_require__(22652);
const Clamp = __webpack_require__(48286);
const { AssetEmbedWrapper, AssetEmbedAssetContainer } = __webpack_require__(41108);
const Wrapper = styled.div.withConfig({ displayName: 'Wrapper' }) `
  ${cssVariablesGrid()}

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--grid-gap);
  margin: 0 auto;
  width: 100%;
  max-width: ${BREAKPOINTS.xxl};
  row-gap: var(--grid-gap);
  ${applyGridSpacing('padding')}

  ${minScreen(BREAKPOINTS.md)} {
    grid-template-columns: repeat(12, 1fr);
  }
`;
const BundleBodyClamp = styled(Clamp).withConfig({
    displayName: 'BundleBodyClamp'
}) `
  grid-column: 1/-1;

  ${minScreen(BREAKPOINTS.md)} {
    grid-column: 3/11;
  }
`;
const BundleBodyContainer = styled(Body).withConfig({
    displayName: 'BundleBodyContainer'
}) `
  grid-column: 1/-1;

  ${minScreen(BREAKPOINTS.md)} {
    grid-column: 3/11;
  }

  ${({ shouldOverrideTypeToken }) => shouldOverrideTypeToken
    ? getTypographyStyles(`typography.definitions.consumptionEditorial.body-core`)
    : getTypographyStyles('typography.definitions.consumptionEditorial.subhed-aux-secondary')}

  @media (max-width: ${maxThresholds.md}px) {
    ${({ shouldOverrideTypeToken }) => shouldOverrideTypeToken
    ? getTypographyStyles(`typography.definitions.consumptionEditorial.body-core`)
    : getTypographyStyles('typography.definitions.consumptionEditorial.body-core')};
  }

  p:first-child {
    padding-top: ${calculateSpacing(4)};
    @media (min-width: ${BREAKPOINTS.lg}) {
      padding-top: ${calculateSpacing(9)};
    }
  }

  p.callout--group-item {
    padding-top: 0;
  }

  p.has-dropcap {
    margin-top: ${calculateSpacing(4, 'px')};

    &::first-letter {
      ${firstLetterDropCap};
    }

    &.has-dropcap__lead-standard-heading {
      &::first-letter {
        padding: 0.1em 0.05em 0 0;
        color: ${getColorToken('colors.consumption.lead.standard.heading')};
        @media (min-width: ${BREAKPOINTS.lg}) {
          font-size: 95px; /* Defined by design */
        }
      }
    }
  }
  ${({ shouldOverrideSpacing }) => shouldOverrideSpacing &&
    `
    h2,
    h3,
    h4,
    h5 {
      margin: ${calculateSpacing(5, 'px')} 0;
    }
    `}

  ${AssetEmbedWrapper} {
    display: grid;
    grid-gap: 1.25rem;
    grid-template-columns: repeat(4, 1fr);

    @media (min-width: ${BREAKPOINTS.md}) {
      grid-template-columns: repeat(8, 1fr);
    }

    ${AssetEmbedAssetContainer} {
      grid-column: 2 / span 2;

      @media (min-width: ${BREAKPOINTS.md}) {
        grid-column: 3 / span 4;
      }
    }
  }
`;
module.exports = { Wrapper, BundleBodyClamp, BundleBodyContainer };
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 66413:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const isEmpty = __webpack_require__(62193);
const isEqual = __webpack_require__(2404);
const { useState, useRef, useEffect, useMemo, useCallback } = __webpack_require__(96540);
const ArrowIcon = __webpack_require__(69571);
const useLazyLoadComponent = __webpack_require__(70920);
const { TrackComponentChannel } = __webpack_require__(78788);
const { ProductCardWithTracking: UPCProductEmbed } = __webpack_require__(57631);
const { carouselContentClassName, carouselItemClassName, getAssetWidth, getAssetHeightSmBasedOnContent, getCurrentIndexes, isBackwardArrowActive, isForwardArrowActive, onScrollComplete, onResizeComplete, scrollBackward, scrollForward } = __webpack_require__(30668);
const { MixedMediaCarouselWrapper, MixedMediaCarouselContent, MixedMediaCarouselItem, MixedMediaCarouselImageWrapper, MixedMediaCarouselImage, MixedMediaCarouselTextWrapper, MixedMediaCarouselTextDek, MixedMediaCarouselTextCaption, MixedMediaCarousel, MixedMediaCarouselFooter, MixedMediaCarouselButton, MixedMediaCarouselButtonWrapper } = __webpack_require__(31243);
const MinimalVideo = __webpack_require__(56153);
const { inlineEmbedPosition } = __webpack_require__(62327);
const CNE_VIDEO = 'cneembed';
// Default asset width for product slides and slides without images
const DEFAULT_ASSET_WIDTH = { sm: '250px', lg: '500px' };
/**
 * CarouselMixedAspectRatio component
 *
 * @param {object} props - React props
 * @param {string} [props.slides] - Array of gallery items
 * @param {string} [props.textAlign] - optional prop that represents alignment of gallery item text
 *
 * @returns {ReactElement} <div>
 */
const CarouselMixedAspectRatio = ({ slides = [], textAlign = 'center' }) => {
    useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'CarouselMixedAspectRatio'
        });
    }, []);
    const [lazyLoadElementRef, shouldLoadComponent] = useLazyLoadComponent();
    const hasDataLayer =  true && window.dataLayer;
    // Sample of currentIndexes:
    // currentIndexes: {
    //   firstFullyVisibleItemIndex: 0
    //   lastPartiallyVisibleItemIndex: 2
    // }
    const [currentIndexes, setCurrentIndexes] = useState({});
    const currentIndexesRef = useRef(currentIndexes);
    const firstFullyVisibleItemIndexKey = 'firstFullyVisibleItemIndex';
    const lastPartiallyVisibleItemIndexKey = 'lastPartiallyVisibleItemIndex';
    const carouselRef = useRef(null);
    const updateCurrentIndexes = () => {
        // Update indexes array
        let prevFirstFullyVisibleItemIndex = 0;
        let prevLastPartialVisibleItemIndex = 0;
        if (!isEmpty(currentIndexesRef?.current)) {
            prevFirstFullyVisibleItemIndex =
                currentIndexesRef.current[firstFullyVisibleItemIndexKey];
            prevLastPartialVisibleItemIndex =
                currentIndexesRef.current[lastPartiallyVisibleItemIndexKey];
        }
        const newIndexes = getCurrentIndexes(carouselRef, prevFirstFullyVisibleItemIndex, prevLastPartialVisibleItemIndex);
        // Update state only if indexes are different
        if (!isEqual(newIndexes, currentIndexes)) {
            currentIndexesRef.current = newIndexes;
            setCurrentIndexes(newIndexes);
        }
    };
    const initialiseButtons = () => {
        // Initialisation of indexes array in order to compute
        // activeForwardButton and activeBackwardButton
        if (isEmpty(currentIndexes)) {
            updateCurrentIndexes();
        }
    };
    const operationStopCallback = useCallback(() => {
        // Update indexes only if it is a mounted component
        if (carouselRef.current) {
            updateCurrentIndexes();
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    // Only the first video in the carousel should autoplay
    // Only first and 4th video in the carousel should call the ADVs
    // Force 9x16 aspect ratio to properly serve portrait videos
    // We can rewrite this rule when we will have the cnevideo aspect-ratio or width/height from the content APIs
    const prepareScriptSrcCarousel = (scriptUrl, videoCounter) => {
        let newScripturl = scriptUrl;
        const connector = scriptUrl.includes('?') ? '&' : '?';
        if (videoCounter === 0)
            newScripturl += `${connector}autoplay=1&muted=1&continuousPlay=0&hideHoverTitle=true&loopVideo=1&hasAnimatedThumb=1&aspectRatio=9x16`;
        else if (videoCounter === 3)
            newScripturl += `${connector}autoplay=0&muted=0&continuousPlay=0&hideHoverTitle=true&loopVideo=1&hasAnimatedThumb=1&aspectRatio=9x16`;
        else
            newScripturl += `${connector}adsDisabled=1&autoplay=0&muted=0&continuousPlay=0&hideHoverTitle=true&loopVideo=1&hasAnimatedThumb=1&aspectRatio=9x16`;
        return newScripturl;
    };
    useEffect(() => {
        let carouselWrapperEl = carouselRef.current;
        if (carouselWrapperEl) {
            initialiseButtons();
            carouselWrapperEl.addEventListener('scroll', onScrollComplete(operationStopCallback), true);
            window.addEventListener('resize', onResizeComplete(operationStopCallback));
        }
        return () => {
            if (carouselWrapperEl) {
                carouselWrapperEl.removeEventListener('scroll', onScrollComplete);
                window.removeEventListener('resize', onResizeComplete);
                carouselWrapperEl = null;
                carouselRef.current = null;
                currentIndexesRef.current = {};
            }
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    const activeForwardButton = useMemo(() => currentIndexes && isForwardArrowActive(carouselRef), [currentIndexes]);
    const activeBackwardButton = useMemo(() => currentIndexes && isBackwardArrowActive(carouselRef), [currentIndexes]);
    const handleForwardClick = () => {
        if (activeForwardButton) {
            let lastPartiallyVisibleItemIndex = Math.min(currentIndexes[lastPartiallyVisibleItemIndexKey], slides.length - 1);
            // Below is an edge case handled when the carousel item width and carousel container width both are equal
            if (currentIndexes[lastPartiallyVisibleItemIndexKey] === 0) {
                lastPartiallyVisibleItemIndex += 1; // lastPartiallyVisibleItemIndex = 0 but incrementing it by 1 will set next item index as 1
            }
            scrollForward(carouselRef, lastPartiallyVisibleItemIndex);
        }
        hasDataLayer &&
            window.dataLayer.push({ event: 'carousel-right-arrow-click' });
    };
    const handleBackwardClick = () => {
        if (activeBackwardButton) {
            const firstFullyVisibleItemIndex = Math.max(currentIndexes[firstFullyVisibleItemIndexKey], 0);
            scrollBackward(carouselRef, firstFullyVisibleItemIndex);
        }
        hasDataLayer &&
            window.dataLayer.push({ event: 'carousel-left-arrow-click' });
    };
    const recomputeIndexes = (assetWidth) => {
        if (!assetWidth?.lg || !assetWidth?.sm) {
            updateCurrentIndexes();
        }
    };
    const isSlideValid = (slide) => {
        // if the slide is a CNE_VIDEO, there is no image, but the scriptUrl prop has some value
        // so we need to check it and return true since it's a valid content type
        if (!slide)
            return false;
        const imageToCheck = Array.isArray(slide?.image)
            ? slide.image[0]
            : slide?.image;
        return (imageToCheck && imageToCheck.sources) || slide.scriptUrl;
    };
    const isProductSlide = (slide) => {
        return slide && ['product', 'commerce-product'].includes(slide.contentType);
    };
    // Early bail if no slides
    if (slides.length === 0) {
        return null;
    }
    const assetHeightSmBasedOnContent = getAssetHeightSmBasedOnContent(slides);
    const updatedSlides = slides.map((slide) => {
        if (slide?.children) {
            const updatedSlide = {
                ...slide.children?.props?.children?.props,
                href: slide?.children?.props?.href,
                target: slide?.children?.props?.target
            };
            return updatedSlide;
        }
        return slide;
    });
    let videoCounter = 0;
    return (React.createElement(React.Fragment, null,
        React.createElement(MixedMediaCarousel, null,
            React.createElement(MixedMediaCarouselWrapper, { ref: carouselRef },
                React.createElement(MixedMediaCarouselContent, { className: carouselContentClassName, ref: lazyLoadElementRef }, shouldLoadComponent &&
                    updatedSlides.filter(isSlideValid).map((slide, index) => {
                        const { dangerousCaption, dangerousCredit, dangerousDek, dangerousHed, scriptUrl, contentType, image: rawImage, href, target } = slide;
                        const image = Array.isArray(rawImage) ? rawImage[0] : rawImage;
                        const updatedSlide = { ...slide, image };
                        const isCNEVideo = contentType === CNE_VIDEO;
                        const isProduct = isProductSlide(slide);
                        const product_asset_width = { sm: '150px', lg: '300px' };
                        let assetWidth = DEFAULT_ASSET_WIDTH;
                        if (isProduct && image) {
                            assetWidth = product_asset_width;
                        }
                        else if (image && !isProduct) {
                            assetWidth = getAssetWidth(image, assetHeightSmBasedOnContent);
                        }
                        // updateIndex to enable arrow buttons
                        if (index === slides.length - 1)
                            updateCurrentIndexes();
                        // Render UnifiedProductCard for product slides
                        if (isProduct) {
                            return (React.createElement(MixedMediaCarouselItem, { key: `asset-${index}`, assetWidth: assetWidth, isCNEVideo: false, className: carouselItemClassName },
                                React.createElement(UPCProductEmbed, { slide: updatedSlide, index: index, dangerousHed: dangerousHed, ...updatedSlide, type: "card", isLazy: true, componentConfigOverride: { type: 'card' }, data_item: {
                                        ...updatedSlide,
                                        id: slide.productId || slide.id,
                                        brand: {
                                            name: slide.productBrand || slide.brand
                                        },
                                        offers: slide.multipleOffers || slide.offers,
                                        index,
                                        component: 'unified_product_card_slideshow'
                                    }, brand: slide.productBrand || slide.brand, name: slide.name || dangerousHed, offers: slide.multipleOffers || slide.offers, hasImageCreditText: false, shouldDisableCreditText: slide.shouldDisableCreditText })));
                        }
                        return (React.createElement(MixedMediaCarouselItem, { key: `asset-${index}`, "data-carousel-item": "", assetWidth: assetWidth, isCNEVideo: isCNEVideo, assetHeightSmBasedOnContent: assetHeightSmBasedOnContent, className: carouselItemClassName },
                            React.createElement(MixedMediaCarouselImageWrapper, { isCNEVideo: isCNEVideo, assetHeightSmBasedOnContent: assetHeightSmBasedOnContent }, isCNEVideo && scriptUrl ? (React.createElement(MinimalVideo, { scriptUrl: prepareScriptSrcCarousel(scriptUrl, videoCounter++), hidePosterTitle: true, shouldGoFullScreenOnPlay: false, videoEmbedPosition: inlineEmbedPosition })) : (React.createElement(React.Fragment, null, href ? (React.createElement("a", { href: href, target: target },
                                React.createElement(MixedMediaCarouselImage, { ...image, isLazy: true, assetWidth: assetWidth, assetHeightSmBasedOnContent: assetHeightSmBasedOnContent, 
                                    // Recompute indexes if asset width for images or clips is null
                                    // due to not being able to compute width for images
                                    // due to missing information (sources/aspectRatio)
                                    // for the correct scrollBehaviour and updating arrows
                                    onAssetLoaded: () => {
                                        recomputeIndexes(assetWidth);
                                    }, onAssetContainerLoaded: () => {
                                        recomputeIndexes(assetWidth);
                                    } }))) : (React.createElement(MixedMediaCarouselImage, { ...image, isLazy: true, assetWidth: assetWidth, assetHeightSmBasedOnContent: assetHeightSmBasedOnContent, onAssetLoaded: () => {
                                    recomputeIndexes(assetWidth);
                                }, onAssetContainerLoaded: () => {
                                    recomputeIndexes(assetWidth);
                                } }))))),
                            React.createElement(MixedMediaCarouselTextWrapper, { isCNEVideo: isCNEVideo, textAlign: textAlign },
                                dangerousHed && (React.createElement(MixedMediaCarouselTextDek, { dangerouslySetInnerHTML: {
                                        __html: dangerousHed
                                    } })),
                                dangerousDek && (React.createElement(MixedMediaCarouselTextDek, { dangerouslySetInnerHTML: {
                                        __html: dangerousDek
                                    } })),
                                dangerousCredit && (React.createElement(MixedMediaCarouselTextCaption, { dangerouslySetInnerHTML: {
                                        __html: dangerousCredit
                                    } })),
                                dangerousCaption && (React.createElement(MixedMediaCarouselTextDek, { dangerouslySetInnerHTML: {
                                        __html: dangerousCaption
                                    } })))));
                    }))),
            React.createElement(MixedMediaCarouselFooter, null,
                React.createElement(MixedMediaCarouselButtonWrapper, null,
                    React.createElement(MixedMediaCarouselButton, { onClick: handleBackwardClick, direction: "back", disabled: !activeBackwardButton },
                        React.createElement(ArrowIcon, null)),
                    React.createElement(MixedMediaCarouselButton, { onClick: handleForwardClick, direction: "forward", disabled: !activeForwardButton },
                        React.createElement(ArrowIcon, null)))))));
};
CarouselMixedAspectRatio.propTypes = {
    slides: PropTypes.arrayOf(PropTypes.object),
    textAlign: PropTypes.string
};
CarouselMixedAspectRatio.displayName = 'CarouselMixedAspectRatio';
module.exports = CarouselMixedAspectRatio;
//# sourceMappingURL=CarouselMixedAspectRatio.js.map

/***/ }),

/***/ 57631:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useInView } = __webpack_require__(26855);
const { trackCommerceInteractionEvent } = __webpack_require__(14307);
const UnifiedProductCard = __webpack_require__(51125);
const { normalizePrice } = __webpack_require__(65947);
const trackedProductCards = new Set();
const trackingImpressionEvent = ({ slide, index }) => {
    const productId = `${slide.productId || slide.id}-${index}`;
    // Check if already tracked
    if (trackedProductCards.has(productId)) {
        return;
    }
    trackedProductCards.add(productId);
    const primaryOffer = slide.multipleOffers?.[0] || slide.offers?.[0] || {};
    const price = normalizePrice(primaryOffer.price);
    const reducedPrice = normalizePrice(primaryOffer.reducedPrice);
    const hasDiscount = reducedPrice && price && price > reducedPrice;
    const discountAmount = hasDiscount ? price - reducedPrice : null;
    const discountPercentage = hasDiscount
        ? Math.round(((price - reducedPrice) / price) * 100)
        : null;
    const productData = {
        product_brand: slide.productBrand || slide.brand || '',
        product_id: slide.productId || slide.id || '',
        product_name: slide.name || slide.dangerousHed || '',
        index,
        product_price: price,
        is_product_discount: hasDiscount || false,
        product_discount_amount: discountAmount,
        product_discount_perc: discountPercentage,
        currency_code: primaryOffer.currency || 'USD',
        product_component: 'unified_product_card_slideshow',
        product_rating: slide.rating || null,
        product_ref: 'Copilot',
        product_type: slide.contentType,
        product_system: 'commerce'
    };
    const eventData = {
        type: 'impression',
        subject: 'unified_product_card_slideshow'
    };
    trackCommerceInteractionEvent(eventData, productData);
};
const ProductCardWithTracking = ({ slide, index, ...props }) => {
    const [ref, isInView] = useInView({
        threshold: 1,
        trackVisibility: true,
        delay: 100,
        triggerOnce: true
    });
    if (isInView) {
        trackingImpressionEvent({ slide, index });
    }
    return (React.createElement("div", { ref: ref },
        React.createElement(UnifiedProductCard, { ...props })));
};
ProductCardWithTracking.propTypes = {
    index: PropTypes.number.isRequired,
    slide: PropTypes.object.isRequired
};
module.exports = {
    ProductCardWithTracking
};
//# sourceMappingURL=event-tracking.js.map

/***/ }),

/***/ 38337:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(66413);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 31243:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const ResponsiveAsset = __webpack_require__(73275);
const { calculateSpacing, getColorToken, getTypographyStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { assetHeightForLgViewport, carouselItemMarginUnit, itemMargins } = __webpack_require__(30668);
const MixedMediaCarousel = styled.div.withConfig({
    displayName: 'MixedMediaCarousel'
}) `
  position: relative;
  width: 100%;
`;
const MixedMediaCarouselWrapper = styled.div.withConfig({
    displayName: 'MixedMediaCarouselWrapper'
}) `
  width: 100%;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth;

  &::-webkit-scrollbar {
    display: none;
  }
`;
const MixedMediaCarouselContent = styled.div.withConfig({
    displayName: 'MixedMediaCarouselContent'
}) `
  display: flex;
  min-height: 250px;
`;
// Setting the max-width so that the asset fits within the MixedMediaCarouselWrapper container
const maxAssetWidth = `calc(100% - ${itemMargins}px)`;
const MixedMediaCarouselItem = styled.div.withConfig({
    displayName: 'MixedMediaCarouselItem'
}) `
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin: 0 ${calculateSpacing(carouselItemMarginUnit)};
  max-width: ${maxAssetWidth};

  ${({ assetWidth }) => assetWidth && assetWidth.sm && `width: ${assetWidth.sm}`};

  @media (min-width: ${BREAKPOINTS.md}) {
    ${({ assetWidth }) => assetWidth && assetWidth.lg && `width: ${assetWidth.lg}`};
  }

  ${({ isCNEVideo, assetHeightSmBasedOnContent }) => isCNEVideo &&
    assetHeightSmBasedOnContent &&
    `
    &&& {
      /* div[data-testid="RowWrapper"] & { put rules here to target only the slideshow in 'fullbleed' mode } */
      /* force 9x16 video size */
      width: calc(${assetHeightSmBasedOnContent}px * 9 / 16);
  
      @media (min-width: ${BREAKPOINTS.md}) {
        width: calc(${assetHeightForLgViewport}px * 9 / 16);
      }  
      }
    }
  `};

  &:first-of-type {
    margin-left: 0;
  }

  &:last-of-type {
    margin-right: 0;
  }

  figure {
    margin: auto 0;
  }

  video {
    width: auto;
    max-width: 100%;
    ${({ assetHeightSmBasedOnContent }) => assetHeightSmBasedOnContent &&
    `max-height: ${assetHeightSmBasedOnContent}px`};
  }
  @media (min-width: ${BREAKPOINTS.md}) {
    video {
      height: ${assetHeightForLgViewport}px;
      max-height: inherit;
    }
  }
`;
const MixedMediaCarouselImageWrapper = styled.div.withConfig({
    displayName: 'MixedMediaCarouselImageWrapper'
}) `
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: ${getColorToken('colors.consumption.body.standard.bg-photo')};

  ${({ assetHeightSmBasedOnContent }) => assetHeightSmBasedOnContent && `height: ${assetHeightSmBasedOnContent}px`};

  @media (min-width: ${BREAKPOINTS.md}) {
    height: ${assetHeightForLgViewport}px;
  }
`;
const MixedMediaCarouselImage = styled(ResponsiveAsset).withConfig({
    displayName: 'MixedMediaCarouselImage'
}) `
  ${({ assetHeightSmBasedOnContent }) => assetHeightSmBasedOnContent &&
    `max-height: ${assetHeightSmBasedOnContent}px`};

  ${({ assetWidth }) => assetWidth && assetWidth.sm && `width: 100%`};

  @media (min-width: ${BREAKPOINTS.md}) {
    max-height: ${assetHeightForLgViewport}px;
    ${({ assetWidth }) => assetWidth && assetWidth.lg && `width: 100%`};
  }

  img {
    width: 100%;

    ${({ assetHeightSmBasedOnContent }) => assetHeightSmBasedOnContent &&
    `max-height: ${assetHeightSmBasedOnContent}px`};

    @media (min-width: ${BREAKPOINTS.md}) {
      max-height: ${assetHeightForLgViewport}px;
    }
  }

  &::after {
    width: 100%;
    height: 100%;
  }

  .responsive-clip {
    width: auto;
    vertical-align: middle;
  }
`;
const MixedMediaCarouselTextWrapper = styled.div.withConfig({
    displayName: 'MixedMediaCarouselTextWrapper'
}) `
  align-items: center;
  margin-top: ${calculateSpacing(2)};
  padding: 0 ${calculateSpacing(1)};
  min-width: 100%;
  text-align: ${({ textAlign }) => textAlign};
  font-size: 13px;

  p {
    display: inline;
    text-align: center;
  }
`;
const MixedMediaCarouselTextDek = styled.span.withConfig({
    displayName: 'MixedMediaCarouselTextDek'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.description-core')}
  display: inline-block;
  margin: 0 ${calculateSpacing(1)} 0 0;
  vertical-align: top;
  color: ${getColorToken('colors.discovery.body.light.description')};
  font-size: 16px;

  p {
    display: inline;
  }
`;
const MixedMediaCarouselTextCaption = styled.span.withConfig({
    displayName: 'MixedMediaCarouselTextCaption'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-secondary')}
  display: block;
  margin: 0 0 0.3rem 0;
  vertical-align: top;
  color: ${getColorToken('colors.consumption.body.standard.body-deemphasized')};

  p {
    display: inline;
  }
`;
const MixedMediaCarouselFooter = styled.div.withConfig({
    displayName: 'MixedMediaCarouselFooter'
}) `
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 0.75rem;
`;
const MixedMediaCarouselButton = styled.button.withConfig({
    displayName: 'MixedMediaCarouselButton'
}) `
  margin-left: ${calculateSpacing(1)};
  background: transparent;
  padding-right: ${calculateSpacing(1)};
  padding-left: ${calculateSpacing(1)};
  width: ${calculateSpacing(4)};
  height: ${calculateSpacing(4)};

  &:disabled svg {
    fill: ${({ theme }) => getColorToken(theme, 'colors.interactive.base.light')};
  }
  ${({ direction }) => direction === 'back' &&
    css `
      svg {
        transform: rotate(180deg);
        transform-origin: center;
      }
    `};
  ${({ direction }) => direction === 'forward' &&
    css `
      svg {
        transform-origin: center;
      }
    `};
`;
const MixedMediaCarouselButtonWrapper = styled.div.withConfig({
    displayName: 'MixedMediaCarouselButtonWrapper'
}) `
  display: flex;
  width: ${calculateSpacing(11)};
`;
module.exports = {
    MixedMediaCarousel,
    MixedMediaCarouselWrapper,
    MixedMediaCarouselContent,
    MixedMediaCarouselImageWrapper,
    MixedMediaCarouselItem,
    MixedMediaCarouselImage,
    MixedMediaCarouselTextWrapper,
    MixedMediaCarouselTextDek,
    MixedMediaCarouselTextCaption,
    MixedMediaCarouselFooter,
    MixedMediaCarouselButton,
    MixedMediaCarouselButtonWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 30668:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const debounce = __webpack_require__(38221);
const { gridSpacing } = __webpack_require__(26865);
const { mapSourcesToSegmentedSources } = __webpack_require__(52009);
const { isScrollAtEnd, isScrollAtStart } = __webpack_require__(30271);
let timeout;
const carouselContentClassName = 'MixedMediaCarouselContent';
const carouselItemClassName = 'MixedMediaCarouselItem';
const carouselItemMarginUnit = 1; // snap spacing to an 8px grid;
const itemMargins = 2 * carouselItemMarginUnit * gridSpacing;
const assetHeightForSmViewport = 250;
const assetHeightForSmViewportWithVideos = 400;
// const assetHeightForSmViewportMixedWithVideos = 305;
const assetHeightForLgViewport = 500;
const getCarouselEl = (ref) => ref?.current;
const getCarouselItemEls = (ref) => ref?.current?.querySelectorAll(`.${carouselContentClassName} div.${carouselItemClassName}`);
const getCarouselUtils = (ref) => {
    return {
        carouselEl: getCarouselEl(ref),
        carouselItemEls: getCarouselItemEls(ref) || []
    };
};
const calculateWidth = (aspectRatioString, assetHeight) => {
    if (aspectRatioString?.includes(':')) {
        const aspectRatioNumber = aspectRatioString.split(':').map(Number);
        const assetWidth = (assetHeight * aspectRatioNumber[0]) / aspectRatioNumber[1];
        if (isFinite(assetWidth)) {
            return `${assetWidth}px`;
        }
    }
    return null;
};
const getAspectRatio = (img) => {
    const aspectRatioForViewports = {};
    if (img) {
        const { segmentedSources, sources = {} } = img;
        const segmentedSourcesObject = segmentedSources ?? mapSourcesToSegmentedSources(sources);
        const { height: smHeight, width: smWidth, aspectRatio: smAspectRatio } = segmentedSourcesObject.sm[0] || {};
        const { height: lmHeight, width: lmWidth, aspectRatio: lmAspectRatio } = segmentedSourcesObject.lg[0] || {};
        aspectRatioForViewports.sm =
            smAspectRatio && smAspectRatio !== 'master'
                ? smAspectRatio
                : `${smWidth}:${smHeight}`;
        aspectRatioForViewports.lg =
            lmAspectRatio && lmAspectRatio !== 'master'
                ? lmAspectRatio
                : `${lmWidth}:${lmHeight}`;
    }
    return aspectRatioForViewports;
};
const getAssetWidth = (img, assetHeightSmBasedOnContent) => {
    // Early return if no img
    if (!img) {
        return {
            sm: null,
            lg: null
        };
    }
    const aspectRatioForViewports = getAspectRatio(img);
    return {
        sm: calculateWidth(aspectRatioForViewports?.sm, assetHeightSmBasedOnContent),
        lg: calculateWidth(aspectRatioForViewports?.lg, assetHeightForLgViewport)
    };
};
const onScrollComplete = (callback) => {
    return () => {
        clearTimeout(timeout);
        timeout = setTimeout(() => callback(), 50);
    };
};
const onResizeComplete = (callback) => debounce(callback, 300);
const isBackwardArrowActive = (ref) => {
    const el = getCarouselEl(ref);
    return el && !isScrollAtStart(el);
};
const isForwardArrowActive = (ref) => {
    const el = getCarouselEl(ref);
    // Below is an edge case handled when the carousel item width and carousel container width both are equal
    if (el && el.scrollLeft === 0 && el.scrollWidth === el.offsetWidth)
        return true;
    return el && !isScrollAtEnd(el);
};
const isLeftPartOfItemInViewport = (item, carouselEl) => {
    return item && item.offsetLeft >= carouselEl.scrollLeft;
};
const isRightPartOfItemInViewport = (item, carouselEl) => {
    if (item) {
        let itemRightMargin = itemMargins / 2;
        if (!item.nextElementSibling) {
            // Last child, no margin right
            itemRightMargin = 0;
        }
        return (item.offsetLeft + item.offsetWidth - itemRightMargin <=
            carouselEl.scrollLeft + carouselEl.offsetWidth);
    }
    return false;
};
const isItemHorizontallyFullyVisibleInViewport = (item, carouselEl) => {
    return (isLeftPartOfItemInViewport(item, carouselEl) &&
        isRightPartOfItemInViewport(item, carouselEl));
};
const getFirstFullyVisibleItemIndex = (ref, fromIndex = 0) => {
    const { carouselEl, carouselItemEls } = getCarouselUtils(ref);
    // Check if carousel has reached the start
    if (isScrollAtStart(carouselEl)) {
        return 0;
    }
    for (let index = fromIndex; index < carouselItemEls.length; index++) {
        const item = carouselItemEls[index];
        if (isItemHorizontallyFullyVisibleInViewport(item, carouselEl)) {
            return index;
        }
    }
    // Scenario where a match is not found, search through the remaining items
    // Backward click / left scroll scenarios
    for (let index = 0; index < fromIndex; index++) {
        const item = carouselItemEls[index];
        if (isItemHorizontallyFullyVisibleInViewport(item, carouselEl)) {
            return index;
        }
    }
    // Scenario where no image is fully visible in the viewport,
    // Set the fromIndex as the firstFullyVisibleIndex
    return -1;
};
const getLastPartiallyVisibleItemIndex = (ref, startIndex = 0) => {
    let lastPartiallyVisibleItemIndex = startIndex;
    const { carouselEl, carouselItemEls } = getCarouselUtils(ref);
    // Check if carousel has reached the end
    if (isScrollAtEnd(carouselEl)) {
        return carouselItemEls.length - 1;
    }
    for (let index = startIndex; index < carouselItemEls.length; index++) {
        const item = carouselItemEls[index];
        if (isLeftPartOfItemInViewport(item, carouselEl) &&
            !isRightPartOfItemInViewport(item, carouselEl)) {
            lastPartiallyVisibleItemIndex = index;
            break;
        }
        // End of carousel reached,
        // hence resetting lastPartiallyVisibleItemIndex to the last item index
        if (index === carouselItemEls.length - 1) {
            lastPartiallyVisibleItemIndex = carouselItemEls.length - 1;
        }
    }
    return lastPartiallyVisibleItemIndex;
};
const getCurrentIndexes = (ref, prevFirstFullyVisibleItemIndex, prevLastPartialVisibleItemIndex) => {
    const { carouselEl, carouselItemEls } = getCarouselUtils(ref);
    if (carouselItemEls.length > 0) {
        const startIndexForFindingFullyVisibleItemIndex = isScrollAtEnd(carouselEl)
            ? prevFirstFullyVisibleItemIndex
            : prevLastPartialVisibleItemIndex;
        let firstFullyVisibleItemIndex = getFirstFullyVisibleItemIndex(ref, startIndexForFindingFullyVisibleItemIndex);
        const startIndexForFindingLastPartiallyVisibleItemIndex = firstFullyVisibleItemIndex === -1 ? 0 : firstFullyVisibleItemIndex;
        const lastPartiallyVisibleItemIndex = getLastPartiallyVisibleItemIndex(ref, startIndexForFindingLastPartiallyVisibleItemIndex);
        // Reassign firstFullyVisibleItemIndex if no item is fully visible in viewport
        if (firstFullyVisibleItemIndex === -1) {
            firstFullyVisibleItemIndex = lastPartiallyVisibleItemIndex;
        }
        return {
            firstFullyVisibleItemIndex,
            lastPartiallyVisibleItemIndex
        };
    }
    return {
        firstFullyVisibleItemIndex: prevFirstFullyVisibleItemIndex,
        lastPartiallyVisibleItemIndex: prevLastPartialVisibleItemIndex
    };
};
const scrollToPosition = (el, offsetLeft) => el.scrollTo({
    left: offsetLeft,
    behavior: 'smooth'
});
const scrollBackward = (ref, firstFullyVisibleItemIndex = 0) => {
    const { carouselEl, carouselItemEls } = getCarouselUtils(ref);
    const firstFullyVisibleItem = carouselItemEls[firstFullyVisibleItemIndex];
    const scrollLeftPosition = firstFullyVisibleItem.offsetLeft - carouselEl.offsetWidth - itemMargins;
    scrollToPosition(carouselEl, scrollLeftPosition);
};
const scrollForward = (ref, lastPartiallyVisibleItemIndex = 0) => {
    const { carouselEl, carouselItemEls } = getCarouselUtils(ref);
    const lastPartiallyVisibleItem = carouselItemEls[lastPartiallyVisibleItemIndex];
    const scrollLeftPosition = lastPartiallyVisibleItem?.offsetLeft;
    scrollToPosition(carouselEl, scrollLeftPosition);
};
const getAssetHeightSmBasedOnContent = (items) => {
    const CNE_VIDEO = 'cneembed';
    // we have videos in the slider
    if (items.some((slide) => Object.prototype.hasOwnProperty.call(slide, 'contentType') &&
        slide.contentType === CNE_VIDEO)) {
        return assetHeightForSmViewportWithVideos;
    }
    // mixed content: images/clips/gifs and videos
    return assetHeightForSmViewport;
    // we don't have any video in the slider
    // if (items.every((slide) => slide.contentType !== CNE_VIDEO)) {
    //   return assetHeightForSmViewport;
    // }
};
module.exports = {
    assetHeightForLgViewport,
    // assetHeightForSmViewport,
    // assetHeightForSmViewportOnlyVideos,
    // assetHeightForSmViewportMixedWithVideos,
    carouselContentClassName,
    carouselItemClassName,
    carouselItemMarginUnit,
    itemMargins,
    getAssetWidth,
    getFirstFullyVisibleItemIndex,
    getLastPartiallyVisibleItemIndex,
    getCurrentIndexes,
    getAssetHeightSmBasedOnContent,
    isBackwardArrowActive,
    isForwardArrowActive,
    onScrollComplete,
    onResizeComplete,
    scrollBackward,
    scrollForward
};
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 91683:
/***/ ((module) => {

const getUrlWithUpdatedFilters = ({ filters, location }) => {
    const selectedSubFilterHierarchies = filters.map((filter) => filter.hierarchyString);
    let filterQuery = '';
    const searchStr = new URLSearchParams(location.search);
    const searchParam = searchStr.get('q');
    if (selectedSubFilterHierarchies.length) {
        filterQuery = `?filter=${selectedSubFilterHierarchies.join(',')}`;
        if (location.search === filterQuery) {
            return location;
        }
    }
    if (searchParam) {
        filterQuery += filterQuery ? '&' : '?';
        filterQuery += `q=${searchParam}${selectedSubFilterHierarchies.length === 0
            ? '&filter=channels/artificial-intelligence'
            : ''}`;
    }
    const currentLocationWithoutSearch = `${location.origin}${location.pathname}`;
    return `${currentLocationWithoutSearch}${filterQuery}`;
};
module.exports = getUrlWithUpdatedFilters;
//# sourceMappingURL=get-url-with-updated-filters.js.map

/***/ }),

/***/ 87098:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const getUrlWithUpdatedFilters = __webpack_require__(91683);
const useOutsideClick = __webpack_require__(26022);
module.exports = {
    getUrlWithUpdatedFilters,
    useOutsideClick
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 26022:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { useEffect } = __webpack_require__(96540);
const useOutsideClick = (ref, callback) => {
    useEffect(() => {
        const handleClickOutside = (event) => {
            if (ref.current && !ref.current.contains(event.target)) {
                callback(false);
            }
        };
        document.addEventListener('mousedown', handleClickOutside);
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [ref, callback]);
};
module.exports = useOutsideClick;
//# sourceMappingURL=use-outside-click.js.map

/***/ }),

/***/ 84529:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { useState, useRef, useEffect } = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { useIntl } = __webpack_require__(46984);
const throttle = __webpack_require__(7350);
const translations = (__webpack_require__(31814)/* ["default"] */ .A);
const { connector } = __webpack_require__(57744);
const { interactionResponse, yieldToMain } = __webpack_require__(56187);
const { TrackComponentChannel } = __webpack_require__(78788);
const { googleAnalytics } = __webpack_require__(90090);
const GroupedNavigationContainer = __webpack_require__(16035);
const SecondaryMenu = __webpack_require__(82814);
const CloseIcon = __webpack_require__(76399);
const MenuIcon = __webpack_require__(26488);
const { INITIAL_STATE, computeScroll } = __webpack_require__(70698);
const { ChannelNavigationWrapper, ChannelNavigationContainer, ChannelNavigationContent, ChannelNavigationLogoWrapper, ChannelNavigationLogo, ChannelNavigationScrollViewLogo, ChannelNavigationLinksWrapper, ChannelNavigationLinksList, ChannelNavigationLinkItem, ChannelNavigationLink, ChannelNavigationChannelDrawer, ChannelNavigationGroupedNavigation, ChannelNavigationGlobalDrawer, ChannelNavigationAccount, ChannelNavigationToggle, ChannelNavigationSecondaryMenu, ChannelNavigationConsumerMarketingWrapper } = __webpack_require__(63500);
const { NavCTA, NavRollover } = __webpack_require__(12501);
/**
 * ChannelNavigation component
 *
 * @param {object} props - React props
 * @param {object} props.isFixed - Navigation is fixed to the top of the screen
 * @param {object} props.channelNavigationLinks - Links for the channel navigation
 * @param {object} props.channelNavigationLinks.text - Link text
 * @param {object} props.channelNavigationLinks.apiEndpoint - url to data related to this filter
 * @param {object} props.channelNavigationLinks.key - data identifier for search in redux store and in api response object
 * @param {object} props.channelNavigationLinks.analyticsEvent: - google analytics event name to be triggered
 * @param {object} props.overrideChannelNavigationLinks - When given they are used instead of the normally configured channelNavigationLinks
 * @param {object} props.secondaryMenuProps - Links for the drop down menu
 * @param {object} props.showExternalProfileLink - Optional object containing custom profile label and link used when `isAccountsEnabled` is set to false
 * @param {object} props.logo - Page logo
 * @param {object} props.scrollViewLogo - Page logo visible on scroll
 * @param {string} props.loaderType - type of the loader, to use as placeholder in UI during data fetching
 * @param {string} props.channelNavigationLogoBaseUrl - Optional
 * @param {boolean} props.isAccountsEnabled - Optional flag to indicate whether to show user account info or not
 * @param {object} props.user - user object
 * @param {object} props.accountProps - user account info object
 * @param {Function} props.onNavigationLinkClick - Callback fn on navigation click
 * @param {boolean} props.activeLinkIndex - When supplied only this link index will be styled as active
 * @param {boolean} props.hideDrawerScroll - optional to hide scroll on drawer menu
 * @param {boolean} props.hideLinksOnMobile - hides secondary menu on small viewports
 *
 * @returns {ReactElement} <div>
 */
const ChannelNavigation = ({ isFixed, logo, scrollViewLogo, channelNavigationLinks, channelNavigationLogoBaseUrl, overrideChannelNavigationLinks, // allows manual setting of links, overriding tenant configured ones
secondaryMenuProps, showExternalProfileLink, // allows displaying custom external profile link when `isAccountsEnabled` is set to false
loaderType, onNavigationLinkClick, activeLinkIndex, user, hideDrawerScroll, accountProps = {
    accountLinks: []
}, hideLinksOnMobile = false, isAccountsEnabled = false }) => {
    useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ChannelNavigation'
        });
    }, []);
    const [drawerState, setDrawerState] = useState(false);
    const [secondaryNavState, setSecondaryNavState] = React.useState(false);
    const [activeFilter, setActiveFilter] = useState(null);
    const [navState, setNavState] = useState(INITIAL_STATE);
    const navigationRef = useRef(null);
    const { formatMessage } = useIntl();
    const links = overrideChannelNavigationLinks || channelNavigationLinks;
    useEffect(() => {
        const onKeyup = (e) => {
            if (e.key === 'Escape' && secondaryNavState) {
                googleAnalytics.emitGoogleTrackingEvent(`hamburger-menu-${!secondaryNavState ? 'expanded' : 'collapsed'}`);
                setSecondaryNavState(false);
            }
        };
        if (secondaryNavState) {
            window.addEventListener('keyup', onKeyup);
        }
        return () => window.removeEventListener('keyup', onKeyup);
    }, [secondaryNavState]);
    const handleScroll = () => {
        setNavState((prevState) => {
            const computedScroll = computeScroll(prevState);
            const scrollHeight = (document?.body?.scrollHeight ?? 0) -
                (document?.body?.clientHeight ?? 0);
            return { ...computedScroll, scrollHeight };
        });
    };
    useEffect(() => {
        const throttledScroll = throttle(handleScroll, 100);
        window.addEventListener('scroll', throttledScroll, { passive: true });
        return () => window.removeEventListener('scroll', throttledScroll);
    }, [isFixed]);
    const { direction: scrollDirection, pageYOffset, scrollHeight } = navState;
    const buttonIcon = secondaryNavState ? CloseIcon : MenuIcon;
    const hasFixedStyles = isFixed || pageYOffset > 0;
    const isScrollingDown = isFixed ||
        (scrollDirection !== 'up' && pageYOffset > 0) ||
        scrollHeight === pageYOffset;
    if (!links || !links.length) {
        return null;
    }
    return (React.createElement(ChannelNavigationWrapper, { isFixed: hasFixedStyles },
        React.createElement(ChannelNavigationContainer, { ref: navigationRef, "data-testid": "channel-navigation", hideLinksOnMobile: hideLinksOnMobile },
            React.createElement(ChannelNavigationContent, { isFixed: hasFixedStyles, isScrollingDown: isScrollingDown }, logo && scrollViewLogo && (React.createElement(ChannelNavigationLogoWrapper, { isFixed: hasFixedStyles, isScrollingDown: isScrollingDown },
                React.createElement("a", { href: channelNavigationLogoBaseUrl },
                    React.createElement(ChannelNavigationLogo, { isScrollingDown: isScrollingDown, ...logo }),
                    isScrollingDown && (React.createElement(ChannelNavigationScrollViewLogo, { isScrollingDown: isScrollingDown, ...scrollViewLogo })))))),
            React.createElement(ChannelNavigationLinksWrapper, { isScrollingDown: isScrollingDown, hideLinksOnMobile: hideLinksOnMobile },
                React.createElement(ChannelNavigationLinksList, { "data-journey-hook": "channel-navigation" }, links.map((link, index) => {
                    const isActive = typeof activeLinkIndex !== 'undefined'
                        ? index === activeLinkIndex
                        : true;
                    return (React.createElement(ChannelNavigationLinkItem, { key: link.key || link.type },
                        React.createElement(ChannelNavigationLink, { tabIndex: 0, isActive: isActive, label: link.text, href: link.href, as: "a", isInline: true, onClick: async (e) => {
                                if (link.apiEndpoint) {
                                    e.preventDefault();
                                    await yieldToMain();
                                    setDrawerState(true);
                                    setActiveFilter({ ...link });
                                }
                                onNavigationLinkClick && onNavigationLinkClick(link);
                                await interactionResponse();
                                googleAnalytics.emitGoogleTrackingEvent(link.analyticsEvent);
                            } }, link.text)));
                }))),
            React.createElement(ChannelNavigationConsumerMarketingWrapper, { isFixed: isFixed, isScrollingDown: isScrollingDown },
                React.createElement(NavCTA, null),
                React.createElement(NavRollover, null)),
            showExternalProfileLink && (React.createElement(ChannelNavigationAccount, { isFixed: isFixed, isScrollingDown: isScrollingDown, isAccountWithAvatar: false, signInLabel: showExternalProfileLink?.signInLabel, signInLink: showExternalProfileLink?.signInLink, user: {
                    isAuthenticated: false
                } })),
            !showExternalProfileLink && isAccountsEnabled && user && (React.createElement(ChannelNavigationAccount, { isFixed: isFixed, isScrollingDown: isScrollingDown, isAccountWithAvatar: accountProps.accountIconInverted && true, accountLinks: accountProps.accountLinks, savedStoriesLabel: accountProps?.savedStoriesLabel, accountLabel: accountProps?.accountLabel, accountAvatar: accountProps.accountIconInverted, signInLabel: accountProps?.signInLabel, signInLink: accountProps?.signInLink, user: user, className: "standard-navigation__section--utility-links-login", tooltip: accountProps.tooltip })),
            React.createElement(ChannelNavigationToggle, { tabIndex: 0, isIconButton: true, isScrollingDown: isScrollingDown, ButtonIcon: buttonIcon, label: "Open Navigation Menu", onClickHandler: () => {
                    googleAnalytics.emitGoogleTrackingEvent(`hamburger-menu-${!secondaryNavState ? 'expanded' : 'collapsed'}`);
                    setSecondaryNavState(!secondaryNavState);
                }, role: "button", "aria-expanded": secondaryNavState })),
        activeFilter && (React.createElement(ChannelNavigationChannelDrawer, { isOpen: drawerState, onClose: () => {
                setDrawerState(false);
            }, hideDrawerScroll: hideDrawerScroll, contentLabel: formatMessage(translations.channelDrawerContentLabel), showCloseButton: true, className: "channel-navigation-drawer" },
            React.createElement(ChannelNavigationGroupedNavigation, null,
                React.createElement(GroupedNavigationContainer, { storeKey: activeFilter.key, dataUrl: activeFilter.apiEndpoint, hasAtoZIndex: activeFilter.hasAtoZIndex, loaderType: loaderType, hasFilter: activeFilter.hasFilter, filterLabel: activeFilter.filterLabel })))),
        React.createElement(ChannelNavigationGlobalDrawer, { isOpen: secondaryNavState, onClose: () => setNavState(!secondaryNavState), contentLabel: "Navigation Menu" },
            React.createElement(ChannelNavigationSecondaryMenu, { isFixed: hasFixedStyles }, !isAccountsEnabled && showExternalProfileLink ? (React.createElement(SecondaryMenu, { ...secondaryMenuProps, user: {
                    isAuthenticated: false
                }, isAccountsEnabled: true, contentAlign: "center" })) : (React.createElement(SecondaryMenu, { accountProps: accountProps, ...secondaryMenuProps, user: user, isAccountsEnabled: isAccountsEnabled, contentAlign: "center" }))))));
};
const filterLinkShape = PropTypes.shape({
    text: PropTypes.string,
    key: PropTypes.string,
    apiEndpoint: PropTypes.string
});
ChannelNavigation.propTypes = {
    accountProps: PropTypes.object,
    activeLinkIndex: PropTypes.number,
    channelNavigationLinks: PropTypes.arrayOf(filterLinkShape),
    channelNavigationLogoBaseUrl: PropTypes.string,
    hideDrawerScroll: PropTypes.bool,
    hideLinksOnMobile: PropTypes.bool,
    isAccountsEnabled: PropTypes.bool,
    isFixed: PropTypes.bool,
    loaderType: PropTypes.string,
    logo: PropTypes.object,
    onNavigationLinkClick: PropTypes.func,
    overrideChannelNavigationLinks: PropTypes.arrayOf(filterLinkShape),
    scrollViewLogo: PropTypes.object,
    secondaryMenuProps: PropTypes.object,
    showExternalProfileLink: PropTypes.object,
    user: PropTypes.shape({
        isAuthenticated: PropTypes.bool.isRequired
    })
};
ChannelNavigation.displayName = 'ChannelNavigation';
module.exports = connector(ChannelNavigation, {
    keysToPluck: ['user', 'isAccountsEnabled', 'accountProps']
});
//# sourceMappingURL=ChannelNavigation.js.map

/***/ }),

/***/ 71656:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const ChannelNavigation = __webpack_require__(84529);
module.exports = asConfiguredComponent(ChannelNavigation, 'ChannelNavigation');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 63500:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing, getColorToken, getColorStyles, getTypographyStyles, getZIndex, maxScreen } = __webpack_require__(26865);
const { hideVisually } = __webpack_require__(52813);
const { BREAKPOINTS, ZINDEX_MAP } = __webpack_require__(96472);
const { maxThresholds } = __webpack_require__(99906);
const Button = __webpack_require__(73730);
const { ButtonIconWrapper } = __webpack_require__(18974);
const Drawer = __webpack_require__(98653);
const ResponsiveImage = __webpack_require__(43608);
const Grid = __webpack_require__(86659);
const AccountDropdown = __webpack_require__(50152);
const { SecondaryMenuAccount } = __webpack_require__(90098);
const { StandardNavigationDropdown, StandardNavigationAccountLabel, AccountDropdownToggleIcon, NavigationAccountSignIn, StandardNavigationSuccessLoginAlert, NavigationAccountIconWrapper, JourneyUnitDivider } = __webpack_require__(88570);
const { ShowRollover, HideRollover } = __webpack_require__(32788);
const { GridItem } = __webpack_require__(40653);
const { SignOutButtonWrapper } = __webpack_require__(81591);
const { AlertMessage } = __webpack_require__(3318);
const ChannelNavigationWrapper = styled.nav.withConfig({
    displayName: 'ChannelNavigationWrapper'
}) `
  position: relative;
  z-index: ${ZINDEX_MAP.persistentTopLayer};
  max-height: ${calculateSpacing(24)};
  ${({ isFixed }) => isFixed &&
    `
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      `};
`;
ChannelNavigationWrapper.displayName = 'ChannelNavigationWrapper';
const ChannelNavigationContainer = styled.div.withConfig({
    displayName: 'ChannelNavigationContainer'
}) `
  position: relative;
  ${({ hideLinksOnMobile }) => `padding-bottom: ${calculateSpacing(hideLinksOnMobile ? 0 : 7)};`}

  @media (min-width: ${BREAKPOINTS.md}) {
    border-bottom: 1px solid rgba(51, 51, 51, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.inverted.background')};
    padding-bottom: 0;
  }
`;
const ChannelNavigationContent = styled.div.withConfig({
    displayName: 'ChannelNavigationContent'
}) `
  display: flex;
  position: relative;
  flex-wrap: wrap;
  z-index: 1;
  margin: 0 auto;
  border-bottom: 1px solid
    ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.inverted.divider')};
  background: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.inverted.background')};
  @media (min-width: ${BREAKPOINTS.lg}) {
    flex-wrap: ${({ isScrollingDown }) => isScrollingDown ? `nowrap` : `wrap`};
  }
`;
const ChannelNavigationLogoWrapper = styled.div.withConfig({
    displayName: 'ChannelNavigationLogoWrapper'
}) `
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: ${calculateSpacing(1)};

  @media (min-width: ${BREAKPOINTS.lg}) {
    ${({ isScrollingDown }) => isScrollingDown
    ? `
      left: ${calculateSpacing(3)};
      position: absolute;
      padding: ${calculateSpacing(1)};
      width: unset;
    `
    : `
      width:100vw; 
      padding: ${calculateSpacing(1)} 0;
    `}
  }
`;
const ChannelNavigationLogo = styled(ResponsiveImage).withConfig({
    displayName: 'ChannelNavigationLogo'
}) `
  width: 96px;
  @media (min-width: ${BREAKPOINTS.lg}) {
    display: flex;
    padding: ${calculateSpacing(1)} 0;
    width: 168px;
    height: 88px;
    ${({ isScrollingDown }) => isScrollingDown &&
    `
        ${hideVisually()}
      `};
  }
`;
const ChannelNavigationScrollViewLogo = styled(ResponsiveImage).withConfig({
    displayName: 'ChannelNavigationScrollViewLogo'
}) `
  @media (max-width: ${BREAKPOINTS.lg}) {
    ${hideVisually()}
  }
  padding: ${calculateSpacing(0.5)} 0;
  width: 83px;
  height: unset;
`;
const ChannelNavigationLinksWrapper = styled(Grid.NoMargins).withConfig({
    displayName: 'ChannelNavigationLinksWrapper'
}) `
  > ${GridItem} {
    grid-column: 1;
    margin: 0 auto;
    text-align: center;
    @media (min-width: ${BREAKPOINTS.md}) {
      grid-column: 2 / span 10;
    }
  }

  position: absolute;
  top: auto;
  transition: transform 0.5s ease-in-out;
  background: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.inverted.background')};
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;

  ${({ isScrollingDown }) => isScrollingDown
    ? `transform: translateY(-100%);`
    : 'transform: translateY(0%);'}

  @media (min-width: ${BREAKPOINTS.lg}) {
    display: grid;
    position: initial;
    align-items: center;
    justify-content: center;
    transform: none;
    margin: 0 calculateSpacing(14.5);
    height: 64px;
  }

  @media (max-width: ${maxThresholds.lg}px) {
    ${({ hideLinksOnMobile }) => !hideLinksOnMobile
    ? `padding: ${calculateSpacing(2)} 0 ${calculateSpacing(2)}
      ${calculateSpacing(3)};
      &::after {
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.01) 31.25%,
          ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.inverted.background')}
            100%
        );
        content: '';
        height: ${calculateSpacing(4)};
        width: 48px;
        bottom: ${calculateSpacing(2)};
        right: 0;
        position: sticky;
        pointer-events: none;`
    : `${hideVisually()};`}
  }
`;
const ChannelNavigationLinksList = styled.ul.withConfig({
    displayName: 'ChannelNavigationLinksList'
}) `
  display: flex;
  margin: 0 auto;
  list-style: none;
  text-align: center;
  padding-inline-start: 0;

  @media (max-width: ${BREAKPOINTS.md}) {
    ${({ hideLinksOnMobile }) => hideLinksOnMobile ? `${hideVisually()};` : ''}
  }
`;
const ChannelNavigationLinkItem = styled.li.withConfig({
    displayName: 'ChannelNavigationLinkItem'
}) `
  padding-right: ${calculateSpacing(2)};

  &:last-child {
    padding-right: 0;
  }

  @media (min-width: ${BREAKPOINTS.md}) {
    margin-right: 0;
    padding-right: ${calculateSpacing(3)};
  }
`;
const ChannelNavigationLink = styled.a.withConfig({
    displayName: 'ChannelNavigationLink'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-primary')}

  border: none;
  min-width: auto;
  text-decoration: none;
  white-space: nowrap;
  color: rgb(
    ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.inverted.link', {
    rgbOnly: true
})},
    ${({ isActive }) => (isActive ? '1' : '0.6')}
  );

  &:hover {
    color: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.inverted.link-hover')};
  }
`;
const ChannelNavigationChannelDrawer = styled(Drawer.Right).withConfig({
    displayName: 'ChannelNavigationChannelDrawer'
}) `
  &&& {
    ${({ hideDrawerScroll }) => hideDrawerScroll &&
    `
        height: 100%;
    `}
  }
  @media (min-width: ${BREAKPOINTS.md}) {
    width: 400px;
    max-width: 400px;

    && {
      height: 100%;
    }
  }
`;
const ChannelNavigationGroupedNavigation = styled.div.withConfig({
    displayName: 'ChannelNavigationGroupedNavigation'
}) `
  padding: 0 ${calculateSpacing(4)} ${calculateSpacing(2)};
  height: 100%;
`;
const ChannelNavigationGlobalDrawer = styled(Drawer).withConfig({
    displayName: 'ChannelNavigationGlobalDrawer'
}) `
  height: auto;
`;
const ChannelNavigationConsumerMarketingWrapper = styled.div.withConfig({
    displayName: 'ChannelNavigationConsumerMarketingWrapper'
}) `
  position: absolute;
  top: ${({ isScrollingDown }) => isScrollingDown ? calculateSpacing(1.5) : calculateSpacing(14.46)};
  right: ${calculateSpacing(24)};

  // Journey nav-cta unit is not displayed on mobile because it overlaps with the logo.
  // It is also hidden on desktop where screen-size is between 1024px and 1279px,
  // and it can render on top of other navigation links.
  @media (max-width: calc(${BREAKPOINTS.md} - 1px)),
    (min-width: ${BREAKPOINTS.lg}) and (max-width: calc(${BREAKPOINTS.xl} - 1px)) {
    display: ${({ isFixed }) => (isFixed ? `flex` : `none`)};
  }

  // On tablet, the unit is shown if the navigation component is fixed.
  // If not, it is only displayed when ChannelNavigationLogoWrapper is in an expanded state.
  @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
    display: ${({ isFixed, isScrollingDown }) => !isFixed && isScrollingDown ? `none` : `flex`};
    top: ${calculateSpacing(0.8)};
    right: ${calculateSpacing(12)};
    z-index: 1;
  }

  .nav-cta__component {
    &:hover,
    &:focus,
    &:focus-within {
      ~ .nav-rollover__component > div {
        ${ShowRollover}
      }
    }
  }

  .nav-rollover__component > div {
    ${HideRollover}
    display: none;
    right: 0;

    @media (min-width: ${BREAKPOINTS.xl}) {
      display: flex;
    }
  }

  .nav-rollover__component > div {
    &:hover,
    &:focus,
    &:focus-within {
      ${ShowRollover}
    }
  }
`;
const ChannelNavigationAccount = styled(AccountDropdown).withConfig({
    displayName: 'ChannelNavigationAccount'
}) `
  position: absolute;
  right: ${calculateSpacing(3)};
  border: none;
  background: transparent;
  padding: ${calculateSpacing(1)} ${calculateSpacing(1.5)};

  @media (min-width: ${BREAKPOINTS.md}) {
    left: inherit;
    padding: 0;
    min-width: auto;
  }

  &&&.standard-navigation-account {
    position: absolute;
    top: ${({ isScrollingDown }) => isScrollingDown ? calculateSpacing(1.4) : calculateSpacing(14.4)};
    margin-right: ${({ isAccountWithAvatar }) => isAccountWithAvatar ? calculateSpacing(4) : calculateSpacing(3)};
    margin-left: ${calculateSpacing(1.5)};
    width: ${calculateSpacing(12)};
    height: ${calculateSpacing(6)};
    white-space: nowrap;
  }

  ${AlertMessage} {
    white-space: normal;
  }

  @media (max-width: ${BREAKPOINTS.lg}) {
    // The below line is to surface SignIn in mobile devices with avatar enabled
    // and hide the SignIn in mobile devices if avatar is not enabled
    ${({ isAccountWithAvatar }) => !isAccountWithAvatar && `display: none;`}
    &&&.standard-navigation-account {
      top: ${calculateSpacing(0.4)};
      z-index: 1;
      margin-right: ${calculateSpacing(2)};
    }
  }

  ${StandardNavigationAccountLabel} {
    justify-content: flex-end;
    color: ${({ theme }) => getColorToken(theme, 'colors.interactive.base.white')};

    &:hover,
    &:link,
    &:visited,
    &:active {
      color: ${({ theme }) => getColorToken(theme, 'colors.interactive.base.white')};

      svg {
        path {
          fill: ${({ theme }) => getColorToken(theme, 'colors.interactive.base.white')};
        }
      }
    }

    ${NavigationAccountIconWrapper}:hover {
      ${({ theme }) => getColorStyles(theme, 'background', 'colors.interactive.base.dark')};
      border-color: transparent;
    }

    // Journey divider follows the same rules as the Journey nav-cta unit.
    // Refer ChannelNavigationConsumerMarketingWrapper styles for explanation.
    @media (max-width: calc(${BREAKPOINTS.md} - 1px)),
      (min-width: ${BREAKPOINTS.lg}) and (max-width: calc(${BREAKPOINTS.xl} - 1px)) {
      ${JourneyUnitDivider} {
        display: ${({ isFixed }) => (isFixed ? `flex` : `none`)};
      }
    }
    @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
      ${JourneyUnitDivider} {
        display: ${({ isFixed, isScrollingDown }) => !isFixed && isScrollingDown ? `none` : `flex`};
      }
    }
  }

  .standard-navigation-account--icon,
  ${AccountDropdownToggleIcon} {
    svg {
      path {
        fill: ${({ theme }) => getColorToken(theme, 'colors.interactive.base.white')};
      }
    }
  }

  ${StandardNavigationDropdown} {
    top: ${calculateSpacing(6)};
    right: ${calculateSpacing(0.8)};
    background-color: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.inverted.background')};
    color: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.inverted.link')};

    &::before,
    &::after {
      content: none;
    }

    @media (min-width: ${BREAKPOINTS.md}) {
      right: ${calculateSpacing(0.4)};
    }
  }

  ${StandardNavigationDropdown} .account-links__navigation {
    background-color: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.inverted.background')};

    .navigation__list-item {
      &:hover {
        background-color: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.inverted.background')};
      }

      .navigation__link {
        ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-secondary')};
        color: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.inverted.link')};
      }
    }
  }

  ${NavigationAccountSignIn} {
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.inverted.body')};
    @media (max-width: ${BREAKPOINTS.lg}) {
      display: none;
    }
  }

  ${StandardNavigationDropdown}

  ${SignOutButtonWrapper}.account-links__sign-out {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-secondary')};
    color: ${getColorToken('colors.consumption.lead.inverted.link')};

    &:hover {
      background-color: ${getColorToken('colors.consumption.lead.standard.divider')};
      color: ${getColorToken('colors.consumption.lead.standard.link')};
    }
  }

  ${StandardNavigationSuccessLoginAlert} {
    top: ${calculateSpacing(6.75)};
    background-color: ${getColorToken('colors.interactive.base.black')};
    ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.discovery.body.black.border')};

    ${maxScreen(BREAKPOINTS.md)} {
      left: -${calculateSpacing(29)};
    }

    .alert-arrow {
      &::before {
        border-color: transparent transparent
          ${getColorToken('colors.discovery.body.black.border')};
      }

      &::after {
        border-color: transparent transparent
          ${getColorToken('colors.interactive.base.black')};
      }
    }

    .alert-message {
      padding: ${calculateSpacing(3)} ${calculateSpacing(2)};
      max-width: fit-content;
      white-space: normal;
      ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.lead.inverted.context-signature')};
    }

    .close-alert-button {
      svg {
        ${({ theme }) => getColorStyles(theme, 'fill', 'colors.interactive.base.white')};
      }
    }
  }
`;
const ChannelNavigationToggle = styled(Button.Utility).withConfig({
    displayName: 'ChannelNavigationToggle'
}) `
  position: absolute;
  top: 14px;
  right: ${calculateSpacing(2)};
  z-index: ${getZIndex('dropdown')};
  border: none;
  background: transparent;
  padding: ${calculateSpacing(1)} ${calculateSpacing(1.5)};
  width: ${calculateSpacing(4)};
  height: ${calculateSpacing(4)};
  @media (min-width: ${BREAKPOINTS.lg}) {
    top: ${({ isScrollingDown }) => isScrollingDown ? calculateSpacing(2.5) : '124px'};
    left: inherit;
    padding: 0;
    min-width: auto;
  }

  & > div {
    position: absolute;
  }

  .icon-menu {
    width: initial;
    height: initial;
  }

  .icon-close {
    width: initial;
    height: initial;
  }

  path {
    fill: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.inverted.link')};
  }

  &:focus {
    outline: 2px auto -webkit-focus-ring-color;
    border: unset;
    background: transparent;
  }

  &:hover {
    border-width: unset;
    border-style: none;
    border-color: transparent;
    background: transparent;

    path {
      fill: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.inverted.link-hover')};
    }
  }

  ${ButtonIconWrapper} {
    padding-bottom: ${calculateSpacing(0.4)};
  }
`;
const ChannelNavigationSecondaryMenu = styled.div.withConfig({
    displayName: 'ChannelNavigationSecondaryMenu'
}) `
  padding-top: ${({ isFixed }) => (isFixed ? 0 : '62px')};
  height: 100%;
  ${SecondaryMenuAccount} {
    display: block;
  }

  @media (min-width: ${BREAKPOINTS.md}) {
    padding-top: ${({ isFixed }) => (isFixed ? 0 : '160px')};
  }

  @media (min-width: ${BREAKPOINTS.lg}) {
    height: 100vh;
    ${SecondaryMenuAccount} {
      display: none;
    }
  }
`;
module.exports = {
    ChannelNavigationWrapper,
    ChannelNavigationContainer,
    ChannelNavigationContent,
    ChannelNavigationLogoWrapper,
    ChannelNavigationLogo,
    ChannelNavigationScrollViewLogo,
    ChannelNavigationLinksList,
    ChannelNavigationLinksWrapper,
    ChannelNavigationLinkItem,
    ChannelNavigationLink,
    ChannelNavigationChannelDrawer,
    ChannelNavigationGlobalDrawer,
    ChannelNavigationGroupedNavigation,
    ChannelNavigationAccount,
    ChannelNavigationToggle,
    ChannelNavigationSecondaryMenu,
    ChannelNavigationConsumerMarketingWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 31814:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    toggleLabel: {
        id: 'ChannelNavigation.ToggleLabel',
        defaultMessage: 'Open Navigation Menu',
        description: 'ChannelNavigation component toggle label'
    },
    channelDrawerContentLabel: {
        id: 'ChannelNavigation.ChannelDrawerContentLabel',
        defaultMessage: 'Runway filters navigation',
        description: 'ChannelNavigation component channel drawer content label'
    },
    globalDrawerContentLabel: {
        id: 'ChannelNavigation.GlobalDrawerContentLabel',
        defaultMessage: 'Navigation Menu',
        description: 'ChannelNavigation component global drawer content label'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 97727:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { injectIntl } = __webpack_require__(46984);
const { connect: connectToStore } = __webpack_require__(67851);
const CNEVideoEmbed = __webpack_require__(64930);
const SectionTitle = __webpack_require__(35864);
const { TEASER_VARIATIONS } = __webpack_require__(21221);
const { TrackComponentChannel } = __webpack_require__(78788);
const { Dek, Hed, Wrapper, Container: DefaultItemsContainer, ContainerWithMargins, Content } = __webpack_require__(79130);
const getItemsContainer = ({ hasGridWithMargins }) => {
    let ItemsContainer = DefaultItemsContainer;
    if (hasGridWithMargins) {
        ItemsContainer = ContainerWithMargins;
    }
    return ItemsContainer;
};
/**
 * Helper function to return if the variation is set on copilot
 *
 * @param {string} functionalTags - functional tag coming from copilot
 * @returns {bool} if
 */
const hasTeaser = (functionalTags) => {
    const functionalTagsArray = functionalTags?.toString().split('|') || [];
    const availableTeaserVariations = Object.keys(TEASER_VARIATIONS);
    return !!functionalTagsArray.find((tag) => {
        return availableTeaserVariations.includes(tag);
    });
};
/**
 * CNEVideo component
 *
 * @param {object} props - React props
 * @param {string} props.dangerousDek - Bundle dek
 * @param {string} props.dangerousHed - Bundle hed
 * @param {bool} props.hasBottomMargin - Whether the wrapper has bottom margin
 * @param {bool} props.hasGridWithMargins - Whether the video embed container is a grid with no margins
 * @param {bool} props.hasTopMargin -Whether the wrapper has top margin
 * @param {bool} props.isBundle - indicates that the video is an item that is part of a bundle page
 * @param {bool} props.isSpecialTheme - Prop for special theme
 * @param {Array} props.items - Videos data
 * @param {Array} props.functionalTags - Bundle functionalTags
 * @param {bool} props.shouldHaveTeaser - Whether the video should show a teaser before playing
 * @param {bool} props.shouldUseBundleData - Whether to use bundle or item data as hed and dek
 * @param {bool} props.shouldHideCNEVideoDek - should hide dek
 * @param {bool} props.videoEmbedPosition - indicates the position/type of the video player on the page
 * @param {string} props.sectionTitleVariation - Optional variation of SectionTitle to use
 *
 * @returns {ReactElement} - The bundle body element
 */
const CNEVideo = ({ dangerousDek, dangerousHed, functionalTags, hasBottomMargin, hasGridWithMargins = false, hasTopMargin, isSpecialTheme = false, isBundle = false, items = [], shouldHaveTeaser = false, shouldUseBundleData = false, shouldHideCNEVideoDek = false, videoEmbedPosition = '', sectionTitleVariation }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'CNEVideo'
        });
    }, []);
    const SectionTitleComponent = SectionTitle[sectionTitleVariation] || SectionTitle;
    // if there's a teaser, we must remove the hed and dek from this component,
    // since the title will be showed on the teaser space.
    const shouldShowTitle = !hasTeaser(functionalTags);
    return items?.map((item, index) => {
        const { scriptUrl, hed, dek, animationClip, categories, isLive, title } = item || {};
        const useBundleData = shouldUseBundleData && dangerousDek;
        const ItemsContainer = getItemsContainer({ hasGridWithMargins });
        return (React.createElement(ItemsContainer, { key: index, className: classnames({
                'verso-bundle-cne-embed--grid-with-margins': hasGridWithMargins
            }), hasTeaser: hasTeaser(functionalTags) },
            React.createElement(Wrapper, { hasBottomMargin: hasBottomMargin, hasTopMargin: hasTopMargin, isSpecialTheme: isSpecialTheme },
                dangerousHed && (React.createElement(SectionTitleComponent, { dangerousHed: dangerousHed, dangerousDek: dangerousDek, hasDividerAbove: true, hasDividerBelow: true, textAlign: "center", "data-testid": "section-title" })),
                scriptUrl && (React.createElement(CNEVideoEmbed, { animationClip: animationClip, categories: categories, isLive: isLive, scriptUrl: scriptUrl, shouldHaveTeaser: shouldHaveTeaser, title: title, isBundle: isBundle, videoEmbedPosition: videoEmbedPosition })),
                !shouldHideCNEVideoDek &&
                    shouldShowTitle &&
                    (hed || dek || useBundleData) && (React.createElement(Content, null, useBundleData ? (React.createElement(Dek, { dangerouslySetInnerHTML: { __html: dangerousDek } })) : (React.createElement(React.Fragment, null,
                    hed && React.createElement(Hed, { className: "hed" }, hed),
                    dek && React.createElement(Dek, { className: "dek" }, dek))))))));
    });
};
CNEVideo.propTypes = {
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    functionalTags: PropTypes.string,
    hasBottomMoargin: PropTypes.bool,
    hasGridWithMargins: PropTypes.bool,
    hasTopMoargin: PropTypes.bool,
    isSpecialTheme: PropTypes.bool,
    items: PropTypes.array,
    sectionTitleVariation: PropTypes.string,
    shouldHaveTeaser: PropTypes.bool,
    shouldHideCNEVideoDek: PropTypes.bool,
    shouldUseBundleData: PropTypes.bool
};
CNEVideo.displayName = 'CNEVideo';
module.exports = connectToStore((store) => {
    const { functionalTags } = store.coreDataLayer?.content || {};
    return {
        functionalTags
    };
})(injectIntl(CNEVideo));
//# sourceMappingURL=CNEVideo.js.map

/***/ }),

/***/ 86630:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(97727);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 79130:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { BREAKPOINTS } = __webpack_require__(96472);
const { applyGridSpacing, cssVariablesGrid } = __webpack_require__(1123);
const { calculateSpacing, getTypographyStyles, getColorStyles } = __webpack_require__(26865);
const { SectionTitleRoot, SectionTitleHed } = __webpack_require__(33500);
const Container = styled.div.withConfig({ displayName: 'Container' }) `
  figure {
    max-width: 75%;
  }
`;
const ContainerWithMargins = styled.div.withConfig({
    displayName: 'ContainerWithMargins'
}) `
  ${cssVariablesGrid()}
  ${applyGridSpacing('padding')}

  figure {
    max-width: 100%;
  }
  @media (min-width: ${BREAKPOINTS.xxl}) {
    margin: 0 auto;
    max-width: ${calculateSpacing(200)};
    ${({ hasTeaser }) => hasTeaser && `max-width: inherit;`}
  }
`;
const Dek = styled.div.withConfig({ displayName: 'Dek' }) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.body-core')};

  align-items: center;
  margin: auto 25%;
  text-align: center;

  a {
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.black')};
  }

  @media (max-width: ${BREAKPOINTS.md}) {
    margin: auto 0;
  }
`;
const Hed = styled.div.withConfig({ displayName: 'Hed' }) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.hed-standard')};

  align-items: center;
  margin: auto 25% ${calculateSpacing(4)};
  text-align: center;

  @media (max-width: ${BREAKPOINTS.md}) {
    margin: auto 0 ${calculateSpacing(4)};
  }
`;
const wrapperMarginTop = css `
  margin-top: 3.5rem;
`;
const wrapperMarginBottom = css `
  margin-bottom: 3.5rem;
`;
const Wrapper = styled.div.withConfig({ displayName: 'Wrapper' }) `
  ${({ hasTopMargin }) => hasTopMargin && wrapperMarginTop}
  ${({ hasBottomMargin }) => hasBottomMargin && wrapperMarginBottom}

  figure {
    margin-bottom: ${calculateSpacing(6)};

    @media (max-width: ${BREAKPOINTS.md}) {
      margin-bottom: ${calculateSpacing(3)};
    }
  }

  ${SectionTitleRoot} {
    ${({ isSpecialTheme, theme }) => isSpecialTheme &&
    `
      ${getColorStyles(theme, 'background-color', 'colors.consumption.lead.special.background')};
      `}

    ${SectionTitleHed} {
      ${({ isSpecialTheme, theme }) => isSpecialTheme &&
    `${getColorStyles(theme, 'color', 'colors.background.white')};`}
    }
  }
`;
const Content = styled.div.withConfig({ displayName: 'Content' }) `
  display: flex;
  flex-direction: column;
  align-items: center;

  @media (max-width: ${BREAKPOINTS.md}) {
    .hed {
      margin: auto 5% 20px;
    }

    .dek {
      margin: auto 5%;
    }
  }
`;
Dek.displayName = 'Dek';
Hed.displayName = 'Hed';
module.exports = {
    Dek,
    Hed,
    Wrapper,
    Content,
    Container,
    ContainerWithMargins
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 29384:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Card = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styles_1 = __webpack_require__(77160);
const CardContext_1 = __webpack_require__(32541);
const Media_1 = __webpack_require__(86171);
const Description_1 = __webpack_require__(13949);
const Info_1 = __webpack_require__(78129);
const Title_1 = __webpack_require__(86205);
function Card({ collageCard, cardConfig, gridArea }) {
    const CardComponent = getCardComponent(cardConfig.type);
    return (react_1.default.createElement(CardContext_1.CardContext.Provider, { value: { collageCard, cardConfig } },
        react_1.default.createElement(CardComponent, { collageCard: collageCard, cardConfig: cardConfig, gridArea: gridArea })));
}
exports.Card = Card;
function getCardComponent(cardType) {
    if (cardType?.startsWith('overlay')) {
        return OverlayCard;
    }
    return DefaultCard;
}
function DefaultCard({ collageCard, cardConfig, gridArea }) {
    return (react_1.default.createElement(styles_1.DefaultCardWrapper, { href: collageCard.url, gridArea: gridArea, cardLayout: cardConfig.layout, gridTemplateColumns: cardConfig.gridTemplateColumns },
        react_1.default.createElement(Media_1.Media, { cardConfig: cardConfig }),
        react_1.default.createElement(Title_1.Title, { cardConfig: cardConfig }),
        react_1.default.createElement(Description_1.Description, { cardConfig: cardConfig }),
        react_1.default.createElement(Info_1.Info, { cardConfig: cardConfig })));
}
function OverlayCard({ collageCard, cardConfig, gridArea }) {
    const overlayDirection = cardConfig.type?.split('-')[2];
    return (react_1.default.createElement(styles_1.OverlayCardWrapper, { href: collageCard.url, gridArea: gridArea, assetConfigs: cardConfig.assetConfigs },
        react_1.default.createElement(Media_1.Media, { cardConfig: cardConfig }),
        react_1.default.createElement(styles_1.OverlayCardContent, { cardLayout: cardConfig.layout, gridTemplateColumns: cardConfig.gridTemplateColumns, overlayDirection: overlayDirection },
            react_1.default.createElement(Title_1.Title, { cardConfig: cardConfig }),
            react_1.default.createElement(Description_1.Description, { cardConfig: cardConfig }),
            react_1.default.createElement(Info_1.Info, { cardConfig: cardConfig }))));
}
//# sourceMappingURL=Card.js.map

/***/ }),

/***/ 32541:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CardContext = void 0;
const react_1 = __webpack_require__(96540);
exports.CardContext = (0, react_1.createContext)(null);
//# sourceMappingURL=CardContext.js.map

/***/ }),

/***/ 86642:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Dek = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const styles_1 = __webpack_require__(4654);
const CardContext_1 = __webpack_require__(32541);
const utils_1 = __webpack_require__(49887);
function Dek({ alignment, hideDek }) {
    const { collageCard } = (0, react_1.useContext)(CardContext_1.CardContext);
    const dekData = collageCard.dangerousDek;
    if (!utils_1.StringUtils.isStringValid(dekData) || hideDek) {
        return null;
    }
    return (react_1.default.createElement(styles_1.DekWrapper, { alignment: alignment, dangerouslySetInnerHTML: { __html: dekData } }));
}
exports.Dek = Dek;
//# sourceMappingURL=Dek.js.map

/***/ }),

/***/ 74418:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Dek = void 0;
var Dek_1 = __webpack_require__(86642);
Object.defineProperty(exports, "Dek", ({ enumerable: true, get: function () { return Dek_1.Dek; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 4654:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.DekWrapper = void 0;
const styled_components_v6_1 = __importDefault(__webpack_require__(50435));
const utils_1 = __webpack_require__(26865);
exports.DekWrapper = styled_components_v6_1.default.p.withConfig({
    displayName: 'DekWrapper'
}) `
  text-align: ${({ alignment }) => alignment};

  margin: 0;
  padding: 0;

  ${(0, utils_1.getTypographyStyles)(`typography.definitions.discovery.description-core`)}
  color: ${(0, utils_1.getColorToken)('colors.discovery.body.white.description')};
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 44631:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Description = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styles_1 = __webpack_require__(98719);
const Dek_1 = __webpack_require__(74418);
const DescriptionAsset_1 = __webpack_require__(60632);
function Description({ cardConfig }) {
    const descriptionConfig = cardConfig.blocks.description;
    if (descriptionConfig == null) {
        return null;
    }
    const { alignment, hideAsset, hideDek } = descriptionConfig;
    return (react_1.default.createElement(styles_1.DescriptionWrapper, { cardLayout: cardConfig.layout },
        react_1.default.createElement(DescriptionAsset_1.DescriptionAsset, { hideAsset: hideAsset, alignment: alignment }),
        react_1.default.createElement(Dek_1.Dek, { alignment: alignment, hideDek: hideDek })));
}
exports.Description = Description;
//# sourceMappingURL=Description.js.map

/***/ }),

/***/ 92052:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.DescriptionAsset = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const styles_1 = __webpack_require__(10972);
const CardContext_1 = __webpack_require__(32541);
const responsive_asset_1 = __importDefault(__webpack_require__(73275));
const map_sources_to_segmented_sources_1 = __webpack_require__(52009);
function DescriptionAsset({ hideAsset, alignment }) {
    const { collageCard } = (0, react_1.useContext)(CardContext_1.CardContext);
    const assetData = collageCard.image;
    if (assetData == null || hideAsset) {
        return null;
    }
    const segmentedSources = (0, map_sources_to_segmented_sources_1.mapSourcesToSegmentedSources)(assetData.sources);
    const responsiveAssetProps = { ...assetData, segmentedSources };
    return (react_1.default.createElement(styles_1.DescriptionAssetWrapper, { alignment: alignment },
        react_1.default.createElement(responsive_asset_1.default, { ...responsiveAssetProps })));
}
exports.DescriptionAsset = DescriptionAsset;
//# sourceMappingURL=DescriptionAsset.js.map

/***/ }),

/***/ 60632:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.DescriptionAsset = void 0;
var DescriptionAsset_1 = __webpack_require__(92052);
Object.defineProperty(exports, "DescriptionAsset", ({ enumerable: true, get: function () { return DescriptionAsset_1.DescriptionAsset; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 10972:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.DescriptionAssetWrapper = void 0;
const styled_components_v6_1 = __importDefault(__webpack_require__(50435));
const types_1 = __webpack_require__(11291);
exports.DescriptionAssetWrapper = styled_components_v6_1.default.div.withConfig({
    displayName: 'DescriptionAssetWrapper'
}) `
  float: ${({ alignment }) => getFloatValue(alignment)};
  width: max(100px, 50%);
`;
/** The position of the asset should be in reverse of the text alignment. */
function getFloatValue(alignment) {
    switch (alignment) {
        case types_1.BlockAlignment.LEFT:
            return types_1.BlockAlignment.RIGHT;
        case types_1.BlockAlignment.RIGHT:
            return types_1.BlockAlignment.LEFT;
        default:
            return types_1.BlockAlignment.LEFT;
    }
}
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 13949:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Description = void 0;
var Description_1 = __webpack_require__(44631);
Object.defineProperty(exports, "Description", ({ enumerable: true, get: function () { return Description_1.Description; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 98719:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.DescriptionWrapper = void 0;
const styled_components_v6_1 = __importDefault(__webpack_require__(50435));
const utils_1 = __webpack_require__(49887);
exports.DescriptionWrapper = styled_components_v6_1.default.div.withConfig({
    displayName: 'DescriptionWrapper'
}) `
  width: 100%;
  grid-area: description;
  container-type: inline-size;

  ${(props) => utils_1.MediaQueryUtils.generateCSSMediaQueries('grid-template-areas', props.cardLayout)};
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 20050:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Byline = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const styles_1 = __webpack_require__(91899);
const CardContext_1 = __webpack_require__(32541);
const bylines_1 = __importDefault(__webpack_require__(52540));
function Byline({ hideByline, alignment }) {
    const { collageCard } = (0, react_1.useContext)(CardContext_1.CardContext);
    const bylineData = collageCard.contributors;
    if (bylineData == null || hideByline) {
        return null;
    }
    return (react_1.default.createElement(styles_1.BylineWrapper, null,
        react_1.default.createElement(bylines_1.default, { contributors: bylineData, contentAlign: alignment, shouldLink: false })));
}
exports.Byline = Byline;
//# sourceMappingURL=Byline.js.map

/***/ }),

/***/ 82993:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Byline = void 0;
var Byline_1 = __webpack_require__(20050);
Object.defineProperty(exports, "Byline", ({ enumerable: true, get: function () { return Byline_1.Byline; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 91899:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.BylineWrapper = void 0;
const styled_components_v6_1 = __importDefault(__webpack_require__(50435));
const utils_1 = __webpack_require__(26865);
exports.BylineWrapper = styled_components_v6_1.default.div.withConfig({
    displayName: 'BylineWrapper'
}) `
  grid-area: byline;
  text-align: match-parent;
  color: ${(0, utils_1.getColorToken)('colors.discovery.body.white.accreditation')};

  /* THIS IS A HACK TO REMOVE SPACING OF BYLINE - WE SHOULD CREATE A NEW COMPONENT */
  margin: -${(0, utils_1.calculateSpacing)(1)} 0 0;
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 7480:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.HighlightLabel = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const styles_1 = __webpack_require__(7864);
const CardContext_1 = __webpack_require__(32541);
function HighlightLabel({ hideHighlightLabel }) {
    const { collageCard } = (0, react_1.useContext)(CardContext_1.CardContext);
    const { ratingValue } = collageCard;
    if (ratingValue == null || hideHighlightLabel) {
        return null;
    }
    /** SAMPLE DATA USED */
    return (react_1.default.createElement(styles_1.HighLightLabelWrapper, null, ratingValue.isBestNewMusic ?? 'Best New Music'));
}
exports.HighlightLabel = HighlightLabel;
//# sourceMappingURL=HighlightLabel.js.map

/***/ }),

/***/ 63292:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.HighlightLabel = void 0;
var HighlightLabel_1 = __webpack_require__(7480);
Object.defineProperty(exports, "HighlightLabel", ({ enumerable: true, get: function () { return HighlightLabel_1.HighlightLabel; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 7864:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.HighLightLabelWrapper = void 0;
const styled_components_v6_1 = __importDefault(__webpack_require__(50435));
const utils_1 = __webpack_require__(26865);
exports.HighLightLabelWrapper = styled_components_v6_1.default.div.withConfig({
    displayName: 'HighLightLabelWrapper'
}) `
  grid-area: highlight-label;
  text-align: match-parent;

  ${(0, utils_1.getTypographyStyles)('typography.definitions.globalEditorial.context-primary')}
  color: ${(0, utils_1.getColorToken)('colors.discovery.body.white.accent')};
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 52373:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Info = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styles_1 = __webpack_require__(15848);
const Byline_1 = __webpack_require__(82993);
const HighlightLabel_1 = __webpack_require__(63292);
const ItemsCount_1 = __webpack_require__(94805);
const PublishedDate_1 = __webpack_require__(48372);
function Info({ cardConfig }) {
    const infoConfig = cardConfig.blocks.info;
    if (infoConfig == null) {
        return null;
    }
    const { alignment, hideByline, hideHighlightLabel, hideItemsCount, hidePublishedDate } = infoConfig;
    return (react_1.default.createElement(styles_1.InfoWrapper, { cardLayout: cardConfig.layout },
        react_1.default.createElement(styles_1.InfoContent, { alignment: alignment },
            react_1.default.createElement(Byline_1.Byline, { hideByline: hideByline, alignment: infoConfig.alignment }),
            react_1.default.createElement(HighlightLabel_1.HighlightLabel, { hideHighlightLabel: hideHighlightLabel }),
            react_1.default.createElement(ItemsCount_1.ItemsCount, { hideItemsCount: hideItemsCount }),
            react_1.default.createElement(PublishedDate_1.PublishedDate, { hidePublishedDate: hidePublishedDate }))));
}
exports.Info = Info;
//# sourceMappingURL=Info.js.map

/***/ }),

/***/ 39698:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ItemsCount = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const styles_1 = __webpack_require__(8695);
const CardContext_1 = __webpack_require__(32541);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(96793)/* ["default"] */ .A);
function ItemsCount({ hideItemsCount }) {
    const { collageCard } = (0, react_1.useContext)(CardContext_1.CardContext);
    const { itemsCount } = collageCard;
    const intl = useIntl();
    if (!Number.isFinite(itemsCount?.count) || hideItemsCount) {
        return null;
    }
    return (react_1.default.createElement(styles_1.ItemsCountWrapper, null, intl.formatMessage(translations.photo, { count: itemsCount?.count })));
}
exports.ItemsCount = ItemsCount;
//# sourceMappingURL=ItemsCount.js.map

/***/ }),

/***/ 94805:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ItemsCount = void 0;
var ItemsCount_1 = __webpack_require__(39698);
Object.defineProperty(exports, "ItemsCount", ({ enumerable: true, get: function () { return ItemsCount_1.ItemsCount; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 8695:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ItemsCountWrapper = void 0;
const styled_components_1 = __importDefault(__webpack_require__(92168));
const utils_1 = __webpack_require__(26865);
exports.ItemsCountWrapper = styled_components_1.default.div.withConfig({
    displayName: 'ItemsCountWrapper'
}) `
  grid-area: items-count;
  text-align: match-parent;

  ${(0, utils_1.getTypographyStyles)('typography.definitions.globalEditorial.numerical-small')}
  color: ${(0, utils_1.getColorToken)('colors.discovery.body.white.description')};
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 34221:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.PublishedDate = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const styles_1 = __webpack_require__(17328);
const CardContext_1 = __webpack_require__(32541);
const utils_1 = __webpack_require__(49887);
function PublishedDate({ hidePublishedDate }) {
    const { collageCard } = (0, react_1.useContext)(CardContext_1.CardContext);
    const { date } = collageCard;
    if (!utils_1.StringUtils.isStringValid(date) || hidePublishedDate) {
        return null;
    }
    return react_1.default.createElement(styles_1.PublishedDateWrapper, null, date);
}
exports.PublishedDate = PublishedDate;
//# sourceMappingURL=PublishedDate.js.map

/***/ }),

/***/ 48372:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.PublishedDate = void 0;
var PublishedDate_1 = __webpack_require__(34221);
Object.defineProperty(exports, "PublishedDate", ({ enumerable: true, get: function () { return PublishedDate_1.PublishedDate; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 17328:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.PublishedDateWrapper = void 0;
const styled_components_v6_1 = __importDefault(__webpack_require__(50435));
const utils_1 = __webpack_require__(26865);
exports.PublishedDateWrapper = styled_components_v6_1.default.div.withConfig({
    displayName: 'PublishedDateWrapper'
}) `
  grid-area: published-date;
  text-align: match-parent;
  ${(0, utils_1.getTypographyStyles)('typography.definitions.globalEditorial.context-tertiary')}
  color: ${(0, utils_1.getColorToken)('colors.discovery.body.white.context-tertiary')};
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 78129:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Info = void 0;
var Info_1 = __webpack_require__(52373);
Object.defineProperty(exports, "Info", ({ enumerable: true, get: function () { return Info_1.Info; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 15848:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.InfoContent = exports.InfoWrapper = void 0;
const styled_components_v6_1 = __importDefault(__webpack_require__(50435));
const utils_1 = __webpack_require__(49887);
exports.InfoWrapper = styled_components_v6_1.default.div.withConfig({
    displayName: 'InfoWrapper'
}) `
  width: 100%;
  grid-area: info;
  container-type: inline-size;

  ${(props) => utils_1.MediaQueryUtils.generateCSSMediaQueries('grid-template-areas', props.cardLayout)};
`;
exports.InfoContent = styled_components_v6_1.default.div.withConfig({
    displayName: 'InfoContent'
}) `
  display: flex;
  flex-direction: column;
  text-align: ${({ alignment }) => alignment};
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 56572:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.IconBadge = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const styles_1 = __webpack_require__(75608);
const CardContext_1 = __webpack_require__(32541);
const helpers_1 = __webpack_require__(8377);
function IconBadge({ config }) {
    const { collageCard } = (0, react_1.useContext)(CardContext_1.CardContext);
    const { contentType } = collageCard;
    const Icon = (0, helpers_1.getIconBadge)(contentType);
    if (config == null || Icon == null) {
        return null;
    }
    return (react_1.default.createElement(styles_1.IconBadgeWrapper, { position: config.position },
        react_1.default.createElement(Icon, null)));
}
exports.IconBadge = IconBadge;
//# sourceMappingURL=IconBadge.js.map

/***/ }),

/***/ 8377:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getIconBadge = void 0;
const helpers_1 = __webpack_require__(80089);
function getIconBadge(contentType) {
    if (contentType == null) {
        return null;
    }
    const iconName = ICON_BADGE_MAP[contentType];
    if (iconName == null) {
        return null;
    }
    const IconComponent = (0, helpers_1.getIconComponent)(iconName, 'thin');
    if (IconComponent == null) {
        return null;
    }
    return IconComponent;
}
exports.getIconBadge = getIconBadge;
const ICON_BADGE_MAP = {
    gallery: 'Gallery',
    video: 'Play',
    cnevideo: 'Play'
};
//# sourceMappingURL=helpers.js.map

/***/ }),

/***/ 40732:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.IconBadge = void 0;
var IconBadge_1 = __webpack_require__(56572);
Object.defineProperty(exports, "IconBadge", ({ enumerable: true, get: function () { return IconBadge_1.IconBadge; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 75608:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.IconBadgeWrapper = void 0;
const styled_components_v6_1 = __importDefault(__webpack_require__(50435));
const helpers_1 = __webpack_require__(45898);
const utils_1 = __webpack_require__(26865);
const breakpoints_1 = __webpack_require__(99906);
exports.IconBadgeWrapper = styled_components_v6_1.default.div.withConfig({
    displayName: 'IconBadgeWrapper'
}) `
  grid-area: ${({ position }) => position};
  justify-self: ${({ position }) => (0, helpers_1.getJustifySelfValue)(position)};
  align-self: ${({ position }) => (0, helpers_1.getAlignSelfValue)(position)};

  display: flex;
  justify-content: center;
  align-items: center;

  width: 24px;
  height: 24px;

  @container (min-width: ${breakpoints_1.minThresholds.lg / 2}px) {
    width: 28px;
    height: 28px;
  }

  /** TODO: BI TOKEN SHOULD BE USED */
  background-color: rgb(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  margin: ${({ theme }) => (0, utils_1.getThemeValue)(theme, 'spacing.spacing-8')};

  & svg {
    path {
      fill: white;
    }
    width: 16px;
    height: 16px;
  }
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 15248:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Media = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styles_1 = __webpack_require__(68613);
const MediaAsset_1 = __webpack_require__(10540);
const MediaOverlay_1 = __webpack_require__(42931);
function Media({ cardConfig }) {
    const mediaConfig = cardConfig.blocks.media;
    const { hideAsset, iconBadge, textBadge } = mediaConfig || {};
    if (hideAsset) {
        return null;
    }
    if (cardConfig.type && cardConfig.type.startsWith('overlay')) {
        return (react_1.default.createElement(styles_1.OverlayMediaWrapper, { assetConfigs: cardConfig.assetConfigs },
            react_1.default.createElement(styles_1.OverlayMediaContent, null,
                react_1.default.createElement(MediaAsset_1.MediaAsset, { hideAsset: hideAsset }))));
    }
    return (react_1.default.createElement(styles_1.MediaWrapper, { cardLayout: cardConfig.layout },
        react_1.default.createElement(MediaAsset_1.MediaAsset, { hideAsset: hideAsset }),
        react_1.default.createElement(MediaOverlay_1.MediaOverlay, { iconBadge: iconBadge, textBadge: textBadge })));
}
exports.Media = Media;
//# sourceMappingURL=Media.js.map

/***/ }),

/***/ 48514:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.MediaAsset = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const styles_1 = __webpack_require__(680);
const CardContext_1 = __webpack_require__(32541);
const responsive_asset_1 = __importDefault(__webpack_require__(73275));
const map_sources_to_segmented_sources_1 = __webpack_require__(52009);
function MediaAsset({ hideAsset }) {
    const { collageCard, cardConfig } = (0, react_1.useContext)(CardContext_1.CardContext);
    const assetData = collageCard.image;
    if (assetData == null || hideAsset) {
        return null;
    }
    const segmentedSources = (0, map_sources_to_segmented_sources_1.mapSourcesToSegmentedSources)(assetData.sources);
    const responsiveAssetProps = { ...assetData, segmentedSources };
    return (react_1.default.createElement(styles_1.MediaAssetWrapper, { assetConfigs: cardConfig.assetConfigs },
        react_1.default.createElement(responsive_asset_1.default, { ...responsiveAssetProps })));
}
exports.MediaAsset = MediaAsset;
//# sourceMappingURL=MediaAsset.js.map

/***/ }),

/***/ 2844:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.MediaAssetStyleGenerator = void 0;
const AbstractStyleGenerator_1 = __webpack_require__(17054);
class MediaAssetStyleGenerator extends AbstractStyleGenerator_1.AbstractStyleGenerator {
    constructor(assetConfigs) {
        super();
        this.assetConfigs = assetConfigs;
    }
    getStyleForBreakpoint(breakpoint) {
        return [
            [
                'aspect-ratio',
                getAspectRatio(this.assetConfigs[breakpoint]?.aspectRatio)
            ]
        ];
    }
}
exports.MediaAssetStyleGenerator = MediaAssetStyleGenerator;
function getAspectRatio(aspectRatio) {
    if (aspectRatio == null) {
        return '';
    }
    const [widthRatio, heightRatio] = aspectRatio.split(':');
    return `${widthRatio} / ${heightRatio}`;
}
//# sourceMappingURL=MediaAssetStyleGenerator.js.map

/***/ }),

/***/ 10540:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.MediaAsset = void 0;
var MediaAsset_1 = __webpack_require__(48514);
Object.defineProperty(exports, "MediaAsset", ({ enumerable: true, get: function () { return MediaAsset_1.MediaAsset; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 680:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.MediaAssetWrapper = void 0;
const styled_components_v6_1 = __importDefault(__webpack_require__(50435));
const MediaAssetStyleGenerator_1 = __webpack_require__(2844);
exports.MediaAssetWrapper = styled_components_v6_1.default.div.withConfig({
    displayName: 'MediaAssetWrapper'
}) `
  max-width: 100%;
  img {
    width: 100%;
  }

  ${({ assetConfigs }) => new MediaAssetStyleGenerator_1.MediaAssetStyleGenerator(assetConfigs).generateStyleForBreakpoints()}
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 42931:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.MediaOverlay = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styles_1 = __webpack_require__(68613);
const IconBadge_1 = __webpack_require__(40732);
const TextBadge_1 = __webpack_require__(47018);
function MediaOverlay({ iconBadge, textBadge }) {
    return (react_1.default.createElement(styles_1.MediaOverlayWrapper, null,
        react_1.default.createElement(IconBadge_1.IconBadge, { config: iconBadge }),
        react_1.default.createElement(TextBadge_1.TextBadge, { config: textBadge })));
}
exports.MediaOverlay = MediaOverlay;
//# sourceMappingURL=MediaOverlay.js.map

/***/ }),

/***/ 64972:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.TextBadge = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styles_1 = __webpack_require__(90214);
function TextBadge({ config }) {
    if (config == null) {
        return null;
    }
    return (react_1.default.createElement(styles_1.TextBadgeWrapper, { position: config.position }, "TEXT BADGE"));
}
exports.TextBadge = TextBadge;
//# sourceMappingURL=TextBadge.js.map

/***/ }),

/***/ 47018:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.TextBadge = void 0;
var TextBadge_1 = __webpack_require__(64972);
Object.defineProperty(exports, "TextBadge", ({ enumerable: true, get: function () { return TextBadge_1.TextBadge; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 90214:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.TextBadgeWrapper = void 0;
const styled_components_v6_1 = __importDefault(__webpack_require__(50435));
const helpers_1 = __webpack_require__(45898);
exports.TextBadgeWrapper = styled_components_v6_1.default.div.withConfig({
    displayName: 'TextBadgeWrapper'
}) `
  grid-area: ${({ position }) => position};
  justify-self: ${({ position }) => (0, helpers_1.getJustifySelfValue)(position)};
  align-self: ${({ position }) => (0, helpers_1.getAlignSelfValue)(position)};

  display: flex;
  max-width: max-content;
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 10px;
  border-radius: 2px;
  justify-content: right;
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 45898:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getAlignSelfValue = exports.getJustifySelfValue = void 0;
var JustifySelf;
(function (JustifySelf) {
    JustifySelf["LEFT"] = "left";
    JustifySelf["RIGHT"] = "right";
})(JustifySelf || (JustifySelf = {}));
var AlignSelf;
(function (AlignSelf) {
    AlignSelf["END"] = "end";
    AlignSelf["START"] = "start";
})(AlignSelf || (AlignSelf = {}));
const TOP = 'top';
function getJustifySelfValue(position) {
    if (position.includes(JustifySelf.LEFT)) {
        return JustifySelf.LEFT;
    }
    return JustifySelf.RIGHT;
}
exports.getJustifySelfValue = getJustifySelfValue;
function getAlignSelfValue(position) {
    if (position.includes(TOP)) {
        return AlignSelf.START;
    }
    return AlignSelf.END;
}
exports.getAlignSelfValue = getAlignSelfValue;
//# sourceMappingURL=helpers.js.map

/***/ }),

/***/ 86171:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Media = void 0;
var Media_1 = __webpack_require__(15248);
Object.defineProperty(exports, "Media", ({ enumerable: true, get: function () { return Media_1.Media; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 68613:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.MediaOverlayWrapper = exports.OverlayMediaContent = exports.OverlayMediaWrapper = exports.MediaWrapper = void 0;
const styled_components_v6_1 = __importDefault(__webpack_require__(50435));
const utils_1 = __webpack_require__(49887);
const types_1 = __webpack_require__(11291);
const MediaAssetStyleGenerator_1 = __webpack_require__(2844);
exports.MediaWrapper = styled_components_v6_1.default.div.withConfig({
    displayName: 'MediaWrapper'
}) `
  grid-area: media;

  ${(props) => utils_1.MediaQueryUtils.generateCSSMediaQueries('grid-template-areas', props.cardLayout)};

  position: relative;
`;
exports.OverlayMediaWrapper = styled_components_v6_1.default.div.withConfig({
    displayName: 'OverlayMediaWrapper'
}) `
  width: 100%;
  height: 100%;
  ${({ assetConfigs }) => new MediaAssetStyleGenerator_1.MediaAssetStyleGenerator(assetConfigs).generateStyleForBreakpoints()}
`;
exports.OverlayMediaContent = styled_components_v6_1.default.div.withConfig({
    displayName: 'OverlayMediaContent'
}) `
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
`;
exports.MediaOverlayWrapper = styled_components_v6_1.default.div.withConfig({
    displayName: 'MediaOverlayWrapper'
}) `
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  display: grid;
  grid-template-areas:
    '${types_1.MediaBlockContentPosition.TOP_LEFT} ${types_1.MediaBlockContentPosition.TOP_RIGHT}'
    '${types_1.MediaBlockContentPosition.BOTTOM_LEFT} ${types_1.MediaBlockContentPosition.BOTTOM_RIGHT}';
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 71940:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Headline = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const styles_1 = __webpack_require__(78642);
const CardContext_1 = __webpack_require__(32541);
const utils_1 = __webpack_require__(49887);
function Headline({ hideHeadline }) {
    const { collageCard, cardConfig } = (0, react_1.useContext)(CardContext_1.CardContext);
    const hedData = collageCard.dangerousHed;
    if (!utils_1.StringUtils.isStringValid(hedData) || hideHeadline) {
        return null;
    }
    return (react_1.default.createElement(styles_1.HeadlineWrapper, { hedToken: cardConfig.typographyConfig?.hedToken, dangerouslySetInnerHTML: { __html: hedData } }));
}
exports.Headline = Headline;
//# sourceMappingURL=Headline.js.map

/***/ }),

/***/ 36766:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Headline = void 0;
var Headline_1 = __webpack_require__(71940);
Object.defineProperty(exports, "Headline", ({ enumerable: true, get: function () { return Headline_1.Headline; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 78642:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.HeadlineWrapper = void 0;
const styled_components_v6_1 = __importDefault(__webpack_require__(50435));
const TypographyUtils_1 = __webpack_require__(49716);
const utils_1 = __webpack_require__(26865);
exports.HeadlineWrapper = styled_components_v6_1.default.h3.withConfig({
    displayName: 'HeadlineWrapper'
}) `
  grid-area: headline;
  text-align: match-parent;

  padding: 0;
  margin: 0;

  ${({ theme, hedToken }) => TypographyUtils_1.TypographyUtils.getFluidTypographStyles(theme, `typography.definitions.fluid.${hedToken ?? 'headline-md'}`)}
  color: ${(0, utils_1.getColorToken)('colors.discovery.body.white.heading')};
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 82146:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Rubric = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const styles_1 = __webpack_require__(15701);
const CardContext_1 = __webpack_require__(32541);
const utils_1 = __webpack_require__(49887);
function Rubric({ hideRubric }) {
    const { collageCard } = (0, react_1.useContext)(CardContext_1.CardContext);
    const rubricData = collageCard.rubric?.name;
    if (!utils_1.StringUtils.isStringValid(rubricData) || hideRubric) {
        return null;
    }
    return react_1.default.createElement(styles_1.RubricWrapper, null, rubricData);
}
exports.Rubric = Rubric;
//# sourceMappingURL=Rubric.js.map

/***/ }),

/***/ 33163:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Rubric = void 0;
var Rubric_1 = __webpack_require__(82146);
Object.defineProperty(exports, "Rubric", ({ enumerable: true, get: function () { return Rubric_1.Rubric; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 15701:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.RubricWrapper = void 0;
const styled_components_v6_1 = __importDefault(__webpack_require__(50435));
const utils_1 = __webpack_require__(26865);
exports.RubricWrapper = styled_components_v6_1.default.span.withConfig({
    displayName: 'RubricWrapper'
}) `
  grid-area: rubric;
  text-align: match-parent;
  width: 100%;

  ${(0, utils_1.getTypographyStyles)('typography.definitions.globalEditorial.context-primary')}

  color: ${(0, utils_1.getColorToken)('colors.discovery.body.white.context-signature')};
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 35670:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Subhead = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styles_1 = __webpack_require__(61910);
const styles_2 = __webpack_require__(68116);
function Subhead({ hideSubhead }) {
    /** TODO: refactor this ticket to display proper so called subhead-data for pitchfork
     * that means:
     * - use right term and data (genre or artist... tbd)
     * - create own template instead of reusing SummaryItemDek
     * */
    const subheadData = null;
    if (subheadData == null || hideSubhead) {
        return null;
    }
    return (react_1.default.createElement(styles_1.SubheadWrapper, null,
        react_1.default.createElement(styles_2.SummaryItemDek, null, subheadData)));
}
exports.Subhead = Subhead;
//# sourceMappingURL=Subhead.js.map

/***/ }),

/***/ 14202:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Subhead = void 0;
var Subhead_1 = __webpack_require__(35670);
Object.defineProperty(exports, "Subhead", ({ enumerable: true, get: function () { return Subhead_1.Subhead; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 61910:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.SubheadWrapper = void 0;
const styled_components_v6_1 = __importDefault(__webpack_require__(50435));
exports.SubheadWrapper = styled_components_v6_1.default.div.withConfig({
    displayName: 'SubheadWrapper'
}) `
  grid-area: subhead;
  text-align: match-parent;
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 20807:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Title = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styles_1 = __webpack_require__(94655);
const Headline_1 = __webpack_require__(36766);
const Rubric_1 = __webpack_require__(33163);
const Subhead_1 = __webpack_require__(14202);
function Title({ cardConfig }) {
    const titleConfig = cardConfig.blocks.title;
    if (titleConfig == null) {
        return null;
    }
    const { alignment, hideRubric, hideHeadline, hideSubhead } = titleConfig;
    return (react_1.default.createElement(styles_1.TitleWrapper, { cardLayout: cardConfig.layout },
        react_1.default.createElement(styles_1.TitleContent, { alignment: alignment },
            react_1.default.createElement(Rubric_1.Rubric, { hideRubric: hideRubric }),
            react_1.default.createElement(Headline_1.Headline, { hideHeadline: hideHeadline }),
            react_1.default.createElement(Subhead_1.Subhead, { hideSubhead: hideSubhead }))));
}
exports.Title = Title;
//# sourceMappingURL=Title.js.map

/***/ }),

/***/ 86205:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Title = void 0;
var Title_1 = __webpack_require__(20807);
Object.defineProperty(exports, "Title", ({ enumerable: true, get: function () { return Title_1.Title; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 94655:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.TitleContent = exports.TitleWrapper = void 0;
const styled_components_v6_1 = __importDefault(__webpack_require__(50435));
const utils_1 = __webpack_require__(49887);
exports.TitleWrapper = styled_components_v6_1.default.div.withConfig({
    displayName: 'TitleWrapper'
}) `
  width: 100%;
  grid-area: title;
  container-type: inline-size;

  ${(props) => utils_1.MediaQueryUtils.generateCSSMediaQueries('grid-template-areas', props.cardLayout)};
`;
exports.TitleContent = styled_components_v6_1.default.div.withConfig({
    displayName: 'TitleContent'
}) `
  display: flex;
  flex-direction: column;
  text-align: ${({ alignment }) => alignment};
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 19601:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CARD_PREFIX = void 0;
exports.CARD_PREFIX = 'card';
//# sourceMappingURL=constants.js.map

/***/ }),

/***/ 36524:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Card = void 0;
var Card_1 = __webpack_require__(29384);
Object.defineProperty(exports, "Card", ({ enumerable: true, get: function () { return Card_1.Card; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 77160:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.OverlayCardContent = exports.OverlayCardWrapper = exports.DefaultCardWrapper = void 0;
const styled_components_v6_1 = __importStar(__webpack_require__(50435));
const utils_1 = __webpack_require__(49887);
const constants_1 = __webpack_require__(19601);
const utils_2 = __webpack_require__(26865);
const MediaAssetStyleGenerator_1 = __webpack_require__(2844);
const breakpoints_1 = __webpack_require__(99906);
// temporary until we get valid tokens
const styles_1 = __webpack_require__(78642);
const styles_2 = __webpack_require__(15701);
const styles_3 = __webpack_require__(91899);
const styles_4 = __webpack_require__(8695);
const styles_5 = __webpack_require__(17328);
const styles_6 = __webpack_require__(74423);
const styles_7 = __webpack_require__(4654);
exports.DefaultCardWrapper = styled_components_v6_1.default.a.withConfig({
    displayName: 'DefaultCardWrapper'
}) `
  grid-area: ${(props) => `${constants_1.CARD_PREFIX}${props.gridArea}`};

  container-type: inline-size;
  width: 100%;
  display: grid;
  overflow: hidden;

  color: ${(0, utils_2.getColorToken)('colors.discovery.body.white.heading')};
  text-decoration: none;

  &:hover,
  &:focus,
  &:active {
    text-decoration: none;
  }

  ${({ cardLayout }) => cardLayout &&
    utils_1.MediaQueryUtils.generateCSSMediaQueries('grid-template-areas', cardLayout)};

  ${({ gridTemplateColumns }) => gridTemplateColumns &&
    utils_1.MediaQueryUtils.generateCSSMediaQueries('grid-template-columns', gridTemplateColumns)};

  gap: 16px;
  @media (min-width: ${breakpoints_1.minThresholds.md}px) {
    gap: 24px;
  }
  @media (min-width: ${breakpoints_1.minThresholds.xxl}px) {
    gap: 32px;
  }
`;
exports.OverlayCardWrapper = styled_components_v6_1.default.a.withConfig({
    displayName: 'OverlayCardWrapper'
}) `
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  grid-area: ${(props) => `${constants_1.CARD_PREFIX}${props.gridArea}`};

  ${({ assetConfigs }) => new MediaAssetStyleGenerator_1.MediaAssetStyleGenerator(assetConfigs).generateStyleForBreakpoints()}

  container-type: inline-size;

  /** TODO: use BI TOKEN */
  color: black;

  text-decoration: none;

  &:hover,
  &:focus,
  &:active {
    text-decoration: none;
  }
`;
exports.OverlayCardContent = styled_components_v6_1.default.div.withConfig({
    displayName: 'OverlayCardContent'
}) `
  width: 100%;
  position: absolute;
  left: 0;

  display: grid;

  ${({ overlayDirection }) => getStyles(overlayDirection)};

  ${({ cardLayout }) => cardLayout &&
    utils_1.MediaQueryUtils.generateCSSMediaQueries('grid-template-areas', cardLayout)};

  ${({ gridTemplateColumns }) => gridTemplateColumns &&
    utils_1.MediaQueryUtils.generateCSSMediaQueries('grid-template-columns', gridTemplateColumns)};

  gap: 16px;
  @media (min-width: ${breakpoints_1.minThresholds.md}px) {
    gap: 24px;
  }
  @media (min-width: ${breakpoints_1.minThresholds.xxl}px) {
    gap: 32px;
  }

  z-index: 1;

  ${styles_1.HeadlineWrapper}, ${styles_2.RubricWrapper}, ${styles_3.BylineWrapper}, ${styles_4.ItemsCountWrapper}, ${styles_5.PublishedDateWrapper}, ${styles_6.BylinePreamble}, ${styles_6.BylineName}, ${styles_7.DekWrapper} {
    color: white;
  }
  background: linear-gradient(
    to ${({ overlayDirection }) => overlayDirection},
    rgba(0, 0, 0, 0.8) 90%,
    rgba(0, 0, 0, 0) 100%
  );
`;
function getStyles(overlayDirection) {
    switch (overlayDirection) {
        case 'top':
            return (0, styled_components_v6_1.css) `
        align-content: end;
        padding: 20px 4px 0 4px;
        bottom: 0;
      `;
        case 'bottom':
            return (0, styled_components_v6_1.css) `
        align-content: start;
        padding: 0 4px 20px 4px;
        top: 0;
      `;
        default:
            return '';
    }
}
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 99130:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Collage = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styles_1 = __webpack_require__(11265);
const List_1 = __webpack_require__(22702);
const Divider_1 = __webpack_require__(22007);
const helpers_1 = __webpack_require__(19222);
function Collage({ collageLists, collageConfig }) {
    const dividers = (0, helpers_1.getDividers)(collageConfig.layout);
    return (react_1.default.createElement(styles_1.CollageWrapper, { layout: collageConfig.layout, gridTemplateColumns: collageConfig.gridTemplateColumns },
        dividers.map((divider) => (react_1.default.createElement(Divider_1.Divider, { areaName: divider, layout: collageConfig.layout }))),
        collageLists.map((list, index) => (react_1.default.createElement(List_1.List, { key: index, gridArea: index + 1, title: list.title, collageCards: list.cards, listConfig: collageConfig.lists[index] })))));
}
exports.Collage = Collage;
//# sourceMappingURL=Collage.js.map

/***/ }),

/***/ 99199:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Collage = void 0;
var Collage_1 = __webpack_require__(99130);
Object.defineProperty(exports, "Collage", ({ enumerable: true, get: function () { return Collage_1.Collage; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 11265:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CollageWrapper = void 0;
const styled_components_v6_1 = __importDefault(__webpack_require__(50435));
const AbstractStyleGenerator_1 = __webpack_require__(17054);
const breakpoints_1 = __webpack_require__(99906);
exports.CollageWrapper = styled_components_v6_1.default.div.withConfig({
    displayName: 'CollageWrapper'
}) `
  container-type: inline-size;
  display: grid;

  ${(props) => new AbstractStyleGenerator_1.CSSPropertyStyleGenerator('grid-template-columns', '', props.gridTemplateColumns).generateStyleForBreakpoints()};

  ${(props) => new AbstractStyleGenerator_1.CSSPropertyStyleGenerator('grid-template-areas', '', props.layout).generateStyleForBreakpoints()};

  gap: 16px;
  @media (min-width: ${breakpoints_1.minThresholds.md}px) {
    gap: 24px;
  }
  @media (min-width: ${breakpoints_1.minThresholds.xxl}px) {
    gap: 32px;
  }
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 40972:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CollageEnvironment = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styled_components_v6_1 = __webpack_require__(50435);
const memoize_1 = __importDefault(__webpack_require__(50104));
const styles_1 = __webpack_require__(89320);
const Collage_1 = __webpack_require__(99199);
const CollageHeading_1 = __webpack_require__(90055);
const ErrorBoundry_1 = __webpack_require__(45193);
function CollageEnvironment(collageEnvironmentProps) {
    try {
        const { title, lists, collageConfig } = collageEnvironmentProps;
        /** StyleSheetManager v6 should be wrapped the whole Verso - temporary to resolve console warnings. */
        return (react_1.default.createElement(styled_components_v6_1.StyleSheetManager, { shouldForwardProp: shouldForwardProp },
            react_1.default.createElement(ErrorBoundry_1.ErrorBoundary, null,
                react_1.default.createElement(styled_components_v6_1.ThemeProvider, { theme: { collageTheme: 'standard' } },
                    react_1.default.createElement(styles_1.CollageEnvironmentWrapper, null,
                        react_1.default.createElement(CollageHeading_1.CollageHeading, { dangerousHed: title }),
                        react_1.default.createElement(Collage_1.Collage, { collageLists: lists, collageConfig: collageConfig }))))));
    }
    catch (error) {
        console.error('[CollageEnvironment] Caught error:', error);
        return react_1.default.createElement(react_1.default.Fragment, null);
    }
}
exports.CollageEnvironment = CollageEnvironment;
/**
 * TEMPORARY SOLUTION - This solution must be implemented Globally.
 * */
function shouldForwardProp(propName, target) {
    if (typeof target === 'string') {
        // For HTML elements, forward the prop if it is a valid HTML attribute
        return isPropValid(propName);
    }
    // For other elements, forward all props
    return true;
}
/** Should include all the React and HTML props that we use */
const reactPropsRegex = /^(children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|href)$/i;
const isPropValid = (0, memoize_1.default)((prop) => reactPropsRegex.test(prop) ||
    (prop.charCodeAt(0) === 111 /* o */ &&
        prop.charCodeAt(1) === 110 /* n */ &&
        prop.charCodeAt(2) < 91) /* Z+1 */);
//# sourceMappingURL=CollageEnvironment.js.map

/***/ }),

/***/ 71878:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CollageEnvironmentStyleGenerator = void 0;
const AbstractStyleGenerator_1 = __webpack_require__(17054);
const types_1 = __webpack_require__(11291);
class CollageEnvironmentStyleGenerator extends AbstractStyleGenerator_1.AbstractStyleGenerator {
    getStyleForBreakpoint(breakpoint) {
        switch (breakpoint) {
            case types_1.Breakpoints.SM:
            case types_1.Breakpoints.MD:
                return [
                    ['max-width', 'none'],
                    ['padding', `0 24px`]
                ];
            case types_1.Breakpoints.LG:
            case types_1.Breakpoints.XL:
                return [
                    ['max-width', 'none'],
                    ['padding', '0 48px']
                ];
            case types_1.Breakpoints.XXL:
                return [
                    ['max-width', 'none'],
                    ['padding', '0 64px']
                ];
            case types_1.Breakpoints.XXXL:
                return [
                    ['max-width', '1600px'],
                    ['padding', '0 64px']
                ];
            default:
                return [
                    ['max-width', 'none'],
                    ['padding', `0 24px`]
                ];
        }
    }
}
exports.CollageEnvironmentStyleGenerator = CollageEnvironmentStyleGenerator;
//# sourceMappingURL=CollageEnvironmentStyleGenerator.js.map

/***/ }),

/***/ 8787:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CollageHeading = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styles_1 = __webpack_require__(30704);
const utils_1 = __webpack_require__(49887);
const BaseSectionTitle = __webpack_require__(35864);
function CollageHeading({ dangerousHed }) {
    if (!utils_1.StringUtils.isStringValid(dangerousHed)) {
        return null;
    }
    return (react_1.default.createElement(styles_1.CollageHeadingWrapper, null,
        react_1.default.createElement(BaseSectionTitle.TextLeftWithLineBelowTitle, { dangerousHed: dangerousHed })));
}
exports.CollageHeading = CollageHeading;
//# sourceMappingURL=CollageHeading.js.map

/***/ }),

/***/ 90055:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CollageHeading = void 0;
var CollageHeading_1 = __webpack_require__(8787);
Object.defineProperty(exports, "CollageHeading", ({ enumerable: true, get: function () { return CollageHeading_1.CollageHeading; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 30704:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CollageHeadingWrapper = void 0;
const styled_components_v6_1 = __importDefault(__webpack_require__(50435));
exports.CollageHeadingWrapper = styled_components_v6_1.default.div.withConfig({
    displayName: 'CollageHeadingWrapper'
}) `
  margin-bottom: 2rem;
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 52844:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CollageEnvironment = void 0;
var CollageEnvironment_1 = __webpack_require__(40972);
Object.defineProperty(exports, "CollageEnvironment", ({ enumerable: true, get: function () { return CollageEnvironment_1.CollageEnvironment; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 89320:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CollageEnvironmentWrapper = void 0;
const styled_components_v6_1 = __importDefault(__webpack_require__(50435));
const CollageEnvironmentStyleGenerator_1 = __webpack_require__(71878);
exports.CollageEnvironmentWrapper = styled_components_v6_1.default.div.withConfig({
    displayName: 'CollageEnvironmentWrapper'
}) `
  width: 100%;
  margin: 0 auto;
  ${new CollageEnvironmentStyleGenerator_1.CollageEnvironmentStyleGenerator().generateStyleForBreakpoints()}

  display: flex;
  flex-direction: column;
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 53294:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Divider = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styles_1 = __webpack_require__(19417);
function Divider({ areaName, layout }) {
    return react_1.default.createElement(styles_1.DividerWrapper, { areaName: areaName, layout: layout });
}
exports.Divider = Divider;
//# sourceMappingURL=Divider.js.map

/***/ }),

/***/ 42490:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.VERTICAL_DIVIDER = exports.DIVIDER_PREFIX = void 0;
exports.DIVIDER_PREFIX = 'divider';
exports.VERTICAL_DIVIDER = 'v';
//# sourceMappingURL=constants.js.map

/***/ }),

/***/ 19222:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getDividers = void 0;
const helpers_1 = __webpack_require__(93038);
const constants_1 = __webpack_require__(42490);
function getDividers(layout) {
    const areas = (0, helpers_1.getAvailableAreasInGrid)(layout);
    return areas.filter((areas) => areas.includes(constants_1.DIVIDER_PREFIX));
}
exports.getDividers = getDividers;
//# sourceMappingURL=helpers.js.map

/***/ }),

/***/ 22007:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Divider = void 0;
var Divider_1 = __webpack_require__(53294);
Object.defineProperty(exports, "Divider", ({ enumerable: true, get: function () { return Divider_1.Divider; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 19417:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.DividerWrapper = void 0;
const styled_components_v6_1 = __importStar(__webpack_require__(50435));
const constants_1 = __webpack_require__(42490);
const utils_1 = __webpack_require__(49887);
exports.DividerWrapper = styled_components_v6_1.default.div.withConfig({
    displayName: 'DividerWrapper'
}) `
  grid-area: ${({ areaName }) => areaName};

  background-color: gray;

  ${({ areaName }) => getDividerWidthAndHeight(areaName)};

  ${({ areaName, layout }) => utils_1.MediaQueryUtils.getVisibilityMediaQueries(layout, areaName)};
`;
function getDividerWidthAndHeight(areaName) {
    if (isVertical(areaName)) {
        return (0, styled_components_v6_1.css) `
      width: 1px;
      height: 100%;
    `;
    }
    return (0, styled_components_v6_1.css) `
    width: 100%;
    height: 1px;
  `;
}
function isVertical(areaName) {
    const value = areaName.split('-')[1];
    return value === constants_1.VERTICAL_DIVIDER;
}
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 13724:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.List = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styles_1 = __webpack_require__(66690);
const Card_1 = __webpack_require__(36524);
const ListHeading_1 = __webpack_require__(6527);
const constants_1 = __webpack_require__(19601);
const helpers_1 = __webpack_require__(19222);
const Divider_1 = __webpack_require__(22007);
function List({ gridArea, title, collageCards, listConfig }) {
    const dividers = (0, helpers_1.getDividers)(listConfig.layout);
    return (react_1.default.createElement(styles_1.ListWrapper, { gridArea: gridArea, layout: listConfig.layout },
        react_1.default.createElement(ListHeading_1.ListHeading, { title: title, layout: listConfig.layout }),
        dividers.map((divider) => (react_1.default.createElement(Divider_1.Divider, { areaName: divider, layout: listConfig.layout }))),
        collageCards.map((collageCard, index) => (react_1.default.createElement(Card_1.Card, { key: collageCard.id, collageCard: collageCard, gridArea: index + 1, cardConfig: listConfig.cards[constants_1.CARD_PREFIX + (index + 1)] ??
                listConfig.cards.default })))));
}
exports.List = List;
//# sourceMappingURL=List.js.map

/***/ }),

/***/ 54605:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ListHeading = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styles_1 = __webpack_require__(40993);
const utils_1 = __webpack_require__(49887);
const helpers_1 = __webpack_require__(93038);
const BaseSectionTitle = __webpack_require__(35864);
function ListHeading({ title, layout }) {
    const hideListHeading = getHideListHeading(layout);
    if (hideListHeading || !utils_1.StringUtils.isStringValid(title)) {
        return null;
    }
    return (react_1.default.createElement(styles_1.ListHeadingWrapper, { layout: layout },
        react_1.default.createElement(BaseSectionTitle.TextLeft, { dangerousHed: title })));
}
exports.ListHeading = ListHeading;
function getHideListHeading(layout) {
    return !(0, helpers_1.getAvailableAreasInGrid)(layout).includes('list-heading');
}
//# sourceMappingURL=ListHeading.js.map

/***/ }),

/***/ 6527:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ListHeading = void 0;
var ListHeading_1 = __webpack_require__(54605);
Object.defineProperty(exports, "ListHeading", ({ enumerable: true, get: function () { return ListHeading_1.ListHeading; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 40993:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ListHeadingWrapper = void 0;
const styled_components_v6_1 = __importDefault(__webpack_require__(50435));
const utils_1 = __webpack_require__(49887);
exports.ListHeadingWrapper = styled_components_v6_1.default.div.withConfig({
    displayName: 'ListHeadingWrapper'
}) `
  grid-area: list-heading;

  ${({ layout }) => utils_1.MediaQueryUtils.getVisibilityMediaQueries(layout, 'list-heading')};
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 65599:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.LIST_PREFIX = void 0;
exports.LIST_PREFIX = 'list';
//# sourceMappingURL=constants.js.map

/***/ }),

/***/ 22702:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.List = void 0;
var List_1 = __webpack_require__(13724);
Object.defineProperty(exports, "List", ({ enumerable: true, get: function () { return List_1.List; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 66690:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ListWrapper = void 0;
const styled_components_v6_1 = __importDefault(__webpack_require__(50435));
const constants_1 = __webpack_require__(65599);
const breakpoints_1 = __webpack_require__(99906);
const AbstractStyleGenerator_1 = __webpack_require__(17054);
exports.ListWrapper = styled_components_v6_1.default.div.withConfig({
    displayName: 'ListWrapper'
}) `
  grid-area: ${(props) => `${constants_1.LIST_PREFIX}${props.gridArea}`};
  container-type: inline-size;
  width: 100%;
  height: 100%;

  display: grid;
  align-content: start;

  ${(props) => new AbstractStyleGenerator_1.CSSPropertyStyleGenerator('grid-template-areas', '', props.layout).generateStyleForBreakpoints()}

  gap: 16px;
  @media (min-width: ${breakpoints_1.minThresholds.md}px) {
    gap: 24px;
  }
  @media (min-width: ${breakpoints_1.minThresholds.xxl}px) {
    gap: 32px;
  }
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 68381:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CollageEnvironment = void 0;
var CollageEnvironment_1 = __webpack_require__(52844);
Object.defineProperty(exports, "CollageEnvironment", ({ enumerable: true, get: function () { return CollageEnvironment_1.CollageEnvironment; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 96793:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    photo: {
        id: 'ItemCount.photo',
        defaultMessage: `{count, plural,
        one {# Photo}
        other {# Photos}
    }`,
        description: 'photo with plurals'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 11291:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __exportStar = (this && this.__exportStar) || function(m, exports) {
    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
__exportStar(__webpack_require__(41914), exports);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 41914:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Breakpoints = exports.BlockAlignment = exports.MediaBlockContentPosition = void 0;
var MediaBlockContentPosition;
(function (MediaBlockContentPosition) {
    MediaBlockContentPosition["TOP_LEFT"] = "top-left";
    MediaBlockContentPosition["TOP_RIGHT"] = "top-right";
    MediaBlockContentPosition["BOTTOM_LEFT"] = "bottom-left";
    MediaBlockContentPosition["BOTTOM_RIGHT"] = "bottom-right";
})(MediaBlockContentPosition = exports.MediaBlockContentPosition || (exports.MediaBlockContentPosition = {}));
var BlockAlignment;
(function (BlockAlignment) {
    BlockAlignment["LEFT"] = "left";
    BlockAlignment["RIGHT"] = "right";
    BlockAlignment["CENTER"] = "center";
})(BlockAlignment = exports.BlockAlignment || (exports.BlockAlignment = {}));
var Breakpoints;
(function (Breakpoints) {
    Breakpoints["SM"] = "sm";
    Breakpoints["MD"] = "md";
    Breakpoints["LG"] = "lg";
    Breakpoints["XL"] = "xl";
    Breakpoints["XXL"] = "xxl";
    Breakpoints["XXXL"] = "xxxl";
})(Breakpoints = exports.Breakpoints || (exports.Breakpoints = {}));
//# sourceMappingURL=types.js.map

/***/ }),

/***/ 98445:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.MediaQueryUtils = void 0;
const breakpoints_1 = __webpack_require__(99906);
class MediaQueryUtils {
    static getVisibilityMediaQueries(gridData, areaName) {
        return Object.entries(gridData).map(([breakpoint, gridTemplateArea]) => `
        @media (min-width: ${breakpoints_1.minThresholds[breakpoint]}px) {
          display: ${gridTemplateArea.includes(areaName) ? 'block' : 'none'};
        }
      `);
    }
    static generateCSSMediaQueries(cssProperty, gridData) {
        return Object.entries(gridData).map(([breakpoint, value]) => `
        @media (min-width: ${breakpoints_1.minThresholds[breakpoint]}px) {
          ${cssProperty}: ${value};
        }
      `);
    }
}
exports.MediaQueryUtils = MediaQueryUtils;
//# sourceMappingURL=MediaQueryUtils.js.map

/***/ }),

/***/ 23745:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.StringUtils = void 0;
class StringUtils {
    static isStringValid(str) {
        if (str == null) {
            return false;
        }
        return str.trim().length > 0;
    }
}
exports.StringUtils = StringUtils;
//# sourceMappingURL=StringUtils.js.map

/***/ }),

/***/ 93038:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getAvailableAreasInGrid = void 0;
/** Extract the available areas name from the grid layout string. */
function getAvailableAreasInGrid(layout) {
    return [
        ...new Set(Object.keys(layout)
            .flatMap((key) => layout[key].split(' '))
            .map((str) => str.trim().replace(/^"|"$/g, ''))
            .filter((str) => str.length > 0))
    ];
}
exports.getAvailableAreasInGrid = getAvailableAreasInGrid;
//# sourceMappingURL=helpers.js.map

/***/ }),

/***/ 49887:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.StringUtils = exports.MediaQueryUtils = void 0;
var MediaQueryUtils_1 = __webpack_require__(98445);
Object.defineProperty(exports, "MediaQueryUtils", ({ enumerable: true, get: function () { return MediaQueryUtils_1.MediaQueryUtils; } }));
var StringUtils_1 = __webpack_require__(23745);
Object.defineProperty(exports, "StringUtils", ({ enumerable: true, get: function () { return StringUtils_1.StringUtils; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 75454:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getFeaturedQueryParam = exports.getPlacementData = exports.trackCommunityCommentsImpression = void 0;
const snowplow_tracking_1 = __webpack_require__(14307);
const trackCommunityCommentsImpression = (count, subject, placement) => {
    const entityData = {
        type: 'impression',
        label: 'Comments',
        subject,
        features_list: [
            {
                name: 'comments',
                total_index: count
            }
        ]
    };
    if (placement) {
        entityData.placement = placement;
    }
    (0, snowplow_tracking_1.trackContentEngagementEvent)(entityData);
};
exports.trackCommunityCommentsImpression = trackCommunityCommentsImpression;
const getPlacementData = (isFeatured) => isFeatured ? { placement: 'pinned_comments' } : {};
exports.getPlacementData = getPlacementData;
const getFeaturedQueryParam = (isFeatured) => isFeatured ? 'true' : 'false';
exports.getFeaturedQueryParam = getFeaturedQueryParam;
//# sourceMappingURL=tracking.js.map

/***/ }),

/***/ 92867:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
const react_intl_1 = __webpack_require__(46984);
exports["default"] = (0, react_intl_1.defineMessages)({
    utilityLabel: {
        id: 'ReviewListContainer.UtilityLabel',
        defaultMessage: 'Back to top',
        description: 'Utility label for review list container'
    },
    SavedCommentMsgTitle: {
        id: 'Commenting.SavedCommentMsgTitle',
        defaultMessage: 'Comment submitted',
        description: 'Text for the MessageBanner title',
        isConfigurable: true
    },
    SavedCommentDek: {
        id: 'Commenting.SavedCommentDek',
        defaultMessage: 'Comments are moderated in line with our',
        description: 'Text for the MessageBanner body',
        isConfigurable: true
    },
    CommunityGuidelines: {
        id: 'Commenting.CommunityGuidelines',
        defaultMessage: 'Community Guidelines',
        description: 'Text for the community guidelines link',
        isConfigurable: true
    },
    SavedCommentDekTrail: {
        id: 'Commenting.SavedCommentDekTrail',
        defaultMessage: 'before being added.',
        description: 'Text for the MessageBanner body',
        isConfigurable: true
    },
    SavedCommentSubContent: {
        id: 'Commenting.SavedCommentSubContent',
        defaultMessage: 'Thank you for contributing your thoughts.',
        description: 'Text for the MessageBanner sub content',
        isConfigurable: true
    },
    likeActionErrorMessage: {
        id: 'Commenting.LikeActionErrorMessage',
        defaultMessage: 'Unable to like this comment. Please try again.',
        description: 'Error message to display while like action fails'
    },
    unlikeActionErrorMessage: {
        id: 'Commenting.UnlikeActionErrorMessage',
        defaultMessage: 'Unable to unlike this comment. Please try again.',
        description: 'Error message to display while unlike action fails'
    },
    signInModalHed: {
        id: 'Commenting.signInModalHed',
        defaultMessage: 'Sign in to join the',
        description: 'Hed for commenting sign in modal'
    },
    signInModalHedSpanTag: {
        id: 'Commenting.signInModalHedSpanTag',
        defaultMessage: '{brandName} community',
        description: 'Hed span for commenting sign in modal'
    },
    signInModalMessage: {
        id: 'Commenting.signInModalMessage',
        defaultMessage: "Once you're signed in, add your comments and like or reply to others.",
        description: 'Message for commenting sign in modal'
    },
    replyDiscardModalHed: {
        id: 'Commenting.replyDiscardModalHed',
        defaultMessage: 'Discard this reply?',
        description: 'Hed for discard reply modal'
    },
    closeCommentStreamMessage: {
        id: 'Commenting.closeCommentStreamMessage',
        defaultMessage: 'Comments are closed on this story but you can still browse or upvote them.',
        description: 'Hed for discard reply modal'
    },
    emptyCommentMsgHed: {
        id: 'Commenting.emptyCommentMsgHed',
        defaultMessage: 'There aren’t any comments yet.',
        description: 'Hed for empty comments'
    },
    emptyCommentMsgDek: {
        id: 'Commenting.emptyCommentMsgDek',
        defaultMessage: 'Add the first to start the conversation.',
        description: 'Dek for empty comments'
    },
    signInButtonLabel: {
        id: 'Commenting.signInButtonLabel',
        defaultMessage: 'Sign in or create account',
        description: 'Text for the sign in or create account button'
    },
    signOutEmptyCommentMsgDek: {
        id: 'Commenting.signOutEmptyCommentMsgDek',
        defaultMessage: 'Be the first to start the conversation!<br/> You need an account to add or like comments.',
        description: 'Dek for empty comments for signed out users'
    },
    signUpMessageBannerHed: {
        id: 'Commenting.signUpMessageBannerHed',
        defaultMessage: 'Join the {brandName} community to add comments.',
        description: 'Text for signout heading'
    },
    saveStory: {
        id: 'Commenting.saveStory',
        defaultMessage: 'Save story',
        description: 'Label for the bookmark icon in commenting section'
    },
    pinnedReviewLabel: {
        id: 'ReviewList.pinnedReviewLabel',
        defaultMessage: 'Featured by',
        description: 'Featured by label'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 85554:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.useUpdateUserReactions = exports.setUserReactionsReducer = exports.setUserReactionsReplyReducer = exports.updatedUserReactionsForID = exports.getRelativeURLWithoutParams = exports.getParamsAsObjectFromURL = exports.useScrollToCommenting = exports.getRelativeURLWithSearchAndHash = exports.getRelativeURLWithSearch = exports.getRelativeURLWithHash = exports.INTERVAL_DELAY = exports.commentingAction = exports.hasAccessToCommenting = exports.useCommentBannerContent = exports.useFetchComments = exports.formatReviewListTitle = void 0;
const jwt_decode_1 = __importDefault(__webpack_require__(6765));
const react_1 = __webpack_require__(96540);
const react_intl_1 = __webpack_require__(46984);
const cookies_1 = __importDefault(__webpack_require__(53788));
const utils_1 = __webpack_require__(60711);
const cookie_1 = __webpack_require__(56892);
const scroll_to_anchor_1 = __webpack_require__(759);
const translations_1 = __importDefault(__webpack_require__(92867));
const formatReviewListTitle = (count, reviewsSectionTitle, placeHolderforZero = '') => {
    const reviewsListTitle = reviewsSectionTitle || 'Comments';
    if (!count && !placeHolderforZero) {
        return reviewsListTitle;
    }
    return `${reviewsListTitle}${count && count > 0 ? ` (${count})` : ` ${placeHolderforZero}`}`;
};
exports.formatReviewListTitle = formatReviewListTitle;
const useFetchComments = ({ commentingUrl, defaultReplyLimit: replyLimit, entityId, initialReviewLimit: reviewLimit, setCommentCount, setIsCommentLoading, commentsOrderBy, repliesOrderBy }) => {
    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
    const [reviews, setReviews] = (0, react_1.useState)([]);
    const [featuredReviews, setFeaturedReviews] = (0, react_1.useState)([]);
    const [page, setPage] = (0, react_1.useState)({
        hasNextPage: false,
        endCursor: ''
    });
    (0, react_1.useEffect)(() => {
        async function fetchReviews() {
            try {
                const storyCommentsCountRequest = (0, utils_1.getStoryCommentsCount)(entityId, commentingUrl, console);
                const getCommentRequest = (0, utils_1.getCommentsExcludingFeatured)({
                    entityId,
                    commentingUrl,
                    commentsOrderBy,
                    repliesOrderBy,
                    reviewLimit,
                    replyLimit
                });
                const getFeaturedCommentsRequest = (0, utils_1.getFeaturedComments)({
                    entityId,
                    commentingUrl,
                    repliesOrderBy
                });
                const [storyCommentsCount, commentsResp, featuredCommentsResp] = await Promise.all([
                    storyCommentsCountRequest,
                    getCommentRequest,
                    getFeaturedCommentsRequest
                ]);
                if (commentsResp?.reviews && commentsResp.page) {
                    setReviews(commentsResp.reviews);
                    setPage(commentsResp.page);
                }
                storyCommentsCount && setCommentCount(storyCommentsCount);
                featuredCommentsResp?.reviews &&
                    setFeaturedReviews(featuredCommentsResp.reviews);
            }
            catch (error) {
                console.error('Failed to fetch reviews:', error);
            }
            setIsLoading(false);
            setIsCommentLoading(false);
        }
        commentingUrl && fetchReviews();
    }, [
        commentingUrl,
        commentsOrderBy,
        repliesOrderBy,
        entityId,
        replyLimit,
        reviewLimit,
        setCommentCount,
        setIsCommentLoading,
        setIsLoading,
        setPage,
        setReviews
    ]);
    return { isLoading, reviews, page, setPage, featuredReviews };
};
exports.useFetchComments = useFetchComments;
const useCommentBannerContent = ({ noCommentsMsgConf = {}, disableCommentStream, closeCommentStreamMessage, showCommentSavedMessage, communityUrl, isCommentLoading, commentCount, user, signUpMessageBannerHed, brandName, savedCommentConf = {}, noCommentsYetIcon, joinCommunityIcon, commentSubmittedIcon, commentsClosedIcon }) => {
    const { formatMessage } = (0, react_intl_1.useIntl)();
    const isUserLoggedIn = user.isAuthenticated && user.amguuid;
    const isUserLoggedOut = !isUserLoggedIn;
    // Handle the disabled comment stream case
    if (disableCommentStream) {
        return {
            header: closeCommentStreamMessage ||
                formatMessage(translations_1.default.closeCommentStreamMessage),
            description: '',
            showSignInButton: false,
            subContent: '',
            commentMessageBannerIcon: commentsClosedIcon
        };
    }
    // Handle comment saved message display
    if (showCommentSavedMessage) {
        const { title = formatMessage(translations_1.default.SavedCommentMsgTitle), dek = formatMessage(translations_1.default.SavedCommentDek), dekTrail = formatMessage(translations_1.default.SavedCommentDekTrail), subContent = formatMessage(translations_1.default.SavedCommentSubContent) } = savedCommentConf;
        const communityLink = `<a href="${communityUrl}" class="community-link">${formatMessage(translations_1.default.CommunityGuidelines)}</a>`;
        return {
            header: title,
            description: `${dek}<br />${communityLink} ${dekTrail}`,
            subContent,
            showSignInButton: false,
            commentMessageBannerIcon: commentSubmittedIcon
        };
    }
    // Handle empty comment case
    if (!isCommentLoading && !commentCount) {
        const { hed = formatMessage(translations_1.default.emptyCommentMsgHed), dek = formatMessage(translations_1.default.emptyCommentMsgDek), signOutDek = formatMessage(translations_1.default.signOutEmptyCommentMsgDek) } = noCommentsMsgConf;
        return {
            header: hed,
            description: isUserLoggedOut ? signOutDek : dek,
            showSignInButton: isUserLoggedOut,
            subContent: '',
            commentMessageBannerIcon: noCommentsYetIcon
        };
    }
    // Handle logged-out user scenario
    if (!isCommentLoading && isUserLoggedOut) {
        return {
            header: signUpMessageBannerHed ||
                formatMessage(translations_1.default.signUpMessageBannerHed, { brandName }),
            showSignInButton: true,
            description: '',
            subContent: '',
            commentMessageBannerIcon: joinCommunityIcon
        };
    }
    // Default return when no conditions match
    return {
        header: '',
        description: '',
        showSignInButton: false,
        subContent: ''
    };
};
exports.useCommentBannerContent = useCommentBannerContent;
const getSubscriptionsFromToken = (accessCookieValue) => {
    const payload = (0, jwt_decode_1.default)(accessCookieValue);
    const fct = payload?.fct || {};
    return Object.values(fct).flat();
};
const checkIsEntitled = (commentingRestrictedTo, accessCookieValue) => {
    if (!accessCookieValue)
        return false;
    const subscribedProducts = getSubscriptionsFromToken(accessCookieValue);
    if (!subscribedProducts?.length)
        return false;
    const isEntitled = subscribedProducts.some((subscribedUserProduct) => commentingRestrictedTo.includes(subscribedUserProduct));
    return isEntitled;
};
const hasAccessToCommenting = (commentingRestrictedTo) => {
    if (!commentingRestrictedTo?.length)
        return true;
    const accessCookieValue = (0, cookie_1.getCookie)(cookies_1.default.accessCookie);
    if (!accessCookieValue)
        return false;
    const isEntitled = checkIsEntitled(commentingRestrictedTo, accessCookieValue);
    return isEntitled;
};
exports.hasAccessToCommenting = hasAccessToCommenting;
exports.commentingAction = {
    LEAVE_RATING: 'leave-a-rating',
    LEAVE_REPLY: 'leave-a-reply',
    LIKE_COMMENT: 'like-a-comment',
    LIKE_REPLY: 'like-a-reply',
    REPLY_TO_REPLY: 'reply-to-reply'
};
const hasCommentingActionHash = ({ hash }) => {
    if (!hash)
        return false;
    return Object.values(exports.commentingAction).some((action) => hash.includes(action));
};
exports.INTERVAL_DELAY = 750;
const getRelativeUrl = ({ pathname, search, hash }) => `${pathname}${search}${hash}`;
const addHashToUrl = ({ href, hashValue }) => {
    const url = new URL(href);
    if (hashValue)
        url.hash = hashValue;
    return url;
};
const addSearchToUrl = ({ href, queryParams }) => {
    const url = new URL(href);
    const searchParams = new URLSearchParams(queryParams);
    for (const [key, value] of searchParams) {
        url.searchParams.set(key, value);
    }
    return url;
};
const getRelativeURLWithHash = ({ href, hashValue }) => getRelativeUrl(addHashToUrl({ href, hashValue }));
exports.getRelativeURLWithHash = getRelativeURLWithHash;
const getRelativeURLWithSearch = ({ href, queryParams }) => getRelativeUrl(addSearchToUrl({ href, queryParams }));
exports.getRelativeURLWithSearch = getRelativeURLWithSearch;
const getRelativeURLWithSearchAndHash = ({ href, hashValue, queryParams }) => {
    const urlWithHash = addHashToUrl({ href, hashValue });
    const urlWithSearchAndHash = addSearchToUrl({
        href: urlWithHash.href,
        queryParams
    });
    return getRelativeUrl(urlWithSearchAndHash);
};
exports.getRelativeURLWithSearchAndHash = getRelativeURLWithSearchAndHash;
const removeURLHash = ({ url }) => url.split('#')[0];
const useScrollToCommenting = (commentingClassName) => {
    const [pageHeight, setPageHeight] = (0, react_1.useState)({
        height: 0,
        isStable: false
    });
    const [intervalID, setIntervalID] = (0, react_1.useState)(null);
    const updatePageHeight = () => {
        const height = window.document.body.scrollHeight;
        setPageHeight((previousHeight) => ({
            height,
            isStable: previousHeight.height === height
        }));
    };
    (0, react_1.useEffect)(() => {
        if (!commentingClassName)
            return undefined;
        if (!hasCommentingActionHash(window.location))
            return undefined;
        !intervalID &&
            setIntervalID(window.setInterval(updatePageHeight, exports.INTERVAL_DELAY));
        // scroll once the page has stopped changing size so the comments position is set
        if (pageHeight.isStable) {
            (0, scroll_to_anchor_1.scrollToAnchor)(`.${commentingClassName}`);
            window.clearInterval(intervalID);
            // Remove the hash from the current history entry
            window.history.replaceState(null, '', removeURLHash({ url: (0, exports.getRelativeURLWithSearchAndHash)(window.location) }));
        }
        return () => {
            window.clearInterval(intervalID);
        };
    }, [commentingClassName, pageHeight.isStable, intervalID]);
};
exports.useScrollToCommenting = useScrollToCommenting;
// Be aware if there are duplicate keys only the second will be returned.
// All values are returned as strings - true as 'true' for example
const getParamsAsObjectFromURL = ({ searchParams }) => Object.fromEntries(new URLSearchParams(searchParams));
exports.getParamsAsObjectFromURL = getParamsAsObjectFromURL;
const getRelativeURLWithoutParams = ({ href, paramsToRemove }) => {
    const url = new URL(href);
    paramsToRemove.forEach((param) => url.searchParams.delete(param));
    return getRelativeUrl(url);
};
exports.getRelativeURLWithoutParams = getRelativeURLWithoutParams;
const updatedUserReactionsForID = ({ reactions, id }) => {
    const existingReaction = reactions[id] || {};
    const { viewerActionPresence = false, reactionCount = 0 } = existingReaction;
    return {
        ...reactions,
        [id]: {
            reactionCount: viewerActionPresence
                ? reactionCount - 1
                : reactionCount + 1,
            viewerActionPresence: !viewerActionPresence
        }
    };
};
exports.updatedUserReactionsForID = updatedUserReactionsForID;
const addItemToReactions = ({ reactions, id, reactionCount, viewerActionPresence }) => {
    if (reactions[id])
        return reactions;
    reactions[id] = {
        reactionCount,
        viewerActionPresence
    };
    return reactions;
};
const setUserReactionsReplyReducer = (reactions, { id, actionCounts, viewerActionPresence }) => {
    addItemToReactions({
        reactions,
        id,
        reactionCount: actionCounts?.reaction?.total || 0,
        viewerActionPresence: viewerActionPresence?.reaction
    });
    return reactions;
};
exports.setUserReactionsReplyReducer = setUserReactionsReplyReducer;
const setUserReactionsReducer = (reactions, { commentId, reactionCount, viewerActionPresence, replies }) => {
    addItemToReactions({
        reactions,
        id: commentId,
        reactionCount,
        viewerActionPresence
    });
    if (replies?.length > 0) {
        replies.forEach((reply) => {
            (0, exports.setUserReactionsReplyReducer)(reactions, reply);
        });
    }
    return reactions;
};
exports.setUserReactionsReducer = setUserReactionsReducer;
const useUpdateUserReactions = (items, setUserReactions) => {
    (0, react_1.useEffect)(() => {
        if (!items.length)
            return;
        setUserReactions((prevUserReaction) => items.reduce(exports.setUserReactionsReducer, {
            ...prevUserReaction
        }));
    }, [items, setUserReactions]);
};
exports.useUpdateUserReactions = useUpdateUserReactions;
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 22192:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { connect: connectToStore } = __webpack_require__(67851);
const InlineRecirc = __webpack_require__(27909);
/**
 * ConnectedInlineRecirc component
 *
 * @param {object} state - Required state via Redux Provider store
 *
 * @returns {ReactElement} <header>
 */
const ConnectedInlineRecirc = connectToStore((state) => {
    const { brandIdentityAssets: { favicon = '' }, inlineRecirc, renditions } = state;
    const inlineRecircProps = {
        favicon,
        addItemsAtFirst: inlineRecirc?.addItemsAtFirst,
        items: inlineRecirc?.items,
        renditions
    };
    return inlineRecircProps;
})(InlineRecirc);
ConnectedInlineRecirc.displayName = 'InlineRecirc';
module.exports = ConnectedInlineRecirc;
//# sourceMappingURL=ConnectedInlineRecirc.js.map

/***/ }),

/***/ 27909:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const shuffle = __webpack_require__(36049);
const uniqueId = __webpack_require__(97200);
const { useViewportObserver } = __webpack_require__(55030);
const SummaryItem = __webpack_require__(74992);
const InlineRecircItem = __webpack_require__(7738);
const { TrackComponentChannel } = __webpack_require__(78788);
const { googleAnalytics } = __webpack_require__(90090);
const ViewportMonitor = __webpack_require__(3990);
// Target for Sparrow tracking, don't change without notifying rec's data team
const { InlineRecircContainer, InlineRecircHeading, InlineRecircHeaderLogo, InlineRecircItems, InlineRecircWrapper } = __webpack_require__(2760);
/**
 * InlineRecirc component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.favicon] - path to brand logo file.
 * @param {string} [props.heading] - heading text
 * @param {Array<SummaryItem>} props.items - Array containing objects that each have data which is used to render a SummaryItem component
 * @param {Array<SummaryItem>} [props.addItemsAtFirst] - Optional. Array containing objects to append first
 * @param {number} [props.reelId] - Optional id for GA tracking
 * @param {object} [props.variations] - Variation properties used in rendering the component.
 * @param {boolean} [props.variations.hasBrandLogo] - Optional. Enable or disable brand logo in header.
 * @param {string} [props.variations.layout] - Optional. Specifies that component should use side-by-side or text-overlay treatment
 * @param {boolean} [props.variations.showInlineRubric] - Optional. Enable or disable inlineed rubric.
 * @param {string} [props.variations.trackingImpressionThreshold] - Specifies minimum item number to track scroll event
 * @param {string} [props.variations.trackingUnitName] - Specifies unit name for GA tracking
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 *
 * @returns {ReactElement} <div>
 */
const InlineRecirc = (props) => {
    const { applicationID, categories, className, contentTypes, excludeCategories, favicon, heading = 'More', items = [], numberOfDays, onIntersectionViewportCallback, pageSize, addItemsAtFirst = [], recommendedHeading, reelId, renditions, strategy, variations = {
        hasBrandLogo: false,
        hasBorder: false,
        layout: 'side-by-side',
        maxHedLines: 3,
        shouldHideHeaderText: false,
        showInlineRubric: false,
        trackingImpressionThreshold: 2,
        trackingUnitName: 'recirc-basic-interstitial',
        variationDisplayName: 'SideBySide'
    }, variationName } = props;
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ConnectedInlineRecirc',
            variation: variationName
        });
    }, [variationName]);
    const getSourcesForLogo = () => {
        const sources = {
            sm: {
                url: favicon
            }
        };
        return sources;
    };
    const trackingImpressionEvent = () => {
        googleAnalytics.emitUniqueGoogleTrackingEvent(`${variations.trackingUnitName}_reel-impression`, {
            interstitial_reel: {
                ...(reelId ? { reel: reelId } : {})
            }
        });
    };
    const sparrowPattern = 'mobile-recirc-interstitial';
    // Targets for GA tracking
    const targetObserverClass = reelId
        ? `inline-recirc-observer-target-${reelId}`
        : 'inline-recirc-observer-target';
    const trackingRecircClass = reelId
        ? `inline-recirc-tracking-${reelId}`
        : 'inline-recirc-tracking';
    useViewportObserver(`.${trackingRecircClass}`, undefined, (isInViewport) => {
        if (isInViewport) {
            trackingImpressionEvent();
        }
    });
    const onIntersectionViewport = (isInViewport, unsubscribeCallback) => {
        if (isInViewport && typeof onIntersectionViewportCallback === 'function') {
            onIntersectionViewportCallback({
                applicationID,
                categories,
                contentTypes,
                excludeCategories,
                numberOfDays,
                pageSize,
                renditions,
                strategy,
                variationName: variations.variationDisplayName
            });
            unsubscribeCallback();
        }
    };
    const getRecircItems = (data) => {
        if (addItemsAtFirst.length) {
            data.unshift(...addItemsAtFirst);
        }
        const recommendateItems = data.map((item, index) => (React.createElement(InlineRecircItem, { hasBorder: variations.hasBorder, item: item, key: uniqueId('inline-recirc-'), layout: variations.layout, maxHedLines: variations.maxHedLines, recircId: index + 1, reelId: reelId, showInlineRubric: variations.showInlineRubric, sparrowPattern: sparrowPattern, trackingImpressionThreshold: variations.trackingImpressionThreshold, trackingUnitName: variations.trackingUnitName, totalItems: items.length })));
        return recommendateItems.slice(0, pageSize);
    };
    if (items?.length === 0) {
        return null;
    }
    return (React.createElement(ViewportMonitor, { dataAttrKey: "inline-recirc", "data-testid": "InlineRecircViewportMonitor", className: classnames('inline-recirc-wrapper', targetObserverClass), observerOptions: { rootMargin: '500px' }, onIntersectionViewport: onIntersectionViewport }, items[0] && (React.createElement(InlineRecircWrapper, { "data-testid": "InlineRecircWrapper", className: classnames(`inline-recirc--${variations.layout}`, 'inline-recirc-sparrow-tracking', trackingRecircClass, className), recircLayout: variations.layout, "data-recirc-id": `mobile-recirc-unit-${reelId}`, "data-recirc-header": heading },
        (heading || recommendedHeading) && (React.createElement(InlineRecircHeading, null,
            !variations.shouldHideHeaderText && (React.createElement("div", null, addItemsAtFirst.length && recommendedHeading
                ? recommendedHeading
                : heading)),
            variations.hasBrandLogo && favicon && (React.createElement(InlineRecircHeaderLogo, { altText: "logo", contentTypes: "photo", sources: getSourcesForLogo() })))),
        React.createElement(InlineRecircContainer, null,
            React.createElement(InlineRecircItems, null, getRecircItems(shuffle(items))))))));
};
InlineRecirc.propTypes = {
    addItemsAtFirst: PropTypes.arrayOf(PropTypes.shape(SummaryItem.propTypes)),
    applicationID: PropTypes.string,
    categories: PropTypes.array,
    className: PropTypes.string,
    contentTypes: PropTypes.string,
    excludeCategories: PropTypes.array,
    favicon: PropTypes.string,
    heading: PropTypes.string,
    items: PropTypes.arrayOf(PropTypes.shape(SummaryItem.propTypes)),
    numberOfDays: PropTypes.number,
    onIntersectionViewportCallback: PropTypes.func,
    pageSize: PropTypes.number,
    recommendedHeading: PropTypes.string,
    reelId: PropTypes.number,
    renditions: PropTypes.object,
    strategy: PropTypes.string,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        hasBrandLogo: PropTypes.bool,
        hasBorder: PropTypes.bool,
        layout: PropTypes.oneOf([
            'side-by-side',
            'text-only-brand-logo',
            'text-only-brand-logo-personalized',
            'text-overlay'
        ]),
        maxHedLines: PropTypes.number,
        shouldHideHeaderText: PropTypes.bool,
        showInlineRubric: PropTypes.bool,
        trackingImpressionThreshold: PropTypes.number,
        trackingUnitName: PropTypes.string,
        variationDisplayName: PropTypes.oneOf([
            'SideBySide',
            'TextOnlyBrandLogo',
            'TextOnlyBrandLogoPersonalized',
            'TextOverlay'
        ])
    })
};
module.exports = InlineRecirc;
//# sourceMappingURL=InlineRecirc.js.map

/***/ }),

/***/ 7738:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useViewportObserver } = __webpack_require__(55030);
const SummaryItem = __webpack_require__(74992);
const { googleAnalytics } = __webpack_require__(90090);
const { trackNavigationEvent, extractStrategyFromURL } = __webpack_require__(14307);
const { InlineRecircRubricLineParagraph, InlineRecircItemWrapper } = __webpack_require__(2760);
/**
 * InlineRecirc components
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {object} props.item - Array containing objects that each have data which is used to render a SummaryItem component
 * @param {string} [props.layout] - Optional. Specifies that component should use side-by-side or text-overlay treatment
 * @param {string} [props.maxHedLines] - Optional maximum number of visual lines for the hed to occupy
 * @param {number} props.reelId - Optional id for GA tracking
 * @param {number} [props.totalItems] - Optional props that contains total count of items in a inline recirc
 * @param {object} [props.showInlineRubric] - Optional. Enable or disable rubric.
 * @param {string} [props.trackingImpressionThreshold] - Specifies minimum item number to track scroll event
 * @param {string} [props.trackingUnitName] - Specifies unit name for GA tracking
 *
 * @returns {ReactElement} <div>
 */
const InlineRecircItem = (props) => {
    const { className, hasBorder, item, recircId, totalItems, reelId, sparrowPattern, layout = 'side-by-side', maxHedLines = 3, showInlineRubric = false, trackingImpressionThreshold = 2, trackingUnitName = 'recirc-basic-interstitial' } = props;
    const trackSnowplowNavigationEvent = (eventType) => {
        const { dangerousHed, copilotID, contentType, url } = item;
        const eventData = {
            type: eventType,
            label: dangerousHed,
            subject: 'recirc_unit',
            items: [
                {
                    content_id: copilotID,
                    content_title: dangerousHed,
                    content_type: contentType,
                    content_url: url
                }
            ],
            strategy: extractStrategyFromURL(url),
            placement: 'inline_recirc_mid_content',
            index: recircId - 1,
            total_index: totalItems
        };
        trackNavigationEvent(eventData);
    };
    const getDangerousHed = (dangerousHed, rubric) => {
        if (!rubric || !showInlineRubric) {
            return dangerousHed;
        }
        const dangerousHedWithRubric = `<span class="summary-item__hed-wrapper">${dangerousHed}</span><${InlineRecircRubricLineParagraph} class="rubric">${rubric.name}</${InlineRecircRubricLineParagraph}>`;
        return dangerousHedWithRubric;
    };
    const targetObserverClass = reelId
        ? `inline-recirc__item-${reelId}-${recircId}`
        : `inline-recirc__item-${recircId}`;
    const targetObserverSelector = `.${targetObserverClass}`;
    const targetObserverRootSelector = reelId
        ? `.inline-recirc-${reelId} .inline-recirc__container`
        : `.inline-recirc .inline-recirc__container`;
    const storyClickHandlerByUrl = (url, slideIndex) => () => {
        trackSnowplowNavigationEvent('click');
        return googleAnalytics.emitUniqueGoogleTrackingEvent(`${trackingUnitName}_reel-click`, {
            'gtm.elementUrl': url,
            interstitial_reel: {
                image: slideIndex,
                ...(reelId ? { reel: reelId } : {})
            }
        });
    };
    const trackingImpressionEvent = () => {
        googleAnalytics.emitUniqueGoogleTrackingEvent(`${trackingUnitName}_reel-scroll`, {
            interstitial_reel: {
                image: recircId,
                ...(reelId ? { reel: reelId } : {})
            }
        });
    };
    useViewportObserver(targetObserverSelector, {
        rootSelector: targetObserverRootSelector,
        threshold: 0.5
    }, (isInViewport) => {
        if (recircId >= trackingImpressionThreshold && isInViewport) {
            trackingImpressionEvent();
        }
    });
    let SummaryItemVariation;
    switch (layout) {
        case 'text-only-brand-logo':
        case 'text-only-brand-logo-personalized':
            SummaryItemVariation = SummaryItem.TextOnlyBrandLogoPersonalized;
            break;
        case 'text-overlay':
            SummaryItemVariation = SummaryItem.OverlayCenter;
            break;
        default:
            SummaryItemVariation = SummaryItem.SideBySideThirds;
    }
    return (React.createElement(InlineRecircItemWrapper, { "data-testid": "InlineRecircItemWrapper", className: classnames([className, targetObserverClass]) },
        React.createElement(SummaryItemVariation, { clickHandler: storyClickHandlerByUrl(item.url, recircId), dangerousHed: getDangerousHed(item.dangerousHed, item.rubric), hasBorder: hasBorder, hedTag: "div", image: item.image, isLazy: false, layout: layout, maxHedLines: maxHedLines, recircId: recircId, shouldHideDangerousDek: true, sparrowPattern: sparrowPattern, url: item.url, isRecircListItem: true, recircPlacement: "inline_recirc_mid_content", totalItems: totalItems, contentType: item.contentType, copilotID: item.copilotID })));
};
InlineRecircItem.propTypes = {
    className: PropTypes.string,
    hasBorder: PropTypes.bool,
    item: PropTypes.shape(SummaryItem.propTypes),
    layout: PropTypes.oneOf([
        'text-only-brand-logo',
        'text-only-brand-logo-personalized',
        'side-by-side',
        'text-overlay'
    ]),
    maxHedLines: PropTypes.number,
    recircId: PropTypes.number,
    reelId: PropTypes.number,
    showInlineRubric: PropTypes.bool,
    sparrowPattern: PropTypes.string,
    totalItems: PropTypes.number,
    trackingImpressionThreshold: PropTypes.number,
    trackingUnitName: PropTypes.string
};
module.exports = InlineRecircItem;
//# sourceMappingURL=InlineRecircItem.js.map

/***/ }),

/***/ 71436:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const ConnectedInlineRecircVariations = __webpack_require__(48608);
module.exports = ConnectedInlineRecircVariations;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 2760:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { BaseText } = __webpack_require__(76955);
const { BREAKPOINTS } = __webpack_require__(96472);
const { calculateSpacing, getColorToken, getTypographyStyles, minScreen } = __webpack_require__(26865);
const ResponsiveImage = __webpack_require__(43608);
const { OverlaySummaryItemContent, OverlaySummaryItemHed, OverlaySummaryItemResponsiveAsset } = __webpack_require__(3265);
// 1. Zero gutter to prevent from summing with gutter on the edges
// 2. The gutter on the edges
const InlineRecircItems = styled.ul.withConfig({
    displayName: 'InlineRecircItems'
}) `
  display: grid;
  grid-gap: 0; /* 1 */
  grid-auto-flow: column;
  grid-template-columns: ${calculateSpacing(1)};
  margin: 0 0 -${calculateSpacing(4)};
  padding: 0 0 ${calculateSpacing(4)};
  overflow-y: hidden;
  list-style: none;
  -webkit-overflow-scrolling: auto;
  backface-visibility: hidden;
  scroll-behavior: smooth;

  &::before,
  &::after {
    width: ${calculateSpacing(1)};
    content: '';
  }
`;
const InlineRecircSummaryItemhedCss = css `
  ${getTypographyStyles('typography.definitions.discovery.hed-bulletin-primary')}

  margin: 0;
`;
const InlineRecircItemWrapper = styled.li.withConfig({
    displayName: 'InlineRecircItemWrapper'
}) `
  display: grid;
  padding: 0;

  a:link {
    text-decoration: none;
  }

  .summary-item__hed,
  ${OverlaySummaryItemHed} {
    ${InlineRecircSummaryItemhedCss}
  }

  .summary-item--layout-placement-side-by-side {
    align-items: flex-start;

    .summary-item__hed {
      ${InlineRecircSummaryItemhedCss}
    }
  }

  .summary-item__hed-link {
    &::after {
      border-bottom: none;
    }
  }

  ${OverlaySummaryItemResponsiveAsset}::after {
    transition: none;
  }
`;
const InlineRecircHeading = styled(BaseText).withConfig({
    displayName: 'InlineRecircHeading'
}) `
  padding: 0 0 ${calculateSpacing(2)};
  text-align: center;
`;
InlineRecircHeading.defaultProps = {
    as: 'div',
    colorToken: 'colors.discovery.lead.secondary.accent',
    typeIdentity: 'typography.definitions.discovery.subhed-section-collection'
};
const InlineRecircContainer = styled.div.withConfig({
    displayName: 'InlineRecircContainer'
}) `
  overflow: hidden;
`;
const InlineRecircHeaderLogo = styled(ResponsiveImage).withConfig({
    displayName: 'InlineRecircHeaderLogo'
}) ``;
const InlineRecircTextOnlyBrandLogo = css `
  ${getTypographyStyles('typography.definitions.globalEditorial.context-primary')};
  margin: ${calculateSpacing(2)} 0;
  background: ${getColorToken('colors.discovery.body.white.background')};
  padding: 0 ${calculateSpacing(2)} ${calculateSpacing(2)}
    ${calculateSpacing(2)};

  ol,
  ul {
    li {
      margin-left: ${calculateSpacing(1)};
    }
  }

  ${InlineRecircItems} {
    display: flex;
    flex-direction: column;
  }

  ${InlineRecircHeading} {
    display: flex;
    align-items: center;
    margin: ${calculateSpacing(-2)} ${calculateSpacing(1)} 0
      ${calculateSpacing(1)};
    border-bottom: 1px solid
      ${getColorToken('colors.discovery.body.white.divider')};
    padding: ${calculateSpacing(2)} 0;
    text-align: left;

    ${InlineRecircHeaderLogo} {
      margin-left: ${calculateSpacing(1)};
      width: 15px;

      img {
        vertical-align: text-top;
      }
    }
  }

  ${InlineRecircContainer} {
    margin-right: ${calculateSpacing(1)};
  }

  .summary-item {
    padding: ${calculateSpacing(1)} 0;

    .summary-item__hed-link::after {
      margin: 0;
    }

    .summary-item__content {
      padding: 0;
    }
  }
`;
const InlineRecircTextOnlyBrandLogoPersonalized = css `
  ${getTypographyStyles('typography.definitions.globalEditorial.context-primary')};
  margin: ${calculateSpacing(2)} 0;
  background: ${getColorToken('colors.discovery.body.white.background')};
  padding: 0 ${calculateSpacing(2)} ${calculateSpacing(2)}
    ${calculateSpacing(2)};

  ol,
  ul {
    li {
      margin-left: ${calculateSpacing(1)};
    }
  }

  ${InlineRecircItems} {
    display: flex;
    flex-direction: column;
  }

  ${InlineRecircHeading} {
    display: flex;
    align-items: center;
    margin: ${calculateSpacing(-2)} ${calculateSpacing(1)} 0
      ${calculateSpacing(1)};
    border-bottom: 1px solid
      ${getColorToken('colors.discovery.body.white.divider')};
    padding: ${calculateSpacing(2)} 0;
    text-align: left;

    ${InlineRecircHeaderLogo} {
      margin-left: ${calculateSpacing(1)};
      width: 15px;

      img {
        vertical-align: bottom;
      }
    }
  }

  ${InlineRecircContainer} {
    margin-right: ${calculateSpacing(1)};
  }

  .summary-item {
    padding: ${calculateSpacing(1)} 0;

    .summary-item__hed-link::after {
      margin: 0;
    }

    .summary-item__content {
      padding: 0;
    }
  }

  .summary-item__hed-link {
    &:hover {
      text-decoration: none;
    }

    .summary-item__hed {
      .summary-item__hed-wrapper {
        margin-right: ${calculateSpacing(1)};

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
`;
const InlineRecircTextOverlay = css `
  && {
    padding: ${calculateSpacing(4)} 0 ${calculateSpacing(5)};

    ${InlineRecircItems} {
      grid-auto-columns: calc(210px + ${calculateSpacing(2)});
      margin-left: -${calculateSpacing(2)};
    }

    ${OverlaySummaryItemContent} {
      align-self: start;
      padding: ${calculateSpacing(25)} ${calculateSpacing(1)}
        ${calculateSpacing(2)};
    }

    ol,
    ul {
      li {
        margin: 0 0 0 ${calculateSpacing(2)};

        &:first-child {
          margin-left: ${calculateSpacing(3)};
        }
      }
    }
  }
`;
/* 1. The gutter on the edges
   2. The gutter on the left edge  */
const InlineRecircSideBySideThirds = css `
  padding: ${calculateSpacing(3)} 0;

  ${InlineRecircHeading} {
    padding-bottom: ${calculateSpacing(2)};
  }

  ${InlineRecircItems} {
    grid-auto-columns: calc(260px + ${calculateSpacing(1)}*2);
    grid-template-columns: ${calculateSpacing(2)};
    margin-left: -${calculateSpacing(3)};

    &::before,
    &::after {
      width: ${calculateSpacing(2)};
    }
  }

  .summary-item--layout-proportions-33-66 .summary-item__content {
    margin: 0;
  }

  ol,
  ul {
    li {
      margin: 0 0 0 ${calculateSpacing(2)};

      &:first-child {
        margin-left: ${calculateSpacing(3)};
      }
    }
  }
`;
const InlineRecircRubricLineParagraph = styled(BaseText).withConfig({
    displayName: 'InlineRecircRubricLineParagraph'
}) ``;
InlineRecircRubricLineParagraph.defaultProps = {
    topSpacing: 1
};
const InlineRecircWrapper = styled.div.withConfig({
    displayName: 'InlineRecircWrapper'
}) `
  margin-bottom: ${calculateSpacing(5)};

  .article-inline-recirc-wrapper {
    margin: 0 ${calculateSpacing(-3)} ${calculateSpacing(5)}
      ${calculateSpacing(-3)};

    ${InlineRecircHeading} {
      ${InlineRecircHeaderLogo} {
        img {
          vertical-align: baseline;
        }
      }
    }
  }

  background: ${getColorToken('colors.discovery.body.light.background')};

  ${minScreen(BREAKPOINTS.md)} {
    display: none;
  }

  ${({ recircLayout }) => {
    if (recircLayout === 'text-only-brand-logo')
        return InlineRecircTextOnlyBrandLogo;
    if (recircLayout === 'text-only-brand-logo-personalized')
        return InlineRecircTextOnlyBrandLogoPersonalized;
    if (recircLayout === 'text-overlay')
        return InlineRecircTextOverlay;
    return InlineRecircSideBySideThirds;
}}
`;
module.exports = {
    InlineRecircContainer,
    InlineRecircHeading,
    InlineRecircHeaderLogo,
    InlineRecircItems,
    InlineRecircRubricLineParagraph,
    InlineRecircWrapper,
    InlineRecircItemWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 48608:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const { asConfiguredComponent } = __webpack_require__(12892);
const ConnectedInlineRecirc = __webpack_require__(22192);
ConnectedInlineRecirc.TextOnlyBrandLogo = asVariation(ConnectedInlineRecirc, 'TextOnlyBrandLogo', {
    hasBrandLogo: true,
    hasBorder: true,
    layout: 'text-only-brand-logo',
    maxHedLines: 4,
    shouldHideHeaderText: true,
    trackingImpressionThreshold: 2,
    trackingUnitName: 'recirc-text-only-brand-logo-interstitial',
    variationDisplayName: 'TextOnlyBrandLogo'
});
ConnectedInlineRecirc.TextOnlyBrandLogoPersonalized = asVariation(ConnectedInlineRecirc, 'TextOnlyBrandLogoPersonalized', {
    hasBrandLogo: true,
    hasBorder: true,
    layout: 'text-only-brand-logo-personalized',
    maxHedLines: 4,
    trackingImpressionThreshold: 2,
    trackingUnitName: 'recirc-text-only-brand-logo-personalized-interstitial',
    variationDisplayName: 'TextOnlyBrandLogoPersonalized'
});
ConnectedInlineRecirc.SideBySide = asVariation(ConnectedInlineRecirc, 'SideBySide', {
    layout: 'side-by-side',
    maxHedLines: 4,
    trackingImpressionThreshold: 2,
    trackingUnitName: 'recirc-basic-interstitial',
    variationDisplayName: 'SideBySide'
});
ConnectedInlineRecirc.TextOverlay = asVariation(ConnectedInlineRecirc, 'TextOverlay', {
    layout: 'text-overlay',
    maxHedLines: 4,
    trackingImpressionThreshold: 3,
    trackingUnitName: 'recirc-interstitial',
    variationDisplayName: 'TextOverlay'
});
module.exports = asConfiguredComponent(ConnectedInlineRecirc, 'InlineRecirc');
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 54281:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { connector } = __webpack_require__(57744);
const Navigation = __webpack_require__(54790);
const PersistentTop = __webpack_require__(26392);
const ResponsiveAsset = __webpack_require__(73275);
const SimpleNavigation = __webpack_require__(94919);
const SiteHeader = __webpack_require__(12911);
const StandardNavigation = __webpack_require__(80742);
const StackedNavigation = __webpack_require__(55266);
const { default: OneNav } = __webpack_require__(96396);
const { TrackComponentChannel } = __webpack_require__(78788);
const { LinkBanner } = __webpack_require__(82873);
const NAVIGATION_COMPONENTS = {
    SimpleNavigation,
    SiteHeader,
    StackedNavigation,
    StandardNavigation,
    OneNav
};
const PersistentComponent = ({ isPersistent, children }) => isPersistent ? React.createElement(PersistentTop, null, children) : children;
PersistentComponent.propTypes = {
    children: PropTypes.node,
    isPersistent: PropTypes.bool
};
/**
 * ConnectedNavigation component. This pulls necessary values out of the store
 * and additionally allows you to select the navigation pattern used.
 *
 * To select a variation of that pattern, add configuration for the navigation
 * component selected here. See the README of this component for details.
 *
 * @param {object} props - React props
 * @param {string} props.brandName - The brand name of the site
 * @param {string} props.rootBrandName - The root brand name of the site which is common across markets
 * @param {object} props.featureFlags - Feature flags required by this component
 * @param {boolean} props.featureFlags.enableGqlForLinkBanner - Should show Navigation with LinkBanner If the LinkBanner data exist
 * @param {object} props.featureFlags.isLogoWide - Should this provide space for wider logos?
 * @param {object} props.featureFlags.shouldKeepSubscribeLinkActive - Should show subscribe link in mobile view
 * @param {boolean} props.featureFlags.showNavigationWithlinkBanner - Should show Navigation with LinkBanner
 * @param {object} props.featureValue - Value from experiment
 * @param {boolean} props.hasContentHeaderLogo - Determines if the content header has logo
 * @param {boolean} props.hasSearch - Determines if search should be hidden
 * @param {object} props.headerInvertedLogo - Inverted header logo image data including sources and alt text
 * @param {object} props.headerLogo - Header logo image data including sources and alt text
 * @param {object} [props.headerLogoDim] - Optional Header logo image data with sources for different viewports
 * @param {string} [props.headerTheme] - Optional Navigation header theme: standard, inverted, transparent
 * @param {object} props.invertedLogo - Inverted logo image data including sources and alt text
 * @param {boolean} [props.isAccountsEnabled] - Are accounts enabled for this tenant?
 * @param {boolean} [props.journeyRibbonHeight] - Height of journey ribbon component if rendered
 * @param {object} props.logo - Logo image data including sources and alt text
 * @param {string} props.logoBaseUrl - The URL the logo links to
 * @param {object} props.navigation - Navigation props
 * @param {object} [props.navigation.account] - Navigation account props
 * @param {Array} [props.navigation.appDownloadUrls] - Array of the Mobile Apps Links
 * @param {object} [props.navigation.hasSEOSupport] - Optional enable the SEO Suport for mega menu default value false
 * @param {object} [props.navigation.internationalInfo] - Navigation international info props
 * @param {boolean} props.navigation.isEditorPicksAvailable - Determine whether EditorPicks is configured in the tenant
 * @param {string} [props.navigation.pageHeadline] - Headline string to display in navbar
 * @param {Array} [props.navigation.primaryLinks] - Optional Primary list of `{ isExternal, text, url, isPersistent }` object links
 * @param {Array} [props.navigation.searchLink] - The link for the search action
 * @param {Array} [props.navigation.secondaryLinks] - Array of secondary links
 * @param {Array} [props.navigation.socialLinks] - Array of social links
 * @param {string} [props.navigation.socialLinksHeading] - Title for the social links
 * @param {Array} [props.navigation.utilityLinks] - Optional Secondary list of `{ isExternal, text, url, isPersistent }` object links
 * @param {string} [props.navPattern] - Name of the navigation pattern to render
 * @param {object} [props.seriesData] - Optional series data if article is part of a series
 * @param {object} [props.linkBannerData] - Optional link banner data
 * @param {boolean} [props.shouldEnableFullArticleInverted] - should enable full article inverted
 * @param {boolean} [props.shouldPrioritizeSeriesPagination] - shouldPrioritize SeriesPagination when article contains both linkbanner and seriesData
 * @param {object} props.user - required user object
 * @param {boolean} props.user.isAuthenticated - represents if the user is currently authenticated
 * @param {boolean} [props.hasLinkbannerCrossSlideAnimation] - Enable/Disable Header cross slide animation
 * @param {Function} [props.onDrawerStateChange] - Callback function when the Drawer is open/close
 * @param {object} props.oneNav - Configuration for the `OneNav` component
 * @param {Array} props.oneNavTriggerableContainers - Array of configurations for the `OneNav` component wrapped in the `TriggerableContainer` component
 *
 * @returns {ReactElement} <header>
 */
const ConnectedNavigation = ({ brandName, featureFlags: { enableGqlForLinkBanner = false, isLogoWide, shouldKeepSubscribeLinkActive, showNavigationWithlinkBanner = false }, featureValue, hasContentHeaderLogo, hasSearch = true, headerInvertedLogo, headerLogo, headerLogoDim, headerTheme, invertedLogo, isAccountsEnabled, journeyRibbonHeight, linkBannerData, logo, logoBaseUrl, navigation: { account, appDownloadUrls, internationalInfo, pageHeadline, primaryLinks, searchLink, secondaryLinks, socialLinksHeading, socialLinks, utilityLinks, hasSEOSupport, isEditorPicksAvailable }, rootBrandName, hasLinkbannerCrossSlideAnimation, seriesData, shouldPrioritizeSeriesPagination, shouldEnableFullArticleInverted, user, onDrawerStateChange, navPattern = 'StandardNavigation', oneNav, oneNavTriggerableContainers }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ConnectedNavigation'
        });
    }, []);
    const isVisualLinkBanner = linkBannerData.bannerType === 'visual-link-banner';
    const showLinkBanner = enableGqlForLinkBanner &&
        !isVisualLinkBanner &&
        linkBannerData?.links?.length > 0;
    const navigationProps = {
        accountProps: account,
        appDownloadUrls,
        className: 'site-navigation',
        showLinkBanner,
        showNavigationWithlinkBanner: showLinkBanner || showNavigationWithlinkBanner,
        drawerProps: {
            appElement: '#app-root',
            internationalInfo,
            rootBrandName,
            primaryLinks,
            secondaryLinks,
            searchAction: searchLink,
            socialIconsProps: {
                links: socialLinks
            }
        },
        hasContentHeaderLogo,
        hasSearch,
        hasSearchBar: false,
        headerLogo,
        headerLogoDim,
        headerInvertedLogo,
        headerTheme,
        pageHeadline,
        isLogoWide,
        isAccountsEnabled,
        isEditorPicksAvailable,
        isPersistent: true,
        isVisualLinkBanner,
        logo: headerLogo,
        invertedLogo,
        logoBaseUrl,
        primaryLinks,
        secondaryLinks,
        seriesData,
        shouldEnableFullArticleInverted,
        shouldKeepSubscribeLinkActive,
        shouldConsiderSeriesPagination: linkBannerData && seriesData && shouldPrioritizeSeriesPagination,
        user,
        utilityLinks,
        hasSEOSupport
    };
    const patternProps = {
        SimpleNavigation: {
            hasSearch: false
        },
        SiteHeader: {
            brandName,
            hasSearch,
            internationalInfo,
            invertedLogo,
            isPersistent: false,
            logo,
            searchLink,
            socialLinks,
            socialLinksHeading
        },
        StackedNavigation: {
            logo,
            invertedLogo,
            socialLinksHeading,
            hasLinkbannerCrossSlideAnimation,
            onDrawerStateChange,
            journeyRibbonHeight
        },
        OneNav: {
            oneNav,
            oneNavTriggerableContainers,
            isPersistent: false,
            featureValue,
            brandName
        }
    };
    Object.assign(navigationProps, patternProps[navPattern]);
    const NavigationComponent = NAVIGATION_COMPONENTS[navPattern];
    return (React.createElement(PersistentComponent, { isPersistent: navigationProps.isPersistent },
        React.createElement(NavigationComponent, { ...navigationProps })));
};
ConnectedNavigation.propTypes = {
    brandName: PropTypes.string,
    featureFlags: PropTypes.shape({
        enableGqlForLinkBanner: PropTypes.bool,
        isLogoWide: PropTypes.bool,
        shouldKeepSubscribeLinkActive: PropTypes.bool,
        showNavigationWithlinkBanner: PropTypes.bool
    }),
    featureValue: PropTypes.object,
    hasContentHeaderLogo: PropTypes.bool,
    hasLinkbannerCrossSlideAnimation: PropTypes.bool,
    hasSearch: PropTypes.bool,
    headerInvertedLogo: PropTypes.shape(ResponsiveAsset.propTypes).isRequired,
    headerLogo: PropTypes.shape(ResponsiveAsset.propTypes).isRequired,
    headerLogoDim: PropTypes.shape(ResponsiveAsset.propTypes),
    headerTheme: PropTypes.oneOf(['standard', 'inverted', 'transparent']),
    invertedLogo: PropTypes.shape(ResponsiveAsset.propTypes).isRequired,
    isAccountsEnabled: PropTypes.bool,
    isEditorPicksAvailable: PropTypes.bool,
    journeyRibbonHeight: PropTypes.number,
    linkBannerData: PropTypes.shape({
        hed: PropTypes.hed,
        dek: PropTypes.dek,
        image: PropTypes.shape(ResponsiveAsset.propTypes),
        links: PropTypes.arrayOf(PropTypes.shape({
            url: PropTypes.string,
            text: PropTypes.string,
            isExternal: PropTypes.bool
        })),
        bannerType: PropTypes.string,
        tracking: PropTypes.shape(LinkBanner.propTypes.tracking)
    }),
    logo: PropTypes.shape(ResponsiveAsset.propTypes).isRequired,
    logoBaseUrl: PropTypes.string,
    navigation: PropTypes.shape({
        account: PropTypes.object,
        appDownloadUrls: PropTypes.array,
        hasSEOSupport: PropTypes.bool,
        internationalInfo: Navigation.object,
        isEditorPicksAvailable: PropTypes.bool,
        pageHeadline: PropTypes.string,
        primaryLinks: Navigation.propTypes.links,
        searchLink: PropTypes.string,
        secondaryLinks: PropTypes.array,
        socialLinksHeading: PropTypes.string,
        socialLinks: PropTypes.array,
        utilityLinks: Navigation.propTypes.links
    }),
    navPattern: PropTypes.oneOf(Object.keys(NAVIGATION_COMPONENTS)),
    onDrawerStateChange: PropTypes.func,
    oneNav: PropTypes.any,
    oneNavTriggerableContainers: PropTypes.any,
    rootBrandName: PropTypes.string,
    seriesData: PropTypes.shape({
        hed: PropTypes.string,
        dek: PropTypes.string,
        image: PropTypes.object,
        links: PropTypes.arrayOf(PropTypes.shape({
            hed: PropTypes.string,
            dek: PropTypes.string,
            image: PropTypes.object,
            isPublished: PropTypes.bool,
            promoHed: PropTypes.string,
            url: PropTypes.string
        }))
    }),
    shouldEnableFullArticleInverted: PropTypes.bool,
    shouldPrioritizeSeriesPagination: PropTypes.bool,
    shouldUseGQLForLinkBanner: PropTypes.bool,
    user: PropTypes.shape({
        isAuthenticated: PropTypes.bool.isRequired
    })
};
ConnectedNavigation.displayName = 'ConnectedNavigation';
module.exports = connector(ConnectedNavigation, {
    keysToPluck: [
        'brandName',
        'rootBrandName',
        'config',
        'featureFlags',
        'hasSearch',
        'headerLogo',
        'headerInvertedLogo',
        'invertedLogo',
        'isAccountsEnabled',
        'linkBannerData',
        'logo',
        'logoBaseUrl',
        'navigation',
        'seriesData',
        'user',
        'oneNav',
        'oneNavTriggerableContainers'
    ]
});
//# sourceMappingURL=ConnectedNavigation.js.map

/***/ }),

/***/ 10980:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
module.exports = asConfiguredComponent(__webpack_require__(54281), 'ConnectedNavigation');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 75874:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { googleAnalytics } = __webpack_require__(90090);
const { connector } = __webpack_require__(57744);
const ConnectedNewsletterSubscribeForm = __webpack_require__(577);
const { getNewsletterSubscriptions } = __webpack_require__(29727);
const ViewportMonitor = __webpack_require__(3990);
const { trackNewsletterEvent } = __webpack_require__(14307);
/**
 * SlimNewsletterWrapper component
 *
 * Wraps the ConnectedNewsletterSubscribeForm within the ArticlePage component, and supresses
 * the newsletter if utm_source is nl. Only meant for use with the slim newsletter module
 * inside the article page.
 *
 * @param {object} props - Props to be passed to newsletter component

 * @returns {ReactElement} <div>
 */
class SlimNewsletterWrapper extends React.Component {
    constructor(props) {
        super(props);
        this.fetchNewsletterSubscriptions = async (options) => {
            try {
                const result = await getNewsletterSubscriptions(options);
                if (result.status === 200) {
                    return (result.newsletterSubscriptions && result.newsletterSubscriptions.data);
                }
            }
            catch (error) {
                console.log(error);
            }
            return {};
        };
        this.state = {};
    }
    async componentDidMount() {
        let isSourceNewsletter;
        let newsletterToShow;
        // the ids of all the newsletters that could potentially appear on the article
        const newsletterIds = (this.props.newsletters &&
            this.props.newsletters.map((newsletter) => newsletter.newsletterId)) ||
            [];
        if (document) {
            const params = new URLSearchParams(document.location.search);
            const utmSource = params.get('utm_source');
            isSourceNewsletter = utmSource === 'nl';
        }
        const { user, userPlatform } = this.props;
        const { userPlatformProxy, xClientID } = userPlatform || {};
        if (user.isAuthenticated) {
            const options = {
                amgUUID: user.amguuid,
                newsletterIds,
                userPlatformProxy,
                xClientID,
                provider: 'sailthru'
            };
            const newsletterSubscriptions = await this.fetchNewsletterSubscriptions(options);
            const subscribedNewsletterIds = newsletterSubscriptions
                .filter((subscription) => subscription.attributes.status === 'SUBSCRIBED')
                .map((subscription) => subscription.attributes.newsletterId);
            // now find the first id from the potential newsletters that isn't in the subscribed newsletters
            newsletterToShow = newsletterIds.find((newsletterId) => !subscribedNewsletterIds.includes(newsletterId));
        }
        else {
            // if user is not logged in show them the first newsletter in the list
            newsletterToShow = newsletterIds[0];
        }
        if (this.props.isNewsletterSlim &&
            !isSourceNewsletter &&
            newsletterToShow) {
            googleAnalytics.emitGoogleTrackingEvent('newsletter-loaded-inlineslim', {
                newslettterId: newsletterToShow
            });
        }
        this.setState({
            ...this.state,
            isSourceNewsletter,
            newsletterToShow
        });
    }
    render() {
        let shouldDisplayNewsletter;
        const { isNewsletterSlim, isNewsletterAggressive, hasSlimAlternateStyle, newsletterType, patternType, showToggleForLoggedInUser, user, isArticlePage } = this.props;
        if ((newsletterType === 'aggressive-newsletter' && isNewsletterAggressive) ||
            (newsletterType === 'slim-newsletter' && isNewsletterSlim))
            shouldDisplayNewsletter = true;
        const { isSourceNewsletter, newsletterToShow } = this.state;
        const newsletter = this.props.newsletters &&
            this.props.newsletters.find((newsletterInfo) => newsletterInfo.newsletterId === newsletterToShow);
        if (isSourceNewsletter || !shouldDisplayNewsletter || !newsletter) {
            return null;
        }
        const { newsletterId, dangerousHed = '', frequencyBadge = '', sourceCode = '' } = newsletter;
        const onIntersectionViewport = (isInViewport, unobserveIntersection) => {
            if (!isInViewport) {
                return;
            }
            unobserveIntersection();
            const entityData = {
                type: 'impression',
                newsletter_id: String(newsletterId),
                newsletter_title: dangerousHed,
                cadence: frequencyBadge,
                subject: sourceCode
            };
            trackNewsletterEvent(entityData);
        };
        return (React.createElement(ViewportMonitor, { onIntersectionViewport: onIntersectionViewport, observerOptions: { rootMargin: '0px' }, className: "content-footer-newsletter-viewport" },
            React.createElement(ConnectedNewsletterSubscribeForm, { ...newsletter, enableSlimUnitToggle: showToggleForLoggedInUser && user?.isAuthenticated && user?.email, hasSlimAlternateStyle: hasSlimAlternateStyle, newsletterType: newsletterType, patternType: patternType, userEmail: user?.isAuthenticated && user?.email, isArticlePage: isArticlePage })));
    }
}
SlimNewsletterWrapper.propTypes = ConnectedNewsletterSubscribeForm.propTypes;
SlimNewsletterWrapper.defaultProps =
    ConnectedNewsletterSubscribeForm.defaultProps;
SlimNewsletterWrapper.displayName = 'SlimNewsletterWrapper';
module.exports = connector(SlimNewsletterWrapper, {
    keysToPluck: ['user', 'userPlatform']
});
//# sourceMappingURL=SlimNewsletterWrapper.js.map

/***/ }),

/***/ 72159:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const SlimNewsletterWrapper = __webpack_require__(75874);
const { asConfiguredComponent } = __webpack_require__(12892);
module.exports = asConfiguredComponent(SlimNewsletterWrapper, 'SlimNewsletterWrapper');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 17685:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const Row = __webpack_require__(66657);
const { Disclaimer } = __webpack_require__(74307);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * Content Footer Additional Text component
 *
 * @param {object} props - React props
 * @param {string} [props.additionalText] - Additional text to render in the footer
 * @param {string} [props.componentWrapper] - Required content wrapper component
 * @param {boolean} [props.isVisible] - Option to activate the component
 *
 * @returns {ReactElement} <React.Fragment>
 */
const ContentFooterAdditionalText = ({ isVisible = false, additionalText, componentWrapper }) => {
    const ComponentWrapper = componentWrapper;
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ContentFooterAdditionalText'
        });
    }, []);
    return (React.createElement(React.Fragment, null, isVisible && additionalText && (React.createElement(Row, null,
        React.createElement(ComponentWrapper, null,
            React.createElement(Disclaimer, { disclaimerHtml: additionalText, className: "grid-layout__content" }))))));
};
ContentFooterAdditionalText.propTypes = {
    additionalText: PropTypes.string,
    componentWrapper: PropTypes.elementType,
    isVisible: PropTypes.bool
};
ContentFooterAdditionalText.displayName = 'ContentFooterAdditionalText';
module.exports = ContentFooterAdditionalText;
//# sourceMappingURL=ContentFooterAdditionalText.js.map

/***/ }),

/***/ 15461:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const ContentFooterAdditionalText = __webpack_require__(17685);
module.exports = asConfiguredComponent(ContentFooterAdditionalText, 'ContentFooterAdditionalText');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 63545:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const Ad = __webpack_require__(19607);
const ConnectedErrorBoundary = __webpack_require__(48496);
const ConsumerMarketingUnit = __webpack_require__(71284);
const CNCoupons = __webpack_require__(65153);
const ContentFooterAdditionalText = __webpack_require__(15461);
const Contributors = __webpack_require__(1802);
const ContributorSpotlight = __webpack_require__(41096);
const Grid = __webpack_require__(86659);
const LinkStack = __webpack_require__(63401);
const { PaymentGateway } = __webpack_require__(92807);
const Row = __webpack_require__(66657);
const RelatedVideo = __webpack_require__(24901);
const ShowContributor = __webpack_require__(18805);
const { TrackComponentChannel } = __webpack_require__(78788);
const { Disclaimer } = __webpack_require__(74307);
const ViewportMonitor = __webpack_require__(3990);
const { trackNewsletterEvent } = __webpack_require__(14307);
const { useClientStatus } = __webpack_require__(8877);
const { ContentFooterWrapper, ContentFooterContributorBio, ContentFooterTagCloud, ContentFooterRelated, ContentFooterMagazineDisclaimer, ContentFooterBottom, ContentFooterNewsletterForm, ContentFooterSeriesNavigation, ContentFooterContributorSpotlightWrapper, ContentFooterNewsletterContentWrapper, ReadMoGrid, ReadMoGridColumn } = __webpack_require__(27529);
const { FooterNewsletter, NewsletterExtended, NewsletterVerticalBottom } = __webpack_require__(12501);
const ContentFooterVMGRecommends = () => (React.createElement(Row, null,
    React.createElement(ReadMoGrid, null,
        React.createElement(ReadMoGridColumn, null,
            React.createElement("div", { "data-testid": "ContentFooterReadMoElement", id: "readmo-12345" })))));
const Newsletter = ({ ContentWrapper, hasWrapper, isArticlePage, isFullBleed, newsletter, palette = 'standard' }) => {
    const { newsletterId, dangerousHed = '', frequencyBadge = '', sourceCode = '' } = newsletter;
    const onIntersectionViewport = (isInViewport, unobserveIntersection) => {
        if (!isInViewport) {
            return;
        }
        unobserveIntersection();
        const entityData = {
            type: 'impression',
            newsletter_id: String(newsletterId),
            newsletter_title: dangerousHed,
            cadence: frequencyBadge,
            subject: sourceCode
        };
        trackNewsletterEvent(entityData);
    };
    const NewsletterForm = (React.createElement(ContentFooterNewsletterForm, { ...newsletter, position: "content-footer", isArticlePage: isArticlePage }));
    // The feature flag takes precendence over other component config like
    // isNewsletterFullBleed. Omitting the content wrapper makes the slice go
    // full bleed on the page
    if (!hasWrapper)
        return NewsletterForm;
    const NewsletterContentWrapper = isFullBleed
        ? Grid.WithMargins
        : ContentWrapper;
    return (React.createElement(ContentFooterNewsletterContentWrapper, { isNewsletterFullBleed: isFullBleed, newsletterPalette: palette },
        React.createElement(ViewportMonitor, { onIntersectionViewport: onIntersectionViewport, observerOptions: { rootMargin: '0px' }, className: "content-footer-newsletter-viewport" },
            React.createElement(NewsletterContentWrapper, null, NewsletterForm))));
};
Newsletter.propTypes = {
    ContentWrapper: PropTypes.elementType.isRequired,
    hasWrapper: PropTypes.bool,
    isArticlePage: PropTypes.bool,
    isFullBleed: PropTypes.bool,
    newsletter: PropTypes.shape(ContentFooterNewsletterForm.propTypes),
    palette: PropTypes.string
};
/**
 * Content Footer component
 *
 * @param {object} props - React props
 * @param {object} [props.channelMap] - Optional object containing map of channel names
 * @param {string} [props.className] - Optional top-level class to add
 * @param {object} [props.consumerMarketing] - Optional ConsumerMarketing props object
 * @param {Element} [props.ContentWrapper] - Required content wrapper component
 * @param {object} [props.contributors] - Optional contributors information
 * @param {string} [props.ctaText] - Optional text to show in product buy buttons
 * @param {object} [props.hasFullBleedRecircBackground] - Optional whether the recirc background is full bleed
 * @param {boolean} [props.hasNewsletterWithoutWrapper] - Optional renders newsletterform without a wrapper
 * @param {boolean} [props.hasTopSpacingFooterRelated] - Optional spacing above content footer related
 * @param {boolean} [props.showWriterBio] - optional flag to show writer as contributor type for contributorBio
 * @param {boolean} [props.hideContentFooterAd] - Optional prop to hide content footer ad
 * @param {boolean} [props.hideContributorBio] - Optional prop to hide contributor bio
 * @param {boolean} [props.hideRecircList] - Optional prop to hide the recirc list
 * @param {boolean} [props.isNarrow] - Optional whether the footer is narrow
 * @param {boolean} [props.isNewsletterFullBleed] - Optional renders fullbleed newsletter block
 * @param {string} [props.newsletterPalette] - Optional renders black newsletter block
 * @param {object} [props.licensedPartnerLink] - Optional partner contibutor info
 * @param {string} [props.magazineDisclaimer] - Optional props for magazine disclaimer
 * @param {object} [props.newsletter] - Optional props for newsletter
 * @param {Array} [props.recircListElements] - result list of related content to pass to RecircList
 * @param {Array} [props.related] - Optional list of related content to pass to RecircList
 * @param {Array} [props.recircRelated] - Optional list to show bottom recirc unit data
 * @param {object} [props.relatedVideo] - Optional prop object to show related video
 * @param {boolean} [props.showContributor] - Optional boolean used show contributor component
 * @param {boolean} [props.shouldUseRelatedVideoOverInterlude_variation] - Optional boolean used for experiments on injecting interlude player instead of "Featured Video"
 * @param {boolean} [props.showHotelRecirc] - props to render brand specific hotel recirc unit
 * @param {boolean} [props.showNewsletter] - Optional prop that determines whether to show the newsletter module
 * @param {object} [props.signageConfig] - Optional prop object signage config
 * @param {object} [props.tagCloud] - Optional Object holding tagCloud properties
 * @param {Array} [props.cnCoupons] -Optional prop object savings united coupons data
 * @param {boolean} [props.showRecirc] - Optional boolean for additional recirc list
 * @param {object} [props.sponsoredProps] - Optional object holding sponsored properties.
 * @param {boolean} [props.hasDynamicDisclaimer] - Optional boolean for TNY's dynamic disclaimer
 * @param {string} [props.dividerColor] - Optional prop to get divider color for article page from copilot
 * @param {string} [props.currentPage] - Optional prop provides the current page if not mentioned the will take empty string
 * @returns {ReactElement} <div>
 */
// eslint-disable-next-line complexity
const ContentFooter = ({ channelMap, className, cnCoupons = [], consumerMarketing, ContentWrapper, contributors, contributorSpotlight, isNarrow, isNewsletterFullBleed, isAdRail, licensedPartnerLink, linkList, hasFullBleedRecircBackground, hasNewsletterWithoutWrapper, hasTopSpacingFooterRelated = false, showWriterBio, hideContentFooterAd = false, hideContributorBio, showContributorSpotlight, showContributor = true, hideRecircList, isLinkStackEnabled, magazineDisclaimer, newsletter, newsletterPalette = 'standard', pageBackgroundTheme, related, recircRelated, relatedVideo, shouldUseRelatedVideoOverInterlude_variation = false, showAdBelowNewsletter = false, showNewsletter, signageConfig, tagCloud, shouldEnableVMG = false, showHotelRecirc = false, showRecirc, shouldEnableFullArticleInverted, shouldShowSeriesNavigationInFooter, dividerColor, recircListElements, sponsoredProps, hasDynamicDisclaimer, currentPage = '' }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ContentFooter'
        });
    }, []);
    const isClient = useClientStatus();
    return (React.createElement(ContentFooterWrapper, { isNarrow: isNarrow, className: className },
        !!sponsoredProps && hasDynamicDisclaimer && (React.createElement(ContentWrapper, null,
            React.createElement(Disclaimer, { sponsorName: sponsoredProps.sponsorName, isSponsored: !!sponsoredProps }))),
        magazineDisclaimer && magazineDisclaimer.issueDate && (React.createElement(ContentWrapper, null,
            React.createElement(ContentFooterMagazineDisclaimer, { ...magazineDisclaimer, "data-testid": "ContentFooterMagazineDisclaimer" }))),
        isLinkStackEnabled && linkList && (React.createElement(Row, null,
            React.createElement(ContentWrapper, null,
                React.createElement(LinkStack, { ...linkList, dividerColor: dividerColor })))),
        !showContributorSpotlight && showContributor && (React.createElement(ShowContributor, { showWriterBio: showWriterBio, hideContributorBio: hideContributorBio, componentWrapper: ContentWrapper, contributors: contributors, dividerColor: dividerColor, tagCloud: tagCloud })),
        showContributorSpotlight && (React.createElement(ContentFooterContributorSpotlightWrapper, { isAdRail: isAdRail },
            React.createElement(ContributorSpotlight, { ...contributorSpotlight }))),
        shouldUseRelatedVideoOverInterlude_variation && (React.createElement(RelatedVideo, { ...relatedVideo, componentWrapper: ContentWrapper })),
        licensedPartnerLink && !showContributorSpotlight && (React.createElement(Row, null,
            React.createElement(ContentWrapper, null,
                React.createElement(ContentFooterContributorBio, { dangerousBio: licensedPartnerLink.dangerousDek, photo: licensedPartnerLink.photo })))),
        React.createElement(ContentFooterAdditionalText, { componentWrapper: ContentWrapper }),
        tagCloud && (React.createElement(Row, null,
            React.createElement(ContentWrapper, null,
                React.createElement(ContentFooterTagCloud, { hasBorderTop: false, tags: tagCloud.tags, dividerColor: dividerColor, "data-testid": "ContentFooterTagCloud" })))),
        showHotelRecirc && recircListElements,
        showRecirc && recircListElements,
        React.createElement(ContentFooterBottom, { "data-testid": "ContentFooterBottom" },
            newsletter && showNewsletter && (React.createElement(Newsletter, { ContentWrapper: ContentWrapper, hasWrapper: !hasNewsletterWithoutWrapper, isFullBleed: isNewsletterFullBleed, newsletter: newsletter, palette: newsletterPalette, isArticlePage: currentPage === 'article' })),
            isClient && (React.createElement(FooterNewsletter, { isFullBleed: isNewsletterFullBleed, contentWrapper: ContentWrapper })),
            React.createElement(NewsletterExtended, { contentWrapper: ContentWrapper }),
            React.createElement(NewsletterVerticalBottom, { contentWrapper: ContentWrapper }),
            React.createElement("div", { className: "content-bottom-anchor" }),
            showAdBelowNewsletter && (React.createElement(Row, null,
                React.createElement(PaymentGateway, { group: "ads" },
                    React.createElement(Ad, { position: "mid-content", "data-testid": "AdBelowNewsletter", shouldHoldSpace: true, shouldDisplayLabel: true })))),
            consumerMarketing && (React.createElement(PaymentGateway, { group: "consumer-marketing" },
                React.createElement(ConsumerMarketingUnit, { ...consumerMarketing }))),
            shouldShowSeriesNavigationInFooter && (React.createElement(ContentFooterSeriesNavigation, { className: "article__series-navigation", pageBackgroundTheme: pageBackgroundTheme, dividerColor: dividerColor })),
            shouldEnableVMG && React.createElement(ContentFooterVMGRecommends, null),
            !hideRecircList && (React.createElement(ConnectedErrorBoundary, null,
                React.createElement(ContentFooterRelated, { categoriesMap: tagCloud?.tags, channelMap: channelMap, related: related, recircRelated: recircRelated, signageConfig: signageConfig, hasFullBleedRecircBackground: hasFullBleedRecircBackground, hasTopSpacingFooterRelated: hasTopSpacingFooterRelated, dividerColor: dividerColor, shouldEnableFullArticleInverted: shouldEnableFullArticleInverted }))),
            shouldEnableVMG && React.createElement(ContentFooterVMGRecommends, null),
            !!cnCoupons.length && (React.createElement(CNCoupons, { items: cnCoupons, dividerColor: dividerColor })),
            !hideContentFooterAd && (React.createElement(Row, null,
                React.createElement(PaymentGateway, { group: "ads" },
                    React.createElement(Ad, { position: "footer", shouldHoldSpace: true })))))));
};
ContentFooter.propTypes = {
    channelMap: PropTypes.object,
    className: PropTypes.string,
    cnCoupons: PropTypes.array,
    consumerMarketing: PropTypes.shape(ConsumerMarketingUnit.propTypes),
    ContentWrapper: PropTypes.elementType.isRequired,
    contributors: PropTypes.oneOfType([
        PropTypes.shape({
            author: PropTypes.shape({
                items: PropTypes.arrayOf(PropTypes.shape(Contributors.propTypes.contributors))
            })
        }),
        PropTypes.shape({
            writer: PropTypes.shape({
                items: PropTypes.arrayOf(PropTypes.shape(Contributors.propTypes.contributors))
            })
        })
    ]),
    contributorSpotlight: PropTypes.object,
    currentPage: PropTypes.string,
    dividerColor: PropTypes.string,
    hasDynamicDisclaimer: PropTypes.bool,
    hasFullBleedRecircBackground: PropTypes.bool,
    hasNewsletterWithoutWrapper: PropTypes.bool,
    hasTopSpacingFooterRelated: PropTypes.bool,
    hideContentFooterAd: PropTypes.bool,
    hideContributorBio: PropTypes.bool,
    hideRecircList: PropTypes.bool,
    isAdRail: PropTypes.bool,
    isLinkStackEnabled: PropTypes.bool,
    isNarrow: PropTypes.bool,
    isNewsletterFullBleed: PropTypes.bool,
    licensedPartnerLink: PropTypes.object,
    linkList: PropTypes.object,
    magazineDisclaimer: PropTypes.shape({
        issueDate: PropTypes.string.isRequired,
        issueLink: PropTypes.string.isRequired,
        originalHed: PropTypes.string
    }),
    newsletter: PropTypes.shape(ContentFooterNewsletterForm.propTypes),
    newsletterPalette: PropTypes.string,
    pageBackgroundTheme: PropTypes.string,
    recircListElements: PropTypes.array,
    recircRelated: PropTypes.array,
    related: PropTypes.array,
    relatedVideo: PropTypes.shape({
        brand: PropTypes.string,
        related: PropTypes.any,
        useRelatedVideo: PropTypes.bool,
        // TO DO: article pages pass in showRelatedVideo and gallery pages
        // pass in useRelatedVideo. Eventually, these should be consolidated
        // at the transformer level.
        showRelatedVideo: PropTypes.bool
    }),
    shouldEnableFullArticleInverted: PropTypes.bool,
    shouldEnableVMG: PropTypes.bool,
    shouldShowSeriesNavigationInFooter: PropTypes.bool,
    shouldUseRelatedVideoOverInterlude_variation: PropTypes.bool,
    showAdBelowNewsletter: PropTypes.bool,
    showContributor: PropTypes.bool,
    showContributorSpotlight: PropTypes.bool,
    showHotelRecirc: PropTypes.bool,
    showNewsletter: PropTypes.bool,
    showRecirc: PropTypes.bool,
    showWriterBio: PropTypes.bool,
    signageConfig: PropTypes.object,
    sponsoredProps: PropTypes.object,
    tagCloud: PropTypes.shape({
        tags: PropTypes.arrayOf(PropTypes.shape({
            tag: PropTypes.string.isRequired,
            url: PropTypes.string
        }))
    })
};
ContentFooter.displayName = 'ContentFooter';
module.exports = ContentFooter;
//# sourceMappingURL=ContentFooter.js.map

/***/ }),

/***/ 24901:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const { asConfiguredComponent } = __webpack_require__(12892);
const translations = (__webpack_require__(52579)/* ["default"] */ .A);
const { ContentFooterRelatedVideo, ContentFooterRelatedVideoHeader, ContentFooterRelatedPlayer, ContentFooterRelatedVideoTitle, ContentFooterRelatedVideoDek } = __webpack_require__(27529);
const { inlineEmbedPosition } = __webpack_require__(62327);
/**
 * Related video component for the content footer
 *
 * @param {object} props - React props
 * @param {Element} props.componentWrapper - Required content wrapper component
 * @param {object} [props.headerText] - Header title
 * @param {object} [props.related] - related object props
 * @param {string} [props.related.dek] - Optional related item's dek
 * @param {string} [props.related.scriptEmbedUrl] - Optional script embed URL
 * @param {string} [props.related.title] - Optional related item's title
 * @param {boolean} [props.showRelatedVideo] - Optional whether to hide the component
 *
 * @returns {ReactElement} the related video component
 */
const RelatedVideo = ({ componentWrapper: ContentWrapper, headerText, related = {}, showRelatedVideo = false }) => {
    const scriptUrl = related && related.scriptEmbedUrl;
    const { formatMessage } = useIntl();
    if (!showRelatedVideo || !scriptUrl) {
        return null;
    }
    return (React.createElement(ContentWrapper, null,
        React.createElement(ContentFooterRelatedVideo, null,
            React.createElement(ContentFooterRelatedVideoHeader, { "data-testid": "ContentFooterRelatedVideoHeader" }, headerText || formatMessage(translations.headerText)),
            React.createElement(ContentFooterRelatedPlayer, { scriptUrl: scriptUrl, videoEmbedPosition: inlineEmbedPosition }),
            React.createElement(ContentFooterRelatedVideoTitle, null, related.title),
            React.createElement(ContentFooterRelatedVideoDek, null, related.dek))));
};
RelatedVideo.propTypes = {
    componentWrapper: PropTypes.elementType.isRequired,
    headerText: PropTypes.string,
    related: PropTypes.shape({
        dek: PropTypes.string,
        scriptEmbedUrl: PropTypes.string,
        title: PropTypes.string
    }),
    showRelatedVideo: PropTypes.bool
};
RelatedVideo.displayName = 'RelatedVideo';
module.exports = asConfiguredComponent(RelatedVideo, 'RelatedVideo');
//# sourceMappingURL=RelatedVideo.js.map

/***/ }),

/***/ 18805:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const Row = __webpack_require__(66657);
const Contributors = __webpack_require__(1802);
/**
 * The ShowContributor Component
 *
 * @param {Element} props.componentWrapper - Required content wrapper component
 * @param {object} [props.contributors] - Optional contributors information
 * @param {boolean} [props.hideContributorBio] - Optional prop to hide contributor bio
 * @param {boolean} [props.showWriterBio] - optional flag to show writer bio in  Content footer
 * @param {object} [props.tagCloud] - Optional Object holding tagCloud properties
 * @param {string} [props.dividerColor] - Optional prop to get divider color for article page from copilot
 *
 * @returns {ReactElement} <HedTag>
 */
const ShowContributor = ({ componentWrapper: ContentWrapper, contributors, tagCloud, showWriterBio, dividerColor, hideContributorBio }) => {
    const contributorType = showWriterBio ? 'writer' : 'author';
    const showContributorBio = !hideContributorBio && contributors?.[contributorType]?.items;
    if (!showContributorBio) {
        return null;
    }
    return (React.createElement(Row, null,
        React.createElement(ContentWrapper, null,
            React.createElement(Contributors, { ...(tagCloud && { shouldHideBottomLine: true }), contributors: contributors[contributorType].items, dividerColor: dividerColor }))));
};
ShowContributor.propTypes = {
    componentWrapper: PropTypes.elementType.isRequired,
    contributors: PropTypes.oneOfType([
        PropTypes.shape({
            author: PropTypes.shape({
                items: PropTypes.arrayOf(PropTypes.shape(Contributors.propTypes.contributors))
            })
        }),
        PropTypes.shape({
            writer: PropTypes.shape({
                items: PropTypes.arrayOf(PropTypes.shape(Contributors.propTypes.contributors))
            })
        })
    ]),
    dividerColor: PropTypes.string,
    hideContributorBio: PropTypes.bool,
    showWriterBio: PropTypes.bool,
    tagCloud: PropTypes.shape({
        tags: PropTypes.arrayOf(PropTypes.shape({
            tag: PropTypes.string.isRequired,
            url: PropTypes.string
        }))
    })
};
module.exports = ShowContributor;
//# sourceMappingURL=ShowContributor.js.map

/***/ }),

/***/ 61127:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const ContentFooter = __webpack_require__(63545);
module.exports = asConfiguredComponent(ContentFooter, 'ContentFooter');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 52579:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    headerText: {
        id: 'RelatedVideo.HeaderText',
        defaultMessage: 'Featured Video',
        description: 'Title preceding related video embed',
        isConfigurable: true
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 84899:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const PropTypes = __webpack_require__(5556);
const getElDimensions = __webpack_require__(94409);
const ReviewRatingData = __webpack_require__(94149);
const ResponsiveAsset = __webpack_require__(73275);
const Rating = __webpack_require__(21093);
const SocialIcons = __webpack_require__(35676);
const NativeShareButton = __webpack_require__(77554);
const translations = (__webpack_require__(33193)/* ["default"] */ .A);
const LiveEventSponsorBlock = __webpack_require__(10705);
const SummaryPremiere = __webpack_require__(96591);
const { ContentHeaderByline, ContentHeaderAccreditationSocialIcons, ContentHeaderContributorImage, ContentHeaderNativeShareButton, ContentHeaderBylineContent, ContentHeaderDekRewards, ContentHeaderAccreditation, ContentHeaderDek, ContentHeaderSignageLabel, SummaryPremiereWrapper } = __webpack_require__(80607);
const getVenueAwards = ({ venueAwards }) => (React.createElement(React.Fragment, null, venueAwards && (React.createElement(ContentHeaderDekRewards, { dangerouslySetInnerHTML: { __html: venueAwards } }))));
getVenueAwards.propTypes = {
    venueAwards: PropTypes.string
};
/**
 * The accreditation component of the content header
 *
 * @param {ReactElement} props.bylinesBlock - the rendered byline component
 * @param {object} [props.contributorImage] - Optional contributor image object.
 * @param {string} [props.dangerousDek] - Optional Article Dek.
 * @param {string} props.dividerType - If `hasDesktopTitleBlockDivider` is set to true, the type of dividers to display.
 * @param {boolean} [props.variations.shouldRemoveBylineTopMargin] - To add/remove the ContentHeaderByline margin top
 * @param {boolean} props.hasContributorImageBackground - If it has a
 * @param {boolean} props.hasDesktopTitleBlockDivider - Show or hide title block divider on Desktop breakpoint
 * @param {boolean} props.hasLede - Whether or not the header has a lede
 * @param {boolean} [props.hasStickySocialIcons] - Optional has sticky social icons on desktop, defaults to true.
 * @param {boolean} [props.hideByLine] - Optional, flag to hide entire ByLine Block
 * @param {boolean} [props.hideDangerousDek] - Optional hide dek. default value is false
 * @param {boolean} [props.hideTopRating] - Optional parameter to add a class that hides top rating.
 * @param {boolean} [props.hideSocialIcons] - Optional hide social icons on desktop.
 * @param {boolean} [props.hideSocialIconsOnMobile] - Optional hide social icons on mobile.
 * @param {boolean} [props.isLiveStoryType] - Optional Flag to mark Live Story
 * @param {boolean} props.isMiddleImage - Is the asset position middle?
 * @param {boolean} props.isSponsoredContent - Is this sponsored content?
 * @param {object} [props.metadataVideo] - Optional CNE video metadata
 * @param {ReactElement} props.publishDateBlock - the rendered publish date component
 * @param {string} props.publishDatePosition - The position of the publish date
 * @param {object} [props.rating] - Optional rating.
 * @param {string} [props.signage] - Optional article signage
 * @param {bool} [props.shouldDisplaySignageInline] - Optional boolean to display signage, defaults to false
 * @param {bool} [props.shouldDisplayPremiereDate] - Optional, used to display premiere date
 * @param {boolean} props.shouldShowAuthorsInTitleBlock - Should this show authors in the title block?
 * @param {boolean} [props.showContributorImage] - Optional show the contributor image.
 * @param {boolean} [props.showSponsorBlock] - Optional to show sponsorContents
 * @param {object}  [props.sponsoredContentHeaderProps] - Optional sponsored text and logo details
 * @param {Array} [props.socialIconsToHide] - list of social icons
 * @param {object} [props.socialMedia] - Optional Social Icon Links to share article.
 * @param {string}  [props.sponsorByline] - Optional sponsored byline text
 * @param {string}  [props.theme] - Optional theme name
 *
 * @returns {ReactElement} <div>
 */
const Accreditation = ({ bylinesBlock, contributorImage, dangerousDek, dividerType, shouldRemoveBylineTopMargin, hasContributorImageBackground, hasDesktopTitleBlockDivider, hasLede, hasStickySocialIcons, hideSocialIconsOnMobile, hideTopRating, isBusinessContentHeader, isMiddleImage, isSponsoredContent, signage, sponsorByline, sponsoredContentHeaderProps, publishDateBlock, publishDatePosition, rating, reviewRating, shouldShowAuthorsInTitleBlock, showContributorImage, socialMedia, socialTitle, socialDescription, pageUrl, shouldDisplaySignageInline, showNativeShareButton, venueAwards, hideByLine = false, hideDangerousDek = false, hideSocialIcons = false, isLiveStoryType = false, metadataVideo = {}, shouldDisplayPremiereDate = false, showSponsorBlock = false, socialIconsToHide = [], theme = 'standard' }) => {
    const { rating: averageRatingCount, count: totalRatingCount } = rating || {};
    const VenueAwardComponent = getVenueAwards({
        venueAwards
    });
    const shouldShowByLine = () => !shouldShowAuthorsInTitleBlock && !isSponsoredContent && !hideByLine;
    const visibilityInfo = {
        showDek: !hideDangerousDek && dangerousDek && !isMiddleImage,
        showVenueAwards: venueAwards,
        showByline: shouldShowByLine(),
        showNativeShareButton,
        socialMedia
    };
    const { isLive, premiereGap, premiereDate } = metadataVideo;
    const getPremiereLevel = () => {
        return (shouldDisplayPremiereDate &&
            premiereDate &&
            !isLive && (React.createElement(SummaryPremiereWrapper, null,
            React.createElement(SummaryPremiere, { premiereDate: premiereDate, premiereGap: premiereGap, containerTheme: theme, hideTimeStampIcon: true }))));
    };
    const getSignageLabel = () => {
        return (shouldDisplaySignageInline &&
            signage && (React.createElement(ContentHeaderSignageLabel, null, signage)));
    };
    const getAccreditationSocialIcons = () => socialMedia &&
        !hideSocialIcons && (React.createElement(ContentHeaderAccreditationSocialIcons, { ...socialMedia, className: "content-header__social-share", hideSocialIconsOnMobile: hideSocialIconsOnMobile, hasStickySocialIcons: hasStickySocialIcons, socialIconsToHide: socialIconsToHide }));
    const { formatMessage } = useIntl();
    const getLiveEventSponsorBlock = () => {
        return (React.createElement(LiveEventSponsorBlock, { sponsorByline: sponsorByline, sponsoredContentHeaderProps: { ...sponsoredContentHeaderProps }, theme: theme }));
    };
    return (React.createElement(ContentHeaderAccreditation, { className: "content-header__accreditation", shouldShowAuthorsInTitleBlock: shouldShowAuthorsInTitleBlock, isBusinessContentHeader: isBusinessContentHeader, hasLede: hasLede, rowWithBottomBorder: hasDesktopTitleBlockDivider &&
            (dividerType === 'both' || dividerType === 'bottom'), visibilityInfo: visibilityInfo, "data-testid": "ContentHeaderAccreditation" },
        visibilityInfo.showDek && (React.createElement(ContentHeaderDek, { dangerouslySetInnerHTML: { __html: dangerousDek }, as: "div" })),
        getSignageLabel(),
        getPremiereLevel(),
        isLiveStoryType && showSponsorBlock && getLiveEventSponsorBlock(),
        VenueAwardComponent,
        reviewRating && !hideTopRating && (React.createElement(ReviewRatingData, { rating: reviewRating })),
        visibilityInfo.showByline && (React.createElement(ContentHeaderByline, { isLiveStoryType: isLiveStoryType, sponsorName: sponsoredContentHeaderProps?.sponsorName, showSponsorBlock: showSponsorBlock, shouldRemoveBylineTopMargin: shouldRemoveBylineTopMargin },
            showContributorImage && contributorImage && (React.createElement(ContentHeaderContributorImage, { ...contributorImage, sizes: isBusinessContentHeader ? '100%' : '66px', hasContributorImageBackground: hasContributorImageBackground, isBusinessContentHeader: isBusinessContentHeader })),
            React.createElement(ContentHeaderBylineContent, null,
                bylinesBlock,
                publishDatePosition === 'bottom' && publishDateBlock))),
        showNativeShareButton ? (React.createElement(ContentHeaderNativeShareButton, null,
            React.createElement(NativeShareButton, { shareData: {
                    url: pageUrl,
                    title: socialTitle,
                    text: socialDescription
                } }))) : (getAccreditationSocialIcons()),
        !!averageRatingCount && !!totalRatingCount && (React.createElement(Rating, { averageRatingCount: Math.round(averageRatingCount * 10) / 10, hasBorderTop: true, link: {
                label: formatMessage(translations.readReviews),
                onClick: (e) => {
                    e.preventDefault();
                    const el = document.getElementById('reviews');
                    const { top } = getElDimensions(el);
                    // Nav height - 56
                    window.scrollTo(0, top - 56);
                },
                url: '#reviews'
            }, totalRatingCount: totalRatingCount }))));
};
Accreditation.propTypes = {
    bylinesBlock: PropTypes.node,
    contributorImage: PropTypes.shape(ResponsiveAsset.propTypes),
    dangerousDek: PropTypes.string,
    dividerType: PropTypes.string,
    hasContributorImageBackground: PropTypes.bool,
    hasDesktopTitleBlockDivider: PropTypes.bool,
    hasLede: PropTypes.bool,
    hasStickySocialIcons: PropTypes.bool,
    hideByLine: PropTypes.bool,
    hideDangerousDek: PropTypes.bool,
    hideSocialIcons: PropTypes.bool,
    hideSocialIconsOnMobile: PropTypes.bool,
    hideTopRating: PropTypes.bool,
    isBusinessContentHeader: PropTypes.bool,
    isLiveStoryType: PropTypes.bool,
    isMiddleImage: PropTypes.bool,
    isSponsoredContent: PropTypes.bool,
    metadataVideo: PropTypes.shape({
        isLive: PropTypes.bool,
        premiereDate: PropTypes.string,
        premiereGap: PropTypes.number,
        series: PropTypes.string,
        videoLength: PropTypes.number
    }),
    pageUrl: PropTypes.string,
    publishDateBlock: PropTypes.node,
    publishDatePosition: PropTypes.string,
    rating: PropTypes.shape(Rating.propTypes),
    reviewRating: PropTypes.number,
    shouldDisplayPremiereDate: PropTypes.bool,
    shouldDisplaySignageInline: PropTypes.bool,
    shouldRemoveBylineTopMargin: PropTypes.bool,
    shouldShowAuthorsInTitleBlock: PropTypes.bool,
    showContributorImage: PropTypes.bool,
    showNativeShareButton: PropTypes.bool,
    showSponsorBlock: PropTypes.bool,
    signage: PropTypes.string,
    socialDescription: PropTypes.string,
    socialIconsToHide: PropTypes.array,
    socialMedia: PropTypes.shape(SocialIcons.propTypes),
    socialTitle: PropTypes.string,
    sponsorByline: PropTypes.string,
    sponsoredContentHeaderProps: PropTypes.shape({
        campaignUrl: PropTypes.string,
        sponsorLogo: PropTypes.shape(ResponsiveAsset.propTypes),
        sponsorName: PropTypes.string
    }),
    theme: PropTypes.oneOf(['standard', 'inverted', 'special']),
    venueAwards: PropTypes.string
};
module.exports = Accreditation;
//# sourceMappingURL=Accreditation.js.map

/***/ }),

/***/ 80607:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { calculateSpacing, getColorToken, removeTextDecoration, getLinkStyles, getTypographyStyles, maxScreen } = __webpack_require__(26865);
const { BaseText } = __webpack_require__(76955);
const { roundImageBase } = __webpack_require__(52027);
const { BREAKPOINTS, INTERACTIVE } = __webpack_require__(96472);
const SocialIcons = __webpack_require__(35676);
const { SocialIconsList } = __webpack_require__(51000);
const ResponsiveAsset = __webpack_require__(73275);
const { SpanWrapper } = __webpack_require__(18117);
const { SummaryItemAssetPremier, AssetPremierLabel } = __webpack_require__(75761);
const { BylineWrapper } = __webpack_require__(74423);
const { defaultGridStyle, defaultColorPaddingStyle, rowWithCommonStyle } = __webpack_require__(60254);
const cssToHideSocialIcons = (socialIconsToHide) => socialIconsToHide
    .map((socialShareKey) => `
        .social-icons__list-item--${socialShareKey} {
          display: none;
        }
    `)
    .join('\n');
const ContentHeaderByline = styled.div.withConfig({
    displayName: 'ContentHeaderByline'
}) `
  margin-top: ${calculateSpacing(4)};

  ${({ isLiveStoryType, sponsorName, showSponsorBlock }) => isLiveStoryType && sponsorName && showSponsorBlock && `margin-top: unset;`}

  ${SpanWrapper} {
    display: inline-block;
    width: ${calculateSpacing(8.25)};
    height: ${calculateSpacing(8.25)};
  }

  ${({ shouldRemoveBylineTopMargin }) => shouldRemoveBylineTopMargin &&
    css `
      margin-top: 0;

      ${BylineWrapper} {
        margin-top: ${calculateSpacing(0.5)};

        &:first-child {
          margin-top: 0;
        }
      }
    `}
`;
const ContentHeaderAccreditationSocialIcons = styled(SocialIcons.Standard).withConfig({
    displayName: 'ContentHeaderAccreditationSocialIcons'
}) `
  margin: 0 auto;
  margin-top: ${calculateSpacing(3)};
  width: 100%;

  ${SocialIconsList} {
    justify-content: center;
  }

  /* Hide sosial share icons on mobile */
  ${({ hideSocialIconsOnMobile }) => hideSocialIconsOnMobile &&
    `
      @media (min-width: 0) and (max-width: ${BREAKPOINTS.lg}) {
        display: none;
      }
    `}

  /* Hide social share icons on desktop */
    ${({ hasStickySocialIcons }) => hasStickySocialIcons &&
    `
      @media (min-width: ${BREAKPOINTS.lg}) {
        display: none;
      }
    `}
    
    /* Hide specific social icons mentioned in props - social-icons */
    ${({ hideSocialIconsOnMobile, socialIconsToHide }) => !hideSocialIconsOnMobile &&
    `
        ${maxScreen(BREAKPOINTS.lg)} {
          ${cssToHideSocialIcons(socialIconsToHide)}
        }
      `}
`;
// 1. create a round image with a min and max width and height
// 2. min and max values for scaling avatar images
const ContentHeaderContributorImage = styled(ResponsiveAsset).withConfig({
    displayName: 'ContentHeaderContributorImage'
}) `
  ${roundImageBase('100%', '60px', '66px')}; /* 1, 2 */
  margin-right: auto;
  margin-left: auto;

  img {
    width: 100%;
  }

  ${({ hasContributorImageBackground }) => hasContributorImageBackground &&
    `
    display: inline-block;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #f5f5f5;
    overflow: hidden;
  `}
  ${({ isBusinessContentHeader }) => isBusinessContentHeader &&
    `
  ${roundImageBase('100%', '173px', '173px')}; /* 1, 2 */
  margin-right: auto;
  margin-left: auto;

  img {
    width: 100%;
  }
  @media (min-width: ${BREAKPOINTS.sm}) {
    ${roundImageBase('100%', '153px', '153px')}; /* 1, 2 */
  }
  @media (min-width: ${BREAKPOINTS.md}) {
    ${roundImageBase('100%', '172px', '172px')}; /* 1, 2 */
  }
  @media (min-width: ${BREAKPOINTS.lg}) {
    ${roundImageBase('100%', '206px', '206px')}; /* 1, 2 */
  }
  @media (min-width: ${BREAKPOINTS.xl}) {
    ${roundImageBase('100%', '262px', '262px')}; /* 1, 2 */
  }
  @media (min-width: ${BREAKPOINTS.xxl}) {
    ${roundImageBase('100%', '340px', '340px')}; /* 1, 2 */
  }

`}
`;
const ContentHeaderNativeShareButton = styled.div.withConfig({
    displayName: 'ContentHeaderNativeShareButton'
}) `
  && {
    display: flex;
    grid-column: 1/-1;
    justify-content: center;
    margin-top: ${calculateSpacing(3)};
  }
  ${defaultGridStyle}
  ${defaultColorPaddingStyle}
`;
const ContentHeaderBylineContent = styled.div.withConfig({
    displayName: 'ContentHeaderBylineContent'
}) ``;
const ContentHeaderDekRewards = styled(BaseText).withConfig({
    displayName: 'ContentHeaderDekRewards'
}) `
  > img {
    margin-right: ${calculateSpacing(0.8)};
    margin-left: ${calculateSpacing(2)};

    &:first-of-type {
      margin-left: 0;
    }
  }
  margin-top: ${calculateSpacing(3)};
`;
ContentHeaderDekRewards.defaultProps = {
    as: 'div',
    colorToken: 'colors.consumption.lead.standard.heading',
    typeIdentity: 'typography.definitions.globalEditorial.context-primary'
};
const ContentHeaderDek = styled.p.withConfig({
    displayName: 'ContentHeaderDek'
}) `
  @media (min-width: ${BREAKPOINTS.lg}) {
    && {
      grid-column: 3 / span 8;
    }
  }
  ${({ theme }) => getLinkStyles(theme, 'colors.consumption.lead.standard.description', null)};

  /*  overwrite text decoration link styles see token: layouts_to_refactor.interactive.links */
  ${removeTextDecoration()}

  margin-top: ${calculateSpacing(3)};
  cursor: unset;
  text-align: center;

  .small {
    text-transform: lowercase;
    font-style: inherit;
    font-variant: small-caps;
  }

  a {
    ${({ theme }) => getLinkStyles(theme, 'colors.consumption.lead.standard.link', 'colors.consumption.lead.standard.link-hover')};
    transition: color ${INTERACTIVE.timingLinkDefault} ease;
  }
  ${getTypographyStyles('typography.definitions.consumptionEditorial.description-core')};

  ${({ assetPosition, mediaWidth }) => assetPosition === 'middle' &&
    `
      margin-top: ${calculateSpacing(3)};
      @media (min-width: ${BREAKPOINTS.md}) {
        margin-top: ${calculateSpacing(5)};
      }
      && {
      @media (min-width: ${BREAKPOINTS.lg}) {
        grid-column: 1 / 9;
      }
    }
      ${mediaWidth === 'grid' &&
        `
      && {
        @media (min-width: ${BREAKPOINTS.lg}) {
          grid-column: 1 / -1;
        }
      }
      `};
    `};
`;
const ContentHeaderSignageLabel = styled(BaseText).withConfig({
    displayName: 'ContentHeaderSignageLabel'
}) `
  padding-top: ${calculateSpacing(1)};
  ${getTypographyStyles('typography.definitions.discovery.description-core')};
`;
const getAccreditationFirstChildStyle = (visibilityInfo) => {
    if (visibilityInfo.showDek) {
        return `
      ${ContentHeaderDek} {
        margin-top: 0;
      }
    `;
    }
    else if (visibilityInfo.showVenueAwards) {
        return `
      ${ContentHeaderDekRewards} {
        margin-top: 0;
      }
    `;
    }
    else if (visibilityInfo.showByline) {
        return `
      ${ContentHeaderByline} {
        margin-top: 0;
      }
    `;
    }
    else if (visibilityInfo.showNativeShareButton) {
        return `
      ${ContentHeaderNativeShareButton} {
        margin-top: 0;
      }
    `;
    }
    else if (visibilityInfo.socialMedia) {
        return `
      ${ContentHeaderAccreditationSocialIcons} {
        margin-top: 0;
      }
    `;
    }
    return '';
};
const ContentHeaderAccreditation = styled.div.withConfig({
    displayName: 'ContentHeaderAccreditation'
}) `
  ${({ rowWithBottomBorder, theme }) => rowWithBottomBorder &&
    `
    &::after {
      display: block;
      grid-column: 1/-1;
      border: 0;
      border-bottom: 1px solid ${getColorToken(theme, 'colors.consumption.body.standard.divider')};
      padding-top: ${calculateSpacing(2)};
      width: 100%;
      height: 0;
      content: '';
    }
    ${rowWithCommonStyle}
  `}

  ${defaultGridStyle}
  
  && {
    ${defaultColorPaddingStyle}
  }

  > * {
    grid-column: 1/-1;
  }

  ${({ visibilityInfo }) => getAccreditationFirstChildStyle(visibilityInfo)}

  padding-bottom: ${calculateSpacing(6)};
  ${({ isBusinessContentHeader }) => isBusinessContentHeader &&
    `
  @media (min-width: ${BREAKPOINTS.md}) {
  grid-column: 9 / span 12;
  grid-template-columns: repeat(12,1fr);
  width:min-content;
  align-items: center;
  }
`}
`;
const SummaryPremiereWrapper = styled.div.withConfig({
    displayName: 'SummaryPremiereWrapper'
}) `
  max-width: 1600px;

  ${SummaryItemAssetPremier} {
    display: flex;
    border: 0;
  }

  ${AssetPremierLabel} {
    padding: ${calculateSpacing(3)} 0 0 0;
    ${({ theme }) => {
    return `${getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-tertiary')};
      `;
}}
  }
`;
module.exports = {
    ContentHeaderByline,
    ContentHeaderAccreditationSocialIcons,
    ContentHeaderContributorImage,
    ContentHeaderNativeShareButton,
    ContentHeaderBylineContent,
    ContentHeaderDekRewards,
    ContentHeaderAccreditation,
    ContentHeaderDek,
    ContentHeaderSignageLabel,
    SummaryPremiereWrapper
};
//# sourceMappingURL=Accreditation.styles.js.map

/***/ }),

/***/ 95865:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { CategoriesWrapper, CategoriesTitle, CategoriesItemList, CategoriesItem, CategoriesLink } = __webpack_require__(18157);
/**
 * A component containing the title, rubric and items count (where relevant)
 *
 * @param {object} props - React props
 * @param {string} props.title - Title for categories links
 * @param {object[]} props.tags - Array of tags to display
 *
 * @returns {ReactElement} <div>
 */
const Categories = ({ title, tags = [] }) => {
    return (React.createElement(CategoriesWrapper, null,
        React.createElement(CategoriesTitle, null, title),
        React.createElement(CategoriesItemList, null, tags.map((tag) => (React.createElement(CategoriesItem, { key: tag.name },
            React.createElement(CategoriesLink, { href: tag.slug }, tag.name)))))));
};
Categories.propTypes = {
    tags: PropTypes.array,
    title: PropTypes.string
};
Categories.displayName = 'Categories';
module.exports = Categories;
//# sourceMappingURL=Categories.js.map

/***/ }),

/***/ 18157:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { BaseText, BaseLink } = __webpack_require__(76955);
const { calculateSpacing, getColorToken, getLinkStyles } = __webpack_require__(26865);
const CategoriesWrapper = styled.div.withConfig({
    displayName: 'CategoriesWrapper'
}) `
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: ${calculateSpacing(0.5)};
`;
const CategoriesTitle = styled(BaseText).withConfig({
    displayName: 'CategoriesTitle'
}) `
  margin-right: ${calculateSpacing(1)};
`;
CategoriesTitle.defaultProps = {
    as: 'div',
    colorToken: 'colors.consumption.lead.standard.accreditation',
    typeIdentity: 'typography.definitions.globalEditorial.accreditation-feature'
};
const CategoriesItemList = styled.ul.withConfig({
    displayName: 'CategoriesItemList'
}) `
  margin: 0;
  padding: 0;
  line-height: 1;
`;
const CategoriesItem = styled.li.withConfig({
    displayName: 'CategoriesItem'
}) `
  display: inline-block;

  &:not(:last-child) {
    &::after {
      margin: 0 ${calculateSpacing(1)};
      color: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.standard.divider')};
      content: '|';
    }
  }
`;
const CategoriesLink = styled(BaseLink).withConfig({
    displayName: 'CategoriesLink'
}) `
  ${({ theme }) => getLinkStyles(theme, 'colors.consumption.lead.standard.link', null, 'global')};
`;
CategoriesLink.defaultProps = {
    typeToken: 'typography.definitions.globalEditorial.accreditation-core'
};
module.exports = {
    CategoriesWrapper,
    CategoriesTitle,
    CategoriesItemList,
    CategoriesItem,
    CategoriesLink
};
//# sourceMappingURL=Categories.styles.js.map

/***/ }),

/***/ 18601:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const PersistentAside = __webpack_require__(40855);
const { withLightbox } = __webpack_require__(83726);
const ItemsCount = __webpack_require__(78372);
const SocialIcons = __webpack_require__(35676);
const Rubric = __webpack_require__(34187);
const Bylines = __webpack_require__(52540);
const GalleryEmbed = __webpack_require__(47811);
const CNEVideoEmbed = __webpack_require__(59098);
const Rating = __webpack_require__(21093);
const ResponsiveAsset = __webpack_require__(73275);
const TitleBlock = __webpack_require__(19977);
const LeadAsset = __webpack_require__(92027);
const Accreditation = __webpack_require__(84899);
const { useNativeShare } = __webpack_require__(90072);
const { getThemedBylineVariation } = __webpack_require__(27053);
const { ContentHeaderSocialIcons } = __webpack_require__(50130);
const { ContentHeaderWrapper, ContentHeaderOffersData, ContentHeaderLeadOverride, ContentHeaderAccreditationBottom, ContentHeaderContainer, ContentHeaderPublishDate, ContentHeaderLeadAssetWrapper, ContentHeaderBylines, ContentHeaderPersistentAside, PodcastContentHeaderDivider, ContentHeaderHedAccreditationWrapper } = __webpack_require__(88317);
const { ContentHeaderDek } = __webpack_require__(80607);
const { getOverrideBehaviour } = __webpack_require__(68089);
const { storyVideoPosition } = __webpack_require__(62327);
const { TrackComponentChannel } = __webpack_require__(78788);
const FULL_WIDTH_SELECTOR = '.container--full, .full-bleed-ad, .callout--feature-large';
const hasSingleAuthor = (contributors) => contributors &&
    Object.keys(contributors).length === 1 &&
    contributors.author &&
    contributors.author.items.length === 1;
/**
 * ContentHeader component
 *
 * @param {object} props - React Props
 * @param {Array} [props.additionalPhotos] - Optional array for additional images wanted in the lightbox
 * @param {string} [props.authorsTitleBlockPosition] - Optional authors position relative to title in titleblock.
 * @param {Array} [props.awards] - Optional product awards
 * @param {Array} [props.business] - Optional product business details
 * @param {string} [props.bylineVariation] - Optional variation of byline.
 * @param {object} [props.cneVideoEmbedProps] - CNEVideoEmbed Properties
 * @param {object} [props.cneVideoEmbedProps.additionalEmbedParams] - Optional
 * @param {string} [props.cneVideoEmbedProps.dangerousCaption] - Optional video caption.
 * @param {bool} [props.cneVideoEmbedProps.isStickyType] - Optional.
 * @param {bool} [props.cneVideoEmbedProps.scriptUrl] - Optional, for video url
 * @param {bool} [props.cneVideoEmbedProps.shouldAutoplay] - Optional, for video auto play
 * @param {bool} [props.cneVideoEmbedProps.shouldHaveTeaser] - Optional
 * @param {bool} [props.cneVideoEmbedProps.shouldMute] - Optional
 * @param {object} [props.cneVideoEmbedProps.variationsVideo] - Optional
 * @param {object} [props.cneVideoEmbedProps.variationVideoName] - Optional
 * @param {string} [props.captionStyle] - Optional the caption style to be used by the content header
 * @param {string} [props.captionWidth] - Optional control whether to make caption container full bleed in order to handle inverted textAboveCenter content header
 * @param {string} [props.className] - Optional top-level class to add.
 * @param {object} [props.config] - Verso settigns configs.
 * @param {object} [props.contentHeaderCategories] - Optional object for content header categories
 * @param {string} [props.contentHeaderCategories.title] - Optional
 * @param {Array}  [props.contentHeaderCategories.tags] - Optional
 * @param {Array}  [props.contentSponsorNames] - Optional
 * @param {object} [props.contributorImage] - Optional contributor image object.
 * @param {object} [props.contributors] -  Optional object containing data to create authors byline.
 * @param {object} [props.contributors.author] -  Optional object containing data to create authors byline.
 * @param {object} [props.contributors.illustrator] - Optional object containing data to create illustrators byline.
 * @param {object} [props.contributors.photographers] - Optional object containing data to create photographers byline.
 * @param {string} [props.ctaText] - Optional text to show in product buy buttons
 * @param {string} [props.dangerousDek] - Optional Article Dek.
 * @param {string} [props.dangerousHed] - Optional Article Hed.
 * @param {string} props.dividerType - If `hasDesktopTitleBlockDivider` is set to true, the type of dividers to display.
 * @param {boolean} [props.showFullHeaderViewInMobile] - Feature flag for enabling ACDC space changes
 * @param {boolean} props.hasDesktopTitleBlockDivider - Show or hide title block divider on Desktop breakpoint
 * @param {boolean} [props.hasDisabledCloseOnClickForLightbox] - Flag to disable closing the modal when clicked outside the images
 * @param {boolean} props.hasLightbox - Whether the lightbox is enabled for the current article
 * @param {bool} [props.hasNarrowHeader] - Prop to align hed, dek with that of article content.
 * @param {boolean} props.hasSlideshow - option prop to have lightbox enable slideshow
 * @param {boolean} props.hasLedeLightboxButton - option prop to add render a option lightbox button in lede
 * @param {boolean} props.hasStaticPositionedAward - Statically positions Awards for Review content types, this is set as a setting in the tenant config
 * @param {boolean} props.hasContributorImageBackground - Optional
 * @param {bool} [props.hasNativeShareButton] - Optional
 * @param {boolean} [props.hasStickyBoxIndexPosition] - Feature flag to enable index position of Stickybox
 * @param {boolean} [props.hasStickySocialIcons] - Optional has sticky social icons on desktop, defaults to true.
 * @param {boolean} props.hideAdaptationByline - Optional parameter to hide adaptation by author's by line.
 * @param {boolean} [props.hideByLine] - Optional, flag to hide entire ByLine Block
 * @param {boolean} [props.hideContributors] - Optional hide contributors
 * @param {boolean} [props.hideDangerousDek] - Optional hide dek, default false
 * @param {boolean} props.hideIssueDate - Show or hide the issue date
 * @param {boolean} props.hideIssueDatePipeSeparator - Show or hide the date pipe separator
 * @param {boolean} props.hideLede - Show or hide the lede
 * @param {boolean} [props.hideLedeCaption] - hide lede image caption
 * @param {boolean} [props.hideSocialIcons] - Optional hide social icons on desktop.
 * @param {boolean} [props.hideSocialIconsOnMobile] - Optional hide social icons on mobile.
 * @param {boolean} [props.hideRubric] - Optional hide rubric in title block.
 * @param {boolean} [props.hideTopDisclaimerOnMobile] - Optional hide top dislclaimer on mobile.
 * @param {boolean} [props.hidePublishDate] - Show or hide the publishDate
 * @param {boolean} [props.hideTopRating] - Optional paramter to add a class that hides top rating.
 * @param {string} [props.interactiveOverride] - Optional interactive element to override the lede image asset
 * @param {boolean} [props.isBusinessContentHeader] - Optional flag for business content header variation
 * @param {boolean} [props.isFullBleedVideo] - By default hide Full bleed video
 * @param {boolean} [props.isLiveStoryType] - Optional Flag to mark Live Story
 * @param {boolean} [props.isImagePositionBottomInSmallScreen] - To make image at bottom position for small screens
 * @param {boolean} [props.isStoryLive] - Optional Flag to mark live story is live
 * @param {string} [props.issueDate] - Optional issue date
 * @param {string} [props.issueLink] - Optional link for this article's issue
 * @param {object} [props.itemsCount] - Optional, number of items announced.
 * @param {object} [props.lede] - Optional lede image asset
 * @param {string} [props.ledeSocialIcons] - Optional array of social icons for the top image
 * @param {string} [props.modifiedDate] - Optional modified date of the content
 * @param {object} [props.metadataVideo] - Optional CNE video metadata
 * @param {string} [props.offers] - Optional params from ReviewMetadata
 * @param {string} [props.persistentAsideAlign] - Optional defines the persistentAside align
 * @param {string} [props.price] - Optional pricing
 * @param {string} props.publishDate - Publish Date.
 * @param {object} [props.rating] - Optional rating.
 * @param {object} [props.reviewRating] - Optional params from ReviewMetadata
 * @param {object} [props.rubric] - Optional rubric.
 * @param {string} [props.rubricVariation] - The name of the variation of Rubric to use
 * @param {bool} [props.shouldAlignCenterWhenNoCaption] - should apply align center in mobile if caption is not present
 * @param {bool} [props.shouldDisplayPremiereDate] - Optional, used to display premiere date
 * @param {bool} [props.shouldEnableNativeShareOnDesktop] - Optional
 * @param {boolean} [props.shouldShortenHeadline] - Optional shorten headline. Actual only for left aligned headline.
 * @param {boolean} props.showBreadCrumb - Optional show the bread crumd.
 * @param {boolean} [props.showContentDivider] - Optional
 * @param {boolean} [props.showContributorImage] - Optional show the contributor image.
 * @param {boolean} [props.showContributorImageOnMobile] - Optional show/hide the contributor image only on mobile.
 * @param {boolean} [props.showFullWidthLeadImage] - Optional
 * @param {boolean} [props.showSponsorBlock] - Optional to show sponsorContents
 * @param {boolean} [props.showHeaderButton] - Optional
 * @param {boolean} props.showIssueCopyByDate - Optional show the text "Issue" by the issue date.
 * @param {string} [props.slideShowVariation] - Optional string used to set variation of slideshow
 * @param {object} [props.socialDescription] - Optional social description to be used with the native share button.
 * @param {Array} [props.socialIconsToHide] - list of social icons
 * @param {object} [props.socialMedia] - Optional Social Icon Links to share article.
 * @param {object} [props.socialTitle] - Optional social title to be used with the native share button.
 * @param {object} [props.stickySocialAnchorBottom] - Optional Sticky Social Icon bottom anchor selectors.
 * @param {object} [props.stickySocialAnchorTop] - Optional Sticky Social Icon top anchor selectors.
 * @param {string} [props.theme] - Optional theme name
 * @param {object} [props.variations] - Variation properties used in rendering the component.
 * @param {string} [props.variations.assetPosition] - Optional
 * @param {string} [props.variations.contentAlign] - Optional
 * @param {string} [props.variations.contentPosition] - Optional
 * @param {string} [props.variations.contentStyle] - Optional
 * @param {string} [props.variations.copyWidth] - Optional
 * @param {boolean} props.variations.hasDivider - Flag to show ContentHeader Divider
 * @param {boolean} [props.variations.hasAccreditationExtraSpacing] - To add/remove the ContentHeaderAccreditation extra margin top
 * @param {boolean} [props.variations.hasAccreditationSocialBottomMargin] - To add/remove ContentHeaderAccreditation margin bottom
 * @param {boolean} [props.variations.hasAccreditationSocialTopMargin] - Tp add/remove
 * @param {boolean} [props.variations.shouldRemoveBylineTopMargin] - To add/remove the ContentHeaderByline margin top ContentHeaderAccreditationSocialIcons top margin
 * @param {boolean} [props.variations.hasDekBottomMargin] - To add/remove ContentHeaderDek bottom margin
 * @param {boolean} [props.variations.hasExtraSpaceBetweenSeparator] - Optional
 * @param {boolean} [props.variations.hasInlinePublishDate] - Optional
 * @param {boolean} [props.variations.hasLedeLightbox] - Optional
 * @param {boolean} [props.variations.hasNoRowPadding] - Optional
 * @param {boolean} [props.variations.hasPublishDateBottomPadding] - to show extra bottom spacing to publish date
 * @param {boolean} [props.variations.hasTitleWrapperTopSpacing] - to reduce the top margin for the Content Header title
 * @param {boolean} [props.variations.hasXsNavSpacing] - Optional
 * @param {boolean} [props.variations.hideAccreditationBottomSpacing] - Flag to switch bottom padding for ContentHeaderAccreditation
 * @param {boolean} [props.variations.leadRailAnchor] - Optional
 * @param {string} [props.variations.ledeAlign] - Optional
 * @param {string} [props.variations.mediaWidth] - Optional
 * @param {string} [props.variations.publishDatePosition] - Optional
 * @param {boolean} [props.variations.hasReducedTitleTopMargin] - Remove title margin
 * @param {boolean} [props.variations.shouldRemoveContentHedWrapperTopSpacing] - Removed Wrapper top padding
 * @param {boolean} [props.variations.shouldReduceAccreditationPadding] - Reduce Top padding for ContentHeaderAccreditation
 * @param {bool} [props.variations.reducedSpacings] - Optional
 * @param {string} [props.venueAwards] - Optional string of awards
 * @param {bool} [props.hasInvertedCaption] - Optional
 * @param {object}  [props.sponsoredContentHeaderProps] - Optional sponsored text and logo details
 * @param {string}  [props.sponsorByline] - Optional sponsored byline text
 * @param {bool} [props.hasInvertedLedeBackground] - Optional
 * @param {bool} [props.showTextOverlayDek] - Optional
 * @param {object} props.externalLinks - Optional Listen podcast link
 * @param {string} props.podcastPagePrimaryCta - Primary Link to listen Podcast
 * @param {string} props.podcastPagePrimaryCtaLabel - Optional label for Primary Link to listen Podcast
 * @param {string} [props.signage] - Optional article signage
 * @param {bool} [props.shouldDisplaySignageInline] - Optional boolean to display signage, defaults to false
 * @param {bool} props.variations.shouldUseSmallLede - Optional use the small lede image
 * @param {bool} props.variations.showPodcastButton - Optional to show podcast listen now button
 * @param {boolean} [props.variations.hasDateExtraTopSpacing] - To add extra margin top to the content date
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 *
 * @returns {ReactElement} <header>
 */
// eslint-disable-next-line complexity
const ContentHeader = ({ additionalPhotos, authorsTitleBlockPosition = 'hidden', awards, business = {
    address: {},
    phone: '',
    email: '',
    socialMedia: [],
    link: ''
}, bylineVariation, captionStyle = 'default', captionWidth = 'standard', config = {
    adsConfig: {
        contentHeaderRubricName: undefined
    }
}, className, contentHeaderCategories, contentSponsorNames = [], contributorImage, contributors, ctaText, dangerousDek, dangerousHed, dividerType = 'both', showFullHeaderViewInMobile = false, externalLinks = [], hasDesktopTitleBlockDivider = false, hasLedeLightboxButton, hasLightbox = false, hasSlideshow = false, hasStaticPositionedAward = false, hasStickyBoxIndexPosition, hasStickySocialIcons = true, hideAdaptationByline = false, hideByLine = false, hideContributors = false, hideDangerousDek = false, hideRubric = false, hideSocialIcons = false, hideSocialIconsOnMobile = false, hideTopDisclaimerOnMobile, hideTopRating, hidePublishDate = false, interactiveOverride, isBusinessContentHeader, isLiveStoryType = false, isImagePositionBottomInSmallScreen, isStoryLive = false, issueDate, issueLink, lede, ledeSocialIcons, modifiedDate, offers, persistentAsideAlign = 'left', price, publishDate, rating, reviewRating, rubric, rubricVariation, itemsCount, hasContributorImageBackground = false, metadataVideo = {}, showContentDivider = false, showContributorImage = true, showContributorImageOnMobile = true, showSponsorBlock = false, showHeaderButton, signage, hideIssueDate, hideIssueDatePipeSeparator = false, hideLede = false, hideLedeCaption = false, hasDisabledCloseOnClickForLightbox, hasNarrowHeader = false, podcastPagePrimaryCta, podcastPagePrimaryCtaLabel, shouldDisplayPremiereDate = false, shouldDisplaySignageInline = false, shouldShortenHeadline = false, showFullWidthLeadImage = false, showIssueCopyByDate = false, showTextOverlayDek = false, slideShowVariation, socialIconsToHide = [], socialMedia, socialTitle, socialDescription, stickySocialAnchorBottom = {
    selector: '.page',
    edge: 'bottom'
}, stickySocialAnchorTop = {
    selector: "[data-testid='ContentHeaderContainer']",
    edge: 'bottom'
}, theme = 'standard', sponsoredContentHeaderProps, sponsorByline, variations = {
    assetPosition: 'bottom',
    contentAlign: 'center',
    contentPosition: 'above',
    hasDivider: false,
    hasExtraSpaceBetweenSeparator: false,
    hasInlinePublishDate: false,
    hasLedeLightbox: false,
    hasNoRowPadding: false,
    hasXsNavSpacing: false,
    leadRailAnchor: false,
    ledeAlign: 'default',
    publishDatePosition: 'bottom',
    reducedSpacings: false,
    shouldUseSmallLede: false,
    showPodcastButton: false
}, hasNativeShareButton = false, shouldEnableNativeShareOnDesktop = false, showBreadCrumb, venueAwards, hasInvertedCaption = false, hasInvertedLedeBackground = true, variationName, isFullBleedVideo = false, cneVideoEmbedProps = {
    additionalEmbedParams: {},
    dangerousCaption: '',
    isStickyType: false,
    scriptUrl: '',
    shouldAutoplay: true,
    shouldHaveTeaser: true,
    shouldMute: true,
    variationsVideo: {},
    variationVideoName: {}
}, shouldAlignCenterWhenNoCaption = false }) => {
    const { assetPosition, copyWidth, contentAlign, contentPosition, contentStyle, hasAccreditationExtraSpacing, hasAccreditationSocialBottomMargin, hasAccreditationSocialTopMargin, shouldRemoveBylineTopMargin, hasDekBottomMargin, hasExtraSpaceBetweenSeparator = false, hasLedeLightbox, hasNoRowPadding, hasPublishDateBottomPadding, hasInlinePublishDate, hasReducedTitleTopMargin, hasTitleWrapperTopSpacing, shouldRemoveContentHedWrapperTopSpacing, hasXsNavSpacing, hideAccreditationBottomSpacing, ledeAlign, leadRailAnchor, mediaWidth, publishDatePosition = 'bottom', reducedSpacings = false, hasDivider, showPodcastButton, shouldUseSmallLede, shouldReduceAccreditationPadding, hasDateExtraTopSpacing } = variations;
    const { additionalEmbedParams, dangerousCaption, isStickyType, scriptUrl, shouldAutoplay, shouldHaveTeaser, shouldMute, variationsVideo, variationVideoName } = cneVideoEmbedProps;
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ContentHeader',
            variation: variationName
        });
    }, [variationName]);
    if (rubric) {
        rubric.name = config.adsConfig?.contentHeaderRubricName || rubric.name;
    }
    const isMiddleImage = assetPosition === 'middle';
    const inlinePublishDate = hasSingleAuthor(contributors) && hasInlinePublishDate;
    const isLedeOverride = getOverrideBehaviour(interactiveOverride) === 'storyimage';
    const themedBylineVariation = getThemedBylineVariation({
        bylineVariation,
        theme
    });
    const titleBlock = (React.createElement(TitleBlock, { authorsPosition: authorsTitleBlockPosition, business: business, bylineVariation: themedBylineVariation, contentHeaderCategories: contentHeaderCategories, contentSponsorNames: contentSponsorNames, contributors: contributors, dangerousHed: dangerousHed, dividerType: dividerType, externalLinks: externalLinks, hasContentDivider: showContentDivider, hasDesktopTitleBlockDivider: hasDesktopTitleBlockDivider, hasDivider: hasDivider, hasNoRowPadding: hasNoRowPadding, hasExtraSpaceBetweenSeparator: hasExtraSpaceBetweenSeparator, hideAdaptationByline: hideAdaptationByline, hideIssueDate: hideIssueDate, hideIssueDatePipeSeparator: hideIssueDatePipeSeparator, hideRubric: hideRubric, hidePublishDate: hidePublishDate, isBusinessContentHeader: isBusinessContentHeader, isLiveStoryType: isLiveStoryType, isStoryLive: isStoryLive, issueDate: issueDate, issueLink: issueLink, itemsCount: itemsCount, metadataVideo: metadataVideo, modifiedDate: modifiedDate, podcastPagePrimaryCta: podcastPagePrimaryCta, podcastPagePrimaryCtaLabel: podcastPagePrimaryCtaLabel, price: price, publishDate: publishDate, publishDatePosition: publishDatePosition, rubric: rubric, rubricVariation: rubricVariation, showIssueCopyByDate: showIssueCopyByDate, showPodcastButton: showPodcastButton, theme: theme }));
    let LeadComponent = LeadAsset;
    if (hasLightbox && hasLedeLightbox) {
        LeadComponent = additionalPhotos
            ? withLightbox({
                Component: LeadAsset,
                slides: additionalPhotos,
                hasSlideshow,
                slideShowVariation,
                hasDisabledCloseOnClickForLightbox
            })
            : withLightbox({ Component: LeadAsset, slides: [lede] });
    }
    const { showNativeShareButton, pageUrl } = useNativeShare(hasNativeShareButton, shouldEnableNativeShareOnDesktop);
    const shouldShowAuthorsInTitleBlock = authorsTitleBlockPosition !== 'hidden';
    const shouldBylineContentStacked = contributors && Object.keys(contributors).length > 1;
    const BUTTON_POSITION = 'content-header';
    const bylinesBlock = contributors && !hideContributors && (React.createElement(ContentHeaderBylines, { contributors: contributors, bylineVariation: themedBylineVariation, isCompact: false, inlinePublishDate: inlinePublishDate }));
    const dateTimeProps = modifiedDate && { datetime: modifiedDate };
    const publishDateBlock = !hidePublishDate && (React.createElement(ContentHeaderPublishDate, { inlinePublishDate: inlinePublishDate, "data-testid": "ContentHeaderPublishDate", mediaWidth: mediaWidth, contentAlign: contentAlign, ...(showFullHeaderViewInMobile && {
            hasDateExtraTopSpacing,
            hasPublishDateBottomPadding: hasPublishDateBottomPadding &&
                (!socialMedia || hideSocialIcons || hideSocialIconsOnMobile)
        }), ...dateTimeProps }, publishDate));
    const AccreditationWrapper = (React.createElement(React.Fragment, null,
        React.createElement(Accreditation, { bylinesBlock: bylinesBlock, contributorImage: contributorImage, dangerousDek: dangerousDek, hideDangerousDek: hideDangerousDek, dividerType: dividerType, hasContributorImageBackground: hasContributorImageBackground, hasDesktopTitleBlockDivider: hasDesktopTitleBlockDivider, hasLede: !!lede, hideTopRating: hideTopRating, hasStickySocialIcons: hasStickySocialIcons, hideByLine: hideByLine, hideSocialIcons: hideSocialIcons, hideSocialIconsOnMobile: hideSocialIconsOnMobile, isBusinessContentHeader: isBusinessContentHeader, isMiddleImage: isMiddleImage, isSponsoredContent: contentSponsorNames.length > 0, isLiveStoryType: isLiveStoryType, isStoryLive: isStoryLive, metadataVideo: metadataVideo, publishDateBlock: publishDateBlock, publishDatePosition: publishDatePosition, rating: rating, reviewRating: reviewRating, shouldDisplayPremiereDate: shouldDisplayPremiereDate, shouldDisplaySignageInline: shouldDisplaySignageInline, shouldShowAuthorsInTitleBlock: shouldShowAuthorsInTitleBlock, showContributorImage: showContributorImage, showSponsorBlock: showSponsorBlock, signage: signage, socialIconsToHide: socialIconsToHide, socialMedia: socialMedia, socialTitle: socialTitle, socialDescription: socialDescription, sponsorByline: sponsorByline, sponsoredContentHeaderProps: sponsoredContentHeaderProps, pageUrl: pageUrl, showNativeShareButton: showNativeShareButton, venueAwards: venueAwards, mediaWidth: mediaWidth, contentAlign: contentAlign, contentPosition: contentPosition, theme: theme, shouldRemoveBylineTopMargin: showFullHeaderViewInMobile && shouldRemoveBylineTopMargin }),
        React.createElement(ContentHeaderOffersData, { ctaText: ctaText, hideTopDisclaimerOnMobile: hideTopDisclaimerOnMobile, offers: offers, showHeaderButton: showHeaderButton, buttonPosition: BUTTON_POSITION })));
    const isLedeTextCenterForMobile = shouldAlignCenterWhenNoCaption && !lede?.caption;
    return (React.createElement(ContentHeaderWrapper, { className: classnames('content-header', {
            [className]: className
        }), isLiveStoryType: isLiveStoryType, publishDatePosition: publishDatePosition, hasXsNavSpacing: hasXsNavSpacing, contentAlign: contentAlign, assetPosition: assetPosition, shouldShowAuthorsInTitleBlock: shouldShowAuthorsInTitleBlock, captionStyle: captionStyle, copyWidth: copyWidth, mediaWidth: mediaWidth, contentStyle: contentStyle, contentPosition: contentPosition, isBusinessContentHeader: isBusinessContentHeader, isLedeOverride: isLedeOverride, shouldShortenHeadline: shouldShortenHeadline, reducedSpacings: reducedSpacings, hasInvertedCaption: hasInvertedCaption, containerTheme: theme, shouldBylineContentStacked: shouldBylineContentStacked, hasExtraSpaceBetweenSeparator: hasExtraSpaceBetweenSeparator, hasLede: !!lede, hasNarrowHeader: hasNarrowHeader, showBreadCrumb: showBreadCrumb, showTextOverlayDek: showTextOverlayDek, ...(showFullHeaderViewInMobile && {
            hasAccreditationExtraSpacing,
            hasAccreditationSocialTopMargin,
            hasAccreditationSocialBottomMargin,
            hasDekBottomMargin,
            hideAccreditationBottomSpacing,
            hasLeadAssetTopSpacing: !hasPublishDateBottomPadding &&
                (hideDangerousDek || !dangerousDek || !isMiddleImage),
            hasTitleWrapperTopSpacing,
            shouldRemoveContentHedWrapperTopSpacing,
            hasReducedTitleTopMargin,
            shouldReduceAccreditationPadding
        }), isLedeTextCenterForMobile: isLedeTextCenterForMobile, showContributorImageOnMobile: showContributorImageOnMobile, isImagePositionBottomInSmallScreen: isImagePositionBottomInSmallScreen },
        React.createElement(ContentHeaderContainer, { containerTheme: theme, mediaWidth: mediaWidth, showFullWidthLeadImage: showFullWidthLeadImage, contentStyle: contentStyle, contentPosition: contentPosition, isFullBleedVideo: isFullBleedVideo, "data-testid": "ContentHeaderContainer" },
            !hideDangerousDek && dangerousDek && isMiddleImage && (React.createElement(ContentHeaderAccreditationBottom, null,
                React.createElement(ContentHeaderDek, { dangerouslySetInnerHTML: { __html: dangerousDek }, assetPosition: assetPosition, mediaWidth: mediaWidth, "data-testid": "ContentHeaderDek" }))),
            hasDivider && React.createElement(PodcastContentHeaderDivider, null),
            React.createElement(ContentHeaderHedAccreditationWrapper, { isBusinessContentHeader: isBusinessContentHeader },
                dangerousHed && titleBlock,
                AccreditationWrapper),
            isLedeOverride ? (React.createElement(ContentHeaderLeadOverride, { contentPosition: contentPosition, dangerouslySetInnerHTML: {
                    __html: interactiveOverride.markup
                } })) : (!isFullBleedVideo &&
                !hideLede &&
                lede && (React.createElement(ContentHeaderLeadAssetWrapper, { awards: awards, hasLightboxButton: hasLedeLightboxButton, hasStaticPositionedAward: hasStaticPositionedAward, hideLedeCaption: hideLedeCaption, hasDisabledCloseOnClickForLightbox: hasDisabledCloseOnClickForLightbox, lede: lede, captionWidth: captionWidth, shouldRenderRailAnchor: leadRailAnchor, shouldUseSmallLede: shouldUseSmallLede, socialIcons: ledeSocialIcons, mediaWidth: mediaWidth, containerTheme: theme, hasInvertedLedeBackground: hasInvertedLedeBackground, ledeAlign: ledeAlign, showFullWidthLeadImage: showFullWidthLeadImage, hasLeadAssetTopSpacing: showFullHeaderViewInMobile &&
                    !hasPublishDateBottomPadding &&
                    (hideDangerousDek || !dangerousDek || !isMiddleImage), isBusinessContentHeader: isBusinessContentHeader, shouldAlignCenterWhenNoCaption: shouldAlignCenterWhenNoCaption, as: LeadComponent, className: classnames({
                    [`lead-asset--width-${mediaWidth}`]: mediaWidth
                }) }))),
            isFullBleedVideo && (React.createElement(CNEVideoEmbed, { dangerousCaption: dangerousCaption, scriptUrl: scriptUrl, shouldAutoplay: shouldAutoplay, shouldMute: shouldMute, shouldHaveTeaser: shouldHaveTeaser, additionalEmbedParams: additionalEmbedParams, isStickyType: isStickyType, videoEmbedPosition: storyVideoPosition, variationName: variationVideoName, 
                // eslint-disable-next-line react/forbid-component-props
                variations: variationsVideo }))),
        !showNativeShareButton && hasStickySocialIcons && socialMedia && (React.createElement(ContentHeaderPersistentAside, { attributes: { shouldFadeOnMove: true }, align: persistentAsideAlign, anchorBottom: stickySocialAnchorBottom, anchorTop: stickySocialAnchorTop, hasStickyBoxIndexPosition: hasStickyBoxIndexPosition, fullWidthSelector: FULL_WIDTH_SELECTOR },
            React.createElement(ContentHeaderSocialIcons, { ...socialMedia, className: "social-icons--share" })))));
};
ContentHeader.propTypes = {
    additionalPhotos: PropTypes.array,
    authorsTitleBlockPosition: PropTypes.oneOf(['above', 'below', 'hidden']),
    awards: PropTypes.array,
    business: PropTypes.shape({
        address: PropTypes.object,
        phone: PropTypes.string,
        email: PropTypes.string,
        socialMedia: PropTypes.array
    }),
    bylineVariation: PropTypes.string,
    captionStyle: PropTypes.oneOf(['default', 'span-content-well']),
    captionWidth: PropTypes.oneOf(['standard', 'fullbleed']),
    className: PropTypes.string,
    cneVideoEmbedProps: PropTypes.shape({
        additionalEmbedParams: PropTypes.object,
        dangerousCaption: PropTypes.string,
        isStickyType: PropTypes.bool,
        scriptUrl: PropTypes.string,
        shouldAutoplay: PropTypes.bool,
        shouldHaveTeaser: PropTypes.bool,
        shouldMute: PropTypes.bool,
        variationsVideo: PropTypes.object,
        variationVideoName: PropTypes.object
    }),
    config: PropTypes.object,
    contentHeaderCategories: PropTypes.shape({
        title: PropTypes.string,
        tags: PropTypes.array
    }),
    contentSponsorNames: PropTypes.array,
    contributorImage: PropTypes.shape(ResponsiveAsset.propTypes),
    contributors: PropTypes.shape(Bylines.propTypes.contributors),
    ctaText: PropTypes.string,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    dividerType: PropTypes.oneOf(['both', 'bottom', 'top']),
    externalLinks: PropTypes.array,
    hasContributorImageBackground: PropTypes.bool,
    hasDesktopTitleBlockDivider: PropTypes.bool,
    hasDisabledCloseOnClickForLightbox: PropTypes.bool,
    hasInvertedCaption: PropTypes.bool,
    hasInvertedLedeBackground: PropTypes.bool,
    hasLedeLightboxButton: PropTypes.bool,
    hasLightbox: PropTypes.bool,
    hasNarrowHeader: PropTypes.bool,
    hasNativeShareButton: PropTypes.bool,
    hasSlideshow: PropTypes.bool,
    hasStaticPositionedAward: PropTypes.bool,
    hasStickyBoxIndexPosition: PropTypes.bool,
    hasStickySocialIcons: PropTypes.bool,
    hideAdaptationByline: PropTypes.bool,
    hideByLine: PropTypes.bool,
    hideContributors: PropTypes.bool,
    hideDangerousDek: PropTypes.bool,
    hideIssueDate: PropTypes.bool,
    hideIssueDatePipeSeparator: PropTypes.bool,
    hideLede: PropTypes.bool,
    hideLedeCaption: PropTypes.bool,
    hidePublishDate: PropTypes.bool,
    hideRubric: PropTypes.bool,
    hideSocialIcons: PropTypes.bool,
    hideSocialIconsOnMobile: PropTypes.bool,
    hideTopDisclaimerOnMobile: PropTypes.bool,
    hideTopRating: PropTypes.bool,
    interactiveOverride: PropTypes.shape({
        markup: PropTypes.string,
        behavior: PropTypes.string
    }),
    isBusinessContentHeader: PropTypes.bool,
    isFullBleedVideo: PropTypes.bool,
    isImagePositionBottomInSmallScreen: PropTypes.bool,
    isLiveStoryType: PropTypes.bool,
    isStoryLive: PropTypes.bool,
    issueDate: PropTypes.string,
    issueLink: PropTypes.string,
    itemsCount: PropTypes.shape(ItemsCount.propTypes),
    lede: PropTypes.oneOfType([
        PropTypes.shape(ResponsiveAsset.propTypes),
        PropTypes.shape(GalleryEmbed.propTypes),
        PropTypes.shape(CNEVideoEmbed.propTypes)
    ]),
    ledeSocialIcons: PropTypes.shape(SocialIcons.propTypes),
    metadataVideo: PropTypes.shape({
        isLive: PropTypes.bool,
        premiereDate: PropTypes.string,
        premiereGap: PropTypes.number,
        series: PropTypes.string,
        videoLength: PropTypes.number
    }),
    modifiedDate: PropTypes.string,
    offers: PropTypes.array,
    persistentAsideAlign: PropTypes.oneOf(['left', 'left-lead-asset']),
    podcastPagePrimaryCta: PropTypes.string,
    podcastPagePrimaryCtaLabel: PropTypes.string,
    price: PropTypes.string,
    publishDate: PropTypes.string.isRequired,
    rating: PropTypes.shape(Rating.propTypes),
    reviewRating: PropTypes.number,
    rubric: PropTypes.shape(Rubric.propTypes),
    rubricVariation: PropTypes.string,
    shouldAlignCenterWhenNoCaption: PropTypes.bool,
    shouldDisplayPremiereDate: PropTypes.bool,
    shouldDisplaySignageInline: PropTypes.bool,
    shouldEnableNativeShareOnDesktop: PropTypes.bool,
    shouldShortenHeadline: PropTypes.bool,
    showBreadCrumb: PropTypes.bool,
    showContentDivider: PropTypes.bool,
    showContributorImage: PropTypes.bool,
    showContributorImageOnMobile: PropTypes.bool,
    showFullHeaderViewInMobile: PropTypes.bool,
    showFullWidthLeadImage: PropTypes.bool,
    showHeaderButton: PropTypes.bool,
    showIssueCopyByDate: PropTypes.bool,
    showSponsorBlock: PropTypes.bool,
    showTextOverlayDek: PropTypes.bool,
    signage: PropTypes.string,
    slideShowVariation: PropTypes.string,
    socialDescription: PropTypes.string,
    socialIconsToHide: PropTypes.array,
    socialMedia: PropTypes.shape(SocialIcons.propTypes),
    socialTitle: PropTypes.string,
    sponsorByline: PropTypes.string,
    sponsoredContentHeaderProps: PropTypes.shape({
        campaignUrl: PropTypes.string,
        sponsorLogo: PropTypes.shape(ResponsiveAsset.propTypes),
        sponsorName: PropTypes.string
    }),
    stickySocialAnchorBottom: PersistentAside.propTypes.anchorBottom,
    stickySocialAnchorTop: PersistentAside.propTypes.anchorTop,
    theme: PropTypes.oneOf(['standard', 'inverted', 'special', 'live']),
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        assetPosition: PropTypes.oneOf(['bottom', 'middle']),
        contentAlign: PropTypes.oneOf(['center', 'left']),
        contentPosition: PropTypes.oneOf(['above', 'below', 'start', 'end']),
        contentStyle: PropTypes.oneOf(['card', 'dense-card', 'item']),
        copyWidth: PropTypes.oneOf(['grid', 'fullbleed']),
        hasDivider: PropTypes.bool,
        hasAccreditationExtraSpacing: PropTypes.bool,
        hasAccreditationSocialBottomMargin: PropTypes.bool,
        hasAccreditationSocialTopMargin: PropTypes.bool,
        hasTitleWrapperTopSpacing: PropTypes.bool,
        shouldReduceAccreditationPadding: PropTypes.bool,
        shouldRemoveBylineTopMargin: PropTypes.bool,
        hasDateExtraTopSpacing: PropTypes.bool,
        hasDekBottomMargin: PropTypes.bool,
        hasExtraSpaceBetweenSeparator: PropTypes.bool,
        hasInlinePublishDate: PropTypes.bool,
        hasLedeLightbox: PropTypes.bool,
        hasNoRowPadding: PropTypes.bool,
        hasPublishDateBottomPadding: PropTypes.bool,
        hasReducedTitleTopMargin: PropTypes.bool,
        hasXsNavSpacing: PropTypes.bool,
        hideAccreditationBottomSpacing: PropTypes.bool,
        leadRailAnchor: PropTypes.bool,
        ledeAlign: PropTypes.oneOf(['default', 'center']),
        mediaWidth: PropTypes.oneOf(['small', 'smallrule', 'grid', 'fullbleed']),
        publishDatePosition: PropTypes.oneOf(['top', 'bottom']),
        reducedSpacings: PropTypes.bool,
        shouldRemoveContentHedWrapperTopSpacing: PropTypes.bool,
        shouldUseSmallLede: PropTypes.bool,
        showPodcastButton: PropTypes.bool
    }),
    venueAwards: PropTypes.string
};
ContentHeader.displayName = 'ContentHeader';
module.exports = ContentHeader;
//# sourceMappingURL=ContentHeader.js.map

/***/ }),

/***/ 88317:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { applyGridSpacing, cssVariablesGrid } = __webpack_require__(1123);
const { calculateSpacing, getColorToken, getLinkStyles, minScreen, maxScreen } = __webpack_require__(26865);
const { roundImageBase } = __webpack_require__(52027);
const { BaseText } = __webpack_require__(76955);
const { BREAKPOINTS, INTERACTIVE } = __webpack_require__(96472);
const { maxThresholds } = __webpack_require__(99906);
const { BylinePreamble, BylineName } = __webpack_require__(74423);
const { CaptionText, CaptionCredit } = __webpack_require__(38860);
const { RubricLink } = __webpack_require__(6613);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const { ResponsiveClipWrapper } = __webpack_require__(91783);
const OffersData = __webpack_require__(19762);
const { SpanWrapper } = __webpack_require__(18117);
const Bylines = __webpack_require__(52540);
const { ResponsiveCartoonCaption } = __webpack_require__(77527);
const { SocialIconsList, SocialIconsWrapper } = __webpack_require__(51000);
const PersistentAside = __webpack_require__(40855);
const { ContentHeaderLeadAsset, ContentHeaderResponsiveAsset, ContentHeaderLeadAssetContent, ContentHeaderLeadAssetCaption, ContentHeaderLeadAssetContentMedia, ContentHeaderLeadRailAnchor, ContentHeaderLeadContentFullWidth } = __webpack_require__(5239);
const { ContentHeaderContentDivider, ContentHeaderItemCount, ContentHeaderHed, ContentHeaderTitleBlockWrapper, ContentHeaderTitleBlockPublishDate, AddressBlockWrapper, HeaderSocialInformation } = __webpack_require__(1757);
const { ContentHeaderRubricBlock, ContentHeaderRubricContainer, ContentHeaderRubricIssueDate } = __webpack_require__(21608);
const { ContentHeaderByline, ContentHeaderAccreditationSocialIcons, ContentHeaderContributorImage, ContentHeaderNativeShareButton, ContentHeaderBylineContent, ContentHeaderAccreditation, ContentHeaderDek, ContentHeaderSignageLabel, SummaryPremiereWrapper } = __webpack_require__(80607);
const { getPublishDateCommonStyle, defaultGridStyle, defaultColorPaddingStyle, rowWithCommonStyle } = __webpack_require__(60254);
const colorsConsumptionLeadStandardContexTertiary = 'colors.consumption.lead.standard.context-tertiary';
const colorsConsumptionLeadInvertedContextTertiary = 'colors.consumption.lead.inverted.context-tertiary';
const colorsConsumptionLeadSpecialContextSignature = 'colors.consumption.lead.special.context-signature';
const colorsConsumptionLeadSpecialContextTertiary = 'colors.consumption.lead.special.context-tertiary';
const allGridChildStyle = `
  > * {
    grid-column: 1/-1;
  }
`;
const ContentHeaderPersistentAside = styled(PersistentAside).withConfig({
    displayName: 'ContentHeaderPersistentAside'
}) ``;
// 1. overwrite text decoration link styles see token: layouts_to_refactor.interactive.links
const ContentHeaderPublishDate = styled(BaseText)
    .withConfig({
    displayName: 'ContentHeaderPublishDate'
})
    .attrs(({ datetime }) => ({ dateTime: datetime })) `
  ${({ theme }) => getPublishDateCommonStyle(theme)};

  ${({ inlinePublishDate }) => inlinePublishDate &&
    `
    & {
      float: left;
      padding-top: ${calculateSpacing(0.5)};
      padding-left: 10px;
      line-height: 1.7;
    }
  `};

  ${({ mediaWidth, contentAlign }) => mediaWidth === 'smallrule' &&
    `
    float: left;
    ${contentAlign === 'center' && 'float: none;'};
  `};

  ${({ hasDateExtraTopSpacing }) => hasDateExtraTopSpacing &&
    `& {
        padding-top: ${calculateSpacing(1)};
      }
    `}

  ${({ hasPublishDateBottomPadding }) => hasPublishDateBottomPadding &&
    `
      ${maxScreen(`${maxThresholds.lg}px`)} {
        padding-bottom: ${calculateSpacing(4)};
      }
    `}
`;
ContentHeaderPublishDate.defaultProps = {
    as: 'time',
    typeIdentity: 'typography.definitions.globalEditorial.context-tertiary'
};
const getPublishDatePositionStyle = (hasExtraSpaceBetweenSeparator) => `
  ${ContentHeaderTitleBlockPublishDate} {
    &:not(:first-child) {
      &::before {
        margin: 0 ${calculateSpacing(hasExtraSpaceBetweenSeparator ? 1 : 0.5)};
        content: '|';
      }
    }
  }
`;
const hasXsNavSpacingStyle = `
  padding-top: 25px;
  @media (min-width: ${BREAKPOINTS.xl}) {
    padding-top: 25px;
  }
`;
const ContentHeaderBylines = styled(Bylines).withConfig({
    displayName: 'ContentHeaderBylines'
}) `
  ${({ inlinePublishDate }) => inlinePublishDate &&
    `
    float: left;
    min-width: 5%;
  `}
`;
const getContainerThemeBasedStyle = (containerTheme, theme) => {
    if (containerTheme === 'inverted') {
        return css `
      background-color: ${getColorToken('colors.consumption.lead.inverted.background')};

      .fixed-header-large-logo-nav-variation & {
        margin-top: ${calculateSpacing(-14)};
        padding-top: ${calculateSpacing(14)};
      }

      ${ContentHeaderRubricContainer} {
        color: ${getColorToken('colors.consumption.lead.inverted.context-signature')};

        ${RubricLink} {
          ${getLinkStyles(theme, 'colors.consumption.lead.inverted.link', 'colors.consumption.lead.inverted.link-hover', 'global')};
        }
      }

      ${ContentHeaderRubricIssueDate} {
        color: ${getColorToken(colorsConsumptionLeadInvertedContextTertiary)};

        ${RubricLink} {
          ${getLinkStyles(theme, colorsConsumptionLeadInvertedContextTertiary, colorsConsumptionLeadInvertedContextTertiary, 'global')};
        }
      }

      ${ContentHeaderHed} {
        color: ${getColorToken('colors.consumption.lead.inverted.heading')};

        &:hover {
          color: ${getColorToken('colors.consumption.lead.inverted.heading')};
        }
      }

      ${ContentHeaderDek} {
        color: ${getColorToken('colors.consumption.lead.inverted.description')};

        a {
          ${getLinkStyles(theme, 'colors.consumption.lead.inverted.link', 'colors.consumption.lead.inverted.link-hover', 'global')};
          transition: color ${INTERACTIVE.timingLinkDefault} ease;
        }

        &:hover {
          color: ${getColorToken('colors.consumption.lead.inverted.description')};
        }
      }

      ${ContentHeaderSignageLabel} {
        color: ${getColorToken('colors.consumption.lead.inverted.description')};

        &:hover {
          color: ${getColorToken('colors.consumption.lead.inverted.description')};
        }
      }

      ${ContentHeaderBylines} > *,
      ${BylinePreamble} {
        color: ${getColorToken('colors.consumption.lead.inverted.accreditation')};

        a {
          ${getLinkStyles(theme, 'colors.consumption.lead.inverted.link', 'colors.consumption.lead.inverted.link-hover', 'global')};
          transition: color ${INTERACTIVE.timingLinkDefault} ease;
        }
      }

      ${ContentHeaderByline} ${SpanWrapper} {
        display: none;
      }

      ${ContentHeaderPublishDate},${ContentHeaderTitleBlockPublishDate} {
        color: ${getColorToken(colorsConsumptionLeadInvertedContextTertiary)};

        &:hover {
          color: ${getColorToken(colorsConsumptionLeadInvertedContextTertiary)};
        }
      }

      .social-icons__list-item--standard {
        .icon path {
          fill: ${getColorToken('colors.interactive.base.white')};
        }

        .social-icons__link--bookmark {
          background: ${getColorToken('colors.interactive.base.dark')};

          &:hover {
            .icon-bookmark.icon path {
              fill: ${getColorToken('colors.interactive.base.white')};
            }
          }

          .icon-bookmark-fill,
          .icon-bookmark-stroke {
            fill: ${getColorToken('colors.interactive.base.white')};
          }

          @media (min-width: ${BREAKPOINTS.md}) {
            &:hover {
              background: ${getColorToken('colors.interactive.base.brand-primary')};
            }
          }
        }

        .social-icons__link--bookmarkactivated {
          background: ${getColorToken('colors.interactive.base.brand-primary')};

          .icon-bookmark-fill,
          .icon-bookmark-stroke {
            fill: ${getColorToken('colors.interactive.base.white')};
          }

          @media (min-width: ${BREAKPOINTS.md}) {
            &:hover {
              background: ${getColorToken('colors.interactive.base.white')};
            }
          }
        }
      }

      .social-icons__list-item--bookmark,
      .social-icons__list-item--bookmarkactivated {
        @media (min-width: 0) and (max-width: ${BREAKPOINTS.md}) {
          margin-top: ${calculateSpacing(0.25)};
        }
      }

      .bylines--inlined-with-bg {
        .bylines__byline {
          ${BylineName} {
            background-color: ${getColorToken('colors.consumption.lead.inverted.context-signature')};
            color: ${getColorToken('colors.consumption.lead.inverted.context-texture')};

            a {
              ${getLinkStyles(theme, 'colors.consumption.lead.inverted.context-texture', null, 'global')};
            }
          }
        }
      }
    `;
    }
    else if (containerTheme === 'special') {
        return css `
      background-color: ${getColorToken('colors.consumption.lead.special.background')};

      ${ContentHeaderRubricContainer} {
        color: ${getColorToken(colorsConsumptionLeadSpecialContextSignature)};

        ${RubricLink} {
          ${getLinkStyles(theme, colorsConsumptionLeadSpecialContextSignature, colorsConsumptionLeadSpecialContextSignature, 'global')};
        }
      }

      ${ContentHeaderRubricIssueDate} {
        color: ${getColorToken(colorsConsumptionLeadSpecialContextTertiary)};

        ${RubricLink} {
          ${getLinkStyles(theme, colorsConsumptionLeadSpecialContextTertiary, colorsConsumptionLeadSpecialContextTertiary, 'global')};
        }
      }

      ${ContentHeaderHed} {
        color: ${getColorToken('colors.consumption.lead.special.heading')};

        &:hover {
          color: ${getColorToken('colors.consumption.lead.special.heading')};
        }
      }

      ${ContentHeaderDek} {
        color: ${getColorToken('colors.consumption.lead.special.accreditation')};

        &:hover {
          color: ${getColorToken('colors.consumption.lead.special.accreditation')};
        }
      }

      ${ContentHeaderBylines} > * {
        color: ${getColorToken('colors.consumption.lead.special.accreditation')};

        a {
          ${getLinkStyles(theme, 'colors.consumption.lead.special.link', 'colors.consumption.lead.special.link-hover', 'global')};
          transition: color ${INTERACTIVE.timingLinkDefault} ease;
        }
      }

      ${ContentHeaderByline} ${SpanWrapper} {
        display: none;
      }

      ${ContentHeaderPublishDate},${ContentHeaderTitleBlockPublishDate} {
        color: ${getColorToken(colorsConsumptionLeadSpecialContextTertiary)};

        &:hover {
          color: ${getColorToken(colorsConsumptionLeadSpecialContextTertiary)};
        }
      }
    `;
    }
    return '';
};
const getContainerThemeStyle = (contentPosition, containerTheme) => {
    if (containerTheme === 'standard') {
        return css `
      ${ContentHeaderTitleBlockWrapper},
      ${ContentHeaderAccreditation} {
        background-color: ${getColorToken('colors.consumption.lead.standard.background')};
      }

      ${contentPosition === 'below' &&
            `
        ${ContentHeaderLeadAssetCaption} {
          background-color: ${getColorToken('colors.consumption.lead.standard.background')};
        }
      `};
    `;
    }
    else if (containerTheme === 'inverted') {
        return css `
      ${ContentHeaderTitleBlockWrapper},
      ${ContentHeaderAccreditation} {
        background-color: ${getColorToken('colors.consumption.lead.inverted.background')};
      }

      ${contentPosition === 'below' &&
            `
        ${ContentHeaderLeadAssetCaption} {
          background-color: ${getColorToken('colors.consumption.lead.inverted.background')};
        }
      `};
    `;
    }
    return '';
};
// 1. css-grid: 3 columns. 2 on both ends (label: full), 1 in center (label: main)
const ContentHeaderContainer = styled.div.withConfig({
    displayName: 'ContentHeaderContainer'
}) `
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [main-start] minmax(0, ${BREAKPOINTS.xxl}) [main-end]
    minmax(0, 1fr) [full-end]; /* 1 */
  overflow-x: hidden;
  width: 100%;
  ${({ containerTheme, theme }) => getContainerThemeBasedStyle(containerTheme, theme)}

  ${({ isFullBleedVideo, mediaWidth }) => mediaWidth === 'fullbleed' && isFullBleedVideo && `display: block`} 

  ${({ mediaWidth, showFullWidthLeadImage }) => mediaWidth === 'fullbleed' &&
    showFullWidthLeadImage &&
    `
    grid-template-columns:
    [full-start] minmax(0, 1fr)
    [main-start] minmax(0, 2400px) [main-end]
    minmax(0, 1fr) [full-end];

    ${ContentHeaderLeadAssetContent} {
      max-width: 2400px;
      ${ContentHeaderLeadAssetContentMedia} {
        ${ContentHeaderResponsiveAsset} ${ResponsiveImageContainer} {
          width: 100%;
          @media (min-width: ${BREAKPOINTS.xl}) {
            max-height: 1800px;
          }
        }
      }
    }
  `}

  ${({ contentStyle, contentPosition, containerTheme }) => contentStyle === 'card' &&
    getContainerThemeStyle(contentPosition, containerTheme)};
`;
const PodcastContentHeaderDivider = styled.div.withConfig({
    displayName: 'PodcastContentHeaderDivider'
}) `
  ${defaultGridStyle}

  && {
    ${defaultColorPaddingStyle}
  }

  > * {
    grid-column: 1/-1;
  }
  ${({ theme }) => ` @media (min-width: ${BREAKPOINTS.sm}) {
        &::after{
          display: block;
          grid-column: 1/-1;
          border: 0;
          border-bottom: 1px solid ${getColorToken(theme, 'colors.consumption.lead.standard.divider')};
          padding-bottom: ${calculateSpacing(2)};
          width: 100%;
          height: 0;
          content: '';
        }
      ${rowWithCommonStyle}
      &::after {
      @media (min-width: ${BREAKPOINTS.sm}) and (max-width: ${BREAKPOINTS.md}) {
      display: block;
      }
    `}
`;
const getContentAlignStyle = (contentAlign, mediaWidth, contentPosition, hasNarrowHeader, reducedSpacings, shouldShortenHeadline, shouldShowAuthorsInTitleBlock, isLedeTextCenterForMobile) => {
    if (contentAlign === 'center') {
        return `
      text-align: center;
      ${ContentHeaderContentDivider} {
        justify-self: center;
      }
    `;
    }
    else if (contentAlign === 'left') {
        return `
      [class$='-byline']:last-of-type {
        margin-bottom: ${calculateSpacing(1)};
      }
    
      ${ContentHeaderItemCount} {
        margin-top: ${calculateSpacing(2)};
      }
    
      ${ContentHeaderAccreditationSocialIcons} {
        margin-top: ${calculateSpacing(2)};
        ${SocialIconsList} {
          justify-content: left;
        }
      }
    
      &,* {
        text-align: left;
      }

      ${ContentHeaderHed} {
        text-align: left;
      }
    
      .badge ul li {
        text-align: center;
      }
    
      ${ContentHeaderContainer} > * {
        align-items: flex-start;
        justify-items: flex-start;
      }
    
      [class$='-byline'] {
        text-align: left;
      }

      ${ContentHeaderByline} {
        @media (min-width: ${BREAKPOINTS.xl}) {
          display: flex;
          align-items: center;
          width: 100%;
        }
      }
    
      ${mediaWidth !== 'smallrule' &&
            `
        ${ContentHeaderByline} {
          ${SpanWrapper} {
            margin-right: ${calculateSpacing(3)};
          }
        }
      `};
    
      ${ContentHeaderContributorImage},
      ${ContentHeaderBylineContent} {
        flex-basis: content;
      }
    
      ${ContentHeaderDek},
      ${ContentHeaderPublishDate},
      ${ContentHeaderTitleBlockPublishDate} {
        text-align: left;
      }

      ${ContentHeaderBylineContent} {
        flex: auto;
        padding-top: 0;
      }
    
      ${hasNarrowHeader
            ? `
      @media (min-width: ${BREAKPOINTS.md}) {
        ${ContentHeaderHed},
        ${ContentHeaderSignageLabel},
        ${ContentHeaderRubricBlock},
        ${SummaryPremiereWrapper},
        ${ContentHeaderDek},
        ${SocialIconsWrapper} {
          grid-column: 3 / span 8;
        }
      }
    `
            : `@media (min-width: ${BREAKPOINTS.lg}) {
      ${ContentHeaderHed},
      ${ContentHeaderDek} {
        grid-column: 1 / span 10;
      }
    }`}
      
    
      // With props.authorsTitleBlockPosition: 'above': headline should span 12 columns for all variations.
      ${shouldShowAuthorsInTitleBlock &&
            `
        @media (min-width: ${BREAKPOINTS.lg}) {
          ${ContentHeaderHed},
          ${ContentHeaderDek} {
            grid-column: 1 / span 12;
          }
        }
      `};
      
      // With props.shouldShortenHeadline: headline should span 8 columns. Actual only for left aligned headlines.
      ${shouldShortenHeadline &&
            `
        @media (min-width: ${BREAKPOINTS.lg}) {
          ${ContentHeaderHed} {
            grid-column: 1 / span 8;
          }
        }
      `};
    
      // Variations.TextAboveLeftSmall: Hide bottom border and align social links on mobile
      ${contentPosition === 'above' &&
            `
        &&{
        ${ContentHeaderAccreditation} {
          padding-top: ${calculateSpacing(4)};
          @media (min-width: 0) and (max-width: ${BREAKPOINTS.sm}) {
            &::after {
              display: none;
            }
          }
        }
      }
      `};
    
      // Variations.SubjectFocus: More dense spacing
      ${reducedSpacings &&
            `
        && {
          ${ContentHeaderAccreditation} {
            padding-top: ${calculateSpacing(3)};
            padding-bottom: ${calculateSpacing(3)};
          }
        }
    
        ${ContentHeaderHed} {
          margin-top: ${calculateSpacing(3)};
        }
    
        ${ContentHeaderAccreditationSocialIcons} {
          margin-top: ${calculateSpacing(3)};
        }
      `};

      && {
        ${ContentHeaderLeadAssetCaption},
        ${CaptionCredit} {
          text-align: left;
          
          ${isLedeTextCenterForMobile &&
            `
              ${maxScreen(`${maxThresholds.md}px`)} {
                  text-align: center;
              }
            `}
        }
      }
    `;
    }
    return `&& {
        ${ContentHeaderLeadAssetCaption},
        ${CaptionCredit} {
          ${maxScreen(`${maxThresholds.md}px`)} {
            ${isLedeTextCenterForMobile &&
        `
                text-align: center;
              `}
          }
        }
      }`;
};
const getLeadAssetWrapperStyle = (mediaWidth, ledeAlign) => {
    if (mediaWidth === 'small') {
        return `
      @media (min-width: ${BREAKPOINTS.lg}) and (max-width: 1190px) {
        grid-template-columns: repeat(8, 1fr) minmax(300px, 4fr);
      }
    
      @media (min-width: ${BREAKPOINTS.lg}) {
        .grid-layout__aside {
          grid-column: 9/-1;
        }
      }
      @media (min-width: ${BREAKPOINTS.xl}) and (max-width: 1464px) {
        grid-template-columns: repeat(12, 1fr);
      }
    `;
    }
    else if (mediaWidth === 'smallrule') {
        // 1. lead asset uses only 6 columns, align persistent asides to top edge
        return `    
      ${ContentHeaderLeadRailAnchor} {
        top: 0; // 1
        @media (min-width: ${BREAKPOINTS.xl}) {
          margin-top: ${calculateSpacing(2)};
        }
      }

      ${ledeAlign === 'center' &&
            `
        &&&{
            @media (min-width: ${BREAKPOINTS.lg}) {
              grid-template-columns: repeat(12, 1fr);

              ${ContentHeaderLeadAssetContent} {
                grid-column: 4 / span 6;
              }
            }
        }
      `};
    `;
    }
    return '';
};
const ContentHeaderHedAccreditationWrapper = styled.div.withConfig({
    displayName: 'ContentHeaderHedAccreditationWrapper'
}) `
  display: grid;
  grid-column: main;
  grid-row: 1 / auto;
  width: 100%;
  ${ContentHeaderTitleBlockWrapper} {
    grid-column: 1/-1;
  }
  ${ContentHeaderAccreditation} {
    grid-column: 1/-1;
  }
  ${({ isBusinessContentHeader }) => isBusinessContentHeader &&
    `
    display: grid;
    grid-column: main;
    grid-row: 1 / auto;
    grid-template-columns: repeat(12, 1fr);
    ${cssVariablesGrid()}
    column-gap: var(--grid-gap);
    width: 100%;

    ${ContentHeaderTitleBlockWrapper} {
      grid-column: 1/-1;
      padding-right: 0;
      padding-left: 0;
    }
    ${ContentHeaderAccreditation} {
      grid-column: 1/-1;
    }

    @media (min-width: ${BREAKPOINTS.sm}) {
      grid-template-columns: repeat(4, 1fr);
      padding-top: ${calculateSpacing(5)};
      ${applyGridSpacing('padding')}

      ${ContentHeaderTitleBlockWrapper} {
        grid-column: 1/5;
        grid-template-columns: repeat(8, 1fr);
        padding-top: 0;
        gap: 0;
      }

      ${ContentHeaderHed} {
        margin-top: 0;
      }

      ${AddressBlockWrapper} {
        ${HeaderSocialInformation} {
          padding-top: 2.2rem;

          a {
            padding-right: 0;
          }
        }
      }
    }

    @media (min-width: ${BREAKPOINTS.md}) {
      grid-template-columns: repeat(12, 1fr);
      column-gap: var(--grid-gap);
      padding-top: ${calculateSpacing(6)};
      ${cssVariablesGrid()}
      ${applyGridSpacing('padding')}
      ${ContentHeaderTitleBlockWrapper} {
        grid-column: 1/9;
        grid-template-columns: repeat(8, 1fr);
        padding-top: 0;
        padding-bottom: 0;
        gap: 0;
      }
      ${ContentHeaderHed} {
        grid-column: 1/9;
      }
      ${ContentHeaderAccreditation} {
        grid-column: 9/13;
        gap: 0;
        grid-template-columns: none;
        padding-right: 0;
      }

      ${AddressBlockWrapper} {
        grid-column: 1/9;
      }
    }

  @media (min-width: ${BREAKPOINTS.lg}) {
    ${applyGridSpacing('padding')}
    ${ContentHeaderTitleBlockWrapper} {
      grid-column: 1/10;
      grid-template-columns: repeat(9, 1fr);
      gap: 0;
    }
    ${ContentHeaderAccreditation} {
      grid-column: 10/13;
      grid-template-columns: none;
      margin: 0;
      padding-top: 2.5rem;
      padding-right: 0;
      padding-left: 0;
    }

    ${ContentHeaderHed},${AddressBlockWrapper},${ContentHeaderContentDivider} {
      grid-column: 1/9;
    }
  }

  @media (min-width: ${BREAKPOINTS.xl}) {
    ${applyGridSpacing('padding')}
    ${ContentHeaderTitleBlockWrapper} {
      grid-column: 1/9;
      grid-template-columns: repeat(12, 1fr);
      gap: 0;

    }
    ${ContentHeaderContentDivider},${ContentHeaderHed},${AddressBlockWrapper} {
      grid-column: 2/12;
    }
    ${ContentHeaderAccreditation} {
      grid-column: 9/13;
      grid-template-columns: none;
      margin: 0;
      padding-top: 2.5rem;
      padding-right: 0;
      padding-left: 0;
    }
  }

  @media (min-width: ${BREAKPOINTS.xxl}) {
    ${applyGridSpacing('padding')}
    ${ContentHeaderTitleBlockWrapper} {
      grid-column: 1/9;
      grid-template-columns: repeat(10, 1fr);
      gap: 0;

      ${ContentHeaderHed},${AddressBlockWrapper},${ContentHeaderContentDivider} {
        grid-column: 2/10;
      }
    }
  }
  `}
`;
const ContentHeaderLeadAssetWrapper = styled.div.withConfig({
    displayName: 'ContentHeaderLeadAssetWrapper'
}) `
  ${defaultGridStyle}

  @media (min-width: ${BREAKPOINTS.md}) {
    ${applyGridSpacing('padding')}
  }
  ${({ mediaWidth, ledeAlign }) => getLeadAssetWrapperStyle(mediaWidth, ledeAlign)}

  ${({ isBusinessContentHeader }) => isBusinessContentHeader &&
    `
    @media (min-width: ${BREAKPOINTS.md}) {
    grid-column: 1 / span 20;
    }
    @media (min-width: ${BREAKPOINTS.xl}) {
      max-height: 320px;
    }
    max-width:100%;
  `}
  ${({ shouldUseSmallLede }) => shouldUseSmallLede &&
    `
  margin-top:${calculateSpacing(5)};
  ${ContentHeaderResponsiveAsset}{
      width: ${calculateSpacing(20.75)};
      height: ${calculateSpacing(20.75)};      
  `}

  ${({ hasLeadAssetTopSpacing }) => hasLeadAssetTopSpacing &&
    `
    ${maxScreen(`${maxThresholds.lg}px`)} {
      padding-top: ${calculateSpacing(4)};
    }
    ${ContentHeaderLeadAssetCaption} {
      @media (min-width: 0) and (max-width: ${BREAKPOINTS.lg}) {
        margin-bottom: 0;
      }
    }
  `}
`;
// Variations: ContentHeader.AssetMiddleCenterBig (dek below image)
const getAssetPositionMiddleStyle = (mediaWidth) => `
  ${ContentHeaderAccreditation} {
    @media (min-width: 0) and (max-width: ${BREAKPOINTS.lg}) {
      &::after {
        display: none;
      }
    }
  }

  ${ContentHeaderAccreditationSocialIcons} {
    margin-bottom: 0;
  }

  .content-header__rating {
    margin: ${calculateSpacing(5)};
  }

  ${mediaWidth === 'small' &&
    `
    ${ContentHeaderLeadAsset} {
      ${ContentHeaderLeadAssetContent} {
        @media (min-width: ${BREAKPOINTS.lg}) {
          grid-column: 1 / 9;
        }
      }
    }
  `};
`;
const getContentHeaderCompactStyle = (contentPosition, hasLede) => `
  padding-bottom: ${calculateSpacing(2)};

  @media (min-width: ${BREAKPOINTS.md}) {
    padding-bottom: ${calculateSpacing(4)};
  }

  ${ContentHeaderTitleBlockWrapper} {
    padding-top: ${calculateSpacing(4, 'px')};

    @media (min-width: ${BREAKPOINTS.md}) {
      padding-top: ${calculateSpacing(5, 'px')};
    }
    ${ContentHeaderHed} {
      margin-top: ${calculateSpacing(3, 'px')};
      padding-bottom: ${calculateSpacing(2, 'px')};
  
      @media (min-width: ${BREAKPOINTS.md}) {
        margin-top: ${calculateSpacing(4, 'px')};
      }
    }
  }

  ${contentPosition === 'above' &&
    `
    ${ContentHeaderAccreditation} {
      padding-bottom: ${calculateSpacing(5, 'px')};

      @media (min-width: ${BREAKPOINTS.md}) {
        padding-bottom: ${calculateSpacing(8, 'px')};
      }
    }
  `};

  ${(contentPosition === 'above' || contentPosition === 'below') &&
    `
    &&{
      ${ContentHeaderAccreditation} {
        padding-top: 0;
      }
    }
    ${!hasLede &&
        `
      ${ContentHeaderAccreditation} {
        padding-bottom: 0;
      }
    `};
  `};

  ${ContentHeaderAccreditationSocialIcons} {
    margin-top: ${calculateSpacing(3, 'px')};
  }

  .bylines {
    margin-right: ${calculateSpacing(2)};

    .byline__name {
      margin-bottom: ${calculateSpacing(0.25)};
    }
  }

  ${ContentHeaderRubricContainer} {
    margin-right: ${calculateSpacing(2)};
  }
`;
const spanContentCaptionStyle = `
  @media (min-width: ${BREAKPOINTS.md}) {
    ${ContentHeaderLeadAssetContent} {
      ${applyGridSpacing('padding')}
      display: grid;
      grid-gap: 1.25rem;
      grid-template-columns: repeat(12, 1fr);

      ${ContentHeaderLeadAssetContentMedia} {
        grid-column: 1 / -1;
      }

      ${ContentHeaderLeadAssetCaption} {
        grid-column: 2/-2;
        padding: 0;
      }
    }
  }

  @media (min-width: ${BREAKPOINTS.sm}) {
    ${ContentHeaderLeadContentFullWidth} {
      padding-top: ${calculateSpacing(1)};
    }
  }
`;
const fullBleedCopyWidthStyle = `
  ${ContentHeaderTitleBlockWrapper},
  ${ContentHeaderAccreditation} {
    grid-column: full;
    max-width: 100vw;
  }
`;
// eslint-disable-next-line complexity
const getContentMediaStyle = (mediaWidth, contentAlign, contentPosition, isBusinessContentHeader, shouldBylineContentStacked, hasAccreditationExtraSpacing, hasAccreditationSocialTopMargin, hasAccreditationSocialBottomMargin, hasDekBottomMargin, hasTitleWrapperTopSpacing, hasReducedTitleTopMargin, hasLeadAssetTopSpacing) => {
    if (mediaWidth === 'fullbleed') {
        if (isBusinessContentHeader) {
            return css `
        ${contentAlign === 'center' &&
                `
        ${ContentHeaderAccreditation} ${ContentHeaderByline} {
          @media (min-width: ${BREAKPOINTS.md}) {
            grid-column: 1/-5;
            width: fit-content;
          }

          @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
            grid-column: 5/12;
          }
        }
      `};
        ${ContentHeaderLeadAssetContent} {
          max-width: 100%;
        }
        ${ContentHeaderResponsiveAsset} ${ResponsiveImageContainer} {
          @media (min-width: ${BREAKPOINTS.xl}) {
            max-height: 320px;
            object-fit: cover;
          }
        }
        ${ContentHeaderTitleBlockWrapper} {
          @media (min-width: ${BREAKPOINTS.xxl}) {
            --grid-gap: ${calculateSpacing(8)};
          }
        }
        ${ContentHeaderAccreditation} {
          @media (min-width: ${BREAKPOINTS.xxl}) {
            grid-column-gap: ${calculateSpacing(6.5)};
          }
        }
      `;
        }
        return css `
      ${contentAlign === 'center' &&
            `
      ${ContentHeaderAccreditation} ${ContentHeaderByline} {
        @media (min-width: ${BREAKPOINTS.lg}) {
          grid-column: 5/-5;
        }

        @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
          grid-column: 3/-3;
        }
      }
    `};
      ${ContentHeaderLeadAssetContent} {
        max-width: ${BREAKPOINTS.xxl};
      }

      ${ContentHeaderDek} {
        ${hasDekBottomMargin && `margin-bottom: ${calculateSpacing(2)};`}
      }

      ${ContentHeaderAccreditationSocialIcons} {
        ${hasAccreditationSocialTopMargin &&
            css `
          ${maxScreen(`${maxThresholds.lg}px`)} {
            margin-top: ${calculateSpacing(2)};
          }
        `}

        ${hasAccreditationSocialBottomMargin &&
            css `
          ${maxScreen(`${maxThresholds.lg}px`)} {
            margin-bottom: ${calculateSpacing(4)};
          }
        `}
      }
    `;
    }
    else if (mediaWidth === 'grid') {
        return `
      ${ContentHeaderResponsiveAsset} ${ResponsiveImageContainer} {
        @media (min-width: ${BREAKPOINTS.xl}) {
          max-height: 1200px;
        }
        object-fit: cover;
        object-position: center;
      }
    `;
    }
    else if (mediaWidth === 'smallrule') {
        return css `
      ${contentAlign === 'center' &&
            `
        @media (min-width: ${BREAKPOINTS.md}) {
          ${ContentHeaderHed},
          ${ContentHeaderDek},
          ${ContentHeaderByline} {
            grid-column: 4 / span 6;
          }
          ${!shouldBylineContentStacked &&
                `
            ${ContentHeaderBylineContent} {
                display: flex;
                align-items: baseline;
                justify-content: center;
                ${ContentHeaderPublishDate},${ContentHeaderTitleBlockPublishDate} {
                  padding-left: ${calculateSpacing(1)};
                }
            }
          `};   
        }

        @media (min-width: 0) and (max-width: ${BREAKPOINTS.md}) {
          ${ContentHeaderPublishDate},${ContentHeaderTitleBlockPublishDate} {
            line-height: 1.3em;
          }
        }
      `};

      ${contentPosition === 'above' &&
            `
        && {
          ${ContentHeaderTitleBlockWrapper} {
            ${hasTitleWrapperTopSpacing
                ? `padding-top: ${calculateSpacing(4)};`
                : `padding-top: ${calculateSpacing(1)}`}
          }

          ${ContentHeaderAccreditation} {
            padding-top: ${calculateSpacing(1)};
            padding-bottom: 0;

            ${hasAccreditationExtraSpacing &&
                `
                padding-top: ${calculateSpacing(2)};

                &::after {
                  padding-top: ${calculateSpacing(4)};
                }
              `}

            ${!hasAccreditationExtraSpacing &&
                `${minScreen(BREAKPOINTS.xl)} {
                padding-top: ${calculateSpacing(1.75)};
              }`}
          }
        }
        
        ${ContentHeaderLeadAssetWrapper} {
          padding-top: ${hasLeadAssetTopSpacing ? calculateSpacing(4) : calculateSpacing(2)};
        }
      `};

      ${ContentHeaderLeadAsset} {
        @media (min-width: ${BREAKPOINTS.md}) and (max-width: 1190px) {
          grid-template-columns: repeat(8, 1fr) minmax(300px, 4fr);
        }

        @media (min-width: ${BREAKPOINTS.lg}) {
          .grid-layout__aside {
            grid-column: 9/-1;
          }
        }

        @media (min-width: ${BREAKPOINTS.xl}) and (max-width: 1464px) {
          grid-template-columns: repeat(12, 1fr);
        }

        ${ContentHeaderLeadAssetContentMedia} {
          @media (min-width: ${BREAKPOINTS.md}) {
            margin-right: 0;
            margin-left: 0;
          }
        }
      }

      ${ContentHeaderLeadAssetCaption} {
        padding-top: ${calculateSpacing(1)};

        ${CaptionText} {
          color: ${getColorToken('colors.consumption.lead.standard.description')};
        }

        ${CaptionCredit} {
          padding-top: ${calculateSpacing(1)};
          text-align: left;
          color: ${getColorToken('colors.consumption.body.standard.body-deemphasized')};
        }

        &.caption-shade--light ${CaptionCredit} {
          color: ${getColorToken('colors.consumption.lead.standard.syndication')};
        }
      }

      ${ContentHeaderBylines} {
        float: none;
      }

      ${ContentHeaderPublishDate},${ContentHeaderTitleBlockPublishDate} {
        float: none;
        padding-left: 0;
      }

      ${ContentHeaderPersistentAside} {
        margin-top: ${calculateSpacing(5)};
      }

      ${ContentHeaderRubricIssueDate} {
        color: ${getColorToken(colorsConsumptionLeadStandardContexTertiary)};

        @media (min-width: ${BREAKPOINTS.md}) {
          margin-left: ${calculateSpacing(1)};
        }

        &::before {
          content: none; /* Remove previously set pseudo-element */
        }
      }

      && {
        ${SocialIconsList} {
          justify-content: center;
        }
      }

      ${ContentHeaderContributorImage} {
        ${roundImageBase('100%', '48px', '48px')};
        margin-right: auto;
        margin-bottom: ${calculateSpacing(2)};
        margin-left: auto;

        img {
          width: 100%;
        }
      }

      ${ContentHeaderDek} {
        margin-bottom: ${calculateSpacing(2)};
      }

      ${ContentHeaderRubricBlock} {
        @media (min-width: 0) and (max-width: ${maxThresholds.md}px) {
          > div {
            margin: 0 ${calculateSpacing(0.5)};
          }
        }
      }

      ${ContentHeaderAccreditationSocialIcons} {
        margin-top: ${calculateSpacing(3)};
      }

      @media (min-width: ${BREAKPOINTS.sm}) {
        && {
          * {
            text-align: center;
          }
        }
      }

      ${ContentHeaderTitleBlockWrapper} {
        ${ContentHeaderHed} {
          ${hasReducedTitleTopMargin
            ? `margin-top: ${calculateSpacing(2)};`
            : `margin-top: ${calculateSpacing(3)};`}
        }

        ${ContentHeaderAccreditation} {
          ${ContentHeaderAccreditationSocialIcons} {
            margin: 0;
          }

          ${ContentHeaderAccreditationSocialIcons} {
            ${hasAccreditationSocialTopMargin &&
            css `
              ${maxScreen(`${maxThresholds.lg}px`)} {
                margin-top: ${calculateSpacing(2)};
              }
            `}

            ${hasAccreditationSocialBottomMargin &&
            css `
              ${maxScreen(`${maxThresholds.lg}px`)} {
                margin-bottom: ${calculateSpacing(4)};
              }
            `}

            margin-top: 0;
            margin-left: 0;
          }

          ${SocialIconsList} {
            margin-top: 0;
          }
        }

        ${ResponsiveCartoonCaption} {
          padding-right: ${calculateSpacing(3)};
          padding-left: ${calculateSpacing(3)};
        }
      }

      @media (min-width: ${BREAKPOINTS.md}) {
        ${ResponsiveCartoonCaption} {
          padding-right: 0;
          padding-left: 0;
        }
      }

      @media (min-width: ${BREAKPOINTS.lg}) {
        && {
          * {
            text-align: inherit;
          }
        }

        ${ContentHeaderTitleBlockWrapper},
        ${ContentHeaderAccreditation} {
          display: inherit;
        }

        ${contentAlign === 'left' &&
            `
          ${ContentHeaderHed},
          ${ContentHeaderDek} {
            grid-column: 1 / span 8;
          }

          ${ContentHeaderByline} {
            display: flex;
          }

          ${SpanWrapper} {
            margin-right: ${calculateSpacing(3)};
          }

          ${ContentHeaderContributorImage} {
            margin-bottom: 0;
          }
        `};

        ${SocialIconsList} {
          justify-content: left;
        }

        ${ContentHeaderAccreditationSocialIcons} {
          margin-left: ${calculateSpacing(-2)};
        }
      }
    `;
    }
    return '';
};
const getContentStyle = (contentStyle, contentPosition, mediaWidth, contentAlign, containerTheme, theme) => {
    if (contentStyle === 'card') {
        return css `
      ${contentPosition === 'below' &&
            `
        ${ContentHeaderAccreditation} {
          padding-bottom: ${calculateSpacing(8)};
        }
      `};
      ${containerTheme === 'inverted' &&
            `
        ${ContentHeaderTitleBlockWrapper},
        ${ContentHeaderAccreditation} {
          background-color: ${getColorToken(theme, 'colors.consumption.lead.inverted.background')};
        }
        ${contentPosition === 'below' &&
                `
          ${ContentHeaderLeadAssetCaption} {
            background-color: ${getColorToken(theme, 'colors.consumption.lead.inverted.background')};
          }
        `};
      `};
    `;
    }
    else if (contentStyle === 'dense-card') {
        return css `
      ${ContentHeaderTitleBlockWrapper} {
        grid-column: full;
        padding-bottom: ${calculateSpacing(6)};
        max-width: 100vw;

        @media (min-width: ${BREAKPOINTS.sm}) {
          padding-bottom: ${calculateSpacing(9)};
        }
      }

      ${mediaWidth === 'fullbleed' &&
            `
        ${ContentHeaderLeadAssetContent} {
          margin: 0 auto;
        }
      `};

      ${contentPosition === 'below' &&
            `
        ${ContentHeaderTitleBlockWrapper} {
          padding-top: ${calculateSpacing(4)};

          @media (min-width: ${BREAKPOINTS.sm}) {
            padding-top: ${calculateSpacing(3)};
          }
        }
      `};

      ${ContentHeaderTitleBlockWrapper},
      ${ContentHeaderLeadAssetWrapper} {
        background: ${getColorToken('colors.consumption.lead.special.background')};
      }

      ${ContentHeaderHed} {
        margin-top: ${calculateSpacing(1)};
        color: ${getColorToken('colors.consumption.lead.special.heading')};

        @media (min-width: 0) and (max-width: ${BREAKPOINTS.md}) {
          text-align: left;
        }

        @media (min-width: ${BREAKPOINTS.sm}) {
          margin-top: ${calculateSpacing(2)};
        }
      }

      ${ContentHeaderDek},
      ${ContentHeaderHed} {
        @media (min-width: ${BREAKPOINTS.lg}) {
          grid-column: 1 / span 8;
        }
      }

      ${ContentHeaderAccreditation},
      ${ContentHeaderNativeShareButton},
      ${ContentHeaderTitleBlockWrapper} {
        justify-items: start;
      }

      ${ContentHeaderLeadAssetContent} ${CaptionText} {
        color: ${getColorToken('colors.consumption.lead.special.description')};
      }

      ${ContentHeaderLeadAssetContent} ${CaptionCredit} {
        color: ${getColorToken(colorsConsumptionLeadSpecialContextTertiary)};
      }

      ${ContentHeaderDek} {
        grid-row: 2;
        padding-top: ${calculateSpacing(3)};
      }

      ${ContentHeaderByline} {
        ${ContentHeaderContributorImage} {
          display: block;
        }
      }

      ${contentAlign === 'left' &&
            `
        ${ContentHeaderByline} {
          margin-top: 0;

          @media (min-width: ${BREAKPOINTS.sm}) {
            display: block;
          }
        }
      `};

      ${ContentHeaderPublishDate},
      ${ContentHeaderTitleBlockPublishDate},
      .byline,
      ${ContentHeaderDek} {
        text-align: left;
      }

      .divider {
        color: ${getColorToken('colors.consumption.lead.standard.divider')};
      }

      ${ContentHeaderRubricContainer}.rubric--with-bg {
        color: ${getColorToken(colorsConsumptionLeadSpecialContextSignature)};

        a {
          color: ${getColorToken(colorsConsumptionLeadSpecialContextSignature)};
        }
      }

      .items-count__icon path {
        fill: ${getColorToken('colors.consumption.lead.special.heading')};
      }

      ${ContentHeaderLeadAssetContent} {
        ${ContentHeaderLeadAssetCaption} {
          padding-top: ${calculateSpacing(1)};
        }

        ${CaptionCredit} {
          padding-top: ${calculateSpacing(1)};
        }
      }
    `;
    }
    return '';
};
const contentPositionStartEndCommonStyle = `
  ${ContentHeaderContainer} {
    grid-template-columns: repeat(4, 1fr);

    @media (min-width: ${BREAKPOINTS.md}) {
      grid-template-columns: repeat(12, 1fr);
    }
    
  }

  ${ContentHeaderLeadAssetWrapper} {
    grid-row: 3;
    padding: 0;
    ${ContentHeaderResponsiveAsset}{
      height: 100%;

      ${ResponsiveImageContainer} {
        height: 100%;
      }
    }
  }

  ${ContentHeaderTitleBlockWrapper} {
    grid-row: 1;
    padding-top: ${calculateSpacing(4, 'px')};
    @media (min-width: ${BREAKPOINTS.md}) {
      padding-top: ${calculateSpacing(5, 'px')};
    }
  }

  ${ContentHeaderAccreditation} {
    grid-row: 2;
  }
`;
// eslint-disable-next-line complexity
const getContentPositionStyle = (contentPosition, containerTheme, isLiveStoryType, mediaWidth, contentAlign, contentStyle, hasLede, showBreadCrumb, isBusinessContentHeader, isLedeOverride, hideAccreditationBottomSpacing, shouldReduceAccreditationPadding) => {
    if (contentPosition === 'above') {
        return `
      // 1. Apply a universal padding to all ContentHeaders that use 'TextAbove' variations
      // check and not apply any padding if we have bredcrumb, since breadcrumb already has a padding
      ${!showBreadCrumb &&
            `
        ${ContentHeaderTitleBlockWrapper}  {
          padding-top: ${calculateSpacing(4, 'px')};
      
          @media (min-width: ${BREAKPOINTS.md}) {
            padding-top: ${calculateSpacing(5, 'px')};
          }
        }
      `};

      ${ContentHeaderAccreditation} {
        padding-top: ${calculateSpacing(2)};
        padding-bottom: ${calculateSpacing(2)};

        @media (min-width: ${BREAKPOINTS.md}) {
          padding-bottom: ${calculateSpacing(5)};

          ${!shouldReduceAccreditationPadding &&
            `padding-top: ${calculateSpacing(4)};`}
          ${isLiveStoryType && `padding-top: ${calculateSpacing(3)}`} 
        }
      }

      ${!hasLede &&
            `
        ${ContentHeaderAccreditation} {
          padding-bottom: 0;
        }
      `};
    
      ${containerTheme === 'inverted' &&
            `
        && {
          ${ContentHeaderAccreditation} {
            padding-bottom: ${calculateSpacing(4)};
          }
        }
      `};

      ${mediaWidth === 'fullbleed' &&
            `
        ${ContentHeaderPersistentAside} {
          margin-top: ${calculateSpacing(6)};
        }
      `};

      
      ${contentAlign === 'left' &&
            `
        &.content-header--no-lede {
          ${ContentHeaderPersistentAside} {
            margin-top: ${calculateSpacing(6)};
          }
        }
      `};

      ${mediaWidth === 'small' &&
            `
        .disclaimer-container {
          @media (min-width: ${BREAKPOINTS.xl}) {
            grid-template-columns: repeat(8, 1fr) minmax(300px, 3fr) 1fr;
          }
        }

        ${ContentHeaderPersistentAside} {
          margin-top: 0;
        }
      `};
    `;
    }
    else if (contentPosition === 'below') {
        return `
      ${ContentHeaderTitleBlockWrapper} {
        padding-top: ${calculateSpacing(4, 'px')};
    
        @media (min-width: ${BREAKPOINTS.md}) {
          padding-top: ${calculateSpacing(5, 'px')};
        }
      }

      ${ContentHeaderAccreditation} {
        padding-top: ${calculateSpacing(2)};
        padding-bottom: 0;
    
        @media (min-width: ${BREAKPOINTS.md}) {
          ${!shouldReduceAccreditationPadding &&
            `padding-top: ${calculateSpacing(4)};`}
        }
      }

      ${containerTheme === 'inverted' &&
            `
        &&{
          ${ContentHeaderAccreditation} {
            padding-bottom: ${calculateSpacing(4)};

            @media (min-width: ${BREAKPOINTS.md}) {
              padding-bottom: ${calculateSpacing(5)};
            }
          }
          ${hideAccreditationBottomSpacing &&
                `
            ${maxScreen(`${maxThresholds.lg}px`)} {
              ${ContentHeaderAccreditation} {
                padding-bottom: 0;
              }
            }
            `}
        }
      `};
    
      ${ContentHeaderLeadAssetWrapper} {
        grid-row: 1;
      }
      ${!isLedeOverride &&
            `${ContentHeaderHedAccreditationWrapper} {
          grid-row: 3;
        }`}
      ${ContentHeaderLeadContentFullWidth} {
        grid-row: 2;
      }
    
      ${ContentHeaderTitleBlockWrapper} {
        padding-top: ${calculateSpacing(4)};
    
        @media (min-width: ${BREAKPOINTS.md}) {
          padding-top: ${calculateSpacing(5)};
        }
      }
      ${isBusinessContentHeader &&
            `
        ${ContentHeaderHedAccreditationWrapper} {
          grid-row: 3;
        }

        ${ContentHeaderTitleBlockWrapper} {
          padding-top: ${calculateSpacing(0)};
          padding-bottom: ${calculateSpacing(2)};
        }
        @media (min-width: ${BREAKPOINTS.sm}) {
          ${ContentHeaderLeadAssetWrapper} {
            max-width: 1600px;
            ${ResponsiveImageContainer} {
              aspect-ratio: 3/2;
              object-fit: cover;
            }
          }
        }
        @media (min-width: ${BREAKPOINTS.md}) {
          ${ContentHeaderTitleBlockWrapper} {
            padding-bottom: ${calculateSpacing(0)};
          }
          ${ContentHeaderLeadAssetWrapper} {
            max-height: fit-content;
            padding-right: var(--grid-margin);
            padding-left: var(--grid-margin);
            ${ResponsiveImageContainer} {
              max-height: inherit;
              aspect-ratio: 16/9;
            }
          }
        }
        ${ContentHeaderAccreditation} {
          padding-top: ${calculateSpacing(0)};
        }
        @media (min-width: ${BREAKPOINTS.md}) {
          ${ContentHeaderAccreditation} {
            padding-top: ${calculateSpacing(5)};
          }
        }
        @media (min-width: ${BREAKPOINTS.lg}) {
          ${ContentHeaderAccreditation} {
            padding-top: ${calculateSpacing(0)};
          }
        }
      `} 
    
      ${contentAlign === 'left' &&
            contentStyle === 'card' &&
            `
        ${ContentHeaderPersistentAside} {
          margin-top: 0;
        }
      `};
    `;
    }
    else if (contentPosition === 'start') {
        return `
    ${ContentHeaderHedAccreditationWrapper} {
      grid-row: 1 / span 2;
      grid-column: 1 / 7;
    }
    ${contentPositionStartEndCommonStyle}
    ${ContentHeaderLeadAssetWrapper} {
      grid-column: 1 / -1;
  
      @media (min-width: ${BREAKPOINTS.md}) {
        grid-column: 7 / -1;
        grid-row: 1 / span 2;
      }
    }
  
    ${ContentHeaderTitleBlockWrapper},
    ${ContentHeaderAccreditation} {
      grid-column: 1 / span 6;
    }
    ${contentAlign === 'center' &&
            contentStyle === 'card' &&
            `
      ${ContentHeaderContainer} {
        overflow-y: hidden
      }      
      ${ContentHeaderLeadAssetCaption} {
        position: absolute;
        bottom:0px;
        padding-left: 0px;
        margin-bottom: 0px;
        vertical-align: text-bottom;
      }
      ${CaptionCredit} {
        background-color: rgba(255, 255, 255, 0.64);
        padding: 2px 5px 3px 5px;
      }
      ${ContentHeaderTitleBlockWrapper} {
        @media (max-width: ${BREAKPOINTS.md}) {
          padding-bottom: ${calculateSpacing(4)};
        }
      }
    `};
    `;
    }
    else if (contentPosition === 'end') {
        return `
    ${ContentHeaderHedAccreditationWrapper} {
      grid-column: 7/-1;
      grid-row: 1 / span 2;
    }
    ${contentPositionStartEndCommonStyle} 
    ${ContentHeaderContainer} {
      @media (min-width: ${BREAKPOINTS.md}) {
        column-gap: ${calculateSpacing(3)};
      }
      @media (min-width: ${BREAKPOINTS.xl}) {
        column-gap: ${calculateSpacing(4)};
      }
    }
    ${ContentHeaderLeadAssetWrapper} {
      grid-column: 1 / -1;
  
      @media (min-width: ${BREAKPOINTS.md}) {
        grid-column: 1 / span 6;
        grid-row: 1 / span 2;
      }
    }
  
    ${ContentHeaderTitleBlockWrapper},
    ${ContentHeaderAccreditation} {
      grid-column: 1 / -1;
      @media (min-width: ${BREAKPOINTS.md}) {
        padding-left: 0;
      }
  
      @media (min-width: ${BREAKPOINTS.md}) {
        grid-column: 7 / -1;
      }
    }
    `;
    }
    return '';
};
const contentHeaderThemeStandardPrintStyle = (theme) => css `
  background-color: ${getColorToken('colors.consumption.lead.standard.background')};

  ${ContentHeaderRubricContainer} {
    color: ${getColorToken('colors.consumption.lead.standard.context-signature')};

    ${RubricLink} {
      ${getLinkStyles(theme, 'colors.consumption.lead.standard.context-signature', 'colors.consumption.lead.standard.context-signature', 'global')};
    }
  }

  ${ContentHeaderRubricIssueDate} {
    color: ${getColorToken(colorsConsumptionLeadStandardContexTertiary)};

    ${RubricLink} {
      ${getLinkStyles(theme, colorsConsumptionLeadStandardContexTertiary, colorsConsumptionLeadStandardContexTertiary, 'global')};

      color: ${getColorToken(colorsConsumptionLeadStandardContexTertiary)};
    }
  }

  ${ContentHeaderHed} {
    color: ${getColorToken('colors.consumption.lead.standard.heading')};

    &:hover {
      color: ${getColorToken('colors.consumption.lead.standard.heading')};
    }
  }

  ${ContentHeaderDek} {
    color: ${getColorToken('colors.consumption.lead.standard.description')};

    &:hover {
      color: ${getColorToken('colors.consumption.lead.standard.description')};
    }
  }

  ${ContentHeaderBylines} > * {
    color: ${getColorToken('colors.consumption.lead.standard.accreditation')};

    a {
      ${getLinkStyles(theme, 'colors.consumption.lead.standard.link', 'colors.consumption.lead.standard.link-hover', 'global')};
      transition: color ${INTERACTIVE.timingLinkDefault} ease;
    }
  }

  ${ContentHeaderPublishDate},${ContentHeaderTitleBlockPublishDate} {
    color: ${getColorToken(colorsConsumptionLeadStandardContexTertiary)};

    &:hover {
      color: ${getColorToken(colorsConsumptionLeadStandardContexTertiary)};
    }
  }
`;
const mediaPrintStyle = (theme, containerTheme, contentPosition) => css `
  @media print {
    display: block;

    ${SocialIconsWrapper} {
      display: none;
    }

    ${(containerTheme === 'inverted' || containerTheme === 'special') &&
    contentHeaderThemeStandardPrintStyle(theme)};

    ${(containerTheme === 'inverted' || containerTheme === 'special') &&
    contentPosition !== 'above' &&
    `
      ${ContentHeaderLeadAssetContent},
      ${ContentHeaderLeadContentFullWidth} {
        ${CaptionText} {
          color: ${getColorToken(theme, 'colors.consumption.lead.standard.description')};
        }

        ${CaptionCredit} {
          color: ${getColorToken(theme, 'colors.consumption.body.standard.body-deemphasized')};
        }
      }
    `};
  }
`;
const getContentHeaderThemeStyle = (containerTheme, contentPosition, hasInvertedCaption, theme) => {
    if (containerTheme === 'inverted') {
        return `
      ${contentPosition !== 'above' &&
            `
        ${ContentHeaderLeadAssetContent},
        ${ContentHeaderLeadContentFullWidth} {
          background-color: transparent;
          ${CaptionText} {
            color: ${getColorToken(theme, 'colors.consumption.lead.inverted.description')};
          }

          ${CaptionCredit} {
            color: ${getColorToken(theme, 'colors.consumption.body.inverted.body-deemphasized')};
          }
          ${ContentHeaderLeadAssetCaption} {
            a {
              ${getLinkStyles(theme, 'colors.interactive.base.white', 'colors.interactive.base.white')};
            }
          }
        }

        ${ContentHeaderLeadAssetCaption} ${CaptionCredit} {
          color: ${getColorToken(theme, colorsConsumptionLeadInvertedContextTertiary)};
        }
      `};
      ${hasInvertedCaption &&
            `
        ${ContentHeaderLeadAssetCaption} ${CaptionText} {
          color: ${getColorToken(theme, colorsConsumptionLeadInvertedContextTertiary)};
        }

        ${ContentHeaderLeadAssetCaption} ${CaptionCredit} {
          color: ${getColorToken(theme, colorsConsumptionLeadInvertedContextTertiary)};
        }
      `};
    `;
    }
    else if (containerTheme === 'special') {
        return `
      ${contentPosition !== 'above' &&
            `
        ${ContentHeaderLeadAssetContent},
        ${ContentHeaderLeadContentFullWidth} {
          background-color: transparent;

          ${CaptionText} {
            color: ${getColorToken(theme, 'colors.consumption.lead.special.description')};
          }

          ${CaptionCredit} {
            color: ${getColorToken(theme, 'colors.consumption.body.special.body-deemphasized')};
          }
        }
      `};
    `;
    }
    return '';
};
const ContentHeaderWrapper = styled.header.withConfig({
    displayName: 'ContentHeaderWrapper'
}) `
  display: flex;
  justify-content: center;

  ${ContentHeaderPersistentAside} {
    margin-top: 0;
  }

  ${ResponsiveClipWrapper} {
    display: block;
  }

  &.content-header--no-lede {
    ${ContentHeaderAccreditation} {
      padding-bottom: 0;
    }
  }

  ${({ captionStyle }) => captionStyle === 'span-content-well' && spanContentCaptionStyle}

  ${({ contentAlign, mediaWidth, contentPosition, hasNarrowHeader, reducedSpacings, shouldShortenHeadline, shouldShowAuthorsInTitleBlock, isLedeTextCenterForMobile }) => getContentAlignStyle(contentAlign, mediaWidth, contentPosition, hasNarrowHeader, reducedSpacings, shouldShortenHeadline, shouldShowAuthorsInTitleBlock, isLedeTextCenterForMobile)}

  ${({ assetPosition, mediaWidth }) => assetPosition === 'middle' && getAssetPositionMiddleStyle(mediaWidth)}

  ${({ copyWidth }) => copyWidth === 'fullbleed' && fullBleedCopyWidthStyle}

  ${({ mediaWidth, contentAlign, contentPosition, isBusinessContentHeader, shouldBylineContentStacked, hasAccreditationExtraSpacing, hasAccreditationSocialTopMargin, hasAccreditationSocialBottomMargin, hasDekBottomMargin, hasTitleWrapperTopSpacing, hasReducedTitleTopMargin, hasLeadAssetTopSpacing }) => getContentMediaStyle(mediaWidth, contentAlign, contentPosition, isBusinessContentHeader, shouldBylineContentStacked, hasAccreditationExtraSpacing, hasAccreditationSocialTopMargin, hasAccreditationSocialBottomMargin, hasDekBottomMargin, hasTitleWrapperTopSpacing, hasReducedTitleTopMargin, hasLeadAssetTopSpacing)}

  ${({ contentPosition, containerTheme, isLiveStoryType, mediaWidth, contentAlign, contentStyle, hasLede, showBreadCrumb, isBusinessContentHeader, isLedeOverride, hideAccreditationBottomSpacing, shouldReduceAccreditationPadding }) => getContentPositionStyle(contentPosition, containerTheme, isLiveStoryType, mediaWidth, contentAlign, contentStyle, hasLede, showBreadCrumb, isBusinessContentHeader, isLedeOverride, hideAccreditationBottomSpacing, shouldReduceAccreditationPadding)}

  ${({ shouldShowAuthorsInTitleBlock, contentPosition, hasLede }) => shouldShowAuthorsInTitleBlock &&
    getContentHeaderCompactStyle(contentPosition, hasLede)}

  ${({ hasXsNavSpacing }) => hasXsNavSpacing && hasXsNavSpacingStyle}

    ${({ shouldRemoveContentHedWrapperTopSpacing }) => shouldRemoveContentHedWrapperTopSpacing &&
    `
      ${minScreen(`${maxThresholds.sm}px`)} {
        padding-top: 0;
      }
    `}

  ${({ contentStyle, contentPosition, mediaWidth, contentAlign, containerTheme, theme }) => getContentStyle(contentStyle, contentPosition, mediaWidth, contentAlign, containerTheme, theme)}

  ${({ publishDatePosition, hasExtraSpaceBetweenSeparator }) => publishDatePosition === 'top' &&
    getPublishDatePositionStyle(hasExtraSpaceBetweenSeparator)}

  ${({ containerTheme, contentPosition, hasInvertedCaption, theme }) => getContentHeaderThemeStyle(containerTheme, contentPosition, hasInvertedCaption, theme)}
    
  ${({ theme, containerTheme, contentPosition }) => mediaPrintStyle(theme, containerTheme, contentPosition)}

  ${({ showContributorImageOnMobile }) => !showContributorImageOnMobile &&
    `
      ${maxScreen(`${maxThresholds.lg}px`)} {
        ${ContentHeaderContributorImage} { display: none; }
      }
    }
  `}

  ${({ isImagePositionBottomInSmallScreen }) => isImagePositionBottomInSmallScreen &&
    `
    ${maxScreen(`${maxThresholds.lg}px`)} {
      ${ContentHeaderHedAccreditationWrapper} {
        grid-row: 1 / auto;
      }
      
      ${ContentHeaderLeadAsset} {
        grid-row: 2 / auto;
      }

      ${ContentHeaderLeadContentFullWidth} {
        grid-row: 3 / auto;
      }
    }
  `}
`;
const ContentHeaderOffersData = styled(OffersData).withConfig({
    displayName: 'ContentHeaderOffersData'
}) `
  margin: 0;

  &&.disclaimer-container {
    ${defaultGridStyle}
    ${defaultColorPaddingStyle}
    display: block;
    margin-bottom: ${calculateSpacing(0.5)};

    @media (min-width: ${BREAKPOINTS.lg}) {
      display: none;
    }
  }

  &&.offer-data {
    ${defaultGridStyle}
    ${defaultColorPaddingStyle}
  }
`;
const ContentHeaderLeadOverride = styled.div.withConfig({
    displayName: 'ContentHeaderLeadOverride'
}) `
  grid-column: full;
  max-width: 100vw;

  .interactive-override__wirewax-embed {
    @media (min-width: ${BREAKPOINTS.lg}) {
      padding: 0 15vw;
    }
  }
  ${({ contentPosition }) => contentPosition === 'below' && 'grid-row: 1;'}
`;
const ContentHeaderAccreditationBottom = styled.div.withConfig({
    displayName: 'ContentHeaderAccreditationBottom'
}) `
  ${defaultGridStyle}
  ${allGridChildStyle}
  ${defaultColorPaddingStyle}
`;
module.exports = {
    ContentHeaderWrapper,
    ContentHeaderOffersData,
    ContentHeaderLeadOverride,
    ContentHeaderAccreditationBottom,
    ContentHeaderContainer,
    ContentHeaderPublishDate,
    ContentHeaderLeadAssetWrapper,
    ContentHeaderBylines,
    ContentHeaderPersistentAside,
    PodcastContentHeaderDivider,
    ContentHeaderHedAccreditationWrapper
};
//# sourceMappingURL=ContentHeader.styles.js.map

/***/ }),

/***/ 92027:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const CNEVideoEmbed = __webpack_require__(64930);
const { storyVideoPosition } = __webpack_require__(62327);
const GalleryEmbed = __webpack_require__(75966);
const GalleryIcon = __webpack_require__(39336);
const ResponsiveAsset = __webpack_require__(73275);
const SocialIcons = __webpack_require__(35676);
const { transformLegacySources } = __webpack_require__(90072);
const translations = (__webpack_require__(33193)/* ["default"] */ .A);
const { ContentHeaderLeadAsset, ContentHeaderResponsiveAsset, ContentHeaderLeadAssetContent, ContentHeaderLeadAssetCaption, ContentHeaderLeadAssetContentMedia, ContentHeaderLedeLightboxButton, ContentHeaderLeadRailAnchor, ContentHeaderLeadContentFullWidth, ContentHeaderLeadContentCaptionCredit, ContentHeaderLeadAssetAwards } = __webpack_require__(5239);
const { useState, Fragment } = React;
/**
 * Wrapper around asset to contain caption, icons
 *
 * @param {object} props - React props
 * @param {Array} [awards] - Optional awards array
 * @param {string} props.className - Optional top-level class to add.
 * @param {boolean} props.hasStaticPositionedAward - Statically positions Awards for Review content types, this is set as a setting in the tenant config
 * @param {boolean} [props.shouldAlignCenterWhenNoCaption] - should apply align center in mobile if caption is not present
 * @param {object} props.lede - Lede image object.
 * @returns {ReactElement} <header>
 */
const ASSET_CLASSES = {
    default: 'landscape',
    portrait: 'portrait'
};
// this will help in reducing CLS when lead image is portrait
const getInitialClassname = (lede) => {
    const dimensions = lede?.masterAspectRatio?.split(':');
    if (lede?.restrictCropping &&
        dimensions?.length === 2 &&
        Number(dimensions[0]) / Number(dimensions[1]) <= 1) {
        return ASSET_CLASSES.portrait;
    }
    return ASSET_CLASSES.default;
};
/* eslint-disable complexity */
const LeadAsset = ({ awards, className, captionWidth = 'standard', containerTheme, lede, mediaWidth, shouldRenderRailAnchor, showFullWidthLeadImage, socialIcons, hasLightboxButton, hasStaticPositionedAward = false, hasInvertedLedeBackground, hideLedeCaption = false, shouldAlignCenterWhenNoCaption = false }) => {
    const [ledeAssetOrientation, setLedeAssetOrientation] = useState(getInitialClassname(lede));
    const { formatMessage } = useIntl();
    const setImageOrientation = ({ width, height }) => {
        const isPortrait = width / height <= 1;
        if (isPortrait) {
            setLedeAssetOrientation(ASSET_CLASSES.portrait);
        }
    };
    const augmentedLede = transformLegacySources(lede);
    const isCnevideo = lede.modelName === 'cnevideo';
    const isGallery = lede.modelName === 'gallery';
    const isClip = lede.modelName === 'clip';
    let cneVideoOverrides = null;
    if (isCnevideo &&
        lede.cneVideoOverrides &&
        Object.keys(lede.cneVideoOverrides).length) {
        cneVideoOverrides = { ...lede.cneVideoOverrides };
    }
    const shouldRenderCaption = !hideLedeCaption &&
        ((lede.caption && lede.caption.trim()) ||
            (lede.credit && lede.credit.trim()));
    const isLedeTextCenterForMobile = shouldAlignCenterWhenNoCaption && (!lede.caption || lede.caption === '');
    const LeadCaption = (React.createElement(ContentHeaderLeadAssetCaption, { dangerousCaptionText: lede.caption, dangerousCredit: lede.credit, mediaWidth: mediaWidth, isLedeTextCenterForMobile: isLedeTextCenterForMobile }));
    const cneVideoProps = cneVideoOverrides
        ? {
            shouldAutoplay: Boolean(!cneVideoOverrides.disableAutoplay),
            shouldMute: Boolean(cneVideoOverrides.muted),
            shouldPlayContinuously: Boolean(cneVideoOverrides.continuousPlay),
            isStickyType: Boolean(cneVideoOverrides.sticky),
            shouldDisableAds: Boolean(cneVideoOverrides.disableAds),
            shouldLoopVideo: Boolean(cneVideoOverrides.loopVideo)
        }
        : {
            shouldAutoplay: true
        };
    const contentHeaderResponsiveAsset = (React.createElement(ContentHeaderResponsiveAsset, { ...augmentedLede, onAssetLoaded: setImageOrientation, shouldRestrictCropping: lede?.restrictCropping, masterAspectRatio: lede?.masterAspectRatio, shouldHoldImageSpace: true, mediaWidth: mediaWidth, "data-testid": "assetMedia" }));
    return (React.createElement(Fragment, null,
        React.createElement(ContentHeaderLeadAsset, { className: classnames('lead-asset', className), mediaWidth: mediaWidth, containerTheme: containerTheme, ledeContentType: lede.contentType, ledeAssetOrientation: ledeAssetOrientation, hasInvertedLedeBackground: hasInvertedLedeBackground, "data-testid": "ContentHeaderLeadAsset" },
            React.createElement(ContentHeaderLeadAssetContent, null,
                React.createElement(ContentHeaderLeadAssetContentMedia, { ledeContentType: lede.contentType, showFullWidthLeadImage: showFullWidthLeadImage, mediaWidth: mediaWidth, className: `lead-asset__content__${lede.contentType}` },
                    !isCnevideo && !isGallery && !isClip && (React.createElement(Fragment, null,
                        awards && !hasStaticPositionedAward && (React.createElement(ContentHeaderLeadAssetAwards, { awards: awards, hasStaticPositionedAward: hasStaticPositionedAward })),
                        contentHeaderResponsiveAsset)),
                    isCnevideo && lede.scriptEmbedUrl && (React.createElement(CNEVideoEmbed, { ...cneVideoProps, animationClip: lede.animationClip, categories: lede.categories, isLive: lede.isLive, scriptUrl: lede.scriptEmbedUrl, shouldHaveTeaser: true, title: lede.title, videoEmbedPosition: storyVideoPosition })),
                    isGallery && React.createElement(GalleryEmbed, { ...lede, showNoAdsFromParent: true }),
                    socialIcons && React.createElement(SocialIcons.Overlay, { links: socialIcons.links }),
                    isClip && contentHeaderResponsiveAsset,
                    hasLightboxButton && (React.createElement(ContentHeaderLedeLightboxButton, { onClickHandler: () => {
                            document
                                .querySelector('.responsive-image--expandable')
                                .click();
                        }, ButtonIcon: () => React.createElement(GalleryIcon, null), hasEnableIcon: true, btnStyle: "text", iconPosition: "before", inputKind: "button", isStaticText: true, label: formatMessage(translations.showAllPhotos), shouldRenderCaption: shouldRenderCaption })),
                    shouldRenderCaption && captionWidth !== 'fullbleed' && LeadCaption,
                    awards && hasStaticPositionedAward && (React.createElement(ContentHeaderLeadAssetAwards, { awards: awards, hasStaticPositionedAward: hasStaticPositionedAward })))),
            shouldRenderRailAnchor && (React.createElement(ContentHeaderLeadRailAnchor, { "data-testid": "ContentHeaderLeadRailAnchor" }))),
        shouldRenderCaption && captionWidth === 'fullbleed' && (React.createElement(ContentHeaderLeadContentFullWidth, null,
            React.createElement(ContentHeaderLeadContentCaptionCredit, null, LeadCaption)))));
};
/* eslint-enable complexity */
LeadAsset.propTypes = {
    awards: PropTypes.array,
    captionWidth: PropTypes.oneOf(['standard', 'fullbleed']),
    className: PropTypes.string,
    containerTheme: PropTypes.oneOf(['standard', 'inverted', 'special']),
    hasInvertedLedeBackground: PropTypes.bool,
    hasLightboxButton: PropTypes.bool,
    hasStaticPositionedAward: PropTypes.bool,
    hideLedeCaption: PropTypes.bool,
    lede: PropTypes.oneOfType([
        PropTypes.shape(ResponsiveAsset.propTypes),
        PropTypes.shape(CNEVideoEmbed.propTypes)
    ]).isRequired,
    mediaWidth: PropTypes.oneOf(['small', 'smallrule', 'grid', 'fullbleed']),
    shouldAlignCenterWhenNoCaption: PropTypes.bool,
    shouldRenderRailAnchor: PropTypes.bool,
    showFullWidthLeadImage: PropTypes.bool,
    socialIcons: PropTypes.shape(SocialIcons.propTypes)
};
module.exports = LeadAsset;
module.exports.transformLegacySources = transformLegacySources;
//# sourceMappingURL=LeadAsset.js.map

/***/ }),

/***/ 5239:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { applyGridSpacing } = __webpack_require__(1123);
const { calculateSpacing, getColorToken, getLinkStyles, maxScreen } = __webpack_require__(26865);
const { maxThresholds } = __webpack_require__(99906);
const { BREAKPOINTS, INTERACTIVE } = __webpack_require__(96472);
const ResponsiveAsset = __webpack_require__(73275);
const Awards = __webpack_require__(866);
const Caption = __webpack_require__(14760);
const Button = __webpack_require__(73730);
const { CaptionText, CaptionCredit } = __webpack_require__(38860);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const responsiveAssetSmallStyle = `
  @media (min-width: 1440px) {
    max-height: 1200px;
  }
`;
const responsiveAssetSmallRuleStyle = `
  @media (min-width: ${BREAKPOINTS.md}) {
    max-height: 1000px;
  }

  @media (min-width: 1440px) {
    max-height: 1200px;
  }
`;
const colorsConsumptionLeadStandardContexTertiary = 'colors.consumption.lead.standard.context-tertiary';
const ContentHeaderResponsiveAsset = styled(ResponsiveAsset).withConfig({
    displayName: 'ContentHeaderResponsiveAsset'
}) `
  width: 100%;

  // 1 ⬇. contain images to containers while preserving aspect ratios
  ${ResponsiveImageContainer} {
    @supports (object-fit: contain) {
      object-fit: contain;
      object-position: center;
    }

    @media (min-width: ${BREAKPOINTS.sm}) {
      width: 100%;
    }
  }

  @supports (object-fit: contain) {
    ${({ mediaWidth }) => mediaWidth === 'smallrule' && responsiveAssetSmallRuleStyle}
  }

  ${ResponsiveImageContainer},
  .aspect-ratio--overlay-container {
    @supports (object-fit: contain) {
      ${({ mediaWidth }) => mediaWidth === 'small' && responsiveAssetSmallStyle}
    }

    .responsive-image {
      max-height: 900px;
    }

    ${({ mediaWidth }) => mediaWidth === 'smallrule' && responsiveAssetSmallRuleStyle}
  }
`;
const ContentHeaderLeadAssetContent = styled.figure.withConfig({
    displayName: 'ContentHeaderLeadAssetContent'
}) `
  display: grid;
  position: relative;
  grid-column: 1 / -1; /* css-grid: span all columns. (start at column 1 / end at the last column) */
  margin: 0 auto;
  width: 100%;
`;
const ContentHeaderLeadAssetCaption = styled(Caption).withConfig({
    displayName: 'ContentHeaderLeadAssetCaption'
}) `
  position: relative;
  z-index: 2;
  margin-top: 0;
  margin-bottom: ${calculateSpacing(2)};
  width: 100%;
  justify-self: left;

  && {
    text-align: left;
  }

  @media (min-width: ${BREAKPOINTS.sm}) {
    padding-right: ${calculateSpacing(3)};
    padding-left: ${calculateSpacing(3)};
  }

  @media (min-width: ${BREAKPOINTS.md}) {
    padding-right: 0;
    padding-left: 0;
  }

  &,
  > * {
    padding-top: ${calculateSpacing(1)};
  }

  > *:first-child {
    padding-top: 0;
  }

  a {
    ${({ theme }) => getLinkStyles(theme, 'colors.consumption.lead.standard.link', 'colors.consumption.lead.standard.link-hover', 'global')};
    transition: color ${INTERACTIVE.timingLinkDefault} ease;
  }

  ${CaptionText} {
    color: ${getColorToken('colors.consumption.lead.standard.heading')};
  }

  ${CaptionCredit} {
    margin-top: 0;
    color: ${getColorToken(colorsConsumptionLeadStandardContexTertiary)};
    ${({ mediaWidth }) => mediaWidth === 'small' && ` &&{text-align: center;}`}
  }

  &.caption-shade--light ${CaptionCredit} {
    color: ${getColorToken('colors.consumption.lead.standard.syndication')};
  }

  ${({ mediaWidth }) => mediaWidth === 'small' && `&&{text-align: center;}`}

  ${maxScreen(`${maxThresholds.md}px`)} {
    ${({ isLedeTextCenterForMobile }) => isLedeTextCenterForMobile &&
    css `
        && {
          text-align: center;
        }
      `}
  }
`;
const getLeadAssetContentMediaStyle = (ledeContentType, mediaWidth, showFullWidthLeadImage) => {
    if (ledeContentType === 'gallery' || ledeContentType === 'clip') {
        return css `
      margin-right: 0;
      margin-left: 0;
      color: ${getColorToken('colors.consumption.lead.standard.background')};

      @media (min-width: ${BREAKPOINTS.sm}) and (max-width: ${BREAKPOINTS.md}) {
        padding-right: ${calculateSpacing(3)};
        padding-left: ${calculateSpacing(3)};
      }

      ${mediaWidth === 'fullbleed' &&
            showFullWidthLeadImage &&
            `
        padding-right: 0;
        padding-left: 0;
        @media (min-width: ${BREAKPOINTS.sm}) and (max-width: ${BREAKPOINTS.md}) {
          padding-right: 0;
          padding-left: 0;
        }
      `};
    `;
    }
    else if (ledeContentType === 'photo') {
        return `
        ${mediaWidth === 'fullbleed' &&
            showFullWidthLeadImage &&
            `
          width: 100%;
          @media (min-width: ${BREAKPOINTS.xl}) {
            max-height: 1800px;
          }
        `};
        ${mediaWidth === 'grid' &&
            `
          @media (min-width: ${BREAKPOINTS.xl}) {
            max-height: 1200px;
          }
        `};
      `;
    }
    return '';
};
const ContentHeaderLeadAssetContentMedia = styled.div.withConfig({
    displayName: 'ContentHeaderLeadAssetContentMedia'
}) `
  position: relative;

  .cne-video-embed {
    margin: 0 auto;
  }

  &.lead-asset__content__clip {
    width: 100%;
  }
  ${({ ledeContentType, mediaWidth, showFullWidthLeadImage }) => getLeadAssetContentMediaStyle(ledeContentType, mediaWidth, showFullWidthLeadImage)}
`;
// 1. The image ratio should be at most 3:2, i.e. a full bleed lede image
// height can not exceed 1067 pixels if the image width is 1600px.
// The image is cropped and centered if its height exceeds the limit.
const getContentHeaderLeadAssetStyle = (ledeAssetOrientation, mediaWidth, containerTheme, hasInvertedLedeBackground, ledeContentType, theme) => {
    if (ledeAssetOrientation === 'landscape') {
        return `
        ${ContentHeaderResponsiveAsset} img {
          width: 100%;
        }
        ${mediaWidth === 'small' &&
            `
          @media (min-width: ${BREAKPOINTS.lg}) {
            ${ContentHeaderLeadAssetContent} {
              grid-column: 1 / 9;
            }
          }
        `};

        ${mediaWidth === 'fullbleed' &&
            containerTheme === 'inverted' &&
            `
          @media (min-width: ${BREAKPOINTS.lg}) {
            position: relative;
            &::before {
              position: absolute;
              top: 0;
              bottom: 0;
              width: 100vw;
              content: '';
            }
            ${hasInvertedLedeBackground &&
                `
              ::before {
                background-color: ${getColorToken(theme, 'colors.background.dark')};
              }
            `};
          }
        `};
  
        ${mediaWidth === 'fullbleed' &&
            `
          && {
            padding-right: 0;
            padding-left: 0;
            ${ContentHeaderLeadAssetContent} {
              padding-right: 0;
              padding-left: 0;
            }
          }
          ${ContentHeaderLeadAssetCaption} {
            ${applyGridSpacing('padding')}
          }
          @media (min-width: ${BREAKPOINTS.md}) {
            ${ContentHeaderLeadAssetContentMedia} {
              max-height: none;
              ${ResponsiveImageContainer} {
                object-fit: cover;
              }
            }
          }
        `};
  
        ${mediaWidth === 'smallrule' &&
            `
          ${ContentHeaderLeadAssetContent} {
            @media (min-width: ${BREAKPOINTS.lg}) {
              grid-column: 2 / 8;
            }
          }
        `};
      `;
    }
    else if (ledeAssetOrientation === 'portrait') {
        return `
        ${ContentHeaderResponsiveAsset},
        ${ContentHeaderResponsiveAsset} ${ResponsiveImageContainer} {
          @supports (object-fit: contain) {
            ${mediaWidth === 'small' &&
            `
              @media (min-width: ${BREAKPOINTS.lg}) {
                max-height: 530px;
              }
  
              @media (min-width: ${BREAKPOINTS.xl}) {
                max-height: 720px;
              }
  
              @media (min-width: 1440px) {
                max-height: 1200px;
              }
            `};
          }
        }
  
        // 2. css-grid: portrait images span 8 columns (start at column 3 / end at the third from last column)
        ${ContentHeaderLeadAssetContent} {
          @media (min-width: ${BREAKPOINTS.lg}) {
            grid-column: 3 / -3; // 2
            padding-right: 0;
            padding-left: 0;
          }
        }
  
        ${mediaWidth === 'small' &&
            `
          @media (min-width: ${BREAKPOINTS.lg}) {
            ${ContentHeaderLeadAssetContent} {
              grid-column: 1 / 9;
            }
          }
        `};
  
        ${mediaWidth === 'smallrule' &&
            `
          ${ContentHeaderLeadAssetContent} {
            @media (min-width: ${BREAKPOINTS.lg}) {
              grid-column: 2 / 8;
            }
          }
        `};
  
        @media print {
          ${ledeContentType === 'photo' &&
            `max-height: ${calculateSpacing(69)};`};
          ${ContentHeaderResponsiveAsset} ${ResponsiveImageContainer} {
            max-height: ${calculateSpacing(69)};
          }
        }
      `;
    }
    return '';
};
const ContentHeaderLeadAsset = styled.div.withConfig({
    displayName: 'ContentHeaderLeadAsset'
}) `
  position: relative;

  ${({ ledeAssetOrientation, mediaWidth, containerTheme, hasInvertedLedeBackground, ledeContentType, theme }) => getContentHeaderLeadAssetStyle(ledeAssetOrientation, mediaWidth, containerTheme, hasInvertedLedeBackground, ledeContentType, theme)}
`;
const ContentHeaderLedeLightboxButton = styled(Button.Utility).withConfig({
    displayName: 'ContentHeaderLedeLightboxButton'
}) `
  position: absolute;
  bottom: ${calculateSpacing(2)};
  left: ${calculateSpacing(2)};
  background: ${getColorToken('colors.interactive.base.white')};
  ${({ shouldRenderCaption }) => shouldRenderCaption && `bottom: ${calculateSpacing(7)};`}

  &:hover,
  :active,
  :focus {
    background: ${getColorToken('colors.interactive.base.black')};

    .button__icon-container {
      .icon {
        fill: ${getColorToken('colors.interactive.base.brand-primary')};
      }
    }
  }
`;
const ContentHeaderLeadRailAnchor = styled.div.withConfig({
    displayName: 'ContentHeaderLeadRailAnchor'
}) `
  position: absolute;
  top: 100%;
  margin-top: ${calculateSpacing(8)};
`;
const ContentHeaderLeadContentFullWidth = styled.div.withConfig({
    displayName: 'ContentHeaderLeadContentFullWidth'
}) `
  grid-column: full;
  background-color: ${getColorToken('colors.consumption.lead.standard.background')};
  padding: 0;
`;
const ContentHeaderLeadContentCaptionCredit = styled.figure.withConfig({
    displayName: 'ContentHeaderLeadContentCaptionCredit'
}) `
  ${applyGridSpacing('padding')}

  display: grid;
  grid-gap: 1.25rem;
  grid-auto-rows: auto;
  grid-column: main;
  align-items: center;
  margin: 0 auto;
  max-width: 1600px;
  justify-items: center;

  @media (min-width: ${BREAKPOINTS.sm}) {
    --grid-margin: ${calculateSpacing(3)};
  }

  @media (min-width: ${BREAKPOINTS.md}) {
    grid-template-columns: repeat(12, 1fr);
  }

  ${ContentHeaderLeadAssetCaption} {
    grid-column: 2/-2;
    padding: 0;
  }
`;
const ContentHeaderLeadAssetAwards = styled(Awards).withConfig({
    displayName: 'ContentHeaderLeadAssetAwards'
}) `
  ${({ hasStaticPositionedAward }) => !hasStaticPositionedAward &&
    `position: absolute;
    right: 0;
    z-index: 1;
    margin: ${calculateSpacing(2)};
    height: 100px;
    && {
      text-align: right;
    }
    box-sizing: border-box;
  `}
`;
module.exports = {
    ContentHeaderLeadAsset,
    ContentHeaderResponsiveAsset,
    ContentHeaderLeadAssetContent,
    ContentHeaderLeadAssetCaption,
    ContentHeaderLeadAssetContentMedia,
    ContentHeaderLedeLightboxButton,
    ContentHeaderLeadRailAnchor,
    ContentHeaderLeadContentFullWidth,
    ContentHeaderLeadContentCaptionCredit,
    ContentHeaderLeadAssetAwards
};
//# sourceMappingURL=LeadAsset.styles.js.map

/***/ }),

/***/ 50130:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const SocialIcons = __webpack_require__(35676);
const { calculateSpacing, getColorToken } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { SocialIconsListItem, SocialIconContainer, SocialIconExternalLink, SocialIconsList } = __webpack_require__(51000);
const iconSocialSmall = calculateSpacing(5, 'px');
const ContentHeaderSocialIcons = styled(SocialIcons).withConfig({
    displayName: 'ContentHeaderSocialIcons'
}) `
  display: none;

  @media (min-width: ${BREAKPOINTS.lg}) {
    display: table;

    &:not(.social-icons--circular) {
      background-color: ${({ theme }) => getColorToken(theme, 'colors.interactive.base.black')};
    }
  }

  ${SocialIconsListItem} {
    padding: 0;

    ${SocialIconExternalLink} ${SocialIconContainer} {
      background-color: transparent;
    }

    &:hover {
      ${SocialIconExternalLink} ${SocialIconContainer} {
        background-color: transparent;
      }
    }
  }

  ${SocialIconsList} {
    @media (min-width: ${BREAKPOINTS.lg}) {
      flex-direction: column;
      margin-left: 0;
    }
  }

  ${SocialIconExternalLink} {
    padding: 10px;
    width: ${calculateSpacing(7)};
    height: ${calculateSpacing(7)};
  }

  .social-icons__list-item--circular {
    ${SocialIconExternalLink} {
      width: ${iconSocialSmall};
      height: ${iconSocialSmall};
    }
  }
`;
module.exports = {
    ContentHeaderSocialIcons
};
//# sourceMappingURL=SocialIconShare.styles.js.map

/***/ }),

/***/ 60254:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { css } = __webpack_require__(92168);
const { applyGridSpacing } = __webpack_require__(1123);
const { getLinkStyles, removeTextDecoration, calculateSpacing, getColorToken } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { universalGridCore } = __webpack_require__(89085);
const { ContentHeaderRubricContainer } = __webpack_require__(21608);
const getPublishDateCommonStyle = (theme) => `
  ${getLinkStyles(theme, 'colors.consumption.lead.standard.context-tertiary', null)};
  ${removeTextDecoration()}
  cursor: unset;
  display: block;
  padding-top: ${calculateSpacing(1)};
  text-align: center;
  @media (min-width: ${BREAKPOINTS.md}) {
    padding-top: ${calculateSpacing(1)};
  }
`;
const defaultGridStyle = `
  ${universalGridCore(false)}
  grid-column: main;
  width: 100%;
`;
const defaultColorPaddingStyle = css `
  ${applyGridSpacing('padding')}
  color: ${getColorToken('colors.consumption.lead.standard.background')};
`;
const rowWithCommonStyle = `
  margin-left: 0;
  padding-left: 0;

  @media (min-width: ${BREAKPOINTS.lg}) {
    margin-left: 0;
    padding-left: 0;
  }

  @media (min-width: ${BREAKPOINTS.xxl}) {
    margin-left: 0;
    padding-left: 0;
  }

  &::before,
  &::after {
    @media (min-width: ${BREAKPOINTS.sm}) and (max-width: ${BREAKPOINTS.md}) {
      display: none;
    }
  }

  ${ContentHeaderRubricContainer} {
    &:only-child {
      padding-right: 0;
    }
    @media (min-width: ${BREAKPOINTS.md}) {
      margin-left: 0;
      padding-left: 0;
    }
  }
`;
module.exports = {
    getPublishDateCommonStyle,
    defaultGridStyle,
    defaultColorPaddingStyle,
    rowWithCommonStyle
};
//# sourceMappingURL=common.styles.js.map

/***/ }),

/***/ 69389:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const { asThemedComponent } = __webpack_require__(20223);
const VariedContentHeader = __webpack_require__(39416);
module.exports = asThemedComponent(asConfiguredComponent(VariedContentHeader, 'ContentHeader'));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 17384:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const ResponsiveAsset = __webpack_require__(73275);
const GalleryEmbed = __webpack_require__(47811);
const CNEVideoEmbed = __webpack_require__(59098);
const { transformLegacySources } = __webpack_require__(90072);
const { Image } = __webpack_require__(77032);
const { storyVideoPosition } = __webpack_require__(62327);
/**
 * ImageBlock component
 *
 * Image for the TextOverlay ContentHeader
 *
 * @param {object}  props - React Props
 * @param {object} [props.lede] - Optional lede image asset
 * @returns {ReactElement} <header>
 */
const ImageBlock = ({ lede = null }) => {
    if (!lede || Object.keys(lede).length === 0) {
        return null;
    }
    const isCnevideo = lede.modelName === 'cnevideo';
    const isGallery = lede.modelName === 'gallery';
    const augmentedLede = transformLegacySources(lede);
    return (React.createElement(Image, null,
        !isCnevideo && !isGallery && React.createElement(ResponsiveAsset, { ...augmentedLede }),
        isCnevideo && lede.scriptEmbedUrl && (React.createElement(CNEVideoEmbed, { shouldAutoplay: true, scriptUrl: lede.scriptEmbedUrl, videoEmbedPosition: storyVideoPosition })),
        isGallery && React.createElement(GalleryEmbed, { ...lede, showNoAdsFromParent: true })));
};
ImageBlock.propTypes = {
    lede: PropTypes.oneOfType([
        PropTypes.shape(ResponsiveAsset.propTypes),
        PropTypes.shape(GalleryEmbed.propTypes),
        PropTypes.shape(CNEVideoEmbed.propTypes)
    ])
};
ImageBlock.displayName = 'ImageBlock';
module.exports = ImageBlock;
//# sourceMappingURL=ImageBlock.js.map

/***/ }),

/***/ 60541:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const Caption = __webpack_require__(14760);
const Rubric = __webpack_require__(34187);
const NativeShareButton = __webpack_require__(77554);
const Bylines = __webpack_require__(52540);
const ResponsiveAsset = __webpack_require__(73275);
const GalleryEmbed = __webpack_require__(47811);
const CNEVideoEmbed = __webpack_require__(59098);
const SocialIcons = __webpack_require__(35676);
const CategoryEyebrow = __webpack_require__(71479);
const ImageBlock = __webpack_require__(17384);
const LiveIndicator = __webpack_require__(77938);
const { useNativeShare } = __webpack_require__(90072);
const { TextOverlayLogo, TextOverlayLogoLink, TextOverlayLogoImage, TextOverlayWrapper, ImageWrapper, Content, ContentAlign, Hed, DekWrapper, Dek, Figure, ContentDivider, ContributorImage, Accreditation, PublishDate, DekAndCaption, ContentGrid } = __webpack_require__(77032);
const Clamp = __webpack_require__(94337);
const LiveEventSponsorBlock = __webpack_require__(10705);
/**
 * TextOverlay component
 *
 * Layout positioning for the ContentHeader
 *
 * @param {object}   props - React Props
 * @param {string}  [props.bylineVariation] - Optional variation of byline.
 * @param {string}  [props.className] - Additional className to TextOvery Wrapper
 * @param {string}  [props.contentAlign] - Alignment of the content 'center' or 'left'
 * @param {object}  [props.contentHeaderCategories] - Optional object for content header categories
 * @param {string}  [props.contentHeaderCategories.title] - Optional
 * @param {Array}   [props.contentHeaderCategories.tags] - Optional
 * @param {object}  [props.contributorImage] - Optional contributor image object.
 * @param {boolean} [props.hideContributors] - Optional hide contributors
 * @param {boolean} [props.hideDangerousDek] - Optional hide dek default value is false
 * @param {object}  [props.contributors] -  Optional object containing data to create authors byline.
 * @param {string}  [props.dangerousDek] - Optional Article Dek.
 * @param {string} [props.dangerousHed] - Optional Article Hed.
 * @param {string}  [props.background] - Background over the image 'gradient' or 'solid'
 * @param {boolean} [props.hasNativeShareButton] - Use native sharing
 * @param {boolean} [props.hideLedeCaption] - hide lede image caption
 * @param {boolean} [props.hidePublishDate] - Show or hide the publishDate
 * @param {boolean} [props.hideShareButtons] - Hide the share buttons
 * @param {boolean} [props.hideRubric] - Hide the share buttons
 * @param {boolean} [props.isLiveStoryType] - Optional Flag to mark Live Story
 * @param {boolean} [props.isStoryLive] - Optional Flag to mark live story is live
 * @param {object}  [props.lede] - Optional lede image asset
 * @param {string}  [props.ledeCaption] - Optional lede image caption
 * @param {object}  [props.logoImage] - Logo image data including sources and alt text
 * @param {object}  [props.logoBaseUrl] - Logo image data including sources and alt text
 * @param {string}  [props.modifiedDate] - Optional modified date of the content
 * @param {object}  [props.numberOfLinesToClamp] - Optional to clamp number of lines
 * @param {object}    [props.preambles] - optional contributors preambles
 * @param {string}  [props.publishDate] - Publish Date.
 * @param {object}  [props.rubric] - Optional rubric.
 * @param {boolean} [props.shouldUseCustomPreambles] - Optional to use custom preambles
 * @param {object}  [props.shouldUseCutomColorLiveIndicator] - Optional to view custombackgroundColor.
 * @param {boolean} [props.showContentDivider] - Optional to show a dividing line under the hed
 * @param {boolean} [props.showContributorImage] - Optional to show ContributorImage
 * @param {boolean} [props.showLogo] - hide Logo image
 * @param {boolean} [props.showSponsorBlock] - Optional to show sponsorContents
 * @param {object}  [props.socialMedia] - Optional Social Icon Links to share article.
 * @param {object}  [props.socialDescription] - Optional social description to be used with the native share button.
 * @param {object}  [props.socialTitle] - Optional social title to be used with the native share button.
 * @param {string}  [props.theme] - Optional theme name
 * @param {object}  [props.sponsoredContentHeaderProps] - Optional sponsored text and logo details
 * @param {string}  [props.sponsorByline] - Optional sponsored byline text
 * @param {bool}    [props.showTextOverlayDek] - Show textOverlay dek
 * @param {boolean} [props.isReducedBottomMargin] - To reduce the bottom margin for the ContentGrid Grid Item
 * @param {boolean} [props.isStandardCaption] - To make the caption standard description token
 * @param {boolean} [props.isRubricInverted] - To apply inverted color token to rubric
 * @param {boolean} [props.isDekInverted] - Show inverted color token in Dek
 * @param {boolean} [props.showEnhancedPublishDate] - Show enhanced type token for PublishDate
 * @param {boolean} [props.hasDekMarginReduced] - To reduce Dek margin
 * @param {boolean} [props.shouldLimitContentWidth] - Limit the content width.
 *
 * @returns {ReactElement} <header>
 */
// eslint-disable-next-line complexity
const TextOverlay = ({ background = 'gradient', bylineVariation = 'Inverted', className = '', contentAlign = 'center', contentHeaderCategories, contributorImage, contributors, dangerousDek, dangerousHed, hasNativeShareButton, hideContributors = false, hideDangerousDek = false, hideLedeCaption = false, hidePublishDate, hideShareButtons, hideRubric, showEnhancedPublishDate = false, isLiveStoryType = false, isStoryLive = false, lede, ledeCaption, logoImage, logoBaseUrl = '/', modifiedDate, numberOfLinesToClamp = 2, preambles, publishDate, rubric, shouldUseCustomPreambles, shouldUseCutomColorLiveIndicator = false, showContentDivider = false, showContributorImage = true, showLogo, showTextOverlayDek = false, isDekInverted = false, showSponsorBlock = false, socialDescription, socialMedia, socialTitle, sponsoredContentHeaderProps, sponsorByline, theme, isReducedBottomMargin = false, isStandardCaption = false, isRubricInverted = false, hasDekMarginReduced = false, shouldLimitContentWidth = false }) => {
    const { showNativeShareButton, pageUrl } = useNativeShare(hasNativeShareButton);
    const isInverted = theme === 'inverted';
    const shouldRenderCaption = lede &&
        !hideLedeCaption &&
        ((lede.caption && lede.caption.trim()) ||
            (lede.credit && lede.credit.trim()) ||
            ledeCaption);
    const getRubricOrLiveIndicator = () => {
        if (isLiveStoryType && isStoryLive) {
            return (React.createElement(ContentAlign, { contentAlign: contentAlign },
                React.createElement(LiveIndicator, { hasBackground: true, isDiscovery: false, shouldEnableAnimation: true, shouldUseCutomColorLiveIndicator: shouldUseCutomColorLiveIndicator })));
        }
        return rubric ? (React.createElement(ContentAlign, { contentAlign: contentAlign, "data-testid": "ContentHeaderRubric" },
            React.createElement(Rubric.Inverted, { ...rubric }))) : null;
    };
    const getLiveEventSponsorBlock = () => {
        if (isLiveStoryType && showSponsorBlock) {
            return (React.createElement(LiveEventSponsorBlock, { sponsorByline: sponsorByline, sponsoredContentHeaderProps: { ...sponsoredContentHeaderProps } }));
        }
        return null;
    };
    const getLogoImage = () => {
        if (showLogo && logoImage) {
            return (React.createElement(TextOverlayLogo, null,
                React.createElement(TextOverlayLogoLink, { href: logoBaseUrl },
                    React.createElement(TextOverlayLogoImage, { ...logoImage }))));
        }
        return null;
    };
    const dateTimeProps = modifiedDate && { datetime: modifiedDate };
    return (React.createElement(TextOverlayWrapper, { className: className, "data-testid": "ContentHeader", isRubricInverted: isRubricInverted },
        React.createElement(ImageWrapper, { background: background, contentAlign: contentAlign, shouldLimitContentWidth: shouldLimitContentWidth },
            React.createElement(ImageBlock, { lede: lede }),
            getLogoImage(),
            React.createElement(ContentGrid, { contentAlign: contentAlign, isReducedBottomMargin: isReducedBottomMargin },
                React.createElement(Content, null,
                    !hideRubric && getRubricOrLiveIndicator(),
                    React.createElement(ContentAlign, { contentAlign: contentAlign },
                        React.createElement(CategoryEyebrow, { ...contentHeaderCategories })),
                    React.createElement(Hed, { dangerouslySetInnerHTML: { __html: dangerousHed }, "data-testid": "ContentHeaderHed", contentAlign: contentAlign }),
                    !hideDangerousDek && dangerousDek && showTextOverlayDek && (React.createElement(Dek, { dangerouslySetInnerHTML: { __html: dangerousDek }, contentAlign: contentAlign, "data-testid": "ContentHeaderDek", isInverted: isDekInverted || isInverted, hasDekMarginReduced: hasDekMarginReduced })),
                    showContentDivider && (React.createElement(ContentDivider, { contentAlign: contentAlign })),
                    getLiveEventSponsorBlock(),
                    showContributorImage && contributorImage && (React.createElement(ContributorImage, { contentAlign: contentAlign },
                        React.createElement(ResponsiveAsset, { ...contributorImage }))),
                    React.createElement(Accreditation, { contentAlign: contentAlign },
                        contributors && !hideContributors && (React.createElement(Bylines, { contributors: contributors, bylineVariation: bylineVariation, contentAlign: contentAlign, isCompact: false, shouldUseCustomPreambles: shouldUseCustomPreambles, preambles: preambles })),
                        !hidePublishDate && (React.createElement(PublishDate, { "data-testid": "ContentHeaderPublishDate", contentAlign: contentAlign, showEnhancedPublishDate: showEnhancedPublishDate, ...dateTimeProps }, publishDate))),
                    !hideShareButtons &&
                        (showNativeShareButton ? (React.createElement(ContentAlign, { contentAlign: contentAlign, bottomSpacing: 4 },
                            React.createElement(NativeShareButton, { hasDarkBackground: true, shareData: {
                                    url: pageUrl,
                                    title: socialTitle,
                                    text: socialDescription
                                }, theme: "inverted" }))) : (socialMedia && (React.createElement(ContentAlign, { contentAlign: contentAlign, bottomSpacing: 4 },
                            React.createElement(SocialIcons.Footer, { ...socialMedia })))))))),
        (shouldRenderCaption || (dangerousDek && !hideDangerousDek)) && (React.createElement(DekAndCaption, { isStandardCaption: isStandardCaption },
            shouldRenderCaption && (React.createElement(Figure, { contentAlign: contentAlign },
                React.createElement(Caption, { dangerousCaptionText: lede.caption, dangerousCredit: isLiveStoryType ? lede.credit || ledeCaption : lede.credit, topSpacing: 0 }))),
            !hideDangerousDek && dangerousDek && !showTextOverlayDek && (React.createElement(DekWrapper, null,
                React.createElement(Clamp, { isCollapsible: true, lines: numberOfLinesToClamp },
                    React.createElement(Dek, { dangerouslySetInnerHTML: { __html: dangerousDek }, contentAlign: contentAlign, "data-testid": "ContentHeaderDek", isInverted: isInverted }))))))));
};
TextOverlay.propTypes = {
    background: PropTypes.oneOf(['gradient', 'solid']),
    bylineVariation: PropTypes.string,
    className: PropTypes.string,
    contentAlign: PropTypes.oneOf(['center', 'left']),
    contentHeaderCategories: PropTypes.shape({
        title: PropTypes.string,
        tags: PropTypes.array
    }),
    contributorImage: PropTypes.shape(ResponsiveAsset.propTypes),
    contributors: PropTypes.shape(Bylines.propTypes.contributors),
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    hasDekMarginReduced: PropTypes.bool,
    hasNativeShareButton: PropTypes.bool,
    hideContributors: PropTypes.bool,
    hideDangerousDek: PropTypes.bool,
    hideLedeCaption: PropTypes.bool,
    hidePublishDate: PropTypes.bool,
    hideRubric: PropTypes.bool,
    hideShareButtons: PropTypes.bool,
    isDekInverted: PropTypes.bool,
    isLiveStoryType: PropTypes.bool,
    isReducedBottomMargin: PropTypes.bool,
    isRubricInverted: PropTypes.bool,
    isStandardCaption: PropTypes.bool,
    isStoryLive: PropTypes.bool,
    lede: PropTypes.oneOfType([
        PropTypes.shape(ResponsiveAsset.propTypes),
        PropTypes.shape(GalleryEmbed.propTypes),
        PropTypes.shape(CNEVideoEmbed.propTypes)
    ]),
    ledeCaption: PropTypes.string,
    logoBaseUrl: PropTypes.string,
    logoImage: PropTypes.shape(ResponsiveAsset.propTypes),
    modifiedDate: PropTypes.string,
    numberOfLinesToClamp: PropTypes.number,
    preambles: PropTypes.object,
    publishDate: PropTypes.string,
    rubric: PropTypes.shape(Rubric.propTypes),
    shouldLimitContentWidth: PropTypes.bool,
    shouldUseCustomPreambles: PropTypes.bool,
    shouldUseCutomColorLiveIndicator: PropTypes.bool,
    showContentDivider: PropTypes.bool,
    showContributorImage: PropTypes.bool,
    showEnhancedPublishDate: PropTypes.bool,
    showLogo: PropTypes.bool,
    showSponsorBlock: PropTypes.bool,
    showTextOverlayDek: PropTypes.bool,
    socialDescription: PropTypes.string,
    socialMedia: PropTypes.shape(SocialIcons.propTypes),
    socialTitle: PropTypes.string,
    sponsorByline: PropTypes.string,
    sponsoredContentHeaderProps: PropTypes.shape({
        campaignUrl: PropTypes.string,
        sponsorLogo: PropTypes.shape(ResponsiveAsset.propTypes),
        sponsorName: PropTypes.string
    }),
    theme: PropTypes.oneOf(['standard', 'inverted', 'special'])
};
TextOverlay.displayName = 'TextOverlay';
module.exports = TextOverlay;
//# sourceMappingURL=TextOverlay.js.map

/***/ }),

/***/ 27308:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const TextOverlay = __webpack_require__(60541);
module.exports = TextOverlay;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 77032:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { getColorToken, getTypographyStyles, calculateSpacing, minMaxScreen, minScreen, maxScreen, getColorStyles } = __webpack_require__(26865);
const { maxThresholds } = __webpack_require__(99906);
const { SocialIconsList } = __webpack_require__(51000);
const { BREAKPOINTS } = __webpack_require__(96472);
const { BaseText, BaseLink } = __webpack_require__(76955);
const { SITE_HEADER_TOP_HEIGHT, SITE_HEADER_TOP_STICKY_HEIGHT_MD, SITE_HEADER_TOP_STICKY_HEIGHT_LG } = __webpack_require__(27985);
const Grid = __webpack_require__(86659);
const { GridItem } = __webpack_require__(40653);
const { universalGridCore } = __webpack_require__(89085);
const { applyGridSpacing } = __webpack_require__(1123);
const ResponsiveAsset = __webpack_require__(73275);
const { CaptionText } = __webpack_require__(38860);
const { RubricName, RubricLink } = __webpack_require__(6613);
const { cssVariablesGrid } = __webpack_require__(1123);
const cssToHideSocialIcons = (socialIconsToHide) => socialIconsToHide
    .map((socialShareKey) => `
        .social-icons__list-item--${socialShareKey} {
          display: none;
        }
    `)
    .join('\n');
const TextOverlayWrapper = styled.header.withConfig({
    displayName: 'TextOverlayWrapper'
}) `
  .responsive-clip {
    height: 100%;
  }
  overflow: hidden;

  ${({ isRubricInverted, theme }) => isRubricInverted &&
    css `
      ${RubricLink}, ${RubricName} {
        ${getColorStyles(theme, 'color', 'colors.consumption.lead.inverted.context-signature')}
      }
    `}
`;
const Accreditation = styled.div.withConfig({ displayName: 'Accreditation' }) `
  ${({ contentAlign }) => contentAlign === 'center'
    ? `margin: ${calculateSpacing(2)} auto`
    : `margin: ${calculateSpacing(2)} 0`}
`;
const PublishDate = styled.time
    .withConfig({ displayName: 'PublishDate' })
    .attrs(({ datetime }) => ({ dateTime: datetime })) `
  ${({ theme, showEnhancedPublishDate }) => getTypographyStyles(theme, showEnhancedPublishDate
    ? 'typography.definitions.globalEditorial.context-tertiary'
    : 'typography.definitions.globalEditorial.accreditation-core')}
  display: block;
  margin: ${calculateSpacing(1)} 0 ${calculateSpacing(4)};
  text-align: ${({ contentAlign }) => contentAlign};
  color: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.inverted.context-tertiary')};
`;
const ContentGrid = styled(Grid.WithMargins).withConfig({
    displayName: 'ContentGrid'
}) `
  > ${GridItem} {
    grid-column: 1 / span 4;
    margin-bottom: 4.5rem;
    @media (min-width: ${BREAKPOINTS.md}) {
      grid-column: ${({ contentAlign }) => contentAlign === 'left' ? '1 / span 10' : '2 / span 10'};
    }
  }

  ${({ isReducedBottomMargin }) => isReducedBottomMargin &&
    `
    > ${GridItem} {
      margin-bottom: ${calculateSpacing(4)};

      ${Accreditation}, ${PublishDate} {
        margin-bottom: 0;
      }

      ${minScreen(BREAKPOINTS.lg)} {
        margin-bottom: ${calculateSpacing(8)};
      }
    }
    `}
`;
const ImageWrapper = styled.div.withConfig({ displayName: 'ImageWrapper' }) `
  display: flex;
  position: relative;
  align-items: flex-end;
  justify-content: ${({ contentAlign }) => contentAlign};

  @media (orientation: landscape) {
    display: grid;
    min-height: 400px;
  }

  @media (max-width: ${BREAKPOINTS.md}) {
    display: grid;
    min-height: 667px;
  }

  @media (min-width: ${BREAKPOINTS.md}) {
    display: grid;
    height: calc(
      100vh - ${SITE_HEADER_TOP_HEIGHT} - ${SITE_HEADER_TOP_STICKY_HEIGHT_MD}
    );
  }

  @media (min-width: ${BREAKPOINTS.lg}) {
    display: grid;
    height: calc(
      100vh - ${SITE_HEADER_TOP_HEIGHT} - ${SITE_HEADER_TOP_STICKY_HEIGHT_LG}
    );
  }

  @media (min-width: ${BREAKPOINTS.xl}) {
    display: grid;
    min-height: 720px;
  }

  ${({ shouldLimitContentWidth }) => shouldLimitContentWidth &&
    `
      ${cssVariablesGrid()}
      ${minScreen(BREAKPOINTS.lg)} {
        grid-template-columns: repeat(12, 1fr);
        gap: var(--grid-gap);
      }

      ${ContentGrid} {
        ${minScreen(BREAKPOINTS.lg)} {
          padding: 0;
        }

        ${minMaxScreen(BREAKPOINTS.lg, `${maxThresholds.xl}px`)} {
          grid-column: 3 / span 8;
        }

        ${minScreen(BREAKPOINTS.xl)} {
          grid-column: 4 / span 6;
        }
      }
    `}

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: ${({ background }) => background === 'gradient'
    ? 'linear-gradient(to top, rgb(0, 0, 0) 0, transparent 65%)'
    : 'rgba(0, 0, 0, 0.65)'};
    content: '';
    pointer-events: none;
  }
`;
const Image = styled.div.withConfig({ displayName: 'Image' }) `
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .responsive-asset {
    &::before {
      display: block;
      width: 100%;
      content: '';
    }
  }

  > *,
  picture,
  .responsive-asset picture, /* set to override the css specifity set on this component  */
  img {
    object-fit: cover;
    object-position: top;
    width: 100%;
    height: 100%;
  }

  picture {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
`;
const ContentAlign = styled.div.withConfig({ displayName: 'ContentAlign' }) `
  display: flex;
  flex-wrap: wrap;
  justify-content: ${({ contentAlign }) => contentAlign};
  width: 100%;

  > .social-icons--footer {
    ${SocialIconsList} {
      @media (min-width: ${BREAKPOINTS.md}) {
        position: relative; /* for bookmark onboarding alert placement */
      }
    }
  }

  ${({ socialIconsToHide }) => socialIconsToHide &&
    `
      ${maxScreen(BREAKPOINTS.lg)} {
        ${cssToHideSocialIcons(socialIconsToHide)}
      }
    `}

  ${({ bottomSpacing }) => bottomSpacing && `margin-bottom: ${calculateSpacing(bottomSpacing)};`}
`;
const Content = styled.div.withConfig({ displayName: 'Content' }) `
  position: relative;
  z-index: 2;
`;
const Hed = styled(BaseText).withConfig({ displayName: 'Hed' }) `
  text-align: ${({ contentAlign }) => contentAlign};
`;
Hed.defaultProps = {
    as: 'h1',
    colorToken: 'colors.consumption.lead.inverted.heading',
    topSpacing: 2,
    typeIdentity: 'typography.definitions.consumptionEditorial.hed-standard'
};
const Figure = styled(BaseText).withConfig({ displayName: 'Figure' }) `
  grid-column: 1 / span 4;
  text-align: ${({ contentAlign }) => contentAlign};

  @media (min-width: ${BREAKPOINTS.md}) {
    grid-column: 1 / span 12;
  }
`;
Figure.defaultProps = {
    as: 'figure',
    colorToken: 'colors.consumption.lead.standard.description',
    topSpacing: 2,
    typeIdentity: 'typography.definitions.consumptionEditorial.description-embed'
};
const DekAndCaption = styled('div').withConfig({
    displayName: 'DekAndCaption'
}) `
  padding-top: ${calculateSpacing(1, 'px')};
  ${universalGridCore()}
  ${applyGridSpacing('padding')}

  ${({ isStandardCaption, theme }) => isStandardCaption &&
    `
      ${Figure} {
        text-align: left;
        margin-top: 0;

        ${minScreen(BREAKPOINTS.lg)} {
          grid-column: 2 / -2;
        }
      }
      ${CaptionText} {
        ${getColorStyles(theme, 'color', 'colors.consumption.lead.standard.description')};
      }
    `}
`;
const DekWrapper = styled.div.withConfig({ displayName: 'DekWrapper' }) `
  grid-column: 1 / span 4;
  text-align: ${({ contentAlign }) => contentAlign};

  @media (min-width: ${BREAKPOINTS.md}) {
    grid-column: 3 / span 8;
  }
`;
const Dek = styled(BaseText).withConfig({ displayName: 'Dek' }) `
  text-align: ${({ contentAlign }) => contentAlign};

  ${({ isInverted, theme }) => isInverted &&
    `
    color: ${getColorToken(theme, 'colors.consumption.lead.inverted.description')};
  `}

  ${({ hasDekMarginReduced }) => hasDekMarginReduced &&
    `
      margin: ${calculateSpacing(2)} 0 0 0;
    `}
`;
Dek.defaultProps = {
    as: 'p',
    bottomSpacing: 4,
    colorToken: 'colors.consumption.lead.standard.description',
    topSpacing: 3,
    typeIdentity: 'typography.definitions.consumptionEditorial.description-core'
};
const ContentDivider = styled.span.withConfig({
    displayName: 'ContentDivider'
}) `
  display: block;
  margin-top: ${calculateSpacing(4)};
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.standard.accent')};
  width: 100px;
  ${({ contentAlign }) => contentAlign === 'center' && `margin: ${calculateSpacing(4)} auto 0`}
`;
const ContributorImage = styled.div.withConfig({
    displayName: 'ContributorImage'
}) `
  display: block;
  margin-top: ${calculateSpacing(4)};
  border-radius: 50%;
  min-width: 60px;
  max-width: 66px;
  min-height: 60px;
  max-height: 66px;
  overflow: hidden;
  ${({ contentAlign }) => contentAlign === 'center' && `margin: ${calculateSpacing(4)} auto 0`}
`;
const TextOverlayLogoImage = styled(ResponsiveAsset).withConfig({
    displayName: 'TextOverlayLogoImage'
}) `
  grid-column: 1 / span 4;

  img {
    max-width: 100%;
    height: 100px;
    vertical-align: bottom;
  }
`;
const TextOverlayLogoLink = styled(BaseLink).withConfig({
    displayName: 'TextOverlayLogoLink'
}) `
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: ${calculateSpacing(2)};

  @media (max-width: ${BREAKPOINTS.md}) {
    padding-right: calc(1 * ${calculateSpacing(3)});
    padding-left: calc(1 * ${calculateSpacing(3)});
  }
`;
const TextOverlayLogo = styled.div.withConfig({
    displayName: 'TextOverlayLogo'
}) `
  margin: auto;
  margin-top: 1.5rem;
`;
module.exports = {
    TextOverlayLogo,
    TextOverlayLogoLink,
    TextOverlayLogoImage,
    TextOverlayWrapper,
    ImageWrapper,
    Image,
    ContentAlign,
    Content,
    Hed,
    DekAndCaption,
    DekWrapper,
    Dek,
    Figure,
    ContentDivider,
    ContributorImage,
    Accreditation,
    PublishDate,
    ContentGrid
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 50459:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { AddressBlockWrapper, HeaderContactInformation, HeaderSocialInformation, HeaderAddressDetails } = __webpack_require__(1757);
const EmailIcon = __webpack_require__(57942);
const InstagramIcon = __webpack_require__(7994);
const FacebookIcon = __webpack_require__(69192);
const PinterestIcon = __webpack_require__(24888);
const LinkedInIcon = __webpack_require__(25534);
const TwitterIcon = __webpack_require__(33189);
const { isIOSDevice } = __webpack_require__(72362);
const AddressBlock = ({ address, email, phone, socialMedia, link }) => {
    if (!address && !phone && !email) {
        return null;
    }
    const { street, city, state, postalCode, country } = address;
    // Check which address item is first so you do not have a comma before first item
    const addressValues = [street, city, state, postalCode, country];
    const nonEmptyAddressValues = [];
    addressValues.forEach((item) => {
        if (item) {
            nonEmptyAddressValues.push(item);
        }
    });
    const socialMediaIcons = {
        Instagram: InstagramIcon,
        Facebook: FacebookIcon,
        Pinterest: PinterestIcon,
        LinkedIn: LinkedInIcon,
        Twitter: TwitterIcon
    };
    const openMapInMobile = (e) => {
        e.preventDefault();
        if (nonEmptyAddressValues?.length > 0) {
            if (isIOSDevice()) {
                /* if iOS, open in Apple Maps */
                window.open(`maps://maps.apple.com/maps?q=${nonEmptyAddressValues}`);
            }
            else {
                /* else use Google Maps */
                window.open(`https://maps.google.com?q=${nonEmptyAddressValues}`);
            }
        }
    };
    // Check and trim https:// or http exist and add www. if its missing.
    let checkedUrl = link.replace(/^(https?:|)\/\//, '');
    checkedUrl = checkedUrl.includes('www.') ? checkedUrl : `www.${checkedUrl}`;
    return (React.createElement(AddressBlockWrapper, null,
        address && (React.createElement(HeaderAddressDetails, { "data-testid": "HeaderAddressDetails", href: "", onClick: (e) => openMapInMobile(e) },
            React.createElement("div", { className: "StreetAndCity" },
                street && React.createElement("span", { "data-testid": "HeaderAddressStreet" }, street),
                city && (React.createElement("span", { "data-testid": "HeaderAddressCity" },
                    nonEmptyAddressValues[0] !== city && ', ',
                    city,
                    nonEmptyAddressValues[0] !== state && ', '))),
            React.createElement("div", { className: "StatePostalAndCountry" },
                state && React.createElement("span", { "data-testid": "HeaderAddressState" }, state),
                postalCode && (React.createElement("span", { "data-testid": "HeaderAddressPostalCode" },
                    nonEmptyAddressValues[0] !== postalCode && ', ',
                    postalCode)),
                country && (React.createElement("span", { "data-testid": "HeaderAddressCountry" },
                    nonEmptyAddressValues[0] !== country && ', ',
                    country))))),
        React.createElement(HeaderContactInformation, null,
            phone && (React.createElement("div", null,
                React.createElement("a", { "data-testid": "HeaderAddressPhone", href: `tel:${phone}`, "aria-label": "Opens in a new window", rel: "nofollow noopener noreferrer", target: "_blank" }, phone))),
            link && (React.createElement("a", { "data-testid": "HeaderAddressWebUrl", href: link, "aria-label": "Opens in a new window", rel: "nofollow noopener noreferrer", target: "_blank" }, checkedUrl))),
        React.createElement(HeaderSocialInformation, null,
            email && (React.createElement("a", { "data-testid": "HeaderAddressEmail", href: `mailto:${email}`, "aria-label": "Opens in a new window", rel: "nofollow noopener noreferrer", target: "_blank" },
                React.createElement(EmailIcon, null))),
            socialMedia?.length > 0 &&
                socialMedia.map((media, index) => {
                    const IconComponent = socialMediaIcons[media.network];
                    return (IconComponent && (React.createElement("a", { key: index, "data-testid": `HeaderAddress${media.network}`, href: media.handle, "aria-label": `Opens ${media.network} in a new window`, rel: "nofollow noopener noreferrer", target: "_blank" },
                        React.createElement(IconComponent, null))));
                }))));
};
AddressBlock.propTypes = {
    address: PropTypes.object,
    email: PropTypes.string,
    link: PropTypes.string,
    phone: PropTypes.string,
    socialMedia: PropTypes.array
};
module.exports = AddressBlock;
//# sourceMappingURL=AddressBlock.js.map

/***/ }),

/***/ 71479:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const Categories = __webpack_require__(95865);
/**
 * Wrapper to check the flag and data are set for eyebrow
 *
 * @param  {boolean} [props.hasCategoryEyebrow] - the flag to display or not
 * @param  {Array} [props.tags] - the array of tags
 * @param  {string} [props.title] - the title
 * @returns {ReactElement|false} - The eyebrow category list
 */
// TODO: this logic we can move to <Categories />
const CategoryEyebrow = ({ hasCategoryEyebrow, tags, title }) => hasCategoryEyebrow && tags?.length > 0 ? (React.createElement(Categories, { title: title, tags: tags })) : null;
CategoryEyebrow.propTypes = {
    hasCategoryEyebrow: PropTypes.bool,
    tags: PropTypes.array,
    title: PropTypes.string
};
module.exports = CategoryEyebrow;
//# sourceMappingURL=CategoryEyebrow.js.map

/***/ }),

/***/ 89656:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { ContentHeaderRubricIssueDate } = __webpack_require__(21608);
/**
 * The issue date display
 *
 * @param {boolean} props.hideIssueDate - Show or hide the issue date
 * @param {boolean} props.hideIssueDatePipeSeparator - Show or hide pipe separator between issue date and rubric
 * @param {string} props.issueDate - the Issue Date
 * @param {string} props.issueLink - Optional link for this article's issue
 * @param {boolean} props.showIssueCopyByDate - Optional show the text "Issue" by the issue date.
 * @returns {ReactElement|null} <Rubric.Item>
 */
const IssueDate = ({ hideIssueDate, hideIssueDatePipeSeparator, issueDate, issueLink, showIssueCopyByDate }) => {
    if (hideIssueDate || !issueDate) {
        return null;
    }
    return (React.createElement(ContentHeaderRubricIssueDate, { name: `${issueDate}${showIssueCopyByDate ? ' Issue' : ''}`, url: issueLink, hideIssueDatePipeSeparator: hideIssueDatePipeSeparator }));
};
IssueDate.propTypes = {
    hideIssueDate: PropTypes.bool,
    hideIssueDatePipeSeparator: PropTypes.bool,
    issueDate: PropTypes.string,
    issueLink: PropTypes.string,
    showIssueCopyByDate: PropTypes.bool
};
module.exports = IssueDate;
//# sourceMappingURL=IssueDate.js.map

/***/ }),

/***/ 10705:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { SponsorContentContainer, SponsorImage, SponsoredContent, SponsoredContentCampaignLink } = __webpack_require__(61221);
const ResponsiveAsset = __webpack_require__(73275);
/**
 * Live Event Sponsor block
 *
 * @param {object} [props.sponsorLogo] - Optional sponsor logo image
 * @param {string} [props.sponsorName] - Optional sponsor name
 * @param {string} [props.campaignUrl] - The link to the sponsor's ad campaign or main site
 * @returns {ReactElement}
 */
const LiveEventSponsorBlock = ({ sponsorByline, sponsoredContentHeaderProps, theme = 'inverted' }) => {
    const { sponsorLogo, sponsorName, campaignUrl } = sponsoredContentHeaderProps;
    if (!sponsorName || !sponsorByline) {
        return null;
    }
    const sponsorBylineText = `${sponsorByline} ${sponsorName}`;
    return (React.createElement(SponsorContentContainer, null,
        React.createElement(SponsoredContentCampaignLink, { additionalRelVals: ['sponsored'], href: campaignUrl },
            React.createElement(SponsorImage, { ...sponsorLogo }),
            React.createElement(SponsoredContent, { containerTheme: theme }, sponsorBylineText))));
};
LiveEventSponsorBlock.propTypes = {
    sponsorByline: PropTypes.string,
    sponsoredContentHeaderProps: PropTypes.shape({
        campaignUrl: PropTypes.string,
        sponsorLogo: PropTypes.shape(ResponsiveAsset.propTypes),
        sponsorName: PropTypes.string
    }),
    theme: PropTypes.oneOf(['standard', 'inverted', 'special'])
};
module.exports = LiveEventSponsorBlock;
//# sourceMappingURL=LiveEventSponsorBlock.js.map

/***/ }),

/***/ 61221:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { BREAKPOINTS } = __webpack_require__(96472);
const { calculateSpacing, getColorToken, getTypographyStyles } = __webpack_require__(26865);
const ResponsiveAsset = __webpack_require__(73275);
const { SpanWrapper } = __webpack_require__(18117);
const ExternalLink = __webpack_require__(39832);
const SponsorContentContainer = styled.div.withConfig({
    displayName: 'SponsorContentContainer'
}) `
  margin-top: ${calculateSpacing(3)};
  text-align: center;
  ${SpanWrapper} {
    display: inline-flex;
    margin-top: 0;
    margin-bottom: 0;
    width: 66px;
  }
`;
const getSponsoredBorderColor = (containerTheme, theme) => {
    if (containerTheme === 'inverted' || containerTheme === 'special') {
        return `
      border-color: ${getColorToken(theme, 'colors.consumption.lead.inverted.divider')};
    `;
    }
    return `
    border-color: ${getColorToken(theme, 'colors.consumption.lead.standard.divider')};
  `;
};
const SponsorImage = styled(ResponsiveAsset).withConfig({
    displayName: 'SponsorImage'
}) `
  margin-right: auto;
  margin-left: auto;

  img {
    border: 1px solid;
    border-radius: 50%;
    ${({ containerTheme, theme }) => getSponsoredBorderColor(containerTheme, theme)}
    width: 64px;
    height: 64px;
  }
`;
const getColorBasedOnTheme = (containerTheme, theme) => {
    if (containerTheme === 'inverted' || containerTheme === 'special') {
        return `
      color: ${getColorToken(theme, 'colors.consumption.lead.inverted.syndication')};
    `;
    }
    return `
    color: ${getColorToken(theme, 'colors.consumption.lead.standard.syndication')};
  `;
};
const SponsoredContent = styled.div.withConfig({
    displayName: 'SponsoredContent'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.syndication')}

  display: block;
  margin: ${calculateSpacing(2, 'px')} 0 ${calculateSpacing(2, 'px')};
  ${({ containerTheme, theme }) => getColorBasedOnTheme(containerTheme, theme)}

  @media (min-width: 0) and (max-width: ${BREAKPOINTS.md}) {
    margin: ${calculateSpacing(1.5, 'px')} 0 ${calculateSpacing(1.5, 'px')};
  }
`;
const SponsoredContentCampaignLink = styled(ExternalLink).withConfig({
    displayName: 'SponsoredContentCampaignLink'
}) `
  text-decoration: none;
`;
module.exports = {
    SponsorContentContainer,
    SponsorImage,
    SponsoredContent,
    SponsoredContentCampaignLink
};
//# sourceMappingURL=LiveEventSponsorBlock.styles.js.map

/***/ }),

/***/ 33198:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { ContentHeaderTitleBlockPublishDate } = __webpack_require__(1757);
/**
 * The publish date block
 *
 * @param {boolean} props.hasExtraSpaceBetweenSeparator - If `hasExtraSpaceBetweenSeparator` is set to true, there is a bigger margin between the |
 * @param {boolean} [props.hidePublishDate] - Toggles the display of publishDate
 * @param {string} props.publishDate - Publish Date.
 * @param {string} [props.modifiedDate] - Optional modified date of the content
 * @returns {ReactElement|null} <time>
 */
const PublishDateBlock = ({ hasExtraSpaceBetweenSeparator, hidePublishDate, publishDate, modifiedDate }) => {
    if (hidePublishDate || !publishDate) {
        return null;
    }
    const dateTimeProps = modifiedDate && { datetime: modifiedDate };
    return (React.createElement(ContentHeaderTitleBlockPublishDate, { hasExtraSpaceBetweenSeparator: hasExtraSpaceBetweenSeparator, "data-testid": "ContentHeaderPublishDate", ...dateTimeProps }, publishDate));
};
PublishDateBlock.propTypes = {
    hasExtraSpaceBetweenSeparator: PropTypes.bool,
    hidePublishDate: PropTypes.bool,
    modifiedDate: PropTypes.string,
    publishDate: PropTypes.string
};
module.exports = PublishDateBlock;
//# sourceMappingURL=PublishDateBlock.js.map

/***/ }),

/***/ 67086:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const LiveIndicator = __webpack_require__(77938);
const Rubric = __webpack_require__(34187);
const TitleBlockByline = __webpack_require__(56174);
const IssueDate = __webpack_require__(89656);
const PublishDateBlock = __webpack_require__(33198);
const { ContentHeaderSponsorName, ContentHeaderRubricBlock, ContentHeaderRubricDateBlock, ContentHeaderRubricPrice, ContentHeaderRubricContainer, ContentHeaderLiveIndicator } = __webpack_require__(21608);
/**
 * The rubric portion of the title block
 *
 * @param {string} [props.authorsPosition] - Optional authors position relative to title.
 * @param {string} props.bylineVariation - Optional variation of byline.
 * @param {object} [props.contributors] -  Optional object containing data to create authors byline.
 * @param {boolean} props.hasExtraSpaceBetweenSeparator - If `hasExtraSpaceBetweenSeparator` is set to true, there is a bigger margin between the |
 * @param {boolean} [props.hasNoRowPadding] - Sets left padding to zero
 * @param {boolean} props.hideAdaptationByline - Optional parameter to hide adaptation by author's by line.
 * @param {boolean} props.hideIssueDate - Show or hide the issue date
 * @param {boolean} props.hideIssueDatePipeSeparator - Show or hide pipe separator between issue date and rubric
 * @param {boolean} [props.hidePublishDate] - Toggles the display of publishDate
 * @param {boolean} [props.hideRubric] - Toggles the display of rubric
 * @param {boolean} [props.isStoryLive] - Optional flag to mark live story is live
 * @param {string} props.issueDate - the Issue Date
 * @param {string} props.issueLink - Optional link for this article's issue
 * @param {string} [props.modifiedDate] - Optional modified date of the content
 * @param {string} props.publishDate - Publish Date.
 * @param {string} props.publishDatePosition - Sets position of publish at the top or the bottom of content header
 * @param {object} props.rubric - The rubric for the piece of content
 * @param {string} [props.rubricVariation] - The name of the variation for Rubric to use
 * @param {boolean} props.showIssueCopyByDate - Optional show the text "Issue" by the issue date.
 * @param  {string} [props.sponsorName] - Optional sponsor name
 *
 * @returns {ReactElement|false} <div>
 */
// eslint-disable-next-line complexity
const RubricBlock = ({ authorsPosition, bylineVariation, contributors, hasExtraSpaceBetweenSeparator, hideAdaptationByline = false, hideIssueDate, hideIssueDatePipeSeparator, hidePublishDate, hideRubric, isLiveStoryType = false, isStoryLive = false, issueDate, issueLink, modifiedDate, price, publishDate, publishDatePosition, rubric, rubricVariation, showIssueCopyByDate, sponsorName }) => {
    const RubricVariation = Rubric[rubricVariation] || Rubric;
    const hasIssueDateAndRubricBlock = !hideIssueDate && issueDate && rubric;
    const showPublishDate = (authorsPosition === 'above' || publishDatePosition === 'top') &&
        !sponsorName;
    const getLiveIndicator = () => {
        // define condition whether to show the live indicator or not
        return (React.createElement(ContentHeaderLiveIndicator, null,
            React.createElement(LiveIndicator, { hasBackground: true, isDiscovery: false, shouldEnableAnimation: true })));
    };
    if (isLiveStoryType && isStoryLive)
        return getLiveIndicator();
    else if (!(rubric || issueDate || contributors) || hideRubric) {
        return null;
    }
    return ((rubric || issueDate || contributors) && (React.createElement(ContentHeaderRubricBlock, { hasIssueDateAndRubricBlock: hasIssueDateAndRubricBlock, "data-testid": "ContentHeaderRubric" },
        authorsPosition === 'above' && (React.createElement(TitleBlockByline, { bylineVariation: bylineVariation, contributors: contributors, hideAdaptationByline: hideAdaptationByline })),
        React.createElement(ContentHeaderRubricDateBlock, { "data-testid": "ContentHeaderRubricDateBlock" },
            rubric && (React.createElement(ContentHeaderRubricContainer, { ...rubric, isVerticalAlign: authorsPosition === 'above' ||
                    publishDatePosition === 'top' ||
                    hasIssueDateAndRubricBlock, as: RubricVariation })),
            price && (React.createElement(ContentHeaderRubricPrice, null,
                "/ ",
                price)),
            sponsorName && (React.createElement(ContentHeaderSponsorName, { hasExtraSpaceBetweenSeparator: hasExtraSpaceBetweenSeparator, items: [{ name: sponsorName }] })),
            showPublishDate && (React.createElement(PublishDateBlock, { hasExtraSpaceBetweenSeparator: hasExtraSpaceBetweenSeparator, hidePublishDate: hidePublishDate, modifiedDate: modifiedDate, publishDate: publishDate }))),
        React.createElement(IssueDate, { hideIssueDate: hideIssueDate, hideIssueDatePipeSeparator: hideIssueDatePipeSeparator, issueDate: issueDate, issueLink: issueLink, showIssueCopyByDate: showIssueCopyByDate }))));
};
RubricBlock.propTypes = {
    authorsPosition: PropTypes.string,
    bylineVariation: PropTypes.string,
    contributors: PropTypes.object,
    hasExtraSpaceBetweenSeparator: PropTypes.bool,
    hasNoRowPadding: PropTypes.bool,
    hideAdaptationByline: PropTypes.bool,
    hideIssueDate: PropTypes.bool,
    hideIssueDatePipeSeparator: PropTypes.bool,
    hidePublishDate: PropTypes.bool,
    hideRubric: PropTypes.bool,
    isLiveStoryType: PropTypes.bool,
    isStoryLive: PropTypes.bool,
    issueDate: PropTypes.string,
    issueLink: PropTypes.string,
    modifiedDate: PropTypes.string,
    price: PropTypes.string,
    publishDate: PropTypes.string,
    publishDatePosition: PropTypes.string,
    rubric: PropTypes.shape(Rubric.propTypes),
    rubricVariation: PropTypes.string,
    showIssueCopyByDate: PropTypes.bool,
    sponsorName: PropTypes.string
};
module.exports = RubricBlock;
//# sourceMappingURL=RubricBlock.js.map

/***/ }),

/***/ 21608:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { getColorToken, calculateSpacing, getTypographyStyles, getLinkStyles } = __webpack_require__(26865);
const Byline = __webpack_require__(77813);
const Rubric = __webpack_require__(34187);
const { RubricLink } = __webpack_require__(6613);
const colorsConsumptionLeadStandardContexTertiary = 'colors.consumption.lead.standard.context-tertiary';
const ContentHeaderSponsorName = styled(Byline).withConfig({
    displayName: 'ContentHeaderSponsorName'
}) `
  ${getTypographyStyles('typography.definitions.globalEditorial.accreditation-core')};
  color: ${getColorToken('colors.consumption.lead.standard.accreditation')};

  ::before {
    margin: 0
      ${({ hasExtraSpaceBetweenSeparator }) => hasExtraSpaceBetweenSeparator
    ? `${calculateSpacing(1)}`
    : `${calculateSpacing(0.5)}`};
    content: '|';
  }
`;
const ContentHeaderRubricBlock = styled.div.withConfig({
    displayName: 'ContentHeaderRubricBlock'
}) `
  ${getTypographyStyles('typography.definitions.globalEditorial.context-primary')};
  line-height: 1;

  > * {
    display: inline-block;
  }

  ${({ hasIssueDateAndRubricBlock }) => hasIssueDateAndRubricBlock &&
    `
      @media (min-width: 0) and (max-width: 767px) {
        line-height: 1.4;
      }
    `}
`;
const ContentHeaderRubricPrice = styled.span.withConfig({
    displayName: 'ContentHeaderRubricPrice'
}) `
  margin-left: ${calculateSpacing(0.5)};
  vertical-align: middle;
`;
const ContentHeaderRubricContainer = styled.div.withConfig({
    displayName: 'ContentHeaderRubricContainer'
}) `
  text-align: center;
  line-height: 1;

  ${({ isVerticalAlign }) => isVerticalAlign &&
    `
      a {
        vertical-align: baseline;
      }
    `}

  .rubric--with-bg {
    margin-top: 0;
    margin-left: ${calculateSpacing(2)};
  }

  .rubric--with-bg::before {
    margin-right: 0;
    content: '';
  }
`;
const ContentHeaderRubricDateBlock = styled.div.withConfig({
    displayName: 'ContentHeaderRubricDateBlock'
}) `
  && {
    > * {
      display: inline-block;
    }
  }
`;
const ContentHeaderRubricIssueDate = styled(Rubric.Item).withConfig({
    displayName: 'ContentHeaderRubricIssueDate'
}) `
  text-align: center;
  line-height: 1;

  &::before {
    display: inline-block;
    margin: 0 ${calculateSpacing(2)};
    color: ${getColorToken(colorsConsumptionLeadStandardContexTertiary)};
    content: '|';
  }

  color: ${getColorToken(colorsConsumptionLeadStandardContexTertiary)};

  ${RubricLink} {
    ${({ theme }) => getLinkStyles(theme, colorsConsumptionLeadStandardContexTertiary, colorsConsumptionLeadStandardContexTertiary, 'global')};
    color: ${getColorToken(colorsConsumptionLeadStandardContexTertiary)};
  }

  ${({ hideIssueDatePipeSeparator }) => hideIssueDatePipeSeparator &&
    `
    &::before {
      margin: 0 ${calculateSpacing(2)} 0 0;
      content: '';
    }
  `}
`;
const ContentHeaderLiveIndicator = styled.div.withConfig({
    displayName: 'ContentHeaderLiveIndicator'
}) `
  text-align: center;
`;
module.exports = {
    ContentHeaderSponsorName,
    ContentHeaderRubricBlock,
    ContentHeaderRubricDateBlock,
    ContentHeaderRubricPrice,
    ContentHeaderRubricContainer,
    ContentHeaderRubricIssueDate,
    ContentHeaderLiveIndicator
};
//# sourceMappingURL=RubricBlock.styles.js.map

/***/ }),

/***/ 19977:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const { asConfiguredComponent } = __webpack_require__(12892);
const ItemsCount = __webpack_require__(78372);
const Rubric = __webpack_require__(34187);
const TitleBlockByline = __webpack_require__(56174);
const PublishDateBlock = __webpack_require__(33198);
const RubricBlock = __webpack_require__(67086);
const CategoryEyebrow = __webpack_require__(71479);
const AddressBlock = __webpack_require__(50459);
const LiveIndicator = __webpack_require__(77938);
const { ContentHeaderContentDivider, ContentHeaderLowerBylineDateBlock, ContentHeaderItemCount, ContentHeaderHed, ContentHeaderTitleBlockWrapper, PodcastButtonWrapper, PodcastButton, PodcastLink } = __webpack_require__(1757);
const translationsPodcast = (__webpack_require__(40133)/* ["default"] */ .A);
const getSponsorName = (contentSponsorNames) => contentSponsorNames.length > 0 ? contentSponsorNames[0] : null;
/**
 * A component containing the title, rubric and items count (where relevant)
 *
 * @param {object} props - React props
 * @param {string} [props.authorsPosition] - Optional authors position relative to title.
 * @param {string} [props.business] - Optional address details of business.
 * @param {string} props.bylineVariation - Optional variation of byline.
 * @param {object} props.contentHeaderCategories - Object containing category tags to display in the secondary eyebrow
 * @param {string[]} props.contentSponsorNames - Array of authors of sponsored content
 * @param {object} [props.contributors] -  Optional object containing data to create authors byline.
 * @param {string} props.dividerType - If `hasDesktopTitleBlockDivider` is set to true, the type of dividers to display
 * @param {boolean} props.hasContentDivider - Whether to include a dividing rule *
 * @param {boolean} [props.hasDesktopTitleBlockDivider] - sets divider lines
 * @param {boolean} props.hasDivider - Flag to show ContentHeader Divider
 * @param {boolean} props.hasExtraSpaceBetweenSeparator - If `hasExtraSpaceBetweenSeparator` is set to true, there is a bigger margin between the |
 * @param {boolean} props.hideAdaptationByline - Optional parameter to hide adaptation by author's by line.
 * @param {boolean} props.hideIssueDate - Show or hide the issue date
 * @param {boolean} props.hideIssueDatePipeSeparator - Show or hide pipe separator between issue date and rubric
 * @param {boolean} [props.hasNoRowPadding] - Sets left padding to zero
 * @param {boolean} [props.hidePublishDate] - Toggles the display of publishDate
 * @param {boolean} props.hideRubric - Toggles the display of Rubric
 * @param {boolean} [props.isBusinessContentHeader] - Optional Flag to mark business header
 * @param {boolean} [props.isLiveStoryType] - Optional Flag to mark Live Story
 * @param {boolean} [props.isStoryLive] - Optional Flag to mark live story is live
 * @param {string} props.issueDate - the Issue Date
 * @param {string} props.issueLink - Optional link for this article's issue
 * @param {object} props.itemsCount - The itemsCount object to display the count and type of item
 * @param {object} [props.metadataVideo] - Optional CNE video metadata
 * @param {string} [props.modifiedDate] - Optional modified date of the content
 * @param {string} props.dangerousHed - An HTML string representing the hed of the piece
 * @param {string} [props.price] - Optional price string
 * @param {string} props.publishDate - Publish Date.
 * @param {string} props.publishDatePosition - Sets position of publish at the top or the bottom of content header
 * @param {ReactElement} props.rubric - The rubric for the piece of content
 * @param {string} [props.rubricVariation] - The name of the variation for Rubric to use
 * @param {bool} [props.shouldDisplayLiveIndicator] - Optional to show the LiveIndicator above Rubric
 * @param {boolean} props.showIssueCopyByDate - Optional show the text "Issue" by the issue date.
 * @param {boolean} [props.showItemCount] - Show or hide the item count and icon
 * @param {string}  [props.theme] - Optional theme name
 * @param {object} props.externalLinks - Optional Listen podcast link
 * @param {string} props.podcastPagePrimaryCta - Primary Link to Listen Podcast
 * @param {string} props.podcastPagePrimaryCtaLabel - Optional label for podcast listen now button
 * @param {boolean} props.showPodcastButton - Optional to show podcast listen now button
 *
 * @returns {ReactElement} <div>
 */
const TitleBlock = ({ authorsPosition = 'hidden', business, bylineVariation, contentHeaderCategories = {
    hasCategoryEyebrow: false
}, contentSponsorNames = [], contributors, dividerType = 'both', externalLinks, hasContentDivider, hasDesktopTitleBlockDivider = false, hasExtraSpaceBetweenSeparator = false, hideIssueDate = true, hideIssueDatePipeSeparator = false, hasNoRowPadding = false, hideAdaptationByline = false, hidePublishDate = false, hideRubric = false, isBusinessContentHeader = false, isLiveStoryType, isStoryLive, issueDate, issueLink, itemsCount, metadataVideo = {}, modifiedDate, dangerousHed, price, podcastPagePrimaryCta, podcastPagePrimaryCtaLabel, publishDate, publishDatePosition = 'bottom', rubric, rubricVariation, shouldDisplayLiveIndicator = false, showIssueCopyByDate = false, showItemCount = false, showPodcastButton = false, theme = 'standard' }) => {
    const showContentDivider = hasContentDivider && authorsPosition !== 'above';
    const isInverted = theme === 'inverted';
    const btnStyle = isInverted ? 'outlined' : 'filled';
    const rowWithTopBorder = hasDesktopTitleBlockDivider &&
        (dividerType === 'both' || dividerType === 'top');
    const { formatMessage } = useIntl();
    return (React.createElement(ContentHeaderTitleBlockWrapper, { rowWithTopBorder: rowWithTopBorder, isBusinessContentHeader: isBusinessContentHeader, "data-testid": "ContentHeaderTitleBlockWrapper" },
        metadataVideo.isLive && shouldDisplayLiveIndicator && React.createElement(LiveIndicator, null),
        React.createElement(RubricBlock, { authorsPosition: authorsPosition, bylineVariation: bylineVariation, contributors: contributors, hasExtraSpaceBetweenSeparator: hasExtraSpaceBetweenSeparator, hasNoRowPadding: hasNoRowPadding, hideIssueDate: hideIssueDate, hideIssueDatePipeSeparator: hideIssueDatePipeSeparator, hideAdaptationByline: hideAdaptationByline, hidePublishDate: hidePublishDate, hideRubric: hideRubric, isLiveStoryType: isLiveStoryType, isStoryLive: isStoryLive, issueDate: issueDate, issueLink: issueLink, modifiedDate: modifiedDate, price: price, publishDate: publishDate, publishDatePosition: publishDatePosition, rubric: rubric, rubricVariation: rubricVariation, showIssueCopyByDate: showIssueCopyByDate, sponsorName: getSponsorName(contentSponsorNames), theme: theme }),
        React.createElement(CategoryEyebrow, { ...contentHeaderCategories }),
        React.createElement(ContentHeaderHed, { dangerouslySetInnerHTML: { __html: dangerousHed }, "data-testid": "ContentHeaderHed" }),
        authorsPosition === 'below' && (React.createElement(ContentHeaderLowerBylineDateBlock, null,
            React.createElement(TitleBlockByline, { bylineVariation: bylineVariation, contributors: contributors }),
            React.createElement(PublishDateBlock, { hasExtraSpaceBetweenSeparator: hasExtraSpaceBetweenSeparator, hidePublishDate: hidePublishDate, modifiedDate: modifiedDate, publishDate: publishDate }))),
        showItemCount && itemsCount && (React.createElement(ContentHeaderItemCount, { ...itemsCount })),
        showContentDivider && React.createElement(ContentHeaderContentDivider, null),
        isBusinessContentHeader && (React.createElement(AddressBlock, { address: business?.address, phone: business?.phone, email: business?.email, socialMedia: business?.socialMedia, link: business?.url })),
        showPodcastButton && podcastPagePrimaryCta && (React.createElement(PodcastButtonWrapper, null,
            React.createElement(PodcastButton, { btnStyle: btnStyle, href: podcastPagePrimaryCta, label: podcastPagePrimaryCtaLabel ||
                    formatMessage(translationsPodcast.primaryCTALabel), target: "blank", inputKind: "link" }),
            externalLinks.length > 0 && (React.createElement(PodcastLink, { isInverted: isInverted, href: externalLinks[0].url, target: "blank" }, "Or, choose where to Listen"))))));
};
TitleBlock.propTypes = {
    authorsPosition: PropTypes.oneOf(['above', 'below', 'hidden']),
    business: PropTypes.shape({
        address: PropTypes.object,
        phone: PropTypes.string,
        email: PropTypes.string,
        socialMedia: PropTypes.array,
        url: PropTypes.string
    }),
    bylineVariation: PropTypes.string,
    contentHeaderCategories: PropTypes.shape({
        title: PropTypes.string,
        tags: PropTypes.array,
        hasCategoryEyebrow: PropTypes.boolean
    }),
    contentSponsorNames: PropTypes.array,
    contributors: PropTypes.object,
    dangerousHed: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
        .isRequired,
    dividerType: PropTypes.string,
    externalLinks: PropTypes.array,
    hasContentDivider: PropTypes.bool,
    hasDesktopTitleBlockDivider: PropTypes.bool,
    hasDivider: PropTypes.bool,
    hasExtraSpaceBetweenSeparator: PropTypes.bool,
    hasNoRowPadding: PropTypes.bool,
    hideAdaptationByline: PropTypes.bool,
    hideIssueDate: PropTypes.bool,
    hideIssueDatePipeSeparator: PropTypes.bool,
    hidePublishDate: PropTypes.bool,
    hideRubric: PropTypes.bool,
    isBusinessContentHeader: PropTypes.bool,
    isLiveStoryType: PropTypes.bool,
    isStoryLive: PropTypes.bool,
    issueDate: PropTypes.string,
    issueLink: PropTypes.string,
    itemsCount: PropTypes.shape(ItemsCount.propTypes),
    metadataVideo: PropTypes.shape({
        isLive: PropTypes.bool,
        premiereDate: PropTypes.string,
        series: PropTypes.string,
        videoLength: PropTypes.number
    }),
    modifiedDate: PropTypes.string,
    podcastPagePrimaryCta: PropTypes.string,
    podcastPagePrimaryCtaLabel: PropTypes.string,
    price: PropTypes.string,
    publishDate: PropTypes.string,
    publishDatePosition: PropTypes.oneOf(['top', 'bottom']),
    rubric: PropTypes.shape(Rubric.propTypes),
    rubricVariation: PropTypes.string,
    shouldDisplayLiveIndicator: PropTypes.bool,
    showIssueCopyByDate: PropTypes.bool,
    showItemCount: PropTypes.bool,
    showPodcastButton: PropTypes.bool,
    theme: PropTypes.oneOf(['standard', 'inverted', 'special'])
};
TitleBlock.displayName = 'TitleBlock';
module.exports = asConfiguredComponent(TitleBlock, 'TitleBlock');
module.exports.TitleBlock = TitleBlock;
//# sourceMappingURL=TitleBlock.js.map

/***/ }),

/***/ 1757:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { getColorToken, calculateSpacing, getLinkStyles, getColorStyles, removeTextDecoration, getTypographyStyles, minScreen } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { BaseText } = __webpack_require__(76955);
const Button = __webpack_require__(73730);
const ItemsCount = __webpack_require__(78372);
const { getPublishDateCommonStyle, defaultGridStyle, defaultColorPaddingStyle, rowWithCommonStyle } = __webpack_require__(60254);
const addHeaderSpacingMargins = `
  margin-top: ${calculateSpacing(4)};
  @media (min-width: ${BREAKPOINTS.md}) {
    margin-top: ${calculateSpacing(4)};
  }
}
`;
const ContentHeaderContentDivider = styled.span.withConfig({
    displayName: 'ContentHeaderContentDivider'
}) `
  ${addHeaderSpacingMargins}
  display: block;
  grid-column: 1 / -1;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: ${getColorToken('colors.consumption.lead.standard.accent')};
  width: 100px;
`;
const ContentHeaderLowerBylineDateBlock = styled.div.withConfig({
    displayName: 'ContentHeaderLowerBylineDateBlock'
}) `
  ${addHeaderSpacingMargins}
`;
const ContentHeaderItemCount = styled(ItemsCount).withConfig({
    displayName: 'ContentHeaderItemCount'
}) `
  ${addHeaderSpacingMargins}
  text-align: center;
  line-height: 1;
`;
const ContentHeaderHed = styled(BaseText).withConfig({
    displayName: 'ContentHeaderHed'
}) `
  ${addHeaderSpacingMargins}
  /* 1. overwrite text decoration link styles see token: layouts_to_refactor.interactive.links */
  ${({ theme }) => getLinkStyles(theme, 'colors.consumption.lead.standard.heading', null)};
  ${removeTextDecoration()} /* 1 */
  cursor: unset;
  text-align: center;
`;
const AddressBlockWrapper = styled.div.withConfig({
    displayName: 'AddressBlockWrapper'
}) `
  ${addHeaderSpacingMargins}
  color: ${getColorToken('colors.consumption.lead.standard.description')};
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-bulletin-secondary')};
`;
const HeaderAddressDetails = styled.a.withConfig({
    displayName: 'HeaderAddressDetails'
}) `
  display: inline-flex;
  flex-direction: column;
  color: ${getColorToken('colors.consumption.lead.standard.description')};
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-bulletin-secondary')};
`;
const PodcastButtonWrapper = styled('div').withConfig({
    displayName: 'PodcastButtonWrapper'
}) `
  padding-top: ${calculateSpacing(5)};
  padding-bottom: 3px;
`;
const PodcastButton = styled(Button.Primary).withConfig({
    displayName: 'PodcastButton'
}) `
  margin-bottom: ${calculateSpacing(1.5)};
  text-align: center;
`;
const PodcastLink = styled('a').withConfig({ displayName: 'PodcastLink' }) `
  display: block;
  text-align: center;
  ${getTypographyStyles('typography.definitions.consumptionEditorial.description-embed')};
  ${({ isInverted, theme }) => isInverted
    ? getColorStyles(theme, 'color', 'colors.consumption.lead.inverted.context-tertiary')
    : getColorStyles(theme, 'color', 'colors.consumption.lead.standard.link-hover')};

  &:hover {
    text-decoration: none;
    color: ${({ isInverted, theme }) => isInverted
    ? getColorToken(theme, 'colors.consumption.lead.inverted.link-hover')
    : getColorToken(theme, 'colors.consumption.lead.standard.context-tertiary')};
  }
`;
ContentHeaderHed.defaultProps = {
    as: 'h1',
    colorToken: 'colors.consumption.lead.standard.heading',
    typeIdentity: 'typography.definitions.consumptionEditorial.hed-standard'
};
const ContentHeaderTitleBlockWrapper = styled.div.withConfig({
    displayName: 'ContentHeaderTitleBlockWrapper'
}) `
  ${defaultGridStyle}

  && {
    ${defaultColorPaddingStyle}
  }

  > * {
    grid-column: 1/-1;
  }

  ${ContentHeaderHed} {
    margin-top: ${calculateSpacing(2)};
    @media (min-width: ${BREAKPOINTS.lg}) {
      grid-column: 3 / span 8;
    }
    @media (min-width: ${BREAKPOINTS.md}) {
      margin-top: ${calculateSpacing(2)};
    }

    .hed-prefix {
      ${getTypographyStyles('typography.definitions.globalEditorial.context-primary')};
      display: block;
      margin-bottom: ${calculateSpacing(1)};
      color: ${getColorToken('colors.consumption.body.standard.accent')};
    }
  }

  ${({ rowWithTopBorder, theme }) => rowWithTopBorder &&
    `
      ${minScreen(BREAKPOINTS.md)}{
        &::before {
          display: block;
          grid-column: 1/-1;
          border: 0;
          border-top: 1px solid ${getColorToken(theme, 'colors.consumption.body.standard.divider')};
          padding-bottom: ${calculateSpacing(2)};
          width: 100%;
          height: 0;
          content: '';
        }
      }
      ${rowWithCommonStyle}
    `}
`;
const ContentHeaderTitleBlockPublishDate = styled(BaseText)
    .withConfig({
    displayName: 'ContentHeaderTitleBlockPublishDate'
})
    .attrs(({ datetime }) => ({ dateTime: datetime })) `
  ${({ theme }) => getPublishDateCommonStyle(theme)};
`;
ContentHeaderTitleBlockPublishDate.defaultProps = {
    as: 'time',
    typeIdentity: 'typography.definitions.globalEditorial.context-tertiary'
};
const HeaderSocialInformation = styled.div.withConfig({
    displayName: 'HeaderSocialInformation'
}) `
  padding-top: ${calculateSpacing(3)};

  svg {
    margin-right: ${calculateSpacing(2)};
  }

  a {
    padding-right: ${calculateSpacing(1.5)};
  }
`;
const HeaderContactInformation = styled.div.withConfig({
    displayName: 'HeaderContactInformation'
}) `
  padding-top: ${calculateSpacing(3)};

  a {
    color: ${getColorToken('colors.consumption.lead.standard.description')};
  }
`;
module.exports = {
    ContentHeaderContentDivider,
    ContentHeaderLowerBylineDateBlock,
    ContentHeaderItemCount,
    ContentHeaderHed,
    ContentHeaderTitleBlockWrapper,
    ContentHeaderTitleBlockPublishDate,
    AddressBlockWrapper,
    HeaderAddressDetails,
    HeaderSocialInformation,
    HeaderContactInformation,
    PodcastButtonWrapper,
    PodcastButton,
    PodcastLink
};
//# sourceMappingURL=TitleBlock.styles.js.map

/***/ }),

/***/ 56174:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { ContentHeaderBylines } = __webpack_require__(88317);
/**
 * Wrapper to check if data present before rendering byline
 *
 * @param {string} props.bylineVariation - Optional variation of byline.
 * @param {object} [props.contributors] -  Optional object containing data to create authors byline.
 * @param {boolean} props.hideAdaptationByline - Optional parameter to hide adaptation by author's by line.
 * @returns {ReactElement|null} <Bylines>
 */
const TitleBlockByline = ({ bylineVariation, contributors, hideAdaptationByline }) => {
    if (!contributors || Object.keys(contributors).length === 0) {
        return null;
    }
    return (React.createElement(ContentHeaderBylines, { contributors: contributors, bylineVariation: bylineVariation, isCompact: false, hideAdaptationByline: hideAdaptationByline }));
};
TitleBlockByline.propTypes = {
    bylineVariation: PropTypes.string,
    contributors: PropTypes.object,
    hideAdaptationByline: PropTypes.bool
};
module.exports = TitleBlockByline;
//# sourceMappingURL=TitleBlockByline.js.map

/***/ }),

/***/ 33193:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    showAllPhotos: {
        id: 'ContentHeader.ShowAllPhotos',
        defaultMessage: 'Show all Photos',
        description: 'Call to action to view entire photo gallery'
    },
    readReviews: {
        id: 'ContentHeader.ReadReviews',
        defaultMessage: 'Read Reviews',
        description: 'Call to action to read reviews'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 90072:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.transformLegacySources = exports.useNativeShare = void 0;
const react_1 = __webpack_require__(96540);
const map_sources_to_segmented_sources_1 = __webpack_require__(52009);
const imageContentTypes = new Set(['photo', 'cartoon']);
const { isDesktopBrowser } = __webpack_require__(72362);
const useNativeShare = (hasNativeShareButton, shouldEnableNativeShareOnDesktop) => {
    const [showNativeShareButton, setShowNativeShareButton] = (0, react_1.useState)(false);
    const [pageUrl, setPageUrl] = (0, react_1.useState)('');
    (0, react_1.useEffect)(() => {
        if (hasNativeShareButton && !!navigator?.share) {
            const { protocol, host, pathname, search } = window.location;
            setPageUrl(`${protocol}//${host}${pathname}${search}`);
            if (isDesktopBrowser() && !shouldEnableNativeShareOnDesktop) {
                // Do Nothing
            }
            else {
                setShowNativeShareButton(true);
            }
        }
    }, [hasNativeShareButton, shouldEnableNativeShareOnDesktop]);
    return {
        showNativeShareButton,
        pageUrl
    };
};
exports.useNativeShare = useNativeShare;
/**
 * This is a temporary hack to add segmented sources to ledes.
 * Without segmentedSources an image may not render the correct aspect ratio.
 * This can be removed once GraphQL moves in.
 *
 * @param {*} lede - the lede asset
 * @returns {*} the augmented lede asset
 */
const transformLegacySources = (lede) => {
    const augmentedLede = { ...lede };
    if (imageContentTypes.has(lede.contentType) &&
        !lede.segmentedSources &&
        lede.sources) {
        augmentedLede.segmentedSources = (0, map_sources_to_segmented_sources_1.mapSourcesToSegmentedSources)(lede.sources);
    }
    return augmentedLede;
};
exports.transformLegacySources = transformLegacySources;
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 39416:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const ContentHeader = __webpack_require__(18601);
const TextOverlayContentHeader = __webpack_require__(27308);
const SplitScreenContentHeader = __webpack_require__(84231);
const MultiReviewContentHeader = __webpack_require__(55182);
ContentHeader.TextAboveCenterGridWidth = asVariation(ContentHeader, 'TextAboveCenterGridWidth', { contentAlign: 'center', contentPosition: 'above' });
ContentHeader.TextAboveCenterGridWidthTopCardSmall = asVariation(ContentHeader, 'TextAboveCenterGridWidthTopCardSmall', {
    contentAlign: 'center',
    contentPosition: 'above',
    contentStyle: 'card',
    copyWidth: 'fullbleed',
    leadRailAnchor: true,
    mediaWidth: 'small'
});
ContentHeader.TextAboveCenterFullBleed = asVariation(ContentHeader, 'TextAboveCenterFullBleed', {
    contentAlign: 'center',
    contentPosition: 'above',
    mediaWidth: 'fullbleed'
});
ContentHeader.TextAboveCenterFullBleedNoContributor = asVariation(ContentHeader, 'TextAboveCenterFullBleedNoContributor', {
    contentAlign: 'center',
    contentPosition: 'above',
    mediaWidth: 'fullbleed',
    shouldRemoveBylineTopMargin: true,
    hasDekBottomMargin: true,
    hasAccreditationSocialTopMargin: true,
    shouldReduceAccreditationPadding: true
}, {
    hasDesktopTitleBlockDivider: false,
    captionStyle: 'span-content-well',
    captionWidth: 'fullbleed',
    showContributorImage: false
});
ContentHeader.TextAboveCenterFullBleedTop = asVariation(ContentHeader, 'TextAboveCenterFullBleedTop', {
    contentAlign: 'center',
    contentPosition: 'above',
    copyWidth: 'fullbleed'
});
ContentHeader.TextAboveCenterFullBleedGridWidthCard = asVariation(ContentHeader, 'TextAboveCenterFullBleedGridWidthCard', {
    contentAlign: 'center',
    contentPosition: 'above',
    contentStyle: 'card',
    copyWidth: 'fullbleed'
});
ContentHeader.TextAboveCenterFullBleedCard = asVariation(ContentHeader, 'TextAboveCenterFullBleedCard', {
    contentAlign: 'center',
    contentPosition: 'above',
    contentStyle: 'card',
    mediaWidth: 'fullbleed',
    copyWidth: 'fullbleed'
});
ContentHeader.TextAboveLeftSmall = asVariation(ContentHeader, 'TextAboveLeftSmall', {
    contentAlign: 'left',
    contentPosition: 'above',
    leadRailAnchor: true,
    mediaWidth: 'small'
});
ContentHeader.TextAboveLeftSmallWithRule = asVariation(ContentHeader, 'TextAboveLeftSmallWithRule', {
    contentAlign: 'left',
    contentPosition: 'above',
    hasLedeLightbox: true,
    leadRailAnchor: true,
    mediaWidth: 'smallrule',
    hasInlinePublishDate: true,
    hasNoRowPadding: true,
    hasXsNavSpacing: true,
    hasTitleWrapperTopSpacing: true,
    hasAccreditationSocialTopMargin: true,
    shouldRemoveContentHedWrapperTopSpacing: true,
    hasReducedTitleTopMargin: true,
    hasAccreditationExtraSpacing: true,
    shouldRemoveBylineTopMargin: true,
    hasDateExtraTopSpacing: true
}, {
    stickySocialAnchorTop: {
        selector: "[data-testid='ContentHeaderAccreditation']",
        edge: 'bottom'
    }
});
ContentHeader.TextAboveCenterSmallWithRule = asVariation(ContentHeader, 'TextAboveCenterSmallWithRule', {
    contentAlign: 'center',
    contentPosition: 'above',
    leadRailAnchor: true,
    ledeAlign: 'center',
    mediaWidth: 'smallrule',
    hasInlinePublishDate: true,
    hasNoRowPadding: true,
    hasXsNavSpacing: true,
    shouldRemoveBylineTopMargin: true,
    hasAccreditationExtraSpacing: true,
    hasAccreditationSocialTopMargin: true,
    hasTitleWrapperTopSpacing: true,
    shouldRemoveContentHedWrapperTopSpacing: true,
    hasReducedTitleTopMargin: true
}, {
    stickySocialAnchorTop: {
        selector: "[data-testid='ContentHeaderAccreditation']",
        edge: 'bottom'
    }
});
ContentHeader.InlineImage = asVariation(ContentHeader, 'InlineImage', {
    contentAlign: 'center',
    contentPosition: 'above',
    leadRailAnchor: true,
    ledeAlign: 'center',
    mediaWidth: 'smallrule',
    hasInlinePublishDate: true,
    hasNoRowPadding: true,
    hasXsNavSpacing: true,
    shouldRemoveBylineTopMargin: true,
    hasAccreditationSocialTopMargin: true,
    shouldRemoveContentHedWrapperTopSpacing: true,
    hasReducedTitleTopMargin: true,
    hasTitleWrapperTopSpacing: true,
    hasAccreditationExtraSpacing: true
}, {
    dividerType: 'bottom',
    hideLede: true,
    showContributorImage: false,
    stickySocialAnchorTop: {
        selector: "[data-testid='ContentHeaderAccreditation']",
        edge: 'bottom'
    }
});
ContentHeader.TextAboveLeftFullBleed = asVariation(ContentHeader, 'TextAboveLeftFullBleed', {
    contentAlign: 'left',
    contentPosition: 'above',
    copyWidth: 'grid',
    hasLedeLightbox: true,
    mediaWidth: 'fullbleed'
});
ContentHeader.TextAboveLeftGridWidth = asVariation(ContentHeader, 'TextAboveLeftGridWidth', {
    contentAlign: 'left',
    contentPosition: 'above',
    mediaWidth: 'grid'
});
ContentHeader.TextAboveLeftGridWidthCard = asVariation(ContentHeader, 'TextAboveLeftGridWidthCard', {
    contentAlign: 'left',
    contentPosition: 'above',
    contentStyle: 'card',
    mediaWidth: 'grid'
});
ContentHeader.TextAboveLeftNoImg = asVariation(ContentHeader, 'TextAboveLeftNoImg', { contentAlign: 'left', contentPosition: 'above' }, {
    // need to pass in className because variations are too broad
    className: 'content-header--no-lede',
    lede: null
});
ContentHeader.TextBelowCenterGridWidth = asVariation(ContentHeader, 'TextBelowCenterGridWidth', { contentAlign: 'center', contentPosition: 'below' });
ContentHeader.TextBelowCenterFullBleed = asVariation(ContentHeader, 'TextBelowCenterFullBleed', {
    contentAlign: 'center',
    contentPosition: 'below',
    mediaWidth: 'fullbleed'
});
ContentHeader.TextBelowCenterFullBleedNoContributor = asVariation(ContentHeader, 'TextBelowCenterFullBleedNoContributor', {
    contentAlign: 'center',
    contentPosition: 'below',
    mediaWidth: 'fullbleed',
    shouldRemoveBylineTopMargin: true,
    hasDekBottomMargin: true,
    hasAccreditationSocialTopMargin: true,
    hasAccreditationSocialBottomMargin: true,
    hasPublishDateBottomPadding: true,
    hideAccreditationBottomSpacing: true,
    shouldReduceAccreditationPadding: true
}, {
    hasDesktopTitleBlockDivider: false,
    captionStyle: 'span-content-well',
    captionWidth: 'fullbleed',
    showContributorImage: false
});
ContentHeader.TextBelowLeftGridWidth = asVariation(ContentHeader, 'TextBelowLeftGridWidth', { contentAlign: 'left', contentPosition: 'below' });
ContentHeader.TextBelowLeftFullBleed = asVariation(ContentHeader, 'TextBelowLeftFullBleed', {
    contentAlign: 'left',
    contentPosition: 'below',
    mediaWidth: 'fullbleed'
});
ContentHeader.TextOverlay = asVariation(TextOverlayContentHeader, 'TextOverlayContentHeader', {});
ContentHeader.TextOverlayWithLogo = asVariation(TextOverlayContentHeader, 'TextOverlayContentHeaderWithLogo', {
    isFeatured: true
});
ContentHeader.TextOverlayCenterFullBleedGradient = asVariation(TextOverlayContentHeader, 'TextOverlayCenterFullBleedGradient', {
    contentAlign: 'center',
    background: 'gradient'
});
ContentHeader.SplitScreenImgRight = asVariation(ContentHeader, 'SplitScreenImgRight', {
    contentAlign: 'left',
    contentPosition: 'start'
});
ContentHeader.AssetMiddleCenterBig = asVariation(ContentHeader, 'AssetMiddleCenterBig', {
    assetPosition: 'middle',
    contentAlign: 'center',
    contentPosition: 'above',
    mediaWidth: 'small'
});
ContentHeader.SubjectFocus = asVariation(ContentHeader, 'SubjectFocus', {
    assetPosition: 'bottom',
    contentAlign: 'left',
    contentPosition: 'above',
    hasExtraSpaceBetweenSeparator: true,
    leadRailAnchor: true,
    mediaWidth: 'small',
    publishDatePosition: 'top',
    reducedSpacings: true
}, {
    showContributorImage: false
});
ContentHeader.SplitScreenImageRightFullBleed = asVariation(SplitScreenContentHeader, 'SplitScreenImageRightFullBleed', {}, {
    isTextRight: false,
    showContributorImage: false,
    shouldRemoveBylineTopMargin: true,
    hasSplitScreenSocialShareReduceTopSpacing: true
});
ContentHeader.SplitScreenImageRightInset = asVariation(SplitScreenContentHeader, 'SplitScreenImageRightInset', {}, {
    hasSplitScreenSocialShareReduceTopSpacing: true,
    shouldRemoveBylineTopMargin: true,
    isInset: true,
    isTextRight: false,
    showContributorImage: false,
    hideHeaderDividerInMobile: true,
    hasImageBottomSpacing: false
});
ContentHeader.SplitScreenImageLeftFullBleed = asVariation(SplitScreenContentHeader, 'SplitScreenImageLeftFullBleed', {}, {
    shouldRemoveBylineTopMargin: true,
    hasSplitScreenSocialShareReduceTopSpacing: true,
    isTextRight: true,
    showContributorImage: false
});
ContentHeader.SplitScreenImageLeftInset = asVariation(SplitScreenContentHeader, 'SplitScreenImageLeftInset', {}, {
    isInset: true,
    isTextRight: true,
    showContributorImage: false,
    hasSplitScreenSocialShareReduceTopSpacing: true,
    shouldRemoveBylineTopMargin: true,
    hideHeaderDividerInMobile: true
});
ContentHeader.BusinessContentHeader = asVariation(ContentHeader, 'BusinessContentHeader', {
    contentAlign: 'center',
    contentPosition: 'below',
    mediaWidth: 'fullbleed',
    showContentDivider: true,
    hideRubric: true
});
ContentHeader.PodcastContentHeader = asVariation(ContentHeader, 'PodcastContentHeader', {
    contentAlign: 'center',
    contentPosition: 'below',
    shouldUseSmallLede: true,
    showPodcastButton: true,
    hasDivider: true
}, {
    hideLedeCaption: true
});
ContentHeader.TextAboveCenterFullBleedVideo = asVariation(ContentHeader, 'ContentHeaderFullBleedVideo', {
    contentAlign: 'center',
    contentPosition: 'above',
    mediaWidth: 'fullbleed',
    isFullBleedVideo: true
});
ContentHeader.SplitScreenWithMultiReviewContent = asVariation(MultiReviewContentHeader, 'SplitScreenWithMultiReviewContent', {});
module.exports = ContentHeader;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 58986:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { BaseWrap } = __webpack_require__(76955);
const { ContentWithCTAWrapper, ContentWithCTAButtonWrapper } = __webpack_require__(46945);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * ContentWithCTA component
 *
 * @param {object} props - React props
 * @param {object} [props.attributes] - Optional attributes to add top level i.e. aria-*, role, etc.
 * @param {ReactElement} [props.ctaComponent] - JSX element for cta
 * @param {ReactElement} [props.contentComponent] - JSX element for content
 */
const ContentWithCTA = ({ contentComponent, ctaComponent, attributes = {} }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ContentWithCTA'
        });
    }, []);
    return (React.createElement(ContentWithCTAWrapper, { ...attributes, "data-testid": "ContentWithCTA" },
        React.createElement(BaseWrap, null, contentComponent),
        React.createElement(ContentWithCTAButtonWrapper, null, ctaComponent)));
};
ContentWithCTA.propTypes = {
    attributes: PropTypes.object,
    contentComponent: PropTypes.node.isRequired,
    ctaComponent: PropTypes.node.isRequired
};
module.exports = ContentWithCTA;
//# sourceMappingURL=ContentWithCTA.js.map

/***/ }),

/***/ 28543:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(58986);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 46945:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing } = __webpack_require__(26865);
const ContentWithCTAWrapper = styled.div.withConfig({
    displayName: 'ContentWithCTAWrapper'
}) `
  display: grid;
  grid-gap: ${calculateSpacing(1)};
  grid-template-columns: 1fr;
  overflow-anchor: none;
`;
const ContentWithCTAButtonWrapper = styled.div.withConfig({
    displayName: 'ContentWithCTAButtonWrapper'
}) `
  display: flex;
  align-items: center;
  justify-content: center;
`;
module.exports = {
    ContentWithCTAWrapper,
    ContentWithCTAButtonWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 12177:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(68535)/* ["default"] */ .A);
const { AllFiction, AllFictionDesktop, AllFictionMobile, AllFictionFooter, AllFictionViewMore } = __webpack_require__(73618);
const SummaryCollectionGrid = __webpack_require__(91706);
const { Circle: Loader } = __webpack_require__(62930);
const checkIsLastPage = (pageLimit, totalResults, pageNumber = 1) => {
    return pageNumber * pageLimit >= totalResults;
};
const getSummaryCollection = (items) => {
    if (items.length === 2) {
        return SummaryCollectionGrid.TwoColumns;
    }
    else if (items.length % 4 === 0) {
        return SummaryCollectionGrid.FourColumns;
    }
    return SummaryCollectionGrid.ThreeColumns;
};
/**
 * ContributorAllFiction component
 *
 *
 * @param {object} props - React props
 * @param {string} props.dangerousHed - Display section Title
 * @param {boolean} [props.hasBorderOnMobileAndTabletOnly] - Show border on Mobile and Tablet view only
 * @param {boolean} [props.hasBorderOnMobileOnly] - Show border on mobile view only
 * @param {boolean} [props.hasItemsRule] - Show or should hide the decorative rule on SummaryItem(s)
 * @param {boolean} [props.hideIssueDate] - Show or hide the issue date
 * @param {boolean} [props.hideRubricItemSummary] - Set `true` for hide rubrics, set `false` for show rubrics.
 * @param {string} [props.sectionTitleVariation] - Prop to control section title variation
 * @param {boolean} [props.shouldHideContributors] - Prop to hide only the contributor list from byline
 * @param {boolean} [props.shouldHidePublishDate] - To hide published date
 * @param {string} [props.mobileSummaryItemVariation] - Variation for SummaryItem for mobile view
 * @param {Array}  [props.items] - List of collage items
 * @param {number}  [props.pageNumber] - pageNumber defines the current page number.
 * @param {number}  [props.pageSize] - pageSize defines the page size, number of records per page.
 * @param {number}  [props.paginatedContainerPosition] - Defines the container position if it's a paginated container.
 * @param {number}  [props.totalResults] - It specifies the total records.
 * @param {boolean}  [props.showViewMoreButton] - Refers if view more button should be shown or not
 * @param {string}  [props.mobileSummaryItemVerticalAlign] - [`center`, `top`] Vertical alignment of content for mobile view when placed side by side. Defaults to `center`
 */
const ContributorAllFiction = ({ dangerousHed, hasBorderOnMobileAndTabletOnly = true, hasBorderOnMobileOnly = false, hasItemsRule = false, hideIssueDate = false, hideRubricItemSummary = true, sectionTitleVariation = 'LineAboveLineBelowTextCenter', shouldHideContributors, shouldHidePublishDate, mobileSummaryItemVariation = 'SideBySideDense', mobileSummaryItemVerticalAlign = 'center', items: initialItems, paginatedContainerPosition: containerPosition, pageNumber = 1, pageSize, totalResults, showViewMoreButton = false }) => {
    const intl = useIntl();
    const SummaryCollection = getSummaryCollection(initialItems);
    const [items, setItems] = React.useState(initialItems);
    const [pageURL, setPageURL] = React.useState('');
    const [isLoading, setIsLoading] = React.useState(false);
    const [loadMoreState, setLoadMoreState] = React.useState({
        currentPage: pageNumber,
        itemsCount: initialItems.length,
        isLastPage: checkIsLastPage(pageSize, totalResults, pageNumber)
    });
    React.useEffect(() => {
        setPageURL(window.location.href.split(/[?#]/)[0]);
    }, []);
    if (totalResults < 2) {
        return null;
    }
    const doLoadMore = (e) => {
        e.preventDefault();
        const { currentPage } = loadMoreState;
        const nextPageNumber = currentPage + 1;
        const prefix = window.location.href.split(/[?#]/)[0];
        const loadMoreURL = `${prefix}?page=${nextPageNumber}&container=${containerPosition}&format=json`;
        setIsLoading(true);
        return fetch(loadMoreURL)
            .then((response) => response.json())
            .then(({ bundle }) => {
            const { items: containerItems, totalResults: totalItems } = bundle.containers[0];
            const newItems = items.concat(containerItems);
            setItems(newItems);
            setLoadMoreState({
                currentPage: nextPageNumber,
                itemsCount: newItems.length,
                isLastPage: checkIsLastPage(pageSize, totalItems, nextPageNumber)
            });
            setIsLoading(false);
        })
            .catch((error) => {
            setIsLoading(false);
            console.warn(error);
        });
    };
    const { isLastPage, currentPage } = loadMoreState;
    const commonProps = {
        dangerousHed,
        hasBorderOnMobileAndTabletOnly,
        hasItemsRule,
        hideIssueDate,
        hideRubricItemSummary,
        sectionTitleVariation,
        shouldHideContributors,
        shouldHidePublishDate,
        hasBorderOnMobileOnly,
        items
    };
    return (React.createElement(AllFiction, null,
        React.createElement(AllFictionDesktop, { as: SummaryCollection, ...commonProps }),
        React.createElement(AllFictionMobile, { as: SummaryCollection, ...commonProps, summaryItemVariation: mobileSummaryItemVariation, sideBySideVerticalAlign: mobileSummaryItemVerticalAlign }),
        showViewMoreButton && !isLastPage && (React.createElement(AllFictionFooter, null,
            React.createElement(AllFictionViewMore, { href: !isLoading && `${pageURL}?page=${currentPage + 1}`, onClick: !isLoading && doLoadMore, title: intl.formatMessage(translations.viewMoreText) },
                intl.formatMessage(translations.viewMoreText),
                isLoading && React.createElement(Loader, { height: "20px", width: "20px", margin: "0" }))))));
};
ContributorAllFiction.propTypes = {
    dangerousHed: PropTypes.string.isRequired,
    hasBorderOnMobileAndTabletOnly: PropTypes.bool,
    hasBorderOnMobileOnly: PropTypes.bool,
    hasItemsRule: PropTypes.bool,
    hideIssueDate: PropTypes.bool,
    hideRubricItemSummary: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape({
        categories: PropTypes.shape({
            tags: PropTypes.array
        }),
        dangerousDek: PropTypes.string,
        dangerousHed: PropTypes.string,
        image: PropTypes.object,
        url: PropTypes.string
    })).isRequired,
    mobileSummaryItemVariation: PropTypes.string,
    mobileSummaryItemVerticalAlign: PropTypes.oneOf(['top', 'center']),
    pageNumber: PropTypes.number,
    pageSize: PropTypes.number.isRequired,
    paginatedContainerPosition: PropTypes.number,
    sectionTitleVariation: PropTypes.string,
    shouldHideContributors: PropTypes.bool,
    shouldHidePublishDate: PropTypes.bool,
    showViewMoreButton: PropTypes.bool,
    totalResults: PropTypes.number.isRequired
};
module.exports = ContributorAllFiction;
//# sourceMappingURL=AllFiction.js.map

/***/ }),

/***/ 18814:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const { asThemedComponent } = __webpack_require__(20223);
const ContributorAllFiction = __webpack_require__(12177);
module.exports = asThemedComponent(asConfiguredComponent(ContributorAllFiction, 'ContributorAllFiction'));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 73618:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { calculateSpacing, getColorToken, minScreen, maxScreen, getTypographyStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { maxThresholds } = __webpack_require__(99906);
const { SummaryItemContent, SummaryItemWrapper } = __webpack_require__(68116);
const { SectionTitleRoot } = __webpack_require__(33500);
const { SummaryCollectionGridSummaryItem, SummaryCollectionGridItems } = __webpack_require__(4534);
const AllFictionFooter = styled.div.withConfig({
    displayName: 'AllFictionFooter'
}) `
  display: flex;
  justify-content: center;
  margin-top: ${calculateSpacing(4)};
`;
const AllFictionViewMore = styled.a.withConfig({
    displayName: 'AllFictionViewMore'
}) `
  ${getTypographyStyles('typography.definitions.foundation.link-primary')}

  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid ${getColorToken('colors.discovery.body.white.accent')};
  min-width: ${calculateSpacing(20)};
  height: ${calculateSpacing(6)};
  text-decoration: none;
  ${({ theme }) => theme &&
    `
      background: ${getColorToken(theme, 'colors.discovery.lead.secondary.background')};
      color: ${getColorToken(theme, 'colors.interactive.base.black')};
  `}

  :hover {
    ${({ theme }) => theme &&
    `
      background: ${getColorToken(theme, 'colors.interactive.base.black')};
      color: ${getColorToken(theme, 'colors.interactive.base.white')};
  `}
  }
`;
const AllFictionDesktop = styled.div.withConfig({
    displayName: 'AllFictionDesktop'
}) ``;
const AllFictionMobile = styled.div.withConfig({
    displayName: 'AllFictionMobile'
}) `
  ${SummaryCollectionGridItems} {
    ${SummaryItemWrapper}:last-child {
      border-bottom: none;
    }
  }
`;
const AllFiction = styled.section.withConfig({
    displayName: 'ContributorAllFiction'
}) `
  ${({ theme }) => theme &&
    `background: ${getColorToken(theme, 'colors.discovery.lead.secondary.background')}; }`}
  padding-top: ${calculateSpacing(4)};

  ${SectionTitleRoot} {
    margin-bottom: ${calculateSpacing(1)};
    border-top: 1px solid ${getColorToken('colors.discovery.body.white.accent')};
    border-bottom: 1px solid
      ${getColorToken('colors.discovery.body.white.accent')};

    ${minScreen(`${maxThresholds.lg + 1}px`)} {
      margin-bottom: ${calculateSpacing(4)};
    }
  }

  ${SummaryItemContent} {
    margin-bottom: 0;
  }

  ${AllFictionDesktop} {
    ${maxScreen(`${maxThresholds.lg}px`)} {
      display: none;
    }
  }

  ${AllFictionMobile} {
    ${minScreen(`${maxThresholds.lg + 1}px`)} {
      display: none;
    }
    ${maxScreen(`${maxThresholds.lg}px`)} {
      display: block;
    }
  }

  ${SummaryCollectionGridSummaryItem} {
    &:not(.summary-item--layout-placement-side-by-side-mobile-only) {
      .summary-item__hed {
        ${minScreen(BREAKPOINTS.md)} {
          ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-secondary')};
        }
      }
    }
  }
`;
module.exports = {
    AllFiction,
    AllFictionDesktop,
    AllFictionMobile,
    AllFictionFooter,
    AllFictionViewMore
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 68535:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    viewMoreText: {
        id: 'FeaturedContributorAllFiction.ViewMore',
        defaultMessage: 'View more',
        description: 'View more all fiction in featured contributor page'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 48206:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { useIntl } = __webpack_require__(46984);
const SummaryCollectionGrid = __webpack_require__(91706);
const { ContributorCollection, ContributorCollectionDesktop, ContributorCollectionMobile, ContributorCollectionViewMore, ContributorCollectionFooter } = __webpack_require__(81627);
const translations = (__webpack_require__(37261)/* ["default"] */ .A);
const { Circle: Loader } = __webpack_require__(62930);
const checkIsLastPage = (pageLimit, totalResults, pageNumber = 1) => {
    return pageNumber * pageLimit >= totalResults;
};
const getSummaryCollection = (items) => {
    if (items.length === 2) {
        return SummaryCollectionGrid.TwoColumns;
    }
    else if (items.length % 4 === 0) {
        return SummaryCollectionGrid.FourColumns;
    }
    return SummaryCollectionGrid.ThreeColumns;
};
/**
 * ContributorContributorCollection component
 *
 * @param {object} props - React props
 * @param {string} props.dangerousHed - Display section Title
 * @param {boolean} [props.hasBorderOnMobileAndTabletOnly] - Show border on Mobile and Tablet view only
 * @param {boolean} [props.hasBorderOnMobileOnly] - Show border only on mobile view
 * @param {boolean} [props.hasItemsRule] - Show or should hide the decorative rule on SummaryItem(s)
 * @param {boolean} [props.hideRuleFromMobile] - Show or should hide the decorative rule from mobile.
 * @param {boolean} [props.hideAuthorByline] - Hide Author name from byline
 * @param {boolean} [props.hideIssueDate] - Show or hide the issue date
 * @param {string} [props.sectionTitleVariation] - Prop to control section title variation
 * @param {boolean} [props.shouldHideDangerousDekMobileOnly] - Hide dangerousDek on Mobile only
 * @param {boolean} [props.shouldHidePublishDate] -  Boolean to hide publish date
 * @param {boolean} [props.shouldShowAllContentWhenDense] - isDense floats the image right but also hides content
 * on some viewports. This shows it all, always.
 * @param {string} [props.showViewMoreButton] - To show/hide view more button
 * @param {string} [props.summaryItemVariationForMobile] - Variation for SummaryItem for mobile screens
 * @param {Array}  [props.items] - List of collage items
 * @param {number}  [props.pageNumber] - pageNumber defines the current page number.
 * @param {number}  [props.limit] - Optional limit defines the page limit.
 * @param {number}  [props.paginatedContainerPosition] - Optional: defines the container position if it's a paginated container.
 * @param {number}  [props.totalResults] - Optional: it specifies the total records.
 */
const ContributorCollectionItems = ({ dangerousHed, hasBorderOnMobileAndTabletOnly, hasBorderOnMobileOnly = false, hasItemsRule = false, hideAuthorByline = false, hideIssueDate = false, hideRuleFromMobile, items: initialItems, sectionTitleVariation = 'LineAboveLineBelowTextCenter', shouldHideDangerousDekMobileOnly, shouldHidePublishDate, shouldShowAllContentWhenDense, showViewMoreButton, summaryItemVariationForMobile = 'SideBySideDense', paginatedContainerPosition: containerPosition, pageNumber = 1, limit: pageLimit, totalResults }) => {
    const intl = useIntl();
    const SummaryCollection = getSummaryCollection(initialItems);
    const [items, setItems] = React.useState(initialItems);
    const [pageURL, setPageURL] = React.useState('');
    const [isLoading, setIsLoading] = React.useState(false);
    const [loadMoreState, setLoadMoreState] = React.useState({
        currentPage: pageNumber,
        isLastPage: checkIsLastPage(pageLimit, totalResults, pageNumber)
    });
    React.useEffect(() => {
        setPageURL(window.location.href.split(/[?#]/)[0]);
    }, []);
    const doLoadMore = (e) => {
        e.preventDefault();
        const { currentPage } = loadMoreState;
        const nextPage = currentPage + 1;
        const prefix = window.location.href.split(/[?#]/)[0];
        const loadMoreURL = `${prefix}?page=${nextPage}&container=${containerPosition}&format=json`;
        setIsLoading(true);
        return fetch(loadMoreURL)
            .then((response) => response.json())
            .then(({ bundle }) => {
            const { items: containerItems, totalResults: totalItems } = bundle.containers[0];
            setItems(items.concat(containerItems));
            return totalItems;
        })
            .then((totalItems) => {
            setLoadMoreState({
                currentPage: nextPage,
                isLastPage: checkIsLastPage(pageLimit, totalItems, nextPage)
            });
            setIsLoading(false);
        })
            .catch((error) => {
            setIsLoading(false);
            console.warn(error);
        });
    };
    const { isLastPage, currentPage } = loadMoreState;
    return (React.createElement(ContributorCollection, null,
        React.createElement(ContributorCollectionDesktop, { as: SummaryCollection, dangerousHed: dangerousHed, hasBorderOnMobileAndTabletOnly: hasBorderOnMobileAndTabletOnly, hasBorderOnMobileOnly: hasBorderOnMobileOnly, hasItemsRule: hasItemsRule, hideAuthorByline: hideAuthorByline, hideIssueDate: hideIssueDate, items: items, sectionTitleVariation: sectionTitleVariation, shouldHidePublishDate: shouldHidePublishDate }),
        React.createElement(ContributorCollectionMobile, { as: SummaryCollection, dangerousHed: dangerousHed, hasBorderOnMobileAndTabletOnly: hasBorderOnMobileAndTabletOnly, hasBorderOnMobileOnly: hasBorderOnMobileOnly, hasItemsRule: hasItemsRule, hideAuthorByline: hideAuthorByline, hideIssueDate: hideIssueDate, hideRuleFromMobile: hideRuleFromMobile, items: items, sectionTitleVariation: sectionTitleVariation, shouldHideDangerousDekMobileOnly: shouldHideDangerousDekMobileOnly, shouldHidePublishDate: shouldHidePublishDate, shouldShowAllContentWhenDense: shouldShowAllContentWhenDense, summaryItemVariation: summaryItemVariationForMobile }),
        showViewMoreButton && !isLastPage && (React.createElement(ContributorCollectionFooter, null,
            React.createElement(ContributorCollectionViewMore, { href: !isLoading && `${pageURL}?page=${currentPage + 1}`, onClick: !isLoading && doLoadMore, title: intl.formatMessage(translations.viewMoreText) },
                intl.formatMessage(translations.viewMoreText),
                isLoading && React.createElement(Loader, { height: "20px", width: "20px", margin: "0" }))))));
};
ContributorCollectionItems.propTypes = {
    dangerousHed: PropTypes.string.isRequired,
    hasBorderOnMobileAndTabletOnly: PropTypes.bool,
    hasBorderOnMobileOnly: PropTypes.bool,
    hasItemsRule: PropTypes.bool,
    hideAuthorByline: PropTypes.bool,
    hideIssueDate: PropTypes.bool,
    hideRuleFromMobile: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape({
        categories: PropTypes.shape({
            tags: PropTypes.array
        }),
        dangerousDek: PropTypes.string,
        dangerousHed: PropTypes.string,
        image: PropTypes.object,
        url: PropTypes.string
    })).isRequired,
    limit: PropTypes.number.isRequired,
    pageNumber: PropTypes.number,
    paginatedContainerPosition: PropTypes.number,
    sectionTitleVariation: PropTypes.string,
    shouldHideDangerousDekMobileOnly: PropTypes.bool,
    shouldHidePublishDate: PropTypes.bool,
    shouldShowAllContentWhenDense: PropTypes.bool,
    showViewMoreButton: PropTypes.bool,
    summaryItemVariationForMobile: PropTypes.string,
    totalResults: PropTypes.number.isRequired
};
module.exports = ContributorCollectionItems;
//# sourceMappingURL=ContributorCollectionItems.js.map

/***/ }),

/***/ 63505:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const { asThemedComponent } = __webpack_require__(20223);
const ContributorCollectionItems = __webpack_require__(48206);
module.exports = asThemedComponent(asConfiguredComponent(ContributorCollectionItems, 'ContributorCollectionItems'));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 81627:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { maxScreen, minScreen, calculateSpacing, getColorToken, getTypographyStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { maxThresholds } = __webpack_require__(99906);
const { SectionTitleRoot } = __webpack_require__(33500);
const { SummaryCollectionGridSummaryItem, SummaryCollectionGridItems } = __webpack_require__(4534);
const { SummaryItemAssetContainer, SummaryItemWrapper } = __webpack_require__(68116);
const { SummaryItemBaseByline } = __webpack_require__(277);
const ContributorCollectionDesktop = styled.div.withConfig({
    displayName: 'ContributorContributorCollectionDesktop'
}) `
  ${SummaryItemBaseByline} {
    ${({ hideAuthorByline }) => hideAuthorByline && `display: none`}
  }
`;
const ContributorCollectionMobile = styled.div.withConfig({
    displayName: 'ContributorContributorCollectionMobile'
}) `
  ${SummaryItemAssetContainer} {
    width: ${calculateSpacing(12.5)};
  }
  ${SummaryItemWrapper} {
    grid-template-columns: auto auto ${calculateSpacing(12.5)};
  }

  ${SummaryCollectionGridItems} {
    grid-template-columns: none;

    ${SummaryItemWrapper}:last-child {
      border-bottom: none;
    }
  }
`;
const ContributorCollectionFooter = styled.div.withConfig({
    displayName: 'ContributorCollectionFooter'
}) `
  display: flex;
  justify-content: center;
  margin-top: ${calculateSpacing(2)};
  padding-bottom: ${calculateSpacing(8)};
`;
const ContributorCollectionViewMore = styled.a.withConfig({
    displayName: 'ContributorCollectionViewMore'
}) `
  ${getTypographyStyles('typography.definitions.foundation.link-primary')}
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid ${getColorToken('colors.discovery.body.white.accent')};
  min-width: ${calculateSpacing(20)};
  height: ${calculateSpacing(6)};
  text-decoration: none;
  ${({ theme }) => theme &&
    `
        background: ${getColorToken(theme, 'colors.discovery.lead.secondary.background')};
        color: ${getColorToken(theme, 'colors.interactive.base.black')};
    `}
  :hover {
    ${({ theme }) => theme &&
    `
        background: ${getColorToken(theme, 'colors.interactive.base.black')};
        color: ${getColorToken(theme, 'colors.interactive.base.white')};
    `}
  }
`;
const ContributorCollection = styled.section.withConfig({
    displayName: 'ContributorCollection'
}) `
  padding-top: ${calculateSpacing(5)};
  ${({ theme }) => theme &&
    `background: ${getColorToken(theme, 'colors.discovery.lead.secondary.background')};
      }`}

  ${SectionTitleRoot} {
    margin-bottom: ${calculateSpacing(1)};
    border-top: 1px solid ${getColorToken('colors.discovery.body.white.accent')};
    border-bottom: 1px solid
      ${getColorToken('colors.discovery.body.white.accent')};

    ${minScreen(BREAKPOINTS.lg)} {
      margin-bottom: ${calculateSpacing(4)};
    }
  }
  ${ContributorCollectionDesktop} {
    ${maxScreen(`${maxThresholds.lg}px`)} {
      display: none;
    }
  }

  ${ContributorCollectionMobile} {
    ${minScreen(BREAKPOINTS.lg)} {
      display: none;
    }
  }

  ${SummaryCollectionGridSummaryItem} {
    &:not(.summary-item--layout-placement-side-by-side-mobile-only) {
      .summary-item__hed {
        ${minScreen(BREAKPOINTS.md)} {
          ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-secondary')};
        }
      }
    }
  }
`;
module.exports = {
    ContributorCollection,
    ContributorCollectionDesktop,
    ContributorCollectionMobile,
    ContributorCollectionFooter,
    ContributorCollectionViewMore
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 37261:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    viewMoreText: {
        id: 'FeaturedContributor.ViewMore',
        defaultMessage: 'View more',
        description: 'View more about author in author hub'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 11269:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const Tout = __webpack_require__(20464);
const { connector } = __webpack_require__(57744);
const { TrackComponentChannel } = __webpack_require__(78788);
const translations = (__webpack_require__(85837)/* ["default"] */ .A);
const { ContributorHeaderWrapper, ContributorGrid, ContributorAvatarImage, ContributorAvatarImageWrapper, ContributorHeaderContent, ContributorHeaderName, ContributorHeaderTitle, ContributorHeaderShortBio, ContributorHeaderBio, ContributorHeaderBioClamp, ContributorHeaderSocialIcons, ContributorHeaderSeeMoreLink, ContributorDenseHeaderWrapper, ContributorNameAndTitleWrapper, ContributorLogo } = __webpack_require__(24283);
/**
 * ContributorHeader component
 *
 * @param {string} [avatarImageShape] - Is the avatar round or rectangle?
 * @param {string} [clampBreakpoint] - Breakpoint for the clamp, default xxl, xxxl says any screen size.
 * @param {string} [contributorBioAlignment] - align author bio text to left on mobile device
 * @param {number} [contributorHedMaxLines] - Maximum number of lines
 * @param {number} [contributorHedMaxLinesOnMobile] - Maximum number of lines shown on Mobile view, if this is present than contributorHedMaxLines is considered as lines to shown on Desktop view
 * @param {string} [dangerousBio] - Parsed markdown (dangerously set) bio section
 * @param {string} [dangerousShortBio] - Parsed markdown (dangerously set) short bio section
 * @param {object} [externalLinkData] - Object to set the Tout section
 * @param {boolean} [props.featureFlags] - Feature flag to enable styles and variations for Fiction contributor
 * @param {boolean} [hasSmallAvatar] - Optional prop to use small avatar
 * @param {boolean} [hasBorders] - Optional prop to use borders
 * @param {ResponsiveAsset.propTypes} [image] - Photo containing image sources for a ResponsiveAsset
 * @param {string} [ledeAlignment] - Optional alignment of lede, one of “default” or “center”
 * @param {boolean} [shouldHideTitle] - Optional prop to turn off Title
 * @param {boolean} [shouldRemoveNameMargin] - Should remove contributor name margin. default false.
 * @param {boolean} [showSeeMoreLink] - Optional prop to show see more link
 * @param {string} name - Required name of contributor
 * @param {SocialIcons.propTypes} [socialIconsProps] - Optional SocialIcons props
 * @param {string} [socialIconType] - Optional SocialIcons type
 * @param {string} [title] - Optional Contributor/Employee title
 * @param {string} [className] - Optional top-level class to add
 * @param {boolean} [props.hasLeftAlignedHeader] - Decides if header is left aligned
 * @param {boolean} [props.shouldApplyMaxWidth] - If true then apply max width or header
 * @param {boolean} [props.hasPaddingTop] - If true then apply top padding in header section
 * @param {string} [url] - Url to link to contributor page
 * @param {boolean} [variations.isFeaturedAuthor] - Optional says if contributor is featured author
 * @param {boolean} [variations.isDenseHeader] - Optional says if contributorHeader should be denseHeader
 * @param {string} descriptionToken - Optional token to apply for contributor's description text
 *
 * @returns {ReactElement} <div>
 */
const ContributorHeader = ({ avatarImageShape = 'rectangle', clampBreakpoint = 'xxl', contributorBioAlignment = 'default', contributorHedMaxLines = 0, contributorHedMaxLinesOnMobile = 0, dangerousBio, dangerousShortBio, descriptionToken, featureFlags: { enableFictionContributor }, hasAvatarImageBackground = false, hasSmallAvatar = false, clampReadLessText, clampReadMoreText, image, ledeAlignment = 'default', name, fallbackBioSuffix, shouldHideTitle = false, shouldRemoveNameMargin = false, showSocialIcons = true, socialIconsProps, socialIconType = 'standard', title, url = '', className, shouldApplyMaxWidth = false, hasLeftAlignedHeader = false, hasPaddingTop = true, showSeeMoreLink, variations: { isFeaturedAuthor, isDenseHeader } = {
    isFeaturedAuthor: false,
    isDenseHeader: false
}, externalLinkData, hasBorders = false }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ContributorHeader'
        });
    }, []);
    const { formatMessage } = useIntl();
    const seeMorelabel = `${formatMessage(translations.seeMoreContributorLink)}${' '}${`${name} `}`;
    const getDangerousBio = () => {
        if (!fallbackBioSuffix) {
            return '';
        }
        return `${name} ${fallbackBioSuffix}`;
    };
    const contributorDangerousBio = dangerousBio || getDangerousBio();
    let subHedChunk = (React.createElement(ContributorHeaderBio, { "data-testid": "ContributorHeaderBio", dangerouslySetInnerHTML: { __html: contributorDangerousBio }, isFeaturedAuthor: isFeaturedAuthor, isDenseHeader: isDenseHeader, enableFictionContributor: enableFictionContributor, contributorBioAlignment: contributorBioAlignment, descriptionToken: descriptionToken }));
    const ContributorHeaderNameTitle = (React.createElement(React.Fragment, null,
        name && (React.createElement(ContributorHeaderName, { "data-testid": "ContributorHeaderName", shouldRemoveNameMargin: shouldRemoveNameMargin, isDenseHeader: isDenseHeader }, name)),
        title && !shouldHideTitle && (React.createElement(ContributorHeaderTitle, { isDenseHeader: isDenseHeader }, title))));
    const ContributorDenseHeader = (React.createElement(ContributorDenseHeaderWrapper, { isImage: image },
        image && React.createElement(ContributorLogo, { ...image }),
        React.createElement(ContributorNameAndTitleWrapper, { isDenseHeader: isDenseHeader }, ContributorHeaderNameTitle)));
    const shouldClamp = contributorHedMaxLines > 0;
    if (shouldClamp) {
        subHedChunk = (React.createElement(ContributorHeaderBioClamp, { lines: contributorHedMaxLines, clampReadMoreText: clampReadMoreText, clampReadLessText: clampReadLessText, contributorBioAlignment: contributorBioAlignment, isCollapsible: true, enableFictionContributor: enableFictionContributor, breakpoint: clampBreakpoint, linesInMobile: contributorHedMaxLinesOnMobile }, subHedChunk));
    }
    return (React.createElement(ContributorHeaderWrapper, { className: className, enableFictionContributor: enableFictionContributor },
        React.createElement(ContributorGrid, { shouldApplyMaxWidth: shouldApplyMaxWidth, hasLeftAlignedHeader: hasLeftAlignedHeader, hasPaddingTop: hasPaddingTop },
            image && !isDenseHeader && (React.createElement(ContributorAvatarImageWrapper, { ledeAlignment: ledeAlignment, hasAvatarImageBackground: hasAvatarImageBackground, hasLeftAlignedHeader: hasLeftAlignedHeader },
                React.createElement(ContributorAvatarImage, { ...image, avatarImageShape: avatarImageShape, hasSmallAvatar: hasSmallAvatar }))),
            React.createElement(ContributorHeaderContent, { ledeAlignment: ledeAlignment, isContributorImageEmpty: !image, isFeaturedAuthor: isFeaturedAuthor, hasLeftAlignedHeader: hasLeftAlignedHeader, hasBorders: hasBorders },
                isDenseHeader ? ContributorDenseHeader : ContributorHeaderNameTitle,
                dangerousShortBio && (React.createElement(ContributorHeaderShortBio, { "data-testid": "ContributorHeaderShortBio", dangerouslySetInnerHTML: { __html: dangerousShortBio } })),
                contributorDangerousBio && subHedChunk,
                /* eslint-disable react/forbid-component-props */
                showSocialIcons && socialIconsProps && (React.createElement(ContributorHeaderSocialIcons, { ...socialIconsProps, variations: { theme: socialIconType } }))
            /* eslint-enable react/forbid-component-props */
            ,
                showSeeMoreLink && (React.createElement(ContributorHeaderSeeMoreLink, { href: url },
                    seeMorelabel,
                    "\u00BB")),
                isDenseHeader && externalLinkData && React.createElement(Tout, { ...externalLinkData })))));
};
ContributorHeader.propTypes = {
    avatarImageShape: PropTypes.oneOf(['round', 'rectangle']),
    clampBreakpoint: PropTypes.string,
    clampReadLessText: PropTypes.string,
    clampReadMoreText: PropTypes.string,
    className: PropTypes.string,
    contributorBioAlignment: PropTypes.oneOf([
        'center',
        'default',
        'left',
        'right'
    ]),
    contributorHedMaxLines: PropTypes.number,
    contributorHedMaxLinesOnMobile: PropTypes.number,
    dangerousBio: PropTypes.string,
    dangerousShortBio: PropTypes.string,
    descriptionToken: PropTypes.string,
    externalLinkData: PropTypes.object,
    fallbackBioSuffix: PropTypes.string,
    featureFlags: PropTypes.object,
    hasAvatarImageBackground: PropTypes.bool,
    hasBorders: PropTypes.bool,
    hasLeftAlignedHeader: PropTypes.bool,
    hasPaddingTop: PropTypes.bool,
    hasSmallAvatar: PropTypes.bool,
    image: PropTypes.object,
    ledeAlignment: PropTypes.oneOf(['center', 'default']),
    name: PropTypes.string.isRequired,
    shouldApplyMaxWidth: PropTypes.bool,
    shouldHideTitle: PropTypes.bool,
    shouldRemoveNameMargin: PropTypes.bool,
    showSeeMoreLink: PropTypes.bool,
    showSocialIcons: PropTypes.bool,
    socialIconsProps: PropTypes.object,
    socialIconType: PropTypes.oneOf([
        'footer',
        'has-background',
        'circular',
        'overlay',
        'standard'
    ]),
    title: PropTypes.string,
    url: PropTypes.string,
    variations: PropTypes.shape({
        isFeaturedAuthor: PropTypes.bool,
        isDenseHeader: PropTypes.bool
    })
};
ContributorHeader.displayName = 'ContributorHeader';
module.exports = connector(ContributorHeader, {
    keysToPluck: ['featureFlags']
});
//# sourceMappingURL=ContributorHeader.js.map

/***/ }),

/***/ 50417:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const { asThemedComponent } = __webpack_require__(20223);
const VariedContributorHeader = __webpack_require__(48236);
module.exports = asThemedComponent(asConfiguredComponent(VariedContributorHeader, 'ContributorHeader'));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 85837:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    seeMoreContributorLink: {
        id: 'ContributorHeader.SeeMoreContributorLink',
        defaultMessage: `See More By`,
        description: 'See More article link of contributor'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 48236:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const ContributorHeader = __webpack_require__(11269);
ContributorHeader.FeaturedAuthor = asVariation(ContributorHeader, 'FeaturedAuthor', { isFeaturedAuthor: true }, {
    clampBreakpoint: 'xxxl',
    contributorHedMaxLines: 6,
    contributorHedMaxLinesOnMobile: 10,
    contributorBioAlignment: 'left',
    shouldHideTitle: true,
    showSocialIcons: false,
    shouldRemoveNameMargin: true,
    shouldApplyMaxWidth: true,
    hasLeftAlignedHeader: true,
    hasPaddingTop: true
});
ContributorHeader.DenseHeader = asVariation(ContributorHeader, 'DenseHeader', { isDenseHeader: true }, {
    avatarImageShape: 'round',
    shouldHideTitle: false,
    shouldRemoveNameMargin: true,
    showSocialIcons: false
});
module.exports = ContributorHeader;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 7565:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(61254)/* ["default"] */ .A);
const { FeaturedStoriesList, FeaturedStoriesSectionTitle, FeaturedStoriesGrid } = __webpack_require__(30259);
/**
 * FeaturedStories
 *
 * @param {object} props - React props
 * @param {Array} props.selectedStories - Article objects
 * @param {string} contributorName - contributorName to use


 * @returns {ReactElement} - Component tree
 */
const FeaturedStories = ({ selectedStories, contributorName }) => {
    const { formatMessage } = useIntl();
    if (!selectedStories || !selectedStories.length) {
        return null;
    }
    return (React.createElement(FeaturedStoriesGrid, null,
        React.createElement(FeaturedStoriesSectionTitle, { className: "FeaturedStoriesSectionTitle", dangerousHed: formatMessage(translations.hedText, {
                contributorName
            }) }),
        React.createElement(FeaturedStoriesList, { items: selectedStories, shouldHideFinalBorder: true, shouldHideSponsoredAd: true, hasMarginSpacing: true, hideRubricItemSummary: true, hasUnderlineHed: false, shouldHideBylines: true, summaryItemVariation: "SideBySideThirdsImageLeftWithNoDekNoBorder", shouldUseSmallHed: true })));
};
FeaturedStories.propTypes = {
    contributorName: PropTypes.string,
    selectedStories: PropTypes.array.isRequired
};
FeaturedStories.displayName = 'FeaturedStories';
module.exports = FeaturedStories;
//# sourceMappingURL=FeaturedStories.js.map

/***/ }),

/***/ 69865:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { asConfiguredComponent } = __webpack_require__(12892);
const ContributorSpotlightMainSection = __webpack_require__(18083);
const { ContributorSpotlightContainer, ContributorSpotlightInnerContainer, ContributorSpotlightSingleColumn, ContributorSpotlightSectionTitle, ContributorSpotlightSummaryGrid } = __webpack_require__(5676);
/**
 * ContributorSpotlight component.
 *
 * @param {object} props - React props
 * @param {string} props.dangerousHed - Hed from CMS
 * @param {boolean} [props.hasConsistentSpacing] - defines whether the consistent spacing is needed or not
 * @param {Array} [props.selectedStories] - Selected articles list
 * @param {object} props.header - Contributor header props
 * @param {boolean} props.hasBordersForHeader - boolean value to enable borders for header
 *
 * @returns {ReactElement} - A component tree
 */
const ContributorSpotlight = ({ dangerousHed, selectedStories, header, hasBordersForHeader, hasConsistentSpacing = false }) => {
    const sectionTitleProps = {
        dangerousHed,
        className: 'ContributorSpotlightSectionTitle'
    };
    return (React.createElement(ContributorSpotlightContainer, { hasConsistentSpacing: hasConsistentSpacing, "data-testid": "ContributorSpotlightContainer" },
        React.createElement(ContributorSpotlightInnerContainer, null,
            React.createElement(ContributorSpotlightSingleColumn, null,
                dangerousHed && (React.createElement(ContributorSpotlightSectionTitle, { ...sectionTitleProps })),
                React.createElement(ContributorSpotlightSummaryGrid, null,
                    React.createElement(ContributorSpotlightMainSection, { header: header, selectedStories: selectedStories, hasBorders: hasBordersForHeader }))))));
};
ContributorSpotlight.propTypes = {
    dangerousHed: PropTypes.string,
    hasBordersForHeader: PropTypes.bool,
    hasConsistentSpacing: PropTypes.bool,
    header: PropTypes.object,
    selectedStories: PropTypes.array
};
ContributorSpotlight.displayName = 'ContributorSpotlight';
module.exports = asConfiguredComponent(ContributorSpotlight, 'ContributorSpotlight');
//# sourceMappingURL=ContributorSpotlight.js.map

/***/ }),

/***/ 18083:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const ContributorHeader = __webpack_require__(48236);
const FeaturedStories = __webpack_require__(7565);
const SmallDeviceFeaturedStories = __webpack_require__(20680);
const { ContributorSpotlightMainSectionGrid } = __webpack_require__(12378);
/**
 * SpotlightMainFeature component.
 *
 * @param {object} props - React props
 * @param {Array} [props.selectedStories] - Selected articles list
 * @param {string} [props.summaryItemVariation] - Which summary item to use
 * @param {object} props.header - Contributor header props
 * @param {boolean} props.hasBorders - boolean value to enable borders for header
 * @param {ReactChildren} props.children - React children
 *
 * @returns {ReactElement} - A component tree
 */
const ContributorSpotlightMainSection = ({ selectedStories = [], header, hasBorders }) => {
    const contributorName = (header && header.name) || '';
    const hasFeaturedStories = selectedStories && selectedStories.length > 0;
    return (React.createElement(ContributorSpotlightMainSectionGrid, { hasFeaturedStories: hasFeaturedStories },
        header && (React.createElement(ContributorHeader.DenseHeader, { ...header, hasBorders: hasBorders, showSeeMoreLink: true })),
        React.createElement(FeaturedStories, { selectedStories: selectedStories, contributorName: contributorName }),
        React.createElement(SmallDeviceFeaturedStories, { selectedStories: selectedStories, contributorName: contributorName })));
};
ContributorSpotlightMainSection.propTypes = {
    hasBorders: PropTypes.bool,
    header: PropTypes.object.isRequired,
    selectedStories: PropTypes.array,
    showSeeMoreLink: PropTypes.bool
};
module.exports = ContributorSpotlightMainSection;
//# sourceMappingURL=ContributorSpotlightMainSection.js.map

/***/ }),

/***/ 20680:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { useIntl } = __webpack_require__(46984);
const SummaryCarousel = __webpack_require__(43709);
const translations = (__webpack_require__(61254)/* ["default"] */ .A);
const { FeaturedStoriesSectionTitle, FeaturedStoriesCarousel } = __webpack_require__(74898);
/**
 * SmallDeviceFeaturedStories
 *
 * @param {object} props - React props
 * @param {Array} props.selectedStories - Article objects
 * @param {string} props.contributorName - Contributor Name
 * @returns {ReactElement} - Component tree
 */
const SmallDeviceFeaturedStories = ({ selectedStories, contributorName }) => {
    const { formatMessage } = useIntl();
    if (!selectedStories || !selectedStories.length) {
        return null;
    }
    return (React.createElement(FeaturedStoriesCarousel, null,
        React.createElement(FeaturedStoriesSectionTitle, { className: "FeaturedStoriesSectionTitle", dangerousHed: formatMessage(translations.hedText, {
                contributorName
            }) }),
        React.createElement(SummaryCarousel, { className: "featured-stories-carousel", items: selectedStories, shouldShowViewAllButton: false, isSummaryHeadingSecondary: true })));
};
SmallDeviceFeaturedStories.propTypes = {
    contributorName: PropTypes.string,
    selectedStories: PropTypes.array.isRequired
};
SmallDeviceFeaturedStories.displayName = 'SmallDeviceFeaturedStories';
module.exports = SmallDeviceFeaturedStories;
//# sourceMappingURL=SmallDeviceFeaturedStories.js.map

/***/ }),

/***/ 41096:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(69865);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 61254:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    hedText: {
        id: 'FeaturedStories.HedText',
        defaultMessage: `Featured Articles By {contributorName}`,
        description: 'Hed text for Featured Stories Section'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 54768:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { connector } = __webpack_require__(57744);
const CuratedShows = __webpack_require__(39689);
const { CuratedShowsSectionTitle } = __webpack_require__(99190);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * CuratedShowsSection component
 *
 * @param {object} props - React props
 * @param {string} [props.subHed] - one of two possible sub titles, depend on whether season is happening now or happened in the past
 * @param {string} [props.dangerousHed] - Container title (may contain HTML markup)
 * @param {string} [props.variationValue] - Variation value optional
 * @param {Array} [props.items] - Container items (curated shows data)
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 * @param {bool} [props.hideCuratedShowsList] - hides CuratedShowsListWrapper component when true, shows it when false
 * @returns {ReactElement} <div>
 */
const CuratedShowsSection = ({ dangerousHed, items, hideCuratedShowsList, subHed, variationValue, variationName }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'CuratedShowsSection',
            variation: variationName
        });
    }, [variationName]);
    const [item] = items;
    if (!item) {
        return null;
    }
    const curatedShowsLength = items[0].curatedShows.length > 0;
    return (React.createElement(React.Fragment, null, curatedShowsLength && (React.createElement("section", { "data-testid": "CuratedShowsSection" },
        dangerousHed && (React.createElement(CuratedShowsSectionTitle, { subHed: subHed, dangerousHed: dangerousHed, subHedPosition: "above" })),
        React.createElement(CuratedShows, { ...item, hasCuratedShowsVariation: variationValue, hideCuratedShowsList: hideCuratedShowsList })))));
};
CuratedShowsSection.propTypes = {
    dangerousHed: PropTypes.string,
    hideCuratedShowsList: PropTypes.bool,
    items: PropTypes.array,
    subHed: PropTypes.string,
    variationName: PropTypes.string,
    variationValue: PropTypes.string
};
module.exports = connector(CuratedShowsSection, {
    keysToPluck: []
});
//# sourceMappingURL=CuratedShowsSection.js.map

/***/ }),

/***/ 69031:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(54768);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 99190:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing, getColorToken, getTypographyStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const SectionHeader = __webpack_require__(95291);
const CuratedShowsSectionTitle = styled(SectionHeader).withConfig({
    displayName: 'CuratedShowsSectionTitle'
}) `
  && {
    padding: ${calculateSpacing(3)};
    text-align: center;

    @media (min-width: ${BREAKPOINTS.md}) {
      padding: ${calculateSpacing(5)};
    }

    .section-header__hed {
      color: ${({ theme }) => getColorToken(theme, 'colors.discovery.body.white.heading')};

      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.subhed-section-primary')}
    }

    .section-header__subhed {
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-primary')}

      padding-bottom: ${calculateSpacing(2)};

      color: ${({ theme }) => getColorToken(theme, 'colors.discovery.body.white.accent')};
    }
  }
`;
CuratedShowsSectionTitle.displayName = 'CuratedShowsSectionTitle';
module.exports = {
    CuratedShowsSectionTitle
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 41949:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState } = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(8277)/* ["default"] */ .A);
const googleAnalytics = __webpack_require__(37402);
const Button = __webpack_require__(31226);
const ChevronIcon = __webpack_require__(39733);
const GroupedNavigationHasSummaryCarousel = __webpack_require__(49152);
const GroupedNavigationHasBrowser = __webpack_require__(21634);
const GroupedNavigation = __webpack_require__(26223);
const SummaryGridCompact = __webpack_require__(10931);
const SummaryItemSimple = __webpack_require__(31933);
const ConnectedErrorBoundary = __webpack_require__(48496);
const { CuratedShowsWrapper, CuratedShowsFullWrapper, CuratedShowsListWrapper, CuratedShowsGridWrapper, CuratedShowsViewAllWrapper, CuratedShowsDrawer } = __webpack_require__(78067);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * CuratedShows component
 *
 * @param {object} props - React props
 * @param {Array}  props.curatedShows - Curated items to display in the expandable grid
 * @param {Array} props.allShows - Array of link groups to display in the left-hand column, and in the drawer on smaller viewports
 * @param {string} props.hasCuratedShowsVariation - Curated shows variation
 * @param {bool} props.hideCuratedShowsList - hides CuratedShowsListWrapper component when true, shows it when false
 * @param {string} props.label - Button Label
 * @returns {ReactElement} <div>
 */
const CuratedShows = ({ curatedShows, allShows, label = '', hasCuratedShowsVariation = 'CuratedShowsWithImage', hideCuratedShowsList }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'CuratedShows'
        });
    }, []);
    const [openDrawer, setOpenDrawer] = useState(false);
    const { formatMessage } = useIntl();
    const buttonlabel = label === '' ? formatMessage(translations.buttonLabel) : label;
    switch (hasCuratedShowsVariation) {
        case 'CuratedShowsWithImage': {
            return (React.createElement(CuratedShowsWrapper, null,
                !hideCuratedShowsList && (React.createElement(CuratedShowsListWrapper, { hideCuratedShowsList: hideCuratedShowsList },
                    React.createElement(ConnectedErrorBoundary, null,
                        React.createElement(GroupedNavigation, { hasAtoZIndex: true, groupedLinks: allShows, hasFilter: true, filterLabel: formatMessage(translations.groupedNavigationFilterLabel) })))),
                React.createElement(CuratedShowsGridWrapper, { hideCuratedShowsList: hideCuratedShowsList },
                    React.createElement(ConnectedErrorBoundary, null,
                        React.createElement(SummaryGridCompact, { items: curatedShows }))),
                React.createElement(CuratedShowsViewAllWrapper, null,
                    React.createElement(Button.Utility, { btnStyle: "text", label: buttonlabel, onClickHandler: () => {
                            setOpenDrawer(true);
                            googleAnalytics.emitGoogleTrackingEvent('view_all_shows');
                        }, ButtonIcon: () => React.createElement(ChevronIcon, { width: "1rem", height: "1rem" }), iconPosition: "after", hasEnableIcon: true })),
                React.createElement(CuratedShowsDrawer, { isOpen: openDrawer, onClose: () => {
                        setOpenDrawer(false);
                    }, contentLabel: formatMessage(translations.drawerContentLabel), showCloseButton: true, hideOnDesktop: true },
                    React.createElement(GroupedNavigation, { hasAtoZIndex: true, groupedLinks: allShows, hasFilter: true, filterLabel: formatMessage(translations.groupedNavigationFilterLabel) }))));
        }
        case 'CuratedShowsWithSummaryCarousel': {
            return (React.createElement(CuratedShowsWrapper, null,
                React.createElement(CuratedShowsFullWrapper, null,
                    React.createElement(ConnectedErrorBoundary, null,
                        React.createElement(GroupedNavigationHasSummaryCarousel, { groupedLinks: allShows, hasFilter: true, filterLabel: formatMessage(translations.groupedNavigationSummaryCarouselFilterLabel) })))));
        }
        case 'CuratedShowsWithBrowser': {
            return (React.createElement(CuratedShowsWrapper, null,
                React.createElement(CuratedShowsFullWrapper, null,
                    React.createElement(ConnectedErrorBoundary, null,
                        React.createElement(GroupedNavigationHasBrowser, { hasAtoZIndex: true, groupedLinks: allShows, hasFilter: true, filterLabel: formatMessage(translations.groupedNavigationBrowserFilterLabel) })))));
        }
        default:
            return null;
    }
};
CuratedShows.propTypes = {
    allShows: GroupedNavigation.groupedLinksShape.isRequired,
    curatedShows: PropTypes.arrayOf(PropTypes.shape(SummaryItemSimple.propTypes))
        .isRequired,
    hasCuratedShowsVariation: PropTypes.string,
    hideCuratedShowsList: PropTypes.bool,
    label: PropTypes.string
};
module.exports = CuratedShows;
//# sourceMappingURL=CuratedShows.js.map

/***/ }),

/***/ 39689:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(41949);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 78067:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing, getColorToken } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const Drawer = __webpack_require__(98653);
const { GroupedNavigationWrapper } = __webpack_require__(35089);
const { universalGridCore } = __webpack_require__(89085);
const { applyGridSpacing } = __webpack_require__(1123);
const CuratedShowsWrapper = styled('div').withConfig({
    displayName: 'CuratedShowsWrapper'
}) `
  ${universalGridCore()}
  ${applyGridSpacing('padding')}
  &&& {
    row-gap: 0;
  }
`;
const CuratedShowsFullWrapper = styled.div.withConfig({
    displayName: 'CuratedShowsFullWrapper'
}) `
  grid-column: 1 / -1;
`;
const CuratedShowsDrawer = styled(Drawer.Right).withConfig({
    displayName: 'CuratedShowsDrawer'
}) `
  &&& {
    padding: 0 ${calculateSpacing(4)};
  }
`;
const CuratedShowsListWrapper = styled.div.withConfig({
    displayName: 'CuratedShowsListWrapper'
}) `
  display: none;

  @media (min-width: ${BREAKPOINTS.lg}) {
    display: block;
    position: sticky;
    top: ${calculateSpacing(8)};
    margin-bottom: auto;
    border: 1px solid
      ${({ theme }) => getColorToken(theme, 'colors.discovery.body.white.divider')};
    height: 100%;
    max-height: calc(100vh - ${calculateSpacing(8)});
    ${({ hideCuratedShowsList }) => !hideCuratedShowsList &&
    `
      grid-column: 1 / span 3;
      @media (min-width: ${BREAKPOINTS.xxl}) {
        grid-column: 1 / span 2;
      }
    `}

    ${GroupedNavigationWrapper} {
      position: absolute;
      padding-left: ${calculateSpacing(2)};
      width: 100%;
    }
  }
`;
const CuratedShowsGridWrapper = styled.div.withConfig({
    displayName: 'CuratedShowsGridWrapper'
}) `
  grid-column: 1 / -1;
  margin-bottom: auto;

  @media (min-width: ${BREAKPOINTS.lg}) {
    ${({ hideCuratedShowsList }) => !hideCuratedShowsList
    ? `
      grid-column: 4 / -1;
    `
    : `grid-column: 1 / -1;`}
    border: 1px solid
      ${({ theme }) => getColorToken(theme, 'colors.discovery.body.white.divider')};
  }

  @media (min-width: ${BREAKPOINTS.xxl}) {
    ${({ hideCuratedShowsList }) => !hideCuratedShowsList
    ? `
      grid-column: 3 / -1;
    `
    : `grid-column: 1 / -1;`}
  }
`;
const CuratedShowsViewAllWrapper = styled.div.withConfig({
    displayName: 'CuratedShowsViewAllWrapper'
}) `
  display: flex;
  grid-column: 1 / -1;
  grid-row: 2;
  justify-content: center;
  border-top: 1px solid
    ${({ theme }) => getColorToken(theme, 'colors.discovery.body.white.divider')};
  padding-top: ${calculateSpacing(2)};

  .button__icon-container--after {
    display: flex;
    padding-left: ${calculateSpacing(0.5)};
    fill: ${({ theme }) => getColorToken(theme, 'colors.interactive.base.brand-secondary')};
  }

  @media (min-width: ${BREAKPOINTS.lg}) {
    display: none;
  }
`;
module.exports = {
    CuratedShowsWrapper,
    CuratedShowsDrawer,
    CuratedShowsFullWrapper,
    CuratedShowsListWrapper,
    CuratedShowsGridWrapper,
    CuratedShowsViewAllWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 8277:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    groupedNavigationFilterLabel: {
        id: 'CuratedShows.GroupedNavigationFilterLabel',
        defaultMessage: 'Search for a designer...',
        description: 'CuratedShows component grouped navigation filter label'
    },
    groupedNavigationBrowserFilterLabel: {
        id: 'CuratedShows.GroupedNavigationBrowserFilterLabel',
        defaultMessage: 'Search...',
        description: 'CuratedShows component grouped navigation filter label'
    },
    groupedNavigationSummaryCarouselFilterLabel: {
        id: 'CuratedShows.GroupedNavigationSummaryCarouselFilterLabel',
        defaultMessage: 'Search...',
        description: 'CuratedShows component grouped navigation filter label'
    },
    buttonLabel: {
        id: 'CuratedShows.ButtonLabel',
        defaultMessage: 'View all shows',
        description: 'CuratedShows component button label'
    },
    drawerContentLabel: {
        id: 'CuratedShows.DrawerContentLabel',
        defaultMessage: 'Runway All Shows navigation',
        description: 'CuratedShows component drawer content label'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 17628:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(21151)/* ["default"] */ .A);
const { connector } = __webpack_require__(57744);
const { StyledTextblock } = __webpack_require__(18765);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * Disclaimer component
 *
 * @param {object} props - React props
 * @param {string} [props.brandName] - brand
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.contentAlign] - Variation property to set text alignment.
 * @param {boolean} [props.hasHorizontalPadding] - Variation property to set horizontal padding
 * @param {string} props.disclaimerHtml - disclaimer text with support render html
 * @param {boolean} props.isEnabled - flag to enable/disable disclaimer text. `true` by default
 * @param {boolean} props.isSponsored - flag to enable/disable styling.
 * @param {string} props.sponsorName - sponsor name for native disclaimer for TNY.
 * @param {boolean} [props.hasDisclaimerBottomMargin] - optional flag for bottom margin in disclaimer
 *
 * @example you can change disclaimerHtml in componentConfig added Disclaimer: {settings: {disclaimerHtml: <YOUR_HTML>}}
 *
 * @returns {ReactElement} <div>
 */
const Disclaimer = ({ isEnabled = true, ...props }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'Disclaimer'
        });
    }, []);
    const { formatMessage } = useIntl();
    if (!isEnabled) {
        return null;
    }
    const { contentAlign = 'left', hasHigherHorizontalPadding = false, hasHorizontalPadding = false, hasMarginTop = false, hasTopRule = true, isSponsored = false, className, disclaimerHtml, brandName, hasDisclaimerBottomMargin, sponsorName, hasProductDisclaimerAlternativeStyle } = props;
    let disclaimerText;
    if (isSponsored) {
        disclaimerText =
            disclaimerHtml ||
                formatMessage(translations.nativeDisclaimerText, {
                    sponsorName
                });
    }
    else {
        disclaimerText =
            disclaimerHtml ||
                formatMessage(translations.disclaimerText, {
                    brandName
                });
    }
    return (React.createElement(StyledTextblock, { className: classnames('disclaimer', className), hasMarginTop: hasMarginTop, contentAlign: contentAlign, dangerousText: disclaimerText, hasTopRule: hasTopRule, hasHorizontalPadding: hasHorizontalPadding, isSponsored: isSponsored, hasDisclaimerBottomMargin: hasDisclaimerBottomMargin, hasProductDisclaimerAlternativeStyle: hasProductDisclaimerAlternativeStyle, hasHigherHorizontalPadding: hasHigherHorizontalPadding }));
};
Disclaimer.propTypes = {
    brandName: PropTypes.string,
    className: PropTypes.string,
    contentAlign: PropTypes.oneOf(['left', 'center']),
    disclaimerHtml: PropTypes.string,
    hasDisclaimerBottomMargin: PropTypes.bool,
    hasHigherHorizontalPadding: PropTypes.bool,
    hasHorizontalPadding: PropTypes.bool,
    hasMarginTop: PropTypes.bool,
    hasProductDisclaimerAlternativeStyle: PropTypes.bool,
    hasTopRule: PropTypes.bool,
    isEnabled: PropTypes.bool,
    isSponsored: PropTypes.bool,
    sponsorName: PropTypes.string
};
Disclaimer.displayName = 'Disclaimer';
module.exports = connector(Disclaimer, {
    keysToPluck: ['brandName']
});
//# sourceMappingURL=Disclaimer.js.map

/***/ }),

/***/ 74307:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const Disclaimer = __webpack_require__(27045);
module.exports = {
    Disclaimer,
    ConfiguredDisclaimer: asConfiguredComponent(Disclaimer, 'Disclaimer')
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 18765:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const Textblock = __webpack_require__(37326);
const { calculateSpacing, minMaxScreen, minScreen } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const StyledTextblock = styled(Textblock).withConfig({
    displayName: 'StyledTextblock'
}) `
  ${({ hasMarginTop }) => hasMarginTop &&
    `
      ${minMaxScreen(BREAKPOINTS.md, BREAKPOINTS.lg)}{
        margin-top: ${calculateSpacing(6)};
      }
      ${minMaxScreen(BREAKPOINTS.sm, BREAKPOINTS.md)}{
        margin-top: ${calculateSpacing(4)};
      }
    `}

  display: flex;
  width: 100%;
  ${({ contentAlign }) => contentAlign === 'center' && 'justify-content: center;'}

  p {
    ${({ contentAlign }) => contentAlign === 'center' &&
    `
      text-align: center;
      width: 100%;
  `}

    ${({ hasHorizontalPadding }) => hasHorizontalPadding && `padding: 0 ${calculateSpacing(2)};`}

    ${({ hasHigherHorizontalPadding }) => hasHigherHorizontalPadding &&
    `
        padding: 0 ${calculateSpacing(6)};
        @media (min-width: ${BREAKPOINTS.lg}) {
          width: 90%;
        }
        @media (max-width: ${BREAKPOINTS.md}) {
          padding: 0 ${calculateSpacing(2.5)};
        }
        
      `}
      
    ${({ isSponsored }) => isSponsored === true &&
    `
      font-family: inherit;
      font-style: italic;
    `}
    ${({ hasDisclaimerBottomMargin }) => hasDisclaimerBottomMargin &&
    `
      ${minScreen(BREAKPOINTS.md)}{
      margin-bottom: ${calculateSpacing(14)};
    }
      `}
  }
`;
module.exports = {
    StyledTextblock
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 21151:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    disclaimerText: {
        id: 'Disclaimer.Text',
        defaultMessage: `All products featured on {brandName} are independently selected by our editors. However, when you buy something through our retail links, we may earn an affiliate commission.`,
        description: 'Text for the disclaimer'
    },
    nativeDisclaimerText: {
        id: 'NativeDisclaimer.Text',
        defaultMessage: `This article was published by The New Yorker Brand Studio for {sponsorName}. The editorial staff of The New Yorker had no role in this post's preparation.`,
        description: 'Text for the native disclaimer'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 27045:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const Disclaimer = __webpack_require__(17628);
Disclaimer.TextCenterNoTopRule = asVariation(Disclaimer, 'TextCenterNoTopRule', {}, {
    hasTopRule: false,
    contentAlign: 'center',
    hasHorizontalPadding: true
});
module.exports = Disclaimer;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 91180:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(20313)/* ["default"] */ .A);
const PaletteProvider = __webpack_require__(49235);
const CloseIcon = __webpack_require__(76399);
const { DrawerButton, DrawerGlobalStyles, DrawerModalWrapper } = __webpack_require__(63967);
const { asThemedComponent } = __webpack_require__(20223);
const { asConfiguredComponent } = __webpack_require__(12892);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * Drawer Component.
 *
 * @param {object} props - React props
 * @param {string|object} [props.appElement] - The app element as a string selector or HTMLElement to pass to ReactModal
 * @param {string} [props.className] - An optional additional className
 * @param {boolean} props.isOpen - Boolean to determine if drawer should open or close
 * @param {number} props.minHeight - Optional to have a min height of DrawerModalWrapper
 * @param {boolean} props.hideChannelNavigation - optional flag to hide navigation
 * @param {boolean} props.hideDrawerScroll - optional to hide the scroll on drawer menu
 * @param {boolean} props.hasBodyScrollWhenDrawerOpen - optional prop to check if drawer is opened on click or on hover
 * @param {Function} props.onClose - Required function to execute on button click
 * @param {boolean} props.hideOnDesktop - Boolean to make drawer overlay not display on desktop
 * @param {boolean} props.hideOnMobile - Boolean to make drawer overlay not display on mobile
 * @param {string} [props.overlayColor] - drawer overlay color
 * @param {boolean} [props.showCloseButton] - Boolean to show close button or not
 * @param {string} [props.theme] - Theme to be set in component config or passed in as SiteHeader theme "standard" | "inverted"
 * @param {number} [props.transitionTimeMS] - The amount of time to keep drawer in DOM before unmounting
 * @param {object} [props.variations] - Variation properties used in rendering the component.
 * @param {string} [props.contentLabel] - Label to be announced to screenreader
 * @param {ReactElement|string} [props.children] - content for feature.
 * @param {ReactElement|string} [props.hasSpecificTopPosition] - Optional to set the drawer over-lay from spectic top position
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 * @param {boolean} [props.isBookmarkDrawersEnabled] - Flag to apply the new drawer design tokens for Collection Drawers
 *
 * @returns {ReactElement} <drawer>
 */
const Drawer = ({ appElement = '#app-root', className, hasSpecificTopPosition = 0, hideDrawerScroll = false, hideChannelNavigation, hasBodyScrollWhenDrawerOpen = true, minHeight, onClose, overlayColor = 'black', transitionTimeMS = 600, theme = 'standard', variations = {
    animation: 'slide-down',
    align: 'center',
    increasedTopPosition: false
}, contentLabel, children, showCloseButton = false, isOpen, hideOnDesktop = false, hideOnMobile = false, variationName, isBookmarkDrawersEnabled = false }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'Drawer',
            variation: variationName
        });
    }, []); /* eslint-disable-line react-hooks/exhaustive-deps */
    let drawerElement;
    const { formatMessage } = useIntl();
    const setDrawerElement = (contentRef) => {
        drawerElement = contentRef;
    };
    React.useEffect(() => {
        // Disable the body scroll when modal is open.
        if (isOpen && hasBodyScrollWhenDrawerOpen) {
            document.body.style.top = `-${window.scrollY}px`;
            document.body.style.position = 'fixed';
            document.body.style.width = '100%';
            document.querySelector('body').classList.add('body__drawer--open');
            // Enable the body scroll when modal is open and resume the user scroll position.
        }
        else if (hasBodyScrollWhenDrawerOpen &&
            document.body.style.position === 'fixed') {
            document.querySelector('body').classList.remove('body__drawer--open');
            const scrollY = parseInt(document.body.style.top, 10) || 0;
            document.body.style.position = '';
            document.body.style.top = '';
            document.body.style.width = '';
            window.scrollTo(0, scrollY * -1);
        }
    }, [isOpen, variations.animation, hasBodyScrollWhenDrawerOpen]);
    // https://cnissues.atlassian.net/browse/SUBS-1673
    // The animation was sometimes not visible in Safari. Seems like
    // there was a race condition between the animation and the
    // component being present in the DOM. This adds the style change
    // that is subject to animation to the end of the event loop.
    const onAfterOpen = () => {
        setTimeout(() => {
            if (drawerElement && drawerElement.classList) {
                drawerElement.classList.add('drawer--open-positioned');
            }
        }, 0);
    };
    return (React.createElement(PaletteProvider, { palette: theme },
        React.createElement(DrawerModalWrapper, { appElement: appElement, contentRef: setDrawerElement, hideDrawerScroll: hideDrawerScroll, hideChannelNavigation: hideChannelNavigation, "data-testid": "DrawerModalWrapper", additionalClassName: className, overlayClassName: {
                base: classnames('drawer__overlay', `drawer--overlay-color-${overlayColor}`, `drawer__overlay--align-${variations.align}`, {
                    'drawer__overlay--hide-on-desktop': hideOnDesktop,
                    'drawer__overlay--hide-on-mobile': hideOnMobile,
                    'drawer__overlay--increased-top-position': variations.increasedTopPosition
                }),
                afterOpen: 'drawer__overlay--opening',
                beforeClose: 'drawer__overlay--closing'
            }, align: variations.align, animation: variations.animation, htmlOpenClassName: "html__drawer--open", closeTimeoutMS: transitionTimeMS, contentLabel: contentLabel || formatMessage(translations.contentLabel), isOpen: isOpen, minHeight: minHeight, onAfterOpen: onAfterOpen, onRequestClose: onClose, role: "dialog", hasSpecificTopPosition: hasSpecificTopPosition, isBookmarkDrawersEnabled: isBookmarkDrawersEnabled },
            showCloseButton && (React.createElement(DrawerButton, { isIconButton: true, ButtonIcon: CloseIcon, label: formatMessage(translations.buttonLabel), onClickHandler: onClose, role: "button", isBookmarkDrawersEnabled: isBookmarkDrawersEnabled })),
            children,
            React.createElement(DrawerGlobalStyles, null))));
};
Drawer.propTypes = {
    appElement: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
    children: PropTypes.node,
    className: PropTypes.string,
    contentLabel: PropTypes.string,
    hasBodyScrollWhenDrawerOpen: PropTypes.bool,
    hasSpecificTopPosition: PropTypes.number,
    hideChannelNavigation: PropTypes.bool,
    hideDrawerScroll: PropTypes.bool,
    hideOnDesktop: PropTypes.bool,
    hideOnMobile: PropTypes.bool,
    isBookmarkDrawersEnabled: PropTypes.bool,
    isOpen: PropTypes.bool.isRequired,
    minHeight: PropTypes.number,
    onClose: PropTypes.func.isRequired,
    overlayColor: PropTypes.oneOf(['black', 'white']),
    showCloseButton: PropTypes.bool,
    theme: PropTypes.string,
    transitionTimeMS: PropTypes.number,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        animation: PropTypes.oneOf([
            'slide-down',
            'slide-right',
            'slide-left',
            'slide-up',
            'none'
        ]),
        align: PropTypes.oneOf(['center', 'left', 'right', 'bottom']),
        increasedTopPosition: PropTypes.bool
    })
};
Drawer.displayName = 'Drawer';
module.exports = asThemedComponent(asConfiguredComponent(Drawer, 'Drawer'));
//# sourceMappingURL=Drawer.js.map

/***/ }),

/***/ 57823:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const ReactModal = __webpack_require__(20312);
const { asThemedComponent } = __webpack_require__(20223);
/**
 * DrawerModal Component.
 *
 * @param {object} props - React props
 * @param {string|object} [props.appElement] - The app element as a string selector or HTMLElement to pass to ReactModal
 * @param {string} [props.align] - An optional alignment variation
 * @param {string} [props.className] - An optional additional className from styled component
 * @param {string} [props.additionalClassName] - className from parent component
 * @param {ReactElement|string} [props.children] - content for feature.
 *
 * @returns {ReactElement} <drawer>
 */
const DrawerModal = ({ children, align, appElement, className, additionalClassName, ...rest }) => {
    React.useEffect(() => {
        if (appElement) {
            ReactModal.setAppElement(appElement);
        }
    }, [appElement]);
    return (React.createElement(ReactModal, { ...rest, portalClassName: className, className: {
            base: classnames(`drawer`, additionalClassName, {
                [`drawer--align-${align}`]: align
            }),
            afterOpen: 'drawer--open',
            beforeClose: 'drawer--closing'
        } }, children));
};
DrawerModal.propTypes = {
    additionalClassName: PropTypes.string,
    align: PropTypes.string,
    appElement: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
    children: PropTypes.node,
    className: PropTypes.string
};
module.exports = asThemedComponent(DrawerModal);
//# sourceMappingURL=DrawerModal.js.map

/***/ }),

/***/ 98653:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(95995);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 63967:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, createGlobalStyle } = __webpack_require__(92168);
const DrawerModal = __webpack_require__(57823);
const Button = __webpack_require__(73730);
const { getColorToken, calculateSpacing, styledProperty, minScreen, getZIndex, maxScreen, getColorStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { getSiteNavigationMenuStyles } = __webpack_require__(56341);
const DrawerGlobalStyles = createGlobalStyle `
  .body__drawer--open {
    overflow: hidden;
  }
`;
const DrawerModalWrapper = styled(DrawerModal).withConfig({
    displayName: 'DrawerModalWrapper'
}) `
  .drawer {
    transition: 'transform 100ms cubic-bezier(0.23, 1, 0.32, 1)';

    animation: fadeIn 0.3s;
    outline: none;

    background-color: ${({ theme, isBookmarkDrawersEnabled }) => !isBookmarkDrawersEnabled &&
    getColorToken(theme, theme.palette === 'standard'
        ? 'colors.foundation.menu-bg.expanded'
        : 'colors.consumption.lead.inverted.background')};

    padding: ${calculateSpacing(6)} 0 0;
    max-height: 100%;
    overflow: hidden;

    ${styledProperty('align', (align) => ['left', 'right', 'bottom'].includes(align), `
        ${minScreen(BREAKPOINTS.md)} {
          max-width: 50%;
        }
        .drawer__social-icons {
          justify-content: flex-start;
        }
      `)}
  }

  div[class*='SecondaryMenuContent-']
    a[class*='SocialIconExternalLink-']
    .icon
    path {
    fill: ${({ theme }) => getColorToken(theme, 'colors.foundation.expanded-menu.nav-link.default')};
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @-moz-keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @-o-keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @-ms-keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .drawer.drawer--open {
    left: 0;
    height: 100vh;
    ${minScreen(BREAKPOINTS.lg)} {
      outline: none;
      height: auto;
      max-height: 100vh;
      overflow: hidden;
      transition-delay: '.2s';
    }
    transition-delay: '.2s';
    overflow: hidden;

    .drawer__content {
      transition: opacity 0.45s cubic-bezier(0.23, 1, 0.32, 1);
      opacity: 1;
    }

    ${styledProperty('align', 'right', `
        right: 0;
        left: unset;
        margin-left: auto;
      `)}
    ${styledProperty('align', 'bottom', `
        right: 0;
        max-width: 100%;
        position: absolute;
        bottom: 0;
      `)}
  }

  .drawer.drawer--open.drawer--open-positioned {
    transform: translateZ(0);
    ${({ hideDrawerScroll }) => !hideDrawerScroll &&
    `
        ${minScreen(BREAKPOINTS.lg)} {
          overflow-y: auto;
        }
    `}
  }

  .drawer.drawer--open.drawer--megamenu {
    background-color: ${({ theme }) => getColorToken(theme, theme.palette === 'inverted'
    ? 'colors.background.black'
    : 'colors.foundation.menu-bg.expanded')};
  }

  .drawer.drawer--open.drawer--search {
    background-color: ${({ theme }) => getColorToken(theme, 'colors.background.white')};
    height: auto;
  }

  .drawer.drawer--open.drawer--filter-mobile {
    padding: 0;
    overflow-y: auto;
  }

  ${styledProperty('animation', 'slide-down', `
      .drawer {
        transform: translate3d(0, -100%, 0);
      }

      .drawer.drawer--open {
        transition:  'transform 0.8s cubic-bezier(0.23, 1, 0.32, 1)';

        .drawer__content {
          transition-delay: 0.8s;
        }
      }

      .drawer.drawer--closing {
        transform: translate3d(0, -100%, 0);
        transition: 'transform 0.6s cubic-bezier(0.23, 1, 0.32, 1)';
        transition-delay: 0.3s;
      }

      .drawer.drawer--open.drawer--megamenu {
        transform: translateZ(0);
      }
    `)}

  ${styledProperty('animation', 'slide-right', `
      .drawer {
        transform: translate3d(-100%, 0, 0);
      }

      .drawer.drawer--open {
        transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);

        .drawer__content {
          transition-delay: 0.2s;
        }
      }

      .drawer.drawer--closing {
        transform: translate3d(-100%, 0, 0);
        transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1);
      }
    `)}

  ${styledProperty('animation', 'slide-left', `
      .drawer {
        transform: translate3d(100%, 0, 0);
      }

      .drawer.drawer--open {
        transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);

        .drawer__content {
          transition-delay: 0.2s;
        }
      }

      .drawer.drawer--closing {
        transform: translate3d(100%, 0, 0);
        transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1);
      }
    `)}

  ${styledProperty('animation', 'slide-up', `
      .drawer {
        height: 0;
        transform: translate3d(0, 100%, 0);
      }

      .drawer.drawer--open {
        height: auto;
        transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), 
                    height 0.8s cubic-bezier(0.23, 1, 0.32, 1);

        .drawer__content {
          transition-delay: 0.2s;
        }
      }

      .drawer.drawer--closing {
        height: 0;
        transform: translate3d(0, 100%, 0);
        transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), 
                    height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
        transition-delay: 0.2s;
      }
    `)}

  .drawer.drawer--closing {
    .drawer__content {
      transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
      opacity: 0;
    }
  }

  .drawer__overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    ${({ hideChannelNavigation }) => hideChannelNavigation
    ? `z-index : 999;`
    : `z-index: ${getZIndex('persistentBottomLayer')};`}
    transition: opacity 0.5s ease;
    background-color: rgba(
      ${getColorToken('colors.interactive.base.black', { rgbOnly: true })},
      0
    );

    &.drawer__overlay--opening {
      opacity: 1;

      &.drawer__overlay--increased-top-position {
        ${({ hasSpecificTopPosition }) => hasSpecificTopPosition > 0
    ? `top: ${hasSpecificTopPosition}px;`
    : `top: ${calculateSpacing(0)};`}
        .drawer.drawer--open.drawer--open-positioned {
          width: calc(100% - ${calculateSpacing(10)});
        }

        ${minScreen(BREAKPOINTS.lg)} {
          .drawer.drawer--open.drawer--open-positioned {
            width: auto;
          }
        }
      }

      &.drawer--overlay-color-white {
        background-color: rgba(
          ${getColorToken('colors.interactive.base.white', {
    rgbOnly: true
})},
          0.7
        );
      }

      &.drawer--overlay-color-black {
        background-color: rgba(
          ${getColorToken('colors.interactive.base.black', {
    rgbOnly: true
})},
          0.7
        );
      }
    }

    &.drawer__overlay--closing {
      opacity: 0;

      &.drawer--overlay-color-white {
        background-color: rgba(
          ${getColorToken('colors.interactive.base.white', {
    rgbOnly: true
})},
          0
        );
      }

      &.drawer--overlay-color-black {
        background-color: rgba(
          ${getColorToken('colors.interactive.base.black', {
    rgbOnly: true
})},
          0
        );
      }
    }

    &.drawer__overlay--align-right {
      z-index: ${getZIndex('hyperstitialLayer')};
    }

    &.drawer__overlay--hide-on-desktop {
      display: block;

      ${minScreen(BREAKPOINTS.lg)} {
        display: none;
      }
    }

    &.drawer__overlay--hide-on-mobile {
      display: block;

      ${maxScreen(`calc(${BREAKPOINTS.lg} - 1px)`)} {
        display: none;
      }
    }
  }
`;
const DrawerButton = styled(Button.Utility).withConfig({
    displayName: 'DrawerButton'
}) `
  ${({ theme }) => getSiteNavigationMenuStyles(theme, true)}

  position: absolute;
  top: ${calculateSpacing(1)};
  right: ${calculateSpacing(1)};
  width: ${calculateSpacing(4)};
  height: ${calculateSpacing(4)};

  .icon-close {
    padding: 6px;

    path {
      ${({ theme, isBookmarkDrawersEnabled }) => isBookmarkDrawersEnabled &&
    getColorStyles(theme, 'stroke', theme.palette === 'standard'
        ? 'colors.interactive.base.border'
        : 'colors.interactive.base.white')};
    }
  }
`;
module.exports = {
    DrawerGlobalStyles,
    DrawerModalWrapper,
    DrawerButton
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 20313:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    buttonLabel: {
        id: 'Drawer.ButtonLabel',
        defaultMessage: 'Close drawer',
        description: 'Drawer component button label'
    },
    contentLabel: {
        id: 'Drawer.ContentLabel',
        defaultMessage: 'Secondary menu navigation',
        description: 'Drawer component content label'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 95995:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const Drawer = __webpack_require__(91180);
Drawer.Left = asVariation(Drawer, 'Left', {
    animation: 'slide-right',
    align: 'left'
});
Drawer.Right = asVariation(Drawer, 'Right', {
    animation: 'slide-left',
    align: 'right'
});
Drawer.SiteHeaderDrawer = asVariation(Drawer, 'SiteHeaderDrawer', {
    animation: 'none',
    align: 'center',
    increasedTopPosition: true
});
Drawer.Bottom = asVariation(Drawer, 'Bottom', {
    animation: 'slide-up',
    align: 'bottom'
});
module.exports = Drawer;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 72894:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.DynamicMultiPackages = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const prop_types_1 = __importDefault(__webpack_require__(5556));
const classnames_1 = __importDefault(__webpack_require__(32485));
const track_component_1 = __webpack_require__(78788);
const styles_1 = __webpack_require__(67275);
const DynamicMultiPackages = ({ children, className, hasEvenSpacingMultiPackageRow, hasMarginBottomMultiPackageRow, hasMarginTopMultiPackageRow, hasNoTopBottomMarginOnMobile, multiPackageCustomClassName, shouldAddHjIgnoreAttribute }) => {
    react_1.default.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(track_component_1.TrackComponentChannel.RENDER, {
            name: 'MultiPackages'
        });
    }, []);
    return (react_1.default.createElement(styles_1.MultiPackageContainer, { customClass: multiPackageCustomClassName, className: (0, classnames_1.default)(`multi-packages${multiPackageCustomClassName ? ` ${multiPackageCustomClassName}` : ''}`, className), hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, hasMarginBottomMultiPackageRow: hasMarginBottomMultiPackageRow, hasMarginTopMultiPackageRow: hasMarginTopMultiPackageRow, hasEvenSpacingMultiPackageRow: hasEvenSpacingMultiPackageRow, "data-hj-ignore-attributes": shouldAddHjIgnoreAttribute ? '' : null }, children));
};
exports.DynamicMultiPackages = DynamicMultiPackages;
exports.DynamicMultiPackages.displayName = 'DynamicMultiPackages';
exports.DynamicMultiPackages.propTypes = {
    children: prop_types_1.default.node,
    className: prop_types_1.default.string,
    hasEvenSpacingMultiPackageRow: prop_types_1.default.bool,
    hasMarginBottomMultiPackageRow: prop_types_1.default.bool,
    hasMarginTopMultiPackageRow: prop_types_1.default.bool,
    hasNoTopBottomMarginOnMobile: prop_types_1.default.bool,
    multiPackageCustomClassName: prop_types_1.default.string,
    shouldAddHjIgnoreAttribute: prop_types_1.default.bool
};
exports["default"] = exports.DynamicMultiPackages;
//# sourceMappingURL=DynamicMultiPackages.js.map

/***/ }),

/***/ 55717:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const configured_component_1 = __webpack_require__(12892);
const DynamicMultiPackages_1 = __importDefault(__webpack_require__(72894));
exports["default"] = (0, configured_component_1.asConfiguredComponent)(DynamicMultiPackages_1.default, 'MultiPackages');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 58059:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const UtilityLede = __webpack_require__(50829);
const translations = (__webpack_require__(30256)/* ["default"] */ .A);
const Button = __webpack_require__(73730);
const ResponsiveAsset = __webpack_require__(73275);
const Caption = __webpack_require__(14760);
const { ErrorPageWrapper, ErrorPageSpotImageWrapper, BrandBackgroundBasePageWrapper, BrandBackgroundWrapper, BrandBackgroundCard, BrandBackgroundGrid } = __webpack_require__(56934);
const { TrackComponentChannel } = __webpack_require__(78788);
const { trackPageErrorEvent } = __webpack_require__(14307);
/**
 * ErrorPage component
 *
 * @param {string} props - React Props
 * @param {string} [props.backgroundImageSource] - Optional background image source
 * @param {string} [props.buttonLabel] - Optional label for button
 * @param {string} [props.buttonLink] - Optional link for button, sets '/' by default
 * @param {string} [props.dangerousCaption] - HTML to display as caption of spot image
 * @param {string} [props.dangerousCredit] - HTML to diaplay as credit of spot image
 * @param {string} [props.dangerousDek] - HTML for dek below hed
 * @param {string} [props.dangerousHed] - HTML for hed at top of template
 * @param {object} [props.spotImage] - Optional spot image object
 * @param {object} [props.hasBiggerSpotImage] - Optional spot image object size
 * @param {object} [props.hasButton] - Optional decides if it has button
 * @param {number} [props.statusCode] - status code for error
 *
 * @returns {ReactElement} <div>
 */
const ErrorContent = ({ backgroundImageSource = '', buttonLabel, buttonLink, dangerousCaption, dangerousCredit, dangerousDek, dangerousHed, hasBiggerSpotImage = false, hasButton = true, spotImage, statusCode = 404 }) => {
    const { formatMessage } = useIntl();
    const hed = dangerousHed || formatMessage(translations.dangerousHed);
    const dek = dangerousDek || formatMessage(translations.dangerousDek);
    React.useEffect(() => {
        if (statusCode) {
            trackPageErrorEvent(statusCode, dek);
        }
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ErrorPages'
        });
    }, [statusCode, dek]);
    const shouldRenderCaption = dangerousCaption || dangerousCredit;
    return (React.createElement(BrandBackgroundBasePageWrapper, { hasFooterMargins: false },
        React.createElement(BrandBackgroundWrapper, { backgroundImageSource: backgroundImageSource },
            React.createElement(BrandBackgroundGrid, null,
                React.createElement(BrandBackgroundCard, null,
                    React.createElement(ErrorPageWrapper, { backgroundImageSource: backgroundImageSource, withoutBg: !backgroundImageSource, dangerousDek: dek, dangerousHed: hed },
                        React.createElement(UtilityLede.ContentCenterNoBackground, { ariaLive: "polite", dangerousHed: hed, dangerousDek: dek }),
                        spotImage && (React.createElement(ErrorPageSpotImageWrapper, { hasButton: hasButton, hasBiggerSpotImage: hasBiggerSpotImage },
                            React.createElement(ResponsiveAsset, { ...spotImage }),
                            shouldRenderCaption && (React.createElement(Caption, { dangerousCaptionText: dangerousCaption, dangerousCredit: dangerousCredit })))),
                        hasButton && (React.createElement(Button.Utility, { "data-testid": "ErrorContentButton", label: buttonLabel || formatMessage(translations.buttonLabel), href: buttonLink || formatMessage(translations.buttonLink), inputKind: "link" }))))))));
};
ErrorContent.propTypes = {
    backgroundImageSource: PropTypes.string,
    buttonLabel: PropTypes.string,
    buttonLink: PropTypes.string,
    dangerousCaption: PropTypes.string,
    dangerousCredit: PropTypes.string,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    hasBiggerSpotImage: PropTypes.bool,
    hasButton: PropTypes.bool,
    spotImage: PropTypes.shape(ResponsiveAsset.propTypes),
    statusCode: PropTypes.number
};
module.exports = ErrorContent;
//# sourceMappingURL=ErrorContent.js.map

/***/ }),

/***/ 1898:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(58059);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 56934:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { calculateSpacing, getColorToken } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { UtilityLedeHeader } = __webpack_require__(79055);
const { applyGridSpacing } = __webpack_require__(1123);
const { BasePageMainFooterFiller } = __webpack_require__(4081);
const UtilityCard = __webpack_require__(60521);
const Grid = __webpack_require__(86659);
const { GridItem } = __webpack_require__(40653);
const BrandBackgroundWrapper = styled.div.withConfig({
    displayName: 'BrandBackgroundWrapper'
}) `
  background-color: ${getColorToken('colors.background.light')};
  background-position: top center;
  background-size: cover;

  ${({ backgroundImageSource }) => backgroundImageSource &&
    `
    background-image: url(${backgroundImageSource});
  `}

  padding: ${calculateSpacing(2)} 0;
  @media (min-width: ${BREAKPOINTS.md}) {
    padding: ${calculateSpacing(9)} 0;
  }

  ${UtilityLedeHeader} {
    padding: ${calculateSpacing(5)} 0 ${calculateSpacing(4)};

    @media (min-width: ${BREAKPOINTS.md}) {
      padding: ${calculateSpacing(5)} 0;
    }
  }
`;
const BrandBackgroundCard = styled(UtilityCard).withConfig({
    displayName: 'BrandBackgroundCard'
}) ``;
const BrandBackgroundBasePageWrapper = styled.div.withConfig({
    displayName: 'BrandBackgroundBasePageWrapper'
}) `
  ${BasePageMainFooterFiller} {
    background-color: ${getColorToken('colors.background.light')};
    background-position: top center;
    background-size: cover;
  }
`;
const BrandBackgroundGrid = styled(Grid).withConfig({
    displayName: 'BrandBackgroundGrid'
}) `
  ${GridItem} {
    grid-column: span 4;

    @media (min-width: ${BREAKPOINTS.md}) {
      grid-column: 2 / span 10;
    }
  }
`;
const ErrorPageSpotImageWrapper = styled.div.withConfig({
    displayName: 'ErrorPageSpotImageWrapper'
}) `
  margin: auto;
  width: 200px;
  ${({ hasBiggerSpotImage }) => hasBiggerSpotImage &&
    ` 
  @media (min-width: ${BREAKPOINTS.md}) {
    width: 600px;
  }
`};
  ${({ hasButton }) => hasButton &&
    ` 
padding-bottom: ${calculateSpacing(5)};
`};
`;
const ErrorPageWrapper = styled.div.withConfig({
    displayName: 'ErrorPageWrapper'
}) `
  &&& {
    text-align: center;

    ${UtilityLedeHeader} {
      padding-top: 0;
    }

    ${BrandBackgroundGrid} {
      ${applyGridSpacing('margin')}
      margin-right: auto;
      margin-left: auto;
      ${GridItem} {
        @media (min-width: ${BREAKPOINTS.md}) {
          grid-column: 2 / span 10;
        }
      }
    }
  }
`;
module.exports = {
    ErrorPageWrapper,
    ErrorPageSpotImageWrapper,
    BrandBackgroundWrapper,
    BrandBackgroundCard,
    BrandBackgroundBasePageWrapper,
    BrandBackgroundGrid
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 30256:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    buttonLabel: {
        id: 'ErrorContent.buttonLabel',
        defaultMessage: 'Go to Homepage',
        description: 'Button label for error page',
        isConfigurable: true
    },
    buttonLink: {
        id: 'ErrorContent.buttonLink',
        defaultMessage: '/',
        description: 'Button link for error page',
        isConfigurable: true
    },
    dangerousDek: {
        id: 'ErrorContent.dangerousDek',
        defaultMessage: 'There was an issue with this page',
        description: 'Dek for error page',
        isConfigurable: true
    },
    dangerousHed: {
        id: 'ErrorContent.dangerousHed',
        defaultMessage: 'Oops',
        description: 'Hed for error page',
        isConfigurable: true
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 14690:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { useRef, useEffect } = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const classnames = __webpack_require__(32485);
const cloneDeep = __webpack_require__(88055);
const { useIntl } = __webpack_require__(46984);
const isEmpty = __webpack_require__(62193);
const Viewport = __webpack_require__(52089);
const translations = (__webpack_require__(89895)/* ["default"] */ .A);
const CloseIcon = __webpack_require__(76399);
const LargeChevronIcon = __webpack_require__(708);
const ChevronIcon = __webpack_require__(39733);
const SelectionControlList = __webpack_require__(10673);
const UtilitySelectionControl = __webpack_require__(22698);
const Dropdown = __webpack_require__(79499);
const { Circle } = __webpack_require__(62930);
const { trackSearchFilterEvent } = __webpack_require__(14307);
const { useOutsideClick } = __webpack_require__(87098);
const { convertStringAsSlug } = __webpack_require__(67506);
const { FilterComponentWrapper, RemoveFilter, FilterDrawerText, FilterDrawerSelectionCounter, FilterMobileDrawerHeader, FilterMobileDrawerTitle, FilterMobileDrawer, FilterSortMobileDrawerWrapper, FilterMobileWrapper, FilterMobileButton, FilterMobileAccordianData, FilterAccordionContainer, FilterAccordionItemContainer, FilterAccordionLabelContainer, FilterAccordionItemContainerLabel, FilterAccordionItemContainerContent, FilterAccordionItemContainerButton, FilterMobileActionWrapper, FilterMobileDrawerAccordionWrapper, FilterMobileApplyActionButton, FilterMobileCancelActionButton, SortSelectionControlWrapper, FilterCategoryList, FilterCategoryItem, Category, CategoryContainer, FilterCategoryWrapper, StyledChevron, FilterSelectionMenuWrapper, FilterMenuWrapper, FilterMenuItemWrapper, FilterMenuTypeDeselect, FilterMenuGridWrapper, FilterMenuContent, FilterMenuCloseIcon, FilterSelectionControlWrapper, FilterMenuListWrapper, FilterTotalItemWrapper, FilterTotalItemWrapperMobile, RadioCheckboxSelectionControl, SortContainer, SortWrapper, SortMobileContainer, SortMobileButton, SortMobileDrawer } = __webpack_require__(13157);
const FILTER_AND_SORT = {
    FILTERING: 'filtering',
    SORTING: 'Sorting'
};
const QUERY_PARAM_LABEL = ['Type'];
/**
 * FilterComponent
 * A list of filter category and its child items
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional additional class to add to wrapper
 * @param {boolean} props.hasUpdateUrl - Optional to update the url on filter change
 * @param {boolean} [props.hasBottomBorder] - Optionally adds a border at the bottom to wrapper
 * @param {boolean} props.isCentered - Center aligns the navigation items
 * @param {boolean} props.showTotalItems - Optional flags to render the total items count
 * @param {string} [props.theme] - to get the theme
 * @param {string} props.trackingEvent - tracking event name
 * @param {boolean} props.totalItems - Total number of items from api response
 * @param {func} props.updateParentDataHandler - Optional Parent function
 * @param {boolean} [props.isMobileView] - set true if device is mobile
 * @param {boolean} [props.hideChannelNavigation] - set true to hide channel navigation component
 */
const FilterComponent = ({ className, filterSortData = {}, hasBottomBorder, isMobileView, hasUpdateUrl = true, hideChannelNavigation = true, isCentered, isContentLoading, showTotalItems, theme = 'standard', totalItems = 0, trackingEvent = 'plpFilterInteraction', updateParentDataHandler, sendFilterOpenStatus }) => {
    const [activeCategory, setActiveCategory] = React.useState(null);
    const [sortMobileData, setSortMobileData] = React.useState(null);
    const [sortByData, setSortByData] = React.useState(filterSortData.sortData);
    const [filterByData, setFilterByData] = React.useState(filterSortData.filterData);
    const [sortMenuStatus, setSortMenuStatus] = React.useState(false);
    const filterComponentWrapperRef = useRef(null);
    const wrapperRef = useRef(null);
    useOutsideClick(wrapperRef, () => setSortMenuStatus(false));
    const [filterSelectionPriority, setFilterSelectionPriority] = React.useState({});
    useOutsideClick(filterComponentWrapperRef, () => {
        if (!isMobileView) {
            setFilterByData(filterByData.map((item) => ({ ...item, isActive: false })));
            sendFilterOpenStatus && sendFilterOpenStatus(false);
        }
    });
    const [selectedSortData, setSelectedSortData] = React.useState({});
    const { formatMessage } = useIntl();
    const [isFilterMenuOpen, setIsFilterMenuOpen] = React.useState(false);
    const [isSortMenuOpen, setIsSortMenuOpen] = React.useState(false);
    const [currentPathname, setCurrentPathname] = React.useState('');
    const sortedData = (selectedSort = null) => {
        let sortingData;
        if (selectedSort) {
            sortingData = cloneDeep(selectedSort);
        }
        else {
            const sortData = cloneDeep(filterSortData.sortData);
            sortingData = sortData.find((sort) => sort.default);
        }
        if (!sortingData)
            return { label: formatMessage(translations.sortBy) };
        let selectedSortLabel = sortingData.label;
        if (sortingData.label.includes(':')) {
            selectedSortLabel = sortingData.label.split(':')[1].trim();
        }
        sortingData.label = `${formatMessage(translations.sortBy)}: ${selectedSortLabel}`;
        return sortingData;
    };
    const sortedMobileData = (selectedSort = null) => {
        let sortingData;
        if (selectedSort) {
            sortingData = cloneDeep(selectedSort);
        }
        else {
            const sortData = cloneDeep(filterSortData.sortData);
            sortingData = sortData.find((sort) => sort.default);
        }
        return sortingData;
    };
    const handleFilterTracking = (data, action) => {
        if (true) {
            const actionLabel = action === FILTER_AND_SORT.FILTERING && !isEmpty(activeCategory)
                ? activeCategory.label
                : `Sort By ${data.selectedFilter.label}`;
            window.dataLayer.push({
                event: trackingEvent,
                interactionType: 'Filtering/Sorting',
                nameOfSelection: `${action}_${actionLabel}`,
                valueOfFilter: data.selectedFilter.label,
                eventValue: ''
            });
        }
    };
    const trackSelectedEvent = (type, selectedCategory, selectedChildFilter) => {
        const eventData = {
            type,
            subject: 'filter',
            criteria: {
                filter: [
                    {
                        name: selectedCategory.label,
                        label: selectedChildFilter.label.toLowerCase()
                    }
                ]
            },
            platform: 'verso'
        };
        trackSearchFilterEvent(eventData);
    };
    useEffect(() => {
        setFilterByData(filterSortData.filterData);
        const { pathname } = window.location;
        setCurrentPathname(pathname);
    }, [filterSortData.filterData]);
    const paramKeyOrValueToPick = (filterType, key) => {
        let filterKeyOrValue = filterType.value;
        if (QUERY_PARAM_LABEL.includes(key)) {
            filterKeyOrValue = `${convertStringAsSlug(filterType.label)}`;
        }
        return filterKeyOrValue;
    };
    const queryBuilder = (filterData, sortData = {}) => {
        const filterParams = [];
        const pathParams = [];
        filterData.forEach((filter) => {
            const selectedChilds = filter.children
                .map((child) => child.isSelected && paramKeyOrValueToPick(child, filter.label))
                .filter((value) => value);
            if (!isEmpty(selectedChilds) && filter.paramType === 'path') {
                const pathPart = `/${selectedChilds.join()}`;
                pathParams.push(pathPart);
            }
            else if (!isEmpty(selectedChilds)) {
                const baseParamKey = paramKeyOrValueToPick(filter, filter.label);
                const paramKey = filter.label === 'Type' ? 'category' : baseParamKey;
                const queryPart = `${paramKey}=${selectedChilds.join('+')}`;
                filterParams.push(queryPart);
            }
        });
        return {
            filterParams: filterParams.join('&'),
            pathParams: pathParams.join('/'),
            sortParams: sortData.value
        };
    };
    const updateUrlOnFilterSortSelection = ({ filterData = [], sortData, filterSelectionPriority = {} }) => {
        const { filterParams, pathParams, sortParams } = queryBuilder(filterData, sortData);
        const { pathname, origin } = window.location;
        const pathChanged = !isEmpty(pathParams) && pathname !== pathParams;
        if (pathChanged) {
            const updatedUrl = `${origin}${pathParams}`;
            window.history.replaceState(null, null, updatedUrl);
            updateParentDataHandler({ pathChanged });
            return;
        }
        let updatedUrl = `${origin}${pathname}`;
        const queryParams = [];
        if (filterParams)
            queryParams.push(filterParams);
        if (sortParams)
            queryParams.push(`sort=${sortParams}`);
        if (queryParams.length) {
            updatedUrl = `${updatedUrl}?${queryParams.join('&')}`;
        }
        window.history.replaceState(null, null, updatedUrl);
        updateParentDataHandler({
            pathChanged,
            filterData,
            activeFilter: activeCategory,
            filterSelectionPriority
        });
    };
    const handleSortChange = (options) => {
        setSelectedSortData(sortedData(options));
        if (!isEmpty(options)) {
            handleFilterTracking({
                selectedFilter: options
            }, FILTER_AND_SORT.SORTING);
            updateUrlOnFilterSortSelection({
                filterData: filterByData,
                sortData: options
            });
        }
        const sortEventData = {
            type: 'select',
            subject: 'sort',
            criteria: {
                sort: options.label
            },
            platform: 'verso',
            no_of_results_returned: totalItems
        };
        trackSearchFilterEvent(sortEventData);
    };
    const collapseFilterDrawer = (event) => {
        event.preventDefault();
        setFilterByData(filterByData.map((item) => ({ ...item, isActive: false })));
        sendFilterOpenStatus && sendFilterOpenStatus(false);
    };
    const handleSortMenu = (e) => {
        if (e.target.name === '')
            return;
        collapseFilterDrawer(e);
        setSortMenuStatus(!sortMenuStatus);
    };
    const setFilterPriority = (item) => {
        const filterPriorities = { ...filterSelectionPriority };
        const hasActiveFilter = item.children.filter(({ isSelected }) => isSelected);
        if (filterPriorities[item.value] && hasActiveFilter.length === 0) {
            const priority = filterPriorities[item.value];
            delete filterPriorities[item.value];
            let highestPriority = priority;
            for (const key in filterPriorities) {
                if (filterPriorities[key] > priority) {
                    highestPriority =
                        priority > filterPriorities[key] ? priority : filterPriorities[key];
                    filterPriorities[key] -= 1;
                }
            }
            filterPriorities.lastActionTabPriority = highestPriority;
        }
        else {
            delete filterPriorities.activeTab;
            delete filterPriorities.lastActionTabPriority;
            const lastPriority = Object.keys(filterPriorities).length;
            if (!filterPriorities[item.value]) {
                filterPriorities[item.value] =
                    lastPriority === 0 ? 1 : lastPriority + 1;
            }
            filterPriorities.lastActionTabPriority = filterPriorities[item.value];
        }
        filterPriorities.activeTab = item.value;
        return filterPriorities;
    };
    const handleFilterSelection = (filterCategoryText, childIndex) => {
        const filterData = cloneDeep(filterByData);
        const findCategoryIndex = filterData.findIndex((item) => item.value === filterCategoryText);
        const selectedCategory = filterData[findCategoryIndex];
        const selectedChildFilter = selectedCategory.children[childIndex];
        let trackEvent = false;
        if (selectedCategory.selectionType === 'multiple') {
            trackEvent = !selectedChildFilter.isSelected;
            selectedChildFilter.isSelected = !selectedChildFilter.isSelected;
            selectedCategory.children[childIndex] = selectedChildFilter;
        }
        else {
            selectedCategory.children = selectedCategory.children.map((item, index) => {
                return {
                    ...item,
                    isSelected: index === childIndex
                };
            });
            const categoryLabel = selectedCategory.label.split(':')[0];
            selectedCategory.label = `${categoryLabel}: ${selectedChildFilter.label}`;
            trackEvent = true;
        }
        filterData[findCategoryIndex] = selectedCategory;
        const filterPriorities = setFilterPriority(selectedCategory);
        setFilterSelectionPriority(filterPriorities);
        setActiveCategory(selectedCategory);
        setFilterByData(filterData);
        const updateCategoryActiveStatus = filterData.map((item) => {
            const counter = item.selectionType === 'multiple'
                ? item.children.filter((filter) => filter.isSelected).length
                : 0;
            return { ...item, counter };
        });
        if (trackEvent) {
            handleFilterTracking({
                category: selectedCategory,
                selectedFilter: selectedChildFilter
            }, FILTER_AND_SORT.FILTERING);
        }
        let eventType = 'deselect';
        if (selectedChildFilter.isSelected) {
            eventType = 'select';
        }
        trackSelectedEvent(eventType, selectedCategory, selectedChildFilter);
        setFilterByData(updateCategoryActiveStatus);
        if (hasUpdateUrl && "object" !== 'undefined') {
            updateUrlOnFilterSortSelection({
                filterData,
                sortData: selectedSortData,
                filterSelectionPriority: filterPriorities
            });
        }
    };
    const handleSortClick = (childIndex) => {
        const updateSortingActiveStatus = sortByData.map((item, index) => {
            return {
                ...item,
                default: index === childIndex
            };
        });
        const selectedSortData = updateSortingActiveStatus.find((item) => item.default);
        setSortMobileData(selectedSortData);
        setSortByData(updateSortingActiveStatus);
    };
    const onFilterCategoryClick = (text, clickEvent) => {
        clickEvent.preventDefault();
        const updateCategoryActiveStatus = filterByData.map((item) => {
            return {
                ...item,
                isActive: !item.isActive && item.value === text
            };
        });
        const findActiveCategory = updateCategoryActiveStatus.find((item) => item.isActive);
        setActiveCategory(findActiveCategory);
        sendFilterOpenStatus && sendFilterOpenStatus(findActiveCategory && true);
        setFilterByData(updateCategoryActiveStatus);
    };
    const getCategoryLabel = (value, counter) => {
        const filterData = cloneDeep(filterByData);
        const filterCategory = filterData.find((item) => item.value === value);
        if (filterCategory && filterCategory.selectionType === 'single') {
            const selectedChild = filterCategory.children.find((child) => child.isSelected);
            if (selectedChild) {
                const categoryLabel = filterCategory.label.split(':')[0];
                return `${categoryLabel}: ${selectedChild.label}`;
            }
        }
        if (counter > 0) {
            return `${filterCategory.label} (${counter})`;
        }
        return filterCategory.label;
    };
    const renderCloseIcon = (React.createElement(Viewport, { min: "xl" }, (matches) => matches && (React.createElement(FilterMenuCloseIcon, { "aria-label": formatMessage(translations.filterCloseButtonLabel), ButtonIcon: CloseIcon, isIconButton: true, label: formatMessage(translations.filterCloseButtonLabel), onClickHandler: (e) => collapseFilterDrawer(e) }))));
    const isDeseletAllDisable = (item) => {
        const count = item.children.filter((filter) => filter.isSelected).length;
        if (count === 0)
            return true;
        return false;
    };
    const handleDeslectFilterType = (item) => {
        const filterData = cloneDeep(filterByData);
        const findCategoryIndex = filterData.findIndex((category) => category.value === item.value);
        item.children = item.children.map((active) => {
            if (active.isSelected) {
                active.isSelected = !active.isSelected;
            }
            return active;
        });
        item.counter = 0;
        filterData[findCategoryIndex] = item;
        setFilterByData(filterData);
        const filterPriorities = setFilterPriority(item);
        setFilterSelectionPriority(filterPriorities);
        if (hasUpdateUrl && "object" !== 'undefined') {
            updateUrlOnFilterSortSelection({
                filterData,
                sortData: selectedSortData,
                filterSelectionPriority: filterPriorities
            });
        }
    };
    const seoHrefBuilder = (categoryValue, childIndex, isMultipleType) => {
        const filterData = cloneDeep(filterByData);
        const findCategoryIndex = filterData.findIndex((item) => item.value === categoryValue);
        const selectedCategory = filterData[findCategoryIndex];
        const childFilter = selectedCategory.children[childIndex];
        childFilter.isSelected = true;
        selectedCategory.children[childIndex] = childFilter;
        filterData[findCategoryIndex] = selectedCategory;
        const { filterParams } = queryBuilder(filterData, selectedSortData, true);
        let hrefValue = isMultipleType ? currentPathname : `/${childFilter.value}`;
        if (filterParams) {
            hrefValue += `?${filterParams}`;
        }
        return hrefValue;
    };
    const renderFilterList = (categoryData) => {
        const { children, selectionType, value: categoryValue } = categoryData;
        const SelectionComponent = selectionType === 'multiple'
            ? RadioCheckboxSelectionControl.Checkbox
            : RadioCheckboxSelectionControl.Radio;
        const isMultipleType = selectionType === 'multiple';
        const isDisabled = isDeseletAllDisable(categoryData);
        return (React.createElement(React.Fragment, null,
            isMobileView && isMultipleType && (React.createElement(FilterMenuTypeDeselect, { inputKind: "button", isDisabled: isDisabled, label: formatMessage(translations.deseletActionLabel), isMobileView: isMobileView, onClickHandler: () => isDisabled ? {} : handleDeslectFilterType(categoryData), className: "un-select-filter-button" })),
            React.createElement(SelectionControlList, { dangerousLegend: categoryValue, className: "filter-selection-list", items: children }, children.map((item, index) => {
                const isSelected = Boolean(item.isSelected);
                const hrefValue = seoHrefBuilder(categoryValue, index, isMultipleType);
                return (React.createElement("a", { href: hrefValue },
                    React.createElement(FilterSelectionControlWrapper, { as: SelectionComponent, ...item, className: "filter-item", value: item.value, formName: categoryValue, key: `${item.label}.${item.value}`, index: index, isChecked: isSelected, isDisabled: false, onChangeHandler: () => handleFilterSelection(categoryValue, index) })));
            }))));
    };
    const onFilterClick = () => {
        const newIsFilterMenuOpen = !isFilterMenuOpen;
        setIsFilterMenuOpen(newIsFilterMenuOpen);
        setFilterByData(filterByData.map((item) => ({ ...item, isActive: false })));
        sendFilterOpenStatus && sendFilterOpenStatus(newIsFilterMenuOpen);
    };
    const onApplyClick = (item) => {
        if (item) {
            updateUrlOnFilterSortSelection({
                filterData: filterByData,
                sortData: item
            });
        }
        setIsSortMenuOpen(!isSortMenuOpen);
    };
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const filterCount = (filterCounter = 0) => {
        const filterData = cloneDeep(filterByData);
        filterData.forEach((item) => {
            if (item.selectionType === 'multiple') {
                // eslint-disable-next-line no-param-reassign
                filterCounter += item.counter;
            }
        });
        return filterCounter;
    };
    const FilterMobileDrawerHeaderComponent = () => {
        const filterCounter = filterCount();
        return (React.createElement(FilterMobileDrawerHeader, null,
            React.createElement(FilterMobileDrawerTitle, null,
                React.createElement(FilterDrawerText, null, isFilterMenuOpen
                    ? `${formatMessage(translations.filterBy)}`
                    : `${formatMessage(translations.sortBy)}`),
                isFilterMenuOpen && filterCounter > 0 && (React.createElement(FilterDrawerSelectionCounter, null,
                    "(",
                    filterCounter,
                    ")"))),
            React.createElement(RemoveFilter, null,
                React.createElement(CloseIcon, { onClick: () => isFilterMenuOpen ? onFilterClick() : onApplyClick(sortMobileData) }))));
    };
    const clickHandler = (id) => {
        const updateCategoryActiveStatus = filterByData.map((item, index) => {
            return {
                ...item,
                isActive: index === id ? !item.isActive : false
            };
        });
        const findActiveCategory = updateCategoryActiveStatus.find((item) => item.isActive);
        setActiveCategory(findActiveCategory);
        setFilterByData(updateCategoryActiveStatus);
    };
    const FilterAccordionItem = ({ id, label, value, counter }) => {
        const categoryData = filterByData[id];
        return (React.createElement(FilterAccordionContainer, null,
            React.createElement(FilterAccordionItemContainer, { onClick: () => clickHandler(id) },
                React.createElement(FilterAccordionLabelContainer, null, label ? (React.createElement(FilterAccordionItemContainerLabel, { dangerouslySetInnerHTML: {
                        __html: getCategoryLabel(value, counter)
                    } })) : null),
                React.createElement(FilterAccordionItemContainerButton, { isActive: categoryData.isActive, ButtonIcon: LargeChevronIcon, role: "button", isIconButton: true, label: "FilterAccordionItemContainerButton", width: "0.5rem", height: "0.5rem" })),
            React.createElement(FilterAccordionItemContainerContent, { activeCategory: activeCategory, id: id, isActive: categoryData.isActive }, renderFilterList(categoryData))));
    };
    FilterAccordionItem.propTypes = {
        counter: PropTypes.number,
        id: PropTypes.number,
        label: PropTypes.string,
        value: PropTypes.string
    };
    const isSortDataAvailable = filterSortData.sortData && !isEmpty(filterSortData.sortData);
    const defaultSortingData = isSortDataAvailable ? sortedData() : {};
    const defaultMobileSortingData = isSortDataAvailable
        ? sortedMobileData()
        : {};
    const removeFilter = () => {
        const filterData = cloneDeep(filterByData);
        filterData.map((filter) => {
            if (filter.selectionType === 'multiple') {
                filter.children = filter.children.map((filter) => ({
                    ...filter,
                    isSelected: false
                }));
            }
            return filter;
        });
        setFilterByData(filterData);
        if (hasUpdateUrl && "object" !== 'undefined') {
            updateUrlOnFilterSortSelection({
                filterData,
                sortData: sortMobileData || defaultMobileSortingData
            });
        }
        setIsFilterMenuOpen(!isFilterMenuOpen);
        setFilterByData(filterByData.map((item) => ({ ...item, isActive: false })));
    };
    const CircleWrapper = () => {
        return React.createElement(Circle, { fillColor: "#fff", margin: "0px", height: "40px", width: "40px" });
    };
    const getMobileActionButtonLabel = () => {
        if (isFilterMenuOpen) {
            if (isContentLoading) {
                return `${formatMessage(translations.contentLoadingLabel)}`;
            }
            return `${formatMessage(translations.showItems, { totalItems })}`;
        }
        return `${formatMessage(translations.applyActionLabel)}`;
    };
    const FilterMobileActionComponent = () => {
        return (React.createElement(FilterMobileActionWrapper, null,
            React.createElement(FilterMobileApplyActionButton, { inputKind: "button", label: getMobileActionButtonLabel(), onClickHandler: () => isFilterMenuOpen ? onFilterClick() : onApplyClick(sortMobileData), ButtonIcon: isContentLoading && CircleWrapper, iconPosition: "before", hasEnableIcon: true }),
            React.createElement(FilterMobileCancelActionButton, { inputKind: "button", label: formatMessage(translations.cancelActionLabel), onClickHandler: () => isFilterMenuOpen
                    ? removeFilter()
                    : setIsSortMenuOpen(!isSortMenuOpen) })));
    };
    const renderMobileSortList = () => {
        return (React.createElement(SelectionControlList, { dangerousLegend: `${formatMessage(translations.sortBy)}` }, sortByData.map((item, index) => {
            const isSelected = item.default;
            return (React.createElement(FilterSelectionControlWrapper, { as: UtilitySelectionControl.Radio, label: item.label, value: item.value, formName: item.value, key: `${item.label}.${item.value}`, index: index, isChecked: isSelected, isDisabled: false, onChangeHandler: () => handleSortClick(index) }));
        })));
    };
    return (React.createElement(FilterComponentWrapper, { ref: filterComponentWrapperRef },
        React.createElement(FilterCategoryWrapper, { "data-testid": "FilterComponent", hasBottomBorder: hasBottomBorder, isCentered: isCentered, className: className, id: "filter-wrapper" },
            React.createElement(React.Fragment, null,
                isMobileView ? (React.createElement(FilterMobileWrapper, null,
                    React.createElement(FilterMobileButton, { inputKind: "button", label: filterCount() > 0
                            ? `${formatMessage(translations.filterBy)} (${filterCount()})`
                            : formatMessage(translations.filterBy), ButtonIcon: ChevronIcon, iconPosition: "after", hasEnableIcon: true, onClickHandler: () => setIsFilterMenuOpen(!isFilterMenuOpen) }),
                    React.createElement(FilterMobileDrawer, { isOpen: isFilterMenuOpen, className: "drawer--filter-mobile", onClose: () => { }, hideChannelNavigation: hideChannelNavigation }, isFilterMenuOpen && (React.createElement(FilterSortMobileDrawerWrapper, null,
                        FilterMobileDrawerHeaderComponent(),
                        React.createElement(FilterMobileDrawerAccordionWrapper, null,
                            React.createElement(FilterMobileAccordianData, null, filterByData.map(({ label, value, counter }, index) => {
                                return (React.createElement(FilterAccordionItem, { id: index, label: label, value: value, counter: counter }));
                            })),
                            FilterMobileActionComponent())))))) : (React.createElement(FilterCategoryList, { id: "filter-category" }, filterByData.map(({ value, isActive, counter }, index) => {
                    return (React.createElement(FilterCategoryItem, { key: `${value}-${index}`, isActive: isActive, onClick: (e) => onFilterCategoryClick(value, e) },
                        React.createElement(CategoryContainer, null,
                            React.createElement(Category, { tabIndex: "0", role: "link", isActive: isActive, as: "a" },
                                React.createElement("span", { dangerouslySetInnerHTML: {
                                        __html: getCategoryLabel(value, counter)
                                    } }))),
                        React.createElement(StyledChevron, { isactive: String(isActive) })));
                }))),
                isMobileView && showTotalItems && (React.createElement(FilterTotalItemWrapperMobile, null,
                    totalItems,
                    " ",
                    formatMessage(translations.items))),
                isSortDataAvailable && (React.createElement(SortWrapper, { ref: wrapperRef }, isMobileView ? (React.createElement(SortMobileContainer, null,
                    React.createElement(SortMobileButton, { inputKind: "button", label: sortMobileData
                            ? sortMobileData.label
                            : defaultMobileSortingData.label, ButtonIcon: ChevronIcon, iconPosition: "after", hasEnableIcon: true, onClickHandler: () => setIsSortMenuOpen(!isSortMenuOpen) }),
                    React.createElement(SortMobileDrawer, { isOpen: isSortMenuOpen, className: "drawer--filter-mobile", onClose: () => { }, hideChannelNavigation: hideChannelNavigation }, isSortMenuOpen && (React.createElement(FilterSortMobileDrawerWrapper, null,
                        FilterMobileDrawerHeaderComponent(),
                        React.createElement(SortSelectionControlWrapper, { selectionType: "single" }, renderMobileSortList()),
                        FilterMobileActionComponent()))))) : (React.createElement(SortContainer, { className: classnames({
                        'is-sort-menu-open': sortMenuStatus,
                        'is-sort-menu-closed': !sortMenuStatus
                    }), onClick: (e) => handleSortMenu(e), onTouchStart: (e) => handleSortMenu(e), totalItems: totalItems },
                    React.createElement(Dropdown, { defaultValue: defaultSortingData, selectedValue: !isEmpty(selectedSortData)
                            ? selectedSortData
                            : defaultSortingData, isDropdownMenuOpen: sortMenuStatus, options: filterSortData.sortData, onInputChange: handleSortChange, shouldHideSelectedOptions: true }),
                    showTotalItems && (React.createElement(FilterTotalItemWrapper, null,
                        totalItems,
                        " ",
                        formatMessage(translations.items))))))))),
        !isMobileView &&
            filterByData.map((category) => (React.createElement(FilterSelectionMenuWrapper, { isActive: category.isActive },
                React.createElement(FilterMenuWrapper, { theme: theme },
                    React.createElement(FilterMenuGridWrapper, null,
                        React.createElement(FilterMenuContent, null,
                            React.createElement(FilterMenuListWrapper, { showTotalItems: showTotalItems }, renderFilterList(category)),
                            renderCloseIcon))),
                React.createElement(FilterMenuItemWrapper, null, category.selectionType === 'multiple' && (React.createElement(FilterMenuTypeDeselect, { inputKind: "button", isDisabled: isDeseletAllDisable(category), label: formatMessage(translations.deseletActionLabel), onClickHandler: () => isDeseletAllDisable(category)
                        ? {}
                        : handleDeslectFilterType(category) }))))))));
};
FilterComponent.propTypes = {
    className: PropTypes.string,
    filterSortData: PropTypes.object,
    hasBottomBorder: PropTypes.bool,
    hasUpdateUrl: PropTypes.bool,
    hideChannelNavigation: PropTypes.bool,
    isCentered: PropTypes.bool,
    isContentLoading: PropTypes.bool,
    isMobileView: PropTypes.bool,
    sendFilterOpenStatus: PropTypes.func,
    showTotalItems: PropTypes.bool,
    theme: PropTypes.oneOf(['standard', 'inverted']),
    totalItems: PropTypes.number,
    trackingEvent: PropTypes.string,
    updateParentDataHandler: PropTypes.func
};
FilterComponent.displayName = 'FilterComponent';
module.exports = FilterComponent;
//# sourceMappingURL=FilterComponent.js.map

/***/ }),

/***/ 78043:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(18493);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 13157:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { calculateSpacing, getColorStyles, getColorToken, getTypographyStyles, maxScreen, minScreen } = __webpack_require__(26865);
const { BaseLink, BaseWrap } = __webpack_require__(76955);
const { BREAKPOINTS } = __webpack_require__(96472);
const { resolveMenuKey, isInverted } = __webpack_require__(70698);
const { ChevronRight } = __webpack_require__(97504);
const Grid = __webpack_require__(86659);
const { GridItem } = __webpack_require__(40653);
const Drawer = __webpack_require__(98653);
const Button = __webpack_require__(73730);
const { BaseText } = __webpack_require__(18730);
const UtilitySelectionControl = __webpack_require__(67685);
const { UtilitySelectionControlLabel } = __webpack_require__(20404);
const { DropdownSelect } = __webpack_require__(58293);
const animationSpeed = '0.2s';
const FilterComponentWrapper = styled.div.withConfig({
    displayName: 'FilterComponentWrapper'
}) ``;
const FilterCategoryWrapper = styled.div.withConfig({
    displayName: 'FilterCategoryWrapper'
}) `
  display: flex;
  position: relative;
  justify-content: space-between;
  width: fill-available;
  ${({ isCentered }) => isCentered && 'justify-content: center;'}
  ${({ hasBorders, theme }) => hasBorders &&
    `
    border-width: 1px 0;
    border-style: solid;
    ${getColorStyles(theme, 'border-color', 'colors.foundation.menu.dividers')};
  `}
  ${({ hasBottomBorder, theme }) => hasBottomBorder &&
    `border-bottom: 1px solid;
    ${getColorStyles(theme, 'border-color', 'colors.foundation.menu.dividers')};
  `}

  ${({ hasGradient, fadeWidth, theme, hasAnchorLinkList }) => hasGradient &&
    `&::after {
      position: ${hasAnchorLinkList ? 'unset' : 'absolute'};
      top: 1px;
      right: 0;
      bottom: 1px;
      background: linear-gradient(90deg, rgba(${getColorToken(theme, resolveMenuKey(theme, 'colors.foundation.menu-bg.collapsed'), { rgbOnly: true })}, 0) 0%, rgba(${getColorToken(theme, resolveMenuKey(theme, 'colors.foundation.menu-bg.collapsed'), { rgbOnly: true })}, 1) 75%);
     
      width: ${calculateSpacing(3)} ;
      content: '';
      pointer-events: none;
      ${fadeWidth === 'lg' &&
        `
       width: ${calculateSpacing(9)} ;
       opacity: 0.9;
       @media (max-width: ${BREAKPOINTS.md}) {
         right: -1px;
       }
       `}
    }`}
`;
const FilterCategoryList = styled.ul.withConfig({
    displayName: 'FilterCategoryList'
}) `
  display: inline-flex;
  margin: 0;
  padding: 0;
  padding-right: var(--grid-margin);
`;
const Category = styled(BaseLink).withConfig({ displayName: 'Category' }) `
  text-decoration: none;
  line-height: 1;

  &:focus {
    text-decoration: none;
    ${({ theme, isActive }) => `${getColorStyles(theme, 'color', resolveMenuKey(theme, isActive
    ? 'colors.foundation.collapsed-menu.nav-link.hover'
    : 'colors.foundation.collapsed-menu.nav-link.default'))};`}
  }
`;
Category.defaultProps = {
    colorToken: 'colors.interactive.base.black',
    linkStyle: 'navigation',
    typeToken: 'typography.definitions.utility.input-core'
};
const CategoryContainer = styled.div.withConfig({
    displayName: 'CategoryContainer'
}) `
  display: inline-flex;
`;
const StyledChevron = styled(ChevronRight).withConfig({
    displayName: 'ScrollingNavigationChevron'
}) `
  fill: ${getColorToken('colors.foundation.collapsed-menu.nav-link.default')};
  transform: rotate(90deg);
  width: ${calculateSpacing(2)};
  height: ${calculateSpacing(2)};

  ${({ theme, isactive }) => isactive === 'true' &&
    `transform: rotate(270deg);
      ${getColorStyles(theme, 'fill', resolveMenuKey(theme, 'colors.foundation.collapsed-menu.nav-link.hover'))};`}
`;
UtilitySelectionControlLabel.defaultProps = {
    as: 'span',
    colorToken: 'colors.interactive.base.black',
    typeToken: 'typography.definitions.utility.input-core'
};
const RadioCheckboxSelectionControl = styled(UtilitySelectionControl).withConfig({
    displayName: 'RadioCheckboxSelectionControl'
}) `
  ${UtilitySelectionControlLabel}
  &.filter-item {
    span {
      padding-top: 2px;
    }
  }
`;
const FilterCategoryItem = styled.li.withConfig({
    displayName: 'FilterCategoryItem'
}) `
  display: flex;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  transition: all 500ms ease;
  cursor: pointer;
  height: 48px;
  text-transform: none;

  ${({ theme, isActive }) => isActive &&
    `
    &::before {
      ${getColorStyles(theme, 'background-color', resolveMenuKey(theme, isInverted(theme)
        ? 'colors.consumption.lead.inverted.background'
        : 'colors.foundation.collapsed-menu.nav-link.hover'))};
      bottom: 0;
      content: '';
      height: 2px;
      position: absolute;
      width: 100%;
    }
  `};

  & + & {
    margin-left: ${calculateSpacing(2)};
  }

  &:first-child {
    margin-left: 0;
  }
`;
const FilterSelectionMenuWrapper = styled.div.withConfig({
    displayName: 'FilterSelectionMenuWrapper'
}) `
  ${({ isActive }) => `display: ${isActive ? 'block' : 'none'}`};
  ${({ theme }) => getColorStyles(theme, 'background-color', isInverted(theme)
    ? 'colors.consumption.lead.inverted.background'
    : 'colors.foundation.menu-bg.collapsed')};

  position: relative;
  z-index: 9;
  width: 100%;
  height: auto;
`;
const FilterMenuWrapper = styled.div.withConfig({
    displayName: 'FilterMenuWrapper'
}) `
  width: 100%;
  height: 100%;
  ${maxScreen(BREAKPOINTS.sm)} {
    padding: 0 ${calculateSpacing(2)};
  }
`;
const FilterMenuGridWrapper = styled(Grid.WithMargins).withConfig({
    displayName: 'FilterMenuGridWrapper'
}) `
  && {
    width: 100%;
    max-width: inherit;

    ${maxScreen(`calc(${BREAKPOINTS.xxl} - 1px)`)} {
      padding: 0 ${calculateSpacing(0)};
    }
    ${minScreen(BREAKPOINTS.xxl)} {
      padding: 0 ${calculateSpacing(0)};
    }
  }
  height: 100%;
  overflow-y: scroll;
  box-sizing: content-box;

  scrollbar-width: none;

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  ${GridItem} {
    grid-column: 1 / -1;
    margin-top: ${calculateSpacing(2)};
  }
`;
const FilterMenuContent = styled.div.withConfig({
    displayName: 'FilterMenuContent'
}) `
  ${minScreen(BREAKPOINTS.lg)} {
    display: flex;
    width: 100%;
  }
`;
const FilterMenuCloseIcon = styled(Button.Utility).withConfig({
    displayName: 'MegaMenuCloseIconWrapper'
}) `
  position: relative;
  margin-left: auto;
  padding: 0;
  height: ${calculateSpacing(4)};

  &,
  &:active,
  &:hover,
  &:focus {
    border: 0;
    background-color: transparent;
  }

  svg {
    ${({ theme }) => getColorStyles(theme, 'fill', isInverted(theme)
    ? 'colors.background.white'
    : 'colors.foundation.collapsed-menu.nav-link.default')};
  }
`;
const FilterSelectionControlWrapper = styled('div').withConfig({
    displayName: 'FilterSelectionControlWrapper'
}) `
  && {
    grid-column-gap: ${calculateSpacing(1)};
  }

  span {
    display: box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
`;
const FilterMenuListWrapper = styled('div').withConfig({
    displayName: 'FilterMenuListWrapper'
}) `
  margin: 1rem 0;
  overflow-y: scroll;
  ${({ showTotalItems }) => `margin: 1rem 0rem ${calculateSpacing(!showTotalItems ? 4 : 2)};`}
  width: 100%;

  .filter-selection-list {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(10, 1fr);
    column-gap: ${calculateSpacing(4)};
    height: ${calculateSpacing(16)};
    row-gap: ${calculateSpacing(1.5)};
    justify-items: start;
  }

  && {
    .filter-item {
      padding: 0;

      &:hover {
        cursor: pointer;
      }
    }

    .selection-control-list__item {
      text-decoration: none;
    }
  }
`;
const FilterMenuItemWrapper = styled.div.withConfig({
    displayName: 'FilterMenuItemWrapper'
}) `
  display: inline-flex;
  width: 100%;
`;
const FilterMenuTypeDeselect = styled(Button.Utility).withConfig({
    displayName: 'FilterMenuTypeDeselect'
}) `
  padding: 0;
  ${({ isDisabled }) => (isDisabled ? `color:#636363;` : `color: black;`)}
  ${({ isMobileView }) => isMobileView
    ? `
      margin-bottom: ${calculateSpacing(3)};
    `
    : `
      width: 70px;
      min-width : 0;
    margin-top: -4px;
    `}

  &&&,
  &:focus,
  &:hover {
    border: 0;
    background-color: transparent;
    height: 24px;
    text-align: left;
    text-decoration: underline;
    ${({ theme, typeToken }) => getTypographyStyles(theme, typeToken)};
    ${({ isDisabled, theme }) => isDisabled
    ? `color:${getColorStyles(theme, 'color', 'colors.interactive.base.deemphasized')};
           opacity: 80%;
          `
    : `color: black;`}
  }
`;
FilterMenuTypeDeselect.defaultProps = {
    typeToken: 'typography.definitions.utility.input-core'
};
const FilterTotalItemWrapper = styled(BaseText).withConfig({
    displayName: 'FilterTotalItemWrapper'
}) `
  margin: ${calculateSpacing(2)};
  border-left: 1px solid ${getColorToken('colors.interactive.base.black')};
  padding: 0 ${calculateSpacing(4)};
  width: 100%;
  height: 17px;
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.tags')};
  ${({ theme, colorToken }) => getColorStyles(theme, 'color', colorToken)};
`;
FilterTotalItemWrapper.defaultProps = {
    as: 'span',
    colorToken: 'colors.interactive.base.black',
    typeToken: 'typography.definitions.utility.input-core'
};
const SortContainer = styled(BaseWrap).withConfig({
    displayName: 'SortContainer'
}) `
  display: flex;

  .dropdown__control--menu-is-open {
    .dropdown__icon > svg {
      transform: rotate(180deg);
    }
  }

  .dropdown__value-container {
    height: 47px;
  }

  &.is-sort-menu-closed {
    .dropdown__value-container {
      border: none;
    }

    .dropdown__control--is-focused {
      border: none;
      box-shadow: none;
    }
  }

  &.is-sort-menu-open {
    .dropdown__value-container {
      border-width: 1px;
      border-style: solid;
      border-color: ${getColorToken('colors.interactive.base.black')};
    }
  }

  ${DropdownSelect} {
    min-width: ${calculateSpacing(12)};

    .dropdown__control {
      display: flex;
      justify-content: flex-start;

      .dropdown__single-value {
        ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.utility.input-core')};
        color: ${getColorToken('colors.interactive.base.black')};
      }

      .dropdown__value-container {
        padding: 1rem 1.9rem 1rem 0.5rem;
      }

      .dropdown__control--menu-is-open {
        .dropdown__value-container {
          border-width: 1px;
          border-style: solid;
          border-color: ${getColorToken('colors.interactive.base.black')};
        }
      }
    }

    .dropdown__menu-list {
      .dropdown__option {
        border-width: 1px;
        border-color: ${getColorToken('colors.interactive.base.black')};

        &:last-of-type {
          border-bottom: 1px solid
            ${getColorToken('colors.interactive.base.black')};
          border-top-width: none;
          border-top-style: none;
        }
      }
    }
  }

  @media (max-width: ${BREAKPOINTS.md}) {
    left: -${calculateSpacing(2)};
  }
`;
const SortWrapper = styled(BaseWrap).withConfig({
    displayName: 'SortWrapper'
}) `
  position: relative;
  z-index: 1;

  @media (max-width: ${BREAKPOINTS.md}) {
    margin: 0;
  }
`;
const FilterMobileWrapper = styled.div.withConfig({
    displayName: 'FilterMobileWrapper'
}) ``;
const FilterTotalItemWrapperMobile = styled.div.withConfig({
    displayName: 'FilterTotalItemWrapperMobile'
}) `
  padding: ${calculateSpacing(2)};
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.tags')};
  ${({ theme, colorToken }) => getColorStyles(theme, 'color', colorToken)};
`;
const FilterMobileButton = styled(Button.Utility).withConfig({
    displayName: 'FilterMobileButton'
}) `
  &,
  &:focus,
  &:hover {
    border: 0;
    background-color: transparent;
    color: black;
  }
  padding: 0;
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.utility.input-core')};

  svg {
    transform: rotate(90deg);
    width: ${calculateSpacing(1.25)};
    height: ${calculateSpacing(1.25)};
  }
`;
const FilterMobileDrawer = styled(Drawer).withConfig({
    displayName: 'FilterMobileDrawer'
}) `
  overflow-y: auto;
  position: relative;
`;
const FilterSortMobileDrawerWrapper = styled(BaseWrap).withConfig({
    displayName: 'FilterSortMobileDrawerWrapper'
}) ``;
const RemoveFilter = styled.div.withConfig({
    displayName: 'RemoveFilter'
}) `
  display: flex;
  cursor: pointer;

  .icon-close {
    padding: 4px;
  }

  svg {
    position: absolute;
    right: 1rem;
    width: ${calculateSpacing(4)};
    height: ${calculateSpacing(4)};

    path {
      fill: ${getColorToken('colors.interactive.base.black')};
    }
  }
`;
const FilterMobileDrawerHeaderWrapper = styled.div.withConfig({
    displayName: 'FilterMobileDrawerHeaderWrapper'
}) ``;
const FilterMobileDrawerHeader = styled(BaseWrap).withConfig({
    displayName: 'FilterMobileDrawerHeader'
}) `
  display: inline-flex;
  position: relative;
  background: rgb(248, 248, 248);
  padding: ${calculateSpacing(3)};
  width: fill-available;
`;
const FilterMobileDrawerTitle = styled(BaseWrap).withConfig({
    displayName: 'FilterMobileDrawerTitle'
}) `
  display: inline-flex;
`;
const FilterDrawerText = styled(BaseWrap).withConfig({
    displayName: 'FilterDrawerText'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.subhed-aux-secondary')};

  ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.black')};
`;
const FilterDrawerSelectionCounter = styled.div.withConfig({
    displayName: 'FilterDrawerSelectionCounter'
}) `
  position: relative;
  margin-left: 0.2rem;
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.subhed-aux-secondary')};
`;
const FilterMobileAccordianData = styled(BaseWrap).withConfig({
    displayName: 'FilterMobileAccordianData'
}) `
  position: absolute;
  top: 80px;
  bottom: 160px;
  width: 100%;
  overflow-y: auto;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth;

  &::-webkit-scrollbar {
    display: none;
  }
`;
const FilterAccordionContainer = styled.div.withConfig({
    displayName: 'FilterAccordionContainer'
}) `
  border-bottom: 1px solid;
  ${({ theme }) => getColorStyles(theme, 'border-bottom-color', 'colors.discovery.body.white.divider')};

  svg {
    float: right;
    transform-origin: center;
    transition: all ${animationSpeed} ease-in-out;
    width: ${calculateSpacing(1.25)};
    height: ${calculateSpacing(1.25)};
  }
  overflow: hidden;
`;
const FilterAccordionItemContainerLabel = styled.label.withConfig({
    displayName: 'FilterAccordionItemContainerLabel'
}) `
  ${getTypographyStyles('typography.definitions.consumptionEditorial.subhed-aux-secondary')};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.background.black')};
`;
FilterAccordionItemContainerLabel.defaultProps = {
    typeIdentity: 'typography.definitions.consumptionEditorial.subhed-aux-primary'
};
const FilterAccordionLabelContainer = styled.div.withConfig({
    displayName: 'FilterAccordionLabelContainer'
}) `
  display: inline-flex;
`;
const FilterAccordionItemContainerContent = styled(BaseText).withConfig({
    displayName: 'FilterAccordionItemContainerContent'
}) `
  margin: 0 ${calculateSpacing(3)};

  .selection-control-list__item {
    text-decoration: none;
  }
  ${({ isActive }) => isActive
    ? `
      overflow: hidden;
      transition: ${animationSpeed} linear;
      padding-bottom: ${calculateSpacing(2)};
     `
    : `
     max-height: 0px;
     transition: all ${animationSpeed};
     `}

  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.lead.standard.description')};

  && {
    .un-select-filter-button {
      margin-bottom: 0;
    }
  }
  ${FilterSelectionControlWrapper} {
    padding: ${calculateSpacing(2)} 0 ${calculateSpacing(1)};
  }
`;
const FilterAccordionItemContainer = styled.div.withConfig({
    displayName: 'FilterAccordionItemContainer'
}) `
  margin: ${calculateSpacing(3)};
`;
const FilterAccordionItemContainerButton = styled(Button.Utility).withConfig({
    displayName: 'FilterAccordionItemContainerButton'
}) `
  fill: #615f66;
  float: right;
  transition: all 0.2s ease;
  padding: ${calculateSpacing(1)} ${calculateSpacing(0.5)};

  &,
  &:focus,
  &:hover {
    border: 0;
    background-color: transparent;
  }
  ${({ isActive }) => isActive && `transform: rotate(180deg);`}
`;
const FilterMobileActionWrapper = styled(BaseWrap).withConfig({
    displayName: 'FilterMobileActionWrapper'
}) `
  position: absolute;
  bottom: 0;
  padding: ${calculateSpacing(3)};
  width: 100%;
  ${({ theme }) => `
  background: ${getColorToken(theme, 'colors.background.light')};`};
`;
const FilterMobileDrawerAccordionWrapper = styled.div.withConfig({
    displayName: 'FilterMobileDrawerAccordionWrapper'
}) ``;
const FilterMobileApplyActionButton = styled(Button.Primary).withConfig({
    displayName: 'FilterMobileApplyActionButton'
}) `
  margin-bottom: ${calculateSpacing(2)};
  width: 100%;
`;
const FilterMobileCancelActionButton = styled(Button.Secondary).withConfig({
    displayName: 'FilterMobileCancelActionButton'
}) `
  width: 100%;
  ${({ theme }) => `
  background: ${getColorToken(theme, 'colors.background.light')};`}
`;
const SortMobileContainer = styled.div.withConfig({
    displayName: 'SortMobileContainer'
}) ``;
const SortMobileButton = styled(Button.Utility).withConfig({
    displayName: 'SortMobileButton'
}) `
  &,
  &:focus,
  &:hover {
    border: 0;
    background-color: transparent;
    color: black;
  }
  padding: 0;
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.utility.input-core')};

  svg {
    transform: rotate(90deg);
    width: ${calculateSpacing(1.25)};
    height: ${calculateSpacing(1.25)};
  }
`;
const SortMobileDrawer = styled(Drawer).withConfig({
    displayName: 'FilterMobileDrawer'
}) `
  overflow-y: auto;
`;
const SortSelectionControlWrapper = styled.div.withConfig({
    displayName: 'SortSelectionControlWrapper'
}) `
  position: absolute;
  top: 80px;
  bottom: 160px;
  margin: 1.5rem 1.5rem 0;
  width: 100%;
`;
module.exports = {
    FilterComponentWrapper,
    RemoveFilter,
    FilterDrawerText,
    FilterDrawerSelectionCounter,
    FilterMobileDrawerHeaderWrapper,
    FilterMobileDrawerHeader,
    FilterMobileDrawerTitle,
    FilterSortMobileDrawerWrapper,
    FilterMobileDrawer,
    FilterMobileWrapper,
    FilterMobileButton,
    FilterMobileAccordianData,
    FilterAccordionContainer,
    FilterAccordionItemContainer,
    FilterAccordionItemContainerLabel,
    FilterAccordionLabelContainer,
    FilterAccordionItemContainerContent,
    FilterAccordionItemContainerButton,
    FilterMobileApplyActionButton,
    FilterMobileCancelActionButton,
    FilterMobileActionWrapper,
    FilterMobileDrawerAccordionWrapper,
    SortSelectionControlWrapper,
    FilterCategoryList,
    FilterCategoryItem,
    Category,
    CategoryContainer,
    FilterCategoryWrapper,
    StyledChevron,
    FilterSelectionMenuWrapper,
    FilterMenuWrapper,
    FilterMenuItemWrapper,
    FilterMenuTypeDeselect,
    FilterMenuGridWrapper,
    FilterMenuContent,
    FilterMenuCloseIcon,
    FilterSelectionControlWrapper,
    FilterMenuListWrapper,
    FilterTotalItemWrapper,
    FilterTotalItemWrapperMobile,
    RadioCheckboxSelectionControl,
    SortContainer,
    SortWrapper,
    SortMobileContainer,
    SortMobileButton,
    SortMobileDrawer
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 89895:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    filterCloseButtonLabel: {
        id: 'FilterComponent.FilterMenuCloseButton',
        defaultMessage: 'Close Filter Menu',
        description: 'ARIA label for the close button on filter Menu',
        isConfigurable: true
    },
    items: {
        id: 'FilterComponent.Items',
        defaultMessage: 'Items',
        description: 'Suffix text to append to the total count'
    },
    sortBy: {
        id: 'FilterComponent.SortBy',
        defaultMessage: 'Sort by',
        description: 'Filter component sort by text for sorting result'
    },
    filterBy: {
        id: 'FilterComponent.FilterBy',
        defaultMessage: 'Filter by',
        description: 'Filter component filter by text for sorting result'
    },
    showItems: {
        id: 'FilterComponent.ShowItems',
        defaultMessage: 'Show {totalItems} Results',
        description: 'ShowItems string for filter component'
    },
    applyActionLabel: {
        id: 'FilterComponent.FilterApplyActionButton',
        defaultMessage: 'Apply',
        description: 'Filter component apply text for sorting result'
    },
    cancelActionLabel: {
        id: 'FilterComponent.FilterCancelActionButton',
        defaultMessage: 'Cancel',
        description: 'Filter component cancel text for sorting result'
    },
    deseletActionLabel: {
        id: 'FilterComponent.FilterDeselectActionButton',
        defaultMessage: 'Unselect all',
        description: 'Filter component deselect text for filter result'
    },
    contentLoadingLabel: {
        id: 'FilterComponent.ContentLoadingLabel',
        defaultMessage: 'Updating',
        description: 'Filter Component label while content loading'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 18493:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const FilterComponent = __webpack_require__(14690);
module.exports = FilterComponent;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 19876:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const isEmpty = __webpack_require__(62193);
const PropTypes = __webpack_require__(5556);
const classnames = __webpack_require__(32485);
const { useIntl } = __webpack_require__(46984);
const { getSlots } = __webpack_require__(50035);
const ToggleChip = __webpack_require__(15343);
const ToggleChipList = __webpack_require__(99244);
const { Disclaimer } = __webpack_require__(74307);
const SectionTitle = __webpack_require__(35864);
const { default: Carousel } = __webpack_require__(36061);
const { TrackComponentChannel } = __webpack_require__(78788);
const { componentTracking, googleAnalytics } = __webpack_require__(90090);
const { CarouselWrapper, ChipWrapper, EditorCard, EditorDescription, EditorDetails, EditorName, EditorResponsiveAsset, EditorsPicksCarousel, EditorTitle, FilterableSummaryListDynamicGridItemLayout, FilterableSummaryListGrid, FilterableSummaryListWrapper, FilterableSummaryListGridFullBleed, TitleWrapper, TitleToggleChipListWrapper } = __webpack_require__(22482);
const { ArticleGalleryCarouselBtnWrapper, ArticleGalleryCarouselButton } = __webpack_require__(34751);
const { isDesktopBrowser } = __webpack_require__(72362);
const translations = (__webpack_require__(20996)/* ["default"] */ .A);
const FilterableSummaryList = ({ affiliateDisclaimer, buttonConfig = {
    name: '',
    showButton: false,
    url: ''
}, children, className, dangerousDek, dangerousHed, defaultToggleChipTitle, editor, hasBorderBottom, hasGridBottomPadding, hasCustomMargin = false, hasModerateSpacingOnMobile, hasPadding, hasProductDisclaimerAlternativeStyle, hasToggleGridColor, hasHigherHorizontalPadding = false, sectionTitleVariation, selectedToggleChipTitle, shouldAppendFilterInUrl = true, shouldChipsRedirectOnClick = false, shouldEnableSnowplowTracking, shouldDisplaySingleSlot = false, shouldNotDisplayAllLabel = false, shouldEnableBundleComponentAnalytics = false, shouldShowDangerousDek, shouldApplyCustomHeaderHeight = false, shouldUseInteractiveBrandColor = false, isFirstProductListingContainer = false, shouldUseAlternativeTitleStyle = false, toggleChipRole, trackingNamespace, layout, gridConfig, groups, hasTitleMarginTop = false, hasTitleNoMargin, isEditorsPicksCarousel = false, isPlpCurated, isUpcEnabled, isSeriesNavigation, showDisclaimer, shouldHideMarginUnderDek, showRichTextInDek, containerIndex }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'FilterableSummaryList'
        });
    }, []);
    const eagerLoadImageCount = isDesktopBrowser() ? 6 : 4;
    const { formatMessage } = useIntl();
    const { slots, urlData } = getSlots(children);
    const allSlotNames = Object.keys(slots);
    const [slotNames, setSlotNames] = React.useState(allSlotNames);
    const [activeSlot, setActiveSlot] = React.useState(slotNames[0]);
    const [chipListlabel, setChipListLabel] = React.useState(defaultToggleChipTitle);
    const hasTitle = dangerousHed || dangerousDek;
    const trackingNSToggle = trackingNamespace?.toggle || dangerousHed;
    const trackingNSCard = trackingNamespace?.card || dangerousHed;
    if (slotNames.length === 0)
        return null;
    const slotSize = slotNames.length > 1 || shouldDisplaySingleSlot;
    const modifiedGroups = [];
    const carouselBtnLabel = buttonConfig.hasCtaLink
        ? formatMessage(translations.atArticleGalleryCarouselBtnTextWithCtaLink, {
            categoryName: buttonConfig.name
        })
        : formatMessage(translations.atArticleGalleryCarouselBtnText, {
            categoryName: buttonConfig.name
        });
    const { isDynamicGridItemLayout, shouldDisplayDenseGrid } = gridConfig || {};
    const summaryListChild = () => React.Children.map(slots[activeSlot].props.children, (child, index) => {
        const { isTextExternalLink, gridItemColSpan, image } = child.props;
        const clonedChild = { ...child };
        if (isPlpCurated && index < eagerLoadImageCount) {
            const alteredImgProps = typeof image !== 'undefined'
                ? { ...image, shouldEagerLoad: true }
                : image;
            clonedChild.props = { ...child.props, image: alteredImgProps };
        }
        const cardAnalyticsDataAttribute = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, `${trackingNSCard}/${activeSlot}/`, index, false);
        const childWithAdditionalProps = React.cloneElement(clonedChild, {
            analyticsDataAttribute: cardAnalyticsDataAttribute
        });
        return (React.createElement("div", { className: classnames({
                'text-external-link': isTextExternalLink,
                'two-col-external-link': isTextExternalLink && gridItemColSpan === 2,
                'one-col-external-link': isTextExternalLink && gridItemColSpan !== 2
            }) }, childWithAdditionalProps));
    });
    const gridLayout = () => {
        return isDynamicGridItemLayout ? (React.createElement(FilterableSummaryListDynamicGridItemLayout, { shouldDisplayDenseGrid: shouldDisplayDenseGrid, hasGridBottomPadding: hasGridBottomPadding, isUpcEnabled: isUpcEnabled, containerIndex: containerIndex }, summaryListChild())) : (React.createElement(FilterableSummaryListGrid, { isUpcEnabled: isUpcEnabled }, summaryListChild()));
    };
    const fullBleedLayout = () => {
        return React.createElement("div", null, summaryListChild());
    };
    const fullBleedSideBySideContentLayout = () => {
        return (React.createElement(FilterableSummaryListGridFullBleed, null, summaryListChild()));
    };
    for (const [key, value] of Object.entries(slots)) {
        modifiedGroups.push({
            label: key,
            items: value.props.children
        });
    }
    const carouselLayout = () => {
        return (React.createElement(CarouselWrapper, { shouldApplyCustomHeaderHeight: shouldApplyCustomHeaderHeight, shouldUseInteractiveBrandColor: shouldUseInteractiveBrandColor },
            React.createElement(Disclaimer.TextCenterNoTopRule, { isEnabled: Boolean(showDisclaimer && isFirstProductListingContainer), hasHigherHorizontalPadding: hasHigherHorizontalPadding, hasProductDisclaimerAlternativeStyle: hasProductDisclaimerAlternativeStyle, disclaimerHtml: affiliateDisclaimer }),
            React.createElement(Carousel, { headerProps: {
                    dangerousHed: hasTitle,
                    dangerousDek,
                    shouldDisplayDangerousDek: true,
                    contentAlign: shouldUseAlternativeTitleStyle ? 'left' : 'center',
                    sectionTitleVariation
                }, carouselSettings: {
                    itemsDensity: 'min'
                }, groups: modifiedGroups }, React.Children.map(slots[activeSlot].props.children, (child, index) => {
                const cardAnalyticsDataAttribute = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, `${trackingNSCard}/${activeSlot}/`, index, false);
                const childWithAdditionalProps = React.cloneElement(child, {
                    analyticsDataAttribute: cardAnalyticsDataAttribute
                });
                const carouselTitle = `${hasTitle}/${activeSlot}`;
                return (React.createElement(Carousel.CarouselItem, { ...shouldEnableBundleComponentAnalytics, key: `${activeSlot}-${index}`, itemsDensity: "min", trackingEventData: {
                        itemIndex: index,
                        totalItems: child?.length,
                        carouselName: carouselTitle,
                        shouldTrackSnowplowEvent: shouldEnableSnowplowTracking
                    } }, childWithAdditionalProps));
            })),
            buttonConfig.showButton && buttonConfig.url && (React.createElement(ArticleGalleryCarouselBtnWrapper, null,
                React.createElement("div", { className: "more-products" },
                    React.createElement(ArticleGalleryCarouselButton, { className: "article-gallery__more-button", label: carouselBtnLabel, btnStyle: "outlined", ariaLabel: carouselBtnLabel, href: buttonConfig.hasCtaLink
                            ? buttonConfig.url
                            : `/products/shop${buttonConfig.url}`, inputKind: "link" }))))));
    };
    const setGAEvent = (label, type) => {
        googleAnalytics.emitUniqueGoogleTrackingEvent('toggle-click', {
            clickText: label,
            clickType: type
        });
    };
    const onToggleChipChange = (e, slotName) => {
        setActiveSlot(slotName);
        if (shouldDisplaySingleSlot) {
            if (e.detail.checked) {
                setSlotNames([slotName]);
                if (selectedToggleChipTitle) {
                    setChipListLabel(selectedToggleChipTitle);
                }
            }
            else {
                setActiveSlot(allSlotNames[0]);
                setSlotNames(allSlotNames);
                setChipListLabel(defaultToggleChipTitle);
            }
        }
        setGAEvent(slotName, 'body');
    };
    function determineLayout() {
        switch (layout) {
            case 'GridFourColumns':
                return gridLayout();
            case 'FullBleed':
                return fullBleedLayout();
            case 'FullBleedSideBySideContent':
                return fullBleedSideBySideContentLayout();
            default:
                return carouselLayout();
        }
    }
    function determineTotalCount(slotName) {
        return groups?.find((item) => item?.label === slotName)?.items?.length;
    }
    const layoutList = [
        'ContentCarousel',
        'Carousel',
        'GridFourColumns',
        'EditorsPicksCarousel',
        'ArticleCarousel',
        'FullBleed',
        'SideBySideContent'
    ];
    // eslint-disable-next-line react-hooks/rules-of-hooks
    React.useEffect(() => {
        if (true) {
            const hash = decodeURIComponent(window?.location?.hash);
            const index = slotNames.findIndex((item) => `#${item.toLowerCase()}` === hash.toLowerCase());
            setActiveSlot(slotNames[index >= 0 ? index : 0]);
        }
    }, [slotNames]);
    return (React.createElement(FilterableSummaryListWrapper, { className: className, hasToggleGridColor: hasToggleGridColor, hasPadding: hasPadding, hasBorderBottom: hasBorderBottom, isSeriesNavigation: isSeriesNavigation },
        hasTitle && !layoutList.includes(layout) && (React.createElement(TitleToggleChipListWrapper, { hasDangerousDek: shouldShowDangerousDek && dangerousDek, hasCustomMargin: hasCustomMargin, shouldUseAlternativeTitleStyle: shouldUseAlternativeTitleStyle, shouldUseInteractiveBrandColor: shouldUseInteractiveBrandColor },
            React.createElement(TitleWrapper, { className: "section-title", hasPadding: hasPadding, hasTitleMarginTop: hasTitleMarginTop, as: SectionTitle[sectionTitleVariation], dangerousHed: dangerousHed, dangerousDek: dangerousDek, hasTitleNoMargin: hasTitleNoMargin, affiliateDisclaimer: affiliateDisclaimer, shouldHideMarginUnderDek: shouldHideMarginUnderDek, hasHigherHorizontalPadding: hasHigherHorizontalPadding, hasProductDisclaimerAlternativeStyle: hasProductDisclaimerAlternativeStyle, isUpcEnabled: isUpcEnabled, showRichTextInDek: showRichTextInDek }),
            layout === 'GridFourColumns' && (React.createElement(Disclaimer.TextCenterNoTopRule, { isEnabled: showDisclaimer && isFirstProductListingContainer, disclaimerHtml: affiliateDisclaimer })),
            slotSize && (React.createElement(ChipWrapper, { className: "clip-list", hasToggleGridColor: hasToggleGridColor, hasPadding: hasPadding, hasModerateSpacingOnMobile: hasModerateSpacingOnMobile },
                React.createElement(ToggleChipList, { contentAlign: "center", layout: "nowrap", hasToggleGridColor: hasToggleGridColor, label: chipListlabel }, slotNames.map((slotName, index) => {
                    const toggleAnalyticsDataAttribute = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, `${trackingNSToggle}/${slotName}`);
                    const totalCount = determineTotalCount(slotName);
                    const isChecked = slotName === activeSlot;
                    return shouldNotDisplayAllLabel &&
                        slotName === 'All' ? null : (React.createElement(ToggleChip, { index: index, analyticsDataAttribute: toggleAnalyticsDataAttribute, key: slotName, isChecked: isChecked, hasToggleGridColor: hasToggleGridColor, onChange: (e) => onToggleChipChange(e, slotName), isAnchorUrl: shouldAppendFilterInUrl, redirectUrl: urlData[index], shouldUrlRedirect: shouldChipsRedirectOnClick, shouldDisplaySingleChip: shouldDisplaySingleSlot, shouldTrackSnowplowEvent: shouldEnableSnowplowTracking, role: toggleChipRole, totalCount: totalCount, sectionTitle: dangerousHed }, slotName));
                })))))),
        isEditorsPicksCarousel && !isEmpty(editor) ? (React.createElement(EditorsPicksCarousel, null,
            React.createElement(EditorCard, null,
                editor.editorPhoto && (React.createElement(EditorResponsiveAsset, { ...editor.editorPhoto })),
                React.createElement(EditorDetails, null,
                    React.createElement(EditorName, null, editor.name),
                    React.createElement(EditorTitle, null, editor.title)),
                React.createElement(EditorDescription, null, editor.editorNote)),
            carouselLayout())) : (determineLayout())));
};
FilterableSummaryList.propTypes = {
    affiliateDisclaimer: PropTypes.string,
    buttonConfig: PropTypes.object,
    carouselControlTheme: PropTypes.string,
    children: PropTypes.node.isRequired,
    className: PropTypes.string,
    containerIndex: PropTypes.number,
    controlButtonIcon: PropTypes.oneOf(['ChevronIcon', 'ArrowIcon']),
    controlPlacement: PropTypes.oneOf(['right', 'space-between']),
    controlPosition: PropTypes.oneOf(['top', 'bottom', 'center']),
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    defaultToggleChipTitle: PropTypes.string,
    editor: PropTypes.object,
    gridConfig: PropTypes.object,
    groups: PropTypes.array,
    hasBorderBottom: PropTypes.bool,
    hasCarouselSliderPagination: PropTypes.bool,
    hasControls: PropTypes.bool,
    hasCustomMargin: PropTypes.bool,
    hasCustomSlider: PropTypes.bool,
    hasGridBottomPadding: PropTypes.bool,
    hasHigherHorizontalPadding: PropTypes.bool,
    hasModerateSpacingOnCarousel: PropTypes.bool,
    hasModerateSpacingOnMobile: PropTypes.bool,
    hasNavigationButtonVariation: PropTypes.bool,
    hasNoHorizontalScrollCarousel: PropTypes.bool,
    hasPadding: PropTypes.bool,
    hasPagination: PropTypes.bool,
    hasProductDisclaimerAlternativeStyle: PropTypes.bool,
    hasTitleMarginTop: PropTypes.bool,
    hasTitleNoMargin: PropTypes.bool,
    hasToggleGridColor: PropTypes.bool,
    hideDesktopPagination: PropTypes.bool,
    isDotClickable: PropTypes.bool,
    isEditorsPicksCarousel: PropTypes.bool,
    isFirstProductListingContainer: PropTypes.bool,
    isPimCollectionContainer: PropTypes.bool,
    isPlpCurated: PropTypes.bool,
    isSeriesNavigation: PropTypes.bool,
    isUpcEnabled: PropTypes.bool,
    layout: PropTypes.string,
    paginationStyle: PropTypes.string,
    pos: PropTypes.number,
    sectionTitleVariation: PropTypes.string,
    selectedToggleChipTitle: PropTypes.string,
    shouldAppendFilterInUrl: PropTypes.bool,
    shouldApplyCustomHeaderHeight: PropTypes.bool,
    shouldChipsRedirectOnClick: PropTypes.bool,
    shouldDisplaySingleSlot: PropTypes.bool,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldEnableSnowplowTracking: PropTypes.bool,
    shouldHideMarginOnCarousel: PropTypes.bool,
    shouldHideMarginUnderDek: PropTypes.bool,
    shouldNotDisplayAllLabel: PropTypes.bool,
    shouldShowDangerousDek: PropTypes.bool,
    shouldUseAlternativeTitleStyle: PropTypes.bool,
    shouldUseInteractiveBrandColor: PropTypes.bool,
    showDisclaimer: PropTypes.bool,
    showRichTextInDek: PropTypes.bool,
    toggleChipRole: PropTypes.string,
    trackingNamespace: PropTypes.shape({
        toggle: PropTypes.string,
        card: PropTypes.string
    })
};
FilterableSummaryList.displayName = 'FilterableSummaryList';
module.exports = FilterableSummaryList;
//# sourceMappingURL=FilterableSummaryList.js.map

/***/ }),

/***/ 15998:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const FilterableSummaryList = __webpack_require__(19876);
module.exports = asConfiguredComponent(FilterableSummaryList, 'FilterableSummaryList');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 22482:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { css, default: styled } = __webpack_require__(92168);
const { calculateSpacing, minScreen, maxScreen, minMaxScreen, getColorToken, getTypographyStyles, getColorStyles } = __webpack_require__(26865);
const { SectionTitleDivider } = __webpack_require__(33500);
const Grid = __webpack_require__(86659);
const { BREAKPOINTS } = __webpack_require__(96472);
const ResponsiveAsset = __webpack_require__(86157);
const { ToggleButton } = __webpack_require__(18161);
const { SummaryItemContent } = __webpack_require__(68116);
const { SummaryItemHedBase } = __webpack_require__(36211);
const { CarouselList, CarouselContainer: EditorsPicksCarouselWrapper, CarouselHeaderWrapper, NavCTAWrapper } = __webpack_require__(72662);
const { ToggleChipListWrapper } = __webpack_require__(14952);
const FilterableSummaryListGrid = styled(Grid.EvenFour).withConfig({
    displayName: 'FilterableSummaryListGrid'
}) `
  &.grid-even.grid-items-4 {
    ${minScreen(BREAKPOINTS.md)} {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  &&& {
    .grid--item:has(.text-external-link) {
      display: grid;
      align-items: center;
    }
    ${({ isUpcEnabled }) => isUpcEnabled &&
    `
      ${minMaxScreen(0, BREAKPOINTS.md)} {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        
          padding-right: ${calculateSpacing(2)};
          padding-left: ${calculateSpacing(2)};
          column-gap: ${calculateSpacing(1)};
        
      }
      
        padding-right: ${calculateSpacing(3)};
        padding-left: ${calculateSpacing(3)};
        column-gap: ${calculateSpacing(2)};
      
    `}
  }

  &.grid-even {
    ${minMaxScreen(0, BREAKPOINTS.md)} {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding-right: ${calculateSpacing(3)};
      padding-left: ${calculateSpacing(3)};
    }
    padding-right: ${calculateSpacing(4)};
    padding-left: ${calculateSpacing(4)};
  }

  &.grid {
    row-gap: ${calculateSpacing(6)};
  }
`;
const FilterableSummaryListGridFullBleed = styled(Grid.EvenFour).withConfig({
    displayName: 'FilterableSummaryListGridFullBleed'
}) `
  &.grid-even.grid-items-4 {
    ${minMaxScreen(0, BREAKPOINTS.md)} {
      grid-template-columns: repeat(1, minmax(0, 1fr));
      padding-top: ${calculateSpacing(3)};
      padding-right: ${calculateSpacing(1)};
      padding-left: ${calculateSpacing(1)};
    }
    grid-template-columns: repeat(1, minmax(0, 1fr));
    padding: ${calculateSpacing(3)};
    padding-left: 0;
    row-gap: ${calculateSpacing(4)};
  }
`;
const FilterableSummaryListDynamicGridItemLayout = styled(Grid.DynamicGridItemLayout).withConfig({
    displayName: 'FilterableSummaryListDynamicGridItemLayout'
}) `
  &.grid-even.grid-items-4 {
    ${minScreen(BREAKPOINTS.md)} {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  &&& {
    .grid--item:has(.text-external-link) {
      display: grid;
      align-items: center;
    }

    ${maxScreen(BREAKPOINTS.md)} {
      .two-col-external-link,
      .one-col-external-link {
        padding-right: ${calculateSpacing(1)};
        padding-left: ${calculateSpacing(1)};
      }
    }
    ${minScreen(BREAKPOINTS.lg)} {
      .two-col-external-link {
        padding-right: ${calculateSpacing(6)};
        padding-left: ${calculateSpacing(6)};
      }

      .one-col-external-link {
        padding-right: ${calculateSpacing(2)};
        padding-left: ${calculateSpacing(2)};
      }
    }
    ${({ isUpcEnabled }) => isUpcEnabled &&
    `
      ${minMaxScreen(0, BREAKPOINTS.md)} {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        
          padding-right: ${calculateSpacing(2)};
          padding-left: ${calculateSpacing(2)};
          column-gap: ${calculateSpacing(1)};
        
      }
      
        padding-right: ${calculateSpacing(3)};
        padding-left: ${calculateSpacing(3)};
        column-gap: ${calculateSpacing(2)};
      
    `}
  }

  &.grid-even {
    ${minMaxScreen(0, BREAKPOINTS.md)} {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding-right: ${calculateSpacing(3)};
      padding-left: ${calculateSpacing(3)};
    }
    padding-right: ${calculateSpacing(4)};
    padding-left: ${calculateSpacing(4)};
  }

  &.grid {
    row-gap: ${calculateSpacing(6)};
    ${({ shouldDisplayDenseGrid = true }) => !shouldDisplayDenseGrid && `grid-auto-flow:row;`}

    ${({ hasGridBottomPadding = false }) => hasGridBottomPadding && `padding-bottom:${calculateSpacing(8)};`}
  }
`;
const FilterableSummaryListWrapper = styled.section.withConfig({
    displayName: 'FilterableSummaryListWrapper'
}) `
  ${({ theme, hasBorderBottom }) => hasBorderBottom &&
    `border-bottom: 1px solid ${getColorToken(theme, 'colors.consumption.lead.standard.divider')};`}

  ${({ hasPadding, hasToggleGridColor, isSeriesNavigation }) => hasPadding &&
    !hasToggleGridColor &&
    `padding: ${isSeriesNavigation
        ? `${calculateSpacing(4)} 0 0`
        : `${calculateSpacing(4)} 0 ${calculateSpacing(4)}`};`}
`;
const TitleToggleChipListWrapper = styled.div.withConfig({
    displayName: 'TitleToggleChipListWrapper'
}) `
  ${SectionTitleDivider} {
    ${({ hasDangerousDek, hasCustomMargin }) => !hasDangerousDek && hasCustomMargin
    ? `margin-bottom: ${calculateSpacing(0)};`
    : `margin-bottom: ${calculateSpacing(5)};`}
  }
  ${({ shouldUseAlternativeTitleStyle }) => shouldUseAlternativeTitleStyle &&
    css `
      .section-title {
        margin: 0;
        border-top: none;
        padding-top: 0;

        @media (max-width: ${BREAKPOINTS.md}) {
          h2 {
            text-align: center;
          }
        }
      }

      @media (max-width: ${BREAKPOINTS.md}) {
        .list-wrapper {
          overflow-y: hidden;
          overflow-x: scroll;

          &::-webkit-scrollbar {
            display: none;
          }
        }
      }

      @media (min-width: ${BREAKPOINTS.md}) {
        ${getColorStyles('border-color', 'colors.consumption.lead.standard.context-signature')};

        display: flex;
        align-items: center;
        border-top: 2px solid;
        gap: 2rem;

        .clip-list {
          margin: 0;

          .list-wrapper {
            padding: 0;
            gap: ${calculateSpacing(3)};

            button {
              border-radius: 0;
              background: none;
              padding: 0.2rem 0;
              font-size: 13px;
              font-weight: bold;

              &[aria-checked='false'] {
                ${getColorStyles('color', 'colors.interactive.base.border')};
              }

              &[aria-checked='true'] {
                ${getColorStyles('color', 'colors.interactive.base.black')};
                border-bottom: 1px solid;
              }

              &:hover,
              &:focus {
                box-shadow: none;
              }
            }
          }
        }
      }
    `}
  ${ToggleButton} {
    ${({ shouldUseInteractiveBrandColor }) => shouldUseInteractiveBrandColor
    ? css `
            &[aria-checked='false'] {
              background-color: rgba(
                ${getColorToken('colors.interactive.base.brand-secondary', {
        rgbOnly: true
    })},
                0.2
              );
            }
          `
    : `&[aria-checked='false'] {
          ${getColorStyles('color', 'colors.interactive.base.black')}
      }`}
  }
`;
const TitleWrapper = styled.div.withConfig({ displayName: 'TitleWrapper' }) `
  ${({ hasTitleMarginTop }) => {
    const spacing = calculateSpacing(4);
    const top = hasTitleMarginTop ? spacing : '0';
    return `margin: ${top} 0 ${spacing} 0;`;
}}

  ${({ shouldHideMarginUnderDek }) => shouldHideMarginUnderDek && `margin-bottom: 0;`};
  ${({ hasPadding, isUpcEnabled }) => hasPadding &&
    (isUpcEnabled
        ? `padding-left: ${calculateSpacing(2)};
      padding-right:  ${calculateSpacing(2)};`
        : `padding-left: ${calculateSpacing(3)};
      padding-right:  ${calculateSpacing(3)};`)}
  ${({ hasTitleNoMargin }) => hasTitleNoMargin && `margin: 0;`}
`;
const ChipWrapper = styled.div.withConfig({ displayName: 'ChipWrapper' }) `
  ${({ hasToggleGridColor }) => hasToggleGridColor
    ? `padding-bottom: ${calculateSpacing(4)};`
    : `margin: ${calculateSpacing(4)} 0 0 0;`}
  ${maxScreen(BREAKPOINTS.md)} {
    ${({ hasModerateSpacingOnMobile }) => hasModerateSpacingOnMobile && `margin: ${calculateSpacing(2)} 0 0 0;`}
  }
`;
const CarouselWrapper = styled.div.withConfig({
    displayName: 'CarouselWrapper'
}) `
  ${CarouselHeaderWrapper} {
    margin-bottom: 2rem;
    gap: 0;
    ${NavCTAWrapper} {
      margin-top: 1rem;
    }
    @media (min-width: ${BREAKPOINTS.md}) {
      ${(props) => (props.shouldApplyCustomHeaderHeight ? 'height: 60px;' : '')}
    }
    ${ToggleChipListWrapper} {
      margin-top: 2rem;

      button {
        ${({ shouldUseInteractiveBrandColor }) => shouldUseInteractiveBrandColor
    ? css `
                &[aria-checked='false'] {
                  background-color: rgba(
                    ${getColorToken('colors.interactive.base.brand-secondary', {
        rgbOnly: true
    })},
                    0.2
                  );
                }
              `
    : `&[aria-checked='false'] {
              ${getColorStyles('color', 'colors.interactive.base.black')}
          }`}
      }
    }
  }
  @media (max-width: ${BREAKPOINTS.md}) {
    header p {
      font-size: 1rem;
    }
  }
  ${SummaryItemContent} {
    ${SummaryItemHedBase} {
      @media (max-width: ${BREAKPOINTS.md}) {
        ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-secondary')};
      }
    }
  }
`;
const EditorsPicksCarousel = styled.section.withConfig({
    displayName: 'EditorsPicksCarousel'
}) `
  display: grid;
  grid-template-columns: 100%;
  margin-top: ${calculateSpacing(4)};
  overflow-x: hidden;
  @media (min-width: ${BREAKPOINTS.lg}) {
    grid-column-gap: ${calculateSpacing(4)};
    grid-template-columns: calc(20% - ${calculateSpacing(4)}) 80%;
    ${EditorsPicksCarouselWrapper} {
      margin-top: 0;
    }
  }
  ${CarouselList} {
    margin: 0;
  }
`;
const EditorCard = styled.div.withConfig({
    displayName: 'EditorCard'
}) `
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  @media (min-width: ${BREAKPOINTS.lg}) {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, max-content);
    margin: ${calculateSpacing(4)} 0;
  }
`;
const EditorResponsiveAsset = styled(ResponsiveAsset).withConfig({
    displayName: 'EditorResponsiveAsset'
}) `
  border-radius: 50%;
  width: 80px;
  height: 80px;
`;
const EditorDetails = styled.div.withConfig({
    displayName: 'EditorDetails'
}) `
  margin-left: ${calculateSpacing(1)};
  @media (min-width: ${BREAKPOINTS.lg}) {
    grid-column: 1;
    margin: ${calculateSpacing(1)} 0 0;
  }
`;
const EditorName = styled.div.withConfig({
    displayName: 'EditorName'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.subhed-aux-secondary')};
`;
const EditorTitle = styled.div.withConfig({
    displayName: 'EditorTitle'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.accreditation-feature')};
`;
const EditorDescription = styled.div.withConfig({
    displayName: 'EditorDescription'
}) `
  grid-column: 1 / span 2;
  margin-top: ${calculateSpacing(1.5)};
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.description-embed')};
  @media (min-width: ${BREAKPOINTS.lg}) {
    margin-top: ${calculateSpacing(2.5)};
  }
`;
module.exports = {
    CarouselWrapper,
    ChipWrapper,
    EditorCard,
    EditorDescription,
    EditorDetails,
    EditorName,
    EditorResponsiveAsset,
    EditorsPicksCarousel,
    EditorTitle,
    FilterableSummaryListDynamicGridItemLayout,
    FilterableSummaryListGrid,
    FilterableSummaryListWrapper,
    FilterableSummaryListGridFullBleed,
    TitleWrapper,
    TitleToggleChipListWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 20996:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    atArticleGalleryCarouselBtnText: {
        id: 'FilterableSummaryList.AtArticleGalleryCarouselBtnText',
        defaultMessage: 'VIEW ALL {categoryName}',
        description: 'Article and Gallery carousel button text'
    },
    atArticleGalleryCarouselBtnTextWithCtaLink: {
        id: 'FilterableSummaryList.AtArticleGalleryCarouselBtnTextWithCtaLink',
        defaultMessage: '{categoryName}',
        description: 'Article and Gallery carousel button text for cta link'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 22095:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { connect: connectToStore } = __webpack_require__(67851);
const { useInView } = __webpack_require__(26855);
const SmartComponent = __webpack_require__(30583);
const SectionTitle = __webpack_require__(35864);
const VarietyInverted = __webpack_require__(89676);
const Inverted = __webpack_require__(57479);
const ForYouCarousel = __webpack_require__(21412);
const { trackNavigationEvent } = __webpack_require__(14307);
const { TrackComponentChannel } = __webpack_require__(78788);
const SkeletonLoader = __webpack_require__(87623);
const { Subscribe } = __webpack_require__(24695);
const { ForyouComponent, ForyouWrapper, ForyouDek } = __webpack_require__(58283);
const { mapIndexToPosition, transformItems } = __webpack_require__(96872);
const { amgUserId } = __webpack_require__(14307);
const { checkIsSmallScreen } = __webpack_require__(49380);
const { useResizeObserver } = __webpack_require__(70251);
const useClientRequest = __webpack_require__(77314);
/**
 * ForYou component
 *
 * @param {object} props - React props
 * @param {string} [props.dangerousDek] - Optional HTML (dangerously set) dek/sub-headline of content
 * @param {string} props.dangerousHed - HTML (dangerously set) hed/headline of content
 * @param {string} props.id - id of the container
 * @param {number} props.index - Index of container
 * @param {string} props.template - The containers package type
 * @param {string} props.sectionName - section name
 * @param {string} props.applicationID - Application ID for recommendation
 * @param {string} props.canonicalUrl - Canonical Url of the page
 * @param {string} props.contentID - contentID of the page
 * @param {string} [props.layout] - Layout of the component
 * @param {string} props.vulcanUrl - Media domain URL for images
 * @param {object} props.renditions - Image rendition configurations
 * @param {object} props.componentConfig - Component-specific configuration
 * @param {string} props.brandSlug - Brand identifier slug
 * @param {string} props.language - Content language
 * @param {string} props.recommendationsApiUrl - URL for recommendations API
 * @param {string} props.strategy - Strategy for recommendation
 * @param {number} props.pageSize - Page size for recommendation
 * @param {object} [props.varietyInvertedRenditions] - Renditions for variety inverted layout
 * @param {object} [props.varietyMainStoryRendition] - Rendition for variety main story
 * @param {string} [props.bundle] - Bundle of the component
 * @param {object} [props.carouselRenditions] - Renditions for variety carousel layout
 * @param {object} [props.showSectionTitle] - boolean to show section title
 *
 * @returns {ReactElement} <div>
 */
const ForYou = ({ bundle, dangerousDek, dangerousHed, id, index, template, sectionName, applicationID, canonicalUrl, contentID, vulcanUrl, renditions, brandSlug, language, recommendationsApiUrl, strategy, pageSize = 4, varietyInvertedRenditions, varietyMainStoryRendition, carouselRenditions, layout = '', showSectionTitle = true }) => {
    const [isLoading, setLoading] = React.useState(true);
    const [items, setItems] = React.useState([]);
    const [isSmallScreen, setIsSmallScreen] = React.useState(false);
    const csrProps = {
        applicationID,
        vulcanUrl,
        contentID,
        recommendationsApiUrl,
        brandSlug,
        language,
        isSmallScreen,
        canonicalUrl,
        strategy,
        pageSize,
        photoConfig: renditions,
        varietyInvertedRenditions,
        varietyMainStoryRendition,
        carouselRenditions,
        isPersonalizedHomepage: true,
        amgUserId,
        layout
    };
    useResizeObserver(() => setIsSmallScreen(checkIsSmallScreen()));
    React.useEffect(() => {
        setIsSmallScreen(checkIsSmallScreen());
    }, []);
    const { ref: foryouRef, entry } = useInView({
        threshold: 0.1,
        trackVisibility: true,
        delay: 100,
        triggerOnce: true
    });
    const { containers = [] } = bundle || {};
    const packageContainers = containers.filter((container) => container.template !== 'verso-mid-content-ad');
    React.useEffect(() => {
        if (entry?.isIntersecting && layout !== 'carousel') {
            const eventData = {
                type: 'impression',
                subject: template,
                items: transformItems(items, window),
                placement: mapIndexToPosition(index, packageContainers.length),
                total_index: packageContainers.length
            };
            trackNavigationEvent(eventData);
        }
    }, [entry, index, items, packageContainers.length, template, layout]);
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ForYou'
        });
    }, []);
    const { personalizedClientData = {} } = useClientRequest(csrProps);
    React.useEffect(() => {
        setItems(personalizedClientData);
        setLoading(false);
    }, [personalizedClientData]);
    if (isLoading && applicationID) {
        return React.createElement(SkeletonLoader, null);
    }
    if (!items?.length) {
        return null;
    }
    const smartComponentItems = items.map((item) => ({
        ...item,
        id: item.contentId
    }));
    if (!layout) {
        return (React.createElement(SmartComponent, { dangerousDek: dangerousDek, dangerousHed: dangerousHed, id: id, index: index, items: smartComponentItems, template: template, sectionName: sectionName }));
    }
    return (React.createElement(ForyouComponent, null,
        React.createElement(ForyouWrapper, { ref: foryouRef, layout: layout },
            showSectionTitle && React.createElement(SectionTitle, { dangerousHed: dangerousHed }),
            dangerousDek && (React.createElement(ForyouDek, null,
                React.createElement("span", null,
                    React.createElement(Subscribe, null),
                    " ",
                    dangerousDek))),
            layout === 'variety-inverted' && (React.createElement(VarietyInverted, { items: items, template: template })),
            layout === 'inverted' && (React.createElement(Inverted, { items: items, template: template })),
            layout === 'carousel' && (React.createElement(ForYouCarousel, { items: items, dangerousHed: dangerousHed, template: template, layout: layout })))));
};
ForYou.propTypes = {
    applicationID: PropTypes.string,
    brandSlug: PropTypes.string,
    bundle: PropTypes.shape({
        containers: PropTypes.array
    }).isRequired,
    canonicalUrl: PropTypes.string,
    carouselRenditions: PropTypes.object,
    contentID: PropTypes.string,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    id: PropTypes.string,
    index: PropTypes.number.isRequired,
    language: PropTypes.string,
    layout: PropTypes.string,
    pageSize: PropTypes.number,
    recommendationsApiUrl: PropTypes.string,
    renditions: PropTypes.object,
    sectionName: PropTypes.string.isRequired,
    showSectionTitle: PropTypes.bool,
    strategy: PropTypes.string,
    template: PropTypes.string,
    varietyInvertedRenditions: PropTypes.object,
    varietyMainStoryRendition: PropTypes.object,
    vulcanUrl: PropTypes.string
};
const mapStateToProps = (state) => {
    const { config: { contentSystem, recommendations }, renditions, appConfig, coreDataLayer, bundle, 'head.contentID': contentID, 'head.canonicalUrl': canonicalUrl } = state;
    const vulcanUrl = contentSystem?.mediaDomain
        ? `https://${contentSystem.mediaDomain}`
        : '';
    return {
        contentID,
        bundle,
        vulcanUrl,
        renditions: renditions?.homepage?.['verso-for-you-package'] || {},
        varietyInvertedRenditions: renditions?.homepage?.['variety-inverted-for-you-package'] || {},
        varietyMainStoryRendition: renditions?.homepage?.['variety-main-story-rendition'] || {},
        carouselRenditions: renditions?.homepage?.['carousel-for-you-package'] || {},
        brandSlug: appConfig?.brandSlug,
        language: coreDataLayer?.content?.contentLang,
        canonicalUrl,
        recommendationsApiUrl: recommendations?.personalisedApiUrl || ''
    };
};
module.exports = connectToStore(mapStateToProps, {})(ForYou);
//# sourceMappingURL=ForYou.js.map

/***/ }),

/***/ 28494:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { default: Carousel } = __webpack_require__(36061);
const SummaryItem = __webpack_require__(74992);
const { ForYouCarouselWrapper } = __webpack_require__(73152);
const { isDesktopBrowser } = __webpack_require__(72362);
/**
 * Renders a list of summary items in an inverted layout.
 * @param {object} props - React props
 * @param {Array} props.items - The Array of items to render.
 * @param {string} [props.carouselSummaryItemVariation] - summaryItem variation to use on the carousel layout
 * @param {string} [props.dangerousHed] - HTML (dangerously set) hed/headline of content
 * @param {boolean} [props.hasBorder] - optional prop to show border
 * @param {boolean} [props.showLabels] - Optional to show labels.
 * @param {boolean} [props.hasPaginationDots] - Optional to show pagination dots.
 * @param {boolean} [props.shouldHideContributors] - Hide contributors in byline
 * @param {string} [props.template] - subject name of the container
 *
 * @returns {JSX.Element} The rendered component.
 */
const ForYouCarousel = ({ items, carouselSummaryItemVariation = 'TextBelowLeft', dangerousHed, hasBorder = false, showLabels = false, hasPaginationDots = true, shouldHideContributors = true, template }) => {
    const CarouselSummaryItem = SummaryItem[carouselSummaryItemVariation];
    const isMobile = !isDesktopBrowser();
    return (React.createElement(ForYouCarouselWrapper, null,
        React.createElement(Carousel, { headerProps: { dangerousHed }, carouselSettings: {
                showLabels,
                hasPaginationDots
            }, trackingEventData: {
                snowplowNavEventSubject: 'carousel'
            } }, items.map((item, index) => {
            return (React.createElement(Carousel.CarouselItem, { key: `product-bundle-${index}`, trackingEventData: {
                    carouselName: item.dangerousHed,
                    itemIndex: index,
                    totalItems: items.length,
                    label: dangerousHed,
                    snowplowNavEventSubject: template,
                    subject_version: isMobile ? 'mobile_dense' : 'default'
                } },
                React.createElement(CarouselSummaryItem, { ...item, hasBorder: hasBorder, hedTag: "h3", shouldHideContributors: shouldHideContributors, isLazy: index > 4, clickHandlerRubric: (event) => {
                        event.stopPropagation();
                    } })));
        }))));
};
ForYouCarousel.propTypes = {
    carouselSummaryItemVariation: PropTypes.string,
    dangerousHed: PropTypes.string,
    hasBorder: PropTypes.bool,
    hasPaginationDots: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.object).isRequired,
    shouldHideContributors: PropTypes.bool,
    showLabels: PropTypes.bool,
    template: PropTypes.string
};
module.exports = ForYouCarousel;
//# sourceMappingURL=ForYouCarousel.js.map

/***/ }),

/***/ 21412:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const ForYouCarousel = __webpack_require__(28494);
module.exports = ForYouCarousel;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 73152:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { RubricName } = __webpack_require__(6613);
const { SummaryItemContent } = __webpack_require__(68116);
const { CarouselContainer } = __webpack_require__(72662);
const { BREAKPOINTS } = __webpack_require__(96472);
const { calculateSpacing, minMaxScreen } = __webpack_require__(26865);
const { minThresholds, maxThresholds } = __webpack_require__(99906);
const { SectionTitleRoot } = __webpack_require__(33500);
const ForYouCarouselWrapper = styled('div').withConfig({
    displayName: 'ForYouCarouselWrapper'
}) `
  ${SummaryItemContent} {
    ${RubricName} {
      &:hover {
        text-decoration: underline;
      }
    }
  }
  ${CarouselContainer} {
    padding-right: ${calculateSpacing(6)};
    padding-left: ${calculateSpacing(6)};
    max-width: ${calculateSpacing(128)};
    ${minMaxScreen(0, `${maxThresholds.md}px`)} {
      padding-right: ${calculateSpacing(3)};
      padding-left: ${calculateSpacing(3)};
    }
    ${minMaxScreen(`${minThresholds.xl}px`, `${maxThresholds.xxl}px`)} {
      max-width: ${calculateSpacing(160)};
    }
    @media (min-width: ${BREAKPOINTS.xl}) {
      padding-right: ${calculateSpacing(8)};
      padding-left: ${calculateSpacing(8)};
      max-width: ${calculateSpacing(200)};
    }
    @media (min-width: ${BREAKPOINTS.xxl}) {
      padding-bottom: 0;
    }
  }

  &&& {
    ${SectionTitleRoot} {
      padding-left: 0;
    }
  }
`;
module.exports = {
    ForYouCarouselWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 41953:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const ForYou = __webpack_require__(22095);
const { asConfiguredComponent } = __webpack_require__(12892);
module.exports = asConfiguredComponent(ForYou, 'ForYou');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 83370:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { Fragment } = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { InvertedWrapper, LargeScreenItem, SmallScreenItem } = __webpack_require__(38825);
const { mapIndexToPosition, transformItems } = __webpack_require__(96872);
const { trackNavigationEvent } = __webpack_require__(14307);
/**
 * Renders a list of summary items in an inverted layout.
 * @param {object} props - React props
 * @param {Array} props.items - The Array of items to render.
 * @param {string} props.template - The template for the event.
 *
 * @returns {JSX.Element} The rendered component.
 */
const Inverted = ({ items, template }) => {
    const callSnowplowEvent = (item, index, totalItems) => {
        const eventData = {
            type: 'click',
            subject: template,
            items: transformItems([item], window),
            placement: mapIndexToPosition(index, items.length),
            index,
            total_index: totalItems
        };
        trackNavigationEvent(eventData);
    };
    return (React.createElement(InvertedWrapper, null, items.map((item, index) => (React.createElement(Fragment, { key: index },
        React.createElement(LargeScreenItem, { ...item, hasBorder: false, shouldHideFinalBorder: true, lastItem: index === items.length - 1, clickHandler: () => callSnowplowEvent(item, index, items.length) }),
        React.createElement(SmallScreenItem, { ...item, shouldHideFinalBorder: true, clickHandler: () => callSnowplowEvent(item, index, items.length) }))))));
};
Inverted.propTypes = {
    items: PropTypes.arrayOf(PropTypes.object).isRequired,
    template: PropTypes.string.isRequired
};
module.exports = Inverted;
//# sourceMappingURL=Inverted.js.map

/***/ }),

/***/ 57479:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const Inverted = __webpack_require__(83370);
module.exports = Inverted;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 38825:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const SummaryItem = __webpack_require__(74992);
const { SummaryItemWrapper, SummaryItemContent, SummaryItemAssetContainer } = __webpack_require__(68116);
const { minScreen, maxScreen, calculateSpacing } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { maxThresholds } = __webpack_require__(99906);
const LargeScreenItem = styled(SummaryItem.TextBelowLeft).withConfig({
    displayName: 'LargeScreenItem'
}) `
  display: none;

  &&& {
    ${minScreen(BREAKPOINTS.lg)} {
      display: unset;

      ${({ lastItem }) => lastItem &&
    `
          ${SummaryItemAssetContainer}:after {
            display: none;
          }
        `}
    }
  }
`;
const SmallScreenItem = styled(SummaryItem.SideBySideImageWarp).withConfig({
    displayName: 'SmallScreenItem'
}) `
  display: block;

  & > ${SummaryItemAssetContainer} {
    display: none;
  }

  ${minScreen(BREAKPOINTS.lg)} {
    display: none;
  }
`;
const InvertedWrapper = styled.div.withConfig({
    displayName: 'InvertedWrapper'
}) `
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;

  ${SummaryItemWrapper} {
    grid-column: span 4;
  }

  ${minScreen(BREAKPOINTS.lg)} {
    grid-template-columns: repeat(12, 1fr);

    ${SummaryItemWrapper} {
      grid-column: span 3;
    }
  }

  && {
    ${maxScreen(`${maxThresholds.lg}px`)} {
      ${SummaryItemWrapper} {
        grid-gap: 0;
        grid-template-areas: 'content content content';

        ${SummaryItemContent} {
          ${SummaryItemAssetContainer} {
            display: block;
            float: right;
            margin-left: ${calculateSpacing(2)};
            width: ${calculateSpacing(14)};
          }
        }
      }
    }
  }
`;
module.exports = {
    InvertedWrapper,
    LargeScreenItem,
    SmallScreenItem
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 24688:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { SectionTitleRoot, SectionTitleHed } = __webpack_require__(33500);
const { RubricName } = __webpack_require__(6613);
const { SummaryItemHedBase } = __webpack_require__(36211);
const { SummaryItemWrapper, SummaryItemContent, SummaryItemAssetContainer, SummaryItemDek } = __webpack_require__(68116);
const { BylineName, BylinePreamble } = __webpack_require__(74423);
const { minScreen, getColorStyles, calculateSpacing } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { applyGridSpacing } = __webpack_require__(1123);
const commonLayoutCss = (theme) => `
  ${getColorStyles(theme, 'background', 'colors.discovery.body.black.background')};

  ${SectionTitleRoot} {
    padding-top: ${calculateSpacing(0)};
    padding-bottom: ${calculateSpacing(2)};
    border: none;

    ${SectionTitleHed} {
      ${getColorStyles(theme, 'color', 'colors.discovery.body.dark.heading')};
    }
  }

  ${RubricName} {
    ${getColorStyles(theme, 'color', 'colors.interactive.base.white')};
  }

  ${SummaryItemHedBase}, ${SummaryItemDek} {
    ${getColorStyles(theme, 'color', 'colors.discovery.body.black.heading')};
  }

  ${BylineName}, ${BylinePreamble} {
    ${getColorStyles(theme, 'color', 'colors.discovery.body.black.accreditation')};
  }
  `;
const varietyInvertedCss = (theme) => `
    ${applyGridSpacing('padding')};
    ${getColorStyles(theme, 'background', 'colors.discovery.body.black.background')};
    padding: ${calculateSpacing(6)} ${calculateSpacing(3)};
    
    ${minScreen(BREAKPOINTS.md)} {
      padding-left: ${calculateSpacing(6)};
      padding-right: ${calculateSpacing(6)};
    }
    ${minScreen(BREAKPOINTS.lg)} {
      margin: 0 calc(1 * var(--grid-margin));
    }

    ${minScreen(BREAKPOINTS.xl)} {
      padding-left: ${calculateSpacing(8.5)};
      padding-right: ${calculateSpacing(8.5)};
    }

    ${SectionTitleRoot} {
      padding-top: ${calculateSpacing(0)};
      padding-bottom: ${calculateSpacing(2)};
      border: none;

      ${SectionTitleHed} {
        ${getColorStyles(theme, 'color', 'colors.discovery.body.dark.heading')};
      }
    }
  `;
const invertedCss = (theme) => `
    padding: ${calculateSpacing(6)} calc(1 * var(--grid-margin));

    ${SummaryItemContent} {
      padding-bottom: 0;
    }

    ${SummaryItemWrapper} {
      ${getColorStyles(theme, 'border-bottom-color', 'colors.discovery.body.black.border')};
      
      &:last-child {
        ${SummaryItemAssetContainer}:after {
          display: none;
        }
      }
    }

    && {
      ${minScreen(BREAKPOINTS.md)} {
        margin: 0 calc(1 * var(--grid-margin));
        ${SummaryItemHedBase} {
          margin-bottom: ${calculateSpacing(1)};
        }
      }

      ${minScreen(BREAKPOINTS.lg)} {
        padding:  ${calculateSpacing(6)} ${calculateSpacing(4)};

        ${SummaryItemAssetContainer} {
          position: relative;
    
          &:after {
            display: block;
            position: absolute;
            top: 0px;
            right: calc(-1* var(--grid-gap) / 2);
            width: 1px;
            height: 100%;
            content: "";
            ${getColorStyles(theme, 'background-color', 'colors.discovery.body.black.border')};
          }
        }
      }
    }
  `;
const carouselCss = () => `
     ${SectionTitleRoot}{
        padding-left:${calculateSpacing(6)};
     }     
  `;
module.exports = {
    commonLayoutCss,
    varietyInvertedCss,
    invertedCss,
    carouselCss
};
//# sourceMappingURL=style-utils.js.map

/***/ }),

/***/ 58283:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { BaseWrap, BaseText } = __webpack_require__(76955);
const { getColorStyles, calculateSpacing, getTypographyStyles } = __webpack_require__(26865);
const { cssVariablesGrid } = __webpack_require__(1123);
const { commonLayoutCss, varietyInvertedCss, invertedCss, carouselCss } = __webpack_require__(24688);
const ForyouDek = styled(BaseText).withConfig({ displayName: 'ForyouDek' }) `
  ${({ theme }) => `
      display: flex;
      justify-content: center;
      padding-bottom: ${calculateSpacing(6)};
      ${getColorStyles(theme, 'color', 'colors.interactive.base.white')};
      ${getTypographyStyles(theme, 'typography.definitions.utility.label')};
      svg  {
        margin-right: ${calculateSpacing(1)};
        path {
          ${getColorStyles(theme, 'fill', 'colors.discovery.body.dark.heading')};
        }
      }

      span {
        display: flex;
        align-items: center;
      }
    `}
`;
const ForyouWrapper = styled(BaseWrap).withConfig({
    displayName: 'ForyouWrapper'
}) `
  ${({ layout, theme }) => layout &&
    `
      ${cssVariablesGrid()};
      ${layout !== 'carousel' && commonLayoutCss(theme)};
      ${layout === 'variety-inverted' && varietyInvertedCss(theme)};
      ${layout === 'inverted' && invertedCss(theme)};
      ${layout === 'carousel' && carouselCss(theme)};
    `}
`;
const ForyouComponent = styled(BaseWrap).withConfig({
    displayName: 'ForyouComponent'
}) `
  ${cssVariablesGrid()};
  margin: 0 auto;
  max-width: ${calculateSpacing(200)};
`;
module.exports = {
    ForyouWrapper,
    ForyouDek,
    ForyouComponent
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 94997:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

/**
 * Renders a variety of items in an inverted layout.
 *
 * @param {Array} props.items - The array of items to render.
 * @param {string} props.template - The template for the event.
 *
 * @returns {React.Element} The rendered VarietyInverted component.
 */
const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const SummaryItem = __webpack_require__(74992);
const { VarietyInvertedWrapper, MainStory, StoryList } = __webpack_require__(44616);
const { mapIndexToPosition, transformItems } = __webpack_require__(96872);
const { trackNavigationEvent } = __webpack_require__(14307);
const VarietyInverted = ({ items, template }) => {
    const callSnowplowEvent = (item, index, totalItems) => {
        const eventData = {
            type: 'click',
            subject: template,
            items: transformItems([item], window),
            placement: mapIndexToPosition(index, items.length),
            index,
            total_index: totalItems
        };
        trackNavigationEvent(eventData);
    };
    const [mainUnit, ...listUnits] = items;
    return (React.createElement(VarietyInvertedWrapper, null,
        React.createElement(MainStory, null,
            React.createElement(SummaryItem.TextBelowCenter, { ...mainUnit, hasBorder: false, clickHandler: () => callSnowplowEvent(mainUnit, 1, items.length), hideRubricItemSummary: true })),
        React.createElement(StoryList, null, listUnits.map((item, index) => (React.createElement(SummaryItem.SideBySideImageWarp, { key: index, ...item, shouldHideFinalBorder: true, clickHandler: () => callSnowplowEvent(item, index + 2, items.length), hideRubricItemSummary: true }))))));
};
VarietyInverted.propTypes = {
    items: PropTypes.array.isRequired,
    template: PropTypes.string.isRequired
};
module.exports = VarietyInverted;
//# sourceMappingURL=VarietyInverted.js.map

/***/ }),

/***/ 89676:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const VarietyInverted = __webpack_require__(94997);
module.exports = VarietyInverted;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 44616:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { SummaryItemWrapper, SummaryItemContent, SummaryItemDek, SummaryItemAssetContainer } = __webpack_require__(68116);
const { SummaryItemHedBase } = __webpack_require__(36211);
const { minScreen, maxScreen, minMaxScreen, getColorStyles, calculateSpacing, getTypographyStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { maxThresholds } = __webpack_require__(99906);
const VarietyInvertedWrapper = styled.div.withConfig({
    displayName: 'VarietyInvertedWrapper'
}) `
  display: grid;
  grid-template-columns: 1fr;

  ${minScreen(BREAKPOINTS.lg)} {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;
    gap: ${calculateSpacing(2)};
  }
`;
const MainStoryLg = (theme) => `
    ${minScreen(BREAKPOINTS.lg)} {
      grid-column: 1 / 7;
      margin-right: ${calculateSpacing(2)};
      padding-right: ${calculateSpacing(3)};
      position: relative;

      ${SummaryItemWrapper}:after {
        content: '';
        position: absolute;
        right: ${calculateSpacing(-2)};
        height: 100%;
        width: 1px;
        ${getColorStyles(theme, 'background', 'colors.discovery.body.black.border')};
      }

      ${SummaryItemContent} {
        padding: ${calculateSpacing(2)}
        ${calculateSpacing(3)}
        0
        ${calculateSpacing(3)};
      }
    }
  `;
const StoryListLg = (theme) => `
    ${minScreen(BREAKPOINTS.lg)} {
      grid-column: 7 / -1;
      grid-row: 1;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, min-content);
      padding-left: ${calculateSpacing(3)};

      ${SummaryItemWrapper} {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas: 'image content content';
        gap: ${calculateSpacing(2)};
        ${getColorStyles(theme, 'border-bottom-color', 'colors.discovery.body.black.border')};
        padding: ${calculateSpacing(3)} 0;

        &:first-child {
          padding-top: 0;
        }

        &:last-child {
          padding-bottom: 0;
        }
      }

      ${SummaryItemAssetContainer} {
        width: 100%;
        justify-self: left;
      }
    }
      
    ${minMaxScreen(BREAKPOINTS.lg, `${maxThresholds.xl}px`)} {
      ${SummaryItemAssetContainer} {
        width: ${calculateSpacing(23)};
      }
    }
  `;
const MainStory = styled.div.withConfig({ displayName: 'MainStory' }) `
  ${({ theme }) => `
        grid-column: 1;
        display: flex;
        justify-content: center;

        ${SummaryItemWrapper} {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;

          ${SummaryItemAssetContainer} {
            width: 100%;
          }
        }

        ${SummaryItemHedBase} {
          ${getTypographyStyles(theme, 'typography.definitions.discovery.hed-break-out')};
        }

        ${SummaryItemDek} {
          ${getTypographyStyles(theme, 'typography.definitions.discovery.description-feature')};
        }

        ${SummaryItemContent} {
          padding-bottom: ${calculateSpacing(2)};
        }

        &&& {
          ${minScreen(BREAKPOINTS.md)} {
            ${SummaryItemHedBase} {
              margin-bottom: ${calculateSpacing(1)};
              font-size: ${calculateSpacing(3.5)};
            }
          }
        }


        ${MainStoryLg(theme)};
      `}
`;
const StoryList = styled.div.withConfig({ displayName: 'StoryList' }) `
  ${({ theme }) => `
      display: grid;
      grid-column: 1;
      grid-row: 2;

      ${SummaryItemContent} {
        padding: 0;
      }

      ${SummaryItemWrapper} {
        padding: ${calculateSpacing(2)} 0;
      }

        ${SummaryItemHedBase} {
          ${getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-primary')};
        }
          
      ${maxScreen(`${maxThresholds.lg}px`)} {
        ${SummaryItemWrapper} {
          &:first-child {
            padding-top: ${calculateSpacing(2)};
            border-top: 1px solid;
            ${getColorStyles(theme, 'border-top-color', 'colors.discovery.body.black.border')};
          }
          ${getColorStyles(theme, 'border-color', 'colors.discovery.body.black.border')};
        }
      }

      ${SummaryItemWrapper}:last-child {
        padding-bottom: 0;
      }

      ${SummaryItemWrapper} {
          ${SummaryItemContent} {
            ${SummaryItemAssetContainer} {
              display: none;
            }
          }
      }
          
      &&& {
        ${maxScreen(`${maxThresholds.md}px`)} {
          ${SummaryItemWrapper} {
            grid-template-areas: 'content content content';
            grid-gap: 0;
            
            ${SummaryItemContent} {
              ${SummaryItemAssetContainer} {
                width: ${calculateSpacing(14)};
                float: right;
                margin-left: ${calculateSpacing(2)};
                display: block;
              }
            }
          }
        }
      }

      ${StoryListLg(theme)};
    `}
`;
module.exports = {
    VarietyInvertedWrapper,
    MainStory,
    StoryList
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 58272:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const ResponsiveAsset = __webpack_require__(73275);
const { FullBleedBannerWrapper, GridWrapper, SectionTitleWrapper, SectionDekWrapper, FullBleedTextWrapper } = __webpack_require__(93971);
/**
 * FullBleedBanner component
 *
 * @param {object} props - React props
 * @param {string} [props.dek] - dek text
 * @param {object} [props.fullBleedVisualAsset] - Optional fullBleedVisualAsset containing asset details supported by `ResponsiveAsset` component
 * @param {string} [props.hed] - heading text, aka _hed_ (example component prop)
 * @param {string} [props.id] - optional field to show the component id
 * @param {bool} [props.isLazy] - Optional Flag to support lazy loading of images
 *
 * @returns {ReactElement} <div>
 */
const FullBleedBanner = (props) => {
    const { dek, fullBleedVisualAsset, hed, isLazy } = props;
    return (React.createElement(FullBleedBannerWrapper, null,
        React.createElement(GridWrapper, null,
            React.createElement(FullBleedTextWrapper, null,
                hed && (React.createElement(SectionTitleWrapper, { as: "h2", dangerouslySetInnerHTML: { __html: hed } })),
                dek && (React.createElement(SectionDekWrapper, { as: "p", dangerouslySetInnerHTML: { __html: dek } }))),
            fullBleedVisualAsset && (React.createElement(ResponsiveAsset, { ...fullBleedVisualAsset, isLazy: isLazy })))));
};
FullBleedBanner.propTypes = {
    dek: PropTypes.string,
    fullBleedVisualAsset: PropTypes.object,
    hed: PropTypes.string,
    isLazy: PropTypes.bool
};
FullBleedBanner.displayName = 'FullBleedBanner';
module.exports = FullBleedBanner;
//# sourceMappingURL=FullBleedBanner.js.map

/***/ }),

/***/ 99017:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const { asThemedComponent } = __webpack_require__(20223);
const FullBleedBanner = __webpack_require__(75703);
module.exports = asThemedComponent(asConfiguredComponent(FullBleedBanner, 'FullBleedBanner'));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 93971:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BaseText } = __webpack_require__(76955);
const { SpanWrapper } = __webpack_require__(18117);
const { calculateSpacing } = __webpack_require__(26865);
const FullBleedBannerWrapper = styled.div.withConfig({
    displayName: 'FullBleedBannerWrapper'
}) `
  margin-bottom: ${calculateSpacing(3.2)};
`;
const FullBleedTextWrapper = styled.div.withConfig({
    displayName: 'FullBleedTextWrapper'
}) ``;
const SectionTitleWrapper = styled(BaseText).withConfig({
    displayName: 'SectionTitleWrapper'
}) ``;
SectionTitleWrapper.defaultProps = {
    colorToken: 'colors.interactive.base.white',
    typeIdentity: 'typography.definitions.discovery.hed-feature'
};
const SectionDekWrapper = styled(BaseText).withConfig({
    displayName: 'SectionDekWrapper'
}) ``;
SectionDekWrapper.defaultProps = {
    colorToken: 'colors.consumption.body.inverted.body',
    typeIdentity: 'typography.definitions.globalEditorial.context-primary'
};
const GridWrapper = styled.div.withConfig({
    displayName: 'GridWrapper'
}) `
  display: grid;

  position: relative;
  grid-template: 'box';
  z-index: 0;
  /* Grid properties */
  width: 100%;
  overflow: hidden;

  > *,
  &::before {
    grid-area: box;
  }

  ${FullBleedTextWrapper} {
    place-self: center;
  }

  ${SectionTitleWrapper} {
    text-align: center;
  }

  ${SectionDekWrapper} {
    text-align: center;
  }

  /* semi-transparent layer to darken image */
  &::before {
    position: relative;
    opacity: 0.4;
    z-index: -1;
    background: black;
    content: '';
  }

  ${SpanWrapper} {
    img {
      position: relative;
      z-index: -2;
      height: auto;
      /* object-fit and aspect-ratio in use for a consistent aspect ratio pattern for the image */
      object-fit: cover;
      aspect-ratio: 3 / 2; /* @TODO: dynamicize this in order for a brand to set which ratio they prefer */
      inline-size: 100%;
      max-height: 424px; /* @TODO: max-height value should be configurable on a per brand basis */
    }
  }
`;
module.exports = {
    FullBleedBannerWrapper,
    GridWrapper,
    SectionTitleWrapper,
    SectionDekWrapper,
    FullBleedTextWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 75703:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const FullBleedBanner = __webpack_require__(58272);
FullBleedBanner.Default = asVariation(FullBleedBanner, 'Default', {});
module.exports = FullBleedBanner;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 93261:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const SummaryItem = __webpack_require__(74992);
const SectionTitle = __webpack_require__(35864);
const { componentTracking } = __webpack_require__(90090);
const { TrackComponentChannel } = __webpack_require__(78788);
const { HorizontalListContainer, HorizontalListGrid, HorizontalListItem, HorizontalListTitle, HorizontalListWrapper } = __webpack_require__(1189);
/**
 * HorizontalList component
 *
 * @param {object} props - React props
 * @param {string} [props.dangerousHed] - heading text, aka _dangerousHed_ (example component prop)
 * @param {bool} [props.hasDividerAbove] - Optional Displays a border above
 * @param {boolean} [props.hasTopMobilePadding] - [`bool`] Optional. Set `true` to add extra padding on top.
 * @param {boolean} [props.hasTopSpacing] - [`bool`] Optional. Set `true` to add extra spacing on top for larger device.
 * @param {bool} [props.hasVerticalRule] - Set `true` for vertical dividers, set `false` to disable them. Default is 'true'
 * @param {boolean} [props.hideRubricItemSummary] - [`bool`] Optional. Set `true` for hide rubrics, set `false` for show rubrics.
 * @param {Array<SummaryItem>} [props.items] - Array containing objects that each have data which is used to render a
 * @param {string} [props.sectionTitleTypeToken] - Optional prop to control section title type token
 * @param {string} [props.sectionTitleVariation] - Optional prop to control section title variation
 * @param {bool} [props.shouldEnableDekStyling] - Use local dek typography styling, default is 'true'.
 * @param {bool} [props.shouldHideBylines] - Set `true` to hide item's byline. Default is 'false'.
 * @param {bool} [props.shouldEnableBundleComponentAnalytics] - feature flag to append data-section-title attribute for analytics
 * @param {bool} [props.shouldThumbnailAlignTop] - Optional flag to move assets on top of the container
 * @param {string} [props.summaryItemVariation] - Optional variation for SummaryItem
 *   SummaryItem component
 *
 * @returns {ReactElement} <div>
 */
const HorizontalList = ({ dangerousHed = '', hasDividerAbove = false, hasTopMobilePadding = false, hasTopSpacing = false, hasVerticalRule = true, hideRubricItemSummary = false, items = [], sectionTitleVariation = 'LineAboveLineBelowTextCenter', sectionTitleTypeToken = 'subhed-section-primary', shouldEnableDekStyling = true, shouldHideBylines = false, shouldEnableBundleComponentAnalytics = false, shouldThumbnailAlignTop = false, summaryItemVariation = 'SideBySideThirds' }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'HorizontalList'
        });
    }, []);
    const SectionTitleComponent = SectionTitle[sectionTitleVariation] || SectionTitle;
    const SummaryItemComponent = SummaryItem[summaryItemVariation] || SummaryItem;
    return items && items.length > 0 ? (React.createElement(HorizontalListWrapper, { "data-testid": "HorizontalListWrapper", hasTopSpacing: hasTopSpacing },
        React.createElement(HorizontalListContainer, { hasDividerAbove: hasDividerAbove },
            dangerousHed && (React.createElement(HorizontalListTitle, { as: SectionTitleComponent, dangerousHed: dangerousHed, sectionTitleTypeToken: sectionTitleTypeToken })),
            React.createElement(HorizontalListGrid, { "data-testid": "HorizontalListGrid" }, items.map((item, idx) => {
                const analyticsDataAttribute = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, dangerousHed, idx);
                return (React.createElement(HorizontalListItem, { as: SummaryItemComponent, key: item.copilotID, hedTag: "h3", analyticsDataAttribute: analyticsDataAttribute, ...item, hasRule: false, hasTopMobilePadding: hasTopMobilePadding, hideRubricItemSummary: hideRubricItemSummary, hasVerticalRule: hasVerticalRule && idx > 0, shouldEnableDekStyling: shouldEnableDekStyling, shouldHideBylines: shouldHideBylines, shouldThumbnailAlignTop: shouldThumbnailAlignTop }));
            }))))) : null;
};
HorizontalList.propTypes = {
    dangerousHed: PropTypes.string,
    hasDividerAbove: PropTypes.bool,
    hasTopMobilePadding: PropTypes.bool,
    hasTopSpacing: PropTypes.bool,
    hasVerticalRule: PropTypes.bool,
    hideRubricItemSummary: PropTypes.bool,
    items: PropTypes.array,
    sectionTitleTypeToken: PropTypes.oneOf([
        'subhed-section-primary',
        'subhed-section-collection'
    ]),
    sectionTitleVariation: PropTypes.string,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldEnableDekStyling: PropTypes.bool,
    shouldHideBylines: PropTypes.bool,
    shouldThumbnailAlignTop: PropTypes.bool,
    summaryItemVariation: PropTypes.string
};
HorizontalList.displayName = 'HorizontalList';
module.exports = HorizontalList;
//# sourceMappingURL=HorizontalList.js.map

/***/ }),

/***/ 82363:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
module.exports = asConfiguredComponent(__webpack_require__(93261), 'HorizontalList');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 1189:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BREAKPOINTS } = __webpack_require__(96472);
const { maxThresholds } = __webpack_require__(99906);
const { calculateSpacing, getColorToken, getDecoration, getTypographyStyles, minScreen } = __webpack_require__(26865);
const Grid = __webpack_require__(86659);
const { GridItem } = __webpack_require__(40653);
const { SectionTitleHed } = __webpack_require__(33500);
const { getSectionSpacingStyling } = __webpack_require__(16800);
const HorizontalListGrid = styled(Grid.EvenFourMobileUp).withConfig({
    displayName: 'HorizontalListGrid'
}) `
  &&& {
    grid-row-gap: 0;

    /* the grids are designed around 'max-widths', so the tablet grid kicks in at 769, but we actually want 768 */
    @media (min-width: ${BREAKPOINTS.md}) {
      grid-template-columns: repeat(12, 1fr);
    }

    @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${maxThresholds.lg}px) {
      position: relative;
      grid-column-gap: ${calculateSpacing(4)};
      grid-template-columns: repeat(12, 1fr);

      /* crosshairs y axis */
      &::after {
        position: absolute;
        left: 50%;
        background: ${({ theme }) => getColorToken(theme, 'colors.discovery.body.white.divider')};
        width: 1px;
        height: 100%;
        content: '';
      }
    }

    > ${GridItem} {
      @media (max-width: ${maxThresholds.lg}px) {
        padding-top: ${calculateSpacing(2)};
      }

      @media (min-width: ${BREAKPOINTS.lg}) {
        /* grids dont turn over until xxl so had to override */
        grid-column: auto / span 3;
      }

      /* crosshairs x axis */
      :nth-child(1),
      :nth-child(2) {
        @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${maxThresholds.lg}px) {
          position: relative;

          &::before {
            position: absolute;
            bottom: 0;
            background: ${({ theme }) => getColorToken(theme, 'colors.discovery.body.white.divider')};
            width: 100%;
            height: 1px;
            content: '';
          }
        }
      }

      :nth-last-child(1) {
        > div {
          @media (max-width: ${maxThresholds.md}px) {
            border-bottom: none;
          }
        }
      }

      @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${maxThresholds.lg}px) {
        grid-column: auto / span 6;
      }
    }
  }
`;
const HorizontalListItem = styled.div.withConfig({
    displayName: 'HorizontalListItem'
}) `
  &&& {
    border-color: ${({ theme }) => getColorToken(theme, 'colors.discovery.body.white.divider')};

    @media (max-width: ${maxThresholds.md}px) {
      border-bottom-width: 1px;
      border-bottom-style: solid;
      padding: 0;
      ${({ hasTopMobilePadding }) => hasTopMobilePadding && `padding-top: 1rem; padding-bottom: 2rem`}
    }

    @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${maxThresholds.lg}px) {
      border: none;
    }

    @media (max-width: ${maxThresholds.lg}px) {
      grid-column-gap: ${calculateSpacing(0)};
      align-items: center;
      padding-bottom: 0;
      ${({ hasTopMobilePadding }) => hasTopMobilePadding && `padding-top: 1rem; padding-bottom: 2rem`}
    }

    @media (min-width: ${BREAKPOINTS.lg}) {
      grid-column-gap: ${calculateSpacing(2)};
      border: none;
      padding-top: ${calculateSpacing(2)};
      height: 100%;

      &::before {
        top: ${calculateSpacing(2)};
        left: calc(var(--grid-gap) / -2);
        height: calc(100% - 1rem);
      }
    }

    .summary-item__hed-link,
    .summary-item__hed-link:link,
    .summary-item__hed-link:visited {
      .summary-item__hed {
        margin-bottom: ${calculateSpacing(1)};
        ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.subhed-section-tertiary')};
        color: ${({ theme }) => getColorToken(theme, 'colors.discovery.lead.primary.hed')};
      }
    }

    .summary-item__asset-container {
      @media (max-width: ${maxThresholds.lg}px) {
        margin: ${calculateSpacing(2)} ${calculateSpacing(2)}
          ${calculateSpacing(2)} 0;
        ${({ shouldThumbnailAlignTop }) => shouldThumbnailAlignTop && `align-self: baseline; margin-top: 0;`}
      }
    }

    .summary-item__asset-container {
      width: ${calculateSpacing(8)};
    }

    &.summary-item--text-align-center {
      .summary-item__asset-container {
        margin: 0 auto;
      }
    }

    &.summary-item--layout-placement-side-by-side {
      grid-column-gap: ${calculateSpacing(2)};
      align-items: normal;

      &.summary-item--layout-proportions-33-66 {
        grid-template-columns: ${calculateSpacing(8)} 1fr 1fr;
      }

      &.summary-item--layout-proportions-66-33 {
        grid-template-columns: 1fr 1fr ${calculateSpacing(8)};
      }

      .summary-item__content {
        padding-top: 0;
      }
    }

    .summary-item__content {
      padding: ${calculateSpacing(2)} 0 ${calculateSpacing(2)};

      @media (max-width: ${maxThresholds.lg}px) {
        margin-bottom: 0;
      }
    }

    .summary-item__dek {
      margin: 0;
      /* allows short deks to occupy same space as wrapped deks */
      min-height: 30px;
      ${({ theme, shouldEnableDekStyling }) => shouldEnableDekStyling &&
    getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-tertiary')};
      ${({ theme, shouldEnableDekStyling }) => shouldEnableDekStyling &&
    `color: ${getColorToken(theme, 'colors.discovery.body.white.context-tertiary')}`};
    }
  }
`;
const HorizontalListTitle = styled.div.withConfig({
    displayName: 'HorizontalListTitle'
}) `
  margin-bottom: ${calculateSpacing(3)};

  ${SectionTitleHed} {
    color: ${({ theme }) => getColorToken(theme, 'colors.discovery.lead.primary.hed')};
    ${({ theme, sectionTitleTypeToken }) => getTypographyStyles(theme, `typography.definitions.discovery.${sectionTitleTypeToken}`)};
  }
`;
const HorizontalListWrapper = styled(Grid.WithMargins).withConfig({
    displayName: 'HorizontalListWrapper'
}) `
  grid-row-gap: ${calculateSpacing(0)};

  && {
    ${({ hasTopSpacing }) => {
    if (hasTopSpacing) {
        return `
          ${minScreen(BREAKPOINTS.md)} {
            ${({ hasConsistentSpacing, theme }) => {
            return hasConsistentSpacing &&
                getSectionSpacingStyling(theme, 'gap-sm') !== '0px'
                ? `margin-top: 0;`
                : `margin-top: ${calculateSpacing(4)};`;
        }}
          }
        `;
    }
    return '';
}}
  }

  > ${GridItem} {
    grid-column: 1 / span 4;

    @media (min-width: ${BREAKPOINTS.md}) {
      grid-column: 1 / span 12;
    }
  }
`;
const HorizontalListContainer = styled.div.withConfig({
    displayName: 'HorizontalListContainer'
}) `
  --divider-width: ${({ theme }) => getDecoration(theme, 'dividerWidth')};

  ${({ hasDividerAbove, theme }) => hasDividerAbove
    ? `
    border-top: var(--divider-width) solid ${getColorToken(theme, `colors.discovery.body.white.divider`)};
    margin-top: ${calculateSpacing(3)};

    ${minScreen(BREAKPOINTS.md)} {
      padding-top: ${calculateSpacing(3)};
    }
  `
    : ''}
`;
module.exports = {
    HorizontalListContainer,
    HorizontalListGrid,
    HorizontalListItem,
    HorizontalListTitle,
    HorizontalListWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 63189:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.IssueExplorer = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const IssueExplorer = (_props) => {
    // TODO CG-4565 - For now, just render a placeholder.
    return react_1.default.createElement("div", { "data-testid": "issue-explorer" }, "Issue Explorer");
};
exports.IssueExplorer = IssueExplorer;
//# sourceMappingURL=IssueExplorer.js.map

/***/ }),

/***/ 50837:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const IssueExplorer_1 = __webpack_require__(63189);
// CG-4565 - For now, just export the component no need to use asConfiguredComponent
exports.A = IssueExplorer_1.IssueExplorer;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 84936:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { UnitWrapper, ExpandedContainer, CollapsedContainer, Hed, Copy, CTA, Image, CollapsedCopy, LeftContainer } = __webpack_require__(54536);
const { withFormatter } = __webpack_require__(98750);
const Formatted = {
    Hed: withFormatter(Hed),
    Copy: withFormatter(Copy),
    CollapsedCopy: withFormatter(CollapsedCopy)
};
const NavLeft = ({ isExpanded, data: { backgroundImage, hed, copy, cta, image, collapsedCta } }) => {
    return (React.createElement(UnitWrapper, { href: cta.url, className: "nav-left__container" }, isExpanded ? (React.createElement(ExpandedContainer, { backgroundImage: backgroundImage },
        React.createElement(LeftContainer, null,
            React.createElement(Formatted.Hed, { html: hed }),
            React.createElement(Formatted.Copy, { html: copy }),
            React.createElement(CTA, null, cta.text)),
        React.createElement(Image, { src: image.url, alt: image.alt }))) : (React.createElement(CollapsedContainer, null,
        React.createElement(Formatted.CollapsedCopy, { html: collapsedCta })))));
};
NavLeft.displayName = 'NavLeft';
NavLeft.propTypes = {
    data: PropTypes.shape({
        backgroundImage: PropTypes.string,
        hed: PropTypes.string.isRequired,
        copy: PropTypes.string,
        collapsedCta: PropTypes.string.isRequired,
        cta: PropTypes.shape({
            text: PropTypes.string.isRequired,
            url: PropTypes.string.isRequired
        }),
        image: PropTypes.shape({
            url: PropTypes.string.isRequired,
            alt: PropTypes.string.isRequired
        })
    }),
    isExpanded: PropTypes.bool
};
NavLeft.requireDataFields = [
    'hed',
    'image.url',
    'image.alt',
    'cta.text',
    'cta.url',
    'collapsedCta'
];
module.exports = NavLeft;
//# sourceMappingURL=NavLeft.js.map

/***/ }),

/***/ 42092:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const flow = __webpack_require__(49870);
const NavLeft = __webpack_require__(84936);
const { withDataFallback } = __webpack_require__(58872);
const wrap = flow([withDataFallback]);
module.exports = wrap(NavLeft);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 54536:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, keyframes } = __webpack_require__(92168);
const { BREAKPOINTS } = __webpack_require__(96472);
const { getColorToken, getTypographyStyles } = __webpack_require__(26865);
const fadeInAnimation = keyframes `
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
`;
const UnitWrapper = styled.a.withConfig({ displayName: 'UnitWrapper' }) `
  display: none;
  width: 230px;
  text-decoration: none;
  @media (min-width: calc(${BREAKPOINTS.lg} - 1px)) {
    display: flex;
  }
`;
const ExpandedContainer = styled.div.withConfig({
    displayName: 'ExpandedContainer'
}) `
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: ${fadeInAnimation} 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  background-color: ${getColorToken('colors.interactive.base.white')};
  padding: 12px 17px 15px 23px;
  height: 110px;
  ${({ backgroundImage }) => backgroundImage &&
    `
   background-image: url('${backgroundImage}');
   background-size: cover;
  `}
`;
const LeftContainer = styled.div.withConfig({
    displayName: 'LeftContainer'
}) `
  display: flex;
  flex-direction: column;
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.list')};
`;
const CollapsedContainer = styled.div.withConfig({
    displayName: 'CollapsedContainer'
}) `
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ${fadeInAnimation} 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  height: 16px;
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.list')};
`;
const Hed = styled.div.withConfig({
    displayName: 'Hed'
}) `
  line-height: 16.78px;
  color: ${getColorToken('colors.interactive.base.black')};
  font-size: 14px;
  font-style: italic;

  & strong {
    font-weight: 800;
  }

  & del {
    font-weight: 600;
  }
`;
const Copy = styled.div.withConfig({
    displayName: 'Copy'
}) `
  margin-top: 2px;
  line-height: 12px;
  color: ${getColorToken('colors.interactive.base.black')};
  font-size: 10px;
  font-style: italic;
`;
const CollapsedCopy = styled.div.withConfig({
    displayName: 'CollapsedCopy'
}) `
  margin-top: 2px;
  text-decoration: none;
  line-height: 12px;
  color: ${getColorToken('colors.interactive.base.black')};
  font-size: 12px;
  font-weight: 500;
  font-style: italic;

  &:hover {
    text-decoration: underline;
  }
`;
const CTA = styled.button.withConfig({
    displayName: 'CTA'
}) `
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 7px;
  background-color: ${getColorToken('colors.interactive.base.black')};
  width: 79px;
  height: 25px;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 9px;
  letter-spacing: 1.18421px;
  color: ${getColorToken('colors.interactive.base.white')};
  font-size: 7.89474px;
  font-weight: 700;

  &:hover {
    text-decoration: none;
  }
`;
const Image = styled.img.withConfig({
    displayName: 'Image'
}) `
  width: 72px;
  height: 88px;
`;
module.exports = {
    UnitWrapper,
    ExpandedContainer,
    CollapsedContainer,
    Hed,
    Copy,
    CTA,
    Image,
    CollapsedCopy,
    LeftContainer
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 53565:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { UnitWrapper, ExpandedContainer, CollapsedContainer, CollapsedCta, ExpandedImage } = __webpack_require__(11444);
const { withFormatter } = __webpack_require__(98750);
const Formatted = {
    CollapsedCta: withFormatter(CollapsedCta)
};
const Image = ({ isExpanded, data: { expandedImage, url, collapsedCta } }) => {
    return (React.createElement(UnitWrapper, { href: url, className: "nav-left__container" }, isExpanded ? (React.createElement(ExpandedContainer, null,
        React.createElement(ExpandedImage, { src: expandedImage.src, alt: expandedImage.alt }))) : (React.createElement(CollapsedContainer, null,
        React.createElement(Formatted.CollapsedCta, { html: collapsedCta })))));
};
Image.displayName = 'NavLeft.Image';
Image.propTypes = {
    data: PropTypes.shape({
        expandedImage: PropTypes.shape({
            src: PropTypes.string.isRequired,
            alt: PropTypes.string.isRequired
        }),
        url: PropTypes.string.isRequired,
        collapsedCta: PropTypes.string.isRequired
    }),
    isExpanded: PropTypes.bool
};
Image.requireDataFields = [
    'expandedImage.src',
    'expandedImage.alt',
    'url',
    'collapsedCta'
];
module.exports = Image;
//# sourceMappingURL=Image.js.map

/***/ }),

/***/ 1936:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const flow = __webpack_require__(49870);
const Image = __webpack_require__(53565);
const { withDataFallback } = __webpack_require__(58872);
const wrap = flow([withDataFallback]);
module.exports = wrap(Image);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 11444:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, keyframes } = __webpack_require__(92168);
const { BREAKPOINTS } = __webpack_require__(96472);
const { getTypographyStyles } = __webpack_require__(26865);
const fadeInAnimation = keyframes `
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
`;
const UnitWrapper = styled.a.withConfig({ displayName: 'UnitWrapper' }) `
  display: none;
  width: 230px;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
  @media (min-width: calc(${BREAKPOINTS.lg} - 1px)) {
    display: flex;
  }
`;
const ExpandedContainer = styled.div.withConfig({
    displayName: 'ExpandedContainer'
}) `
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: ${fadeInAnimation} 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  background-color: #ffffff;
  height: 110px;
`;
const ExpandedImage = styled.img.withConfig({
    displayName: 'ExpandedImage'
}) `
  object-fit: cover;
`;
const CollapsedContainer = styled.div.withConfig({
    displayName: 'CollapsedContainer'
}) `
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ${fadeInAnimation} 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.list')};
`;
const CollapsedCta = styled.span.withConfig({
    displayName: 'CollapsedCopy'
}) `
  margin-top: 2px;
  line-height: 12px;
  color: #000;
  font-size: 12px;
  font-weight: 500;
  font-style: italic;
`;
module.exports = {
    UnitWrapper,
    ExpandedContainer,
    CollapsedContainer,
    CollapsedCta,
    ExpandedImage
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 93394:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const Default = __webpack_require__(42092);
const Image = __webpack_require__(1936);
const asJourneyUnit = __webpack_require__(51806);
// Default Variation
const NavLeft = Default;
// All Variations
NavLeft.Image = Image;
module.exports = asJourneyUnit(NavLeft, 'nav-left__component');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 99786:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const IframeEmbed = __webpack_require__(22816);
const { TrackComponentChannel } = __webpack_require__(78788);
const { LiveStreamEmbedWrapper, LiveStreamHed } = __webpack_require__(34039);
/**
 * LiveStreamEmbed component to display a livestream url in a responsive iframe
 *
 * @param {object} props - React props
 * @param {string} props.livestreamUrl - the url of video to iframe
 * @param {string} props.dangerousHed - Optional livestream headline
 *
 * @returns {ReactElement} <div>
 */
const LiveStreamEmbed = ({ livestreamUrl, dangerousHed }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'LiveStreamEmbed'
        });
    }, []);
    return (React.createElement(LiveStreamEmbedWrapper, null,
        dangerousHed && React.createElement(LiveStreamHed, { dangerousHed: dangerousHed }),
        React.createElement(IframeEmbed, { url: livestreamUrl, shouldAllowFullScreen: true, aspectRatio: "16:9", sandbox: "allow-scripts allow-same-origin", height: "100%", width: "100%", isLazyLoaded: false })));
};
LiveStreamEmbed.propTypes = {
    dangerousHed: PropTypes.string,
    livestreamUrl: PropTypes.string.isRequired
};
module.exports = LiveStreamEmbed;
//# sourceMappingURL=LiveStreamEmbed.js.map

/***/ }),

/***/ 5333:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(99786);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 34039:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const SectionTitle = __webpack_require__(35864);
const { calculateSpacing } = __webpack_require__(26865);
const LiveStreamEmbedWrapper = styled.div.withConfig({
    displayName: 'LiveStreamEmbedWrapper'
}) `
  margin: 0 auto;
  padding: 0 1.5rem;
  max-width: 720px;
`;
LiveStreamEmbedWrapper.displayName = 'LiveStreamEmbedWrapper';
const LiveStreamHed = styled(SectionTitle.TextCenter).withConfig({
    displayName: 'LiveStreamHed'
}) `
  margin-bottom: ${calculateSpacing(2)};
  padding-top: ${calculateSpacing(6)};
`;
LiveStreamHed.displayName = 'LiveStreamHed';
module.exports = {
    LiveStreamEmbedWrapper,
    LiveStreamHed
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 40938:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { getContainerId } = __webpack_require__(71724);
const { MultiPackageRow } = __webpack_require__(67275);
/**
 * MultiPackageRow component
 *
 * @param {object} props - React props
 *
 * @returns {ReactElement} <div>
 */
const MultiPackageRowWrapper = (props) => {
    if (!props.children) {
        return null;
    }
    const generatedId = getContainerId(props.children.props);
    return (React.createElement(MultiPackageRow, { ...props, id: generatedId }, props.children));
};
MultiPackageRowWrapper.propTypes = {
    children: PropTypes.node
};
MultiPackageRowWrapper.displayName = 'MultiPackageRow';
module.exports = MultiPackageRowWrapper;
//# sourceMappingURL=MultiPackageRow.js.map

/***/ }),

/***/ 3771:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const MultiPackageRow = __webpack_require__(40938);
module.exports = asConfiguredComponent(MultiPackageRow, 'MultiPackageRow');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 97737:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const classnames = __webpack_require__(32485);
const { useIntl } = __webpack_require__(46984);
const Ad = __webpack_require__(19607);
const BestStories = __webpack_require__(31498);
const NewsFeed = __webpack_require__(42594);
const { TrackComponentChannel } = __webpack_require__(78788);
const { trackingProducts } = __webpack_require__(79133);
const CNEVideo = __webpack_require__(86630);
const CelebratedEntryPoint = __webpack_require__(42630);
const ConnectedNewsletterSubscribeForm = __webpack_require__(577);
const ConsumerMarketingUnit = __webpack_require__(71284);
const { PaymentGateway } = __webpack_require__(92807);
const DiscoveryPullQuote = __webpack_require__(48985);
const EventsList = __webpack_require__(67020);
const ImageSlideShow = __webpack_require__(59505);
const { LinkBanner } = __webpack_require__(82873);
const { NavigationList } = __webpack_require__(2505);
const LiveStreamEmbed = __webpack_require__(5333);
const HorizontalList = __webpack_require__(82363);
const PaginationRow = (__webpack_require__(30637)/* ["default"] */ .A);
const PromoBox = __webpack_require__(35727);
const SearchableSummaryCollection = __webpack_require__(29412);
const SubtopicDiscovery = __webpack_require__(13478);
const SummaryCollectionRow = __webpack_require__(35862);
const SummaryGridCompact = __webpack_require__(10931);
const SummaryCollectionGrid = __webpack_require__(91706);
const SummaryRiver = __webpack_require__(84311);
const SummaryCollageFiftyFifty = __webpack_require__(77504);
const SummaryCollageOne = __webpack_require__(82597);
const Ticker = __webpack_require__(78250);
const translations = (__webpack_require__(29693)/* ["default"] */ .A);
const SummaryCarousel = __webpack_require__(43709);
const SummarySpotlight = __webpack_require__(13113);
const VersoSummarySpotlight = __webpack_require__(22651);
const CuratedShowsSection = __webpack_require__(69031);
const VersoFeatures = __webpack_require__(46793);
const VersoFilterableSummaryList = __webpack_require__(10220);
const VersoIssueFeature = __webpack_require__(29794);
const VersoNativeProduct = __webpack_require__(72775);
const VersoNativeProductCarousel = __webpack_require__(31828);
const ContributorHeader = __webpack_require__(50417);
const ContributorSpotlight = __webpack_require__(41096);
const ContributorAllFiction = __webpack_require__(18814);
const SummaryAudioCollection = __webpack_require__(3670);
const ContributorCollectionItems = __webpack_require__(63505);
const FullBleedBanner = __webpack_require__(99017);
const MultiPackageRow = __webpack_require__(3771);
const IssueExplorer = (__webpack_require__(50837)/* ["default"] */ .A);
const EmbedWrapper = __webpack_require__(90111);
const { PodcastDetailPageSummaryRiver } = __webpack_require__(52643);
const translationsPodcast = (__webpack_require__(40133)/* ["default"] */ .A);
const { Ticker: JourneyTicker } = __webpack_require__(12501);
const { findComponentOptions, ProductListingItems } = __webpack_require__(71724);
const { CMUnitWrapper, DiscoveryQuoteRow, EventsListWrapper, MultiPackageContainer, MultiPackageReadMore, NewsFeedWrapper, NewsletterWrapper, PromoBoxWrapper, SubTopicDiscoveryWrapper, TickerWrapper, MultipackageNoItemsBlock, MultiPackageBodyWrapperGrid, SectionJumpLinksWrapper, UtilityButton } = __webpack_require__(67275);
const stripHTML = (string) => string.replace(/<[^>]*>/g, '');
const dataJourneyHook = 'row-content';
const Chunks = __webpack_require__(48887);
const Grid = __webpack_require__(86659);
const ProductVisual = __webpack_require__(49350);
const VersoPlpCurated = __webpack_require__(18853);
const VersoCommerceCollectionCurated = __webpack_require__(91323);
const { minThresholds } = __webpack_require__(99906);
const SmartComponent = __webpack_require__(30583);
const { RIVER_LAYOUTS } = __webpack_require__(94776);
const TopStory = __webpack_require__(75883);
const ForYou = __webpack_require__(41953);
const GalleryCarousel = __webpack_require__(87963);
const ViewportMonitor = __webpack_require__(3990);
const ConnectedErrorBoundary = __webpack_require__(48496);
const { trackNewsletterEvent } = __webpack_require__(14307);
const { inlineEmbedPosition } = __webpack_require__(62327);
const { default: PhotoBookmarkingProvider } = __webpack_require__(56602);
const { CollageEnvironment } = __webpack_require__(68381);
const rightRail = () => () => (React.createElement(PaymentGateway, { group: "ads" },
    React.createElement(Ad, { position: "rail" })));
let indexToInjectNewsletter = -1;
const listForContainerToInsertNewsletter = [
    'verso-filterable-summary-list',
    'verso-article-filterable-feature',
    'verso-plp-multisearch-filterable-feature',
    'verso-plp-filterable-feature',
    'verso-plp-manual-curated',
    'verso-plp-search-curated',
    'verso-pim-collection'
];
/**
 * Get Embed view
 *
 * Returns Body component with Grid component wrapper if shouldUseGridForEmbed is true
 * else returns body component alone
 *
 * @param {object} container - container object
 * @param {object} options - options for rendering for webview
 * @param options.shouldUseGridForEmbed - should use Grid component wrapper
 * @param options.shouldShowAdsInMultiPackageBody - should show ads in body
 * @param options.shouldUseJumpLinksSectionStyleForEmbed - should use jumplink section styling
 * @returns {React.Component} - Body component with or without Grid wrapper
 */
function getEmbedView(container, { shouldUseGridForEmbed, shouldUseJumpLinksSectionStyleForEmbed, shouldShowAdsInMultiPackageBody }) {
    const MultiPackageBodyWrapper = shouldUseGridForEmbed
        ? Grid.NarrowContentWithWideAdRail
        : MultiPackageBodyWrapperGrid;
    if (shouldShowAdsInMultiPackageBody) {
        return (React.createElement(Chunks, { FullBleedContentWrapper: MultiPackageBodyWrapper, GeneralContentWrapper: MultiPackageBodyWrapper, RailContent: rightRail(), jsonml: container.body }));
    }
    const embedBody = (React.createElement(EmbedWrapper, { copilotId: container.copilotId, body: container.body, dangerousHed: container.dangerousHed, dangerousDek: container.dangerousDek }));
    if (shouldUseJumpLinksSectionStyleForEmbed) {
        return (React.createElement(SectionJumpLinksWrapper, { className: "verso-section-jump-links-wrapper" }, embedBody));
    }
    return embedBody;
}
/**
 * Get Ticker View
 *
 * This allows for the ticker component to gracefully render at any position on the
 * page. When the ticker is rendered at the top of the page, it should have no top margin,
 * and when it is rendered elsewhere, it should fall within the same <MultiPackageRow /> component
 * structure as other components.
 *
 * @param {int} index - Index key
 * @param {object} container - container object
 * @param {object} minimalSpacingConfig - minimalSpacingConfig object
 * @param {bool} isInvertedTheme - isInvertedTheme value
 * @param {bool} hasConsistentSpacing - defines whether the consistent spacing is needed or not
 * @returns {React.Component} - Ticker component
 */
function getTickerView(index, isInvertedTheme, hasConsistentSpacing, container = {}, minimalSpacingConfig = {}) {
    const { hasNoBottomMargin, hasReducedMargin, tickerMarginTopType, hasVersoFeaturesReducedMargin, hasMediumMargin } = minimalSpacingConfig;
    if (index > 0) {
        return (React.createElement(MultiPackageRow, { key: index, hasReducedMargin: hasReducedMargin, hasNoTopMargin: !!hasVersoFeaturesReducedMargin, hasNoBottomMargin: !!hasNoBottomMargin, hasMediumMargin: hasMediumMargin, hasConsistentSpacing: hasConsistentSpacing },
            React.createElement(TickerWrapper, { isInvertedTheme: isInvertedTheme, id: container.id },
                React.createElement(Ticker, { marginTopType: tickerMarginTopType, ...container, index: index, isInvertedTheme: isInvertedTheme }))));
    }
    return (React.createElement(TickerWrapper, { key: index, isInvertedTheme: isInvertedTheme, id: container.id },
        React.createElement(Ticker, { marginTopType: tickerMarginTopType, hasMinimalBottomMargin: hasReducedMargin, index: index, ...container, isInvertedTheme: isInvertedTheme })));
}
/**
 * Get Read More Button
 *
 * This will retun the read more or next page button provided
 * the button variation an rest props
 *
 * @param {object} container - container object
 * @param {object} bundleProps - bundle props
 * @param {string} buttonVariation - variation for button
 * @param {string} btnStyle - adding styling to button
 * @param {boolean} hasConsistentSpacing - defines whether the consistent spacing is needed or not
 * @returns {React.Component} - component
 */
function getReadMoreButton(bundleProps, buttonVariation, btnStyle, hasConsistentSpacing, container = {}) {
    return (RIVER_LAYOUTS[container?.layout]?.isPaginated && (React.createElement(MultiPackageReadMore, { key: "paginated", "data-test-id": "read-more-button-between", hasConsistentSpacing: hasConsistentSpacing },
        React.createElement(PaginationRow, { currentPage: bundleProps.bundle.paginatedPage, totalResults: container.totalResults, limit: container.limit, buttonVariation: buttonVariation, btnStyle: btnStyle, filter: container.filter, searchQuery: container.searchQuery, shouldEnableBundleComponentAnalytics: container.shouldEnableBundleComponentAnalytics }))));
}
/**
 * hasItems
 *
 * Checks the container object for the items' existence.
 * Sometimes we don't want to render the container when there are no items.
 *
 * @param {object} container - container object
 * @returns {boolean} - if the container has items
 */
function hasItems(container) {
    return !!container?.items?.length;
}
/**
 * getSummaryCollectionGridForContributors
 *
 * Get the summarycollectiongrid component with variations as 2 column or 3 column 04 4 column
 *
 * @param {object} container - container object
 * @param {boolean} shouldUseThreeColumnsForContributors - should the component return variation with 3 column
 * @param {boolean} shouldUseFourColumnsForContributors - should the component return variation with 4 column
 * @returns {React.Component} - SummaryCollectionGrid component
 */
function getSummaryCollectionGridForContributors(container, shouldUseThreeColumnsForContributors, shouldUseFourColumnsForContributors) {
    if (shouldUseThreeColumnsForContributors) {
        return (React.createElement(SummaryCollectionGrid.ContributorsInThreeColumnsWithButton, { ...container }));
    }
    else if (shouldUseFourColumnsForContributors) {
        return React.createElement(SummaryCollectionGrid.ContributorsInFourColumns, { ...container });
    }
    return React.createElement(SummaryCollectionGrid.Contributors, { ...container });
}
function getIndexToInjectNewsletter(containerTemplate, containerIndex) {
    if (listForContainerToInsertNewsletter.includes(containerTemplate) &&
        indexToInjectNewsletter === -1) {
        indexToInjectNewsletter = containerIndex;
        return containerIndex;
    }
    return indexToInjectNewsletter;
}
/**
 * get the component to render for homepage bundle container
 *
 * @param {object} container - bundle container
 * @param {object} [minimalSpacingConfig] - optional object to handle options for margin/padding in VersoFeatures and Ticker
 * @param {boolean} [minimalSpacingConfig.hasVersoFeaturesReducedMargin] - bool (defaults to false) for reducing margins on verso features
 * @param {boolean} [minimalSpacingConfig.shouldUseCustomMargin] - bool (defaults to false) for adding custom margins on VersoFeatures and Ticker
 * @param {string} [minimalSpacingConfig.tickerMarginTopType] - string (defaults to small) for controlling top margin of Ticker component as supported by Ticker Component
 * @param {boolean} [hasNoTopBottomMarginOnMobile] - bool (defaults to false) for reducing margins Ticker component
 * @param {object} bundleProps - original props passed to the bundle
 * @param {number} index - the container index
 * @param {object} [additionalProps] - optional object of additional props to pass
 * @param {object} isInvertedTheme - flag to invert color
 * @param {boolean} hasConsistentSpacing - defines whether the consistent spacing is needed or not
 * @returns {ReactElement} <any>
 */
// eslint-disable-next-line complexity
function getContainerElement(container, isInvertedTheme, minimalSpacingConfig, index, bundleProps = {}, hasConsistentSpacing = false, additionalProps = {}) {
    const { buttonVariation, btnStyle, collageComponentTemplates, associatedComponentRules, gridVariationForEmbed, hasCarouselSliderPagination, hasControls, hasDiscoveryPullQuoteUnderline, hasNavigationButtonVariation, hasCarouselSliderPaginationForArticle, hasPlpFilterableContainerBackgroundColor, hasPlpFilterableContainerLightBackgroundColor, hasRelatedContainerBackgroundColor, hasVersoFeaturesIncreasedVerticalPadding, hasVersoFeaturesIncreasedVerticalPaddingTop, hasNoBottomMargin, hasNoTopBottomMarginOnMobile, hasMarginBottomMultiPackageRow, hasMarginTopMultiPackageRow, hasMediumMargin, hasReducedMargin, hasStickyLinkBanner, hasTickerSpecialTheme, hasTopAndBottomBorderQuote, hasNoBackgroundColor, hasNoStickyNavigationBanner, ProductListingCarouselContainersData, lightBgLinkBannerLayout, lowestHierarchy, includeSummaryCollageEight, isEmbedWrapperFullBleed, shouldEnableBundleComponentAnalytics, shouldHideAds, shouldHideNewsletter, shouldCheckProductInView, shouldUseConstrainedParagraph, shouldUseJumpLinksSectionStyleForEmbed, shouldUseThreeColumnsForContributors, shouldUseFourColumnsForContributors, shouldUseGridForEmbed, shouldShowAdsInMultiPackageBody, shouldUseGridWrapperForEmbed, shouldShowPaginatedButtonAtEnd, shouldShowSummaryGridButton, hideCuratedShowsList, showPriceForProduct, expVariationName, formatMessage, nativeTrendingPosition, summaryCollageOneVariation, shouldRenderForyouComponent, shouldShow100AnnivLogo } = additionalProps;
    const SummaryCollageOneComponent = SummaryCollageOne[summaryCollageOneVariation];
    // Gather related component options for 'associatedRowBehavior'
    let associatedRowBehaviour = '';
    if (associatedComponentRules) {
        const related = findComponentOptions(container, associatedComponentRules);
        associatedRowBehaviour = related?.behavior ?? associatedRowBehaviour;
    }
    // Gather collage component template options for 'shouldPreferCollectionGrid'
    const isCollageComponent = findComponentOptions(container, collageComponentTemplates);
    const shouldPreferCollectionGrid = isCollageComponent
        ? false
        : bundleProps.featureFlags.preferCollectionGrid;
    const newsletterWithoutWrapper = bundleProps.featureFlags.hasNewsletterWithoutWrapper;
    const enableCommentsCount = bundleProps.config?.commenting?.enableCommentsCount;
    const bookmark = bundleProps.config?.account?.bookmark;
    const enableCardLevelBookmark = bookmark?.enableCardLevelBookmark || false;
    const enableBookmarkDrawers = bookmark?.enableBookmarkDrawers || false;
    if (shouldEnableBundleComponentAnalytics) {
        container.shouldEnableBundleComponentAnalytics =
            shouldEnableBundleComponentAnalytics;
    }
    const isFirstProductContainer = (container) => {
        return ((ProductListingCarouselContainersData &&
            ProductListingCarouselContainersData[0]) === container);
    };
    const { newsletterId, dangerousHed = '', frequencyBadge = '' } = bundleProps.newsletter || {};
    const onIntersectionViewport = (isInViewport, unobserveIntersection) => {
        if (!isInViewport) {
            return;
        }
        unobserveIntersection();
        const entityData = {
            type: 'impression',
            newsletter_id: String(newsletterId),
            newsletter_title: dangerousHed,
            cadence: frequencyBadge,
            subject: 'verso-hp-midpage'
        };
        trackNewsletterEvent(entityData);
    };
    const getVersoFeatures = ({ container, hasConsistentSpacing, summaryCollageVariation }) => {
        if (!hasItems(container)) {
            return null;
        }
        return (React.createElement(PhotoBookmarkingProvider, { isPhotoBookmarkingEnabled: enableBookmarkDrawers, key: index },
            React.createElement(MultiPackageRow, { dataJourneyHook: dataJourneyHook, key: index, hasNoBottomMargin: true, hasNoTopMargin: !!minimalSpacingConfig.hasVersoFeaturesReducedMargin, hasMarginBottomMultiPackageRow: hasMarginBottomMultiPackageRow, hasMarginTopMultiPackageRow: hasMarginTopMultiPackageRow, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(VersoFeatures, { container: container, hasIncreasedVerticalPadding: hasVersoFeaturesIncreasedVerticalPadding, hasIncreasedVerticalPaddingTop: hasVersoFeaturesIncreasedVerticalPaddingTop, hasMinimalVerticalSpacing: minimalSpacingConfig.hasVersoFeaturesReducedMargin, lowestHierarchy: bundleProps.bundle.isDestinationBundle ? lowestHierarchy : '', shouldPreferCollectionGrid: shouldPreferCollectionGrid, shouldUseAdInCollectionGrid: bundleProps.featureFlags.shouldUseAdInCollectionGrid, shouldEnableBookmarkDrawers: enableBookmarkDrawers, shouldEnableCardLevelBookmark: enableCardLevelBookmark, shouldEnableCommentsCount: enableCommentsCount, shouldUseBookmarkV3: bundleProps.featureFlags.shouldUseBookmarkV3, isDestinationBundle: bundleProps.bundle.isDestinationBundle, summaryCollageVariation: summaryCollageVariation, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, hasReducedMargin: hasReducedMargin, hasConsistentSpacing: hasConsistentSpacing, shouldUseCustomMargin: minimalSpacingConfig.shouldUseCustomMargin }))));
    };
    switch (container.template) {
        case 'verso-features':
            // this Prop is only for experiment, please do not use it for anything else
            return shouldRenderForyouComponent && container.layout === 'Carousel'
                ? null
                : getVersoFeatures({ container, hasConsistentSpacing });
        case 'verso-native-five-feature':
        case 'verso-native-three-feature':
        case 'verso-search-features':
        case 'verso-article-and-curated-search':
        case 'verso-features-with-recs-override':
        case 'verso-multi-package-feature':
        case 'visual-story-carousel':
            return getVersoFeatures({ container, hasConsistentSpacing });
        case 'spotlight-article':
            return (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, hasReducedMargin: hasReducedMargin, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(SummarySpotlight, { ...container })));
        case 'spotlight-contributor':
            return (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, hasReducedMargin: hasReducedMargin, hasRightAndLeftMargin: true, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(SummarySpotlight.ContributorSummarySpotlight, { ...container })));
        case 'spotlight-story':
            return (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, hasReducedMargin: hasReducedMargin, hasRightAndLeftMargin: true, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(SummarySpotlight.StorySummarySpotlight, { ...container })));
        case 'verso-native-featured-item':
            return (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, hasReducedMargin: hasReducedMargin, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(SummaryCollageOneComponent, { ...container, hasPaddingOnContent: true, customNativeBackgroundColor: "colors.background.adContainer.special" })));
        case 'verso-audio-article': {
            return (React.createElement(MultiPackageRow, { key: index, className: classnames('collection-grid-row'), hasReducedMargin: hasReducedMargin, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(SummaryCollectionGrid.FourColumnsWithIcon, { ...container })));
        }
        case 'verso-features-rows': {
            return getVersoFeatures({
                container,
                hasConsistentSpacing,
                summaryCollageVariation: 'RowsWithDekAndItemsBelow'
            });
        }
        case 'verso-promobox':
        case 'solo-promo':
            return (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, hasMarginTopMultiPackageRow: hasMarginTopMultiPackageRow, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(PromoBoxWrapper, null,
                    React.createElement(PromoBox, { isInvertedTheme: isInvertedTheme, ...container, isInverted: bundleProps.bundle.isInvertedTheme }))));
        case 'verso-homepage-event-list':
            return (container.eventItems && (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(EventsListWrapper, null,
                    React.createElement(EventsList, { events: [container.eventItems] })))));
        case 'verso-homepage-tabbable-event-list':
            return (container.eventItems && (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(EventsListWrapper, null,
                    React.createElement(EventsList.SortByMonth, { events: container.eventItems, links: container.links, marquee: container.marquee, shouldUseTabs: container.shouldUseTabs, title: "" })))));
        case 'verso-homepage-event':
            return (container.eventItems && (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(EventsListWrapper, null,
                    React.createElement(EventsList.SortByMonth, { events: [container.eventItems] })))));
        case 'verso-pullquote':
            return (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(DiscoveryQuoteRow, { hasTopAndBottomBorderQuote: hasTopAndBottomBorderQuote },
                    React.createElement(DiscoveryPullQuote, { ...container, hasUnderline: hasDiscoveryPullQuoteUnderline }))));
        case 'verso-spotlight-contributor':
            return (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, hasReducedMargin: hasReducedMargin, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(ContributorSpotlight, { ...container })));
        case 'verso-summary-spotlight':
            return (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(VersoSummarySpotlight, { ...container })));
        case 'verso-native': {
            if (shouldHideAds) {
                return null;
            }
            return (React.createElement(MultiPackageRow, { dataJourneyHook: dataJourneyHook, className: "homepage__native-ad", hasReducedMargin: hasReducedMargin, hasMediumMargin: hasMediumMargin, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, hasConsistentSpacing: hasConsistentSpacing, isNativeAd: true, key: index },
                React.createElement(PaymentGateway, { group: "ads" },
                    React.createElement(Ad, { position: "promo" }))));
        }
        case 'verso-cne-video':
        case 'verso-cne-search-video': {
            const { dangerousDek, dangerousHed, isSpecialTheme, items, shouldUseBundleData, hasBottomMargin, hasGridWithMargins, hasTopMargin, shouldHideCNEVideoDek, sectionTitleVariation } = container;
            return (React.createElement(MultiPackageRow, { className: "verso-bundle-cne-embed", key: index, dataJourneyHook: dataJourneyHook, hasMediumMargin: hasMediumMargin, hasMarginTopMultiPackageRow: hasMarginTopMultiPackageRow, hasNoBottomMargin: isSpecialTheme && hasNoBottomMargin, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(CNEVideo, { dangerousHed: dangerousHed, dangerousDek: dangerousDek, isSpecialTheme: isSpecialTheme, items: items, isBundle: true, shouldUseBundleData: shouldUseBundleData, shouldHideCNEVideoDek: shouldHideCNEVideoDek, shouldHaveTeaser: true, hasBottomMargin: hasBottomMargin, hasGridWithMargins: hasGridWithMargins, hasTopMargin: hasTopMargin, videoEmbedPosition: inlineEmbedPosition, sectionTitleVariation: sectionTitleVariation })));
        }
        case 'verso-native-cne-video': {
            if (!hasItems(container)) {
                return null;
            }
            const { dangerousHed, items } = container;
            return (React.createElement(MultiPackageRow, { className: "verso-bundle-cne-embed", key: index, dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(CNEVideo, { dangerousHed: dangerousHed, items: items })));
        }
        case 'verso-related':
        case 'verso-related-list-curation': {
            return (React.createElement(MultiPackageRow, { dataJourneyHook: dataJourneyHook, key: index, className: classnames({
                    'homepage__related-row': hasRelatedContainerBackgroundColor,
                    'summary-collection-row': true
                }), hasMarginBottomMultiPackageRow: hasMarginBottomMultiPackageRow, hasMarginTopMultiPackageRow: hasMarginTopMultiPackageRow, hasNoBottomMargin: hasNoBottomMargin, hasMediumMargin: hasMediumMargin, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(SummaryCollectionRow, { ...container, hasBackgroundColor: hasRelatedContainerBackgroundColor, nativeTrendingPosition: nativeTrendingPosition, shouldTrackSnowplowRecircEvent: true })));
        }
        case 'verso-searchable-summary-collection': {
            const { dangerousHed } = container;
            return (React.createElement(MultiPackageRow, { className: "verso-searchable-summary-collection", hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(SearchableSummaryCollection, { dangerousHed: dangerousHed })));
        }
        case 'verso-summary-collection-row': {
            return (React.createElement(MultiPackageRow, { className: "verso-summary-collection-row summary-collection-row", key: index, dataJourneyHook: dataJourneyHook, hasMarginTopMultiPackageRow: hasMarginTopMultiPackageRow, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(SummaryCollectionRow, { isInvertedTheme: isInvertedTheme, ...container })));
        }
        case 'verso-summary-grid-compact': {
            if (!hasItems(container)) {
                return null;
            }
            return (React.createElement(MultiPackageRow, { className: "verso-summary-grid-compact", key: index, dataJourneyHook: dataJourneyHook, hasNoBottomMargin: hasNoBottomMargin, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(EventsListWrapper, null,
                    React.createElement(SummaryGridCompact, { ...container, hasButton: shouldShowSummaryGridButton, showPrice: showPriceForProduct }))));
        }
        case 'verso-news-feed': {
            return (React.createElement(MultiPackageRow, { key: index, className: "news-feed-row", dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(NewsFeedWrapper, null,
                    React.createElement(NewsFeed, { ...container }))));
        }
        case 'verso-river':
        case 'verso-river-list': {
            const { bundle: { containers, homepagePromoUnitOrder = [], isPodcastBundle } } = bundleProps;
            const promoUnits = homepagePromoUnitOrder
                .map((unit, index) => {
                const container = containers.find((container) => unit === container.template) || { template: unit };
                return getContainerElement(container, isInvertedTheme, minimalSpacingConfig, index, bundleProps, hasConsistentSpacing);
            })
                .filter(Boolean);
            const { dangerousHed = '', noChannelItems = false, searchUrl = '', hasRule = true } = container;
            const urlParam = new URLSearchParams(searchUrl);
            container.searchQuery = urlParam.get('q');
            return (React.createElement("div", { key: index },
                noChannelItems &&
                    (urlParam.get('q') || urlParam.get('hierarchy')) && (React.createElement(MultiPackageRow, { dataJourneyHook: dataJourneyHook, hasMediumMargin: hasMediumMargin, hasReducedMargin: hasReducedMargin, hasNoTopMargin: !!minimalSpacingConfig.hasNoTopMargin, hasNoBottomMargin: !!minimalSpacingConfig.hasNoBottomMargin, hasMarginTopMultiPackageRow: hasMarginTopMultiPackageRow, hasConsistentSpacing: hasConsistentSpacing },
                    React.createElement(MultipackageNoItemsBlock, { className: "no-items", hasRule: hasRule },
                        React.createElement("h3", null, formatMessage(translations.noStories)),
                        React.createElement("div", null,
                            React.createElement("p", null, formatMessage(translations.exploreInstead)))))),
                React.createElement(MultiPackageRow, { dataJourneyHook: dataJourneyHook, hasMediumMargin: hasMediumMargin, hasReducedMargin: hasReducedMargin, hasNoTopMargin: !!minimalSpacingConfig.hasNoTopMargin, hasNoBottomMargin: !!minimalSpacingConfig.hasNoBottomMargin, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, hasMarginTopMultiPackageRow: hasMarginTopMultiPackageRow, hasConsistentSpacing: hasConsistentSpacing }, isPodcastBundle ? (React.createElement(PodcastDetailPageSummaryRiver, { ...container, shouldShowRiverHed: true, summaryItemHedTag: "h3", hasLineAboveBelowInTitle: true, hasLineAboveBelowTitleHead: true, hasExtraTitlePadding: true, dangerousHed: dangerousHed ||
                        bundleProps.relatedArticleHed ||
                        formatMessage(translationsPodcast.relatedArticleHed), chunkSize: 3, summaryItemVariation: "SideBySideDesktopOnly", shouldHidePublishDate: false, hasRail: false, hasRule: noChannelItems ? !noChannelItems : hasRule })) : (React.createElement(SummaryRiver, { ...container, summaryItemHedTag: "h3", promoUnits: promoUnits, recircRiver: stripHTML(dangerousHed), hasRule: noChannelItems ? !noChannelItems : hasRule, shouldUseBookmarkV3: bundleProps.featureFlags.shouldUseBookmarkV3, shouldEnableBookmarkDrawers: enableBookmarkDrawers, shouldEnableCardLevelBookmark: enableCardLevelBookmark, shouldEnableCommentsCount: enableCommentsCount }))),
                !shouldShowPaginatedButtonAtEnd &&
                    getReadMoreButton(bundleProps, buttonVariation, btnStyle, hasConsistentSpacing, container)));
        }
        case 'summary-carousel': {
            if (!hasItems(container)) {
                return null;
            }
            const { items, dangerousHed, dangerousDek } = container;
            return (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, hasNoBottomMargin: hasNoBottomMargin, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(SummaryCarousel, { items: items, dangerousHed: dangerousHed, dangerousDek: dangerousDek, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, href: "/video", inputKind: "link" })));
        }
        case 'verso-native-one-river':
            if (!hasItems(container)) {
                return null;
            }
            return (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(SummaryRiver, { isMidContentAdsDisabled: bundleProps.bundle.isMidContentAdsDisabled, ...container, shouldShowRiverHed: true, hasLineAboveBelowTitleHead: true, hasRule: false, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile })));
        case 'newsletter':
        case 'newsletter-subscribe':
            if (shouldHideNewsletter) {
                return null;
            }
            return newsletterWithoutWrapper ? (React.createElement(ViewportMonitor, { onIntersectionViewport: onIntersectionViewport, observerOptions: { rootMargin: '0px' }, className: "multipackage-newsletter-viewport", key: index },
                React.createElement(ConnectedNewsletterSubscribeForm, { ...bundleProps.newsletter, sourceCode: "verso-hp-midpage", position: `container-newsletter-${index}` }))) : (React.createElement(MultiPackageRow, { className: "homepage__newsletter-row", key: index, dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(NewsletterWrapper, null,
                    React.createElement(ViewportMonitor, { onIntersectionViewport: onIntersectionViewport, observerOptions: { rootMargin: '0px' }, className: "multipackage-newsletter-viewport" },
                        React.createElement(ConnectedNewsletterSubscribeForm, { ...bundleProps.newsletter, sourceCode: "verso-hp-midpage" })))));
        case 'verso-ticker':
            return (React.createElement("div", { key: index, className: classnames('ticker-view', {
                    'ticker-view--has-special-theme': hasTickerSpecialTheme
                }), "data-journey-hook": [0, 2].includes(index) ? null : dataJourneyHook },
                React.createElement(TickerWrapper, null,
                    React.createElement(ConsumerMarketingUnit, { position: "cm-ticker" })),
                !bundleProps.featureFlags.hideTicker &&
                    getTickerView(index, bundleProps.bundle.isInvertedTheme, hasConsistentSpacing, container, minimalSpacingConfig)));
        case 'verso-link-banner': {
            let hasStickyBanner = hasStickyLinkBanner;
            if (container.layout === 'VisualCarousel') {
                hasStickyBanner = false;
            }
            return (container.hasContent && (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, hasMediumMargin: hasMediumMargin, hasNoBottomMargin: hasNoBottomMargin, hasStickyLinkBanner: hasStickyBanner, hasLightBgForLinkBanner: lightBgLinkBannerLayout === container.layout, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(LinkBanner, { ...container }))));
        }
        case 'verso-navigation-list': {
            return (container.hasContent && (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, hasMediumMargin: hasMediumMargin, hasNoBottomMargin: hasNoBottomMargin, hasStickyLinkBanner: (container.layout === 'NavigationListAnchored' ||
                    container.layout === 'NavigationListTextOverlayOnImage') &&
                    !hasNoStickyNavigationBanner, hasLightBgForLinkBanner: lightBgLinkBannerLayout === container.layout, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(NavigationList, { ...container, isInvertedTheme: isInvertedTheme, shouldTrackSnowplowEvent: true }))));
        }
        case 'verso-image-slide-show':
            return container.hasContent ? (React.createElement(MultiPackageRow, { dataJourneyHook: dataJourneyHook, key: index, hasMediumMargin: hasMediumMargin, hasMarginTopMultiPackageRow: hasMarginTopMultiPackageRow, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(ImageSlideShow, { ...container.imageSlideShowData }))) : null;
        case 'list':
            return (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(SummaryRiver, { ...container })));
        case 'verso-native-list':
            if (!hasItems(container)) {
                return null;
            }
            return (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(SummaryRiver, { ...container, summaryItemVariationList: [
                        'SideBySideCenterImageLeft',
                        'SideBySideCenterImageRight'
                    ], summaryItemClassName: "summary-item--discovery-hed-consumption-dek" })));
        case 'verso-featured-item':
            return (React.createElement(MultiPackageRow, { dataJourneyHook: dataJourneyHook, className: "verso-featured-item-row", key: index, hasReducedMargin: hasReducedMargin, hasNoTopMargin: !!minimalSpacingConfig.hasVersoFeaturesReducedMargin, hasNoBottomMargin: hasNoBottomMargin, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(SummaryCollageOneComponent, { ...container, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile })));
        case 'verso-section-jump-links':
            return (React.createElement(MultiPackageRow, { key: index, className: "verso-embed-row verso-section-jump-links-row", dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing }, getEmbedView(container, {
                shouldUseGridForEmbed,
                shouldUseConstrainedParagraph,
                shouldUseJumpLinksSectionStyleForEmbed,
                shouldUseGridWrapperForEmbed,
                gridVariationForEmbed
            })));
        case 'verso-collection-grid':
        case 'verso-native-two-river':
            if (!hasItems(container)) {
                return null;
            }
            return (React.createElement(MultiPackageRow, { key: index, className: "collection-grid-row", dataJourneyHook: dataJourneyHook, hasNoBottomMargin: !!minimalSpacingConfig.hasNoBottomMargin, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(SummaryCollectionGrid, { ...container })));
        case 'verso-contributors':
            return (React.createElement(MultiPackageRow, { key: index, className: classnames('collection-grid-row', associatedRowBehaviour), hasReducedMargin: hasReducedMargin, hasNoBottomMargin: hasNoBottomMargin, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, hasConsistentSpacing: hasConsistentSpacing }, getSummaryCollectionGridForContributors(container, shouldUseThreeColumnsForContributors, shouldUseFourColumnsForContributors)));
        case 'verso-issue-feature':
            return (React.createElement(MultiPackageRow, { dataJourneyHook: dataJourneyHook, key: index, className: classnames('verso-issue-feature-row', {
                    [associatedRowBehaviour]: includeSummaryCollageEight
                }), hasReducedMargin: hasReducedMargin, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(VersoIssueFeature, { ...container })));
        case 'verso-cm-unit':
            return (React.createElement(MultiPackageRow, { key: index, className: "cm-unit-row", dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(CMUnitWrapper, null,
                    React.createElement(ConsumerMarketingUnit, { position: "homepage-mid-content" }))));
        case 'verso-cta-link':
            if (!container.hasLink) {
                return null;
            }
            switch (container.layout) {
                case 'hasMultiPackageRowWrapper':
                    return (React.createElement(MultiPackageRow, { key: index, alignItem: "center", dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing },
                        React.createElement(UtilityButton, { ...container, btnStyle: "outlined" })));
                default:
                    return React.createElement(UtilityButton, { ...container, btnStyle: "outlined" });
            }
        case 'verso-curated-shows':
        case 'verso-tags-list':
            if (!hasItems(container)) {
                return null;
            }
            return (React.createElement(MultiPackageRow, { key: index, className: "curated-shows-row", dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(CuratedShowsSection, { ...container, hideCuratedShowsList: hideCuratedShowsList })));
        case 'verso-native-product': {
            if (!hasItems(container)) {
                return null;
            }
            const { items, dangerousHed } = container;
            return (React.createElement(MultiPackageRow, { className: "product__list", key: index, dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(VersoNativeProduct, { items: items, dangerousHed: dangerousHed, isSponsoredAffiliateLinksEnabled: bundleProps.bundle.isSponsoredAffiliateLinksEnabled })));
        }
        case 'verso-native-product-carousel': {
            if (!hasItems(container)) {
                return null;
            }
            const { items, dangerousHed } = container;
            return (React.createElement(MultiPackageRow, { className: "product__carousel", key: index, dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(VersoNativeProductCarousel, { items: items, dangerousHed: dangerousHed, isSponsoredAffiliateLinksEnabled: bundleProps.bundle.isSponsoredAffiliateLinksEnabled, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, isFirstProductListingContainer: isFirstProductContainer(container) &&
                        !bundleProps.bundle.hasDefaultAffiliateDisclaimer, affiliateDisclaimer: bundleProps.bundle.affiliateDisclaimer, showDisclaimer: bundleProps.bundle.showDisclaimer })));
        }
        case 'verso-live-stream':
            return (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(LiveStreamEmbed, { ...container })));
        case 'verso-topics-list':
            return (React.createElement(MultiPackageRow, { key: index, hasReducedMargin: hasReducedMargin, dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(HorizontalList, { ...container })));
        case 'verso-fifty-fifty':
        case 'verso-search-fifty-fifty':
            return (React.createElement(MultiPackageRow, { dataJourneyHook: dataJourneyHook, className: "homepage__fifty-fifty-row", key: index, hasNoTopMargin: !!minimalSpacingConfig.hasVersoFeaturesReducedMargin, hasNoBottomMargin: !!minimalSpacingConfig.hasNoBottomMargin, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(SummaryCollageFiftyFifty, { ...container, hasConsistentSpacing: hasConsistentSpacing, Ad: Ad })));
        case 'verso-mid-content-ad':
            if (shouldHideAds) {
                return null;
            }
            return (React.createElement("div", { "data-journey-hook": dataJourneyHook, key: index, className: classnames('ad-container', {
                    'ad-container-reduced-margin': hasReducedMargin
                }) },
                React.createElement(PaymentGateway, { group: "ads" },
                    React.createElement(Ad, { position: "mid-content", shouldHoldSpace: true, shouldDisplayLabel: true }))));
        case 'verso-embed':
            return (React.createElement(MultiPackageRow, { key: index, className: "verso-embed-row", dataJourneyHook: dataJourneyHook, hasMediumMargin: hasMediumMargin, isInvertedTheme: isInvertedTheme, hasMarginTopMultiPackageRow: hasMarginTopMultiPackageRow, hasConsistentSpacing: hasConsistentSpacing }, getEmbedView(container, {
                shouldUseGridForEmbed,
                shouldUseConstrainedParagraph,
                shouldShowAdsInMultiPackageBody,
                shouldUseGridWrapperForEmbed,
                gridVariationForEmbed,
                isEmbedWrapperFullBleed
            })));
        case 'verso-subtopic-discovery':
        case 'verso-subtopics':
            if (!hasItems(container)) {
                return null;
            }
            return (React.createElement(MultiPackageRow, { key: index, className: "verso-subtopic-discovery-row", hasMarginBottomMultiPackageRow: hasMarginBottomMultiPackageRow, hasMarginTopMultiPackageRow: hasMarginTopMultiPackageRow, dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(SubTopicDiscoveryWrapper, null,
                    React.createElement(SubtopicDiscovery, { ...container }))));
        case 'verso-popin':
            return (React.createElement("div", { id: container.variation, "data-journey-hook": dataJourneyHook }));
        case 'verso-filterable-summary-list':
            return (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, className: classnames({
                    'homepage__plp-filterable-row': hasPlpFilterableContainerBackgroundColor && !container?.isGrid
                }), hasNoTopMargin: !!minimalSpacingConfig.hasNoTopMargin, hasNoBottomMargin: !!minimalSpacingConfig.hasNoBottomMargin, hasIncreasedVerticalPadding: true, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(VersoFilterableSummaryList, { ...container, hasCarouselSliderPagination: hasCarouselSliderPagination, isFirstProductListingContainer: isFirstProductContainer(container) &&
                        !bundleProps.bundle.hasDefaultAffiliateDisclaimer, affiliateDisclaimer: bundleProps.bundle.affiliateDisclaimer, showDisclaimer: bundleProps.bundle.showDisclaimer, shouldEnableBookmarkDrawers: enableBookmarkDrawers, shouldEnableCardLevelBookmark: enableCardLevelBookmark, shouldEnableCommentsCount: enableCommentsCount, containerIndex: getIndexToInjectNewsletter(container.template, index) })));
        case 'verso-article-filterable-feature':
            return (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(VersoFilterableSummaryList, { ...container, hasCarouselSliderPagination: hasCarouselSliderPaginationForArticle, containerIndex: getIndexToInjectNewsletter(container.template, index) })));
        case 'verso-plp-multisearch-filterable-feature':
        case 'verso-plp-filterable-feature':
            return (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, className: classnames({
                    'homepage__plp-filterable-row': hasPlpFilterableContainerBackgroundColor && !container?.isGrid
                }), hasPlpFilterableContainerLightBackgroundColor: hasPlpFilterableContainerLightBackgroundColor, hasNoTopMargin: !!minimalSpacingConfig.hasNoTopMargin, hasNoBottomMargin: !!minimalSpacingConfig.hasNoBottomMargin, hasMediumMargin: hasMediumMargin, hasIncreasedVerticalPadding: true, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(VersoFilterableSummaryList, { ...container, hasControls: hasControls, hasCarouselSliderPagination: hasCarouselSliderPagination, hasNavigationButtonVariation: hasNavigationButtonVariation, shouldCheckProductInView: shouldCheckProductInView, expVariationName: expVariationName, isFirstProductListingContainer: isFirstProductContainer(container) &&
                        !bundleProps.bundle.hasDefaultAffiliateDisclaimer, affiliateDisclaimer: bundleProps.bundle.affiliateDisclaimer, showDisclaimer: bundleProps.bundle.showDisclaimer, containerIndex: getIndexToInjectNewsletter(container.template, index) })));
        case 'verso-plp-curated-visual':
            return (React.createElement(MultiPackageRow, { key: index, hasNoBottomMargin: hasNoBottomMargin, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(ProductVisual, { ...container, isFirstProductListingContainer: isFirstProductContainer(container) &&
                        !bundleProps.bundle.hasDefaultAffiliateDisclaimer, showDisclaimer: bundleProps.bundle.showDisclaimer })));
        case 'verso-plp-manual-curated':
        case 'verso-plp-search-curated':
            return (React.createElement(MultiPackageRow, { key: index, hasPlpFilterableContainerLightBackgroundColor: !hasNoBackgroundColor &&
                    container.templateLayout === 'ContentCarousel', hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(VersoPlpCurated, { ...container, hasCarouselSliderPagination: hasCarouselSliderPagination, isFirstProductListingContainer: isFirstProductContainer(container) &&
                        !bundleProps.bundle.hasDefaultAffiliateDisclaimer, affiliateDisclaimer: bundleProps.bundle.affiliateDisclaimer, showDisclaimer: bundleProps.bundle.showDisclaimer, containerIndex: getIndexToInjectNewsletter(container.template, index) })));
        case 'verso-pim-collection':
            return (React.createElement(MultiPackageRow, { className: "verso-pim-collection-row", key: index, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(VersoCommerceCollectionCurated, { container: container, pimCollectionBundleLinks: bundleProps.bundle.pimCollectionBundleLinks, isMobileView: bundleProps.bundle.isMobileView, shouldHideFilterComponent: bundleProps.bundle.pimCollectionHiddenFilter, isFirstProductListingContainer: isFirstProductContainer(container) &&
                        !bundleProps.bundle.hasDefaultAffiliateDisclaimer, affiliateDisclaimer: bundleProps.bundle.affiliateDisclaimer, showDisclaimer: bundleProps.bundle.showDisclaimer, containerIndex: getIndexToInjectNewsletter(container.template, index) })));
        case 'verso-full-bleed-banner':
            return (React.createElement(MultiPackageRow, { key: index, hasNoBottomMargin: hasNoBottomMargin, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(FullBleedBanner, { ...container })));
        case 'verso-best-stories-package':
        case 'verso-hero-curated-feature':
            if (!hasItems(container)) {
                return null;
            }
            return (React.createElement(MultiPackageRow, { key: index, hasMarginBottomMultiPackageRow: hasMarginBottomMultiPackageRow, hasMarginTopMultiPackageRow: hasMarginTopMultiPackageRow, className: "verso-best-stories-package", hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(BestStories, { ...container, shouldEnableBookmarkDrawers: enableBookmarkDrawers, shouldEnableCardLevelBookmark: enableCardLevelBookmark, shouldEnableCommentsCount: enableCommentsCount })));
        case 'verso-in-page-marketing-newsletter':
            if (container.isPositionBottom) {
                return null;
            }
            return (React.createElement(MultiPackageRow, { className: "verso-in-page-marketing-newsletter-row", key: index, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(ViewportMonitor, { onIntersectionViewport: onIntersectionViewport, observerOptions: { rootMargin: '0px' }, className: "multipackage-newsletter-viewport" },
                    React.createElement(ConnectedNewsletterSubscribeForm, { ...container, sourceCode: "verso-hp-midpage", position: `container-newsletter-${index}`, key: index, newsletterType: "impact-newsletter" }))));
        case 'verso-celebrated-entrypoint':
            if (!container.asset) {
                return null;
            }
            return (React.createElement(MultiPackageRow, { key: index, dataJourneyHook: dataJourneyHook, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(CelebratedEntryPoint, { ...container })));
        case 'featured-contributor':
            return (React.createElement(MultiPackageRow, { key: index, hasNoBottomMargin: true, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(ContributorHeader, { ...container }),
                React.createElement(SummaryCollageFiftyFifty, { ...container, summaryItemStickTopThreshold: minThresholds.xl, hasConsistentSpacing: hasConsistentSpacing })));
        case 'all-fictions':
            return (React.createElement(ContributorAllFiction, { ...container, key: index, pageSize: container.limit, pageNumber: bundleProps.bundle.paginatedPage }));
        case 'podcast-articles':
            return React.createElement(SummaryAudioCollection, { ...container, key: index });
        case 'articles-about-author':
        case 'more-by-author':
            return (React.createElement(ContributorCollectionItems, { ...container, key: index, pageNumber: bundleProps.bundle.paginatedPage }));
        case 'verso-flat-package':
        case 'verso-focus-package':
        case 'verso-puzzles-games-package':
            return (React.createElement(MultiPackageRow, { key: index, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(SmartComponent, { index: index, ...container })));
        case 'verso-top-story-package':
            return (React.createElement(React.Fragment, null,
                React.createElement(TopStory, { key: index, index: index, ...(shouldShow100AnnivLogo ? { shouldShow100AnnivLogo } : {}), ...container }),
                React.createElement(JourneyTicker, null)));
        case 'verso-for-you-package':
            if (shouldRenderForyouComponent) {
                return (React.createElement(MultiPackageRow, { key: index, hasConsistentSpacing: hasConsistentSpacing },
                    React.createElement(ConnectedErrorBoundary, null,
                        React.createElement(ForYou, { index: index, ...container }))));
            }
            return null;
        case 'trending-curated':
        case 'trending-collection':
            return (React.createElement(MultiPackageRow, { key: index, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(SummaryCollectionGrid.ThreeColumns, { shouldHideDangerousDek: true, shouldHideContributors: true, hasItemsRule: false, ...container })));
        case 'verso-category-feature-container':
            return (React.createElement(MultiPackageRow, { key: index, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(SummaryCollectionGrid.FourColumns, { shouldHideDangerousDek: false, shouldHideDangerousHedOfSummaryItem: true, shouldUseArrowIconInSummaryItemDek: true, isCategoryFeatureContainer: true, ...container })));
        case 'cartoons':
            return (React.createElement(MultiPackageRow, { key: index, hasConsistentSpacing: hasConsistentSpacing },
                React.createElement(GalleryCarousel, { ...container, carouselPlacedIn: "bundle" })));
        case 'verso-collage':
            return React.createElement(CollageEnvironment, { key: index, ...container });
        case 'verso-issue-explorer':
            return React.createElement(IssueExplorer, { key: index, ...container });
        default:
            return null;
    }
}
/**
 * Render a list of multi-package containers.
 *
 * @param {object} props - React props
 * @param {number} [props.adsLimit] - Optional prop that sets the number of ads to be shown if ads should be injected.
 * @param {object} [props.adInsertionRules] - Optional prop that determines where and frequency of ads injected.
 * @param {string} [props.buttonVariation] - prop to set the button styling
 * @param {string} [props.btnStyle] - Prop used to set the button styling (filled or otulined or text)
 * @param {Array<object>} props.containers - A list of container objects.
 * @param {string} [props.gridVariationForEmbed] - Sets the grid variation as wrapper for verso-embed
 * @param {Array<object>} props.hasCarouselSliderPagination - Optional prop for slider or bullet pagination.
 * @param {boolean} props.hasControls - Optional prop for product carousel navigation buttons
 * @param {boolean} props.shouldUseCustomMargin - Optional prop for adding custom margin
 * @param {boolean} props.hasNavigationButtonVariation - Optional prop for product carousel variation
 * @param {boolean} props.hasCarouselSliderPaginationForArticle - Optional prop for slider or bullet pagination on article
 * @param {boolean} [props.hasDiscoveryPullQuoteUnderline] - optional discovery pull quotes has underline
 * @param {boolean} [props.hasNoBottomMargin] - Optional prop for bottom margin setting
 * @param {boolean} [props.hasNoTopMargin] - Optional prop for top margin setting
 * @param {boolean} [props.hasPlpFilterableContainerBackgroundColor] - Optional prop for verso-plp-filterable-feature container background
 * @param {boolean} [props.hasPlpFilterableContainerLightBackgroundColor] - Optional prop for verso-plp-filterable-feature container grey background
 * @param {boolean} [props.hasRelatedContainerBackgroundColor] - Optional prop for verso-related container background
 * @param {boolean} [props.hasTickerSpecialTheme] - Optional prop for ticker special theme
 * @param {boolean} [props.hasMarginBottomMultiPackageRow] - Optional prop. different margin bottom  for lg, md, sm device
 * @param {boolean} [props.hasMarginTopMultiPackageRow] - Optional prop. different margin top  for lg, md, sm device
 * @param {boolean} [props.hasMediumMargin] - Optional. Set to `true` for 32px margin spacing
 * @param {boolean} [props.hasReducedMargin] - Optional. Set to `true` for no margin spacing
 * @param {boolean} [props.hasStickyLinkBanner] - Optional. Set to `true` for LinkBanner to be sticky
 * @param {boolean} [props.hasTopAndBottomBorderQuote] - Optional. Set to `true` for no margin spacing
 * @param {boolean} [props.hasVersoFeaturesReducedMargin] - optional prop to have tighter vertical spacing between rows
 * @param {boolean} [props.hasVersoFeaturesIncreasedVerticalPadding] - Optional.  Set to true to include Row spacing on MultiPackages containers
 * @param {boolean} [props.hasVersoFeaturesIncreasedVerticalPaddingTop] - Optional.  Set to true to include Row spacing on MultiPackages containers
 * @param {string} [props.lightBgLinkBannerLayout] - Optional prop to set light background color for provided link banner layout
 * @param {string} [props.lowestHierarchy] - optional location hierarchy to pass into VersoFeatures
 * @param {number} [props.nativeTrendingPosition] - optional value to position trending native ad
 * @param {string} [props.newsletterType] - Optional string to set the newLetterType
 * @param {Array<object>} [props.collageComponentTemplates] - optional array of components that should display as collages
 * @param {Array<object>} [props.associatedComponentRules] - optional array of object related components
 * @param {object} props.bundleProps - Bundle props needed for rendering nested containers. TODO - remove this prop (refactoring needed) - (**more context is needed about this TODO**)
 * @param {string} [props.multiPackageCustomClassName] - optional className for the multipackage container
 * @param {bool} [props.shouldAddHjIgnoreAttribute] - optional to add hot jar ignore attribute at parent level.
 * @param {bool} [props.shouldEnableBundleComponentAnalytics] - feature flag to append data-section-title attribute for analytics
 * @param {bool} [props.shouldHideAds] - feature flag to hide native ads
 * @param {bool} [props.shouldPushProductIds] - prop used to enable dataLayer
 * @param {bool} [props.shouldHideNewsletter] - feature flag to hide Newsletter sign up form
 * @param {bool} [props.shouldShow100AnnivLogo] - optional flag to show TNY 100th anniversary logo
 * @param {bool} [props.shouldShowPaginatedButtonAtEnd] - optional to control placement of read more or next page button
 * @param {bool} [props.shouldShowSummaryGridButton] - optional to control placement of read more in Summary Grid Component
 * @param {bool} [props.shouldUseConstrainedParagraph] - constrain width of <p> tag in verso-embed
 * @param {bool} [props.shouldUseJumpLinksSectionStyleForEmbed] - Should update the styling of a verso embed
 * @param {bool} [props.shouldUseGridForEmbed] - Use Grid wrapper for verso-embed
 * @param {bool} [props.shouldUseGridWrapperForEmbed] - Use GridNarrowContent as wrapper for verso-embed
 * @param {bool} [props.shouldUseThreeColumnsForContributors] - feature flag to use three columns variation for verso-contributors
 * @param {bool} [props.shouldUseFourColumnsForContributors] - feature flag to use four columns variation for verso-contributors
 * @param {bool} [props.shouldShowAdsInMultiPackageBody] - optional to show ads in body of multipackage
 * @param {bool} [props.isMidContentAdsDisabled] - optional to show midcontent ads in multipackage
 * @param {bool} [props.isEmbedWrapperFullBleed] - optional to apply full bleed style for embedWrapper
 * @param {bool} [props.shouldCheckProductInView] - Optional flag to change product view in Product Carousel
 * @param {bool} [props.hideCuratedShowsList] - hides CuratedShowsListWrapper component when true, shows it when false
 * @param {bool} [props.showPriceForProduct] - optional to show prices of products in the multipackage
 * @param {string} [props.expVariationName] - Optional to pass variation name to GTM layer
 * @param {bool} [props.isInvertedTheme] - flag to invert color
 * @param {bool} [props.hasNoTopBottomMarginOnMobile] - flag to not show top and bottom margin for mobile view for multi-package containers
 * @param {string} [props.summaryCollageOneVariation] - Variation for SummaryCollageOne
 * @param {bool} [props.hasNoBackgroundColor] - Optional flag for not showing background color for versoplpcurated container
 * @param {bool} [props.hasNoStickyNavigationBanner] - Optional flag for not showing navigation list banner sticky
 * @param {bool} [props.hasEvenSpacingMultiPackageRow] - flag for setting even spacing between child packages
 * @param {bool} [props.hasConsistentSpacing] - defines whether the consistent spacing is needed or not
 * @param {bool} [props.shouldRenderForyouComponent] - To render Foryou Component
 *
 * @returns {ReactElement} <div>
 */
const MultiPackages = ({ associatedComponentRules, bundleProps, isInvertedTheme = false, buttonVariation, btnStyle, collageComponentTemplates, hasDiscoveryPullQuoteUnderline, containers, gridVariationForEmbed = 'NarrowContentWithWideAdRail', hasCarouselSliderPagination, hasCarouselSliderPaginationForArticle = false, shouldPushProductIds = false, hasControls, shouldUseCustomMargin, hasNoBackgroundColor = false, hasNoStickyNavigationBanner = false, lightBgLinkBannerLayout, hasNavigationButtonVariation, hasNoBottomMargin = false, hasNoTopBottomMarginOnMobile = false, hasNoTopMargin = false, hasPlpFilterableContainerBackgroundColor = false, hasPlpFilterableContainerLightBackgroundColor = false, hasRelatedContainerBackgroundColor = true, hasTickerSpecialTheme = false, hasTopAndBottomBorderQuote = false, hasVersoFeaturesReducedMargin = false, hasVersoFeaturesIncreasedVerticalPadding = false, hasVersoFeaturesIncreasedVerticalPaddingTop = false, hasMarginBottomMultiPackageRow = false, hasMarginTopMultiPackageRow = true, hasEvenSpacingMultiPackageRow = false, hasMediumMargin = false, hasReducedMargin = false, hasStickyLinkBanner, isMidContentAdsDisabled = false, isEmbedWrapperFullBleed = false, hasConsistentSpacing, multiPackageCustomClassName, newsletterType = 'impact-newsletter', shouldAddHjIgnoreAttribute, shouldEnableBundleComponentAnalytics, shouldHideAds = false, shouldHideNewsletter = false, shouldUseConstrainedParagraph = false, shouldUseJumpLinksSectionStyleForEmbed = false, shouldUseGridForEmbed = true, shouldUseGridWrapperForEmbed = false, shouldUseThreeColumnsForContributors = false, shouldUseFourColumnsForContributors = false, lowestHierarchy, shouldCheckProductInView, shouldShow100AnnivLogo = false, shouldShowAdsInMultiPackageBody = false, shouldShowPaginatedButtonAtEnd = true, shouldShowSummaryGridButton = true, hideCuratedShowsList = false, showPriceForProduct = false, expVariationName, nativeTrendingPosition, summaryCollageOneVariation = 'SingleFeature', shouldRenderForyouComponent }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'MultiPackages'
        });
    }, []);
    React.useEffect(() => {
        if (bundleProps.bundle &&
            bundleProps.bundle.containers &&
            bundleProps.bundle.containers.length &&
            shouldPushProductIds) {
            trackingProducts(bundleProps.bundle.containers[0].items);
        }
    }, [bundleProps, shouldPushProductIds]);
    const minimalSpacingConfig = {
        hasVersoFeaturesReducedMargin,
        hasReducedMargin,
        hasMediumMargin,
        hasNoBottomMargin,
        hasNoTopMargin,
        shouldUseCustomMargin
    };
    const includeSummaryCollageEight = containers.some((container) => findComponentOptions(container, collageComponentTemplates) &&
        container.items.length === 8);
    const ProductListingCarouselContainersData = ProductListingItems(containers);
    const { formatMessage } = useIntl();
    // Note: 'additionalProps' is here to allow various extra params to be
    // passed to 'getContainerElement' without triggering the linter param
    // limit errors
    const additionalProps = {
        buttonVariation,
        btnStyle,
        collageComponentTemplates,
        hasDiscoveryPullQuoteUnderline,
        associatedComponentRules,
        gridVariationForEmbed,
        hasCarouselSliderPagination,
        hasControls,
        lightBgLinkBannerLayout,
        hasNavigationButtonVariation,
        hasCarouselSliderPaginationForArticle,
        hasNoTopBottomMarginOnMobile,
        hasPlpFilterableContainerBackgroundColor,
        hasPlpFilterableContainerLightBackgroundColor,
        hasRelatedContainerBackgroundColor,
        hasTopAndBottomBorderQuote,
        hasVersoFeaturesIncreasedVerticalPadding,
        hasVersoFeaturesIncreasedVerticalPaddingTop,
        hasNoBackgroundColor,
        hasNoStickyNavigationBanner,
        hasNoBottomMargin,
        hasMarginBottomMultiPackageRow,
        hasMarginTopMultiPackageRow,
        hasMediumMargin,
        hasReducedMargin,
        hasStickyLinkBanner,
        hasTickerSpecialTheme,
        includeSummaryCollageEight,
        isEmbedWrapperFullBleed,
        isMidContentAdsDisabled,
        ProductListingCarouselContainersData,
        shouldCheckProductInView,
        shouldEnableBundleComponentAnalytics,
        shouldHideAds,
        shouldHideNewsletter,
        shouldUseConstrainedParagraph,
        shouldUseGridForEmbed,
        shouldUseJumpLinksSectionStyleForEmbed,
        shouldUseGridWrapperForEmbed,
        shouldUseThreeColumnsForContributors,
        shouldUseFourColumnsForContributors,
        lowestHierarchy,
        shouldShow100AnnivLogo,
        shouldShowAdsInMultiPackageBody,
        shouldShowPaginatedButtonAtEnd,
        shouldShowSummaryGridButton,
        hideCuratedShowsList,
        showPriceForProduct,
        expVariationName,
        formatMessage,
        nativeTrendingPosition,
        summaryCollageOneVariation,
        shouldRenderForyouComponent
    };
    const paginatedContainer = containers.find(({ layout }) => RIVER_LAYOUTS[layout]?.isPaginated);
    const checkNewsLetterContainer = containers.find(({ template, isPositionBottom }) => template === 'verso-in-page-marketing-newsletter' && isPositionBottom);
    const showFooterAdPadding = containers.some((container) => container.template === 'verso-plp-filterable-feature' && container.isGrid);
    return (React.createElement(MultiPackageContainer, { customClass: multiPackageCustomClassName, className: `multi-packages${multiPackageCustomClassName ? ` ${multiPackageCustomClassName}` : ''}`, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, hasMarginBottomMultiPackageRow: hasMarginBottomMultiPackageRow, hasMarginTopMultiPackageRow: hasMarginTopMultiPackageRow, hasEvenSpacingMultiPackageRow: hasEvenSpacingMultiPackageRow, showFooterAdPadding: showFooterAdPadding, "data-hj-ignore-attributes": shouldAddHjIgnoreAttribute ? '' : null, hasConsistentSpacing: hasConsistentSpacing },
        containers.map((container, index) => getContainerElement(container, isInvertedTheme, minimalSpacingConfig, index, bundleProps, hasConsistentSpacing, additionalProps)),
        paginatedContainer && shouldShowPaginatedButtonAtEnd && (React.createElement(MultiPackageReadMore, { key: "paginated", "data-test-id": "read-more-button-end", hasConsistentSpacing: hasConsistentSpacing },
            React.createElement(PaginationRow, { currentPage: bundleProps.bundle.paginatedPage, totalResults: paginatedContainer.totalResults, limit: paginatedContainer.limit, btnStyle: btnStyle, buttonVariation: buttonVariation, filter: paginatedContainer.filter, searchQuery: paginatedContainer.searchQuery, shouldEnableBundleComponentAnalytics: paginatedContainer.shouldEnableBundleComponentAnalytics }))),
        checkNewsLetterContainer && (React.createElement(MultiPackageRow, { className: classnames('verso-in-page-marketing-newsletter-row', {
                'newletter-container-layout': true
            }), hasNoBottomMargin: !!minimalSpacingConfig.hasNoBottomMargin, hasConsistentSpacing: hasConsistentSpacing },
            React.createElement(ConnectedNewsletterSubscribeForm, { ...checkNewsLetterContainer, sourceCode: "verso-hp-midpage", position: "container-newsletter", newsletterType: newsletterType })))));
};
MultiPackages.propTypes = {
    associatedComponentRules: PropTypes.arrayOf(PropTypes.object),
    btnStyle: PropTypes.oneOf(['filled', 'outlined', 'text']),
    bundleProps: PropTypes.object,
    buttonVariation: PropTypes.string,
    collageComponentTemplates: PropTypes.arrayOf(PropTypes.object),
    containers: PropTypes.array,
    expVariationName: PropTypes.string,
    gridVariationForEmbed: PropTypes.string,
    hasCarouselSliderPagination: PropTypes.bool,
    hasCarouselSliderPaginationForArticle: PropTypes.bool,
    hasConsistentSpacing: PropTypes.bool,
    hasControls: PropTypes.bool,
    hasDiscoveryPullQuoteUnderline: PropTypes.bool,
    hasEvenSpacingMultiPackageRow: PropTypes.bool,
    hasMarginBottomMultiPackageRow: PropTypes.bool,
    hasMarginTopMultiPackageRow: PropTypes.bool,
    hasMediumMargin: PropTypes.bool,
    hasNavigationButtonVariation: PropTypes.bool,
    hasNoBackgroundColor: PropTypes.bool,
    hasNoBottomMargin: PropTypes.bool,
    hasNoStickyNavigationBanner: PropTypes.bool,
    hasNoTopBottomMarginOnMobile: PropTypes.bool,
    hasNoTopMargin: PropTypes.bool,
    hasPlpFilterableContainerBackgroundColor: PropTypes.bool,
    hasPlpFilterableContainerLightBackgroundColor: PropTypes.bool,
    hasReducedMargin: PropTypes.bool,
    hasRelatedContainerBackgroundColor: PropTypes.bool,
    hasStickyLinkBanner: PropTypes.bool,
    hasTickerSpecialTheme: PropTypes.bool,
    hasTopAndBottomBorderQuote: PropTypes.bool,
    hasVersoFeaturesIncreasedVerticalPadding: PropTypes.bool,
    hasVersoFeaturesIncreasedVerticalPaddingTop: PropTypes.bool,
    hasVersoFeaturesReducedMargin: PropTypes.bool,
    hideCuratedShowsList: PropTypes.bool,
    isEmbedWrapperFullBleed: PropTypes.bool,
    isInvertedTheme: PropTypes.bool,
    isMidContentAdsDisabled: PropTypes.bool,
    lightBgLinkBannerLayout: PropTypes.string,
    lowestHierarchy: PropTypes.string,
    multiPackageCustomClassName: PropTypes.string,
    nativeTrendingPosition: PropTypes.number,
    newsletterType: PropTypes.string,
    shouldAddHjIgnoreAttribute: PropTypes.bool,
    shouldCheckProductInView: PropTypes.bool,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldHideAds: PropTypes.bool,
    shouldHideNewsletter: PropTypes.bool,
    shouldPushProductIds: PropTypes.bool,
    shouldRenderForyouComponent: PropTypes.bool,
    shouldShow100AnnivLogo: PropTypes.bool,
    shouldShowAdsInMultiPackageBody: PropTypes.bool,
    shouldShowPaginatedButtonAtEnd: PropTypes.bool,
    shouldShowSummaryGridButton: PropTypes.bool,
    shouldUseConstrainedParagraph: PropTypes.bool,
    shouldUseCustomMargin: PropTypes.bool,
    shouldUseFourColumnsForContributors: PropTypes.bool,
    shouldUseGridForEmbed: PropTypes.bool,
    shouldUseGridWrapperForEmbed: PropTypes.bool,
    shouldUseJumpLinksSectionStyleForEmbed: PropTypes.bool,
    shouldUseThreeColumnsForContributors: PropTypes.bool,
    showPriceForProduct: PropTypes.bool,
    summaryCollageOneVariation: PropTypes.string,
    tickerMarginTopType: PropTypes.oneOf(['small', 'none', 'large'])
};
MultiPackages.displayName = 'MultiPackages';
module.exports = MultiPackages;
module.exports.getEmbedView = getEmbedView;
module.exports.getTickerView = getTickerView;
//# sourceMappingURL=MultiPackages.js.map

/***/ }),

/***/ 67275:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { BREAKPOINTS, ZINDEX_MAP } = __webpack_require__(96472);
const { applyGridSpacing, cssVariablesGrid } = __webpack_require__(1123);
const { calculateSpacing, minScreen, maxScreen, minMaxScreen, getColorToken, getTypographyStyles } = __webpack_require__(26865);
const { getSectionSpacingStyling } = __webpack_require__(16800);
const Button = __webpack_require__(73730);
const { universalGridCore } = __webpack_require__(89085);
const Row = __webpack_require__(66657);
const { RowWrapper } = __webpack_require__(20139);
const Grid = __webpack_require__(86659);
const { GridItem } = __webpack_require__(40653);
const { SummaryRiverSection } = __webpack_require__(15641);
const { SummaryCollageOneGridWithMargin } = __webpack_require__(52679);
const { SectionTitleHed } = __webpack_require__(33500);
const { EmbedBody } = __webpack_require__(99585);
const { FeaturesRow } = __webpack_require__(20659);
const { TickerWrapper: TickerInnerWrapper } = __webpack_require__(28934);
const { TopStoryWrapper } = __webpack_require__(26805);
const commonStyle = `
  ${cssVariablesGrid()}
  ${applyGridSpacing('padding')}

  margin: 0 auto;
  width: 100%;
  max-width: ${BREAKPOINTS.xxl};
`;
const applySectionJumpLinkStyle = (theme) => {
    return `
    background: ${getColorToken(theme, 'colors.consumption.body.inverted.display-texture')};
    ${minScreen(BREAKPOINTS.md)} {
      width: ${BREAKPOINTS.md};
      padding: ${calculateSpacing(3)} ${calculateSpacing(9)} ${calculateSpacing(5)} ${calculateSpacing(9)};
    }
    padding: ${calculateSpacing(2)} ${calculateSpacing(5)} ${calculateSpacing(3.5)} ${calculateSpacing(5)};
    margin: auto;
    div {
      div {
        h1 {
          text-align: center;
        }
        div {
          a {
            font-family: Izmir, helvetica, sans-serif;
            font-style: normal;
            line-height: ${calculateSpacing(2.4, 'rem')};
            font-size: ${calculateSpacing(2)};
            &:not(.button):link,
            &:not(.button):visited {
              color: rgb(0, 0, 0);
            }
          }
          display: grid;
          ${minScreen(BREAKPOINTS.md)} {
            grid-template-columns: 1fr 1fr 1fr;
            grid-row-gap: ${calculateSpacing(1.5)};
          }
          grid-template-columns: 1fr 1fr;
          grid-row-gap: ${calculateSpacing(1)};
        }
      }
    }
  }
  `;
};
const MultiPackageBaseRow = styled(Row).withConfig({
    displayName: 'MultiPackageBaseRow'
}) `
  &:first-child,
  & ~ & {
    ${({ hasMarginTopMultiPackageRow }) => {
    if (!hasMarginTopMultiPackageRow) {
        return `margin-top: 0;`;
    }
    return '';
}}
  }

  ${({ alignItem }) => alignItem &&
    `
    && {
      text-align: ${alignItem};
    }
  `}

  ${({ hasRightAndLeftMargin }) => {
    if (hasRightAndLeftMargin) {
        return `
        ${minScreen(BREAKPOINTS.md)} {
          padding: ${calculateSpacing(0)} ${calculateSpacing(8)};
        }`;
    }
    return ``;
}}

  inline-embed[name='align-right'] {
    text-align: right;
  }

  inline-embed[name='align-center'] {
    text-align: center;
  }
`;
const UtilityButton = styled(Button.Utility).withConfig({
    displayName: 'MultiPackageRow'
}) `
  &&& {
    align-items: center;
    width: auto;
  }
`;
const MultiPackageRow = styled(MultiPackageBaseRow).withConfig({
    displayName: 'MultiPackageRow'
}) `
  ${({ hasNoTopMargin }) => {
    if (!hasNoTopMargin) {
        return `margin-top: ${calculateSpacing(7)};`;
    }
    return '';
}}

  ${({ hasLightBgForLinkBanner, hasPlpFilterableContainerLightBackgroundColor, theme, isInvertedTheme }) => {
    if (hasLightBgForLinkBanner ||
        hasPlpFilterableContainerLightBackgroundColor) {
        return `background-color: ${getColorToken(theme, 'colors.discovery.body.light.background')};`;
    }
    else if (isInvertedTheme) {
        return `background-color: ${getColorToken(theme, 'colors.consumption.lead.inverted.background')};`;
    }
    return '';
}}

  ${({ hasMediumMargin, hasNoBottomMargin, hasReducedMargin, isNativeAd }) => {
    if (hasMediumMargin) {
        return `margin-bottom: ${calculateSpacing(4)};`;
    }
    else if (hasNoBottomMargin || (isNativeAd && hasReducedMargin)) {
        return `margin-bottom: 0;`;
    }
    else if (hasReducedMargin) {
        return `margin-bottom: ${calculateSpacing(2)};`;
    }
    return `margin-bottom: ${calculateSpacing(7)};`;
}}

  ${({ hasMarginBottomMultiPackageRow, hasConsistentSpacing, theme }) => {
    if (hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
        return `margin-bottom: 0;`;
    }
    else if (hasMarginBottomMultiPackageRow) {
        return `
          ${minScreen(BREAKPOINTS.lg)} {
            margin-bottom: ${calculateSpacing(5)};
          }
          ${minMaxScreen(BREAKPOINTS.md, BREAKPOINTS.lg)} {
            margin-bottom: ${calculateSpacing(4)};
          }
          ${minMaxScreen(0, BREAKPOINTS.md)} {
            margin-bottom: ${calculateSpacing(3)};
          }`;
    }
    return ``;
}}

  ${({ hasNoTopBottomMarginOnMobile }) => {
    if (hasNoTopBottomMarginOnMobile) {
        return `  ${minMaxScreen(0, BREAKPOINTS.md)} {
            margin-top: 0;
            margin-bottom: 0;
          }`;
    }
    return ``;
}}

  ${({ hasStickyLinkBanner }) => {
    if (hasStickyLinkBanner) {
        return `
        position: sticky;
        top: 0px;
        z-index: ${ZINDEX_MAP.stickyLayer};
      `;
    }
    return '';
}}

  /* TODO: this should be a configuration for a layout
     Specificity is required due to star selector in homepage  */
  ${minScreen(BREAKPOINTS.lg)} {
    ${RowWrapper}.homepage__half-column-row + && {
      width: 50%;
      max-width: 800px;
      ${SectionTitleHed} {
        ${getTypographyStyles('typography.definitions.discovery.subhed-section-secondary')};
      }
    }
    .homepage__half-column-row + && > ${SummaryCollageOneGridWithMargin} {
      padding-left: var(--grid-gap);
    }
    ${SummaryRiverSection} {
      margin: 0 auto;
      max-width: 1600px;
    }
  }

  ${({ hasConsistentSpacing, theme }) => {
    if (hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
        return `
        margin-top: 0;
        margin-bottom: 0;
      `;
    }
    return '';
}}
`;
const DiscoveryQuoteRow = styled(Grid.WithMargins).withConfig({
    displayName: 'DiscoveryQuoteRow'
}) `
  ${({ hasTopAndBottomBorderQuote, theme }) => {
    if (hasTopAndBottomBorderQuote) {
        return `
    border-top:1px solid ${getColorToken(theme, 'colors.discovery.body.white.divider')};

    border-bottom:1px solid ${getColorToken(theme, 'colors.discovery.body.white.divider')};`;
    }
    return '';
}}

  ${GridItem} {
    grid-column: 1/-1;

    ${minScreen(BREAKPOINTS.md)} {
      grid-column: 3/11;
    }
  }
`;
const puzzlesAndGamesStyles = css `
  &.puzzles-games-landing-page {
    .ticker-wrapper {
      margin-bottom: 0;
    }

    .ticker-view > div:nth-child(2) {
      margin-top: ${calculateSpacing(4)};
    }

    .summary-collage-six-puzzles-games .summary-item:first-child h3 {
      ${getTypographyStyles('typography.definitions.discovery.description-core')};
      font-size: ${calculateSpacing(4)};
    }

    .verso-features {
      margin-bottom: ${calculateSpacing(4)};
    }

    > div:nth-child(3)
      .summary-collage-six-puzzles-games
      .summary-list--collection-list {
      ${maxScreen(BREAKPOINTS.lg)} {
        padding-top: 0;
      }
    }

    .summary-river-puzzles-games {
      h2 {
        font-size: 24px;
      }

      & > section {
        .summary-item:last-child {
          border-bottom: 0;
        }

        > div {
          margin-bottom: ${calculateSpacing(2)};

          > div:first-child {
            margin-bottom: 0;
          }
        }
      }

      .summary-item {
        padding-top: ${calculateSpacing(2)};
      }
    }

    .summary-item--is-dense .summary-item__asset-container {
      ${minMaxScreen(0, BREAKPOINTS.xl)} {
        display: block;
      }

      ${minScreen(BREAKPOINTS.xl)} {
        float: none;
        margin-left: 0;
      }
    }

    .summary-list--collection-list {
      ${minMaxScreen(0, BREAKPOINTS.lg)} {
        border-top: 0;
        padding-top: 0;
      }
    }

    .summary-list__items .summary-item:not(:first-child) {
      margin-bottom: 0;
      padding-bottom: ${calculateSpacing(2)};
    }

    .summary-list__items .summary-item:first-child {
      ${minMaxScreen(0, BREAKPOINTS.lg)} {
        padding-bottom: ${calculateSpacing(2)};
      }

      ${minScreen(BREAKPOINTS.lg)} {
        padding-bottom: 0;
      }
    }

    .summary-collage-six-puzzles-games .summary-item h3 {
      ${getTypographyStyles('typography.definitions.discovery.hed-core-secondary')};
    }

    .summary-collage-six-puzzles-games h2,
    .summary-collection-grid h2 {
      ${getTypographyStyles('typography.definitions.discovery.subhed-section-primary')};
    }

    .verso-embed-row inline-embed h1 {
      margin: 0;
      font-size: ${calculateSpacing(5.5)};
    }

    .verso-embed-row {
      margin: ${calculateSpacing(4)} 0;
    }

    ${EmbedBody} {
      max-width: initial;
    }

    .verso-features h2 {
      font-size: 24px;
    }

    .summary-collage-six-puzzles-games h2 {
      font-size: 20px;
    }

    .summary-item__dek > a {
      ${getTypographyStyles('typography.definitions.foundation.link-primary')};
      display: block;
      padding-top: ${calculateSpacing(2.5)};
      text-decoration: none;
      color: ${getColorToken('colors.interactive.base.brand-primary')};
    }

    .summary-item__dek > a:hover {
      text-decoration: underline;
    }
  }
`;
const MultiPackageContainer = styled.div.withConfig({
    displayName: 'MultiPackageContainer'
}) `
  ${({ showFooterAdPadding }) => showFooterAdPadding && `padding-bottom: ${calculateSpacing(10, 'px')};`}

  ${({ customClass }) => customClass &&
    customClass === 'puzzles-games-landing-page' &&
    puzzlesAndGamesStyles}
  ${({ hasMarginBottomMultiPackageRow }) => {
    if (hasMarginBottomMultiPackageRow) {
        return `
            .verso-features {
              && {
                margin-bottom: 0;
              }
            }
          `;
    }
    return '';
}}

  ${({ hasEvenSpacingMultiPackageRow }) => hasEvenSpacingMultiPackageRow &&
    css `
      > ${MultiPackageRow}, > .ad-container {
        margin-top: ${calculateSpacing(6)};
        margin-bottom: 0;
        ${minScreen(BREAKPOINTS.md)} {
          margin-top: ${calculateSpacing(7)};
          margin-bottom: 0;
        }

        :last-child {
          margin-bottom: ${calculateSpacing(6)};
          ${minScreen(BREAKPOINTS.md)} {
            margin-bottom: ${calculateSpacing(7)};
          }
        }
      }

      > ${MultiPackageRow} {
        :first-child {
          margin-top: 0;
        }

        :empty {
          margin-top: 0;
          margin-bottom: 0;
        }
        > ${FeaturesRow} {
          margin-bottom: 0;
        }
      }

      > ${TopStoryWrapper} + .journey-unit__container,
      > .ticker-view {
        + * {
          margin-top: 0;
        }
        > ${RowWrapper}, ${TickerInnerWrapper} {
          margin-top: 0;
          margin-bottom: 0;
        }
      }
    `}

    .ticker-view .ticker-wrapper {
    ${({ hasConsistentSpacing, theme }) => hasConsistentSpacing &&
    getSectionSpacingStyling(theme, 'gap-md') !== '0px'
    ? 'margin-top: 0; margin-bottom: 0;'
    : ''}
  }
`;
const SectionJumpLinksWrapper = styled.div.withConfig({
    displayName: 'SectionJumpLinksWrapper'
}) `
  ${({ theme }) => applySectionJumpLinkStyle(theme)}
`;
const MultiPackageReadMore = styled(MultiPackageRow).withConfig({
    displayName: 'MultiPackageReadMore'
}) `
  display: flex;
  justify-content: center;
  ${({ hasConsistentSpacing, theme }) => {
    if (hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
        return `
        margin-top: 0;
        margin-bottom: 0;
      `;
    }
    return '';
}}
`;
const PromoBoxWrapper = styled.div.withConfig({
    displayName: 'PromoBoxWrapper'
}) `
  ${commonStyle}
`;
const EventsListWrapper = styled.div.withConfig({
    displayName: 'EventsListWrapper'
}) `
  ${cssVariablesGrid()}

  margin: 0 auto;
  width: 100%;
  max-width: ${BREAKPOINTS.xxl};

  ${minScreen(BREAKPOINTS.lg)} {
    padding-right: var(--grid-margin);
    padding-left: var(--grid-margin);
  }
`;
const NewsFeedWrapper = styled.div.withConfig({
    displayName: 'PromoBoxWrapper'
}) `
  ${commonStyle}
`;
const NewsletterWrapper = styled.div.withConfig({
    displayName: 'NewsletterWrapper'
}) `
  ${commonStyle}

  padding-top: ${calculateSpacing(6)};
  padding-bottom: ${calculateSpacing(6)};

  ${minScreen(BREAKPOINTS.md)} {
    padding-top: ${calculateSpacing(9)};
    padding-bottom: ${calculateSpacing(9)};
  }
`;
const CMUnitWrapper = styled.div.withConfig({ displayName: 'CMUnitWrapper' }) `
  ${commonStyle}

  ${minScreen(BREAKPOINTS.lg)} {
    padding-right: var(--grid-margin);
    padding-left: var(--grid-margin);
  }
`;
const SubTopicDiscoveryWrapper = styled.div.withConfig({
    displayName: 'SubTopicDiscoveryWrapper'
}) `
  ${universalGridCore(true)}
  ${applyGridSpacing('padding')}

  margin: 0 auto;
  width: 100%;
  max-width: ${BREAKPOINTS.xxl};

  ${minScreen(BREAKPOINTS.lg)} {
    padding-right: var(--grid-margin);
    padding-left: var(--grid-margin);
  }
`;
const TickerWrapper = styled.div.withConfig({ displayName: 'TickerWrapper' }) `
  ${({ isInvertedTheme }) => {
    if (isInvertedTheme) {
        return `
        ${cssVariablesGrid()}
        ${applyGridSpacing('padding', true)}`;
    }
    return `${commonStyle}`;
}}
`;
const MultipackageNoItemsBlock = styled('div').withConfig({
    displayName: 'MultipackageNoItemsBlock'
}) `
  ${cssVariablesGrid()}
  ${applyGridSpacing('padding')}
  margin: 0 auto;
  margin-bottom: ${calculateSpacing(4)};
  width: 100%;
  max-width: ${BREAKPOINTS.xxl};
  color: white;
  font-family: 'LabGrotesque';
  ${({ hasRule, theme }) => {
    if (hasRule) {
        return `
        &::before {
          border-top: 1px solid ${getColorToken(theme, 'colors.discovery.body.white.divider')};
          content: '';
          grid-column: 1/-1;
          margin-bottom: ${calculateSpacing(4)};
          display: block;
        }
      `;
    }
    return '';
}}

  h3 {
    margin: 0 auto;
    width: fit-content;
    ${getTypographyStyles('typography.definitions.consumptionEditorial.subhed-break-secondary')}
  }

  p {
    font-family: Proxima Nova;
    font-size: 12px;
  }
`;
const MultiPackageBodyWrapperGrid = styled.div.withConfig({
    displayName: 'MultiPackageBodyWrapperGrid'
}) `
  ${universalGridCore()}
  ${applyGridSpacing('padding')}
`;
module.exports = {
    CMUnitWrapper,
    DiscoveryQuoteRow,
    EventsListWrapper,
    MultiPackageContainer,
    MultiPackageRow,
    MultiPackageReadMore,
    NewsFeedWrapper,
    NewsletterWrapper,
    PromoBoxWrapper,
    SubTopicDiscoveryWrapper,
    TickerWrapper,
    MultipackageNoItemsBlock,
    MultiPackageBodyWrapperGrid,
    SectionJumpLinksWrapper,
    UtilityButton
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 29693:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    noStories: {
        id: 'Multipackages.NoStories',
        defaultMessage: 'No stories found for your search',
        description: 'No stories label'
    },
    exploreInstead: {
        id: 'Multipackages.ExploreInstead',
        defaultMessage: 'Explore these instead',
        description: 'Explore instead label'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 71724:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { generateId } = __webpack_require__(54318);
/**
 * Find Component Options
 *
 * The provided array of options should contain objects with an
 * identifying 'template' prop to match against 'container.template'.
 * All other properties in the objects can vary.
 *
 * @param {object} container - container object
 * @param {Array<object>} options - an array of option objects
 * @returns {object} - Option object
 */
function findComponentOptions(container, options = []) {
    if (!Array.isArray(options))
        return null;
    return options.find((item) => container.template === item.template);
}
/**
 * Check whether the list contain item as product
 *
 * @param items - items
 * @returns returns true if item contentType is product or else false
 */
const hasProductContainType = (items) => items.some((item) => item.contentType === 'product' || item.contentType === 'commerce-product');
/**
 * Check whether group contains product
 *
 * @param groups - groups
 * @returns returns true if item contentType is product or else false
 */
const groupHasProducts = (groups) => {
    const productListingArray = [];
    groups.forEach((group) => {
        if (group?.items?.length > 0) {
            productListingArray.push(hasProductContainType(group.items));
        }
        else {
            productListingArray.push(false);
        }
    });
    return productListingArray.some(Boolean);
};
/**
 * Check whether it contains PLP container that contain item as product contentType
 *
 * @param containers - containers
 * @returns returns first conatiner items if plp containers contain item whose contentType is product
 */
const ProductListingItems = (containers) => {
    const productListingArray = [];
    containers.map((container) => {
        if (container.template === 'verso-plp-manual-curated' ||
            container.template === 'verso-plp-search-curated' ||
            container.template === 'verso-filterable-summary-list' ||
            container.template === 'verso-pim-collection' ||
            container.template === 'verso-plp-curated-visual' ||
            container.template === 'verso-plp-filterable-feature' ||
            container.template === 'verso-native-product-carousel') {
            if (container?.groups?.length > 0) {
                groupHasProducts(container?.groups) &&
                    productListingArray.push(container);
            }
            else if (container?.productList?.length > 0) {
                hasProductContainType(container.productList) &&
                    productListingArray.push(container);
            }
            else if (container?.items?.length > 0) {
                hasProductContainType(container.items) &&
                    productListingArray.push(container);
            }
        }
        return productListingArray;
    });
    return productListingArray;
};
const getContainerId = (data) => {
    const { hed, dangerousHed, container, containerId } = data || {};
    // Generate id from 'hed'
    if (hed)
        return generateId(data, 'hed');
    // If 'hed' doesn't exist in children Props, generate ID from dangerousHed instead as fallback
    if (dangerousHed)
        return generateId(data, 'dangerousHed');
    // If neither 'hed' or 'dangerousHed' exists in the Children props, check if the Headline value is wrapped
    // into a container object which holds then the 'hed'
    if (container?.hed)
        return generateId(container, 'hed');
    // If neither 'hed' or 'dangerousHed' exists in the Children props, check if the Headline value is wrapped
    // into a container object which holds then the 'dangerousHed'
    if (container?.dangerousHed)
        return generateId(container, 'dangerousHed');
    // as some containers have a wrong copilotId we established a containerId
    if (containerId)
        return data.containerId;
    if (container?.containerId)
        // As the last fallback, if containerId is wrapped using a container, then check there too and set the value of generatedId
        return container.containerId;
    return undefined;
};
module.exports = {
    findComponentOptions,
    ProductListingItems,
    getContainerId
};
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 46323:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const Rubric = __webpack_require__(34187);
const Bylines = __webpack_require__(52540);
const PersistentAside = __webpack_require__(40855);
const ScoreBox = __webpack_require__(55252);
const InfoSlice = __webpack_require__(59525);
const { formatInfoSliceItems } = __webpack_require__(88722);
const ArrowIcon = __webpack_require__(42361);
const Dot = __webpack_require__(60261);
const { SplitScreenContentHeaderPersistentAside } = __webpack_require__(9481);
const { SplitScreenContentHeaderSocialIcons } = __webpack_require__(67040);
const SocialIcons = __webpack_require__(35676);
const { TrackComponentChannel } = __webpack_require__(78788);
const FULL_WIDTH_SELECTOR = '.container--full, .full-bleed-ad, .callout--feature-large';
const { MultiReviewContentHeaderArtist, MultiReviewContentHeaderByline, MultiReviewContentHeaderCaption, MultiReviewContentHeaderDek, MultiReviewContentHeaderHed, MultiReviewContentHeaderInfoSlice, MultiReviewContentHeaderForMusicReview, MultiReviewContentHeaderRubric, MultiReviewContentHeaderTitleBlock, MultiReviewContentHeaderWrapper, MultiReviewContentHeaderScoreBox, MultiReviewContentHeaderLeadWrapper, MultiReviewContentHeaderArtistLink, MultiReviewContentHeaderGrid, MultiReviewContentHeaderLede, MultiReviewContentHeaderSlideController, MultiReviewContentHeaderSlideControlButton, MultiReviewContentHeaderHedSpanSlashes, ImageCaptionTextCounter, ImageCaptionText, MultiReviewContentHeaderReleaseYear, ImageAlbumText } = __webpack_require__(57858);
const { useState } = React;
/**
 * MultiReviewContentHeader component
 *
 * @param {object} props - React props
 * @param {object} [props.artistDetails] - Optional Artist data
 * @param {object} [props.itemsReviewed] - Optional Items Reviewed section
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.dangerousDek] - Optional Article Dek
 * @param {object} [props.contributors] -  Optional object containing data to create authors byline.
 * @param {object} [props.infoSliceFields] - Optional infoSliceFields
 * @param {object} [props.rubric] - Optional rubric.
 * @param {string} [props.rubricVariation] - The name of the variation of Rubric to use
 * @param {object} [props.stickySocialAnchorBottom] - Optional Sticky Social Icon bottom anchor selectors.
 * @param {object} [props.stickySocialAnchorTop] - Optional Sticky Social Icon top anchor selectors.
 * @param {string} [props.persistentAsideAlign] - Optional persistentAside alignment
 */
/* eslint-disable complexity */
const MultiReviewContentHeader = ({ artistDetails, className, contributors, dangerousDek, itemsReviewed, infoSliceFields, rubric, rubricVariation, socialMedia, stickySocialAnchorBottom = {
    selector: '.page',
    edge: 'bottom'
}, stickySocialAnchorTop = {
    selector: "[data-testid='MultiReviewContentHeaderWrapper']",
    edge: 'bottom'
}, persistentAsideAlign = 'left' }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'MultiReviewContentHeader'
        });
    });
    const RubricVariation = Rubric[rubricVariation] || Rubric;
    const [current, setCurrent] = useState(0);
    const itemsReviewedLength = itemsReviewed?.length;
    const releaseYear = itemsReviewed[0]?.releaseYear;
    if (itemsReviewedLength > 1) {
        delete infoSliceFields.label;
    }
    const infoSliceItems = formatInfoSliceItems(infoSliceFields);
    const imageSliderComponent = (itemsReviewed) => {
        const lengthOfItems = itemsReviewed?.length;
        if (!Array.isArray(itemsReviewed) || lengthOfItems <= 0) {
            return null;
        }
        const nextSlide = () => {
            setCurrent(current === lengthOfItems - 1 ? 0 : current + 1);
        };
        const prevSlide = () => {
            setCurrent(current === 0 ? lengthOfItems - 1 : current - 1);
        };
        const handleKeys = (event) => {
            const navMap = {
                ArrowLeft: prevSlide,
                ArrowRight: nextSlide
            };
            if (navMap[event.key]) {
                navMap[event.key]();
            }
        };
        return (React.createElement("div", null, itemsReviewed?.map((item, index) => {
            const { dangerousHed, publisher, releaseYear, musicRating } = item;
            const isBackArrowDisabled = index === 0;
            const isForwardArrowDisabled = index + 1 === lengthOfItems;
            return (index === current && (React.createElement(MultiReviewContentHeaderLeadWrapper, { key: index },
                React.createElement(MultiReviewContentHeaderLede, { sources: item?.image?.sources, altText: item?.image?.altText }),
                React.createElement(MultiReviewContentHeaderScoreBox, { isBestNewMusic: musicRating?.isBestNewMusic, isBestNewReissue: musicRating?.isBestNewReissue },
                    React.createElement(ScoreBox, { rating: musicRating?.score, isBestNewMusic: musicRating?.isBestNewMusic, isBestNewReissue: musicRating?.isBestNewReissue })),
                lengthOfItems > 1 && (React.createElement(React.Fragment, null,
                    React.createElement(MultiReviewContentHeaderCaption, null,
                        React.createElement(ImageCaptionTextCounter, null,
                            index + 1,
                            " of ",
                            lengthOfItems,
                            React.createElement(ImageCaptionText, null,
                                React.createElement(ImageAlbumText, null, dangerousHed),
                                React.createElement(Dot, null),
                                publisher,
                                React.createElement(Dot, null),
                                releaseYear))),
                    React.createElement(MultiReviewContentHeaderSlideController, { role: "presentation", onKeyDown: handleKeys, isBestNewMusic: musicRating?.isBestNewMusic, isBestNewReissue: musicRating?.isBestNewReissue },
                        React.createElement(MultiReviewContentHeaderSlideControlButton, { ariaLabel: "prevSlide", isBackArrow: true, onClickHandler: prevSlide, label: "", inputKind: "button", isIconButton: true, isDisabled: isBackArrowDisabled, isDisabledStyle: isBackArrowDisabled, ButtonIcon: ArrowIcon }),
                        React.createElement(MultiReviewContentHeaderSlideControlButton, { ariaLabel: "nextSlide", onClickHandler: nextSlide, label: "", inputKind: "button", isIconButton: true, isDisabled: isForwardArrowDisabled, isDisabledStyle: isForwardArrowDisabled, ButtonIcon: ArrowIcon })))))));
        })));
    };
    const albumNames = (itemsReviewed) => itemsReviewed?.map((item, index) => {
        const noOfItems = itemsReviewed.length - 1;
        return (React.createElement("span", { key: index },
            item?.dangerousHed,
            index < noOfItems && (React.createElement(MultiReviewContentHeaderHedSpanSlashes, null, ' / '))));
    });
    const Artists = () => {
        const artistsArray = artistDetails || [];
        if (artistsArray.length === 0) {
            return null;
        }
        return (React.createElement("div", null, artistsArray.map((artist, index) => {
            return (React.createElement(React.Fragment, { key: index },
                React.createElement(MultiReviewContentHeaderArtistLink, { href: '/'.concat(artist?.uri) },
                    React.createElement(MultiReviewContentHeaderArtist, { dangerouslySetInnerHTML: { __html: artist?.name }, lengthOfItems: itemsReviewedLength })),
                !(index === artistsArray.length - 1) && (React.createElement(MultiReviewContentHeaderHedSpanSlashes, { dangerouslySetInnerHTML: { __html: ' / ' } }))));
        })));
    };
    return (React.createElement(MultiReviewContentHeaderWrapper, { className: classnames('content-header', {
            [className]: className
        }) },
        React.createElement(MultiReviewContentHeaderForMusicReview, null,
            React.createElement(MultiReviewContentHeaderTitleBlock, null,
                rubric && (React.createElement(MultiReviewContentHeaderRubric, { as: RubricVariation, ...rubric })),
                React.createElement(MultiReviewContentHeaderHed, null, albumNames(itemsReviewed)),
                React.createElement(Artists, null),
                itemsReviewedLength === 1 && releaseYear && (React.createElement(MultiReviewContentHeaderReleaseYear, { "data-testid": "MultiReviewContentHeaderReleaseYear" }, releaseYear))),
            imageSliderComponent(itemsReviewed)),
        contributors && (React.createElement(MultiReviewContentHeaderByline, { contributors: contributors, bylineVariation: "Item", lengthOfItems: itemsReviewedLength })),
        infoSliceItems.length > 0 && (React.createElement(MultiReviewContentHeaderGrid, null,
            React.createElement(MultiReviewContentHeaderInfoSlice, null,
                React.createElement(InfoSlice, { items: infoSliceItems })))),
        dangerousDek && (React.createElement(MultiReviewContentHeaderGrid, null,
            React.createElement(MultiReviewContentHeaderDek, { dangerouslySetInnerHTML: { __html: dangerousDek } }))),
        socialMedia && (React.createElement(SplitScreenContentHeaderPersistentAside, { align: persistentAsideAlign, attributes: { shouldFadeOnMove: true }, anchorBottom: stickySocialAnchorBottom, anchorTop: stickySocialAnchorTop, fullWidthSelector: FULL_WIDTH_SELECTOR },
            React.createElement(SplitScreenContentHeaderSocialIcons, { ...socialMedia, bookmarkTrackingType: "sticky", className: "social-icons--share" })))));
};
/* eslint-enable complexity */
MultiReviewContentHeader.propTypes = {
    artistDetails: PropTypes.array,
    className: PropTypes.string,
    contributors: PropTypes.shape(Bylines.propTypes.contributors),
    dangerousDek: PropTypes.string,
    infoSliceFields: PropTypes.object,
    itemsReviewed: PropTypes.array,
    persistentAsideAlign: PropTypes.oneOf(['left', 'left-lead-asset']),
    rubric: PropTypes.shape(Rubric.propTypes),
    rubricVariation: PropTypes.string,
    socialMedia: PropTypes.shape(SocialIcons.propTypes),
    stickySocialAnchorBottom: PersistentAside.propTypes.anchorBottom,
    stickySocialAnchorTop: PersistentAside.propTypes.anchorTop
};
MultiReviewContentHeader.displayName = 'MultiReviewContentHeader';
module.exports = MultiReviewContentHeader;
//# sourceMappingURL=MultiReviewContentHeader.js.map

/***/ }),

/***/ 55182:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(46323);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 57858:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { BaseText, BaseLink } = __webpack_require__(76955);
const { BREAKPOINTS } = __webpack_require__(96472);
const { calculateSpacing, getColorToken, getTypographyStyles, minScreen, getColorStyles } = __webpack_require__(26865);
const Bylines = __webpack_require__(52540);
const Grid = __webpack_require__(86659);
const ResponsiveAsset = __webpack_require__(86157);
const { RubricLink } = __webpack_require__(6613);
const { ResponsiveClipWrapper } = __webpack_require__(91783);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const { GridItem } = __webpack_require__(40653);
const { InfoSliceList } = __webpack_require__(52327);
const Button = __webpack_require__(73730);
const { BestNewMusicText, ScoreCircle, ScoreBoxWrapper } = __webpack_require__(62096);
const { BylineLink } = __webpack_require__(74423);
const slideAnimationSpeed = '0.4s';
const buttonDimensions = '32px';
const addSplitHeaderTitleBlockPaddings = () => `
  padding-right: ${calculateSpacing(3)};
  padding-left: ${calculateSpacing(3)};

  ${minScreen(BREAKPOINTS.xl)} {
    padding-right: 0;
    padding-left: 0;
  }
  ${minScreen(BREAKPOINTS.md)} {
    padding-right: 0;
  }
`;
const MultiReviewContentHeaderHed = styled(BaseText).withConfig({
    displayName: 'MultiReviewContentHeaderHed'
}) `
  margin: 0;
  padding: ${calculateSpacing(4)} 0;
  font-style: italic;
  ${minScreen(BREAKPOINTS.sm)} {
    padding: ${calculateSpacing(2)} 0;
  }
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.lead.standard.heading')}
`;
MultiReviewContentHeaderHed.defaultProps = {
    as: 'h1',
    typeIdentity: 'typography.definitions.consumptionEditorial.hed-standard'
};
const MultiReviewContentHeaderHedSpanSlashes = styled('span').withConfig({
    displayName: 'MultiReviewContentHeaderHedSpanSlashes'
}) `
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.divider')}
`;
const MultiReviewContentHeaderArtist = styled(BaseText).withConfig({
    displayName: 'MultiReviewContentHeaderArtist'
}) `
  margin: 0;

  ${({ lengthOfItems }) => lengthOfItems && `{font-size : 28px;}`}

  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.lead.standard.description')}
`;
MultiReviewContentHeaderArtist.defaultProps = {
    as: 'div',
    typeIdentity: 'typography.definitions.consumptionEditorial.description-core'
};
const MultiReviewContentHeaderArtistLink = styled(BaseLink).withConfig({
    displayName: 'MultiReviewContentHeaderArtistLink'
}) `
  display: inline-block;
  margin-top: ${calculateSpacing(2)};
  margin-bottom: ${calculateSpacing(2)};
  vertical-align: middle;

  &:link {
    text-decoration: none;
  }
`;
const MultiReviewContentHeaderDek = styled(BaseText).withConfig({
    displayName: 'MultiReviewContentHeaderDek'
}) `
  padding-top: ${calculateSpacing(1)};
  padding-bottom: ${calculateSpacing(3)};
  text-align: center;
`;
MultiReviewContentHeaderDek.defaultProps = {
    as: 'div',
    typeIdentity: 'typography.definitions.consumptionEditorial.description-core'
};
const MultiReviewContentHeaderInfoSlice = styled.div.withConfig({
    displayName: 'MultiReviewContentHeaderInfoSlice'
}) `
  align-items: center;
  padding-top: ${calculateSpacing(0)};

  ${InfoSliceList} {
    justify-content: center;
    border-width: 0;
  }
`;
const MultiReviewContentHeaderTitleBlock = styled.div.withConfig({
    displayName: 'MultiReviewContentHeaderTitleBlock'
}) `
  ${addSplitHeaderTitleBlockPaddings()};

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;

  > * {
    max-width: 500px;
  }
`;
const MultiReviewContentHeaderLeadWrapper = styled.div.withConfig({
    displayName: 'MultiReviewContentHeaderLeadWrapper'
}) `
  display: grid;
  grid-template-columns: repeat(12, 2fr);
  align-items: left;
  justify-content: center;
  text-align: center;

  ${ResponsiveClipWrapper} {
    display: block;
  }
`;
const MultiReviewContentHeaderScoreBox = styled.div.withConfig({
    displayName: 'MultiReviewContentHeaderScoreBox'
}) `
  grid-column: 8 / span 5;
  align-self: center;
  ${minScreen(BREAKPOINTS.sm)} {
    margin-bottom: 0;
    padding-left: ${calculateSpacing(2.5)};
    ${ScoreCircle} {
      margin-right: 3px;
      margin-bottom: 0;
      margin-left: 3px;
      width: 111px;
      height: 111px;
    }
    ${ScoreBoxWrapper} {
      width: max-content;
    }
  }
  ${minScreen(BREAKPOINTS.md)} {
    margin-bottom: ${calculateSpacing(0)};
    padding-left: ${calculateSpacing(2.5)};
  }
  ${minScreen(BREAKPOINTS.lg)} {
    margin-bottom: ${calculateSpacing(0)};
    padding-left: ${calculateSpacing(4)};
    ${ScoreCircle} {
      width: 134px;
      height: 134px;
    }
  }

  ${ScoreCircle} {
    margin-bottom: 0;
  }

  ${BestNewMusicText} {
    width: auto;
    height: 26px;
  }

  ${({ isBestNewMusic, isBestNewReissue }) => (isBestNewMusic || isBestNewReissue) &&
    css `
      ${ScoreBoxWrapper} {
        svg {
          margin-bottom: 0;
          margin-left: ${calculateSpacing(0)};
        }
      }
      ${ScoreCircle} {
        margin-top: 16px;
        margin-bottom: ${calculateSpacing(2)};
        padding-bottom: 0;
      }
      ${minScreen(BREAKPOINTS.sm)} {
        ${ScoreCircle} {
          margin-top: 12px;
          margin-bottom: 12px;
        }
      }
    `}
`;
const MultiReviewContentHeaderByline = styled(Bylines).withConfig({
    displayName: 'MultiReviewContentHeaderByline'
}) `
  padding-bottom: ${calculateSpacing(1)};

  ${getTypographyStyles('typography.definitions.globalEditorial.accreditation-feature')}

  ${BylineLink} {
    ${({ lengthOfItems }) => lengthOfItems > 1 &&
    css `
        ${getTypographyStyles('typography.definitions.globalEditorial.accreditation-core')}
      `}
  }
`;
const MultiReviewContentHeaderCaption = styled.div.withConfig({
    displayName: 'MultiReviewContentHeaderCaption'
}) `
  display: flex;
  grid-column: 1 / span 7;
  margin: 0;
  margin-bottom: ${calculateSpacing(4)};
  padding-top: ${calculateSpacing(1)};
  text-align: left;

  svg {
    width: ${calculateSpacing(2.5)};
    height: ${calculateSpacing(2.5)};
    vertical-align: bottom;
  }

  ${minScreen(BREAKPOINTS.xxl)} {
    grid-column: 3 / span 5;
  }

  ${minScreen(BREAKPOINTS.xl)} {
    grid-column: 2 / span 6;
  }
`;
const MultiReviewContentHeaderRubric = styled.div.withConfig({
    displayName: 'MultiReviewContentHeaderRubric'
}) `
  &:only-child {
    margin-right: 0;
  }

  display: inline-flex;
  margin: ${calculateSpacing(4)} ${calculateSpacing(0.5)} 0
    ${calculateSpacing(0.5)};

  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-primary')}

  ${minScreen(BREAKPOINTS.md)} {
    margin: 0 ${calculateSpacing(2)} 0 0;
  }

  ${RubricLink} {
    vertical-align: baseline;
  }
`;
const MultiReviewContentHeaderLede = styled(ResponsiveAsset).withConfig({
    displayName: 'MultiReviewContentHeaderLede'
}) `
  grid-column: 1 / span 7;

  ${minScreen(BREAKPOINTS.xxl)} {
    grid-column: 3 / span 5;
  }

  ${minScreen(BREAKPOINTS.xl)} {
    grid-column: 2 / span 6;
  }

  .responsive-image {
    width: 100%;
    height: 100%;
  }

  ${ResponsiveImageContainer} {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
`;
const MultiReviewContentHeaderForMusicReview = styled(Grid.EvenAny).withConfig({
    displayName: 'MultiReviewContentHeaderForMusicReview'
}) `
  border-bottom: 1px solid
    ${getColorToken('colors.consumption.lead.standard.divider')};

  &.grid-even-any {
    ${minScreen(BREAKPOINTS.sm)} {
      ${GridItem} {
        :nth-of-type(2) {
          margin-top: ${calculateSpacing(2)};
          margin-right: ${calculateSpacing(3)};
          margin-left: ${calculateSpacing(3)};
        }
      }
      ${MultiReviewContentHeaderLede} {
        ${ResponsiveImageContainer} {
          object-fit: contain;
        }
      }
    }
    ${minScreen(BREAKPOINTS.lg)} {
      ${GridItem} {
        :nth-of-type(2) {
          margin-right: 0;
        }
      }
    }

    ${minScreen(BREAKPOINTS.md)} {
      ${GridItem} {
        :nth-of-type(2) {
          margin-top: ${calculateSpacing(4)};
          margin-left: 0;
        }
      }
      grid-template-columns: 50% auto;
    }

    ${minScreen('980px')} {
      grid-template-columns: 50% auto;
    }
  }
`;
const MultiReviewContentHeaderGrid = styled(Grid.WithMargins).withConfig({
    displayName: 'MultiReviewContentHeaderGrid'
}) `
  > ${GridItem} {
    grid-column: 1 / -1;
    ${minScreen(BREAKPOINTS.md)} {
      grid-column: 2 / -2;
    }
  }
`;
const MultiReviewContentHeaderWrapper = styled.header.withConfig({
    displayName: 'MultiReviewContentHeaderWrapper'
}) ``;
const MultiReviewContentHeaderSlideController = styled.div.withConfig({
    displayName: 'MultiReviewContentHeaderSlideController'
}) `
  display: flex;
  grid-column: 8 / span 3;
  margin-bottom: ${calculateSpacing(4)};
  margin-left: auto;
  padding-top: ${calculateSpacing(1)};
  text-align: center;

  ${minScreen(BREAKPOINTS.sm)} {
    grid-column: 10 / span 3;
  }

  ${minScreen(BREAKPOINTS.lg)} {
    grid-column: 9 / span 3;
  }

  ${minScreen(BREAKPOINTS.xl)} {
    grid-column: 8 / span 3;
  }

  ${minScreen(BREAKPOINTS.xxl)} {
    margin-right: ${calculateSpacing(3)};
    padding-top: ${calculateSpacing(0)};
  }
`;
const MultiReviewContentHeaderSlideControlButton = styled(Button.Utility).withConfig({
    displayName: 'MultiReviewContentHeaderSlideControlButton'
}) `
  display: inline-block;
  /* This +10 is to offset the lag that happens when transitioning a svg fill-color  */
  transition: transform ${slideAnimationSpeed + 10} ease-in-out;
  border: 1px solid;
  ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.interactive.base.black')};
  background-color: transparent;
  cursor: pointer;
  padding: 0;
  width: ${buttonDimensions};
  min-width: ${buttonDimensions};
  height: ${buttonDimensions};

  &.button--utility + &.button--utility {
    margin-top: 0;
  }

  && {
    &:focus,
    &:hover,
    &:active {
      border-width: 1px;
      background-color: transparent;
    }

    ${({ isDisabled }) => isDisabled &&
    `
      opacity: 0.8;
      ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.interactive.base.light')};
      pointer-events: none;
      border-width: 1px;
      svg {
        ${({ theme }) => getColorStyles(theme, 'fill', 'colors.interactive.base.light')};
      }
    `}
  }

  &:focus,
  &:hover {
    border: 1px solid;
    background-color: none;

    ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.interactive.base.brand-primary')};

    svg {
      ${({ theme }) => getColorStyles(theme, 'fill', 'colors.interactive.base.brand-primary')};
    }
  }

  &&:active,
  &&:focus,
  &&:hover {
    background-color: none;
  }

  &&:disabled {
    opacity: 0.8;
    border-width: 1px;
    background-color: transparent;

    svg {
      ${({ theme }) => getColorStyles(theme, 'fill', 'colors.interactive.base.light')};
    }
  }

  svg {
    position: relative;
    transition: fill ${slideAnimationSpeed} ease-in-out;

    height: ${calculateSpacing(3)};
    ${({ theme }) => getColorStyles(theme, 'fill', 'colors.interactive.base.black')};
  }

  ${({ isBackArrow }) => isBackArrow
    ? `transform: rotate(180deg);`
    : `margin-left: ${calculateSpacing(2)};`}
`;
const ImageCaptionTextCounter = styled(BaseText).withConfig({
    displayName: 'ImageCaptionTextCounter'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.accreditation-core')}

  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.lead.standard.context-signature')}
`;
const ImageCaptionText = styled('span').withConfig({
    displayName: 'ImageCaptionText'
}) `
  padding-left: 5px;
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.accreditation-core')}

  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.lead.standard.context-tertiary')}
`;
const ImageAlbumText = styled('span').withConfig({
    displayName: 'ImageAlbumText'
}) `
  font-style: italic;
`;
const MultiReviewContentHeaderReleaseYear = styled.time.withConfig({
    displayName: 'MultiReviewContentHeaderReleaseYear'
}) `
  ${getTypographyStyles('typography.definitions.globalEditorial.context-tertiary')};
`;
module.exports = {
    MultiReviewContentHeaderArtist,
    MultiReviewContentHeaderByline,
    MultiReviewContentHeaderCaption,
    MultiReviewContentHeaderDek,
    MultiReviewContentHeaderHed,
    MultiReviewContentHeaderInfoSlice,
    MultiReviewContentHeaderForMusicReview,
    MultiReviewContentHeaderRubric,
    MultiReviewContentHeaderTitleBlock,
    MultiReviewContentHeaderWrapper,
    MultiReviewContentHeaderScoreBox,
    MultiReviewContentHeaderLeadWrapper,
    MultiReviewContentHeaderArtistLink,
    MultiReviewContentHeaderGrid,
    MultiReviewContentHeaderLede,
    MultiReviewContentHeaderSlideController,
    MultiReviewContentHeaderSlideControlButton,
    MultiReviewContentHeaderHedSpanSlashes,
    ImageCaptionTextCounter,
    ImageCaptionText,
    MultiReviewContentHeaderReleaseYear,
    ImageAlbumText
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 28987:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const FeedItem = __webpack_require__(35508);
const Navigation = __webpack_require__(54790);
const SectionTitle = __webpack_require__(35864);
const translations = (__webpack_require__(97368)/* ["default"] */ .A);
const { TrackComponentChannel } = __webpack_require__(78788);
const { NewsFeedWrapper, NewsFeedSectionTitle, NewsFeedContentTabs, NewsFeedContentNavigation } = __webpack_require__(18014);
/**
 * NewsFeed component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.dangerousHed] - Optional string (possibly HTML) to use as the title
 * @param {number} [props.defaultTab] - Optional index to set the active tab
 * @param {Array<Array<FeedItem.propTypes>>} props.feed - Array of feeds
 * @param {Array<object>} [props.links] - Optional list of `{ text, url, isExternal}` objects for navigation links
 * @param {string} [props.sectionTitleVariation] - Optional prop to control section title variation, defaults to `TextCenter`
 * @param {boolean} [props.shouldUseTabs] - Optional boolean to flag the use of Tabs
 *
 * @returns {ReactElement} <div>
 */
const NewsFeed = ({ className, dangerousHed, defaultTab, feed, links, sectionTitleVariation = 'TextCenter', shouldUseTabs = false }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'NewsFeed'
        });
    }, []);
    const intl = useIntl();
    const SectionTitleComponent = SectionTitle[sectionTitleVariation];
    const feedItems = feed.map((items) => {
        return items.map((item, index) => React.createElement(FeedItem, { ...item, key: index }));
    });
    const content = shouldUseTabs ? (React.createElement(NewsFeedContentTabs, { buttonLabel: intl.formatMessage(translations.loadMoreNewsPreamble), defaultTab: defaultTab, tabContent: feedItems, tabLabels: links })) : (React.createElement(React.Fragment, null,
        React.createElement(NewsFeedContentNavigation, { attributes: { 'aria-label': 'Secondary', tabIndex: 0 }, hasBorder: true, justify: "center", links: links }),
        feedItems));
    return (React.createElement(NewsFeedWrapper, { className: className, "data-testid": "NewsFeedWrapper" },
        dangerousHed && (React.createElement(NewsFeedSectionTitle, { as: SectionTitleComponent, dangerousHed: dangerousHed, "data-testid": "NewsFeedSectionTitle", hedTag: "h2" })),
        content));
};
NewsFeed.propTypes = {
    className: PropTypes.string,
    dangerousHed: PropTypes.string,
    defaultTab: PropTypes.number,
    feed: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape(FeedItem.propTypes))).isRequired,
    links: PropTypes.arrayOf(PropTypes.shape(Navigation.propTypes.links))
        .isRequired,
    sectionTitleVariation: PropTypes.string,
    shouldUseTabs: PropTypes.bool
};
module.exports = NewsFeed;
//# sourceMappingURL=NewsFeed.js.map

/***/ }),

/***/ 42594:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(28987);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 18014:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BREAKPOINTS } = __webpack_require__(96472);
const { calculateSpacing } = __webpack_require__(26865);
const Tabs = __webpack_require__(81318);
const Navigation = __webpack_require__(54790);
const NewsFeedWrapper = styled.div.withConfig({
    displayName: 'NewsFeedWrapper'
}) `
  @media (min-width: ${BREAKPOINTS.md}) {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
`;
const NewsFeedSectionTitle = styled.div.withConfig({
    displayName: 'NewsFeedSectionTitle'
}) `
  grid-column: 1 / span 12;
  margin-bottom: ${calculateSpacing(2)};
`;
const NewsFeedContentTabs = styled(Tabs).withConfig({
    displayName: 'NewsFeedContentTabs'
}) ``;
const NewsFeedContentNavigation = styled(Navigation.Section).withConfig({
    displayName: 'NewsFeedContentNavigation'
}) ``;
module.exports = {
    NewsFeedWrapper,
    NewsFeedSectionTitle,
    NewsFeedContentTabs,
    NewsFeedContentNavigation
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 97368:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    loadMoreNewsPreamble: {
        id: 'NewsFeed.LoadMoreNewsPreamble',
        defaultMessage: 'Show More News',
        description: 'News feed component button label preamble'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 52501:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const react_1 = __importStar(__webpack_require__(96540));
const types_1 = __webpack_require__(76066);
const TextClickable_1 = __webpack_require__(98360);
const ClickableAccordionChildren_1 = __importDefault(__webpack_require__(9966));
const helpers_1 = __webpack_require__(81826);
const styles_1 = __webpack_require__(62701);
const utils_1 = __webpack_require__(66593);
const OneNavContext_1 = __webpack_require__(99095);
const constants_1 = __webpack_require__(96472);
const constants_2 = __webpack_require__(64838);
const Accordion = ({ states, items, action, status }) => {
    const stateAsId = getStateAsId(states);
    const { changeAccordionState, isOpen, onKeyDown, currentOpenAccordionRef, accordionContentRef, accordionsState } = useAccordionState(stateAsId);
    useSetContainerStickyAttribute(isOpen, accordionContentRef);
    const stickyTopPosition = useStickyTopPosition(isOpen, accordionContentRef);
    const currentState = accordionsState === stateAsId ? states?.active : states?.default;
    return (react_1.default.createElement(styles_1.AccordionContainer, { "data-testid": "accordion" },
        react_1.default.createElement(styles_1.AccordionHeader, { id: `accordion-header-${stateAsId}`, isOpen: isOpen, onClick: changeAccordionState, onKeyDown: (event) => onKeyDown(event), "data-testid": "accordion-header", ref: currentOpenAccordionRef, stickyTopPosition: stickyTopPosition },
            react_1.default.createElement(TextClickable_1.TextClickable, { component: types_1.Component.TEXT_CLICKABLE, action: action, states: (0, helpers_1.getAccordionStates)(currentState), status: status, designSettings: (0, helpers_1.getAccordionDesignSetting)(helpers_1.AccordionContentType.LABEL), "aria-expanded": isOpen, "aria-controls": `accordion-content-${stateAsId}`, "aria-labelledby": `accordion-header-${stateAsId}`, role: "button", trackingData: {
                    subject: utils_1.ClickableTrackingSubject.ACCORDION,
                    status: isOpen
                } })),
        react_1.default.createElement(styles_1.AccordionContent, { id: `accordion-content-${stateAsId}`, isOpen: isOpen, "data-testid": isOpen ? 'accordion-content-open' : '', "aria-hidden": !isOpen, "aria-labelledby": `accordion-header-${stateAsId}`, role: "region", ref: accordionContentRef },
            react_1.default.createElement(styles_1.AccordionContentInner, { "aria-hidden": !isOpen, "aria-disabled": !isOpen, isOpen: isOpen },
                react_1.default.createElement(ClickableAccordionChildren_1.default, { "aria-hidden": !isOpen, "aria-disabled": !isOpen, defaultDesignSettings: (0, helpers_1.getAccordionDesignSetting)(helpers_1.AccordionContentType.CHILD), items: items })))));
};
function useAccordionState(label) {
    const { accordionsState, setAccordionsState } = (0, react_1.useContext)(OneNavContext_1.OneNavContext);
    const currentOpenAccordionRef = (0, react_1.useRef)(null);
    const accordionContentRef = (0, react_1.useRef)(null);
    const isOpen = accordionsState === label;
    const changeAccordionState = () => {
        setAccordionsState((state) => (state === label ? null : label));
    };
    const onKeyDown = (event) => {
        if (event.key === constants_1.ACCESSIBILITY.KEY_ENTER) {
            changeAccordionState();
        }
    };
    return {
        changeAccordionState,
        isOpen,
        currentOpenAccordionRef,
        accordionContentRef,
        onKeyDown,
        accordionsState
    };
}
/** Fetch the parent element with specific data attribute and set its value based on the accordion state.
 * This value will be used by adjacent sticky elements, so sticky elements stack on each other.
 * */
function useSetContainerStickyAttribute(isOpen, elementRef) {
    (0, react_1.useEffect)(() => {
        const container = elementRef.current?.closest(constants_2.STICKY_ELEMENT_CONTAINER_SELECTOR);
        container?.setAttribute(constants_2.STICKY_ELEMENT_CONTAINER_ATTRIBUTE, String(isOpen));
    });
}
/** Calculate the top position of the previous sticky element, So we can stack the element below it. */
function useStickyTopPosition(isOpen, elementRef) {
    const [stickyTopPosition, setStickyTopPosition] = (0, react_1.useState)(0);
    (0, react_1.useEffect)(() => {
        const container = elementRef.current?.closest(constants_2.STICKY_ELEMENT_CONTAINER_SELECTOR);
        if (container != null) {
            const containerPreviousSibling = container.previousElementSibling;
            const topPosition = containerPreviousSibling?.getBoundingClientRect().height ?? 0;
            setStickyTopPosition(topPosition);
        }
    }, [isOpen, elementRef]);
    return stickyTopPosition;
}
function getStateAsId(states) {
    return `${states.default.label}-${states.default.stateIcon}`;
}
exports["default"] = Accordion;
//# sourceMappingURL=ClickableAccordion.js.map

/***/ }),

/***/ 9966:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const react_1 = __importStar(__webpack_require__(96540));
const TextClickable_1 = __webpack_require__(98360);
const utils_1 = __webpack_require__(66593);
const AccordionChildren = ({ items, defaultDesignSettings }) => {
    const renderChildClickable = (textClickableProps, index) => {
        const designSettings = textClickableProps.designSettings ?? defaultDesignSettings;
        return (react_1.default.createElement(TextClickable_1.TextClickable, { key: index, ...textClickableProps, designSettings: designSettings, trackingData: { subject: utils_1.ClickableTrackingSubject.ACCORDION } }));
    };
    return react_1.default.createElement(react_1.default.Fragment, null, items?.map(renderChildClickable));
};
exports["default"] = (0, react_1.memo)(AccordionChildren);
//# sourceMappingURL=ClickableAccordionChildren.js.map

/***/ }),

/***/ 64838:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.STICKY_ELEMENT_CONTAINER_SELECTOR = exports.STICKY_ELEMENT_CONTAINER_ATTRIBUTE = void 0;
/** The attribute for the area that contains a sticky element. Used for stacking sticky elements. */
exports.STICKY_ELEMENT_CONTAINER_ATTRIBUTE = 'data-contains-sticky-element';
/** Selector for the area that contains a sticky element. */
exports.STICKY_ELEMENT_CONTAINER_SELECTOR = `[${exports.STICKY_ELEMENT_CONTAINER_ATTRIBUTE}]`;
//# sourceMappingURL=constants.js.map

/***/ }),

/***/ 81826:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getAccordionStates = exports.getAccordionDesignSetting = exports.AccordionContentType = void 0;
const types_1 = __webpack_require__(76066);
var AccordionContentType;
(function (AccordionContentType) {
    AccordionContentType["LABEL"] = "label";
    AccordionContentType["CHILD"] = "child";
})(AccordionContentType = exports.AccordionContentType || (exports.AccordionContentType = {}));
function getAccordionDesignSetting(type) {
    switch (type) {
        case AccordionContentType.LABEL:
            return {
                type: types_1.ClickableType.LABEL_TEXT,
                scalable: true
            };
        case AccordionContentType.CHILD:
            return {
                type: types_1.ClickableType.SECONDARY_TEXT,
                scalable: true
            };
        default:
            return {
                type: types_1.ClickableType.PRIMARY_FILLED,
                scalable: true
            };
    }
}
exports.getAccordionDesignSetting = getAccordionDesignSetting;
function getAccordionStates(currentState) {
    if (!currentState?.label && !currentState?.stateIcon) {
        throw new Error('ClickableState must have at least a label or an icon.');
    }
    return {
        default: {
            label: currentState.label || '',
            stateIcon: currentState.stateIcon
        },
        active: {
            label: currentState.label || '',
            stateIcon: currentState.stateIcon
        }
    };
}
exports.getAccordionStates = getAccordionStates;
//# sourceMappingURL=helpers.js.map

/***/ }),

/***/ 90019:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Accordion = void 0;
var ClickableAccordion_1 = __webpack_require__(52501);
Object.defineProperty(exports, "Accordion", ({ enumerable: true, get: function () { return __importDefault(ClickableAccordion_1).default; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 62701:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.AccordionContentInner = exports.AccordionContent = exports.AccordionHeader = exports.AccordionContainer = void 0;
const styled_components_1 = __importStar(__webpack_require__(92168));
const utils_1 = __webpack_require__(26865);
const TextClickable_1 = __webpack_require__(98360);
const AnimationStyleGenerator_1 = __webpack_require__(83158);
const design_1 = __webpack_require__(75163);
exports.AccordionContainer = styled_components_1.default.div.withConfig({
    displayName: 'AccordionContainer'
}) `
  width: 100%;
`;
exports.AccordionHeader = styled_components_1.default.div.withConfig({
    displayName: 'AccordionHeader',
    shouldForwardProp: (prop) => !['isOpen', 'stickyTopPosition'].includes(prop)
}) `
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(${design_1.Design.Color.Surface});

  ${({ isOpen, stickyTopPosition }) => isOpen &&
    (0, styled_components_1.css) `
      z-index: 10;
      position: sticky;
      top: ${stickyTopPosition}px;
    `}
`;
exports.AccordionContent = styled_components_1.default.div.withConfig({
    displayName: 'AccordionContent',
    shouldForwardProp: (prop) => !['isOpen'].includes(prop)
}) `
  display: grid;
  background-color: var(${design_1.Design.Color.SurfaceNavigationElevated});
  grid-template-rows: ${({ isOpen }) => (isOpen ? '1fr' : '0fr')};

  @media (prefers-reduced-motion: reduce) {
    visibility: ${({ isOpen }) => (isOpen ? 'visible' : 'hidden')};
    opacity: ${({ isOpen }) => (isOpen ? '1' : '0')};
  }

  ${({ isOpen }) => AnimationStyleGenerator_1.AnimationStyleGenerator.generateTransitionStyle({
    isOpen,
    enter: {
        animatedProperties: ['grid-template-rows'],
        easingFunctions: ['0.25,0.1,0.25,1'],
        durations: ['350ms']
    },
    exit: {
        animatedProperties: ['grid-template-rows'],
        easingFunctions: ['0.25,0.1,0.25,1'],
        durations: ['350ms']
    },
    reducedMotionEnter: {
        animatedProperties: ['opacity', 'visibility', 'grid-template-rows'],
        easingFunctions: ['0.25,0.1,0.25,1', '0,0,0,0', '0.25,0.1,0.25,1'],
        durations: ['350ms', '350ms', '500ms']
    },
    reducedMotionExit: {
        animatedProperties: ['opacity', 'visibility', 'grid-template-rows'],
        easingFunctions: ['0.25,0.1,0.25,1', '0,0,0,0', '0.25,0.1,0.25,1'],
        durations: ['350ms', '350ms', '500ms']
    }
})}
`;
exports.AccordionContentInner = styled_components_1.default.div.withConfig({
    displayName: 'AccordionContentInner',
    shouldForwardProp: (prop) => !['isOpen'].includes(prop)
}) `
  ${TextClickable_1.TextClickableStyled} {
    padding-left: ${(0, utils_1.calculateSpacing)(2)};
  }

  overflow: hidden;
  visibility: ${({ isOpen }) => (isOpen ? 'visible' : 'hidden')};
  opacity: ${({ isOpen }) => (isOpen ? '1' : '0')};
  transform: ${({ isOpen }) => (isOpen ? 'translateX(0)' : 'translateX(100%)')};

  ${({ isOpen }) => AnimationStyleGenerator_1.AnimationStyleGenerator.generateTransitionStyle({
    isOpen,
    enter: {
        animatedProperties: ['opacity'],
        easingFunctions: ['0.25,0.1,0.25,1'],
        durations: ['350ms'],
        delays: ['150ms']
    },
    exit: {
        animatedProperties: ['opacity'],
        easingFunctions: ['0.25,0.1, 0.25,1'],
        durations: ['350ms'],
        delays: ['150ms']
    },
    reducedMotionEnter: {
        animatedProperties: ['opacity'],
        easingFunctions: ['0.25,0.1, 0.25,1'],
        durations: ['350ms'],
        delays: ['150ms']
    },
    reducedMotionExit: {
        animatedProperties: ['opacity'],
        easingFunctions: ['0.25,0.1,0.25,1'],
        durations: ['350ms'],
        delays: ['150ms']
    }
})}
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 87529:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CurationBanner = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styled_components_1 = __webpack_require__(92168);
const styles_1 = __webpack_require__(59434);
const utils_1 = __webpack_require__(66593);
function CurationBanner({ data, theme = 'standard' }) {
    if (data == null || !data.links?.length) {
        return null;
    }
    const { imageUrl, heading, imageAltText, links } = data;
    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: { curationBannerTheme: theme } },
        react_1.default.createElement(styles_1.CurationBannerWrapper, null,
            imageUrl && (react_1.default.createElement(styles_1.CurationBannerImageWrapper, null,
                react_1.default.createElement(styles_1.CurationBannerImageContainer, { src: imageUrl, alt: imageAltText || heading || 'Curation Banner' }))),
            heading && (react_1.default.createElement(styles_1.CurationBannerDekWrapper, null, heading)),
            links.length > 0 && (react_1.default.createElement(styles_1.CurationBannerLinksWrapper, null,
                react_1.default.createElement(styles_1.CurationBannerLinksContainer, null, links.map((link, index) => {
                    const { url, isExternal, label } = link;
                    return (react_1.default.createElement(styles_1.CurationBannerLinkWrapper, { key: url, href: url, target: isExternal ? '_blank' : undefined, rel: isExternal ? 'noopener noreferrer' : undefined, onClick: () => utils_1.SnowplowEvent.trackBannerClick({
                            index,
                            label,
                            subject: utils_1.BannerTrackingSubject.BANNER_CURATION,
                            content_url: url,
                            total_index: links.length
                        }) },
                        react_1.default.createElement(styles_1.CurationBannerLinkContainer, null, label)));
                })))))));
}
exports.CurationBanner = CurationBanner;
//# sourceMappingURL=CurationBanner.js.map

/***/ }),

/***/ 80554:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CurationBannerWrapper = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const CurationBanner_1 = __webpack_require__(87529);
function CurationBannerWrapper(props) {
    try {
        const { curationBannerData } = props;
        if (!curationBannerData) {
            return null;
        }
        return react_1.default.createElement(CurationBanner_1.CurationBanner, { data: curationBannerData });
    }
    catch (error) {
        console.error('[CurationBannerWrapper] Error:', error);
        return null;
    }
}
exports.CurationBannerWrapper = CurationBannerWrapper;
//# sourceMappingURL=CurationBannerWrapper.js.map

/***/ }),

/***/ 10998:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CurationBanner = void 0;
var CurationBannerWrapper_1 = __webpack_require__(80554);
Object.defineProperty(exports, "CurationBanner", ({ enumerable: true, get: function () { return CurationBannerWrapper_1.CurationBannerWrapper; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 59434:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CurationBannerLinkContainer = exports.CurationBannerLinkWrapper = exports.CurationBannerLinksContainer = exports.CurationBannerLinksWrapper = exports.CurationBannerDekWrapper = exports.CurationBannerImageContainer = exports.CurationBannerImageWrapper = exports.CurationBannerWrapper = void 0;
const styled_components_1 = __importDefault(__webpack_require__(92168));
const utils_1 = __webpack_require__(26865);
const design_1 = __webpack_require__(75163);
const getGradientColor = (opacity) => `rgba(var(${design_1.Design.Color.SurfaceNavigationElevated}), ${opacity})`;
exports.CurationBannerWrapper = styled_components_1.default.div.withConfig({
    displayName: 'CurationBannerWrapper'
}) `
  min-height: 40px;
  display: flex;
  justify-content: center;

  align-items: center;
  flex-wrap: nowrap;

  background-color: var(${design_1.Design.Color.SurfaceNavigationElevated});

  border-bottom: 1px solid var(${design_1.Design.Color.BorderNavigation});
`;
exports.CurationBannerImageWrapper = styled_components_1.default.div.withConfig({
    displayName: 'CurationBannerImageWrapper'
}) `
  flex-shrink: 0;
`;
exports.CurationBannerImageContainer = styled_components_1.default.img.withConfig({
    displayName: 'CurationBannerImageContainer'
}) ``;
exports.CurationBannerDekWrapper = styled_components_1.default.div.withConfig({
    displayName: 'CurationBannerDekWrapper'
}) `
  ${({ theme }) => (0, utils_1.textBoxTrimMixin)(theme)}
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0 1rem;
  text-align: center;

  color: var(${design_1.Design.Color.TextNavigationBrand});
  ${(0, utils_1.getTypographyStyles)(`typography.definitions.navigation.text-secondary`)}
`;
exports.CurationBannerLinksWrapper = styled_components_1.default.div.withConfig({
    displayName: 'CurationBannerLinksWrapper'
}) `
  ${(0, utils_1.getTypographyStyles)(`typography.definitions.navigation.text-secondary`)}
  display: grid;
  position: relative;
`;
exports.CurationBannerLinksContainer = styled_components_1.default.div.withConfig({
    displayName: 'CurationBannerLinksContainer'
}) `
  width: 100%;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  ::-webkit-scrollbar {
    display: none;
  }
  gap: ${(0, utils_1.calculateSpacing)(1)};
  scroll-snap-type: x mandatory;
  ${(0, utils_1.getTypographyStyles)(`typography.definitions.navigation.text-secondary`)}

  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 0;
    width: 8px;
    height: 100%;
    pointer-events: none;
    z-index: 1;
  }

  &:before {
    left: -1px;
    background: linear-gradient(
      to right,
      ${getGradientColor(1)} 10%,
      ${getGradientColor(0.8)} 20%,
      ${getGradientColor(0)} 100%
    );
  }

  &:after {
    right: 0;
    background: linear-gradient(
      to left,
      ${getGradientColor(1)} 10%,
      ${getGradientColor(0.8)} 20%,
      ${getGradientColor(0)} 100%
    );
  }
`;
exports.CurationBannerLinkWrapper = styled_components_1.default.a.withConfig({
    displayName: 'CurationBannerLinkWrapper'
}) `
  ${(0, utils_1.getTypographyStyles)(`typography.definitions.navigation.text-secondary`)}
  user-select: none;
  text-decoration: none;
  &:hover,
  &:focus,
  &:active {
    text-decoration: none;
  }
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 4px;
  padding-inline: ${(0, utils_1.calculateSpacing)(1.5)};
  padding: ${(0, utils_1.calculateSpacing)(1)} ${(0, utils_1.calculateSpacing)(1.5)};
  scroll-snap-align: center;

  color: var(${design_1.Design.Color.TextNavigation});

  background-color: var(${design_1.Design.Color.Surface});

  padding: ${(0, utils_1.calculateSpacing)(1)} ${(0, utils_1.calculateSpacing)(1.5)};
  border-radius: 4px;

  &:focus-visible {
    outline: 1px solid var(${design_1.Design.Color.BorderFocus});
    outline-offset: -1px;
  }

  &:hover {
    background-color: var(${design_1.Design.Color.SurfaceHover});
  }

  &:active {
    background-color: var(${design_1.Design.Color.SurfacePressed});
  }
`;
exports.CurationBannerLinkContainer = styled_components_1.default.span.withConfig({
    displayName: 'CurationBannerLinkContainer'
}) `
  ${({ theme }) => (0, utils_1.textBoxTrimMixin)(theme)}
  white-space: nowrap;
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 22981:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getEventBannerStatus = exports.setContent = exports.EventBanner = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styled_components_1 = __webpack_require__(92168);
const styles_1 = __webpack_require__(31834);
const LiveIndicator_1 = __webpack_require__(74016);
const Countdown_1 = __webpack_require__(44172);
const utils_1 = __webpack_require__(66593);
const types_1 = __webpack_require__(56687);
function EventBanner({ data }) {
    if (!data) {
        return null;
    }
    const { hasFilledClickable, enableDate = 1, eventStartTime = 0, eventEndTime = 0, imageUrl, beforeEvent, duringEvent, afterEvent, hasLiveIndicator = false, hasDivider = true, theme = 'standard' } = data;
    const status = getEventBannerStatus(enableDate, eventStartTime, eventEndTime);
    const eventData = setContent(status, beforeEvent, duringEvent, afterEvent);
    const { dangerousDek, clickableLabel, clickableUrl } = eventData ?? {};
    const showCountdown = isTimeLeft(enableDate, eventStartTime);
    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: { palette: theme } },
        react_1.default.createElement(styles_1.Ribbon, { "data-testid": "event-banner" },
            react_1.default.createElement(styles_1.RibbonWrapper, null,
                imageUrl && (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement(styles_1.RibbonHref, { href: clickableUrl, onClick: () => utils_1.SnowplowEvent.trackBannerClick({
                            index: 0,
                            label: 'event-banner-image',
                            subject: utils_1.BannerTrackingSubject.BANNER_EVENT,
                            content_url: clickableUrl || '',
                            total_index: 1
                        }) },
                        react_1.default.createElement(styles_1.RibbonImage, { src: imageUrl })),
                    hasDivider && react_1.default.createElement(styles_1.RibbonDivider, null))),
                dangerousDek && (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement(styles_1.RibbonHref, { href: clickableUrl, onClick: () => utils_1.SnowplowEvent.trackBannerClick({
                            index: 1,
                            label: 'event-banner-text',
                            subject: utils_1.BannerTrackingSubject.BANNER_EVENT,
                            content_url: clickableUrl || '',
                            total_index: 1
                        }) },
                        react_1.default.createElement(styles_1.RibbonDek, { dangerouslySetInnerHTML: { __html: dangerousDek } })),
                    hasDivider && react_1.default.createElement(styles_1.RibbonDivider, null))),
                showCountdown && (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement(styles_1.RibbonHref, { href: clickableUrl, onClick: () => utils_1.SnowplowEvent.trackBannerClick({
                            index: 2,
                            label: 'event-banner-countdown',
                            subject: utils_1.BannerTrackingSubject.BANNER_EVENT,
                            content_url: clickableUrl || '',
                            total_index: 1
                        }) },
                        react_1.default.createElement(Countdown_1.Countdown, { startDate: enableDate, endDate: eventStartTime })),
                    hasDivider && react_1.default.createElement(styles_1.RibbonDivider, null))),
                clickableLabel && (react_1.default.createElement(styles_1.RibbonLabelWrapper, null,
                    !showCountdown && status === types_1.EventBannerStatus.LIVE && (react_1.default.createElement(LiveIndicator_1.LiveIndicator, { hasLiveIndicator: hasLiveIndicator })),
                    react_1.default.createElement(styles_1.RibbonHrefWrapper, null,
                        react_1.default.createElement(styles_1.RibbonHref, { href: clickableUrl, hasFilledClickable: hasFilledClickable, onClick: () => utils_1.SnowplowEvent.trackBannerClick({
                                index: 3,
                                label: clickableLabel,
                                subject: utils_1.BannerTrackingSubject.BANNER_EVENT,
                                content_url: clickableUrl || '',
                                total_index: 1
                            }) },
                            react_1.default.createElement(styles_1.RibbonLabel, { hasFilledClickable: hasFilledClickable, dangerouslySetInnerHTML: { __html: clickableLabel } })))))))));
}
exports.EventBanner = EventBanner;
EventBanner.displayName = 'EventBanner';
function setContent(status, contentBefore, contentLive, contentAfter) {
    const content = {
        [types_1.EventBannerStatus.BEFORE]: contentBefore,
        [types_1.EventBannerStatus.LIVE]: contentLive,
        [types_1.EventBannerStatus.AFTER]: contentAfter
    };
    return content[status];
}
exports.setContent = setContent;
function getEventBannerStatus(enableDate, eventStartTime, eventEndTime) {
    if (!enableDate || !eventStartTime || !eventEndTime) {
        return types_1.EventBannerStatus.WAITING;
    }
    const dateNow = Date.now();
    if (dateNow >= eventEndTime) {
        return types_1.EventBannerStatus.AFTER;
    }
    else if (dateNow >= eventStartTime) {
        return types_1.EventBannerStatus.LIVE;
    }
    else if (dateNow >= enableDate) {
        return types_1.EventBannerStatus.BEFORE;
    }
    return types_1.EventBannerStatus.WAITING;
}
exports.getEventBannerStatus = getEventBannerStatus;
function isTimeLeft(startDate, endDate) {
    if (!startDate || !endDate) {
        return false;
    }
    const start = startDate;
    const end = endDate;
    const now = Date.now();
    return now > start && now < end;
}
//# sourceMappingURL=EventBanner.js.map

/***/ }),

/***/ 44172:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Countdown = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const react_intl_1 = __webpack_require__(46984);
const styles_1 = __webpack_require__(7996);
const translations_1 = __importDefault(__webpack_require__(67958));
const Countdown = ({ startDate, endDate }) => {
    const time = useTimeLeft(startDate, endDate);
    return (react_1.default.createElement(styles_1.CountdownWrapper, null,
        react_1.default.createElement(CountdownComponent, { time: time })));
};
exports.Countdown = Countdown;
const CountdownComponent = ({ time }) => {
    const totalSeconds = Math.floor(time / 1000);
    const date = {
        months: Math.floor(totalSeconds / (3600 * 24 * 30)),
        days: Math.floor((totalSeconds % (3600 * 24 * 30)) / (3600 * 24)),
        hours: Math.floor((totalSeconds % (3600 * 24)) / 3600),
        minutes: Math.floor((totalSeconds % 3600) / 60),
        seconds: totalSeconds % 60
    };
    if (date.months)
        return CountdownMonths(date.months);
    if (date.days)
        return CountdownDays(date.days);
    return CountdownTime(date);
};
const CountdownMonths = (months) => {
    const intl = (0, react_intl_1.useIntl)();
    const text = months === 1
        ? intl.formatMessage(translations_1.default.month)
        : intl.formatMessage(translations_1.default.months);
    return (react_1.default.createElement(react_1.default.Fragment, null,
        months,
        " ",
        text));
};
const CountdownDays = (days) => {
    const intl = (0, react_intl_1.useIntl)();
    const text = days === 1
        ? intl.formatMessage(translations_1.default.day)
        : intl.formatMessage(translations_1.default.days);
    return (react_1.default.createElement(react_1.default.Fragment, null,
        days,
        " ",
        text));
};
const CountdownTime = (date) => {
    const timeUnits = [
        { value: date.months, label: 'months' },
        { value: date.days, label: 'days' },
        { value: date.hours, label: 'hours' },
        { value: date.minutes, label: 'minutes' },
        { value: date.seconds, label: 'seconds' }
    ];
    // find first element > 0
    const firstNonZeroIndex = timeUnits.findIndex((unit) => unit.value > 0);
    const relevantUnits = firstNonZeroIndex === -1
        ? timeUnits.slice(-1)
        : timeUnits.slice(firstNonZeroIndex);
    return (react_1.default.createElement(react_1.default.Fragment, null, relevantUnits.map((unit, index) => (react_1.default.createElement(react_1.default.Fragment, { key: unit.label },
        react_1.default.createElement("span", null, String(unit.value).padStart(2, '0')),
        index < relevantUnits.length - 1 && ' : ')))));
};
function useTimeLeft(startDate, endDate) {
    const calculateTimeLeft = () => {
        // for SSR
        const start = new Date(startDate).getTime();
        const end = new Date(endDate).getTime();
        const now = Date.now();
        if (now < start)
            return start - now;
        if (now < end)
            return end - now;
        return 0;
    };
    const [timeLeft, setTimeLeft] = (0, react_1.useState)(calculateTimeLeft);
    (0, react_1.useEffect)(() => {
        const start = new Date(startDate).getTime();
        const end = new Date(endDate).getTime();
        const updateCountdown = () => {
            const now = Date.now();
            if (now < start) {
                setTimeLeft(start - now);
            }
            else if (now < end) {
                setTimeLeft(end - now);
            }
            else {
                setTimeLeft(0);
                clearInterval(interval);
            }
        };
        updateCountdown();
        const interval = setInterval(updateCountdown, 1000);
        return () => clearInterval(interval);
    }, [startDate, endDate]);
    return timeLeft;
}
//# sourceMappingURL=Countdown.js.map

/***/ }),

/***/ 7996:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CountdownWrapper = void 0;
const styled_components_1 = __importDefault(__webpack_require__(92168));
const utils_1 = __webpack_require__(26865);
exports.CountdownWrapper = styled_components_1.default.div.withConfig({
    displayName: 'CountdownWrapper'
}) `
  padding: ${(0, utils_1.calculateSpacing)(1)};

  display: flex;
  span {
    width: 22px; /* must be fixed because of dynamic content */
    text-align: center;
  }
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 67958:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { defineMessages } = __webpack_require__(46984);
module.exports = defineMessages({
    month: {
        id: 'Countdown.Month',
        defaultMessage: 'Month',
        description: 'Month (singular)'
    },
    months: {
        id: 'Countdown.Months',
        defaultMessage: 'Months',
        description: 'Month (plural)'
    },
    day: {
        id: 'Countdown.Day',
        defaultMessage: 'Day',
        description: 'Day (singular)'
    },
    days: {
        id: 'Countdown.Days',
        defaultMessage: 'Days',
        description: 'Day (plural)'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 41111:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.EventBanner = void 0;
var EventBanner_1 = __webpack_require__(22981);
Object.defineProperty(exports, "EventBanner", ({ enumerable: true, get: function () { return EventBanner_1.EventBanner; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 16265:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.PromotionBanner = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styled_components_1 = __webpack_require__(92168);
const styles_1 = __webpack_require__(31834);
const LiveIndicator_1 = __webpack_require__(74016);
const utils_1 = __webpack_require__(66593);
function PromotionBanner({ data }) {
    if (!data) {
        return null;
    }
    const { dangerousDek, hasLiveIndicator = false, hasDivider = true, clickableLabel, hasFilledClickable, clickableUrl, imageUrl, theme = 'standard' } = data;
    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: { palette: theme } },
        react_1.default.createElement(styles_1.Ribbon, { "data-testid": "promotion-banner" },
            react_1.default.createElement(styles_1.RibbonWrapper, null,
                imageUrl && (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement(styles_1.RibbonHref, { href: clickableUrl, onClick: () => utils_1.SnowplowEvent.trackBannerClick({
                            index: 0,
                            label: 'promotion-banner-image',
                            subject: utils_1.BannerTrackingSubject.BANNER_PROMOTION,
                            content_url: clickableUrl,
                            total_index: 1
                        }) },
                        react_1.default.createElement(styles_1.RibbonImage, { src: imageUrl })),
                    hasDivider && react_1.default.createElement(styles_1.RibbonDivider, null))),
                dangerousDek && (react_1.default.createElement(react_1.default.Fragment, null,
                    react_1.default.createElement(styles_1.RibbonHref, { href: clickableUrl, onClick: () => utils_1.SnowplowEvent.trackBannerClick({
                            index: 1,
                            label: 'promotion-banner-text',
                            subject: utils_1.BannerTrackingSubject.BANNER_PROMOTION,
                            content_url: clickableUrl,
                            total_index: 1
                        }) },
                        react_1.default.createElement(styles_1.RibbonDek, { dangerouslySetInnerHTML: { __html: dangerousDek } })),
                    hasDivider && react_1.default.createElement(styles_1.RibbonDivider, null))),
                clickableLabel && (react_1.default.createElement(styles_1.RibbonLabelWrapper, null,
                    react_1.default.createElement(LiveIndicator_1.LiveIndicator, { hasLiveIndicator: hasLiveIndicator }),
                    react_1.default.createElement(styles_1.RibbonHrefWrapper, null,
                        react_1.default.createElement(styles_1.RibbonHref, { href: clickableUrl, hasFilledClickable: hasFilledClickable, onClick: () => utils_1.SnowplowEvent.trackBannerClick({
                                index: 2,
                                label: clickableLabel,
                                subject: utils_1.BannerTrackingSubject.BANNER_PROMOTION,
                                content_url: clickableUrl,
                                total_index: 1
                            }) },
                            react_1.default.createElement(styles_1.RibbonLabel, { hasFilledClickable: hasFilledClickable, dangerouslySetInnerHTML: { __html: clickableLabel } })))))))));
}
exports.PromotionBanner = PromotionBanner;
PromotionBanner.displayName = 'PromotionBanner';
//# sourceMappingURL=PromotionBanner.js.map

/***/ }),

/***/ 39858:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.PromotionBanner = void 0;
var PromotionBanner_1 = __webpack_require__(16265);
Object.defineProperty(exports, "PromotionBanner", ({ enumerable: true, get: function () { return PromotionBanner_1.PromotionBanner; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 22694:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.RibbonBanner = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const PromotionBanner_1 = __webpack_require__(39858);
const EventBanner_1 = __webpack_require__(41111);
function RibbonBanner({ ribbonBannerData }) {
    if (!ribbonBannerData) {
        return null;
    }
    const { type, data } = ribbonBannerData;
    if (type === 'promotion') {
        return react_1.default.createElement(PromotionBanner_1.PromotionBanner, { data: data });
    }
    if (type === 'event') {
        return react_1.default.createElement(EventBanner_1.EventBanner, { data: data });
    }
    return null;
}
exports.RibbonBanner = RibbonBanner;
RibbonBanner.displayName = 'RibbonBanner';
//# sourceMappingURL=RibbonBanner.js.map

/***/ }),

/***/ 95842:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.RibbonBanner = void 0;
var RibbonBanner_1 = __webpack_require__(22694);
Object.defineProperty(exports, "RibbonBanner", ({ enumerable: true, get: function () { return RibbonBanner_1.RibbonBanner; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 74016:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.LiveIndicator = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styles_1 = __webpack_require__(47345);
const LiveIndicator = ({ hasLiveIndicator }) => {
    if (!hasLiveIndicator) {
        return null;
    }
    return (react_1.default.createElement(styles_1.RibbonLiveIndicatorWrapper, null,
        react_1.default.createElement(styles_1.RibbonLiveIndicator, null,
            react_1.default.createElement(styles_1.RibbonLiveIndicatorAnimation, null))));
};
exports.LiveIndicator = LiveIndicator;
//# sourceMappingURL=LiveIndicator.js.map

/***/ }),

/***/ 47345:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.RibbonLiveIndicatorAnimation = exports.RibbonLiveIndicator = exports.RibbonLiveIndicatorWrapper = void 0;
const styled_components_1 = __importDefault(__webpack_require__(92168));
const utils_1 = __webpack_require__(26865);
exports.RibbonLiveIndicatorWrapper = styled_components_1.default.div.withConfig({
    displayName: 'RibbonLiveIndicatorWrapper'
}) `
  padding-right: ${(0, utils_1.calculateSpacing)(1)};
  padding-left: ${(0, utils_1.calculateSpacing)(1)};
  position: relative;
`;
exports.RibbonLiveIndicator = styled_components_1.default.div.withConfig({
    displayName: 'RibbonLiveIndicator'
}) `
  border-radius: 50%;
  background-color: ${(0, utils_1.getColorToken)('colors.interactive.feedback.invalid-primary')};
  width: 0.5rem;
  height: 0.5rem;
`;
exports.RibbonLiveIndicatorAnimation = styled_components_1.default.div.withConfig({
    displayName: 'RibbonLiveIndicatorAnimation'
}) `
  position: absolute;
  animation: pulsate 2.5s ease-in-out;
  animation-iteration-count: infinite;
  opacity: 0;
  border-radius: 50%;
  border: 3px solid
    ${(0, utils_1.getColorToken)('colors.interactive.feedback.invalid-primary')};
  background-color: ${(0, utils_1.getColorToken)('colors.interactive.feedback.invalid-primary')};
  width: 0.5rem;
  height: 0.5rem;

  @keyframes pulsate {
    0% {
      transform: scale(0.1, 0.1);
      opacity: 0;
    }

    35% {
      opacity: 1;
    }

    75% {
      transform: scale(3, 3);
      opacity: 0;
    }
  }
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 31834:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.RibbonImage = exports.RibbonHref = exports.RibbonLabel = exports.RibbonLabelWrapper = exports.RibbonDek = exports.RibbonHrefWrapper = exports.RibbonWrapper = exports.Ribbon = exports.RibbonDivider = void 0;
const styled_components_1 = __importStar(__webpack_require__(92168));
const utils_1 = __webpack_require__(26865);
const styles_1 = __webpack_require__(47345);
exports.RibbonDivider = styled_components_1.default.div.withConfig({
    displayName: 'RibbonDivider'
}) `
  width: 1px;
  height: 1.5rem;

  background-color: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.palette}.divider`)};
`;
exports.Ribbon = styled_components_1.default.div.withConfig({
    displayName: 'Ribbon'
}) `
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;

  border-bottom: 1px solid
    ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.oneNavTheme}.border`)};
`;
exports.RibbonWrapper = styled_components_1.default.div.withConfig({
    displayName: 'RibbonWrapper'
}) `
  ${(0, utils_1.getTypographyStyles)(`typography.definitions.navigation.text-secondary`)};

  min-height: 2.5rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  background-color: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.palette}.background-primary`)};

  color: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.palette}.item-primary`)};
`;
exports.RibbonHrefWrapper = styled_components_1.default.div.withConfig({
    displayName: 'RibbonHrefWrapper'
}) `
  background-color: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.palette}.background-primary`)};

  padding: 0 ${(0, utils_1.calculateSpacing)(1)};
  display: flex;
  gap: ${(0, utils_1.calculateSpacing)(1)};
  align-items: center;
`;
exports.RibbonDek = styled_components_1.default.span.withConfig({
    displayName: 'RibbonDek'
}) `
  padding: ${(0, utils_1.calculateSpacing)(0.5)} ${(0, utils_1.calculateSpacing)(1)};
  ${({ theme }) => (0, utils_1.textBoxTrimMixin)(theme)}
`;
exports.RibbonLabelWrapper = styled_components_1.default.div.withConfig({
    displayName: 'RibbonLabelWrapper'
}) `
  display: flex;
  align-items: center;

  ${styles_1.RibbonLiveIndicatorWrapper} + * {
    padding-left: 0;
  }
`;
exports.RibbonLabel = styled_components_1.default.span.withConfig({
    displayName: 'RibbonLabel'
}) `
  padding: ${(0, utils_1.calculateSpacing)(0.5)} ${(0, utils_1.calculateSpacing)(1)};
  ${({ theme }) => (0, utils_1.textBoxTrimMixin)(theme)}

  color: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.palette}.item-brand`)};

  ${({ hasFilledClickable, theme }) => hasFilledClickable &&
    (0, styled_components_1.css) `
      background-color: ${(0, utils_1.getColorToken)(`colors.navigation.${theme.palette}.item-brand`)};
      color: ${(0, utils_1.getColorToken)(`colors.navigation.${theme.palette}.item-secondary`)};

      &&:hover {
        background-color: ${(0, utils_1.getColorToken)(`colors.navigation.${theme.palette}.hover-brand`)};
      }
      text-decoration: none;
    `}
`;
exports.RibbonHref = styled_components_1.default.a.withConfig({
    displayName: 'RibbonHref'
}) `
  user-select: none;
  text-decoration: none;

  &:hover,
  &:focus,
  &:active {
    text-decoration: none;
  }

  display: flex;
  justify-content: center;
  align-items: center;

  color: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.palette}.item-primary`)};

  min-height: 2.5rem;

  &:hover {
    background-color: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.palette}.hover`)};
  }

  &:focus-visible {
    min-height: 2.25rem;
    z-index: 1;
    outline: 2px solid
      ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.palette}.focus`)};
  }

  ${({ hasFilledClickable, theme }) => hasFilledClickable &&
    (0, styled_components_1.css) `
      &:hover {
        background-color: ${(0, utils_1.getColorToken)(`colors.navigation.${theme.palette}.background-primary`)};
      }
    `}
`;
exports.RibbonImage = styled_components_1.default.img.withConfig({
    displayName: 'RibbonImage'
}) `
  padding: 0 ${(0, utils_1.calculateSpacing)(1)};
  height: 40px;
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 16361:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ClickableIcon = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styles_1 = __webpack_require__(1368);
const helpers_1 = __webpack_require__(80089);
const ClickableIcon = ({ icon, className, areaName, fill, strokeColor, transform, ...props }) => {
    const Icon = (0, helpers_1.getIconComponent)(...icon);
    if (Icon == null) {
        return null;
    }
    return (react_1.default.createElement(styles_1.IconWrapper, { className: className, "data-testid": "clickable-icon", fill: fill, strokeColor: strokeColor, transform: transform, areaName: areaName },
        react_1.default.createElement(Icon, { ...props })));
};
exports.ClickableIcon = ClickableIcon;
//# sourceMappingURL=ClickableIcon.js.map

/***/ }),

/***/ 80089:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getIconComponent = exports.ICON_TYPE_MAP = void 0;
const standard_1 = __importDefault(__webpack_require__(97504));
const thin_1 = __importDefault(__webpack_require__(91470));
const thinner_1 = __importDefault(__webpack_require__(24695));
exports.ICON_TYPE_MAP = {
    standard: standard_1.default,
    thin: thin_1.default,
    thinner: thinner_1.default
};
function getIconComponent(name, type = 'standard') {
    const IconComponent = exports.ICON_TYPE_MAP[type][name];
    if (IconComponent) {
        return IconComponent;
    }
    console.error(`Icon ${name} (type: ${type}) was not found.`);
    return null;
}
exports.getIconComponent = getIconComponent;
//# sourceMappingURL=helpers.js.map

/***/ }),

/***/ 33916:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ClickableIcon = void 0;
var ClickableIcon_1 = __webpack_require__(16361);
Object.defineProperty(exports, "ClickableIcon", ({ enumerable: true, get: function () { return ClickableIcon_1.ClickableIcon; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 1368:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.IconWrapper = void 0;
const styled_components_1 = __importDefault(__webpack_require__(92168));
const utils_1 = __webpack_require__(26865);
exports.IconWrapper = styled_components_1.default.span.withConfig({
    displayName: 'IconWrapper'
}) `
  grid-area: ${({ areaName }) => areaName ?? ''};
  justify-self: ${({ areaName }) => areaName ?? ''};
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: ${(0, utils_1.calculateSpacing)(2)};
  height: ${(0, utils_1.calculateSpacing)(2)};

  svg {
    width: 100%;
    height: 100%;

    path {
      fill: ${({ fill = 'currentColor' }) => fill};
    }

    circle {
      stroke: ${({ strokeColor = 'currentColor' }) => strokeColor};
    }
  }
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 34628:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ClickableStyleGenerator = void 0;
const AbstractStyleGenerator_1 = __webpack_require__(17054);
class ClickableStyleGenerator extends AbstractStyleGenerator_1.AbstractStyleGenerator {
    constructor(visibilityOptions, cssValue) {
        super();
        this.visibilityOptions = visibilityOptions;
        this.cssValue = cssValue;
    }
    getStyleForBreakpoint(breakpoint) {
        return [
            ['display', this.visibilityOptions[breakpoint] ? this.cssValue : 'none']
        ];
    }
}
exports.ClickableStyleGenerator = ClickableStyleGenerator;
//# sourceMappingURL=ClickableStyleGenerator.js.map

/***/ }),

/***/ 20243:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.FakeCurationBanner = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styles_1 = __webpack_require__(27377);
const TextClickable_1 = __webpack_require__(98360);
const utils_1 = __webpack_require__(66593);
/** JUST FOR EXPERIMENT USE - will be removed. */
function FakeCurationBanner(props) {
    try {
        const { curationBannerData } = props;
        if (!curationBannerData) {
            return null;
        }
        return (react_1.default.createElement(styles_1.FakeCurationBannerWrapper, null,
            react_1.default.createElement(styles_1.FakeCurationBannerContent, null,
                react_1.default.createElement(styles_1.FakeCurationBannerImageContainer, null,
                    react_1.default.createElement(styles_1.FakeCurationBannerImage, { src: "https://assets.vogue.com/photos/63c828231944dc168acdfcbc/master/w_240,h_120,c_limit/vogue-shopping-banner-NEW.jpg" })),
                react_1.default.createElement(FakeCurationBannerLinks, { links: curationBannerData.links }))));
    }
    catch (error) {
        console.error('[FakeCurationBanner] Error:', error);
        return null;
    }
}
exports.FakeCurationBanner = FakeCurationBanner;
function FakeCurationBannerLinks({ links }) {
    return (react_1.default.createElement(react_1.default.Fragment, null, links.map((link, index) => (react_1.default.createElement(TextClickable_1.TextClickableStyled, { href: link.url, onClick: () => utils_1.SnowplowEvent.trackBannerClick({
            label: link.label,
            subject: utils_1.BannerTrackingSubject.BANNER_CURATION,
            content_url: link.url,
            index,
            total_index: links.length
        }) }, link.label)))));
}
//# sourceMappingURL=FakeCurationBanner.js.map

/***/ }),

/***/ 99215:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.FakeCurationBanner = void 0;
var FakeCurationBanner_1 = __webpack_require__(20243);
Object.defineProperty(exports, "FakeCurationBanner", ({ enumerable: true, get: function () { return FakeCurationBanner_1.FakeCurationBanner; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 27377:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.FakeCurationBannerImage = exports.FakeCurationBannerImageContainer = exports.FakeCurationBannerContent = exports.FakeCurationBannerWrapper = void 0;
const styled_components_1 = __importDefault(__webpack_require__(92168));
const utils_1 = __webpack_require__(26865);
const TextClickable_1 = __webpack_require__(98360);
exports.FakeCurationBannerWrapper = styled_components_1.default.div.withConfig({
    displayName: 'FakeCurationBannerWrapper'
}) `
  display: grid;
  width: 100%;
  justify-content: center;

  background-color: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.oneNavTheme}.background-primary`)};

  border-bottom: 1px solid
    ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.oneNavTheme}.border`)};
`;
exports.FakeCurationBannerContent = styled_components_1.default.div.withConfig({
    displayName: 'FakeCurationBannerContent'
}) `
  width: 100%;
  display: flex;
  gap: 1rem;

  overflow-x: auto;
  scrollbar-width: none;

  ::-webkit-scrollbar {
    display: none;
  }

  ${TextClickable_1.TextClickableStyled} {
    flex: 0 0 auto;

    font-family: VogueAvantGarde, helvetica, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 17px;
    letter-spacing: 0.1px;
    text-align: left;
    text-transform: unset;

    &:hover {
      text-decoration: underline;
      background-color: transparent;
    }
  }
`;
exports.FakeCurationBannerImageContainer = styled_components_1.default.div.withConfig({
    displayName: 'FakeCurationBannerImageContainer'
}) `
  flex: 0 0 auto;
  width: calc(120px + 1rem);
  padding-left: 1rem;
`;
exports.FakeCurationBannerImage = styled_components_1.default.img.withConfig({
    displayName: 'FakeCurationBannerImage'
}) `
  width: 100%;
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 64049:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.RolloverPosition = exports.JourneyUnits = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const components_1 = __webpack_require__(12501);
const styles_1 = __webpack_require__(52836);
const triggerable_container_1 = __webpack_require__(5026);
const utils_1 = __webpack_require__(66593);
const ContainerEventManager_1 = __webpack_require__(39909);
const JourneyUnits = ({ customConfig }) => {
    const { hasNavCTA, navRollover, hasNavDrawer } = customConfig;
    return (react_1.default.createElement(react_1.default.Fragment, null,
        hasNavDrawer && react_1.default.createElement(components_1.NavDrawer, { use: "OneNavTextClickable" }),
        hasNavCTA && react_1.default.createElement(NavCTAClickable, { navRolloverId: navRollover?.rolloverId }),
        navRollover?.isRollover && (react_1.default.createElement(RolloverTriggerableContainer, { navRolloverId: navRollover.rolloverId }))));
};
exports.JourneyUnits = JourneyUnits;
function NavCTAClickable({ navRolloverId }) {
    const navCTARef = (0, react_1.useRef)(null);
    return (react_1.default.createElement(styles_1.CTAWrapper, { "data-testid": "one-nav-journey-cta", ref: navCTARef, onMouseEnter: () => {
            ContainerEventManager_1.ContainerEventManager.emit(ContainerEventManager_1.ContainerEventType.TRIGGER, {
                containerId: navRolloverId,
                isOpen: true,
                triggerElement: navCTARef.current,
                keepOtherContainersOpen: true
            });
        }, onMouseLeave: () => ContainerEventManager_1.ContainerEventManager.emit(ContainerEventManager_1.ContainerEventType.TRIGGER, {
            containerId: navRolloverId,
            isOpen: false,
            triggerElement: navCTARef.current
        }) },
        react_1.default.createElement(components_1.NavCTA, null)));
}
var RolloverPosition;
(function (RolloverPosition) {
    RolloverPosition["INLINE_START"] = "inlineStart";
    RolloverPosition["INLINE_END"] = "inlineEnd";
})(RolloverPosition = exports.RolloverPosition || (exports.RolloverPosition = {}));
function RolloverTriggerableContainer({ navRolloverId }) {
    const { isOpen, triggerElement } = (0, react_1.useContext)(triggerable_container_1.TriggerableContainerContext);
    const isCSR = (0, utils_1.useIsCSR)();
    /**
     * To keep this element open while hovering, we need to handle the case where
     * the cursor leaves the trigger element. By memoizing the trigger element,
     * we can retain its position and ensure the hover state is maintained.
     */
    const memoizedTriggerElement = (0, react_1.useRef)();
    memoizedTriggerElement.current = triggerElement;
    const triggerDOMRect = triggerElement?.getBoundingClientRect();
    if (!isCSR) {
        return null;
    }
    return (react_1.default.createElement(styles_1.RolloverWrapper, { isOpen: isOpen, "data-testid": `one-nav-journey-rollover-${isOpen ? 'open' : 'close'}`, rolloverPosition: getRolloverPosition(triggerDOMRect?.x), triggerDOMRect: triggerDOMRect, onMouseEnter: () => {
            ContainerEventManager_1.ContainerEventManager.emit(ContainerEventManager_1.ContainerEventType.TRIGGER, {
                containerId: navRolloverId,
                isOpen: true,
                triggerElement: memoizedTriggerElement.current,
                keepOtherContainersOpen: true
            });
        }, onMouseLeave: () => ContainerEventManager_1.ContainerEventManager.emit(ContainerEventManager_1.ContainerEventType.TRIGGER, {
            containerId: navRolloverId,
            isOpen: false,
            triggerElement: memoizedTriggerElement.current
        }) },
        react_1.default.createElement(components_1.NavRollover, null)));
}
function getRolloverPosition(ctaXPosition) {
    if (ctaXPosition === undefined) {
        return RolloverPosition.INLINE_END;
    }
    if (ctaXPosition < window.innerWidth / 2) {
        return RolloverPosition.INLINE_START;
    }
    return RolloverPosition.INLINE_END;
}
//# sourceMappingURL=JourneyUnits.js.map

/***/ }),

/***/ 73792:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.JourneyUnits = void 0;
var JourneyUnits_1 = __webpack_require__(64049);
Object.defineProperty(exports, "JourneyUnits", ({ enumerable: true, get: function () { return JourneyUnits_1.JourneyUnits; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 52836:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.RolloverWrapper = exports.CTAWrapper = void 0;
const styled_components_1 = __importStar(__webpack_require__(92168));
const constants_1 = __webpack_require__(96472);
const utils_1 = __webpack_require__(26865);
const JourneyUnits_1 = __webpack_require__(64049);
const utils_2 = __webpack_require__(66593);
const design_1 = __webpack_require__(75163);
const ROLLOVER_WIDTH_PIXEL = 300;
exports.CTAWrapper = styled_components_1.default.div.withConfig({
    displayName: 'CTAWrapper'
}) `
  ${(0, utils_1.getTypographyStyles)('typography.definitions.foundation.link-primary')};

  .journey-unit__container {
    display: flex;
    align-items: center;
    height: 100%;
  }

  a {
    outline: solid 2px transparent;
    border-radius: 0;

    &:focus {
      outline: 2px solid var(${design_1.Design.Color.BorderFocus});
    }

    &:focus:not(:focus-visible) {
      outline: none;
    }
  }
`;
exports.RolloverWrapper = styled_components_1.default.div.withConfig({
    displayName: 'RolloverWrapper'
}) `
  display: none;

  @media (min-width: ${utils_2.breakpointSizes.xl}px) {
    display: block;
  }

  z-index: ${constants_1.ZINDEX_MAP.oneNav + constants_1.ZINDEX_MAP.navFixed};
  position: fixed;

  ${({ rolloverPosition, triggerDOMRect }) => (0, styled_components_1.css) `
    inset-block-start: ${triggerDOMRect?.bottom}px;
    left: ${rolloverPosition === JourneyUnits_1.RolloverPosition.INLINE_START
    ? triggerDOMRect?.left
    : triggerDOMRect?.right}px;
        transform: ${rolloverPosition === JourneyUnits_1.RolloverPosition.INLINE_START
    ? ''
    : `translateX(-${ROLLOVER_WIDTH_PIXEL}px)`};,

    `}

  .nav-rollover__component {
    div {
      transform: translateY(-14px);
      transition: opacity 0.2s linear 0s, transform 0.2s ease 0s,
        visibility 0.2s linear 0s;
      visibility: hidden;
      transition-delay: 300ms;
      opacity: 0;
      z-index: 80;

      ${({ isOpen }) => isOpen && ShowRollover}
    }
  }
`;
const ShowRollover = (0, styled_components_1.css) `
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 45553:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.LogoClickable = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styles_1 = __webpack_require__(86204);
const utils_1 = __webpack_require__(66593);
const hooks_1 = __webpack_require__(23920);
const LogoClickable = ({ action, label, height }) => {
    const source = (0, hooks_1.useLogoSource)();
    return (react_1.default.createElement(styles_1.LogoClickableStyled, { "data-testid": "logo-clickable", href: action, "aria-label": label, onClick: (event) => utils_1.SnowplowEvent.trackClickable({
            event,
            label,
            subject: utils_1.ClickableTrackingSubject.LOGO_CLICKABLE
        }) },
        react_1.default.createElement(styles_1.LogoClickableImage, { src: source, alt: label ?? '', height: height })));
};
exports.LogoClickable = LogoClickable;
//# sourceMappingURL=LogoClickable.js.map

/***/ }),

/***/ 23920:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.useLogoSource = void 0;
const styled_components_1 = __webpack_require__(92168);
const utils_1 = __webpack_require__(26865);
/** Return logo source based on the theme. */
function useLogoSource() {
    const theme = (0, styled_components_1.useTheme)();
    const { oneNavTheme } = theme;
    return (0, utils_1.getThemeValue)(theme, `decorations.${oneNavTheme}.logo`);
}
exports.useLogoSource = useLogoSource;
//# sourceMappingURL=hooks.js.map

/***/ }),

/***/ 43800:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.LogoClickable = void 0;
var LogoClickable_1 = __webpack_require__(45553);
Object.defineProperty(exports, "LogoClickable", ({ enumerable: true, get: function () { return LogoClickable_1.LogoClickable; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 86204:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.LogoClickableImage = exports.LogoClickableStyled = void 0;
const styled_components_1 = __importDefault(__webpack_require__(92168));
const utils_1 = __webpack_require__(66593);
const utils_2 = __webpack_require__(26865);
const BaseClickable_1 = __webpack_require__(3922);
const AbstractStyleGenerator_1 = __webpack_require__(17054);
const design_1 = __webpack_require__(75163);
exports.LogoClickableStyled = (0, styled_components_1.default)(BaseClickable_1.BaseClickable).withConfig({
    displayName: 'LogoClickableStyled'
}) `
  &:focus-visible {
    &:after {
      border: 2px solid var(${design_1.Design.Color.BorderFocus});
    }
  }
`;
exports.LogoClickableImage = styled_components_1.default.img.withConfig({
    displayName: 'LogoClickableImage'
}) `
  max-width: 100%;
  width: auto;
  ${({ height }) => new AbstractStyleGenerator_1.CSSPropertyStyleGenerator('height', 'auto', height).generateStyleForBreakpoints()};
  padding: ${(0, utils_2.calculateSpacing)(1.5)} 0;
  box-sizing: content-box;

  @media ${utils_1.mediaQueries.md} {
    padding: ${(0, utils_2.calculateSpacing)(1)} 0;
  }

  @media ${utils_1.mediaQueries.xl} {
    padding: ${(0, utils_2.calculateSpacing)(1.5)} 0;
  }
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 11601:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.SearchClickable = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const react_intl_1 = __webpack_require__(46984);
const styles_1 = __webpack_require__(41163);
const Search_1 = __importDefault(__webpack_require__(36652));
const Close_1 = __importDefault(__webpack_require__(80046));
const ContainerEventManager_1 = __webpack_require__(39909);
const types_1 = __webpack_require__(76066);
const translations_1 = __importDefault(__webpack_require__(56477));
function SearchClickable({ type }) {
    if (type === types_1.SearchClickableType.DRAWER) {
        return (react_1.default.createElement(styles_1.SearchClickableWrapper, { tabIndex: 0 },
            react_1.default.createElement(SearchClickableContent, { type: type })));
    }
    if (type === types_1.SearchClickableType.TOP_NAVBAR) {
        return (react_1.default.createElement(styles_1.SearchClickableTriggerableContainerWrapper, null,
            react_1.default.createElement(SearchClickableContent, { type: type })));
    }
    return null;
}
exports.SearchClickable = SearchClickable;
function SearchClickableContent({ type }) {
    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
    // eslint-disable-next-line @typescript-eslint/unbound-method
    const { formatMessage } = (0, react_intl_1.useIntl)();
    return (react_1.default.createElement(styles_1.SearchForm, { onSubmit: (event) => onSubmit(event, searchQuery) },
        react_1.default.createElement(styles_1.SearchIconWrapper, null,
            react_1.default.createElement(Search_1.default, null)),
        react_1.default.createElement(styles_1.SearchInput, { tabIndex: type === types_1.SearchClickableType.TOP_NAVBAR ? 0 : undefined, value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: formatMessage(translations_1.default.search), "aria-label": formatMessage(translations_1.default.search) }),
        react_1.default.createElement(SearchActions, { hasCloseButton: type === types_1.SearchClickableType.TOP_NAVBAR, searchQuery: searchQuery, setSearchQuery: setSearchQuery })));
}
function onSubmit(event, searchQuery) {
    event.preventDefault();
    if (searchQuery.trim().length === 0) {
        return;
    }
    const rootUrl = window.location.origin;
    const searchUrl = `${rootUrl}/search?q=${searchQuery}`;
    window.location.assign(searchUrl);
}
function SearchActions({ hasCloseButton, searchQuery, setSearchQuery }) {
    // eslint-disable-next-line @typescript-eslint/unbound-method
    const { formatMessage } = (0, react_intl_1.useIntl)();
    const isSearchQueryEmpty = searchQuery.length === 0;
    if (hasCloseButton && isSearchQueryEmpty)
        return (react_1.default.createElement(styles_1.CloseButton, { type: "button", "aria-label": "close search", onClick: () => {
                ContainerEventManager_1.ContainerEventManager.emit(ContainerEventManager_1.ContainerEventType.TRIGGER, {
                    containerId: 'search_clickable',
                    isOpen: false
                });
            } },
            react_1.default.createElement(Close_1.default, null)));
    if (!isSearchQueryEmpty) {
        return (react_1.default.createElement(styles_1.CancelButton, { type: "button", "aria-label": formatMessage(translations_1.default.cancel), onClick: () => {
                setSearchQuery('');
            } }, formatMessage(translations_1.default.cancel)));
    }
    return null;
}
//# sourceMappingURL=SearchClickable.js.map

/***/ }),

/***/ 92033:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.SearchClickable = void 0;
var SearchClickable_1 = __webpack_require__(11601);
Object.defineProperty(exports, "SearchClickable", ({ enumerable: true, get: function () { return SearchClickable_1.SearchClickable; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 41163:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CancelButton = exports.CloseButton = exports.SearchInput = exports.SearchForm = exports.SearchIconWrapper = exports.SearchClickableWrapper = exports.SearchClickableTriggerableContainerWrapper = void 0;
const styled_components_1 = __importDefault(__webpack_require__(92168));
const utils_1 = __webpack_require__(26865);
const design_1 = __webpack_require__(75163);
exports.SearchClickableTriggerableContainerWrapper = styled_components_1.default.div.withConfig({
    displayName: 'SearchClickableTriggerableContainerWrapper'
}) `
  width: 100%;
`;
exports.SearchClickableWrapper = styled_components_1.default.div.withConfig({
    displayName: 'SearchClickableWrapper'
}) `
  width: 100%;
  height: 100%;
  margin: 16px 0;

  outline: none;
`;
exports.SearchIconWrapper = styled_components_1.default.label.withConfig({
    displayName: 'SearchIconWrapper'
}) `
  min-width: 32px;

  width: 16px;
  height: 16px;

  display: flex;
  justify-content: center;
  align-items: center;

  margin-right: -8px;

  svg {
    width: 16px;
    height: 16px;
  }
`;
exports.SearchForm = styled_components_1.default.form.withConfig({
    displayName: 'SearchForm'
}) `
  ${(0, utils_1.getTypographyStyles)(`typography.definitions.utility.input-core`)};

  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;

  box-sizing: border-box;

  padding: 0;
  margin: 0;
  outline: none;

  border-radius: 100px;
  border: 1px solid var(${design_1.Design.Color.BorderNavigation});

  background-color: var(${design_1.Design.Color.SurfaceNavigationElevated});

  color: var(${design_1.Design.Color.TextDisabled});

  &:focus-within {
    background-color: var(${design_1.Design.Color.Surface});
    color: var(${design_1.Design.Color.TextNavigation});
    border: 1px solid var(${design_1.Design.Color.BorderNavigationActive});
  }

  &:focus-within {
    ${exports.SearchIconWrapper} {
      display: none;
    }
  }
`;
exports.SearchInput = styled_components_1.default.input.withConfig({
    displayName: 'SearchInput'
}) `
  width: 100%;
  /** For text input vertical alignment */
  height: 40px;
  line-height: 40px;

  border: none;
  background-color: transparent;
  outline: none;
  padding: 0;

  margin-left: 16px;
`;
const SearchActionButton = styled_components_1.default.button.withConfig({
    displayName: 'SearchActionButton'
}) `
  text-decoration: none;

  &:hover,
  &:focus,
  &:active {
    text-decoration: none;
  }

  background-color: transparent;

  display: flex;
  justify-content: center;
  align-items: center;

  outline: none;
  border: 1px solid transparent;
  border-radius: 100px;
  &:focus {
    border: 1px solid var(${design_1.Design.Color.BorderFocus});
  }

  &:hover {
    border: 1px solid var(${design_1.Design.Color.BorderNavigationActive});
  }

  margin: 2px 2px 2px 8px;
`;
exports.CloseButton = (0, styled_components_1.default)(SearchActionButton).withConfig({
    displayName: 'CloseButton'
}) `
  width: 38px;
  height: 34px;

  svg {
    width: 16px;
    height: 16px;
  }
`;
exports.CancelButton = (0, styled_components_1.default)(SearchActionButton).withConfig({
    displayName: 'CancelButton'
}) `
  height: 34px;
  padding: 3px 4px;

  ${(0, utils_1.getTypographyStyles)(`typography.definitions.navigation.text-tertiary`)};

  color: var(${design_1.Design.Color.TextNavigation});
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 56477:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
const react_intl_1 = __webpack_require__(46984);
exports["default"] = (0, react_intl_1.defineMessages)({
    search: {
        id: 'SearchClickable.Search',
        defaultMessage: 'Search',
        description: 'Label for search clickable input placeholder'
    },
    cancel: {
        id: 'SearchClickable.Cancel',
        defaultMessage: 'Cancel',
        description: 'Label for search clickable cancel button'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 33174:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.OneNavStickyHeroAd = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const ad_1 = __webpack_require__(19607);
const OneNavRow_1 = __webpack_require__(13325);
function OneNavStickyHeroAd() {
    const { setIsHeroAdVisible } = (0, react_1.useContext)(OneNavRow_1.OneNavRowContext);
    return (react_1.default.createElement(ad_1.StickyHeroAd, { shouldHoldSpace: true, setIsHeroAdVisible: setIsHeroAdVisible }));
}
exports.OneNavStickyHeroAd = OneNavStickyHeroAd;
//# sourceMappingURL=OneNavStickyHeroAd.js.map

/***/ }),

/***/ 70293:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.OneNavStickyHeroAd = void 0;
var OneNavStickyHeroAd_1 = __webpack_require__(33174);
Object.defineProperty(exports, "OneNavStickyHeroAd", ({ enumerable: true, get: function () { return OneNavStickyHeroAd_1.OneNavStickyHeroAd; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 15445:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.TextClickable = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const styles_1 = __webpack_require__(35932);
const ClickableIcon_1 = __webpack_require__(33916);
const helpers_1 = __webpack_require__(32453);
const types_1 = __webpack_require__(76066);
const OneNavContext_1 = __webpack_require__(99095);
function TextClickable(props) {
    const { designSettings, isHighlighted, states, status = types_1.ClickableStatus.DEFAULT, trackingData = {}, role, 'aria-expanded': ariaExpanded, 'aria-controls': ariaControls, 'aria-labelledby': ariaLabelledBy } = props;
    const { layout, containerId } = (0, react_1.useContext)(OneNavContext_1.OneNavContext);
    const [isActive, setIsActive] = (0, react_1.useState)(false);
    const textClickableRef = (0, react_1.useRef)(null);
    const action = props.action;
    const { targetId, usedRole, target, rel, url, currentLabel, currentStateIcon, currentBadge } = (0, helpers_1.extractTextClickableData)(action, isActive, states, role);
    (0, helpers_1.useTextClickableTrigger)(setIsActive, targetId);
    const handleClick = (0, helpers_1.getHandleClick)(textClickableRef, containerId, isActive, action, status, trackingData, states);
    const isDisabled = status === types_1.ClickableStatus.DISABLED;
    const { badgePosition = types_1.GridPositionValue.START, labelBlockPosition = types_1.GridPositionValue.START, stateIconPosition = types_1.GridPositionValue.END } = designSettings?.gridPosition ?? {};
    return (react_1.default.createElement(styles_1.TextClickableStyled, { component: types_1.Component.TEXT_CLICKABLE, action: action, states: states, "data-testid": targetId, "data-target-id": targetId, ref: textClickableRef, href: url || undefined, target: !isDisabled ? target : undefined, rel: !isDisabled ? rel : undefined, onClick: handleClick, onKeyDown: (event) => (0, helpers_1.onKeyDown)(event.nativeEvent, handleClick), designSettings: designSettings, label: currentLabel, badge: currentBadge, stateIcon: currentStateIcon, isActive: status === types_1.ClickableStatus.ACTIVE, className: isDisabled ? 'disabled' : '', tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled ? true : undefined, "aria-hidden": isDisabled ? true : undefined, role: usedRole, "aria-expanded": ariaExpanded, "aria-controls": ariaControls, "aria-labelledby": ariaLabelledBy, layout: layout, as: url ? 'a' : 'span', isHighlighted: isHighlighted },
        react_1.default.createElement(styles_1.TextClickableLabelBlock, { badgePosition: badgePosition, areaName: labelBlockPosition, hasGap: currentLabel != null && currentBadge != null },
            currentBadge && react_1.default.createElement(ClickableIcon_1.ClickableIcon, { icon: currentBadge }),
            currentLabel && (react_1.default.createElement(styles_1.TextClickableLabel, { "data-snowplow-event-label": true }, currentLabel))),
        currentStateIcon && (react_1.default.createElement(ClickableIcon_1.ClickableIcon, { icon: currentStateIcon, areaName: stateIconPosition }))));
}
exports.TextClickable = TextClickable;
//# sourceMappingURL=TextClickable.js.map

/***/ }),

/***/ 64781:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.TRIGGER_ROW_DATA_ATTRIBUTE = void 0;
/** Data attribute name to get nearest row. The attribute was assigned to all 'OneNavRowGrid' components. */
exports.TRIGGER_ROW_DATA_ATTRIBUTE = '[data-trigger-row="true"]';
//# sourceMappingURL=constants.js.map

/***/ }),

/***/ 32453:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getTriggerableContainerPosition = exports.useTextClickableTrigger = exports.getHandleClick = exports.onKeyDown = exports.extractTextClickableData = void 0;
const react_1 = __webpack_require__(96540);
const types_1 = __webpack_require__(76066);
const utils_1 = __webpack_require__(66593);
const ContainerEventManager_1 = __webpack_require__(39909);
const constants_1 = __webpack_require__(64781);
const constants_2 = __webpack_require__(96472);
function extractTextClickableData(action, isActive, states, role) {
    const currentState = isActive && states?.active ? states.active : states?.default;
    const currentLabel = currentState?.label;
    const currentStateIcon = currentState?.stateIcon;
    const currentBadge = currentState?.badge;
    const target = action?.type === types_1.ActionType.LINK ? action.target : null;
    const rel = action?.type === types_1.ActionType.LINK ? action.rel : undefined;
    const usedRole = role ?? (action?.type === types_1.ActionType.TRIGGER ? 'button' : undefined);
    const url = getUrl(action);
    const targetId = getTargetId(action);
    return {
        target,
        rel,
        url,
        currentStateIcon,
        currentLabel,
        currentBadge,
        usedRole,
        targetId
    };
}
exports.extractTextClickableData = extractTextClickableData;
function onKeyDown(event, handle) {
    if (event.key === constants_2.ACCESSIBILITY.KEY_ENTER) {
        handle(event);
    }
}
exports.onKeyDown = onKeyDown;
function getHandleClick(textClickableRef, containerId, isActive, action, status, trackingData, states) {
    const targetId = getTargetId(action);
    return (event) => {
        if (status === types_1.ClickableStatus.DISABLED) {
            event.preventDefault();
            return;
        }
        if (action.type === types_1.ActionType.LINK) {
            onLinkClick(event, trackingData, states, containerId);
            return;
        }
        if (action.type === types_1.ActionType.ACCORDION) {
            onAccordionClick(event, trackingData, states);
            return;
        }
        if (targetId == null) {
            return;
        }
        if (action.type === types_1.ActionType.SEQ_LEVEL) {
            onSeqLevelClick(event, targetId, action, states);
            return;
        }
        if (action.type === types_1.ActionType.TRIGGER) {
            onTriggerClick(event, targetId, isActive, textClickableRef, action, states);
            return;
        }
        if (action.type === types_1.ActionType.TRIGGER_AND_SEQ_LEVEL) {
            onTriggerAndSeqLevelClick(event, targetId, isActive, textClickableRef, action, states);
        }
    };
}
exports.getHandleClick = getHandleClick;
function onLinkClick(event, trackingData, states, containerId) {
    utils_1.SnowplowEvent.trackClickable({
        event,
        label: states.default.label,
        subject: trackingData.subject ?? containerId,
        trackingStatus: trackingData.status
    }, trackingData.schema);
}
function onAccordionClick(event, trackingData, states) {
    event.preventDefault();
    utils_1.SnowplowEvent.trackClickable({
        event,
        label: states.default.label,
        subject: trackingData.subject,
        trackingStatus: trackingData.status
    }, trackingData.schema);
}
function onSeqLevelClick(event, targetId, action, states) {
    event.preventDefault();
    ContainerEventManager_1.ContainerEventManager.emit(ContainerEventManager_1.ContainerEventType.SEQ_LEVEL, {
        containerId: targetId,
        seqLevel: action.seqLevel
    });
    utils_1.SnowplowEvent.trackClickable({
        event,
        label: states.default.label,
        subject: utils_1.ClickableTrackingSubject.SEQ_LEVEL
    });
}
function onTriggerClick(event, targetId, isActive, textClickableRef, action, states) {
    event.preventDefault();
    ContainerEventManager_1.ContainerEventManager.emit(ContainerEventManager_1.ContainerEventType.SEQ_LEVEL, {
        containerId: targetId,
        seqLevel: 'default'
    });
    ContainerEventManager_1.ContainerEventManager.emit(ContainerEventManager_1.ContainerEventType.TRIGGER, {
        containerId: targetId,
        position: getTriggerableContainerPosition(textClickableRef, action.relatedRowId),
        triggerElement: textClickableRef.current,
        isOpen: !isActive
    });
    utils_1.SnowplowEvent.trackClickable({
        event,
        label: states.default.label,
        subject: targetId,
        trackingStatus: isActive,
        isWithoutContentData: true
    });
}
function onTriggerAndSeqLevelClick(event, targetId, isActive, textClickableRef, action, states) {
    event.preventDefault();
    ContainerEventManager_1.ContainerEventManager.emit(ContainerEventManager_1.ContainerEventType.SEQ_LEVEL, {
        containerId: targetId,
        seqLevel: action.seqLevel
    });
    utils_1.SnowplowEvent.trackClickable({
        event,
        label: states.default.label,
        subject: targetId,
        trackingStatus: isActive,
        isWithoutContentData: true
    });
    const isContainerOpen = !!document.querySelector(`[data-active-triggerable-container="${action.trigger}"]`);
    const seqLevelElement = document.querySelector(`[data-seq-level="${action.seqLevel}"]`);
    const seqLevel = seqLevelElement?.getAttribute('data-seq-level');
    /** Prevents opening the container if it is already open. */
    if (isContainerOpen && seqLevel !== action.seqLevel) {
        return;
    }
    ContainerEventManager_1.ContainerEventManager.emit(ContainerEventManager_1.ContainerEventType.TRIGGER, {
        containerId: targetId,
        position: getTriggerableContainerPosition(textClickableRef, action.relatedRowId),
        triggerElement: textClickableRef.current,
        isOpen: !isActive
    });
}
function useTextClickableTrigger(setIsActive, targetId) {
    // eslint-disable-next-line consistent-return
    (0, react_1.useEffect)(() => {
        if (targetId) {
            const triggerHandler = (event) => {
                const { isOpen, containerId } = event.detail;
                if (containerId === targetId) {
                    setIsActive(isOpen);
                }
            };
            ContainerEventManager_1.ContainerEventManager.add(ContainerEventManager_1.ContainerEventType.TRIGGER, triggerHandler);
            return () => ContainerEventManager_1.ContainerEventManager.remove(ContainerEventManager_1.ContainerEventType.TRIGGER, triggerHandler);
        }
    }, [setIsActive, targetId]);
}
exports.useTextClickableTrigger = useTextClickableTrigger;
function getTargetId(action) {
    if (action == null) {
        return undefined;
    }
    const hasContainerEvent = action.type === types_1.ActionType.TRIGGER ||
        action.type === types_1.ActionType.SEQ_LEVEL ||
        action.type === types_1.ActionType.TRIGGER_AND_SEQ_LEVEL;
    if (hasContainerEvent) {
        return action.trigger;
    }
    return undefined;
}
function getUrl(action) {
    switch (action?.type) {
        case types_1.ActionType.LINK:
        case types_1.ActionType.ACCORDION:
        case types_1.ActionType.SEQ_LEVEL:
        case types_1.ActionType.TRIGGER_AND_SEQ_LEVEL:
            return action.url;
        default:
            return null;
    }
}
/** If an action has relatedRowId, the triggerable container will be open in related to the row with that id,
 * if that row is visible.
 *
 * If the relatedRowId is FULL_PAGE, the position will be undefined and will open over the whole page.
 *
 * otherwise, it passes the position of the parent row.
 * */
function getTriggerableContainerPosition(textClickableRef, relatedRowId) {
    if (relatedRowId === 'FULL_PAGE') {
        return undefined;
    }
    const relatedRowBoundingClientRect = relatedRowId !== undefined
        ? document.getElementById(relatedRowId)?.getBoundingClientRect()
        : undefined;
    /** Check if the row exists and is visible */
    if (relatedRowBoundingClientRect && relatedRowBoundingClientRect.height > 0) {
        return relatedRowBoundingClientRect;
    }
    return textClickableRef.current
        ?.closest(constants_1.TRIGGER_ROW_DATA_ATTRIBUTE)
        ?.getBoundingClientRect();
}
exports.getTriggerableContainerPosition = getTriggerableContainerPosition;
//# sourceMappingURL=helpers.js.map

/***/ }),

/***/ 98360:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.TextClickableStyled = exports.TextClickable = void 0;
var TextClickable_1 = __webpack_require__(15445);
Object.defineProperty(exports, "TextClickable", ({ enumerable: true, get: function () { return TextClickable_1.TextClickable; } }));
var styles_1 = __webpack_require__(35932);
Object.defineProperty(exports, "TextClickableStyled", ({ enumerable: true, get: function () { return styles_1.TextClickableStyled; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 77303:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.DEFAULT_VISIBILITY = void 0;
exports.DEFAULT_VISIBILITY = {
    sm: true,
    md: true,
    lg: true,
    xl: true,
    xxl: true,
    xxxl: true
};
//# sourceMappingURL=constants.js.map

/***/ }),

/***/ 14694:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const react_1 = __importStar(__webpack_require__(96540));
const types_1 = __webpack_require__(76066);
const Accordion_1 = __webpack_require__(90019);
const TextClickable_1 = __webpack_require__(98360);
const LogoClickable_1 = __webpack_require__(43800);
const JourneyUnits_1 = __webpack_require__(73792);
const styles_1 = __webpack_require__(66138);
const StickyHeroAd_1 = __webpack_require__(70293);
const identity_units_1 = __webpack_require__(19460);
const OneNavContext_1 = __webpack_require__(99095);
const constants_1 = __webpack_require__(77303);
const CurationBanner_1 = __webpack_require__(10998);
const Banners_1 = __webpack_require__(95842);
const SearchClickable_1 = __webpack_require__(92033);
const notification_banner_1 = __webpack_require__(39471);
const FakeCurationBanner_1 = __webpack_require__(99215);
const Clickable = (props) => {
    const { component, visibility = constants_1.DEFAULT_VISIBILITY, ...restProps } = props;
    const { layout } = (0, react_1.useContext)(OneNavContext_1.OneNavContext);
    if (!component)
        return null;
    const NavigationComponent = navigationComponentMap[component];
    return (react_1.default.createElement(styles_1.StyledClickable, { "data-testid": "one-nav-clickable", visibilityOptions: visibility, component: component, layout: layout },
        react_1.default.createElement(NavigationComponent, { ...restProps })));
};
const navigationComponentMap = {
    [types_1.Component.TEXT_CLICKABLE]: TextClickable_1.TextClickable,
    [types_1.Component.ACCORDION]: Accordion_1.Accordion,
    [types_1.Component.JOURNEY_UNITS]: JourneyUnits_1.JourneyUnits,
    [types_1.Component.CURATION_BANNER]: CurationBanner_1.CurationBanner,
    [types_1.Component.RIBBON_BANNER]: Banners_1.RibbonBanner,
    [types_1.Component.LOGO_CLICKABLE]: LogoClickable_1.LogoClickable,
    [types_1.Component.STICKY_HERO_AD]: StickyHeroAd_1.OneNavStickyHeroAd,
    [types_1.Component.IDENTITY_UNITS]: identity_units_1.IdentityUnits,
    [types_1.Component.NOTIFICATION_BANNER]: () => react_1.default.createElement(notification_banner_1.NotificationBanner, { isOneNav: true }),
    [types_1.Component.SEARCH_CLICKABLE]: SearchClickable_1.SearchClickable,
    [types_1.Component.FAKE_CURATION_BANNER]: FakeCurationBanner_1.FakeCurationBanner
};
exports["default"] = (0, react_1.memo)(Clickable);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 66138:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.StyledClickable = void 0;
const styled_components_1 = __importStar(__webpack_require__(92168));
const ClickableStyleGenerator_1 = __webpack_require__(34628);
const types_1 = __webpack_require__(76066);
const design_1 = __webpack_require__(75163);
const styles_1 = __webpack_require__(59434);
exports.StyledClickable = styled_components_1.default.div.withConfig({
    displayName: 'StyledClickable',
    shouldForwardProp: (prop) => !['visibilityOptions'].includes(prop)
}) `
  ${({ component }) => getComponentStyle(component)};

  ${({ visibilityOptions, columns }) => new ClickableStyleGenerator_1.ClickableStyleGenerator(visibilityOptions, columns ? 'grid' : 'flex').generateStyleForBreakpoints()};

  ${({ layout }) => (layout === types_1.LayoutType.TRIGGERABLE_LEFT ||
    layout === types_1.LayoutType.TRIGGERABLE_RIGHT) &&
    (0, styled_components_1.css) `
      border-bottom: 1px solid var(${design_1.Design.Color.BorderSubNavigation});
      &:last-child {
        border-bottom: none;
      }
    `}
`;
function getComponentStyle(component) {
    if (component === types_1.Component.STICKY_HERO_AD) {
        return (0, styled_components_1.css) `
      width: 100%;

      /** The classname of StickyHeroAdWrapper */
      .ad-stickyhero {
        /** Makes the close button go to the end of the block. */
        width: 100%;
        /** Removes padding in the articles pages. */
        padding-top: 0;
      }
    `;
    }
    if (component === types_1.Component.JOURNEY_UNITS) {
        return (0, styled_components_1.css) `
      .journey-unit__container {
        width: 100%;
      }
    `;
    }
    if (component === types_1.Component.CURATION_BANNER) {
        return (0, styled_components_1.css) `
      width: 100%;

      & ${styles_1.CurationBannerWrapper} {
        width: 100%;
      }
    `;
    }
    if (component === types_1.Component.NOTIFICATION_BANNER) {
        return (0, styled_components_1.css) `
      width: 100%;
    `;
    }
    if (component === types_1.Component.SEARCH_CLICKABLE) {
        return (0, styled_components_1.css) `
      width: 100%;
    `;
    }
    if (component === types_1.Component.FAKE_CURATION_BANNER) {
        return (0, styled_components_1.css) `
      width: 100%;
    `;
    }
    if (component === types_1.Component.RIBBON_BANNER) {
        return (0, styled_components_1.css) `
      width: 100%;
    `;
    }
    return '';
}
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 98938:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.OneNav = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const OneNavContext_1 = __webpack_require__(99095);
const OneNavRow_1 = __webpack_require__(13325);
const OneNavSpacer_1 = __webpack_require__(15178);
const style_1 = __webpack_require__(16926);
const hooks_1 = __webpack_require__(92443);
const layoutMap_1 = __webpack_require__(80802);
const OneNav = ({ id, layout, rows, oneNavTheme }) => {
    const { oneNavContainerRef, contextValue, isCSR, seqLevel } = (0, hooks_1.useOneNavState)(id, layout, rows);
    const layoutConfig = layoutMap_1.layoutMap[layout];
    return (react_1.default.createElement(OneNavContext_1.OneNavContext.Provider, { value: contextValue },
        layoutConfig.hasSpacer && react_1.default.createElement(OneNavSpacer_1.OneNavSpacer, null),
        react_1.default.createElement(style_1.OneNavContainer, { "data-testid": `one-nav-container-${id}`, className: oneNavTheme, ref: oneNavContainerRef, isCSR: isCSR, layoutStyles: layoutConfig.containerStyles, as: layoutConfig.elementType, "data-seq-level": seqLevel }, rows.map((row, index) => (react_1.default.createElement(OneNavRow_1.OneNavRow, { key: index, ...row }))))));
};
exports.OneNav = OneNav;
//# sourceMappingURL=OneNav.js.map

/***/ }),

/***/ 99095:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.OneNavContext = void 0;
const react_1 = __webpack_require__(96540);
exports.OneNavContext = (0, react_1.createContext)(null);
//# sourceMappingURL=OneNavContext.js.map

/***/ }),

/***/ 15178:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.OneNavSpacer = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const style_1 = __webpack_require__(16926);
const OneNavContext_1 = __webpack_require__(99095);
const utils_1 = __webpack_require__(66593);
/**
 * Spacer Component to prevent content from being hidden behind the OneNav.
 */
const OneNavSpacer = () => {
    const { oneNavSpacerRef, oneNavContainerRef } = (0, react_1.useContext)(OneNavContext_1.OneNavContext);
    const [containerHeight, setContainerHeight] = (0, react_1.useState)(0);
    useResizeObserver(oneNavContainerRef, setContainerHeight);
    const isCSR = (0, utils_1.useIsCSR)();
    return (react_1.default.createElement(style_1.OneNavSpacerStyled, { ref: oneNavSpacerRef, height: containerHeight, isCSR: isCSR }));
};
exports.OneNavSpacer = OneNavSpacer;
/**
 * Custom hook that observes changes in the size of the navigation container.
 */
function useResizeObserver(containerRef, setContainerHeight) {
    (0, react_1.useEffect)(() => {
        const containerElement = containerRef.current;
        if (containerElement === null) {
            return;
        }
        const updateHeight = () => {
            setContainerHeight((currentHeight) => Math.max(currentHeight, containerElement.offsetHeight));
        };
        const resizeObserver = new ResizeObserver(updateHeight);
        resizeObserver.observe(containerElement);
        // eslint-disable-next-line consistent-return
        return () => {
            resizeObserver.disconnect();
        };
    }, [containerRef, setContainerHeight]);
}
//# sourceMappingURL=OneNavSpacer.js.map

/***/ }),

/***/ 22254:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.DEFAULT_SEQ_LEVEL = void 0;
exports.DEFAULT_SEQ_LEVEL = 'default';
//# sourceMappingURL=constants.js.map

/***/ }),

/***/ 92443:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.useOneNavState = void 0;
const react_1 = __webpack_require__(96540);
const utils_1 = __webpack_require__(66593);
const ContainerEventManager_1 = __webpack_require__(39909);
const constants_1 = __webpack_require__(22254);
function useOneNavState(id, layout, rows) {
    const isCSR = (0, utils_1.useIsCSR)();
    const oneNavContainerRef = (0, react_1.useRef)(null);
    const oneNavSpacerRef = (0, react_1.useRef)(null);
    const [accordionsState, setAccordionsState] = (0, react_1.useState)(null);
    const [seqLevel, setSeqLevel] = (0, react_1.useState)(constants_1.DEFAULT_SEQ_LEVEL);
    useSeqLevelModifier(id, setSeqLevel);
    const contextValue = {
        containerId: id,
        oneNavContainerRef,
        oneNavSpacerRef,
        layout,
        accordionsState,
        setAccordionsState,
        seqLevel,
        rowsCount: rows.length
    };
    return {
        oneNavContainerRef,
        contextValue,
        isCSR,
        layout,
        seqLevel
    };
}
exports.useOneNavState = useOneNavState;
function useSeqLevelModifier(id, setSeqLevel) {
    (0, react_1.useEffect)(() => {
        const triggerHandler = (event) => {
            const { containerId, seqLevel } = event.detail;
            if (containerId === id) {
                setSeqLevel(seqLevel ?? constants_1.DEFAULT_SEQ_LEVEL);
            }
        };
        ContainerEventManager_1.ContainerEventManager.add(ContainerEventManager_1.ContainerEventType.SEQ_LEVEL, triggerHandler);
        return () => ContainerEventManager_1.ContainerEventManager.remove(ContainerEventManager_1.ContainerEventType.SEQ_LEVEL, triggerHandler);
    }, [id, setSeqLevel]);
}
//# sourceMappingURL=hooks.js.map

/***/ }),

/***/ 68171:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.OneNav = void 0;
var OneNav_1 = __webpack_require__(98938);
Object.defineProperty(exports, "OneNav", ({ enumerable: true, get: function () { return OneNav_1.OneNav; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 16926:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.OneNavGlobalStylesOverride = exports.OneNavSpacerStyled = exports.TriggerableContainerHorizontal = exports.OneNavContainerVertical = exports.OneNavContainerHorizontal = exports.OneNavContainer = void 0;
const styled_components_1 = __importStar(__webpack_require__(92168));
const constants_1 = __webpack_require__(96472);
const utils_1 = __webpack_require__(26865);
const utils_2 = __webpack_require__(66593);
const design_1 = __webpack_require__(75163);
exports.OneNavContainer = styled_components_1.default.header
    .withConfig({
    displayName: 'OneNavContainer'
})
    .attrs({
    className: 'one-nav'
}) `
    display: flex;
    flex-direction: column;
    ${({ layoutStyles }) => layoutStyles}; /** based on the value of layoutMap */

    &.standard,
    .standard {
      ${({ theme }) => (0, design_1.shim)(theme, {
    [design_1.Design.Color.Surface]: 'colors.navigation.standard.background-primary',
    [design_1.Design.Color.BorderNavigation]: 'colors.navigation.standard.border',
    [design_1.Design.Color.BorderSubNavigation]: 'colors.navigation.standard.divider',
    [design_1.Design.Color.SurfaceNavigationOverlay]: 'colors.navigation.standard.overlay',
    [design_1.Design.Color.BorderFocus]: 'colors.navigation.standard.focus',
    [design_1.Design.Color.SurfaceNavigationFeatureBrandHover]: 'colors.navigation.standard.hover-brand',
    [design_1.Design.Color.SurfaceNavigationFeatureBrandPressed]: 'colors.navigation.standard.pressed-brand',
    [design_1.Design.Color.TextDisabled]: 'colors.navigation.standard.disabled',
    [design_1.Design.Color.TextNavigation]: 'colors.navigation.standard.item-primary',
    [design_1.Design.Color.BorderNavigationActive]: 'colors.navigation.standard.active',
    [design_1.Design.Color.TextNavigationAccent]: 'colors.navigation.standard.item-accent',
    [design_1.Design.Color.TextNavigationBrand]: 'colors.navigation.standard.item-brand',
    [design_1.Design.Color.TextNavigationFeature]: 'colors.navigation.standard.item-secondary',
    [design_1.Design.Color.SurfaceHover]: 'colors.navigation.standard.hover',
    [design_1.Design.Color.SurfacePressed]: 'colors.navigation.standard.pressed',
    [design_1.Design.Color.SurfaceNavigationFeatureBrand]: 'colors.navigation.standard.item-brand',
    [design_1.Design.Color.SurfaceNavigationElevated]: 'colors.navigation.standard.background-tertiary'
})}
    }

    &.inverted,
    .inverted {
      ${({ theme }) => (0, design_1.shim)(theme, {
    [design_1.Design.Color.Surface]: 'colors.navigation.inverted.background-primary',
    [design_1.Design.Color.BorderNavigation]: 'colors.navigation.inverted.border',
    [design_1.Design.Color.BorderSubNavigation]: 'colors.navigation.inverted.divider',
    [design_1.Design.Color.SurfaceNavigationOverlay]: 'colors.navigation.inverted.overlay',
    [design_1.Design.Color.BorderFocus]: 'colors.navigation.inverted.focus',
    [design_1.Design.Color.SurfaceNavigationFeatureBrandHover]: 'colors.navigation.inverted.hover-brand',
    [design_1.Design.Color.SurfaceNavigationFeatureBrandPressed]: 'colors.navigation.inverted.pressed-brand',
    [design_1.Design.Color.TextDisabled]: 'colors.navigation.inverted.disabled',
    [design_1.Design.Color.TextNavigation]: 'colors.navigation.inverted.item-primary',
    [design_1.Design.Color.BorderNavigationActive]: 'colors.navigation.inverted.active',
    [design_1.Design.Color.TextNavigationAccent]: 'colors.navigation.inverted.item-accent',
    [design_1.Design.Color.TextNavigationBrand]: 'colors.navigation.inverted.item-brand',
    [design_1.Design.Color.TextNavigationFeature]: 'colors.navigation.inverted.item-secondary',
    [design_1.Design.Color.SurfaceHover]: 'colors.navigation.inverted.hover',
    [design_1.Design.Color.SurfacePressed]: 'colors.navigation.inverted.pressed',
    [design_1.Design.Color.SurfaceNavigationFeatureBrand]: 'colors.navigation.inverted.item-brand',
    [design_1.Design.Color.SurfaceNavigationElevated]: 'colors.navigation.inverted.background-tertiary'
})}
    }
`;
exports.OneNavContainerHorizontal = (0, styled_components_1.css) `
  /** Position changes based on rendering environment (SSR vs. CSR). */
  position: ${({ isCSR }) => (isCSR ? 'fixed' : 'sticky')};
  z-index: ${constants_1.ZINDEX_MAP.oneNav};
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  max-height: max-content;
`;
exports.OneNavContainerVertical = (0, styled_components_1.css) `
  overflow: hidden;
  height: 100%;
  gap: ${({ gap }) => gap};
`;
exports.TriggerableContainerHorizontal = (0, styled_components_1.css) `
  width: 100%;
  height: 100%;
`;
/**
 * Styled component for the spacer element.
 * The spacer is used to compensate for the height of the OneNavContainer once it is fixed.
 * Adjusts its height based on the OneNavContainer's height.
 */
exports.OneNavSpacerStyled = styled_components_1.default.div.withConfig({
    displayName: 'OneNavSpacer',
    shouldForwardProp: (prop) => !['isCSR'].includes(prop)
}) `
  height: ${({ height, isCSR }) => (isCSR ? height : '0')}px;
  width: 100%;
`;
exports.OneNavGlobalStylesOverride = (0, styled_components_1.createGlobalStyle) `
    .onenav-site-navigation {
        /** Prevents scrolling or bounce behavior when reaching scroll limits */
        overscroll-behavior: none;

        /** used for more specificity when redefining styles */

        .page {
            /** removes padding-top on the whole page, which is set for different navigations */
            padding-top: 0 !important;

            /** prevents HeroAd from appearing in OneNav with unnecessary animation */

            .one-nav {
                .ad-stickyhero {
                    padding-top: 0;
                    position: relative;
                    top: 0;
                    transform: none;

                    .ad__slot--hero .cns-ads-stage {
                        padding: 8px 0;
                    }

                    /**
                      *  prevents ads from bouncing when the ‘X’ button is pressed and 
                      *  aligns this button with the burger button
                     */

                    .button.ad-stickyhero-button {
                        float: unset;
                        position: absolute;
                        width: max-content;
                        margin-right: ${(0, utils_1.calculateSpacing)(1)};

                        @media (max-width: ${utils_2.breakpointSizes.lg}) {
                            float: unset;
                            position: absolute;
                            width: max-content;
                        }

                        .button__icon-container {
                            max-width: max-content;
                        }
                    }
                }

                /** removes elements on pages with OneNav that take up unnecessary space */

                .cns-ads-flex {
                    .ad-height-hold {
                        display: none;
                    }
                }
            }

            /** this is to remove the spacing between OneNav and main content(main.page__main-content) on GQSports */

            .page__main-content {
                &::before {
                    height: 0;
                }
            }
        }

      /** Fix sticky ness issue of the VersoCommerceCollectionCuratedWrapper component with the help of "src/components/compositions/verso-commerce-collection-curated/hooks.ts" function*/
      [class^="VersoCommerceCollectionCuratedWrapper"] {
        [class^="FilterComponentWrapper"] {
          position: static;
        }
      }
    }
`;
//# sourceMappingURL=style.js.map

/***/ }),

/***/ 53476:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.OneNavArea = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const types_1 = __webpack_require__(76066);
const Clickable_1 = __importDefault(__webpack_require__(14694));
const styles_1 = __webpack_require__(73202);
const OneNavContext_1 = __webpack_require__(99095);
const constants_1 = __webpack_require__(77303);
const OneNavArea = ({ items, visibility, areaType, ...rest }) => {
    const { layout } = (0, react_1.useContext)(OneNavContext_1.OneNavContext);
    return (react_1.default.createElement(styles_1.OneNavAreaContainer, { "data-area-type": areaType, "data-testid": "one-nav-area-container", visibilityOptions: typeof visibility === 'object' ? visibility : constants_1.DEFAULT_VISIBILITY, "aria-label": "Navigation Area", layout: layout, "data-contains-sticky-element": areaType === types_1.AreaType.HEADER, areaType: areaType, ...rest }, items?.map((item, index) => (react_1.default.createElement(Clickable_1.default, { key: index, ...item })))));
};
exports.OneNavArea = OneNavArea;
//# sourceMappingURL=OneNavArea.js.map

/***/ }),

/***/ 22014:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.OneNavArea = void 0;
var OneNavArea_1 = __webpack_require__(53476);
Object.defineProperty(exports, "OneNavArea", ({ enumerable: true, get: function () { return OneNavArea_1.OneNavArea; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 73202:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.OneNavAreaContainer = void 0;
const styled_components_1 = __importStar(__webpack_require__(92168));
const types_1 = __webpack_require__(76066);
const utils_1 = __webpack_require__(26865);
const TextClickable_1 = __webpack_require__(98360);
const CSSVisibilityStyleGenerator_1 = __webpack_require__(17539);
const AbstractStyleGenerator_1 = __webpack_require__(17054);
const design_1 = __webpack_require__(75163);
exports.OneNavAreaContainer = styled_components_1.default.div.withConfig({
    displayName: 'OneNavAreaContainer'
}) `
  grid-template-columns: ${({ columns }) => columns};

  ${({ justifyContent }) => justifyContent &&
    new AbstractStyleGenerator_1.CSSPropertyStyleGenerator('justify-content', '', justifyContent).generateStyleForBreakpoints()};

  ${({ alignItems }) => alignItems &&
    new AbstractStyleGenerator_1.CSSPropertyStyleGenerator('align-items', '', alignItems).generateStyleForBreakpoints()};

  ${({ gap, layout }) => gap
    ? new AbstractStyleGenerator_1.CSSPropertyStyleGenerator('gap', '', gap).generateStyleForBreakpoints()
    : layout === types_1.LayoutType.HORIZONTAL && `gap: ${(0, utils_1.calculateSpacing)(1)}`};

  ${(props) => getAreaTypeStyle(props)}
`;
function getAreaTypeStyle(areaProps) {
    switch (areaProps.areaType) {
        case types_1.AreaType.HEADER:
            return getHeaderAreaStyle();
        case types_1.AreaType.CTA:
            return getCTAAreaStyle();
        case types_1.AreaType.DEFAULT:
        default:
            return getDefaultAreaStyle(areaProps);
    }
}
function getHeaderAreaStyle() {
    return (0, styled_components_1.css) `
    z-index: 10;
    background-color: var(${design_1.Design.Color.Surface});
    position: sticky;
    top: 0;
    border-bottom: 1px solid var(${design_1.Design.Color.BorderNavigation});
  `;
}
function getDefaultAreaStyle(areaProps) {
    const { visibilityOptions, columns } = areaProps;
    return (0, styled_components_1.css) `
    ${new CSSVisibilityStyleGenerator_1.CSSVisibilityStyleGenerator(visibilityOptions, columns ? 'grid' : 'flex').generateStyleForBreakpoints()};
  `;
}
function getCTAAreaStyle() {
    return (0, styled_components_1.css) `
    z-index: 10;
    background-color: var(${design_1.Design.Color.SurfaceNavigationFeatureBrand});
    position: fixed;
    bottom: 0;
    left: 0;
    width: calc(100% - 1rem);
    margin-bottom: 0.5rem;
    margin-left: 0.5rem;

    ${TextClickable_1.TextClickableStyled} {
      color: var(${design_1.Design.Color.TextNavigationFeature});

      &:hover {
        background-color: var(
          ${design_1.Design.Color.SurfaceNavigationFeatureBrandHover}
        );
      }

      :active {
        background-color: var(
          ${design_1.Design.Color.SurfaceNavigationFeatureBrandHover}
        );
      }
    }

    opacity: 0;
    animation: fadeIn 250ms linear 300ms forwards;

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  `;
}
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 11674:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.OneNavEnvironment = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styled_components_1 = __webpack_require__(92168);
const triggerable_container_1 = __webpack_require__(5026);
const error_boundary_1 = __importDefault(__webpack_require__(48496));
const types_1 = __webpack_require__(76066);
const OneNav_1 = __webpack_require__(68171);
const style_1 = __webpack_require__(16926);
const helpers_1 = __webpack_require__(91269);
const types_2 = __webpack_require__(43481);
const ThemeContext_1 = __webpack_require__(48171);
function OneNavEnvironment({ oneNav, oneNavTriggerableContainers, theme, fullPageTheme, featureValue: experimentFlags, brandName }) {
    const { theme: pageTheme } = (0, ThemeContext_1.useThemingContext)();
    /** In case of transformer failure, we only do not render the one nav, prevent a page crash. */
    if (oneNav == null) {
        return null;
    }
    /** In SSR, ErrorBoundary does not work. */
    try {
        // Destructure core OneNav properties, capturing the original rows as initialRows so we can apply A/B test filtering without mutating the source data
        const { id, layout, rows: initialRows, theme: oneNavTheme } = oneNav;
        const usedTheme = (0, helpers_1.getTheme)(oneNavTheme, theme, pageTheme || fullPageTheme);
        /* ----------------------------------------------------------------------- */
        /* Experimental A/B Test Code - Remove once the notice-banner experiment concludes */
        /* ----------------------------------------------------------------------- */
        // Dynamically build the feature-flag key (e.g. "gq-notice-banner") and read the variant
        const experimentBannerPosition = experimentFlags?.[`${brandName.toLowerCase()}-notice-banner`]?.props
            ?.experimentBannerPosition;
        // Apply our A/B filter to the OneNav rows: only keep the banner when
        // - ABOVE_NAV and this is the first row
        // - BELOW_HERO_AD and this is the last row
        // Remove this logic once the test concludes.
        let rows = applyNoticeBannerTest(initialRows, experimentBannerPosition);
        /** REMOVE AFTER CURATION BANNER EXPERIMENT IS DONE */
        rows = applyVogueCurationBannerExperiment(rows, experimentFlags);
        return (react_1.default.createElement(error_boundary_1.default, null,
            react_1.default.createElement(styled_components_1.ThemeProvider, { theme: { oneNavTheme: usedTheme } },
                react_1.default.createElement(style_1.OneNavGlobalStylesOverride, null),
                react_1.default.createElement(OneNav_1.OneNav, { id: id, layout: layout, rows: rows, oneNavTheme: usedTheme }),
                react_1.default.createElement(OneNavTriggerableContainers, { oneNavTheme: usedTheme, oneNavTriggerableContainers: oneNavTriggerableContainers }))));
    }
    catch (error) {
        console.error('[OneNavEnvironment] Caught error:', error);
        return react_1.default.createElement(react_1.default.Fragment, null);
    }
}
exports.OneNavEnvironment = OneNavEnvironment;
function OneNavTriggerableContainers({ oneNavTheme, oneNavTriggerableContainers }) {
    /** In case of transformer failure, we only do not render the triggerable container, prevent a page crash. */
    if (oneNavTriggerableContainers == null ||
        oneNavTriggerableContainers.length === 0) {
        return null;
    }
    return (react_1.default.createElement(react_1.default.Fragment, null, oneNavTriggerableContainers.map(({ id, layout, theme, hasOverlay, hasDefaultContainer, rows }) => (react_1.default.createElement(triggerable_container_1.TriggerableContainer, { key: id, id: id, layout: layout, theme: theme ?? oneNavTheme, hasOverlay: hasOverlay ?? true, hasDefaultContainer: hasDefaultContainer ?? true },
        react_1.default.createElement(OneNav_1.OneNav, { id: id, layout: layout, rows: rows, oneNavTheme: oneNavTheme }))))));
}
/** REMOVE AFTER CURATION BANNER EXPERIMENT IS DONE */
function applyVogueCurationBannerExperiment(rows, experimentFlags) {
    const useCase = experimentFlags?.curation_banner?.props?.['vogue-shopping-curation-banner'] ?? 'C';
    const otherRows = rows.filter((row) => !row.isCurationBannerExperiment);
    if (!useCase) {
        return otherRows;
    }
    const curationBannerRows = rows.filter((row) => row.isCurationBannerExperiment);
    if (curationBannerRows.length === 0) {
        return otherRows;
    }
    const usedCurationBanner = curationBannerRows.filter((_, index) => index === USE_CASE_MAP[useCase])[0];
    otherRows.splice(otherRows.length - 1, 0, usedCurationBanner);
    return otherRows;
}
/** Use case documentation: https://cnissues.atlassian.net/browse/LS4-1285 */
/** The order in config matters, the values are based on the order of rows. */
const USE_CASE_MAP = {
    A: 0,
    B: 1,
    C: 2,
    D: 3
};
/**
 * Type-guard to identify NotificationBanner items for A/B testing.
 * @param item - An item that might be a Clickable or Transformable
 * @returns True if the item is a NotificationBannerProps
 * @note THIS EXPERIMENTAL HELPER WILL BE REMOVED ONCE THE A/B TEST ENDS.
 * @note This check incurs a significant performance cost on large item arrays; consider optimizing or moving this logic upstream if keeping it long-term.
 */
function isNotificationBanner(item) {
    return (typeof item.component === 'string' &&
        item.component === types_1.Component.NOTIFICATION_BANNER);
}
/**
 * Filters rows to include or exclude notification-banner items based on experiment variant.
 * @param rows - The original OneNav rows configuration
 * @param experimentBannerPosition - The current experiment variant determining banner position
 * @returns A new rows array with banners filtered according to A/B test rules
 * @note THIS EXPERIMENTAL FILTER WILL BE REMOVED WHEN THE EXPERIMENT CONCLUDES.
 * @note This per-row, per-item filtering has a sizable performance impact; consider alternate A/B injection strategies if performance becomes an issue.
 */
function applyNoticeBannerTest(rows, experimentBannerPosition) {
    const firstIdx = 0;
    const lastIdx = rows.length - 1;
    return rows.map((row, rowIdx) => ({
        ...row,
        areas: row.areas.map((area) => {
            if (!area.items)
                return area;
            return {
                ...area,
                items: area.items.filter((item) => {
                    if (!isNotificationBanner(item)) {
                        // always keep everything else
                        return true;
                    }
                    // it’s a banner—only keep it if:
                    // • ABOVE_NAV AND this is the first row
                    // • BELOW_HERO_AD AND this is the last row
                    if (experimentBannerPosition === types_2.NotificationBannerPosition.ABOVE_NAV &&
                        rowIdx === firstIdx) {
                        return true;
                    }
                    if (experimentBannerPosition ===
                        types_2.NotificationBannerPosition.BELOW_HERO_AD &&
                        rowIdx === lastIdx) {
                        return true;
                    }
                    // otherwise strip it out
                    return false;
                })
            };
        })
    }));
}
//# sourceMappingURL=OneNavEnvironment.js.map

/***/ }),

/***/ 91269:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getTheme = void 0;
const types_1 = __webpack_require__(76066);
/**
 * Determines the theme based on inputs from the BasePage component and OneNavConfig.
 *
 * SHOULD BE REMOVED ASAP.
 *
 * @param {OneNavTheme} colorTheme - The theme provided by OneNavConfig.
 * @param {string} [theme] - The content header theme, configured in Copilot via the BasePage component.
 * @param {string} [fullPageTheme] - The full-page theme, including the header, also provided via the BasePage component.
 *
 * Context:
 * - "theme" and "fullPageTheme" are supplied by the BasePage component through a ContextProvider.
 *   - "theme" inverts only the content header's appearance.
 *   - "fullPageTheme" inverts the entire page's theme, including the header.
 * - "colorTheme" comes from OneNavConfig.
 *
 * @returns {OneNavTheme} - The resolved theme value.
 */
function getTheme(colorTheme, theme, fullPageTheme) {
    const finalOneNavTheme = colorTheme || theme || fullPageTheme;
    for (const themeName in types_1.OneNavTheme) {
        if (types_1.OneNavTheme[themeName] === finalOneNavTheme) {
            return types_1.OneNavTheme[themeName];
        }
    }
    return types_1.OneNavTheme.STANDARD;
}
exports.getTheme = getTheme;
//# sourceMappingURL=helpers.js.map

/***/ }),

/***/ 52760:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.OneNavEnvironment = void 0;
var OneNavEnvironment_1 = __webpack_require__(11674);
Object.defineProperty(exports, "OneNavEnvironment", ({ enumerable: true, get: function () { return OneNavEnvironment_1.OneNavEnvironment; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 22030:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.OneNavRow = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const OneNavArea_1 = __webpack_require__(22014);
const hooks_1 = __webpack_require__(67417);
const OneNavRowContainer_1 = __webpack_require__(24367);
const OneNavRowContext_1 = __webpack_require__(93579);
const types_1 = __webpack_require__(76066);
const OneNavContext_1 = __webpack_require__(99095);
const OneNavRow = ({ areas, scrollConfig, columns, visibility = true, rowType, id, ...rest }) => {
    const { seqLevel, layout } = (0, react_1.useContext)(OneNavContext_1.OneNavContext);
    const [isHeroAdVisible, setIsHeroAdVisible] = (0, react_1.useState)(false);
    const rowRef = (0, react_1.useRef)(null);
    const isRowVisible = (0, hooks_1.useIsRowVisible)(isHeroAdVisible, scrollConfig, rowType);
    /** For Seq Level Navigation rows.
     * Satisfies SEO and accessibility requirements.
     *
     * If it has "default" id, does not have id,
     * or is the top navbar row - LayoutType.HORIZONTAL, it should be rendered by default.
     */
    const isRowOpen = layout === types_1.LayoutType.HORIZONTAL || seqLevel === id || id === undefined;
    return (react_1.default.createElement(OneNavRowContext_1.OneNavRowContext.Provider, { value: { setIsHeroAdVisible } },
        react_1.default.createElement(OneNavRowContainer_1.OneNavRowContainer, { rowRef: rowRef, isRowVisible: isRowVisible, columns: columns, visibilityConfig: visibility, "aria-label": "Navigation Row", rowType: rowType ?? types_1.RowType.DEFAULT, id: id, ...rest }, isRowOpen &&
            areas.map((area, index) => react_1.default.createElement(OneNavArea_1.OneNavArea, { key: index, ...area })))));
};
exports.OneNavRow = OneNavRow;
//# sourceMappingURL=OneNavRow.js.map

/***/ }),

/***/ 24367:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.OneNavRowContainer = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const styles_1 = __webpack_require__(81327);
const types_1 = __webpack_require__(76066);
const OneNavContext_1 = __webpack_require__(99095);
const layoutMap_1 = __webpack_require__(80802);
const rowTypeMapper = {
    [types_1.RowType.DEFAULT]: 'nav',
    [types_1.RowType.HERO_AD]: 'div',
    [types_1.RowType.NO_STYLE]: 'div'
};
const OneNavRowContainer = ({ children, rowType = types_1.RowType.DEFAULT, rowRef, isRowVisible, id, ...props }) => {
    const { layout, seqLevel, rowsCount } = (0, react_1.useContext)(OneNavContext_1.OneNavContext);
    const layoutConfig = layoutMap_1.layoutMap[layout];
    return (react_1.default.createElement(styles_1.OneNavRowGrid, { ...props, id: id, ref: rowRef, rowType: rowType, isRowVisible: isRowVisible, "data-testid": "one-nav-row-grid", "data-trigger-row": true, layout: layout, seqLevel: seqLevel, rowId: id, rowsCount: rowsCount, as: rowTypeMapper[rowType], rowGridStyles: layoutConfig.rowGridStyles },
        react_1.default.createElement(styles_1.OneNavRowContent, { "data-testid": "one-nav-row-content", rowType: rowType, layout: layout, rowContentStyles: layoutConfig.rowContentStyles, ...props }, children)));
};
exports.OneNavRowContainer = OneNavRowContainer;
//# sourceMappingURL=OneNavRowContainer.js.map

/***/ }),

/***/ 93579:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.OneNavRowContext = void 0;
const react_1 = __webpack_require__(96540);
exports.OneNavRowContext = (0, react_1.createContext)(null);
//# sourceMappingURL=OneNavRowContext.js.map

/***/ }),

/***/ 37540:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ScrollDirection = exports.INTERSECTION_OBSERVER_THRESHOLD = exports.INTERSECTION_OBSERVER_OPTIONS = exports.SCROLL_BUFFER_PIXEL = exports.VISIBLE_ON_TOP_THRESHOLD_PIXEL = exports.DEFAULT_HIDE_THRESHOLD_PIXEL = void 0;
exports.DEFAULT_HIDE_THRESHOLD_PIXEL = 300;
exports.VISIBLE_ON_TOP_THRESHOLD_PIXEL = 300;
exports.SCROLL_BUFFER_PIXEL = 50;
exports.INTERSECTION_OBSERVER_OPTIONS = {
    root: null,
    threshold: [0, 0.75, 1] // event triggers when 0%, 75%, 100% of the spacer is visible
};
exports.INTERSECTION_OBSERVER_THRESHOLD = 0.75; // Show the heroAd row when 75% of the spacer is visible
var ScrollDirection;
(function (ScrollDirection) {
    ScrollDirection["UP"] = "up";
    ScrollDirection["DOWN"] = "down";
})(ScrollDirection = exports.ScrollDirection || (exports.ScrollDirection = {}));
//# sourceMappingURL=constants.js.map

/***/ }),

/***/ 67417:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getActiveBreakpoint = exports.getScrollConfigValue = exports.useIsRowVisible = void 0;
const react_1 = __webpack_require__(96540);
const throttle_1 = __importDefault(__webpack_require__(7350));
const types_1 = __webpack_require__(76066);
const utils_1 = __webpack_require__(66593);
const OneNavContext_1 = __webpack_require__(99095);
const constants_1 = __webpack_require__(37540);
/**
 * Custom hook to determine if a navigation row should be visible based on scroll position and direction.
 * The hook accounts for sticky ads and different hide-on-scroll behaviors.
 */
function useIsRowVisible(isHeroAdVisible, scrollConfig, rowType) {
    const { oneNavContainerRef, oneNavSpacerRef, layout } = (0, react_1.useContext)(OneNavContext_1.OneNavContext);
    const isCSR = (0, utils_1.useIsCSR)();
    const previousBaseScrollPositionRef = (0, react_1.useRef)(0);
    const previousStateUpdatePositionRef = (0, react_1.useRef)(0);
    const [isRowVisible, setIsRowVisible] = (0, react_1.useState)(true);
    const isSpacerInView = useOneNavSpacerIntersectionObserver(oneNavSpacerRef);
    (0, react_1.useEffect)(() => {
        const shouldIgnoreScroll = scrollConfig == null || layout !== types_1.LayoutType.HORIZONTAL || !isCSR;
        if (shouldIgnoreScroll) {
            return undefined;
        }
        const handleScroll = (0, throttle_1.default)(() => {
            if (rowType === types_1.RowType.HERO_AD) {
                updateHeroAdVisibility(setIsRowVisible, isHeroAdVisible, isSpacerInView);
                return;
            }
            if ('hideOnScroll' in scrollConfig) {
                updateRowVisibility(oneNavContainerRef, previousBaseScrollPositionRef, previousStateUpdatePositionRef, setIsRowVisible, scrollConfig.hideOnScroll);
            }
            if ('showOnlyOnTop' in scrollConfig) {
                updateRowVisibilityOnTop(oneNavContainerRef, setIsRowVisible, scrollConfig.showOnlyOnTop);
            }
            if ('showOnThreshold' in scrollConfig) {
                updateRowVisibilityReappearThreshold(oneNavContainerRef, setIsRowVisible, scrollConfig.showOnThreshold);
            }
        }, 300, { leading: true, trailing: true });
        handleScroll();
        window.addEventListener('scroll', handleScroll, { passive: true });
        return () => {
            window.removeEventListener('scroll', handleScroll);
            handleScroll.cancel();
        };
    }, [
        scrollConfig,
        isHeroAdVisible,
        oneNavContainerRef,
        rowType,
        isSpacerInView,
        isCSR,
        layout
    ]);
    return isRowVisible;
}
exports.useIsRowVisible = useIsRowVisible;
function updateRowVisibility(oneNavContainerRef, previousBaseScrollPositionRef, previousStateUpdatePositionRef, setIsRowVisible, hideOnScroll) {
    const currentScrollY = window.scrollY;
    const baseScrollPosition = getBaseScrollPosition(oneNavContainerRef, currentScrollY);
    const hideThreshold = getScrollConfigValue(hideOnScroll);
    if (hideThreshold == null) {
        return;
    }
    const scrollDirection = getScrollDirection(baseScrollPosition, previousBaseScrollPositionRef.current);
    previousBaseScrollPositionRef.current = baseScrollPosition;
    const isInHideZone = baseScrollPosition >= hideThreshold;
    if (scrollDirection === constants_1.ScrollDirection.DOWN && isInHideZone) {
        setIsRowVisible((prev) => updateVisibility(prev, false, baseScrollPosition, previousStateUpdatePositionRef));
    }
    else if (scrollDirection === constants_1.ScrollDirection.UP) {
        setIsRowVisible((prev) => updateVisibility(prev, true, baseScrollPosition, previousStateUpdatePositionRef));
    }
}
function updateHeroAdVisibility(setIsRowVisible, isHeroAdVisible, isSpacerInView) {
    setIsRowVisible(() => {
        if (isHeroAdVisible) {
            return true;
        }
        return isSpacerInView ?? false;
    });
}
function updateRowVisibilityOnTop(oneNavContainerRef, setIsRowVisible, showOnlyOnTop) {
    const currentScrollY = window.scrollY;
    const baseScrollPosition = getBaseScrollPosition(oneNavContainerRef, currentScrollY);
    const threshold = getScrollConfigValue(showOnlyOnTop);
    const isVisible = baseScrollPosition <= threshold;
    setIsRowVisible(isVisible);
}
function updateRowVisibilityReappearThreshold(oneNavContainerRef, setIsRowVisible, showOnThreshold) {
    const currentScrollY = window.scrollY;
    const baseScrollPosition = getBaseScrollPosition(oneNavContainerRef, currentScrollY);
    const threshold = getScrollConfigValue(showOnThreshold);
    const isOnTop = baseScrollPosition <= constants_1.VISIBLE_ON_TOP_THRESHOLD_PIXEL;
    const isVisible = baseScrollPosition >= threshold;
    setIsRowVisible(isOnTop || isVisible);
}
/**
 * Retrieves the scroll config value for the row.
 *
 * @return the threshold value if the row is eligible to be hidden;
 *         null if the row should remain visible.
 */
function getScrollConfigValue(scrollConfigValues) {
    switch (typeof scrollConfigValues) {
        case 'number':
            return scrollConfigValues;
        case 'boolean':
            return scrollConfigValues ? constants_1.DEFAULT_HIDE_THRESHOLD_PIXEL : null;
        case 'object': {
            const activeBreakpoint = getActiveBreakpoint(scrollConfigValues, window.innerWidth);
            const threshold = scrollConfigValues[activeBreakpoint];
            return getScrollConfigValue(threshold);
        }
        default:
            return null;
    }
}
exports.getScrollConfigValue = getScrollConfigValue;
function getActiveBreakpoint(breakpointsThresholds, windowWidth) {
    const breakpoints = Object.keys(breakpointsThresholds);
    const applicableBreakpoints = breakpoints.filter((breakpoint) => utils_1.breakpointSizes[breakpoint] <= windowWidth);
    const sortedBreakpoints = applicableBreakpoints.sort((a, b) => utils_1.breakpointSizes[b] - utils_1.breakpointSizes[a]);
    if (sortedBreakpoints[0]) {
        return sortedBreakpoints[0];
    }
    return types_1.Breakpoints.SM;
}
exports.getActiveBreakpoint = getActiveBreakpoint;
function getScrollDirection(currentBaseScrollY, previousBaseScrollY) {
    return currentBaseScrollY >= previousBaseScrollY
        ? constants_1.ScrollDirection.DOWN
        : constants_1.ScrollDirection.UP;
}
function updateVisibility(currentVisibility, isVisible, baseScrollPosition, previousStateUpdatePositionRef) {
    const isInScrollBuffer = Math.abs(previousStateUpdatePositionRef.current - baseScrollPosition) <
        constants_1.SCROLL_BUFFER_PIXEL;
    if (isInScrollBuffer) {
        return currentVisibility;
    }
    previousStateUpdatePositionRef.current = baseScrollPosition;
    return isVisible;
}
/**
 * Calculates the base scroll position used to determine whether to hide a row.
 * The sticky navigation bar height is subtracted from the scroll position
 * to ensure that the sticky Hero Ad is not factored into the visibility decision.
 *
 * @returns {number} The adjusted scroll position, excluding the sticky nav height.
 */
function getBaseScrollPosition(oneNavContainerRef, currentScrollPosition) {
    const oneNavHeight = oneNavContainerRef.current?.getBoundingClientRect().bottom ?? 0;
    const baseScrollPosition = currentScrollPosition - oneNavHeight;
    return Math.max(baseScrollPosition, 0);
}
/**
 * Custom hook that observes the visibility of the oneNavSpacer using the Intersection Observer API.
 * It updates the isSpacerInView state based on whether the spacer is within the viewport.
 */
function useOneNavSpacerIntersectionObserver(oneNavSpacerRef) {
    const [isSpacerInView, setIsSpacerInView] = (0, react_1.useState)(true);
    (0, react_1.useEffect)(() => {
        const spacerElement = oneNavSpacerRef.current;
        if (!spacerElement) {
            return undefined;
        }
        const observerCallback = (entries) => {
            entries.forEach((entry) => {
                const isVisible = entry.intersectionRatio >= constants_1.INTERSECTION_OBSERVER_THRESHOLD;
                setIsSpacerInView(isVisible);
            });
        };
        const intersectionObserver = new IntersectionObserver(observerCallback, constants_1.INTERSECTION_OBSERVER_OPTIONS);
        intersectionObserver.observe(spacerElement);
        return () => {
            intersectionObserver.disconnect();
        };
    }, [oneNavSpacerRef, setIsSpacerInView]);
    return isSpacerInView;
}
//# sourceMappingURL=hooks.js.map

/***/ }),

/***/ 13325:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.OneNavRowContext = exports.OneNavRow = void 0;
var OneNavRow_1 = __webpack_require__(22030);
Object.defineProperty(exports, "OneNavRow", ({ enumerable: true, get: function () { return OneNavRow_1.OneNavRow; } }));
var OneNavRowContext_1 = __webpack_require__(93579);
Object.defineProperty(exports, "OneNavRowContext", ({ enumerable: true, get: function () { return OneNavRowContext_1.OneNavRowContext; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 81327:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.OneNavRowContentVertical = exports.OneNavRowContentHorizontal = exports.OneNavRowContent = exports.OneNavRowGridVertical = exports.OneNavRowGridHorizontal = exports.OneNavRowGrid = void 0;
const styled_components_1 = __importStar(__webpack_require__(92168));
const AnimationStyleGenerator_1 = __webpack_require__(83158);
const types_1 = __webpack_require__(76066);
const CSSVisibilityStyleGenerator_1 = __webpack_require__(17539);
const AbstractStyleGenerator_1 = __webpack_require__(17054);
const design_1 = __webpack_require__(75163);
const SCROLL_RESERVE_SPACE_PIXEL = '1px';
exports.OneNavRowGrid = styled_components_1.default.nav.withConfig({
    displayName: 'OneNavRowGrid',
    shouldForwardProp: (prop) => ![
        'isRowVisible',
        'visibilityConfig',
        'rowType',
        'rowId',
        'rowGridStyles',
        'seqLevel',
        'rowsCount'
    ].includes(prop)
}) `
  height: 100%;

  ${({ rowType }) => getBackgroundColorProperty(rowType)}

  ${({ rowGridStyles }) => rowGridStyles};
`;
function getBackgroundColorProperty(rowType) {
    if (rowType !== types_1.RowType.HERO_AD) {
        return (0, styled_components_1.css) `
      background-color: var(${design_1.Design.Color.Surface});
    `;
    }
    return '';
}
exports.OneNavRowGridHorizontal = (0, styled_components_1.css) `
  ${({ visibilityConfig, isRowVisible, rowType }) => (0, styled_components_1.css) `
    ${visibilityConfig &&
    new CSSVisibilityStyleGenerator_1.CSSVisibilityStyleGenerator(visibilityConfig, 'grid').generateStyleForBreakpoints()};

    ${getVisibleRowStyle(isRowVisible, rowType)};

    ${getRowAnimation(isRowVisible, rowType)};
  `}

  @media (prefers-reduced-motion: reduce) {
    visibility: ${({ isRowVisible }) => (isRowVisible ? 'visible' : 'hidden')};
    opacity: ${({ isRowVisible }) => (isRowVisible ? '1' : '0')};
  }
`;
exports.OneNavRowGridVertical = (0, styled_components_1.css) `
  ${({ seqLevel, rowId, rowsCount }) => {
    if (rowsCount <= 1) {
        return '';
    }
    /**
     * If One Nav Component has Vertical Layout and number of rows where higher than 1, then it has Seq Level.
     * These are Seq Level specific styles.
     * */
    const isOpen = seqLevel === rowId;
    return (0, styled_components_1.css) `
      transform: translateX(${isOpen ? '0' : '5%'});
      opacity: ${isOpen ? '1' : '0'};
      height: ${isOpen ? '100%' : '0'};

      ${AnimationStyleGenerator_1.AnimationStyleGenerator.generateTransitionStyle({
        isOpen,
        enter: {
            animatedProperties: ['transform', 'opacity'],
            easingFunctions: ['0.33,1,0.68,1', '0,0,1,1'],
            durations: ['400ms', '300ms']
        },
        reducedMotionEnter: {
            animatedProperties: ['opacity'],
            easingFunctions: ['0.37,0,0.63,1'],
            durations: ['350ms']
        }
    })}
    `;
}}
`;
function getRowAnimation(isRowVisible, rowType) {
    if (rowType === types_1.RowType.HERO_AD) {
        return AnimationStyleGenerator_1.AnimationStyleGenerator.generateTransitionStyle({
            isOpen: isRowVisible,
            enter: {
                animatedProperties: ['grid-template-rows'],
                easingFunctions: ['0.12,0,0.39,0'],
                durations: ['500ms']
            },
            exit: {
                animatedProperties: ['grid-template-rows'],
                easingFunctions: ['0.61,1,0.88,1'],
                durations: ['550ms']
            },
            reducedMotionEnter: {
                animatedProperties: ['opacity', 'visibility', 'grid-template-rows'],
                easingFunctions: ['0.37,0,0.63,1', '1,1,0,0', '1,1,0,0'],
                durations: ['500ms', '500ms', '500ms']
            },
            reducedMotionExit: {
                animatedProperties: ['opacity', 'visibility', 'grid-template-rows'],
                easingFunctions: ['0.37,0,0.63,1', '1,1,0,0', '1,1,0,0'],
                durations: ['550ms', '550ms', '550ms']
            }
        });
    }
    return AnimationStyleGenerator_1.AnimationStyleGenerator.generateTransitionStyle({
        isOpen: isRowVisible,
        enter: {
            animatedProperties: ['grid-template-rows'],
            easingFunctions: ['0.12,0,0.39,0'],
            durations: ['200ms']
        },
        exit: {
            animatedProperties: ['grid-template-rows'],
            easingFunctions: ['0.61,1,0.88,1'],
            durations: ['350ms']
        },
        reducedMotionEnter: {
            animatedProperties: ['opacity', 'visibility', 'grid-template-rows'],
            easingFunctions: ['0.37,0,0.63,1', '1,1,0,0', '1,1,0,0'],
            durations: ['200ms', '200ms', '200ms']
        },
        reducedMotionExit: {
            animatedProperties: ['opacity', 'visibility', 'grid-template-rows'],
            easingFunctions: ['0.37,0,0.63,1', '1,1,0,0', '1,1,0,0'],
            durations: ['350ms', '350ms', '350ms']
        }
    });
}
function getVisibleRowStyle(isRowVisible, rowType) {
    const hasBorderBottom = rowType !== types_1.RowType.HERO_AD && rowType !== types_1.RowType.NO_STYLE;
    if (isRowVisible) {
        return (0, styled_components_1.css) `
      grid-template-rows: 1fr;

      border-bottom-color: var(${design_1.Design.Color.BorderNavigation});
      border-bottom-style: solid;
      border-bottom-width: ${hasBorderBottom ? '1px' : '0'};
    `;
    }
    return (0, styled_components_1.css) `
    grid-template-rows: 0fr;
    border-bottom: none;
  `;
}
exports.OneNavRowContent = styled_components_1.default.div.withConfig({
    displayName: 'OneNavRowContent',
    shouldForwardProp: (prop) => !['rowType', 'rowContentStyles', 'visibilityConfig'].includes(prop)
}) `
  ${({ gap }) => new AbstractStyleGenerator_1.CSSPropertyStyleGenerator('gap', '1rem', gap).generateStyleForBreakpoints()};

  ${({ rowType }) => rowType !== types_1.RowType.HERO_AD &&
    rowType !== types_1.RowType.NO_STYLE &&
    (0, styled_components_1.css) `
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    `}

  overflow: hidden;

  ${({ rowContentStyles }) => rowContentStyles};
`;
exports.OneNavRowContentHorizontal = (0, styled_components_1.css) `
  justify-items: stretch;

  ${({ visibilityConfig }) => visibilityConfig &&
    new CSSVisibilityStyleGenerator_1.CSSVisibilityStyleGenerator(visibilityConfig, 'grid').generateStyleForBreakpoints()};

  ${({ columns }) => new AbstractStyleGenerator_1.CSSPropertyStyleGenerator('grid-template-columns', 'repeat(12, minmax(min-content, 1fr))', columns).generateStyleForBreakpoints()};

  justify-content: ${({ justifyContent }) => new AbstractStyleGenerator_1.CSSPropertyStyleGenerator('justify-content', 'stretch', justifyContent).generateStyleForBreakpoints()};

  align-items: ${({ alignItems }) => new AbstractStyleGenerator_1.CSSPropertyStyleGenerator('align-items', 'center', alignItems).generateStyleForBreakpoints()};
`;
exports.OneNavRowContentVertical = (0, styled_components_1.css) `
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;

  scrollbar-width: none;

  ::-webkit-scrollbar {
    display: none;
  }

  overscroll-behavior-y: contain;
  overflow-y: scroll;

  /** Reserve space for the CTA area.*/
  &:has([data-area-type='${types_1.AreaType.CTA}']) {
    padding-bottom: 48px;
  }

  /** Make the content scrollable. Prevents propagation of scroll event to the document in collaboration with 'overscroll-behavior-y'. */

  &:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: -${SCROLL_RESERVE_SPACE_PIXEL};
    left: 0;
    right: 0;
    visibility: hidden;
  }
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 96396:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
const configured_component_1 = __webpack_require__(12892);
const themed_component_1 = __webpack_require__(20223);
const OneNavEnvironment_1 = __webpack_require__(52760);
exports["default"] = (0, themed_component_1.asThemedComponent)((0, configured_component_1.asConfiguredComponent)(OneNavEnvironment_1.OneNavEnvironment, 'OneNavEnvironment'));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 17539:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CSSVisibilityStyleGenerator = void 0;
const AbstractStyleGenerator_1 = __webpack_require__(17054);
class CSSVisibilityStyleGenerator extends AbstractStyleGenerator_1.AbstractStyleGenerator {
    constructor(visibilityOptions, cssValue) {
        super();
        this.visibilityOptions = visibilityOptions;
        this.cssValue = cssValue;
    }
    getStyleForBreakpoint(breakpoint) {
        /** The default value, if no value is defined, is visible. Only with explicit "false" it should not be visible. */
        return [
            [
                'display',
                this.visibilityOptions[breakpoint] === false ? 'none' : this.cssValue
            ]
        ];
    }
}
exports.CSSVisibilityStyleGenerator = CSSVisibilityStyleGenerator;
//# sourceMappingURL=CSSVisibilityStyleGenerator.js.map

/***/ }),

/***/ 67585:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ContainerEventManager = void 0;
class ContainerEventManager {
    static add(eventType, listener) {
        document.addEventListener(eventType, listener);
    }
    static remove(eventType, listener) {
        document.removeEventListener(eventType, listener);
    }
    static emit(eventType, detail) {
        const event = new CustomEvent(eventType, { detail });
        document.dispatchEvent(event);
    }
}
exports.ContainerEventManager = ContainerEventManager;
//# sourceMappingURL=ContainerEventManager.js.map

/***/ }),

/***/ 39909:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __exportStar = (this && this.__exportStar) || function(m, exports) {
    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ContainerEventManager = void 0;
var ContainerEventManager_1 = __webpack_require__(67585);
Object.defineProperty(exports, "ContainerEventManager", ({ enumerable: true, get: function () { return ContainerEventManager_1.ContainerEventManager; } }));
__exportStar(__webpack_require__(22764), exports);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 22764:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ContainerEventType = void 0;
var ContainerEventType;
(function (ContainerEventType) {
    ContainerEventType["TRIGGER"] = "container-trigger";
    ContainerEventType["SEQ_LEVEL"] = "seq-level";
})(ContainerEventType = exports.ContainerEventType || (exports.ContainerEventType = {}));
//# sourceMappingURL=types.js.map

/***/ }),

/***/ 80802:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.layoutMap = void 0;
const types_1 = __webpack_require__(76066);
const style_1 = __webpack_require__(16926);
const styles_1 = __webpack_require__(81327);
exports.layoutMap = {
    [types_1.LayoutType.HORIZONTAL]: {
        elementType: 'header',
        hasSpacer: true,
        containerStyles: style_1.OneNavContainerHorizontal,
        rowGridStyles: styles_1.OneNavRowGridHorizontal,
        rowContentStyles: styles_1.OneNavRowContentHorizontal
    },
    [types_1.LayoutType.TRIGGERABLE_TOP]: {
        elementType: 'div',
        hasSpacer: false,
        containerStyles: style_1.TriggerableContainerHorizontal,
        rowGridStyles: styles_1.OneNavRowGridHorizontal,
        rowContentStyles: styles_1.OneNavRowContentHorizontal
    },
    [types_1.LayoutType.TRIGGERABLE_RIGHT]: {
        elementType: 'div',
        hasSpacer: false,
        containerStyles: style_1.OneNavContainerVertical,
        rowGridStyles: styles_1.OneNavRowGridVertical,
        rowContentStyles: styles_1.OneNavRowContentVertical
    },
    [types_1.LayoutType.TRIGGERABLE_LEFT]: {
        elementType: 'div',
        hasSpacer: false,
        containerStyles: style_1.OneNavContainerVertical,
        rowGridStyles: styles_1.OneNavRowGridVertical,
        rowContentStyles: styles_1.OneNavRowContentVertical
    }
};
//# sourceMappingURL=layoutMap.js.map

/***/ }),

/***/ 69824:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.queryOpenAI = exports.processOpenAIResponse = exports.getOpenAIResponse = void 0;
/**
 * OpenAI API Service
 *
 * This module provides functions to interact with OpenAI's API from Verso
 */
let API_URL = 'https://openai-middleware-foodbrands.gp-nonprod-na-0.conde.digital/api/v1/responses';
/**
 * Sends a query to OpenAI and returns the response
 *
 * @param {string} query - The user's input query
 * @param {object} promptInfo - The prompt info object containing the ID and version
 * @param {string} previousResponseId - Optional ID of the previous response for conversation threading
 * @param {string} env - Optional environment of the site
 * @returns {Promise<object>} - The response from OpenAI
 */
const getOpenAIResponse = async (query, promptInfo, env, previousResponseId = null) => {
    if (!query) {
        throw new Error('Missing required parameter: query');
    }
    const payload = {
        input: query,
        prompt: promptInfo,
        previous_response_id: previousResponseId,
        store: true
    };
    if (env === 'production') {
        API_URL =
            'https://openai-middleware-foodbrands.gp-prod-na-0.conde.digital/api/v1/responses';
    }
    try {
        const httpResponse = await fetch(API_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(payload)
        });
        if (!httpResponse.ok) {
            const errorData = await httpResponse
                .json()
                .catch(() => ({ error: { message: 'Unknown error' } }));
            throw new Error(`OpenAI API error: ${errorData.error?.message || httpResponse.statusText}`);
        }
        const response = await httpResponse.json();
        const responseData = response?.data;
        if (responseData?.status && responseData?.status !== 'completed') {
            throw new Error(`OpenAI API error: ${responseData.error?.message || responseData.status}`);
        }
        return response;
    }
    catch (error) {
        console.error('Error calling OpenAI API:', error);
        throw error;
    }
};
exports.getOpenAIResponse = getOpenAIResponse;
/**
 * Process the OpenAI response to extract the relevant text and ID
 *
 * @param {object} response - The response from OpenAI API
 * @returns {object} - Object containing the extracted text response and response ID
 */
const processOpenAIResponse = (response) => {
    try {
        const result = {
            text: '',
            id: response?.data?.id || null
        };
        if (response?.success && response?.data) {
            if (response.data.output_text) {
                result.text = response.data.output_text;
                result.id = response.data.id;
                return result;
            }
            if (Array.isArray(response.data.output)) {
                const messageOutput = response.data.output.find((item) => item.type === 'message');
                if (messageOutput?.content && Array.isArray(messageOutput.content)) {
                    const textContent = messageOutput.content.find((content) => content.type === 'output_text' && content.text);
                    if (textContent?.text) {
                        result.text = textContent.text;
                        result.id = response.data.id;
                        return result;
                    }
                }
            }
        }
        console.warn('Unable to extract text from response:', response);
        result.text = 'Unable to extract response content';
        return result;
    }
    catch (error) {
        console.error('Error processing OpenAI response:', error);
        return {
            text: 'Error processing response',
            id: response?.data?.id || null
        };
    }
};
exports.processOpenAIResponse = processOpenAIResponse;
/**
 * Convenience function that combines getting and processing the OpenAI response
 *
 * @param {string} query - The user's input query
 * @param {object} promptInfo - The prompt info object containing the ID and version
 * @param {string} previousResponseId - Optional ID of the previous response for conversation threading
 * @param {string} env - Optional environment of the site
 * @returns {Promise<object>} - The processed response text and ID
 */
const queryOpenAI = async (query, promptInfo, env, previousResponseId = null) => {
    try {
        const response = await (0, exports.getOpenAIResponse)(query, promptInfo, previousResponseId, env);
        return (0, exports.processOpenAIResponse)(response);
    }
    catch (error) {
        console.error('Error querying OpenAI:', error);
        return {
            text: "Seems like I'm having trouble understanding your question. Please try again later.",
            id: null
        };
    }
};
exports.queryOpenAI = queryOpenAI;
exports["default"] = {
    getOpenAIResponse: exports.getOpenAIResponse,
    processOpenAIResponse: exports.processOpenAIResponse,
    queryOpenAI: exports.queryOpenAI
};
//# sourceMappingURL=AIChatBotService.js.map

/***/ }),

/***/ 31173:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState, useEffect, useRef, useMemo } = React;
const { connect: connectToStore } = __webpack_require__(67851);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(94528)/* ["default"] */ .A);
const CloseIcon = __webpack_require__(30616);
const { asConfiguredComponent } = __webpack_require__(12892);
const { interactionResponse } = __webpack_require__(56187);
const { doCloseModal } = __webpack_require__(44354);
const { trackNavigationEvent } = __webpack_require__(14307);
const { TrackComponentChannel } = __webpack_require__(78788);
const { Arrow } = __webpack_require__(91470);
const { queryOpenAI } = __webpack_require__(69824);
const { formatContextForAPI, formatResponseToHTML } = __webpack_require__(73739);
const { OpenAIModalBaseWrapper, OpenAIModalCloseButton, OpenAIModalHed, OpenAIModalHedSpanTag, OpenAIModalDisclaimerText, OpenAIModalHedWrapper, OpenAIModalFormWrapper, OpenAIModalFormTextInput, OpenAIModalFormTextInputWrapper, OpenAIModalForm, OpenAIModalFormLabel, OpenAIModalBodyWrapper, OpenAIChatContainer, OpenAIUserMessage, OpenAIBotMessage, OpenAILoaderContainer, LoadingDot, PromptSuggestionsContainer, PromptSuggestionsContainerWrapper, PromptSuggestionsHeader, PromptButtonsContainer, PromptButton, PromptButtonText, ScrollToBottomButton } = __webpack_require__(21686);
const mapStateToProps = (state) => {
    const { openAIModalConfig, engagementChatbotConfig, coreDataLayer: { content: { contentType }, site: { env } } } = state;
    return {
        ...openAIModalConfig,
        contentType,
        engagementChatbotConfig,
        env
    };
};
function getContentType(urlStr) {
    try {
        const path = new URL(urlStr).pathname;
        if (path.startsWith('/recipe')) {
            return 'recipe';
        }
        if (path.startsWith('/story')) {
            return 'article';
        }
        return null;
    }
    catch (e) {
        return 'invalid_url';
    }
}
const trackSnowplowEvent = async (url, linkClickText) => {
    const eventData = {
        type: 'click',
        label: linkClickText,
        subject: 'chatbot',
        ...(url && {
            items: [
                {
                    content_title: linkClickText,
                    content_url: url,
                    content_type: getContentType(url)
                }
            ]
        })
    };
    await interactionResponse();
    trackNavigationEvent(eventData, null, {
        skipDuplicateEvent: false
    });
};
/**
 * OpenAIModal component
 *
 * @param {object} props - React props
 * @param {object} [props.aiChatBotConfig] - Optional data to provide context for AI
 * @param {string} [props.className] - Optional top-level class to add
 * @param {object} [props.engagementChatbotConfig] - Optional data to provide context for AI
 * @param {boolean} [props.isOpenAIModalVisible] - Whether the modal is visible or not
 * @param {string} [props.contentType] - Optional content type to determine which prompts to show
 * @param {string} [props.env] - Optional environment of the site
 * @returns {ReactElement} <div>
 */
const OpenAIModal = ({ aiChatBotConfig, className, contentType, env, isOpenAIModalVisible, engagementChatbotConfig, modalSource }) => {
    useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'OpenAIModal'
        });
    }, []);
    const { data } = aiChatBotConfig || {};
    const { inputPlaceholderText, promptHeaderText, disclaimer, title, subHed, promptInfo, navigationEntryPointPrompts, contentTypePrompts } = engagementChatbotConfig || {};
    const { formatMessage } = useIntl();
    const inputRef = useRef(null);
    const chatContainerRef = useRef(null);
    const lastUserMessageRef = useRef(null);
    const [inputValue, setInputValue] = useState('');
    const [messages, setMessages] = useState([]);
    const [lastResponseId, setLastResponseId] = useState(null);
    const [userSubmittedQuery, setUserSubmittedQuery] = useState(false);
    const [isFirstQuery, setIsFirstQuery] = useState(true);
    const [isLoading, setIsLoading] = useState(false);
    const [suggestedPrompts, setSuggestedPrompts] = useState([]);
    const [showScrollButton, setShowScrollButton] = useState(false);
    const [placeholder, setPlaceholder] = useState(inputPlaceholderText || formatMessage(translations.textInputPlaceholderText));
    const [reducedPadding, setReducedPadding] = useState(false);
    const [submitted, setSubmitted] = useState(false);
    const defaultPrompts = useMemo(() => [
        formatMessage(translations.defaultPrompt1),
        formatMessage(translations.defaultPrompt2),
        formatMessage(translations.defaultPrompt3)
    ], [formatMessage]);
    const onClickClosedHandler = async () => {
        try {
            const currentModalSource = modalSource;
            doCloseModal();
            const placement = currentModalSource === 'StackedNavigation' ? 'top_nav' : 'inline';
            const eventData = {
                type: 'close',
                label: 'OpenAIModalCloseButton',
                subject: 'chatbot',
                placement
            };
            await interactionResponse();
            await trackNavigationEvent(eventData, null, {
                skipDuplicateEvent: false
            });
        }
        catch (error) {
            console.error(error.stack);
        }
    };
    const getPrompts = () => {
        if (contentType !== 'homepage' && contentType !== 'bundle') {
            return contentTypePrompts || [];
        }
        return navigationEntryPointPrompts || [];
    };
    const handleFocus = () => {
        setPlaceholder('');
    };
    const handleBlur = (e) => {
        if (!e?.target?.value && !placeholder) {
            setPlaceholder(inputPlaceholderText ||
                formatMessage(translations.textInputPlaceholderText));
        }
    };
    const handleInputChange = (_, value) => {
        setInputValue(value);
    };
    const handleSubmit = async (e, promptText = null) => {
        if (e) {
            e.preventDefault();
        }
        setReducedPadding(false);
        setIsLoading(true);
        if (inputRef.current) {
            setSubmitted(true);
            inputRef.current.value = '';
        }
        const textToSubmit = promptText || inputValue;
        if (!textToSubmit.trim()) {
            setIsLoading(false);
            if (inputRef.current) {
                setSubmitted(false);
            }
            return;
        }
        try {
            if (textToSubmit.trim()) {
                setMessages([...messages, { text: textToSubmit, isUser: true }]);
                setUserSubmittedQuery(true);
                let queryText = textToSubmit;
                // Only add context for the first query
                if (isFirstQuery && data) {
                    queryText = `Context:\n`;
                    queryText += formatContextForAPI(data.body, data.ingredientGroups, data.instructions);
                    queryText += `\nUser Query: ${textToSubmit}`;
                    setIsFirstQuery(false);
                    setReducedPadding(true);
                }
                const response = await queryOpenAI(queryText, promptInfo, lastResponseId, env);
                if (response && response.id) {
                    setLastResponseId(response.id);
                }
                setMessages((prevMessages) => [
                    ...prevMessages,
                    { text: response.text, isUser: false }
                ]);
                setIsLoading(false);
                if (inputRef.current) {
                    setSubmitted(false);
                }
            }
        }
        catch (error) {
            setMessages((prevMessages) => [
                ...prevMessages,
                {
                    text: `Seems like I'm having trouble understanding your question. Please try again later.`,
                    isUser: false
                }
            ]);
            console.warn('Error querying OpenAI: ', error.message);
            setIsLoading(false);
            if (inputRef.current) {
                setSubmitted(false);
            }
        }
        setInputValue('');
    };
    const handlePromptSelection = async (promptText) => {
        setInputValue(promptText);
        await handleSubmit(null, promptText);
        // Hide the prompts after selection
        setSuggestedPrompts([]);
    };
    const scrollToBottom = () => {
        if (chatContainerRef.current) {
            setShowScrollButton(false);
            setReducedPadding(true);
            chatContainerRef.current.scrollTo({
                top: chatContainerRef.current.scrollHeight,
                behavior: 'smooth'
            });
        }
    };
    useEffect(() => {
        if (isOpenAIModalVisible) {
            document.body.style.overflow = 'hidden';
            const prompts = getPrompts();
            setSuggestedPrompts(prompts.length > 0 ? prompts : defaultPrompts);
            setMessages([]);
            setLastResponseId(null);
            setIsFirstQuery(true);
            setInputValue('');
        }
        else {
            document.body.style.overflow = 'unset';
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [isOpenAIModalVisible]);
    useEffect(() => {
        const container = chatContainerRef.current;
        if (container) {
            const checkIfLastMessageIsBelow = () => {
                const lastMessageEl = container.querySelector('.user-message:last-of-type, .bot-message:last-of-type');
                if (!lastMessageEl) {
                    setShowScrollButton(false);
                    return;
                }
                const containerBottom = container.scrollTop + container.clientHeight;
                const messageBottom = lastMessageEl.offsetTop + lastMessageEl.offsetHeight;
                const isMessageBelow = messageBottom > containerBottom + 10;
                setShowScrollButton(isMessageBelow);
            };
            checkIfLastMessageIsBelow();
            container.addEventListener('scroll', checkIfLastMessageIsBelow);
            return () => container.removeEventListener('scroll', checkIfLastMessageIsBelow);
        }
        return () => { };
    }, [messages]);
    useEffect(() => {
        if (!userSubmittedQuery ||
            !lastUserMessageRef.current ||
            !chatContainerRef.current) {
            return;
        }
        const element = lastUserMessageRef.current;
        const container = chatContainerRef.current;
        const containerHeight = container.clientHeight;
        const elementTop = element.offsetTop;
        const elementHeight = element.offsetHeight;
        const scrollPosition = elementTop - containerHeight / 2 + elementHeight / 2;
        container.scrollTo({
            top: scrollPosition,
            behavior: 'smooth'
        });
        setUserSubmittedQuery(false);
    }, [userSubmittedQuery, messages]);
    useEffect(() => {
        const openAIResultClickHandler = (event) => {
            const chatContainer = chatContainerRef.current;
            if (chatContainer) {
                const allLinks = chatContainer.querySelectorAll('a');
                allLinks.forEach((link, index) => {
                    console.log(`Link ${index}:`, {
                        href: link.href,
                        innerHTML: link.innerHTML,
                        'data-chatbot-link': link.getAttribute('data-chatbot-link'),
                        'data-track-url': link.getAttribute('data-track-url'),
                        'data-track-text': link.getAttribute('data-track-text')
                    });
                });
            }
            let linkElement = event.target;
            if (event.target.tagName !== 'A') {
                linkElement = event.target.closest('a');
            }
            if (linkElement && linkElement.tagName === 'A') {
                trackSnowplowEvent(linkElement.href, linkElement.textContent);
                if (linkElement.getAttribute('data-chatbot-link') === 'true') {
                    event.preventDefault();
                    const url = linkElement.getAttribute('data-track-url');
                    setTimeout(() => {
                        window.open(url, '_blank');
                    }, 100);
                }
            }
        };
        // Add event listener to chat container
        const chatContainer = chatContainerRef.current;
        if (chatContainer) {
            chatContainer.addEventListener('click', openAIResultClickHandler);
        }
        return () => {
            if (chatContainer) {
                chatContainer.removeEventListener('click', openAIResultClickHandler);
            }
        };
    }, [messages]);
    return (React.createElement(OpenAIModalBaseWrapper, { className: className, closeTimeoutMS: 400, isOpen: isOpenAIModalVisible },
        React.createElement(OpenAIModalHedWrapper, null,
            React.createElement(OpenAIModalHed, null, title || formatMessage(translations.hed)),
            React.createElement(OpenAIModalCloseButton, { isIconButton: true, ariaLabel: formatMessage(translations.closeButtonAriaLabel), label: formatMessage(translations.closeButtonLabel), onClickHandler: onClickClosedHandler, role: "button", ButtonIcon: CloseIcon })),
        React.createElement(OpenAIModalBodyWrapper, null,
            React.createElement(OpenAIChatContainer, { ref: chatContainerRef, reducedPadding: reducedPadding },
                React.createElement(OpenAIModalHedSpanTag, null, subHed || formatMessage(translations.subHed)),
                messages.length > 0 &&
                    messages.map((message, index) => {
                        const isLastUserMessage = index === messages.length - 1 && message.isUser;
                        return message.isUser ? (React.createElement(OpenAIUserMessage, { key: index, ref: isLastUserMessage ? lastUserMessageRef : null, className: "user-message", dangerouslySetInnerHTML: { __html: message.text } })) : (React.createElement(OpenAIBotMessage, { key: index, className: "bot-message", dangerouslySetInnerHTML: {
                                __html: formatResponseToHTML(message.text)
                            } }));
                    }),
                isLoading && (React.createElement(OpenAILoaderContainer, { "data-testid": "loading-indicator" },
                    formatMessage(translations.loadingText),
                    React.createElement(LoadingDot, null),
                    React.createElement(LoadingDot, null),
                    React.createElement(LoadingDot, null))),
                showScrollButton && (React.createElement(ScrollToBottomButton, { onClick: scrollToBottom, "aria-label": formatMessage(translations.scrollToBottomAriaLabel) },
                    React.createElement(Arrow, null))))),
        React.createElement(PromptSuggestionsContainerWrapper, null,
            messages.length === 0 && suggestedPrompts.length > 0 && (React.createElement(PromptSuggestionsContainer, { className: "prompt-suggestions" },
                React.createElement(PromptSuggestionsHeader, null, promptHeaderText || formatMessage(translations.promptHeaderText)),
                React.createElement(PromptButtonsContainer, { className: "prompt-buttons" }, suggestedPrompts.map((prompt, index) => (React.createElement(PromptButton, { key: index, className: "prompt-button", onClick: () => handlePromptSelection(prompt) },
                    React.createElement(PromptButtonText, null, prompt))))))),
            React.createElement(OpenAIModalFormWrapper, null,
                React.createElement(OpenAIModalForm, { name: "aichatbot-form", action: "", method: "POST", onSubmit: handleSubmit },
                    React.createElement(OpenAIModalFormLabel, null,
                        React.createElement(OpenAIModalFormTextInputWrapper, { submitted: submitted },
                            React.createElement(OpenAIModalFormTextInput, { inputRef: inputRef, type: "aichatbot-input", placeholder: placeholder, name: "aichatbot-input", formName: "aichatbot-form", label: "aichatbot-input", hideLabel: true, onInputFocus: handleFocus, onInputBlur: handleBlur, onInputChange: handleInputChange })),
                        React.createElement(Arrow, { onClick: (e) => {
                                e.preventDefault();
                                handleSubmit(e);
                            } })))),
            React.createElement(OpenAIModalBodyWrapper, null,
                React.createElement(OpenAIModalDisclaimerText, null, disclaimer || formatMessage(translations.disclaimerText))))));
};
OpenAIModal.displayName = 'OpenAIModal';
OpenAIModal.propTypes = {
    aiChatBotConfig: PropTypes.object,
    className: PropTypes.string,
    contentType: PropTypes.string,
    engagementChatbotConfig: PropTypes.object,
    env: PropTypes.string,
    isOpenAIModalVisible: PropTypes.bool,
    modalSource: PropTypes.string
};
const ConfiguredOpenAIModal = asConfiguredComponent(OpenAIModal, 'OpenAIModal');
module.exports = connectToStore(mapStateToProps)(ConfiguredOpenAIModal);
//# sourceMappingURL=OpenAIModal.js.map

/***/ }),

/***/ 44354:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.doCloseModal = exports.doDisplayModal = exports.setOpenAIModalDispatcher = void 0;
let dispatch;
const actionKey = 'openAIModalConfig';
const mergeKey = 'MERGE_KEY';
const { interactionResponse } = __webpack_require__(56187);
const { trackNavigationEvent } = __webpack_require__(14307);
const setOpenAIModalDispatcher = (dispatchIn) => {
    dispatch = dispatchIn;
};
exports.setOpenAIModalDispatcher = setOpenAIModalDispatcher;
const _showHideModal = async (isOpenAIModalVisible, modalState = {}) => {
    if (!dispatch) {
        console.error('Component not found for OpenAIModal actions');
        return;
    }
    const stateToDispatch = {
        ...modalState,
        isOpenAIModalVisible,
        ...(isOpenAIModalVisible
            ? { modalSource: modalState.source }
            : { modalSource: null })
    };
    dispatch({
        type: mergeKey,
        key: actionKey,
        value: stateToDispatch
    });
    if (modalState?.snowplowData) {
        try {
            await interactionResponse();
            await trackNavigationEvent(modalState.snowplowData, null, {
                skipDuplicateEvent: false
            });
        }
        catch (error) {
            console.error('====== Error tracking navigation event in _showHideModal ==========', error);
        }
    }
};
const doDisplayModal = async (modalState) => {
    _showHideModal(true, modalState);
};
exports.doDisplayModal = doDisplayModal;
const doCloseModal = async () => {
    await _showHideModal(false);
};
exports.doCloseModal = doCloseModal;
//# sourceMappingURL=OpenAIModalActions.js.map

/***/ }),

/***/ 21686:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const ReactModal = __webpack_require__(20312);
const PropTypes = __webpack_require__(5556);
const { default: styled, keyframes } = __webpack_require__(92168);
const { BaseText } = __webpack_require__(76955);
const { calculateSpacing } = __webpack_require__(26865);
const { BREAKPOINTS, ZINDEX_MAP } = __webpack_require__(96472);
const Button = __webpack_require__(73730);
const { getColorToken, getColorStyles, getTypographyStyles } = __webpack_require__(26865);
const TextField = __webpack_require__(89662);
const { ButtonLabel } = __webpack_require__(18974);
const OpenAIModalHed = styled(BaseText).withConfig({
    displayName: 'OpenAIModalHed'
}) `
  display: contents;
  ${getTypographyStyles('typography.definitions.globalEditorial.context-primary')};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.black')};
`;
const OpenAIModalHedSpanTag = styled.span.withConfig({
    displayName: 'OpenAIModalHedSpanTag'
}) `
  display: block;
  margin-top: ${calculateSpacing(2)};
  margin-bottom: ${calculateSpacing(2)};
  ${getTypographyStyles('typography.definitions.consumptionEditorial.subhed-aux-secondary')};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body')};
`;
const OpenAIModalDek = styled.p.withConfig({
    displayName: 'OpenAIModalDek'
}) `
  margin-top: 0;
  ${getTypographyStyles('typography.definitions.consumptionEditorial.body-core')}
  text-align: center;
  color: ${getColorToken('colors.discover.body.white.description')};
`;
const OpenAIModalCloseButton = styled(Button.Utility).withConfig({
    displayName: 'OpenAIModalCloseButton'
}) `
  position: absolute;
  right: 0;
  padding: 0;
  fill: ${getColorToken('colors.interactive.base.black')};
  padding-right: ${calculateSpacing(8)};

  @media (max-width: ${BREAKPOINTS.md}) {
    padding-right: ${calculateSpacing(6)};
  }

  .icon-close {
    padding: ${calculateSpacing(1)};

    path {
      ${({ theme }) => getColorStyles(theme, 'stroke', 'colors.interactive.base.black')};
      stroke-width: 2px;
    }
  }

  &,
  &:focus,
  &:hover {
    border: 0;
    background-color: transparent;
  }
`;
function ReactModalAdapter({ className, ...props }) {
    const contentClassName = `${className}__content`;
    const overlayClassName = `${className}__overlay`;
    return (React.createElement(ReactModal, { portalClassName: className, className: contentClassName, overlayClassName: overlayClassName, ...props }));
}
ReactModalAdapter.propTypes = {
    className: PropTypes.string
};
const OpenAIModalHedWrapper = styled.div.withConfig({
    displayName: 'OpenAIModalHedWrapper'
}) `
  display: flex;
  position: relative;
  margin-right: -64px;
  margin-left: -64px;
  box-shadow: 0 4px 6px rgba(45, 45, 45, 0.05);
  padding-bottom: ${calculateSpacing(2)};
  padding-left: ${calculateSpacing(8)};

  @media (max-width: ${BREAKPOINTS.md}) {
    margin-right: -40px;
    margin-left: -40px;
    padding-bottom: ${calculateSpacing(1.5)};
    padding-left: ${calculateSpacing(2)};
  }

  @media (min-width: ${BREAKPOINTS.sm}) and (max-width: ${BREAKPOINTS.md}) {
    margin-right: -${calculateSpacing(6)};
    margin-left: -${calculateSpacing(6)};
    padding-bottom: ${calculateSpacing(1.5)};
    padding-left: ${calculateSpacing(6)};
  }
`;
const slideInUp = keyframes `
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0%);
    opacity: 1;
  }
`;
const slideOutDown = keyframes `
  from {
    transform: translateY(0%);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 1;
  }
`;
const OpenAIModalBaseWrapper = styled(ReactModalAdapter).withConfig({
    displayName: 'OpenAIModalBaseWrapper'
}) `
  &__overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483645;

    background-color: rgba(
      ${getColorToken('colors.background.black', { rgbOnly: true })},
      0
    );

    &.ReactModal__Overlay--after-open {
      transition: background-color 750ms;
      animation: ${slideInUp} 350ms ease-in forwards;
      opacity: 1;
      background-color: rgba(
        ${getColorToken('colors.background.black', { rgbOnly: true })},
        0.4
      );
    }

    &.ReactModal__Overlay--before-close {
      transition: background-color 750ms;
      animation: ${slideOutDown} 350ms ease-out forwards;
      opacity: 1;
      background-color: rgba(
        ${getColorToken('colors.background.black', { rgbOnly: true })},
        0
      );
    }
  }

  &__content {
    display: flex;
    position: relative;
    top: 50%;
    left: 50%;
    flex-direction: column;
    transform: translateY(-50%) translateX(-50%);
    outline: none;
    background-color: ${getColorToken('colors.background.white')};
    padding: ${calculateSpacing(1.5)} ${calculateSpacing(2)};
    width: 100%;
    height: 100%;

    @media (min-width: ${BREAKPOINTS.md}) {
      transform: translateY(-50%)
        translateX(calc(-50% - ${calculateSpacing(2, 'px')}));

      margin: 0 ${calculateSpacing(2, 'px')};
      padding: ${calculateSpacing(2)} ${calculateSpacing(6)};
      width: 100%;
    }

    @media (min-width: ${BREAKPOINTS.lg}) {
      padding: ${calculateSpacing(2)} ${calculateSpacing(8)};
    }

    && {
      ${OpenAIModalHedWrapper} {
        padding: none;
      }
    }
  }
`;
const OpenAIModalDisclaimerText = styled(BaseText).withConfig({
    displayName: 'OpenAIModalDisclaimerText'
}) `
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  width: 100%;

  ${getTypographyStyles('typography.definitions.foundation.meta-secondary')};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body-deemphasized')};
`;
const OpenAIModalFormWrapper = styled.section.withConfig({
    displayName: 'OpenAIModalFormWrapper'
}) `
  margin-top: ${calculateSpacing(1)};
  border: none;
  padding-top: ${calculateSpacing(1)};
  padding-bottom: ${calculateSpacing(1.5)};

  @media (max-width: ${BREAKPOINTS.md}) {
    margin-right: -40px;
    margin-left: -40px;
    padding-top: ${calculateSpacing(2)};
    padding-right: ${calculateSpacing(2)};
    padding-left: ${calculateSpacing(2)};
  }

  @media (min-width: ${BREAKPOINTS.sm}) and (max-width: ${BREAKPOINTS.md}) {
    margin-right: -${calculateSpacing(6)};
    margin-left: -${calculateSpacing(6)};
    padding-right: ${calculateSpacing(2)};
    padding-left: ${calculateSpacing(2)};
  }
`;
const OpenAIModalFormTextInputWrapper = styled.div.withConfig({
    displayName: 'OpenAIModalFormTextInputWrapper'
}) `
  position: relative;
  align-self: center;
  justify-content: center;
  z-index: 0;
  border-radius: 30px;
  background: linear-gradient(45deg, #0498f9, #ffa67a);
  padding: 2px;
  overflow: hidden;

  &::after {
    --gradientHeight: 10000px;
    --gradientWidth: 10000px;
    position: absolute;
    top: calc((100% - var(--gradientHeight)) / 2);
    left: calc((100% - var(--gradientWidth)) / 2);
    animation: ${({ submitted }) => submitted ? 'animateBorder 3s infinite linear' : 'none'};
    z-index: 0;
    background: ${({ submitted }) => submitted
    ? 'conic-gradient(from 0deg, #ffa67a, #0498f9, #ffa67a)'
    : 'unset'};
    background-clip: border-box;
    background-position: center center;
    background-size: cover;
    width: var(--gradientWidth);
    height: var(--gradientHeight);

    content: '';
  }

  @keyframes animateBorder {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
`;
const OpenAIModalFormTextInput = styled(TextField.SingleLine).withConfig({
    displayName: 'OpenAIModalFormTextInput'
}) `
  margin: 0;
  border-radius: 30px;

  && {
    input {
      position: relative;
      z-index: 2;
      border: none;
      border-radius: 30px;
      background: white;
      padding-right: ${calculateSpacing(4.5)};
      padding-left: ${calculateSpacing(2.5)};
      height: 2.5rem;
      box-sizing: border-box;

      ${getTypographyStyles('typography.definitions.utility.input-core')};

      &:active {
        ${({ theme }) => getColorStyles(theme, 'color', 'colors.background.black')};
      }

      &::placeholder {
        ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.deemphasized')};
      }
    }
  }
`;
const OpenAIModalForm = styled.form.withConfig({
    displayName: 'OpenAIModalForm'
}) `
  margin: 0 auto;
  width: 85%;

  @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
    width: 60%;
  }

  @media (min-width: ${BREAKPOINTS.lg}) {
    width: 45%;
  }
`;
const OpenAIModalFormLabel = styled.label.withConfig({
    displayName: 'OpenAIModalFormLabel'
}) `
  position: relative;

  .icon-arrow {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%) rotate(-90deg) scale(1.2);
    border-radius: ${calculateSpacing(1.5)};
    ${({ theme }) => getColorStyles(theme, 'background', 'colors.interactive.base.black')};
    ${({ theme }) => getColorStyles(theme, 'fill', 'colors.interactive.base.white')};
    ${({ theme }) => getColorStyles(theme, 'stroke', 'colors.interactive.base.white')};
    stroke-width: 1px;
    cursor: pointer;
    padding: ${calculateSpacing(0.5)};
  }
`;
const OpenAIModalBodyWrapper = styled.div.withConfig({
    displayName: 'OpenAIModalBodyWrapper'
}) `
  margin: 0 auto;
  width: 100%;

  @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
    width: 60%;
  }

  @media (min-width: ${BREAKPOINTS.lg}) {
    width: 45%;
  }
`;
const OpenAIEntryPointButton = styled(Button).withConfig({
    displayName: 'OpenAIEntryPointButton'
}) `
  margin-left: -24px;
  border: none;
  border-radius: 25px;
  background: linear-gradient(230deg, #ffa67a, #0498f9);
  padding: 0;
  width: 92px;
  min-width: fit-content;
  height: 40px;
  white-space: nowrap;

  @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
    margin-right: ${calculateSpacing(2)};
  }

  @media (min-width: ${BREAKPOINTS.lg}) {
    margin-right: ${calculateSpacing(2)};
    margin-left: -10px;
  }

  ${ButtonLabel} {
    padding: ${calculateSpacing(1.5)} ${calculateSpacing(3)};
  }

  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-primary')};

  ${({ theme }) => `${getColorStyles(theme, 'color', 'colors.consumption.lead.inverted.accent')};`}

  :focus,
  :active,
  :hover {
    border: none;
    background: linear-gradient(230deg, #ffa67a, #0498f9);
    ${({ theme }) => `${getColorStyles(theme, 'color', 'colors.consumption.lead.inverted.accent')};`}
  }
`;
const AIChatBotTickerWrapper = styled.div.withConfig({
    displayName: 'AIChatBotTickerWrapper'
}) `
  margin-bottom: ${calculateSpacing(4)};
  border-radius: 25px;
  padding: ${calculateSpacing(4)} ${calculateSpacing(3)};

  ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.background.light')};
`;
const AIChatBotTickerHed = styled.p.withConfig({
    displayName: 'AIChatBotTickerHed'
}) `
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  margin: auto;
  padding-bottom: ${calculateSpacing(2)};
  height: 3.5rem;
  overflow: hidden;
  text-align: center;

  ${getTypographyStyles('typography.definitions.discovery.description-feature')};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body')};

  span {
    display: block;
    position: absolute;
    width: 100%;
    will-change: transform, opacity;
  }

  span.visible {
    transform: translateX(0);
    opacity: 1;
    z-index: 1;
  }

  span.exit {
    animation: shiftOutLeft 150ms ease-out forwards;
    z-index: 1;
  }

  span.enter {
    animation: enterFromRight 150ms ease-out forwards;
    z-index: 2;
  }

  @keyframes enterFromRight {
    0% {
      transform: translateX(30%);
      opacity: 0;
    }

    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes shiftOutLeft {
    0% {
      transform: translateX(0);
      opacity: 1;
    }

    100% {
      transform: translateX(-30%);
      opacity: 0;
    }
  }
`;
const OpenAIRecipeEntryPointButton = styled(OpenAIEntryPointButton).withConfig({
    displayName: 'OpenAIRecipeEntryPointButton'
}) `
  margin: auto;
`;
const OpenAIChatContainer = styled.div.withConfig({
    displayName: 'OpenAIChatContainer'
}) `
  display: flex;
  position: relative;
  flex-direction: column;
  margin-bottom: ${calculateSpacing(3)};
  padding-bottom: ${({ reducedPadding }) => reducedPadding ? calculateSpacing(2) : '30vh'};
  width: 100%;
  height: 100%;
  max-height: calc(100vh - 125px); /* stylelint-disable-line */
  max-height: calc(100dvh - 125px); /* stylelint-disable-line */
  overflow-y: auto;
  scrollbar-width: none;

  @supports (height: 100dvh) {
    max-height: calc(100dvh - 125px);
  }

  &::-webkit-scrollbar {
    display: none;
  }
`;
const OpenAIUserMessage = styled(OpenAIModalDek).withConfig({
    displayName: 'OpenAIUserMessage'
}) `
  margin-right: 0;
  margin-bottom: ${calculateSpacing(2)};
  margin-left: auto;
  border: 1px solid;
  border-radius: 40px;
  background-color: ${getColorToken('colors.background.white')};
  padding: ${calculateSpacing(1.5)} ${calculateSpacing(2)};
  width: fit-content;
  max-width: 80%;
  text-align: left;
  ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.background.black')};
  ${getTypographyStyles('typography.definitions.utility.input-core')};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.display-texture')};
`;
const OpenAIBotMessage = styled(OpenAIModalDek).withConfig({
    displayName: 'OpenAIBotMessage'
}) `
  margin-right: auto;
  margin-bottom: ${calculateSpacing(2)};
  margin-left: 0;
  max-width: 80%;
  text-align: left;
  ${getTypographyStyles('typography.definitions.utility.input-core')};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body')};
  line-height: ${calculateSpacing(3)};

  a {
    ${getTypographyStyles('typography.definitions.utility.input-core')};
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body')};
    font-weight: 500;
  }
`;
// Add these keyframes for the wave animation
const waveAnimation = keyframes `
  0%, 100% { transform: translateY(0); }

  25% { transform: translateY(-1px); }

  50% { transform: translateY(0); }

  75% { transform: translateY(1px); }
`;
const OpenAILoaderContainer = styled.div.withConfig({
    displayName: 'OpenAILoaderContainer'
}) `
  display: flex;
  align-items: baseline;
  margin-right: auto;
  margin-bottom: ${calculateSpacing(2)};
  margin-left: 0;
  max-width: 80%;
  text-align: left;

  ${getTypographyStyles('typography.definitions.utility.body')};

  ${({ theme }) => getColorStyles(theme, 'color', 'colors.discovery.body.dark.description')};
`;
const LoadingDot = styled.span.withConfig({
    displayName: 'LoadingDot'
}) `
  display: inline-block;
  margin-left: 2px;
  border-radius: 50%;
  background-color: ${getColorToken('colors.discovery.body.dark.description')};
  width: 2px;
  height: 2px;

  &:nth-child(1) {
    animation: ${waveAnimation} 1.2s ease-in-out infinite;
    padding-left: 2px;
  }

  &:nth-child(2) {
    animation: ${waveAnimation} 1.2s ease-in-out 0.4s infinite;
  }

  &:nth-child(3) {
    animation: ${waveAnimation} 1.2s ease-in-out 0.8s infinite;
  }
`;
const PromptSuggestionsContainer = styled.div.withConfig({
    displayName: 'PromptSuggestionsContainer'
}) `
  margin: 0 auto;
  margin-top: auto;
  width: 100%;

  @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
    width: 60%;
  }

  @media (min-width: ${BREAKPOINTS.lg}) {
    width: 45%;
  }
`;
const PromptSuggestionsHeader = styled(BaseText).withConfig({
    displayName: 'PromptSuggestionsHeader'
}) `
  margin-bottom: ${calculateSpacing(1)};
  text-align: right;
  ${getTypographyStyles('typography.definitions.utility.body')};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.discovery.body.dark.description')};
`;
const PromptButtonsContainer = styled.div.withConfig({
    displayName: 'PromptButtonsContainer'
}) `
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: end;
`;
const PromptButton = styled.button.withConfig({
    displayName: 'PromptButton'
}) `
  transition: background-color 0.2s, border-color 0.2s;
  border: 1px solid #ffa67a;
  border-radius: 40px;
  cursor: pointer;
  ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.consumption.lead.standard.background')};
  padding: 0 15px;
  width: min-content;
  height: 53px;
  text-align: left;
  font-size: 14px;

  &:hover {
    border: 3px solid #ffa67a;
    text-decoration: none;
  }
`;
const PromptButtonText = styled(BaseText).withConfig({
    displayName: 'PromptButtonText'
}) `
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  ${getTypographyStyles('typography.definitions.utility.input-core')};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.interactive.base.deemphasized')};
`;
const PromptSuggestionsContainerWrapper = styled.div.withConfig({
    displayName: 'PromptSuggestionsContainerWrapper'
}) `
  position: fixed;
  bottom: 0;
  align-self: center;
  padding-right: inherit;
  padding-left: inherit;
  width: fill-available;
`;
const ScrollToBottomButton = styled.button.withConfig({
    displayName: 'ScrollToBottomButton'
}) `
  display: flex;
  position: fixed;
  bottom: ${calculateSpacing(12)};
  left: 50%;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  z-index: ${ZINDEX_MAP.tooltip + 10};
  border: 1px solid;
  border-radius: 50%;
  cursor: pointer;
  width: ${calculateSpacing(4)};
  height: ${calculateSpacing(4)};

  ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.background.white')};

  ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.consumption.body.standard.body-deemphasized')};

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 0.8;
    }
  }

  &:hover {
    opacity: 1;
  }

  svg {
    transform: rotate(90deg);
    width: ${calculateSpacing(2)};
    height: ${calculateSpacing(2)};
  }
`;
module.exports = {
    OpenAIModalBaseWrapper,
    OpenAIModalCloseButton,
    OpenAIModalDek,
    OpenAIModalHed,
    OpenAIModalDisclaimerText,
    OpenAIModalHedSpanTag,
    OpenAIModalHedWrapper,
    OpenAIModalFormWrapper,
    OpenAIModalFormTextInput,
    OpenAIModalFormTextInputWrapper,
    OpenAIModalForm,
    OpenAIModalFormLabel,
    OpenAIModalBodyWrapper,
    OpenAIEntryPointButton,
    AIChatBotTickerWrapper,
    AIChatBotTickerHed,
    OpenAIRecipeEntryPointButton,
    OpenAIChatContainer,
    OpenAIUserMessage,
    OpenAIBotMessage,
    OpenAILoaderContainer,
    LoadingDot,
    PromptSuggestionsContainer,
    PromptSuggestionsContainerWrapper,
    PromptSuggestionsHeader,
    PromptButtonsContainer,
    PromptButton,
    PromptButtonText,
    ScrollToBottomButton
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 94528:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    hed: {
        id: 'OpenAIModal.Hed',
        defaultMessage: 'ASK AI',
        description: 'OpenAIModal component hed text'
    },
    subHed: {
        id: 'OpenAIModal.subHed',
        defaultMessage: 'Ask to tailor and pair Bon Appétit recipes to your taste and needs—or for recommendations that satisfy your cravings.',
        description: 'OpenAIModal component sub hed text'
    },
    textInputPlaceholderText: {
        id: 'OpenAIModal.textInputPlaceholderText',
        defaultMessage: 'Ask anything',
        description: 'OpenAIModal component text input placeholder Text'
    },
    disclaimerText: {
        id: 'OpenAIModal.disclaimerText',
        defaultMessage: 'AI can make mistakes—check ingredients meet dietary needs',
        description: 'OpenAIModal component text input helper text'
    },
    closeButtonLabel: {
        id: 'OpenAIModal.closeButtonLabel',
        defaultMessage: 'Close Open AI Modal',
        description: 'OpenAIModal component close button label'
    },
    closeButtonAriaLabel: {
        id: 'OpenAIModal.closeButtonAriaLabel',
        defaultMessage: 'Close Open AI Modal',
        description: 'OpenAIModal component close button aria label'
    },
    openAIEntryPointButtonLabel: {
        id: 'OpenAIModal.openAIEntryPointButtonLabel',
        defaultMessage: 'ASK AI',
        description: 'Label for the Open AI entry point button'
    },
    loadingText: {
        id: 'OpenAIModal.loadingText',
        defaultMessage: 'Cooking results',
        description: 'Text displayed while waiting for AI response'
    },
    scrollToBottomAriaLabel: {
        id: 'OpenAIModal.scrollToBottomAriaLabel',
        defaultMessage: 'Scroll to bottom',
        description: 'Aria label for the scroll to bottom button'
    },
    aiChatBotTickerHed1: {
        id: 'AIChatBotTicker.hed1',
        defaultMessage: 'Need to make a substitution?',
        description: 'AIChatBotTicker component hed text1'
    },
    aiChatBotTickerHed2: {
        id: 'AIChatBotTicker.hed2',
        defaultMessage: 'Looking for the perfect pairing?',
        description: 'AIChatBotTicker component hed text2'
    },
    aiChatBotTickerHed3: {
        id: 'AIChatBotTicker.hed3',
        defaultMessage: 'Want to turn this into a meal plan?',
        description: 'AIChatBotTicker component hed text3'
    },
    aiChatBotTickerHed4: {
        id: 'AIChatBotTicker.hed4',
        defaultMessage: 'Need to adjust the measurements?',
        description: 'AIChatBotTicker component hed text 4'
    },
    promptHeaderText: {
        id: 'OpenAIModal.promptHeaderText',
        defaultMessage: 'Starters',
        description: 'Header text for prompt suggestions'
    },
    defaultPrompt1: {
        id: 'OpenAIModal.defaultPrompt1',
        defaultMessage: 'Can you recommend some seasonal side dishes?',
        description: 'Default prompt suggestion 1'
    },
    defaultPrompt2: {
        id: 'OpenAIModal.defaultPrompt2',
        defaultMessage: 'Can you make me a gluten-free meal plan?',
        description: 'Default prompt suggestion 2'
    },
    defaultPrompt3: {
        id: 'OpenAIModal.defaultPrompt3',
        defaultMessage: 'Can you recommend an easy, healthy dinner?',
        description: 'Default prompt suggestion 3'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 73739:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.formatResponseToHTML = exports.formatContextForAPI = void 0;
function formatContextForAPI(recipeDescription, ingredientsData, instructionsData) {
    const extractText = (node) => {
        if (typeof node === 'string') {
            return node;
        }
        if (Array.isArray(node)) {
            if (node.every((item) => typeof item === 'string')) {
                // If it's an array of strings, join them directly
                return node.join('');
            }
            // Otherwise, handle as nested structure
            const contentNodes = node.slice(typeof node[1] === 'object' && !Array.isArray(node[1]) ? 2 : 1);
            return contentNodes.map(extractText).join(' ');
        }
        return '';
    };
    const decodeHtml = (str) => str
        .replace(/&quot;/g, '"')
        .replace(/&#8211;/g, '–')
        .replace(/&#8212;/g, '—')
        .replace(/&amp;/g, '&')
        .replace(/&lt;/g, '<')
        .replace(/&gt;/g, '>')
        .replace(/&nbsp;/g, ' ')
        .replace(/&apos;/g, "'")
        .replace(/&deg;/g, '°');
    // Modified to only strip HTML tags, not single letter words
    const stripTagNames = (text) => {
        // Use a more precise regex that only matches tag names when they're actual HTML tags
        // This will preserve single letter words like "a" that aren't HTML tags
        return text
            .replace(/<\/?(?:div|p|a|strong|span|section|header)[^>]*>/g, '')
            .trim();
    };
    const descriptionText = stripTagNames(decodeHtml(extractText(recipeDescription))).replace(/\b(div|p|strong|span|section|header)\b(?!\w)/g, '');
    const ingredientsText = `Ingredients: ${ingredientsData[0]?.ingredients
        ?.map((i) => decodeHtml(i.dangerousDescription))
        .join('\n')}`;
    const stripHtml = (html) => html.replace(/<[^>]+>/g, '');
    const instructionsText = `Preparation: ${instructionsData[0]?.steps
        ?.map((s) => decodeHtml(stripHtml(s.dangerousDescription)))
        .join('\n')}`;
    return `${descriptionText} ${ingredientsText}. ${instructionsText}`
        .replace(/\s+/g, ' ')
        .trim();
}
exports.formatContextForAPI = formatContextForAPI;
/**
 * Formats the response text to HTML content
 *
 * @param {string} text - The raw text from the OpenAI response
 * @returns {string} - Formatted HTML content
 */
const formatResponseToHTML = (text) => {
    if (!text)
        return '';
    return (text
        // Remove citation markers first
        .replace(/【\d+:\d+†source\*\*]/g, '')
        // Format headers before other formatting
        .replace(/#### (.*?)(\n|$)/g, '<h4>$1</h4>')
        .replace(/### (.*?)(\n|$)/g, '<h3>$1</h3>')
        .replace(/## (.*?)(\n|$)/g, '<h2>$1</h2>')
        .replace(/# (.*?)(\n|$)/g, '<h1>$1</h1>')
        // Format bold text (Markdown style)
        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
        // Format italic text (Markdown style) - after bold to avoid conflicts
        .replace(/\*([^*]+)\*/g, '<em>$1</em>')
        // Format code blocks
        .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
        // Format inline code
        .replace(/`([^`]+)`/g, '<code>$1</code>')
        // Format markdown links with data attributes for event delegation
        .replace(/\[(.*?)\]\((.*?)\)/g, (_, text, url) => {
        return `<a href="${url}" target="_blank" rel="noopener noreferrer" data-chatbot-link="true" data-track-url="${url}" data-track-text="${text}">${text}</a>`;
    })
        // Handle lists
        .replace(/^- (.*?)$/gm, '<li>$1</li>')
        .replace(/(<li>.*?<\/li>[\n\r]?)+/g, (match) => {
        return `<ul>${match.replace(/[\n\r]/g, '')}</ul>`;
    })
        // Convert newlines to HTML line breaks
        .replace(/\n/g, '<br>'));
};
exports.formatResponseToHTML = formatResponseToHTML;
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 34213:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.PaginationRow = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const react_intl_1 = __webpack_require__(46984);
const snowplow_tracking_1 = __webpack_require__(14307);
const button_1 = __importDefault(__webpack_require__(73730));
const track_component_1 = __webpack_require__(78788);
const translations_1 = __importDefault(__webpack_require__(83849));
/**
 * Renders the controls for pagination
 *
 * @param {string} props.btnStyle - Prop used for styling button
 * @param {number} props.buttonVariation - Props to get the pagination button variations
 * @param {number} props.filter - The page filter
 * @param {number} props.currentPage - The current page we are on
 * @param {number} props.limit - The number of items per page
 * @param {number} props.totalResults - The total number of items that we can paginate through
 * @param {string} props.searchQuery - optional search filter
 * @param {string} props.shouldEnableBundleComponentAnalytics - feature flag to append data-section-title attribute for analytics
 */
const PaginationRow = ({ btnStyle, buttonVariation = 'Primary', currentPage, filter, limit, searchQuery, shouldEnableBundleComponentAnalytics, totalResults }) => {
    react_1.default.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(track_component_1.TrackComponentChannel.RENDER, {
            name: 'PaginationRow'
        });
    }, []);
    const label = (0, react_intl_1.useIntl)().formatMessage(translations_1.default.nextPage);
    // If we are on the last page don't render anything
    if (currentPage * limit >= totalResults) {
        return null;
    }
    const ButtonComponent = button_1.default[buttonVariation];
    let href = filter
        ? `?filter=${filter}&page=${currentPage + 1}`
        : `?page=${currentPage + 1}`;
    href += searchQuery ? `&q=${searchQuery}` : '';
    const trackSnowplowEvent = (e) => {
        const eventData = {
            type: 'click',
            label: e.target.innerText,
            subject: 'pagination',
            placement: 'bottom'
        };
        (0, snowplow_tracking_1.trackNavigationEvent)(eventData);
    };
    return (react_1.default.createElement("div", null,
        react_1.default.createElement(ButtonComponent, { inputKind: "link", href: href, btnStyle: btnStyle, label: label, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, onClickHandler: trackSnowplowEvent })));
};
exports.PaginationRow = PaginationRow;
//# sourceMappingURL=PaginationRow.js.map

/***/ }),

/***/ 30637:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const PaginationRow_1 = __webpack_require__(34213);
exports.A = PaginationRow_1.PaginationRow;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 83849:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
const react_intl_1 = __webpack_require__(46984);
exports["default"] = (0, react_intl_1.defineMessages)({
    nextPage: {
        id: 'PaginationRow.NextPage',
        defaultMessage: 'Next Page',
        description: 'The button label'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 53151:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const ConsumerMarketingUnit = __webpack_require__(71284);
const { PaywallBarWrapper } = __webpack_require__(4958);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * PaywallBar component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - optional class name
 * @param {string} [props.position] - optional consumer marketing unit position
 * @param {object} [props.paywall] - optional paywall data
 * @param {object} [props.visibility] - optional footer visibility
 *
 * @returns {ReactElement} <div>
 */
const PaywallBar = function (props) {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'PaywallBar'
        });
    }, []);
    const { className, paywall, position = 'paywall-bar-call-to-action', visibility } = props;
    const shouldHide = paywall.isMuted || visibility.footer;
    return (React.createElement(PaywallBarWrapper, { className: classnames('paywall-bar', className), isVisible: !shouldHide },
        React.createElement(ConsumerMarketingUnit, { className: "paywall-bar__consumer-marketing-unit", position: position, aria: {
                'aria-live': 'polite',
                ...(shouldHide && { 'aria-hidden': true })
            } })));
};
PaywallBar.propTypes = {
    className: PropTypes.string,
    paywall: PropTypes.object,
    position: PropTypes.string,
    visibility: PropTypes.shape({
        footer: PropTypes.bool
    })
};
module.exports = PaywallBar;
//# sourceMappingURL=PaywallBar.js.map

/***/ }),

/***/ 51810:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const flow = __webpack_require__(49870);
const { connectDomain } = __webpack_require__(57744);
const { withVisibilityState } = __webpack_require__(15356);
const PaywallBar = __webpack_require__(53151);
const withPaywall = connectDomain('paywall');
const withFooterVisibility = withVisibilityState({
    name: 'footer',
    className: 'site-footer'
});
const enhance = flow([withPaywall, withFooterVisibility]);
module.exports = enhance(PaywallBar);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 4958:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { getColorToken } = __webpack_require__(26865);
const PaywallBarWrapper = styled.aside.withConfig({
    displayName: 'PaywallBarWrapper'
}) `
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  background: ${getColorToken('colors.background.adContainer.special')};
  width: 100%;
  height: auto;

  ${({ isVisible }) => isVisible &&
    `
    transform: translateY(0);
  `};

  .consumer-marketing-unit__slot--paywall-bar-call-to-action {
    height: 0;
  }

  @media print {
    display: none;
  }
`;
module.exports = {
    PaywallBarWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 83979:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { PaywallModalWrapper, ConsumerMarketingUnitWrapper } = __webpack_require__(81682);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * PaywallModal component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - optional class name
 * @param {string} [props.position] - consumer marketing unit position
 *
 * @returns {ReactElement} <div>
 */
const PaywallModal = function (props) {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'PaywallModal'
        });
    }, []);
    const { className, position = 'paywall-modal-call-to-action' } = props;
    return (React.createElement(PaywallModalWrapper, { className: classnames('paywall-modal', className) },
        React.createElement(ConsumerMarketingUnitWrapper, { className: "paywall-modal__consumer-marketing-unit", position: position, aria: {
                'aria-live': 'assertive'
            } })));
};
PaywallModal.propTypes = {
    className: PropTypes.string,
    position: PropTypes.string
};
module.exports = PaywallModal;
//# sourceMappingURL=PaywallModal.js.map

/***/ }),

/***/ 97438:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(83979);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 81682:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const ConsumerMarketingUnit = __webpack_require__(71284);
const PaywallModalWrapper = styled.aside.withConfig({
    displayName: 'PaywallModalWrapper'
}) `
  position: fixed;
  top: 0;
  transition: height 0s, width 0s;
  overflow: hidden;

  @media print {
    display: none;
  }

  .cns-ads-container div {
    display: none;
  }
`;
const ConsumerMarketingUnitWrapper = styled(ConsumerMarketingUnit).withConfig({
    displayName: 'ConsumerMarketingUnitWrapper'
}) ``;
module.exports = {
    PaywallModalWrapper,
    ConsumerMarketingUnitWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 45698:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { ExpertCardWrapper, Title, ButtonsWrapper, UtilityButton, SubHed } = __webpack_require__(78554);
/**
 * ExpertCard component
 *
 * @param {object} props - React props
 * @param {Array} [props.links] - Optional list of links `{ label, href }` information
 * @param {string} [props.subHed] - subHed text (example component prop)
 * @param {string} [props.title] - title text (example component prop)
 * @param {string} [props.shouldUseHedInExpertCard] - boolean indicating to use the copilot heading field as heading.
 * @param {string} [props.affiliateDisclaimer] - Optional disclaimer text for affiliate products
 * @param {boolean} [props.hasNoHeroProductVisualImage] - Optional flag when there is no hero image
 * @param {boolean} [props.showRichTextInDek] - optional flag to decide whether to show rich text in dek or not
 * @returns {ReactElement} <div>
 */
const ExpertCard = ({ title, subHed, links = [], shouldUseHedInExpertCard, hasNoHeroProductVisualImage, showRichTextInDek }) => {
    if (!title && links.length === 0) {
        return null;
    }
    return (React.createElement(ExpertCardWrapper, { hasNoHeroProductVisualImage: hasNoHeroProductVisualImage },
        title && (React.createElement(Title, { shouldUseHedInExpertCard: shouldUseHedInExpertCard, as: shouldUseHedInExpertCard ? 'h2' : 'p', dangerouslySetInnerHTML: {
                __html: title
            } })),
        subHed && (React.createElement(SubHed, { showRichTextInDek: showRichTextInDek, dangerouslySetInnerHTML: {
                __html: subHed
            } })),
        React.createElement(ButtonsWrapper, null, links.map((btn, index) => (React.createElement(UtilityButton, { key: `btn-${index}`, btnStyle: "outlined", inputKind: "link", label: btn.label, href: btn.href, target: btn.target }))))));
};
ExpertCard.propTypes = {
    hasNoHeroProductVisualImage: PropTypes.bool,
    links: PropTypes.array,
    shouldUseHedInExpertCard: PropTypes.bool,
    showRichTextInDek: PropTypes.bool,
    subHed: PropTypes.string,
    title: PropTypes.string
};
module.exports = ExpertCard;
//# sourceMappingURL=ExpertCard.js.map

/***/ }),

/***/ 19505:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState } = __webpack_require__(96540);
const debounce = __webpack_require__(38221);
const PLPProductCard = __webpack_require__(37230);
const SummaryItem = __webpack_require__(74992);
const SummaryItemSimple = __webpack_require__(31933);
const { ProductCardCarouselWrapper } = __webpack_require__(78554);
const UnifiedProductCard = __webpack_require__(51125);
const Ad = __webpack_require__(19607);
const { formatGtmData, productImpressionTracking } = __webpack_require__(60162);
const { default: Carousel } = __webpack_require__(36061);
/**
 * ProductCardCarousel component
 *
 * @param {object} props - React props
 * @param {string} [props.cardLayout] - Optional prop to set the layout of products.
 * @param {Array} [props.productList] - Optional productList of `{ products }` information
 * @param {object} [props.carouselViewProps] - Optional carouselViewProps containing props supported by `Carousel` component
 * @param {boolean} [props.hasBorder] - Optional flag to add border in SummaryItem
 * @param {boolean} [props.hasUnderlineHed] - Optional flag to render an underline below hed in SummaryItem
 * @param {object} [props.productProps] - Optional productProps containing props supported by `PLPProductCard` component
 * @param {object} [props.layoutName] - Optional layoutName to track product impression supported by `PLPProductCard` component
 * @param {bool} [props.isLazy] - Optional Flag to support lazy loading of images
 * @param {boolean} [props.shouldAppendReadMoreLinkForDek] - Optiona; flag to render read more link with dek in SummaryItem
 * @param {boolean} [props.summaryItemVariation] - Optiona; SummaryItem variation name
 * @param {boolean} props.isUpcEnabled - Optional props to enable Unified Product cards
 * @param {boolean} [props.isPlpCurated] - Optional - to remove the padding bottom from carousel slider
 * @param {boolean} [props.isContentCenter] - Optional - to align content and button center
 * @param {boolean} [props.shouldOpenInternalLinksInNewTab] - Optional component config to open internal link in a new tab
 * @param {boolean} [props.hideRubricLink] - [`bool`] Optional. Set `true` for hide rubrics link, set `false` for show rubrics link.
 * @param {boolean} [props.hasNoHeroProductVisualImage] - [`bool`] Optional. Flag to handle the case when there is no hero image for VisualCarousel.
 * @param {boolean} [props.shouldHideDangerousDek] - optional for hiding summaryItem dek
 * @param {string} [props.templateLayout] - prop for template layout of the bundle container
 * @param {boolean} [props.isSponsoredProductEnabledforCommerce] - Optional flag to enable sponsored product
 * @param {number} [props.nativeSponsorProductPositionCarousel] - Optional prop to set the position of sponsored product in carousel
 *
 * @returns {ReactElement} <div>
 */
const ProductCardCarousel = ({ cardLayout, productList, carouselViewProps, hasBorder = false, hasUnderlineHed = true, productProps, layoutName, isLazy, shouldAppendReadMoreLinkForDek = true, summaryItemVariation = 'TextBelowLeft', isUpcEnabled, isContentCenter, isPlpCurated, shouldOpenInternalLinksInNewTab, hideRubricLink, hasNoHeroProductVisualImage, shouldHideDangerousDek, templateLayout, isSponsoredProductEnabledforCommerce, nativeSponsorProductPositionCarousel }) => {
    const layout = 'ContentCarousel';
    const [isCommerceSponsorProductAdEmpty, setIsCommerceSponsorProductAdEmpty] = useState(false);
    const VALID_PRODUCT_CONTENT_TYPES = ['product', 'commerce-product'];
    React.useEffect(() => {
        window.addEventListener('scroll', debounce(() => productImpressionTracking(layout, document.getElementsByClassName('impressionTracking')), 1000));
        window.addEventListener('load', () => productImpressionTracking(layout, document.getElementsByClassName('impressionTracking')));
    }, [layout]);
    const isUPCProduct = (type) => isUpcEnabled && VALID_PRODUCT_CONTENT_TYPES.includes(type);
    const productCard = (product, index) => {
        const { contentType } = product || '';
        const data_item = { ...product, index, layout: 'VisualCarousel' };
        let carouselItemCardLayout = cardLayout;
        // Set layout depending on the ContentType of the item
        let SummaryItemComponent = SummaryItem[summaryItemVariation];
        if (contentType === 'article' ||
            contentType === 'gallery' ||
            contentType === 'externallink') {
            carouselItemCardLayout = 'summary-item-card';
        }
        if (isUPCProduct(contentType)) {
            carouselItemCardLayout = 'unified-product-card';
        }
        if (product.isTextExternalLink ||
            (product.showLinkedAsset && product.isTextExternalLink)) {
            // If the product is an external link and text embed or has a linked asset with text embed external link
            SummaryItemComponent = SummaryItem.SideBySideDenseNoAsset;
        }
        else if (product.showAssetOnly || product.showLinkedAsset) {
            // if showAssetOnly or showLinkedAsset is set SummaryItemSimple has to be used instead of SummaryItem
            SummaryItemComponent = SummaryItemSimple;
        }
        else if (isContentCenter && contentType === 'externallink') {
            SummaryItemComponent = SummaryItem.TextBelowCenter;
        }
        switch (carouselItemCardLayout) {
            case 'summary-item-card':
                return (React.createElement(SummaryItemComponent, { ...product, key: `${product.dangerousHed}-${index}`, ...productProps, hasUnderlineHed: hasUnderlineHed, isLazy: isLazy, shouldAppendReadMoreLinkForDek: shouldAppendReadMoreLinkForDek, hasBorder: hasBorder, showShopNowButton: contentType === 'externallink', buttonSize: "default", shouldUseSmallHed: contentType === 'externallink', isPlpCurated: isPlpCurated, shouldOpenInternalLinksInNewTab: shouldOpenInternalLinksInNewTab, layout: layout, index: index, hideRubricLink: hideRubricLink, shouldHideDangerousDek: shouldHideDangerousDek, isTextExternalLink: product.isTextExternalLink }));
            case 'unified-product-card':
                return (React.createElement(UnifiedProductCard, { ...product, key: `${product.dangerousHed}-${index}`, data_item: data_item, isLazy: isLazy, hasImpressionTracking: true, layoutName: layoutName, layout: layout, shouldDisableCreditText: true, componentUsed: "carousel" }));
            case 'plp-product-card':
            default:
                return (React.createElement(PLPProductCard, { ...product, isLazy: isLazy, key: `${product.dangerousHed}-${index}`, ...productProps, hasImpressionTracking: true, data_item: product, onClick: (e, actionId) => {
                        formatGtmData({
                            window,
                            product,
                            index,
                            actionId,
                            layout,
                            event: e,
                            layoutTitle: layoutName
                        });
                    }, layoutName: layoutName, layout: layout }));
        }
    };
    const { showControls, dangerousHed, itemsDensity } = carouselViewProps;
    // Convert position (1-based) to array index (0-based)
    const sponsorProductCarouselIndex = nativeSponsorProductPositionCarousel - 1;
    // Check if the sponsor-product Ad should be shown
    const shouldShowSponsorProductAd = (product, index) => {
        return (product &&
            VALID_PRODUCT_CONTENT_TYPES.includes(product.contentType) &&
            index === sponsorProductCarouselIndex &&
            sponsorProductCarouselIndex < productList.length &&
            isSponsoredProductEnabledforCommerce &&
            !isCommerceSponsorProductAdEmpty);
    };
    return (React.createElement(ProductCardCarouselWrapper, { hasPadding: carouselViewProps?.hasPadding, hasNoHeroProductVisualImage: hasNoHeroProductVisualImage },
        React.createElement(Carousel, { carouselSettings: {
                showControls,
                controlsPosition: hasNoHeroProductVisualImage ? 'header' : 'footer',
                itemsDensity
            } }, productList.map((product, index) => (React.createElement(React.Fragment, { key: `fragment-${index}` },
            shouldShowSponsorProductAd(product, index) && (React.createElement(Carousel.CarouselItem, { key: `commerce-sponsor-product-ad-${index}` },
                React.createElement(Ad, { position: "sponsor-product", templateLayout: templateLayout, onEmpty: () => setIsCommerceSponsorProductAdEmpty(true) }))),
            React.createElement(Carousel.CarouselItem, { key: `carouselItem-${index}`, itemsDensity: itemsDensity, trackingEventData: {
                    carouselName: dangerousHed,
                    itemIndex: index,
                    totalItems: productList.length
                } }, productCard(product, index))))))));
};
ProductCardCarousel.propTypes = {
    cardLayout: PropTypes.oneOf(['summary-item-card', 'plp-product-card']),
    carouselViewProps: PropTypes.object,
    hasBorder: PropTypes.bool,
    hasNoHeroProductVisualImage: PropTypes.bool,
    hasUnderlineHed: PropTypes.bool,
    hideRubricLink: PropTypes.bool,
    isContentCenter: PropTypes.bool,
    isLazy: PropTypes.bool,
    isPlpCurated: PropTypes.bool,
    isSponsoredProductEnabledforCommerce: PropTypes.bool,
    isUpcEnabled: PropTypes.bool,
    layoutName: PropTypes.string,
    nativeSponsorProductPositionCarousel: PropTypes.number,
    productList: PropTypes.array,
    productProps: PropTypes.object,
    shouldAppendReadMoreLinkForDek: PropTypes.bool,
    shouldHideDangerousDek: PropTypes.bool,
    shouldOpenInternalLinksInNewTab: PropTypes.bool,
    summaryItemVariation: PropTypes.string,
    templateLayout: PropTypes.string
};
module.exports = ProductCardCarousel;
//# sourceMappingURL=ProductCardCarousel.js.map

/***/ }),

/***/ 24357:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const SectionTitle = __webpack_require__(35864);
const ExpertCard = __webpack_require__(45698);
const ProductCardCarousel = __webpack_require__(19505);
const ResponsiveAsset = __webpack_require__(73275);
const PaletteProvider = __webpack_require__(49235);
const { Disclaimer } = __webpack_require__(74307);
const { ProductVisualWrapper, GridWrapper, SectionTitleWrapper } = __webpack_require__(78554);
const setAdjustedExpertCardText = (newTitle, originalTitle) => {
    return { title: newTitle, subHed: originalTitle };
};
/**
 * ProductVisual component
 *
 * @param {object} props - React props
 * @param {string} [props.hed] - heading text, aka _hed_ (example component prop)
 * @param {object} [props.expertCardContent] - Optional expertCardContent of `{ title, links[] }` information
 * @param {Array} [props.productList] - Optional productList of `{ products }` information
 * @param {object} [props.carouselViewProps] - Optional carouselViewProps containing props supported by `Carousel` component
 * @param {object} [props.productProps] - Optional productProps containing props supported by `PLPProductCard` component
 * @param {object} [props.productVisualAsset] - Optional productVisualAsset containing asset details supported by `ResponsiveAsset` component
 * @param {object} [props.sectionTitleVariation] - Optional sectionTitleVariation containing props supported by 'SectionTitle' component
 * @param {object} [props.shouldUseHedInExpertCard] - Optional shouldUseHedInExpertCard component config setting,
 * @param {bool} [props.theme] - Optional flag for theme, default value is standard
 * @param {bool} [props.isLazy] - Optional Flag to support lazy loading of images
 * if true the hed field is used as the expert card title rather than in the section title. Any existing expert card title becomes a sub title in the card
 * @param {boolean} [props.shouldAppendReadMoreLinkForDek] - Optiona; flag to render read more link with dek in SummaryItem
 * @param {boolean} [props.summaryItemVariation] - Optiona; SummaryItem variation name
 * @param {object} [props.variations] - Variation properties used in rendering the component.
 * @param {string} [props.variations.layout] - Optional. Specifies that component should use summary-item or plp-product-card for rendering items
 * @param {string} [props.showDisclaimer] - optional flag for disabling disclaimer text with tag
 * @param {boolean} [props.isFirstProductListingContainer] - Optional flag for showing affiliateDisclaimer
 * @param {boolean} [props.isPlpCurated] - Optional - to remove the padding bottom from carousel slider
 * @param {boolean} [props.isContentCenter] - Optional - to align content and button center
 * @param {boolean} [props.shouldOpenInternalLinksInNewTab] - Optional component config to open internal link in a new tab
 * @param {boolean} [props.hideRubricLink] - [`bool`] Optional. Set `true` for hide rubrics link, set `false` for show rubrics link.
 * @param {boolean} [props.shouldHideDangerousDek] - optional flag to hide the dek for summary Item
 * @param {string} [props.templateLayout] - prop for template layout of the bundle container
 * @param {object} [props.config] - Verso settings configs to access adsConfig here
 *
 * @returns {ReactElement} <div>
 */
const ProductVisual = (props) => {
    const { hed, productVisualAsset, sectionTitleVariation = 'LineAboveLineBelowTextCenter', expertCardContent = undefined, productList = [], carouselViewProps = {
        showControls: true,
        hasPadding: true,
        itemsDensity: 'min'
    }, productProps = {
        isDropshipProduct: true,
        isProductCardName: true,
        hasUnderlineHed: false,
        hasImageGrid: true,
        hasProductPriceColor: true
    }, shouldUseHedInExpertCard = true, theme = 'standard', isLazy, variations = {
        layout: 'plp-product-card'
    }, isFirstProductListingContainer, showDisclaimer, affiliateDisclaimer, summaryItemVariation, shouldAppendReadMoreLinkForDek, isUpcEnabled, isContentCenter, isPlpCurated, shouldOpenInternalLinksInNewTab, hideRubricLink, showRichTextInDek = false, shouldHideDangerousDek, templateLayout, config } = props;
    const { layout } = variations;
    const layoutName = hed ? hed.replace(/[^a-zA-Z]+/gi, '-').toLowerCase() : '';
    let dangerousHed = hed;
    let adjustedExpertCardText = {};
    if (shouldUseHedInExpertCard && hed) {
        dangerousHed = undefined;
        adjustedExpertCardText = setAdjustedExpertCardText(hed, expertCardContent?.title);
    }
    carouselViewProps.dangerousHed = layoutName;
    const SectionTitleComponent = SectionTitle[sectionTitleVariation];
    const isSponsoredProductEnabledforCommerce = config?.adsConfig?.enableNativeSponsoredProductforCommerce || false;
    const nativeSponsorProductPositionCarousel = config?.adsConfig?.nativeSponsorProductPositionCarousel || 3;
    return (React.createElement(PaletteProvider, { palette: theme },
        React.createElement(ProductVisualWrapper, { hasNoHeroProductVisualImage: !productVisualAsset, isFirstProductListingContainer: isFirstProductListingContainer && showDisclaimer },
            isFirstProductListingContainer && showDisclaimer && (React.createElement(Disclaimer.TextCenterNoTopRule, { isEnabled: showDisclaimer, hasDisclaimerBottomMargin: !productVisualAsset, disclaimerHtml: affiliateDisclaimer })),
            dangerousHed && (React.createElement(SectionTitleWrapper, null,
                React.createElement(SectionTitleComponent, { dangerousHed: dangerousHed }))),
            React.createElement(GridWrapper, null,
                expertCardContent && (React.createElement(ExpertCard, { ...expertCardContent, ...adjustedExpertCardText, hasNoHeroProductVisualImage: !productVisualAsset, shouldUseHedInExpertCard: shouldUseHedInExpertCard, showRichTextInDek: showRichTextInDek })),
                productVisualAsset && (React.createElement(ResponsiveAsset, { ...productVisualAsset, isLazy: isLazy })),
                productList.length > 0 && (React.createElement(ProductCardCarousel, { cardLayout: layout, productList: productList, carouselViewProps: carouselViewProps, productProps: productProps, layoutName: layoutName, isLazy: isLazy, summaryItemVariation: summaryItemVariation, shouldAppendReadMoreLinkForDek: shouldAppendReadMoreLinkForDek, isUpcEnabled: isUpcEnabled, isContentCenter: isContentCenter, isPlpCurated: isPlpCurated, shouldOpenInternalLinksInNewTab: shouldOpenInternalLinksInNewTab, hideRubricLink: hideRubricLink, hasNoHeroProductVisualImage: !productVisualAsset, shouldHideDangerousDek: shouldHideDangerousDek, templateLayout: templateLayout, isSponsoredProductEnabledforCommerce: isSponsoredProductEnabledforCommerce, nativeSponsorProductPositionCarousel: nativeSponsorProductPositionCarousel }))))));
};
ProductVisual.propTypes = {
    affiliateDisclaimer: PropTypes.string,
    carouselViewProps: PropTypes.object,
    config: PropTypes.shape({
        adsConfig: PropTypes.shape({
            enableNativeSponsoredProductforCommerce: PropTypes.bool,
            nativeSponsorProductPositionCarousel: PropTypes.number
        })
    }),
    expertCardContent: PropTypes.object,
    hed: PropTypes.string,
    hideRubricLink: PropTypes.bool,
    isContentCenter: PropTypes.bool,
    isFirstProductListingContainer: PropTypes.bool,
    isLazy: PropTypes.bool,
    isPlpCurated: PropTypes.bool,
    isUpcEnabled: PropTypes.bool,
    productList: PropTypes.array,
    productProps: PropTypes.object,
    productVisualAsset: PropTypes.object,
    sectionTitleVariation: PropTypes.string,
    shouldAppendReadMoreLinkForDek: PropTypes.bool,
    shouldHideDangerousDek: PropTypes.bool,
    shouldOpenInternalLinksInNewTab: PropTypes.bool,
    shouldUseHedInExpertCard: PropTypes.bool,
    showDisclaimer: PropTypes.bool,
    showRichTextInDek: PropTypes.bool,
    summaryItemVariation: PropTypes.string,
    templateLayout: PropTypes.string,
    theme: PropTypes.oneOf(['standard', 'inverted']),
    variations: PropTypes.shape({
        layout: PropTypes.oneOf(['summary-item-card', 'plp-product-card'])
    })
};
module.exports = ProductVisual;
//# sourceMappingURL=ProductVisual.js.map

/***/ }),

/***/ 49350:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const { asThemedComponent } = __webpack_require__(20223);
const ProductVisual = __webpack_require__(77806);
module.exports = asThemedComponent(asConfiguredComponent(ProductVisual, 'ProductVisual'));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 78554:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { calculateSpacing, getTypographyStyles, minScreen, maxScreen, getColorStyles, isInverted } = __webpack_require__(26865);
const { BaseText } = __webpack_require__(76955);
const Grid = __webpack_require__(86659);
const Button = __webpack_require__(73730);
const { SpanWrapper } = __webpack_require__(18117);
const { BREAKPOINTS } = __webpack_require__(96472);
const { CarouselContainer, CarouselListItem, CarouselNavigationWrapper, FooterNavigationWrapper } = __webpack_require__(72662);
const ProductVisualWrapper = styled.div.withConfig({
    displayName: 'ProductVisualWrapper'
}) `
  ${({ hasNoHeroProductVisualImage, isFirstProductListingContainer }) => hasNoHeroProductVisualImage &&
    `
    ${minScreen(BREAKPOINTS.md)} {
    margin-top: ${isFirstProductListingContainer
        ? calculateSpacing(4)
        : calculateSpacing(15)};
  }`}
`;
const SectionTitleWrapper = styled(Grid.MarginsOnly).withConfig({
    displayName: 'SectionTitleWrapper'
}) `
  padding-bottom: ${calculateSpacing(2)};
`;
/* ExpertCard component styles */
const ExpertCardWrapper = styled.div.withConfig({
    displayName: 'ExpertCardWrapper'
}) `
  grid-column: 1 / span 4;
  margin: ${calculateSpacing(2)} ${calculateSpacing(3)};
  ${({ hasNoHeroProductVisualImage }) => hasNoHeroProductVisualImage &&
    `
    margin: 0;
    text-align: center;
    ${maxScreen(BREAKPOINTS.md)} {
      margin-bottom : ${calculateSpacing(2)};
    }
  `}
  ${minScreen(BREAKPOINTS.md)} {
    grid-column: 1 / span 3;
    grid-row: 2;
    margin: ${calculateSpacing(3)} 0 ${calculateSpacing(5)}
      ${calculateSpacing(6)};
  }
`;
const Title = styled(BaseText).withConfig({
    displayName: 'Title'
}) `
  ${({ shouldUseHedInExpertCard }) => shouldUseHedInExpertCard
    ? getTypographyStyles('typography.definitions.discovery.hed-core-secondary')
    : getTypographyStyles('typography.definitions.discovery.hed-feature')}

  margin-bottom: ${calculateSpacing(2)};
  ${({ theme }) => isInverted(theme) &&
    `
  ${getColorStyles(theme, 'color', 'colors.consumption.lead.inverted.heading')};
  `}
`;
const DisclaimerText = styled(BaseText).withConfig({
    displayName: 'DisclaimerText'
}) `
  margin-bottom: ${calculateSpacing(2)};
  ${getTypographyStyles('typography.definitions.globalEditorial.context-secondary')};
  ${({ theme }) => isInverted(theme) &&
    `
  ${getColorStyles(theme, 'color', 'colors.consumption.lead.inverted.description')};
  `}
`;
const SubHed = styled(BaseText).withConfig({
    displayName: 'SubHed'
}) `
  ${getTypographyStyles('typography.definitions.discovery.description-page')};
  margin: ${calculateSpacing(2)} 0 ${calculateSpacing(3)} 0;
  ${({ theme }) => isInverted(theme) &&
    `
  ${getColorStyles(theme, 'color', 'colors.consumption.lead.inverted.description')};
  `}
  ${({ showRichTextInDek }) => showRichTextInDek &&
    `
    ul, ol {
      list-style-position: inside;
      padding-left: 0;
    }
  `}
`;
const ButtonsWrapper = styled.div.withConfig({
    displayName: 'ButtonsWrapper'
}) ``;
const UtilityButton = styled(Button.Utility).withConfig({
    displayName: 'UtilityButton'
}) `
  margin: 0 ${calculateSpacing(1.5)} ${calculateSpacing(2)} 0;
  ${minScreen(BREAKPOINTS.md)} {
    margin: 0 ${calculateSpacing(1.5)} ${calculateSpacing(1.5)} 0;
  }
`;
/* CarouselList component styles */
const ProductCardCarouselWrapper = styled.div.withConfig({
    displayName: 'ProductCardCarouselWrapper'
}) `
  grid-column: 1 / span 4;
  margin: ${calculateSpacing(-5)} 0 ${calculateSpacing(4)} 0;
  overflow-x: clip;
  ${({ hasNoHeroProductVisualImage }) => hasNoHeroProductVisualImage &&
    `
    ${maxScreen(BREAKPOINTS.md)} {
     margin: 0 0 ${calculateSpacing(4)} 0;
    }
  `}

  ${minScreen(BREAKPOINTS.md)} {
    grid-column: 4 / -1;
    grid-row: 2;
    margin-top: ${calculateSpacing(-13)};
    margin-left: ${calculateSpacing(3)};
  }

  ${CarouselContainer} {
    margin: ${calculateSpacing(2)} 0;
    ${({ hasNoHeroProductVisualImage }) => !hasNoHeroProductVisualImage &&
    `
      margin-top: ${calculateSpacing(-3)};
    `}
    ${CarouselNavigationWrapper} {
      margin-right: ${calculateSpacing(3)};
      ${minScreen(BREAKPOINTS.md)} {
        margin-right: ${calculateSpacing(6)};
      }
    }
    ${FooterNavigationWrapper} {
      padding-top: ${calculateSpacing(2)};
    }
    ${CarouselListItem}:first-child {
      box-sizing: content-box;
      ${({ hasPadding }) => hasPadding
    ? `padding-left: ${calculateSpacing(3)};
            ${minScreen(BREAKPOINTS.md)}
            {  
              padding-left: 0;
            }`
    : `padding-left: 0;`}
    }
    ${CarouselListItem}:last-child {
      box-sizing: content-box;
      ${({ hasPadding }) => hasPadding
    ? `padding-right: ${calculateSpacing(3)};
            ${minScreen(BREAKPOINTS.md)}
            {  
              padding-right: ${calculateSpacing(6)};
            }`
    : `padding-right: 0;`}
    }
  }
`;
/* GridWrapper styles (included at end since it references the other styled components) */
const GridWrapper = styled.div.withConfig({
    displayName: 'GridWrapper'
}) `
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 0 ${calculateSpacing(4)} 0;
  width: 100%;
  row-gap: 0;
  ${SpanWrapper} {
    grid-column: 1 / span 4;

    img {
      width: 100vw;
    }
  }
  ${minScreen(BREAKPOINTS.md)} {
    grid-template-columns: repeat(12, 1fr);
    margin: 0 0 ${calculateSpacing(5)} 0;
    ${SpanWrapper} {
      grid-column: 1 / span 12;
      grid-row: 1;

      img {
        width: 100vw;
      }
    }
  }
`;
module.exports = {
    ProductVisualWrapper,
    SectionTitleWrapper,
    GridWrapper,
    ExpertCardWrapper,
    Title,
    ButtonsWrapper,
    UtilityButton,
    ProductCardCarouselWrapper,
    SubHed,
    DisclaimerText
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 77806:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const ProductVisual = __webpack_require__(24357);
ProductVisual.PLPProductCard = asVariation(ProductVisual, 'PLPProductCard', {
    layout: 'plp-product-card'
});
ProductVisual.SummaryItemCard = asVariation(ProductVisual, 'SummaryItemCard', {
    layout: 'summary-item-card'
});
module.exports = ProductVisual;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 20045:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const PropTypes = __webpack_require__(5556);
const get = __webpack_require__(58156);
const classnames = __webpack_require__(32485);
const { googleAnalytics } = __webpack_require__(90090);
const { useViewportObserver } = __webpack_require__(55030);
const translations = (__webpack_require__(21816)/* ["default"] */ .A);
const TARGET_OBSERVER_SELECTOR = '.related-list';
const { TrackComponentChannel } = __webpack_require__(78788);
const { RelatedListWrapper, RelatedListHeading, RelatedListSummaryItem, RelatedListItems, RelatedListItem } = __webpack_require__(5662);
/**
 * RelatedList component
 *
 * @param {object} props - React props
 * @param {string} [props.bylineVariation] - optional byline variation
 * @param {string} [props.className] - optional class name
 * @param {func/node} [props.children] - optional children either function or node
 * @param {string} [props.heading] - optional heading text
 * @param {bool} [props.shouldLinkByline] - optional should link byline
 * @param {bool} [props.shouldHideRubric] - optional should hide rubric
 * @param {bool} [props.shouldHideBylines] - optional should hide bylines
 *
 */
const RelatedList = ({ bylineVariation, className, children, heading, shouldLinkByline = true, shouldHideRubric = false, shouldHideBylines = true }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'RelatedList'
        });
    }, []);
    const { formatMessage } = useIntl();
    const trackingStoryClickEvent = (url) => () => {
        googleAnalytics.emitGoogleTrackingEvent('recirc-related_inline-click', {
            'gtm.elementUrl': url
        });
    };
    const trackingImpressionEvent = () => {
        googleAnalytics.emitUniqueGoogleTrackingEvent('recirc-related_inline-impression');
    };
    useViewportObserver(TARGET_OBSERVER_SELECTOR, undefined, (isInViewport) => {
        if (isInViewport) {
            trackingImpressionEvent();
        }
    });
    if (!children || !children.length) {
        return null;
    }
    const titleRegex = /^h[1-6]$/;
    const mappedHeadingRegex = /^div$/;
    const mappedClassRegex = /^heading-h[1-6]$/;
    const titleElement = children.find((child) => {
        const { type, props: { className: childClassName } = {} } = child;
        return (typeof type === 'string' &&
            (titleRegex.test(type) ||
                (mappedHeadingRegex.test(type) &&
                    mappedClassRegex.test(childClassName))));
    });
    const inlineTitle = titleElement ? get(titleElement, 'props.children') : null;
    const items = children.filter((child) => {
        const { type, props: { newClassName } = {} } = child;
        return (!titleRegex.test(type) &&
            !mappedHeadingRegex.test(type) &&
            !mappedClassRegex.test(newClassName));
    });
    return (React.createElement(RelatedListWrapper, { className: classnames('related-list', className) },
        React.createElement(RelatedListHeading, null, inlineTitle || heading || formatMessage(translations.sectionTitle)),
        React.createElement(RelatedListItems, null, items.map((item, index) => {
            const { authors, dangerousHed, image, rubric, url } = item.props;
            return (React.createElement(RelatedListItem, { key: index },
                React.createElement(RelatedListSummaryItem, { bylineVariation: bylineVariation, clickHandler: trackingStoryClickEvent(url), contentType: "article", contributors: { author: authors }, dangerousHed: dangerousHed, hasRule: false, hedTag: "div", image: image, maxHedLines: 3, rubric: shouldHideRubric ? null : rubric, url: url, shouldHideBylines: shouldHideBylines, shouldLinkByline: shouldLinkByline })));
        }))));
};
RelatedList.propTypes = {
    bylineVariation: PropTypes.string,
    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
    className: PropTypes.string,
    heading: PropTypes.string,
    shouldHideBylines: PropTypes.bool,
    shouldHideRubric: PropTypes.bool,
    shouldLinkByline: PropTypes.bool
};
RelatedList.displayName = 'RelatedList';
module.exports = RelatedList;
//# sourceMappingURL=RelatedList.js.map

/***/ }),

/***/ 77666:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const RelatedList = __webpack_require__(20045);
module.exports = asConfiguredComponent(RelatedList, 'RelatedList');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 5662:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const SummaryItem = __webpack_require__(74992);
const { BaseText } = __webpack_require__(76955);
const { INTERACTIVE } = __webpack_require__(96472);
const { calculateSpacing, getColorToken, getTypographyStyles } = __webpack_require__(26865);
const RelatedListWrapper = styled.div.withConfig({
    displayName: 'RelatedListWrapper'
}) `
  display: flex;
  flex-direction: column;
  justify-content: center;
`;
const RelatedListHeading = styled(BaseText).withConfig({
    displayName: 'RelatedListHeading'
}) `
  border-top: ${calculateSpacing(0.25, 'px')} solid
    ${getColorToken('colors.consumption.body.standard.display-texture')};
  border-bottom: ${calculateSpacing(0.25, 'px')} solid
    ${getColorToken('colors.consumption.body.standard.display-texture')};
  padding: ${calculateSpacing(2)} 0;
`;
RelatedListHeading.defaultProps = {
    as: 'div',
    typeIdentity: 'typography.definitions.discovery.subhed-section-tertiary'
};
const RelatedListSummaryItem = styled(SummaryItem.SideBySideThirds).withConfig({
    displayName: 'RelatedListSummaryItem'
}) `
  &.summary-item {
    grid-column-gap: ${calculateSpacing(3)};
    grid-template-columns: 75px auto;
    align-items: flex-start;
    padding: ${calculateSpacing(2)} 0;

    .summary-item__hed {
      ${getTypographyStyles('typography.definitions.discovery.hed-bulletin-primary')};
      transition: color ${INTERACTIVE.timingButtonDefault} ease;
      margin-top: 0;
      margin-bottom: ${calculateSpacing(1)};
    }
  }

  .rubric.summary-item__rubric {
    ${getTypographyStyles('typography.definitions.globalEditorial.context-primary')};
    display: block;
    margin-bottom: ${calculateSpacing(1)};
    color: ${getColorToken('colors.discovery.body.white.heading')};
  }

  &.summary-item--has-border {
    border-bottom: ${calculateSpacing(0.125, 'px')} solid
      ${getColorToken('colors.consumption.body.standard.divider')};
  }

  .summary-item__byline {
    margin-bottom: 0;
  }

  .summary-item__byline-authors {
    &.byline,
    &.byline__preamble,
    &.byline__name,
    &.byline__name-link,
    &.byline__social-link {
      ${getTypographyStyles('typography.definitions.globalEditorial.accreditation-core')};
      color: ${getColorToken('colors.discovery.body.white.heading')};
    }
  }

  .summary-item__content {
    .summary-item__hed-link {
      &:link,
      &:visited {
        text-decoration: none;
        color: ${getColorToken('colors.consumption.body.standard.subhed')};
      }

      &:active,
      &:focus,
      &:hover {
        text-decoration: underline;
        color: ${getColorToken('colors.consumption.body.standard.subhed')};
      }
    }
  }
`;
const RelatedListItems = styled.div.withConfig({
    displayName: 'RelatedListItems'
}) ``;
const RelatedListItem = styled.div.withConfig({
    displayName: 'RelatedListItem'
}) ``;
module.exports = {
    RelatedListWrapper,
    RelatedListHeading,
    RelatedListSummaryItem,
    RelatedListItems,
    RelatedListItem
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 21816:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    sectionTitle: {
        id: 'RelatedList.SectionTitle',
        defaultMessage: 'Related Stories',
        description: 'Section title for list of related stories',
        isConfigurable: true
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 70132:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const classnames = __webpack_require__(32485);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const InformationIcon = __webpack_require__(83558);
const Button = __webpack_require__(73730);
const Alert = __webpack_require__(54330);
const { TrackComponentChannel } = __webpack_require__(78788);
const translations = (__webpack_require__(45905)/* ["default"] */ .A);
const { ReviewRatingDataLabel, ReviewRatingDataWrapper, ReviewRatingDataValue, ReviewRatingDataExplainer, ReviewRatingDataExplainerModal, ReviewRatingDataExplainerModalList, ReviewRatingDataExplainerModalListRating, ReviewRatingDataExplainerModalListDescribe } = __webpack_require__(63815);
/**
 * The Rating Data component of the content header
 *
 * @param {string} [props.className] - Optional top-level class to add
 * @param {number} [props.rating] - Numeric rating
 * @param {Array} [props.ratingList] - Optional object with rating description
 *
 * @returns {ReactElement} - the review metadata and disclaimer
 */
const ReviewRatingData = ({ className, rating = 0, ratingList = [] }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ReviewRatingData'
        });
    }, []);
    const intl = useIntl();
    const [isHideRatingExplainer, setHideRatingExplainer] = React.useState(true);
    const toggle = () => {
        setHideRatingExplainer(!isHideRatingExplainer);
    };
    const ratingDescriptionLayout = (React.createElement(ReviewRatingDataExplainerModal, { className: "review-rating-data__rating-explainer-modal" }, ratingList.map((item, key) => (React.createElement(ReviewRatingDataExplainerModalList, { key: item },
        React.createElement(ReviewRatingDataExplainerModalListRating, { as: "span" }, key + 1),
        React.createElement(ReviewRatingDataExplainerModalListDescribe, { as: "span" }, item))))));
    return (React.createElement(ReviewRatingDataWrapper, { className: classnames('review-rating-data', className) },
        React.createElement(ReviewRatingDataLabel, { className: "review-rating-data__label" }, intl.formatMessage(translations.dataLabel)),
        React.createElement(ReviewRatingDataValue, null,
            rating,
            "/10"),
        React.createElement(ReviewRatingDataExplainer, null,
            React.createElement(Button.Utility, { isIconButton: true, ButtonIcon: InformationIcon, className: "review-rating-data__info-button", label: intl.formatMessage(translations.buttonLabel), onClickHandler: toggle, role: "button" }),
            !isHideRatingExplainer && (React.createElement(Alert, { className: "alert__tooltip", arrowPosition: 52, gaIdentifier: "review-rating-explainer", isVisible: true, isTooltip: true, onClose: toggle, shouldUseArrow: true }, ratingDescriptionLayout)))));
};
ReviewRatingData.propTypes = {
    className: PropTypes.string,
    rating: PropTypes.number,
    ratingList: PropTypes.array
};
ReviewRatingData.displayName = 'ReviewRatingData';
module.exports = ReviewRatingData;
//# sourceMappingURL=ReviewRatingData.js.map

/***/ }),

/***/ 94149:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const ReviewRatingData = __webpack_require__(70132);
module.exports = asConfiguredComponent(ReviewRatingData, 'ReviewRatingData');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 63815:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BaseText } = __webpack_require__(76955);
const { calculateSpacing, getTypographyStyles, getColorToken } = __webpack_require__(26865);
const ReviewRatingDataWrapper = styled.div.withConfig({
    displayName: 'ReviewRatingDataWrapper'
}) `
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  margin-top: ${calculateSpacing(2)};
  width: 100%;
`;
const ReviewRatingDataLabel = styled(BaseText).withConfig({
    displayName: 'ReviewRatingDataLabel'
}) `
  margin-right: ${calculateSpacing(1)};
`;
ReviewRatingDataLabel.defaultProps = {
    as: 'span',
    typeIdentity: 'typography.definitions.consumptionEditorial.subhed-aux-primary'
};
const ReviewRatingDataValue = styled(BaseText).withConfig({
    displayName: 'ReviewRatingDataValue'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.subhed-aux-primary')}
  color: ${({ theme }) => getColorToken(theme, 'colors.consumption.body.standard.subhed')};
`;
const ReviewRatingDataExplainer = styled.div.withConfig({
    displayName: 'ReviewRatingDataExplainer'
}) `
  margin-left: ${calculateSpacing(0.5)};

  .review-rating-data__info-button,
  .review-ratingdata__close-button {
    margin: 0;
    border: 0;
    background-color: ${({ theme }) => getColorToken(theme, 'colors.interactive.base.white')};
    fill: ${({ theme }) => getColorToken(theme, 'colors.consumption.body.standard.accent')};
    padding: 0;

    &:hover,
    &:focus {
      border: 0;
      background: none;
    }
  }

  .icon {
    padding-right: 5px;
    width: 24px;
    height: 24px;
  }

  .review-rating-data__info-button {
    .button__icon-container,
    .icon {
      padding-right: 0;
      width: 18px;
      height: 18px;
    }
  }

  .icon.icon-close {
    width: 35px;
    height: 35px;
  }
`;
const ReviewRatingDataExplainerModal = styled.div.withConfig({
    displayName: 'ReviewRatingDataExplainerModal'
}) `
  padding: ${calculateSpacing(2)} 0 ${calculateSpacing(2)}
    ${calculateSpacing(2)};
`;
const ReviewRatingDataExplainerModalList = styled.div.withConfig({
    displayName: 'ReviewRatingDataExplainerModalList'
}) `
  display: flex;
  letter-spacing: 0;
`;
const ReviewRatingDataExplainerModalListRating = styled.span.withConfig({
    displayName: 'ReviewRatingDataExplainerModalListRating'
}) `
  flex: 1;
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.citation')}
  font-weight: bold;
`;
const ReviewRatingDataExplainerModalListDescribe = styled.span.withConfig({
    displayName: 'ReviewRatingDataExplainerModalListDescribe'
}) `
  flex: 9;
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.citation')}
`;
module.exports = {
    ReviewRatingDataLabel,
    ReviewRatingDataWrapper,
    ReviewRatingDataValue,
    ReviewRatingDataExplainer,
    ReviewRatingDataExplainerModal,
    ReviewRatingDataExplainerModalList,
    ReviewRatingDataExplainerModalListRating,
    ReviewRatingDataExplainerModalListDescribe
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 45905:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    dataLabel: {
        id: 'ReviewRatingData.DataLabel',
        defaultMessage: 'Rating:',
        description: 'Label for rating'
    },
    buttonLabel: {
        id: 'ReviewRatingData.ButtonLabel',
        defaultMessage: 'Open rating explainer',
        description: 'Label for rating explainer button'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 50488:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState } = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const get = __webpack_require__(58156);
const debounce = __webpack_require__(38221);
const { getLocationArray, getInputLocations } = __webpack_require__(68136);
const Circle = __webpack_require__(32272);
const SummaryCollectionGrid = __webpack_require__(91706);
const { asConfiguredComponent } = __webpack_require__(12892);
const { CategoryFilterFormWrapper, CategoryFilterDropdown, SearchableSummaryCollectionClickout, SearchableSummaryCollectionLoader, SearchableSummaryCollectionWrapper, SearchableSummaryCollectionSearchContainer } = __webpack_require__(960);
const { BaseWrap } = __webpack_require__(76955);
const Grid = __webpack_require__(86659);
const translations = (__webpack_require__(21826)/* ["default"] */ .A);
const SearchIcon = __webpack_require__(73767);
/**
 * Placeholder DropdownIcon component, consumed by react-select
 *
 * @returns {ReactElement} <span>
 */
const DropdownIcon = () => (React.createElement("span", { className: "category-filter__dropdown__icon" },
    React.createElement(SearchIcon, null)));
/**
 * CategoryFilter component
 *
 * @param {boolean} [props.isGridLayout] - Optional prop to enable grid layout
 * @returns {ReactElement} <div>
 */
const CategoryFilter = ({ handleOnSubmit, isGridLayout = true }) => {
    const { formatMessage } = useIntl();
    const ControlsWrapper = isGridLayout ? Grid.WithMargins : BaseWrap;
    const handleAsyncDropdownChange = (data) => {
        handleOnSubmit(data);
    };
    const loadOptions = debounce(getInputLocations, 300);
    return (React.createElement(CategoryFilterFormWrapper, { name: "search", type: "search" },
        React.createElement(ControlsWrapper, null,
            React.createElement(CategoryFilterDropdown, { assistiveLabel: "", DropdownIcon: DropdownIcon, isClearable: true, isAsyncSelect: true, loadOptions: loadOptions, options: [], onInputChange: handleAsyncDropdownChange, isMenuOpen: false, placeholderText: formatMessage(translations.asyncDropdownPlaceholder) }))));
};
CategoryFilter.propTypes = {
    handleOnSubmit: PropTypes.func,
    isGridLayout: PropTypes.bool
};
/**
 * SearchableSummaryCollection component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.clickoutPath] - Optional string provided to determine route for clickout url
 * @param {string} [props.dangerousHed] - Optional string for setting search container text
 * @param {object} [props.searchSettings] - Optional config set to determine route for api call
 * @param {string} [props.searchSettings.apiEndpoint] - Optional string to determine api endpoint (api/{venues}/)
 * @param {string} [props.searchSettings.contentType] - Optional string to determine content type for api endpoint (api/venues&contentType={hotel})
 * @param {boolean} [props.shouldAppendReadMoreLinkForDek] - Optional flag to pass to SummaryItem to show "read more" during dek truncation
 *
 * @returns {ReactElement} <div>
 */
const SearchableSummaryCollection = ({ className, clickoutPath, dangerousHed, searchSettings = {
    apiEndpoint: 'venues',
    contentType: 'hotel'
}, shouldAppendReadMoreLinkForDek = false }) => {
    const [hasSubmitted, setHasSubmitted] = useState(false);
    const [itemArr, setItemArr] = useState([]);
    const [isLoading, setIsLoading] = useState(true);
    const [location, setLocation] = useState({});
    const { formatMessage } = useIntl();
    // takes location hierarchy value set for selection (location/united-states/illinois/chicago)
    // sets the hierarchy to be used for destination clickout and name of the searched location
    const formatLocationValue = (value) => {
        const splitValue = value.split('/');
        return {
            locationName: splitValue.pop(-1),
            locationHierarchy: splitValue.slice(1).join('/')
        };
    };
    // reset state when new input is entered
    const resetResultsContainer = () => {
        setIsLoading(true);
        setItemArr([]);
    };
    // passed in as callback in getLocationArray
    // sets state for itemArr and isLoading on successful response
    const handleItemArray = (arr) => {
        setItemArr(arr);
        setIsLoading(false);
    };
    const handleSubmit = (selection) => {
        if (selection) {
            resetResultsContainer();
            setHasSubmitted(true);
            getLocationArray(selection, searchSettings, handleItemArray);
            setLocation(formatLocationValue(selection.value));
        }
    };
    const { locationName, locationHierarchy } = location;
    const searchContainerHed = dangerousHed || formatMessage(translations.searchContainerHed);
    const locationHasVenues = get(itemArr, 'venue.items', []).length >= 1;
    const showResultsMessage = hasSubmitted && !locationHasVenues && !isLoading;
    return (React.createElement(SearchableSummaryCollectionWrapper, { className: classnames('searchable-summary-collection-wrapper', className) },
        React.createElement(SearchableSummaryCollectionSearchContainer, null,
            React.createElement("h2", null, searchContainerHed),
            React.createElement(CategoryFilter, { handleOnSubmit: handleSubmit }),
            showResultsMessage && (React.createElement("span", null, formatMessage(translations.noResultsMessage)))),
        hasSubmitted && (React.createElement(React.Fragment, null,
            isLoading && (React.createElement(SearchableSummaryCollectionLoader, null,
                React.createElement(Circle, null))),
            locationHasVenues && (React.createElement(React.Fragment, null,
                React.createElement(SummaryCollectionGrid.FourColumns, { summaryItemVariation: "TextBelowImageLeftHasRuleWithDek", sectionTitleVariation: "WrappedComponent", shouldAppendReadMoreLinkForDek: shouldAppendReadMoreLinkForDek, ...itemArr.venue, items: itemArr.venue.items.slice(0, 4) }),
                React.createElement(SearchableSummaryCollectionClickout, { inputKind: "link", href: `${clickoutPath}${locationName}?hierarchy=${locationHierarchy}`, label: formatMessage(translations.clickoutButtonLabel, {
                        location: locationName
                    }) })))))));
};
SearchableSummaryCollection.propTypes = {
    className: PropTypes.string,
    clickoutPath: PropTypes.string,
    dangerousHed: PropTypes.string,
    searchSettings: PropTypes.shape({
        apiEndpoint: PropTypes.string,
        contentType: PropTypes.string
    }),
    shouldAppendReadMoreLinkForDek: PropTypes.bool
};
SearchableSummaryCollection.displayName = 'SearchableSummaryCollection';
module.exports = asConfiguredComponent(SearchableSummaryCollection, 'SearchableSummaryCollection');
//# sourceMappingURL=SearchableSummaryCollection.js.map

/***/ }),

/***/ 68136:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getLocationArray = exports.getInputLocations = void 0;
const { fetchWithTimeout } = __webpack_require__(57743);
const MAX_TIMEOUT = 5000;
// takes an inputValue of a supplied location ('austin') and a callback
// returns array of locations associated with the inputValue for successful promise, else returns an empty array
const getInputLocations = (inputValue, callback) => {
    if (inputValue?.length > 2) {
        fetchWithTimeout(`/api/locations/${inputValue}`, {
            headers: {
                'Content-Type': 'application/json'
            },
            method: 'GET'
        }, MAX_TIMEOUT)
            .then((res) => res.json())
            .then((data) => {
            const locationsArray = data.locations.map((location) => {
                return { ...location, inputValue };
            });
            return callback(locationsArray);
        })
            .catch(() => callback([]));
    }
    else {
        callback([]);
    }
};
exports.getInputLocations = getInputLocations;
const getLocationArray = (selection, searchSettings, callback) => {
    const { apiEndpoint, contentType } = searchSettings;
    const filterQuery = `hierarchy=${selection.value}&contentType=${contentType}`;
    fetchWithTimeout(`/api/${apiEndpoint}?${filterQuery}`, {
        headers: {
            'Content-Type': 'application/json'
        },
        method: 'GET'
    }, MAX_TIMEOUT)
        .then((res) => res.json())
        .then((res) => {
        return callback(res);
    })
        .catch((error) => {
        console.warn(`Fetching of Category Filter API '/api/venues' fails: ${error}`);
        return callback([]);
    });
};
exports.getLocationArray = getLocationArray;
//# sourceMappingURL=getSearchResults.js.map

/***/ }),

/***/ 29412:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(6136);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 960:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BREAKPOINTS } = __webpack_require__(96472);
const { applyGridSpacing } = __webpack_require__(1123);
const { calculateSpacing, minScreen, getColorStyles, getColorToken, getTypographyStyles } = __webpack_require__(26865);
const Button = __webpack_require__(73730);
const Dropdown = __webpack_require__(79499);
const { GridItem } = __webpack_require__(40653);
const SearchableSummaryCollectionWrapper = styled.div.withConfig({
    displayName: 'SearchableSummaryCollectionWrapper'
}) `
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: ${calculateSpacing(2)};
  background-color: ${getColorToken('colors.discovery.body.light.background')};

  .summary-collection-grid--four-columns {
    ${minScreen(BREAKPOINTS.md)} {
      grid-column: span 3;
    }
  }
`;
const SearchableSummaryCollectionLoader = styled('div').withConfig({
    displayName: 'SearchableSummaryCollectionLoader'
}) `
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    width: 50px;
  }
`;
const SearchableSummaryCollectionSearchContainer = styled('div').withConfig({
    displayName: 'SearchableSummaryCollectionSearchContainer'
}) `
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  margin: ${calculateSpacing(2)} ${calculateSpacing(8)};
  ${applyGridSpacing('padding')};

  h2 {
    ${getTypographyStyles('typography.definitions.discovery.subhed-section-primary')}
    margin: ${calculateSpacing(2)} 0;
    text-align: center;
    color: ${getColorStyles('colors.discovery.body.light.accreditation')};
  }

  ${GridItem} {
    grid-column: span 12;
  }

  span {
    ${getTypographyStyles('typography.definitions.discovery.description-core')}
    text-transform: capitalize;
    color: ${getColorStyles('colors.discovery.body.light.accreditation')};
    justify-self: center;
  }
`;
const CategoryFilterDropdown = styled(Dropdown.Searchable).withConfig({
    displayName: 'CategoryFilterAsyncDropdown'
}) `
  grid-column: 2/9;
`;
const SearchWrapper = styled('div').withConfig({
    displayName: 'SearchWrapper'
}) `
  display: grid;
  grid-column-gap: ${calculateSpacing(2)};
  grid-template-columns: 30% 15%;
  justify-content: center;

  input {
    height: ${calculateSpacing(6)};
  }
`;
const SearchableSummaryCollectionClickout = styled(Button.Primary).withConfig({
    displayName: 'SearchableSummaryCollectionClickout'
}) `
  grid-area: 3 / 1;
  margin: ${calculateSpacing(4)};

  ${minScreen(BREAKPOINTS.lg)} {
    justify-self: center;
    max-width: 30%;
  }
`;
const CategoryFilterFormWrapper = styled.form.withConfig({
    displayName: 'CategoryFilterFormWrapper'
}) `
  .grid {
    align-items: center;
    justify-content: center;
  }

  ${GridItem}:first-of-type {
    ${minScreen(BREAKPOINTS.md)} {
      grid-column: 3/11;
    }
  }

  ${GridItem} {
    grid-column: 1 / -1;

    ${minScreen(BREAKPOINTS.md)} {
      grid-column: span 2;
    }
  }

  .category-filter__dropdown__icon {
    margin-top: ${calculateSpacing(0.5)};
    margin-right: ${calculateSpacing(1)};
  }
`;
module.exports = {
    CategoryFilterFormWrapper,
    CategoryFilterDropdown,
    SearchableSummaryCollectionClickout,
    SearchableSummaryCollectionLoader,
    SearchableSummaryCollectionWrapper,
    SearchableSummaryCollectionSearchContainer,
    SearchWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 21826:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    asyncDropdownPlaceholder: {
        id: 'SearchableSummaryCollection.AsyncDropdownPlaceholder',
        defaultMessage: 'Search by city or destination',
        description: 'Placeholder for async dropdown'
    },
    searchContainerHed: {
        id: 'SearchableSummaryCollection.SearchContainerHed',
        defaultMessage: 'Where do you want to go?',
        description: 'Hed for search container message'
    },
    submitButtonLabel: {
        id: 'SearchableSummaryCollection.SubmitButtonLabel',
        defaultMessage: 'Search',
        description: 'Label for submit button'
    },
    noMatchesFoundLabel: {
        id: 'SearchableSummaryCollection.NoMatchesFoundLabel',
        defaultMessage: 'No matches found',
        description: 'Label for dropdown when no matches are found'
    },
    noResultsMessage: {
        id: 'SearchableSummaryCollection.NoResultsMessage',
        defaultMessage: 'Sorry, there are no results for your search - please try another location',
        description: 'Message to display when no results are found for location'
    },
    clickoutButtonLabel: {
        id: 'SearchableSummaryCollection.ClickoutButtonLabel',
        defaultMessage: 'View all {location} hotels',
        description: 'Label for clickout button when matches are found'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 6136:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const SearchableSummaryCollection = __webpack_require__(50488);
module.exports = SearchableSummaryCollection;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 84903:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useEffect, useRef } = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const { connect } = __webpack_require__(67851);
const createActions = __webpack_require__(62067);
const translations = (__webpack_require__(41867)/* ["default"] */ .A);
const CloseIcon = __webpack_require__(76399);
const { TrackComponentChannel } = __webpack_require__(78788);
const { ShopifyCartCloseButton, ShopifyCartDangerousHed, ShopifyCartModalWrapper } = __webpack_require__(86721);
const ShopifyCartEmpty = __webpack_require__(34594);
const ShopifyCartItem = __webpack_require__(75916);
const { getShopifyDataFromStorage } = __webpack_require__(29946);
/**
 * ShopifyCart component
 *
 * @param {object} props - React props
 * @param {boolean} props.showShopifyCart - whether the modal is visible or not
 * @param {Array} props.shopifyCartItems - array of Shopify cart items
 * @param {Function} [props.closeButtonCallback] - callback function to run when close button is clicked
 * @param {object} props.shopifyConfiguration - Shopify configuration
 * @param {Function} props.setShopifyCartItems - function to update redux
 * @returns {ReactElement} <div>
 */
const ShopifyCart = ({ closeButtonCallback, showShopifyCart, shopifyCartItems, setShopifyCartItems, appConfig, onCartDataChange, shopifyConfiguration }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ShopifyCart'
        });
    }, []);
    const ref = useRef();
    const { formatMessage } = useIntl();
    const onClickClosedHandler = () => {
        closeButtonCallback();
    };
    useEffect(() => {
        if (showShopifyCart) {
            document.body.style.overflow = 'hidden';
            document.getElementById('app-root').style.opacity = 0.2;
        }
        else {
            document.body.style.overflow = 'unset';
            document.getElementById('app-root').style.opacity = 1;
        }
        const checkIfClickedOutside = (e) => {
            if (showShopifyCart && ref.current && !ref.current.contains(e.target)) {
                onClickClosedHandler();
            }
        };
        document.addEventListener('mousedown', checkIfClickedOutside);
        return () => {
            document.removeEventListener('mousedown', checkIfClickedOutside);
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [showShopifyCart]);
    useEffect(() => {
        const storageCartItems = getShopifyDataFromStorage('shopifyCartItems');
        if (storageCartItems?.length > 0) {
            onCartDataChange(storageCartItems);
            setShopifyCartItems(storageCartItems);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [shopifyCartItems?.length]);
    return (React.createElement(ShopifyCartModalWrapper, { isOpen: showShopifyCart, contentLabel: "Shopify cart", onRequestClose: onClickClosedHandler, shouldReturnFocusAfterClose: false, role: "dialog", className: "shopify__content", overlayClassName: "shopify__overlay" },
        React.createElement(ShopifyCartDangerousHed, null, formatMessage(translations.cartHeader)),
        React.createElement(ShopifyCartCloseButton, { onClickHandler: onClickClosedHandler, role: "button", ButtonIcon: CloseIcon, label: "ShopifyCartCloseButton", isIconButton: true }),
        shopifyCartItems?.length > 0 ? (React.createElement(ShopifyCartItem, { shopifyCartItems: shopifyCartItems, shopifyConfig: shopifyConfiguration, appConfig: appConfig })) : (React.createElement(ShopifyCartEmpty, null))));
};
ShopifyCart.propTypes = {
    appConfig: PropTypes.object,
    closeButtonCallback: PropTypes.func,
    onCartDataChange: PropTypes.func,
    setShopifyCartItems: PropTypes.func,
    shopifyCartItems: PropTypes.array,
    shopifyConfiguration: PropTypes.object,
    showShopifyCart: PropTypes.bool
};
ShopifyCart.displayName = 'ShopifyCart';
const mapStateToProps = ({ shopifyCartItems, appConfig, shopifyConfiguration }) => ({
    shopifyCartItems,
    appConfig,
    shopifyConfiguration
});
const mapDispatchToProps = (dispatch) => {
    const { setShopifyCartItems } = createActions(dispatch);
    return {
        setShopifyCartItems
    };
};
module.exports = connect(mapStateToProps, mapDispatchToProps)(ShopifyCart);
//# sourceMappingURL=ShopifyCart.js.map

/***/ }),

/***/ 34594:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(41867)/* ["default"] */ .A);
/**
 * ShopifyCartEmpty component
 *
 * @param {object} props - React props
 */
const { ShopifyCartEmptyHed, ShopifyCartEmptyButtonWrapper, ShopifyCartEmptyDiv } = __webpack_require__(86721);
const ShopifyCartEmpty = () => {
    const { formatMessage } = useIntl();
    return (React.createElement(React.Fragment, null,
        React.createElement(ShopifyCartEmptyHed, null, formatMessage(translations.emptyCartHeader)),
        React.createElement(ShopifyCartEmptyButtonWrapper, { "data-testid": "ShopifyEmptyCartButton", label: formatMessage(translations.emptyCartButtonLabel), href: formatMessage(translations.emptyCartButtonLink), inputKind: "link" }),
        React.createElement(ShopifyCartEmptyDiv, null)));
};
ShopifyCartEmpty.displayName = 'ShopifyCartEmpty';
module.exports = ShopifyCartEmpty;
//# sourceMappingURL=ShopifyCartEmpty.js.map

/***/ }),

/***/ 75916:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const Client = __webpack_require__(56004);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState } = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const { connect } = __webpack_require__(67851);
const translations = (__webpack_require__(41867)/* ["default"] */ .A);
const createActions = __webpack_require__(62067);
const CloseIcon = __webpack_require__(80046);
const AddIcon = __webpack_require__(58332);
const MinusIcon = __webpack_require__(56099);
const constants = __webpack_require__(96472);
const { ShopifyCartItemObject, ShopifyCartItemRetailerName, ShopifyCartItemWrapper, ShopifyCartItemBrandDetail, ShopifyCartItemBrandName, ShopifyCartItemBrandNameWrapper, ShopifyCartItemProductTitle, ShopifyCartItemQuantityBox, ShopifyCartItemQuantityCount, ShopifyCartItemCheckout, ShopifyCartItemTotalLabel, ShopifyCartItemTotalDek, ShopifyCartItemCheckoutObject, ShopifyCartItemPrice, ShopifyCartItemQuantityContainer, ShopifyCartItemTotal, ShopifyCartItemTotalPrice, ShopifyCartItemRemoveButton, ShopifyCartItemQuantity, ShopifyCartItemRetailerLabel, ShopifyCartItemRetailer } = __webpack_require__(86721);
const { triggerGTMEventForShopify } = __webpack_require__(60162);
const { setShopifyDataIntoStorage } = __webpack_require__(29946);
/**
 * ShopifyCartItem component
 *
 * @param {object} props - React props
 * @param {string} props.analyticsType - Modal type used for analytics
 * @param {object} props.brandIdentityAssets - the brand assets
 * @param {string} props.brandIdentityAssets.signInModalAsset - the image asset
 * @param {string} [props.className] - Optional top-level class to add
 * @param {Function} [props.closeButtonCallback] - callback function to run when close button is clicked
 * @param {string} [props.dangerousHed] - Optional Hed for the sign in modal
 * @param {string} [props.dangerousHedSpanTag] - Optional Hed span tag for the sign in modal
 * @param {string} [props.dangerousDek] - Optional Dek for the sign in modal
 * @param {boolean} [props.hasLargeMargins] - Optional boolean to enable alternative styles
 * @param {boolean} [props.hasRoundedCornersButtons] - Optional whether buttons should have rounded corners
 * @param {boolean} [props.isVisible] - Whether the modal is visible or not
 * @param {string} [props.redirectURL] - Optional URL to where the user should be redirected after sign in
 * @param {string} [props.type] - Optional what type of modal is this, mostly used to determine modal illustration and other similar customizations
 * @returns {ReactElement} <div>
 */
const ShopifyCartItem = ({ shopifyCartItems, setShopifyCartItems, shopifyConfig, appConfig }) => {
    const client = Client?.buildClient(shopifyConfig);
    const { formatMessage } = useIntl();
    const calculateSubtotal = (cartItems) => {
        let subtotal = 0;
        for (const item of cartItems) {
            subtotal += (item?.price ?? 0) * (item?.quantity ?? 0);
        }
        return subtotal;
    };
    const [cartSubtotal, setCartSubtotal] = useState(() => {
        return calculateSubtotal(shopifyCartItems);
    });
    const onUpdateCartItems = (cartItems) => {
        setCartSubtotal(calculateSubtotal(cartItems));
        setShopifyDataIntoStorage('shopifyCartItems', cartItems);
        setShopifyCartItems(cartItems);
    };
    const onRemoveItem = (id) => {
        const modifiedItems = shopifyCartItems.filter((item) => item.variantId !== id);
        const removedItem = shopifyCartItems.find((item) => item.variantId === id);
        triggerGTMEventForShopify('remove-from-cart', removedItem);
        onUpdateCartItems(modifiedItems);
    };
    const createLineItems = (shopifyCartItem) => {
        const { variantId, quantity } = shopifyCartItem;
        return { variantId, quantity };
    };
    const cartCheckout = () => {
        const lineItems = shopifyCartItems.map(createLineItems);
        client.checkout.create().then((checkout) => {
            const checkoutId = checkout.id;
            client.checkout.addLineItems(checkoutId, lineItems).then((values) => {
                setShopifyDataIntoStorage('shopifyCartItems', []);
                const url = new URL(values.webUrl);
                window.location = `https://checkout.${appConfig.brandSlug}.com/${url.pathname}`;
            });
        });
    };
    const decreaseCount = (variantId) => {
        const product = shopifyCartItems.find((item) => item.variantId === variantId);
        const findCartItemIndex = shopifyCartItems.findIndex((cartItem) => cartItem.variantId === variantId);
        if (product.quantity > 1) {
            shopifyCartItems[findCartItemIndex].quantity -= 1;
            triggerGTMEventForShopify('remove-from-cart', shopifyCartItems[findCartItemIndex]);
        }
        else {
            triggerGTMEventForShopify('remove-from-cart', {
                ...shopifyCartItems[findCartItemIndex],
                quantity: 0
            });
            delete shopifyCartItems[findCartItemIndex];
        }
        const cartItems = shopifyCartItems.filter(Boolean);
        onUpdateCartItems(cartItems);
    };
    const increaseCount = (variantId) => {
        const shopifyItems = shopifyCartItems.map((item) => {
            if (item.variantId === variantId) {
                const quantity = item.quantity + 1;
                const updatedItem = { ...item, quantity };
                triggerGTMEventForShopify('add-to-cart', updatedItem);
                return updatedItem;
            }
            return item;
        });
        onUpdateCartItems(shopifyItems);
    };
    /* group cart items by retailer */
    const groupedCartItems = shopifyCartItems.reduce((acc, item) => {
        const { retailer } = item;
        if (!acc[retailer]) {
            acc[retailer] = [];
        }
        acc[retailer].push(item);
        return acc;
    }, {});
    return (React.createElement(React.Fragment, null,
        React.createElement(ShopifyCartItemWrapper, null, Object.entries(groupedCartItems).map(([key]) => {
            return (React.createElement(React.Fragment, { key: `shopify-cart-item-${key}` },
                React.createElement(ShopifyCartItemRetailer, null,
                    React.createElement(ShopifyCartItemRetailerLabel, null, formatMessage(translations.retailerLabel)),
                    React.createElement(ShopifyCartItemRetailerName, null, key)),
                groupedCartItems[key].map((item) => {
                    return (React.createElement(React.Fragment, { key: item.variantId },
                        React.createElement(ShopifyCartItemObject, null,
                            React.createElement("img", { src: `${item.image.src}${constants.SHOPIFY_IMAGE_SIZE_MAP.small}`, width: "30%", alt: item.title }),
                            React.createElement(ShopifyCartItemBrandDetail, null,
                                React.createElement(ShopifyCartItemBrandNameWrapper, null,
                                    React.createElement(ShopifyCartItemBrandName, null, item.vendor),
                                    React.createElement(ShopifyCartItemRemoveButton, { onClickHandler: () => onRemoveItem(item.variantId), role: "button", ButtonIcon: CloseIcon, isIconButton: true, width: "0.5rem", height: "0.5rem", label: "ShopifyCartItemRemoveButton" })),
                                React.createElement(ShopifyCartItemProductTitle, null, item.title),
                                React.createElement(ShopifyCartItemQuantityContainer, null,
                                    React.createElement(ShopifyCartItemQuantityBox, null,
                                        React.createElement(ShopifyCartItemQuantity, { onClickHandler: () => decreaseCount(item.variantId), ariaLabel: "Decrease Quantity", role: "button", ButtonIcon: MinusIcon, isIconButton: true, label: "ShopifyCartItemQuantity" }),
                                        React.createElement(ShopifyCartItemQuantityCount, null, item.quantity),
                                        React.createElement(ShopifyCartItemQuantity, { onClickHandler: () => increaseCount(item.variantId), ariaLabel: "Increase Quantity", role: "button", ButtonIcon: AddIcon, isIconButton: true, label: "ShopifyCartItemQuantity" })),
                                    React.createElement(ShopifyCartItemPrice, null,
                                        "$",
                                        item.price))))));
                })));
        })),
        React.createElement(ShopifyCartItemCheckoutObject, null,
            React.createElement(ShopifyCartItemTotal, null,
                React.createElement(ShopifyCartItemTotalLabel, null, formatMessage(translations.subtotalLabel)),
                React.createElement(ShopifyCartItemTotalPrice, null,
                    "$",
                    cartSubtotal)),
            React.createElement(ShopifyCartItemTotalDek, null, formatMessage(translations.checkoutText)),
            React.createElement(ShopifyCartItemCheckout, { label: formatMessage(translations.checkoutLabel), onClickHandler: cartCheckout, inputKind: "link" }))));
};
ShopifyCartItem.propTypes = {
    appConfig: PropTypes.object,
    setShopifyCartItems: PropTypes.func,
    shopifyCartItems: PropTypes.array,
    shopifyConfig: PropTypes.object
};
ShopifyCartItem.displayName = 'ShopifyCartItem';
const mapStateToProps = ({ shopifyCartItems }) => ({
    shopifyCartItems
});
const mapDispatchToProps = (dispatch) => {
    const { setShopifyCartItems } = createActions(dispatch);
    return {
        setShopifyCartItems
    };
};
module.exports = connect(mapStateToProps, mapDispatchToProps)(ShopifyCartItem);
//# sourceMappingURL=ShopifyCartItem.js.map

/***/ }),

/***/ 48146:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const ReactModal = __webpack_require__(20312);
/**
 * ShopifyCartModal component
 *
 * @param {object} props - React props
 * @param {string|object} [props.appElement] - The app element as a string selector or HTMLElement to pass to ReactModal
 * @param {string} [props.align] - An optional alignment variation
 * @param {string} [props.className] - An optional additional className from styled component
 * @param {string} [props.additionalClassName] - className from parent component
 * @param {ReactElement|string} [props.children] - content for feature.
 *
 * @returns {ReactElement} <shopifyCart>
 */
const ShopifyCartModal = ({ children, align, appElement, className, overlayClassName, ...rest }) => {
    React.useEffect(() => {
        if (appElement) {
            ReactModal.setAppElement(appElement);
        }
    }, [appElement]);
    return (React.createElement(ReactModal, { ...rest, portalClassName: className, className: className, overlayClassName: overlayClassName }, children));
};
ShopifyCartModal.propTypes = {
    align: PropTypes.string,
    appElement: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
    children: PropTypes.node,
    className: PropTypes.string,
    overlayClassName: PropTypes.string
};
module.exports = ShopifyCartModal;
//# sourceMappingURL=ShopifyCartModal.js.map

/***/ }),

/***/ 75391:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const ShopifyCart = __webpack_require__(84903);
const { asConfiguredComponent } = __webpack_require__(12892);
module.exports = asConfiguredComponent(ShopifyCart, 'ShopifyCart');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 86721:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { calculateSpacing, minScreen, getColorStyles, getTypographyStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const Button = __webpack_require__(73730);
const { getColorToken } = __webpack_require__(26865);
const { SpanWrapper } = __webpack_require__(18117);
const ResponsiveAsset = __webpack_require__(73275);
const ShopifyCartModal = __webpack_require__(48146);
const ShopifyCartModalWrapper = styled(ShopifyCartModal).withConfig({
    displayName: 'ShopifyCartModalWrapper'
}) `
  .shopify__content {
    position: absolute;
    right: 0;
    bottom: 8rem;
    left: auto;
    margin-top: 56px;
    outline: none;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    background: ${getColorToken('colors.background.white')};
    padding: ${calculateSpacing(2.5)};
    width: 370px;
    overflow: auto;
    inset: 0 4px 4px auto;
  }

  .shopify__overlay {
    position: fixed;
    top: ${calculateSpacing(0)};
    right: ${calculateSpacing(0)};
    bottom: ${calculateSpacing(0)};
    left: ${calculateSpacing(0)};
    z-index: 1000;
    overflow: hidden;
  }
`;
const ShopifyCartCloseButton = styled(Button.Utility).withConfig({
    displayName: 'ShopifyCartCloseButton'
}) `
  position: absolute;
  top: ${calculateSpacing(1)};
  right: ${calculateSpacing(1)};
  padding: 0;
  fill: ${getColorToken('colors.discovery.body.light.context-tertiary')};

  .icon-close {
    padding: 8px;
  }

  &,
  &:focus,
  &:hover {
    border: 0;
    background-color: transparent;
  }
`;
const ShopifyCartItemRemoveButton = styled(Button.Utility).withConfig({
    displayName: 'ShopifyCartItemRemoveButton'
}) `
  right: ${calculateSpacing(1)};
  /* stylelint-disable-next-line declaration-no-important */
  z-index: 0 !important;
  margin-left: 10px;
  padding: 0;
  fill: ${getColorToken('colors.discovery.body.light.context-tertiary')};

  &,
  &:focus,
  &:hover {
    border: 0;
    background-color: transparent;
  }
`;
const ShopifyCartItemResponsiveAsset = styled(ResponsiveAsset).withConfig({
    displayName: 'ShopifyCartItemResponsiveAsset'
}) `
  position: relative;
  grid-column: 1;
  grid-row: 1;
  width: 100px;
  height: 100px;

  &${SpanWrapper}::after {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    width: 100%;
    height: 100%;
    content: '';
  }

  img {
    width: 100%;
    height: 100%;
  }
`;
const ShopifyCartItemContent = styled.div.withConfig({
    displayName: 'OverlaySummaryItemContent'
}) `
  &&& {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    z-index: 2;
    padding: 0 ${calculateSpacing(2)} ${calculateSpacing(3)};
    text-decoration: none;

    ${minScreen(BREAKPOINTS.md)} {
      margin: 0 auto;
      padding: 0 0 ${calculateSpacing(5)};
      width: 100%;
    }
  }
`;
const ShopifyCartItemObject = styled.div.withConfig({
    displayName: 'ShopifyCartItemObject'
}) `
  display: inline-flex;
  margin-top: ${calculateSpacing(1.9)};
  overflow-y: auto;
`;
const ShopifyCartItemRetailer = styled.div.withConfig({
    displayName: 'ShopifyCartItemRetailer'
}) `
  display: inline-flex;
  margin-top: ${calculateSpacing(5)};
  border-bottom: 1px solid #75757a;
  padding-bottom: ${calculateSpacing(0.65)};
  text-align: left;
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.inverted.bg-card')};
  ${getTypographyStyles('typography.definitions.globalEditorial.context-secondary')};
`;
const ShopifyCartItemBrandDetail = styled.div.withConfig({
    displayName: 'ShopifyCartItemBrandDetail'
}) `
  margin-left: ${calculateSpacing(1)};
`;
const ShopifyCartItemProductTitle = styled.div.withConfig({
    displayName: 'ShopifyCartItemProductTitle'
}) `
  padding-bottom: ${calculateSpacing(2)};
  text-align: left;
  line-height: 18px;
  letter-spacing: 0;
  font-family: plain_regularregular;
  font-size: 12px;
`;
const ShopifyCartItemBrandNameWrapper = styled.div.withConfig({
    displayName: 'ShopifyCartItemBrandNameWrapper'
}) `
  display: flex;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  font-family: plain_regularregular;
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body-deemphasized')};
  ${getTypographyStyles('typography.definitions.globalEditorial.context-primary')};

  svg {
    float: right;
    padding-bottom: ${calculateSpacing(2)};
    width: 1rem;
  }
`;
const ShopifyCartItemBrandName = styled.span.withConfig({
    displayName: 'ShopifyCartItemBrandName'
}) ``;
const ShopifyCartDangerousHed = styled.div.withConfig({
    displayName: 'ShopifyCartDangerousHed'
}) `
  ${getTypographyStyles('typography.definitions.discovery.hed-core-secondary')};
`;
const ShopifyCartEmptyHed = styled.div.withConfig({
    displayName: 'ShopifyCartEmptyHed'
}) `
  margin-top: ${calculateSpacing(5)};
  margin-bottom: ${calculateSpacing(3)};
  ${getTypographyStyles('typography.definitions.foundation.title-primary')};
`;
const ShopifyCartEmptyButtonWrapper = styled(Button.Utility).withConfig({
    displayName: 'ShopifyCartEmptyButtonWrapper'
}) `
  margin-left: ${calculateSpacing(0.5)};
  width: 330px;
`;
const ShopifyCartEmptyDiv = styled.div.withConfig({
    displayName: 'ShopifyCartEmptyDiv'
}) `
  position: fixed;
  right: 0;
  bottom: 0;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  background: ${getColorToken('colors.background.white')};
  padding: 1rem 1.25rem;
  width: 374px;
  height: 8rem;
`;
const ShopifyCartItemWrapper = styled.div.withConfig({
    displayName: 'ShopifyCartItemWrapper'
}) `
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.dark')};
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  margin-bottom: ${calculateSpacing(16)};
  text-align: center;
  text-decoration: none;

  ${({ layoutProportions }) => layoutProportions === 'overlay-limited-height' ? 'max-height: 100%;' : ''}
`;
const ShopifyCartItemQuantityBox = styled.div.withConfig({
    displayName: 'ShopifyCartItemQuantityBox'
}) `
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid;
  ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.interactive.base.light')};
  height: 30px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
`;
const ShopifyCartItemQuantityCount = styled.div.withConfig({
    displayName: 'ShopifyCartItemQuantityCount'
}) `
  margin-right: ${calculateSpacing(1)};
  margin-left: ${calculateSpacing(1)};
`;
const ShopifyCartItemCheckoutObject = styled.div.withConfig({
    displayName: 'ShopifyCartItemCheckoutObject'
}) `
  position: fixed;
  right: 0;
  bottom: 0;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  background: ${getColorToken('colors.background.white')};
  padding: 1rem 1.25rem;
  width: 374px;
  height: 8rem;
`;
const ShopifyCartItemCheckout = styled(Button.Utility).withConfig({
    displayName: 'ShopifyCartItemCheckout'
}) `
  width: 100%;
`;
const ShopifyCartItemTotalLabel = styled.div.withConfig({
    displayName: 'ShopifyCartItemTotalLabel'
}) `
  ${getTypographyStyles('typography.definitions.globalEditorial.context-title')};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.dark')};
`;
const ShopifyCartItemTotalDek = styled.div.withConfig({
    displayName: 'ShopifyCartItemTotalDek'
}) `
  padding-bottom: 5px;
  ${getTypographyStyles('typography.definitions.globalEditorial.context-secondary')};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.inverted.bg-card')};
`;
const ShopifyCartItemPrice = styled.div.withConfig({
    displayName: 'ShopifyCartItemPrice'
}) `
  padding-left: ${calculateSpacing(10)};
  ${({ theme }) => {
    getColorStyles(theme, 'color', 'colors.consumption.body.standard.body');
}};
  ${getTypographyStyles('typography.definitions.globalEditorial/numerical-small')};
`;
const ShopifyCartItemSalePrice = styled.div.withConfig({
    displayName: 'ShopifyCartItemSalePrice'
}) `
  padding-left: ${calculateSpacing(8)};
  text-decoration: line-through;
  ${({ theme }) => {
    getColorStyles(theme, 'color', 'colors.consumption.body.standard.accent');
}};
  ${getTypographyStyles('typography.definitions.globalEditorial/numerical-small')};
`;
const ShopifyCartItemQuantityContainer = styled.div.withConfig({
    displayName: 'ShopifyCartItemQuantityContainer'
}) `
  display: flex;
  align-items: center;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: plainmedium;
  font-size: 12px;
`;
const ShopifyCartItemTotal = styled.div.withConfig({
    displayName: 'ShopifyCartItemTotal'
}) `
  display: flex;
  justify-content: space-between;
`;
const ShopifyCartItemTotalPrice = styled.div.withConfig({
    displayName: 'ShopifyCartItemTotalPrice'
}) ``;
const ShopifyCartItemQuantity = styled(Button.Utility).withConfig({
    displayName: 'ShopifyCartItemQuantity'
}) `
  transform: scale(0.6);
  /* stylelint-disable-next-line declaration-no-important */
  z-index: 0 !important;
  padding: 0;
  fill: ${getColorToken('colors.discovery.body.light.context-tertiary')};

  &,
  &:focus,
  &:hover {
    border: 0;
    background-color: transparent;
  }
`;
const ShopifyCartItemRetailerLabel = styled.div.withConfig({
    displayName: 'ShopifyCartItemRetailerLabel'
}) `
  ${getTypographyStyles('typography.definitions.globalEditorial.context-title')};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.background.black')};
  margin-right: ${calculateSpacing(0.25)};
`;
const ShopifyCartItemRetailerName = styled.div.withConfig({
    displayName: 'ShopifyCartItemRetailerName'
}) `
  padding-left: ${calculateSpacing(1)};
  text-transform: capitalize;
`;
module.exports = {
    ShopifyCartCloseButton,
    ShopifyCartDangerousHed,
    ShopifyCartItemResponsiveAsset,
    ShopifyCartItemContent,
    ShopifyCartItemWrapper,
    ShopifyCartEmptyHed,
    ShopifyCartEmptyButtonWrapper,
    ShopifyCartItemObject,
    ShopifyCartItemRetailerName,
    ShopifyCartItemBrandDetail,
    ShopifyCartItemBrandName,
    ShopifyCartItemBrandNameWrapper,
    ShopifyCartItemProductTitle,
    ShopifyCartItemQuantityBox,
    ShopifyCartItemQuantityCount,
    ShopifyCartItemCheckout,
    ShopifyCartItemTotalDek,
    ShopifyCartItemTotalLabel,
    ShopifyCartItemCheckoutObject,
    ShopifyCartItemPrice,
    ShopifyCartItemSalePrice,
    ShopifyCartItemQuantityContainer,
    ShopifyCartItemTotalPrice,
    ShopifyCartItemTotal,
    ShopifyCartItemRemoveButton,
    ShopifyCartItemQuantity,
    ShopifyCartItemRetailerLabel,
    ShopifyCartItemRetailer,
    ShopifyCartModalWrapper,
    ShopifyCartEmptyDiv
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 41867:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    emptyCartHeader: {
        id: 'ShopifyCartEmpty.EmptyCartHeader',
        defaultMessage: 'YOUR SHOPPING CART IS EMPTY',
        description: 'ShopifyCartEmpty component header'
    },
    emptyCartButtonLabel: {
        id: 'ShopifyCartEmpty.EmptyCartButtonLabel',
        defaultMessage: 'GO SHOPPING',
        description: 'ShopifyCartEmpty component button label'
    },
    emptyCartButtonLink: {
        id: 'ShopifyCartEmpty.EmptyCartButtonLink',
        defaultMessage: '/shop/listing/all',
        description: 'ShopifyCartEmpty component button link'
    },
    retailerLabel: {
        id: 'ShopifyCartItem.RetailerLabel',
        defaultMessage: 'Retailer:',
        description: 'ShopifyCartItem Retailer label'
    },
    subtotalLabel: {
        id: 'ShopifyCartItem.SubtotalLabel',
        defaultMessage: 'Subtotal',
        description: 'ShopifyCartItem Subtotal label'
    },
    checkoutText: {
        id: 'ShopifyCartItem.CheckoutText',
        defaultMessage: 'Shipping and taxes calculated at checkout',
        description: 'ShopifyCartItem checkout text'
    },
    checkoutLabel: {
        id: 'ShopifyCartItem.CheckoutLabel',
        defaultMessage: 'CHECK OUT',
        description: 'ShopifyCartItem checkout label'
    },
    cartHeader: {
        id: 'ShopifyCart.CartHeader',
        defaultMessage: 'Shopping Cart',
        description: 'ShopifyCart Cart header'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 29946:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { storageFactory } = __webpack_require__(60663);
const localStore = storageFactory(() => window.localStorage);
/**
 *
 * @param {string} key - key to fetch from local storage
 * @returns {object} contains array of shopify objects
 */
const getShopifyDataFromStorage = (key) => {
    return JSON.parse(localStore.getItem(key));
};
/**
 *
 * @param {string} key - key to set in local storage
 * @param {Array} data - array of shopify objects
 */
const setShopifyDataIntoStorage = (key, data) => {
    return localStore.setItem(key, JSON.stringify(data));
};
module.exports = {
    getShopifyDataFromStorage,
    setShopifyDataIntoStorage
};
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 19636:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { connect: connectToStore } = __webpack_require__(67851);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(90739)/* ["default"] */ .A);
const constants = (__webpack_require__(15822)["default"]);
const CloseIcon = __webpack_require__(76399);
const ResponsiveAsset = __webpack_require__(73275);
const { googleAnalytics } = __webpack_require__(90090);
const { asConfiguredComponent } = __webpack_require__(12892);
const { doCloseModal } = __webpack_require__(22509);
const { TrackComponentChannel } = __webpack_require__(78788);
const { trackUserAccountEvent } = __webpack_require__(14307);
const { SignInModalBaseWrapper, SignInModalCloseButton, SignInModalButtons, SignInModalDek, SignInModalHed, SignInModalEmail, SignInModalSignInSection, SignInModalSpotIllustration, SignInModalSignInLink, SignInModalHedSpanTag } = __webpack_require__(20761);
const mapStateToProps = (state) => {
    const { signInModalConfig, brandIdentityAssets } = state;
    return {
        brandIdentityAssets,
        ...signInModalConfig
    };
};
/**
 * SignInModal component
 *
 * @param {object} props - React props
 * @param {string} props.analyticsType - Modal type used for analytics
 * @param {string} props.authSource - Modal query parameter
 * @param {object} props.brandIdentityAssets - the brand assets
 * @param {string} props.brandIdentityAssets.signInModalAsset - the image asset
 * @param {string} [props.className] - Optional top-level class to add
 * @param {Function} [props.closeButtonCallback] - callback function to run when close button is clicked
 * @param {string} [props.dangerousHed] - Optional Hed for the sign in modal
 * @param {string} [props.dangerousHedSpanTag] - Optional Hed span tag for the sign in modal
 * @param {string} [props.dangerousDek] - Optional Dek for the sign in modal
 * @param {boolean} [props.hasLargeMargins] - Optional boolean to enable alternative styles
 * @param {boolean} [props.hasRoundedCornersButtons] - Optional whether buttons should have rounded corners
 * @param {boolean} [props.isVisible] - Whether the modal is visible or not
 * @param {string} [props.redirectURL] - Optional URL to where the user should be redirected after sign in
 * @param {string} [props.signInText] - Optional translated text for sign in link
 * @param {string} [props.signInLinkText] - Optional translated sign in link
 * @param {boolean} [props.shouldHideIllustration] - Optional to hide the image in the sign in modal
 * @param {string} [props.source] - Optional param to pass to identity to identify the source of the sign up/in
 * @param {string} [props.type] - Optional what type of modal is this, mostly used to determine modal illustration and other similar customizations
 * @returns {ReactElement} <div>
 */
const SignInModal = ({ analyticsType, authSource = 'sign-in-modal', brandIdentityAssets, className, closeButtonCallback, dangerousDek, dangerousHed, dangerousHedSpanTag, hasLargeMargins = false, hasRoundedCornersButtons, isVisible, redirectURL = '/', shouldHideIllustration = false, signInText, signInLinkText, snowplowData, source, type = 'default' }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SignInModal'
        });
    }, []);
    const trackGoogleEvent = (name) => googleAnalytics.emitGoogleTrackingEvent(name, {
        signInModalType: analyticsType
    });
    const onClickClosedHandler = () => {
        doCloseModal();
        trackGoogleEvent('signin-modal-close');
        if (closeButtonCallback) {
            closeButtonCallback();
        }
    };
    isVisible && trackGoogleEvent('signin-modal-impression');
    let oidcAuthUrl = `${constants.oidcAuth}?redirectURL=${encodeURIComponent(redirectURL)}&skipAccountLink=true&authSource=${authSource}`;
    if (source) {
        oidcAuthUrl = `${oidcAuthUrl}&source=${source}`;
    }
    const spotIllustrationAssets = brandIdentityAssets.signInModalAsset[type] ||
        brandIdentityAssets.signInModalAsset.default;
    const { formatMessage } = useIntl();
    const onClickSigninHandler = (e) => {
        trackGoogleEvent('signin-modal-oidc-sign-in-click');
        const label = snowplowData?.label || e.target.innerText;
        trackUserAccountEvent({ ...snowplowData, label });
    };
    const translatedSignInText = signInText || formatMessage(translations.oidcSignInText);
    const translatedSignInLinkText = signInLinkText || formatMessage(translations.oidcSignInLinkText);
    return (React.createElement(SignInModalBaseWrapper, { className: className, hasLargeMargins: hasLargeMargins, closeTimeoutMS: 400, isOpen: isVisible },
        React.createElement(SignInModalCloseButton, { isIconButton: true, ariaLabel: formatMessage(translations.closeButtonAriaLabel), label: formatMessage(translations.closeButtonLabel), onClickHandler: onClickClosedHandler, role: "button", ButtonIcon: CloseIcon }),
        React.createElement(SignInModalHed, null,
            dangerousHed || formatMessage(translations.hed),
            React.createElement(SignInModalHedSpanTag, null, dangerousHedSpanTag || formatMessage(translations.hedSpanTag))),
        !shouldHideIllustration && (React.createElement(SignInModalSpotIllustration, null,
            React.createElement(ResponsiveAsset, { ...spotIllustrationAssets }))),
        React.createElement(SignInModalDek, { dangerouslySetInnerHTML: { __html: dangerousDek } }),
        React.createElement(SignInModalButtons, { hasRoundedCornersButtons: hasRoundedCornersButtons },
            React.createElement(SignInModalEmail, { label: formatMessage(translations.oidcSignUpButtonLabel), href: oidcAuthUrl, inputKind: "link", rel: "link", iconPosition: "before", onClickHandler: onClickSigninHandler, "data-testid": "SignInModalEmail" })),
        React.createElement(SignInModalSignInSection, null,
            `${translatedSignInText} `,
            React.createElement(SignInModalSignInLink, { href: oidcAuthUrl, onClick: onClickSigninHandler }, translatedSignInLinkText),
            type === 'voting' && React.createElement("div", null, " \u00A0\u00BB"))));
};
SignInModal.displayName = 'SignInModal';
SignInModal.propTypes = {
    analyticsType: PropTypes.string.isRequired,
    authSource: PropTypes.string,
    brandIdentityAssets: PropTypes.shape({
        signInModalAsset: PropTypes.shape({
            default: PropTypes.object,
            crosswords: PropTypes.object,
            voting: PropTypes.object
        })
    }).isRequired,
    className: PropTypes.string,
    closeButtonCallback: PropTypes.func,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    dangerousHedSpanTag: PropTypes.string,
    hasLargeMargins: PropTypes.bool,
    hasRoundedCornersButtons: PropTypes.bool,
    isVisible: PropTypes.bool,
    redirectURL: PropTypes.string,
    shouldHideIllustration: PropTypes.bool,
    signInLinkText: PropTypes.string,
    signInText: PropTypes.string,
    snowplowData: PropTypes.object,
    source: PropTypes.string,
    type: PropTypes.oneOf(['default', 'crosswords', 'voting'])
};
const ConfiguredSignInModal = asConfiguredComponent(SignInModal, 'SignInModal');
module.exports = connectToStore(mapStateToProps)(ConfiguredSignInModal);
//# sourceMappingURL=SignInModal.js.map

/***/ }),

/***/ 14935:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(19636);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 20761:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const ReactModal = __webpack_require__(20312);
const PropTypes = __webpack_require__(5556);
const { default: styled, css } = __webpack_require__(92168);
const { BaseText, BaseLink } = __webpack_require__(76955);
const { calculateSpacing } = __webpack_require__(26865);
const { BREAKPOINTS, ZINDEX_MAP } = __webpack_require__(96472);
const Button = __webpack_require__(73730);
const { getColorToken, getTypographyStyles } = __webpack_require__(26865);
const { ResponsiveImagePicture } = __webpack_require__(7228);
const { ButtonWrapper } = __webpack_require__(18974);
const SignInModalHed = styled(BaseText).withConfig({
    displayName: 'SignInModalHed'
}) `
  text-align: center;
`;
SignInModalHed.defaultProps = {
    as: 'div',
    colorToken: 'colors.discover.body.white.heading',
    topSpacing: 1,
    typeIdentity: 'typography.definitions.consumptionEditorial.display-small'
};
const SignInModalHedSpanTag = styled.span.withConfig({
    displayName: 'SignInModalHedSpanTag'
}) `
  display: block;
`;
const SignInModalDek = styled.p.withConfig({
    displayName: 'SignInModalDek'
}) `
  ${getTypographyStyles('typography.definitions.consumptionEditorial.body-core')}
  text-align: center;
  color: ${getColorToken('colors.discover.body.white.description')};
  @media (max-width: ${BREAKPOINTS.md}) {
    margin-bottom: ${calculateSpacing(3)};
  }
`;
const SignInModalSpotIllustration = styled(BaseText).withConfig({
    displayName: 'SignInModalSpotIllustration'
}) `
  margin: ${calculateSpacing(1.5)} auto;
  text-align: center;

  ${ResponsiveImagePicture} {
    width: 200px;
    height: 170px;
  }
`;
SignInModalSpotIllustration.defaultProps = {
    as: 'div',
    typeIdentity: 'typography.definitions.consumptionEditorial.body-core'
};
const SignInModalButtonPrimary = styled(Button.Primary).withConfig({
    displayName: 'SignInModalButtonPrimary'
}) `
  margin-bottom: ${calculateSpacing(1)};
  width: 100%;
`;
const SignInModalButtonPrimaryOutlined = styled(Button.Primary).withConfig({
    displayName: 'SignInModalButtonPrimaryOutlined'
}) `
  width: 100%;
`;
const SignInModalCloseButton = styled(Button.Utility).withConfig({
    displayName: 'SignInModalCloseButton'
}) `
  position: absolute;
  top: ${calculateSpacing(1)};
  right: ${calculateSpacing(1)};
  padding: 0;
  fill: ${getColorToken('colors.discovery.body.light.context-tertiary')};

  .icon-close {
    padding: 8px;
  }

  &,
  &:focus,
  &:hover {
    border: 0;
    background-color: transparent;
  }
`;
const SignInModalEmail = styled(Button.Utility).withConfig({
    displayName: 'SignInModalEmail'
}) `
  margin-top: 0;
  padding: 0;
`;
const SignInModalButtons = styled.div.withConfig({
    displayName: 'SignInModalButtons'
}) `
  display: flex;
  justify-content: center;
  margin: auto;
  padding-bottom: ${calculateSpacing(2)};
  width: 100%;

  ${SignInModalEmail} {
    padding: 0;
    width: 100%;
  }

  ${({ hasRoundedCornersButtons }) => hasRoundedCornersButtons &&
    `
    ${ButtonWrapper} {
      border-radius: 4px;
    }
  `}
`;
const SignInModalLargeMargins = css `
  &&& {
    padding: ${calculateSpacing(8)} ${calculateSpacing(5)};
    min-height: ${calculateSpacing(62)};
  }
  ${SignInModalSpotIllustration} {
    margin: ${calculateSpacing(1.5)} auto;

    ${ResponsiveImagePicture} {
      width: 175px;
      height: 175px;
    }
  }

  ${SignInModalDek} {
    margin-bottom: ${calculateSpacing(2)};
  }

  ${SignInModalButtons} {
    margin-bottom: ${calculateSpacing(4)};

    @media (max-width: ${BREAKPOINTS.md}) {
      padding-bottom: 0;
    }
  }
`;
function ReactModalAdapter({ className, ...props }) {
    const contentClassName = `${className}__content`;
    const overlayClassName = `${className}__overlay`;
    return (React.createElement(ReactModal, { portalClassName: className, className: contentClassName, overlayClassName: overlayClassName, ...props }));
}
ReactModalAdapter.propTypes = {
    className: PropTypes.string
};
const SignInModalBaseWrapper = styled(ReactModalAdapter).withConfig({
    displayName: 'SignInModalBaseWrapper'
}) `
  &__overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: ${ZINDEX_MAP.hyperstitialLayer};

    background-color: rgba(
      ${getColorToken('colors.background.black', { rgbOnly: true })},
      0
    );

    &.ReactModal__Overlay--after-open {
      transition: background-color 750ms;
      opacity: 1;
      background-color: rgba(
        ${getColorToken('colors.background.black', { rgbOnly: true })},
        0.4
      );
    }

    &.ReactModal__Overlay--after-close {
      transition: background-color 750ms;
      background-color: rgba(
        ${getColorToken('colors.background.black', { rgbOnly: true })},
        0
      );
    }
  }

  &__content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    background-color: ${getColorToken('colors.background.white')};
    padding: ${calculateSpacing(5)};
    width: ${calculateSpacing(60)};
    max-height: calc(100% - ${calculateSpacing(1, 'px')});
    overflow-y: auto;

    @media (max-width: ${BREAKPOINTS.md}) {
      transform: translateY(-50%)
        translateX(calc(-50% - ${calculateSpacing(2, 'px')}));

      margin: 0 ${calculateSpacing(2, 'px')};
      padding: ${calculateSpacing(4)} ${calculateSpacing(5)}
        ${calculateSpacing(4)} ${calculateSpacing(5)};
      width: auto;
      min-width: ${calculateSpacing(38)};
      max-width: ${calculateSpacing(60)};
    }

    ${SignInModalButtonPrimary}
    ${SignInModalButtonPrimaryOutlined}
    ${({ hasLargeMargins }) => hasLargeMargins === true && SignInModalLargeMargins}
  }
`;
const SignInModalSignInSection = styled(BaseText).withConfig({
    displayName: 'SignInModalSignInSection'
}) `
  display: flex;
  justify-content: center;
  width: 100%;
`;
SignInModalSignInSection.defaultProps = {
    as: 'div',
    colorToken: 'colors.discovery.body.light.context-tertiary',
    typeIdentity: 'typography.definitions.utility.assistive-text'
};
const SignInModalSignInLink = styled(BaseLink).withConfig({
    displayName: 'SignInModalSignInLink'
}) `
  && {
    z-index: ${ZINDEX_MAP.interstitialLayer};
    margin-left: 5px;
    text-decoration: underline;
  }
`;
SignInModalSignInLink.defaultProps = {
    colorToken: 'colors.interactive.base.black',
    typeToken: 'typography.definitions.utility.assistive-text'
};
module.exports = {
    SignInModalBaseWrapper,
    SignInModalCloseButton,
    SignInModalButtons,
    SignInModalDek,
    SignInModalEmail,
    SignInModalHed,
    SignInModalSignInSection,
    SignInModalSignInLink,
    SignInModalSpotIllustration,
    SignInModalHedSpanTag
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 90739:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    oidcSignUpButtonLabel: {
        id: 'SignInModal.OidcSignUpButtonLabel',
        defaultMessage: 'Create account',
        description: 'SignInModal component OIDC SignUp button label'
    },
    closeButtonLabel: {
        id: 'SignInModal.CloseButtonLabel',
        defaultMessage: 'Close Sign In Modal',
        description: 'SignInModal component close button label'
    },
    closeButtonAriaLabel: {
        id: 'SignInModal.CloseButtonAriaLabel',
        defaultMessage: 'Close Sign In Modal',
        description: 'SignInModal component close button aria label'
    },
    hed: {
        id: 'SignInModal.Hed',
        defaultMessage: 'Save stories ',
        description: 'SignInModal component hed text',
        isConfigurable: true
    },
    hedSpanTag: {
        id: 'SignInModal.HedSpanTag',
        defaultMessage: 'with an account',
        description: 'SignInModal component hed spanTag text',
        isConfigurable: true
    },
    oidcSignInText: {
        id: 'SignInModal.OidcSignInText',
        defaultMessage: 'Already have an account?',
        description: 'SignInModal component OIDC SignIn Text'
    },
    oidcSignInLinkText: {
        id: 'SignInModal.OidcSignInLinkText',
        defaultMessage: 'Sign in',
        description: 'SignInModal component OIDC SignIn Link Text'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 56115:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { injectIntl } = __webpack_require__(46984);
const throttle = __webpack_require__(7350);
const { TrackComponentChannel } = __webpack_require__(78788);
const ConsumerMarketingUnit = __webpack_require__(71284);
const { NavCTA } = __webpack_require__(12501);
const ResponsiveAsset = __webpack_require__(73275);
const Navigation = __webpack_require__(54790);
const { PaymentGateway } = __webpack_require__(92807);
const SearchIcon = __webpack_require__(73767);
const translations = (__webpack_require__(64035)/* ["default"] */ .A);
const { SimpleNavigationSearchButton, SimpleNavigationUtilityLinks, SimpleNavigationSectionUtilityLinks, SimpleNavigationLogoImage, SimpleNavigationLogoLink, SimpleNavigationSectionLogo, SimpleNavigationGrid, SimpleNavigationWrapper } = __webpack_require__(33929);
/**
 * SimpleNavigation component
 *
 * @param {string} [className] - Optional top-level class to add
 * @param {string} [decorationStyle] - Optional string indicating border style
 * @param {boolean} [hasLogoWide] - Determines if a logo should be wider (274px)
 * @param {boolean} hasSearch - Determines if search should be hidden
 * @param {object} logo - Logo image data including sources and alt text
 * @param {string} logoBaseUrl - The URL the logo links to
 * @param {Array} [utilityLinks] - Optional Secondary list of `{ isExternal, text, url, isPersistent }` object links
 * @param {object} [variations] - Optional variation properties used in rendering the component
 * @param {object} [variations.logoAlign] - Optional text determining left or center logo alignment
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 *
 * @returns {ReactElement} <header>
 */
class SimpleNavigation extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.handleScroll = throttle(this.handleScroll.bind(this), 50);
        this.state = {
            isScrolled: false
        };
    }
    componentDidMount() {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SimpleNavigation',
            variation: this.props.variationName
        });
        window.addEventListener('scroll', this.handleScroll);
    }
    componentWillUnmount() {
        window.removeEventListener('scroll', this.handleScroll);
    }
    /**
     * Updating state if the page has scrolled
     *
     * @returns {undefined} undefined
     */
    handleScroll() {
        const { scrollTop } = document.documentElement;
        const isScrolled = scrollTop > 0;
        if (isScrolled !== this.state.isScrolled) {
            this.setState({ isScrolled });
        }
    }
    /**
     * Render the SimpleNavigation
     *
     * @returns {React.Element} - a react fragment
     */
    render() {
        const { className, decorationStyle, hasSearch, hasLogoWide, logo, logoBaseUrl, utilityLinks, variations, intl } = this.props;
        const { logoAlign, mobileOption } = variations;
        return (React.createElement(SimpleNavigationWrapper, { className: className, decorationStyle: decorationStyle, logoAlign: logoAlign, mobileOption: mobileOption, hasLogoWide: hasLogoWide, isScrolled: this.state.isScrolled },
            React.createElement(SimpleNavigationGrid, null,
                React.createElement(SimpleNavigationSectionLogo, null,
                    React.createElement(SimpleNavigationLogoLink, { href: logoBaseUrl, "data-testid": "Logo" },
                        React.createElement(SimpleNavigationLogoImage, { ...logo }))),
                React.createElement(SimpleNavigationSectionUtilityLinks, null,
                    utilityLinks.length > 0 && (React.createElement(SimpleNavigationUtilityLinks, { attributes: { 'aria-label': 'Utility' }, links: utilityLinks, shouldAllowNavItemHide: true })),
                    React.createElement(PaymentGateway, { group: "consumer-marketing" },
                        React.createElement(ConsumerMarketingUnit, { position: "nav-cta" })),
                    React.createElement(NavCTA, null),
                    hasSearch && (React.createElement(SimpleNavigationSearchButton, { ButtonIcon: SearchIcon, isIconButton: true, href: "/search", inputKind: "link", label: intl.formatMessage(translations.searchLabel) }))))));
    }
}
SimpleNavigation.propTypes = {
    className: PropTypes.string,
    decorationStyle: PropTypes.oneOf(['default', 'border-thin']),
    hasLogoWide: PropTypes.bool,
    hasSearch: PropTypes.bool,
    intl: PropTypes.object,
    logo: PropTypes.shape(ResponsiveAsset.propTypes).isRequired,
    logoBaseUrl: PropTypes.string,
    utilityLinks: Navigation.propTypes.links,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        logoAlign: PropTypes.oneOf(['center', 'left']).isRequired,
        mobileOption: PropTypes.oneOf(['search', 'cm']).isRequired
    })
};
SimpleNavigation.defaultProps = {
    decorationStyle: 'default',
    hasLogoWide: false,
    hasSearch: false,
    logoBaseUrl: '/',
    utilityLinks: [],
    variations: {
        logoAlign: 'center',
        mobileOption: 'search'
    }
};
SimpleNavigation.displayName = 'SimpleNavigation';
module.exports = injectIntl(SimpleNavigation);
//# sourceMappingURL=SimpleNavigation.js.map

/***/ }),

/***/ 94919:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const VariedSimpleNavigation = __webpack_require__(19769);
module.exports = asConfiguredComponent(VariedSimpleNavigation, 'SimpleNavigation');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 33929:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { css } = __webpack_require__(92168);
const { BREAKPOINTS } = __webpack_require__(96472);
const { applyGridSpacing, cssVariablesGrid } = __webpack_require__(1123);
const { calculateSpacing, minScreen, maxScreen, getColorToken, getTypographyStyles, getLinkStyles } = __webpack_require__(26865);
const ResponsiveAsset = __webpack_require__(73275);
const Navigation = __webpack_require__(54790);
const Button = __webpack_require__(73730);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const SimpleNavigationSearchButton = styled(Button.Utility).withConfig({
    displayName: 'SimpleNavigationSearchButton'
}) `
  display: flex;
  position: relative;
  margin: 0 0 0 auto;
  border: 0;
  background-color: transparent;
  padding: 0;
  width: calculate-spacing(4);

  &:hover,
  &:focus {
    border: 0;
    background-color: transparent;

    svg path {
      fill: ${getColorToken('colors.foundation.icon-hover')};
    }
  }

  .button__icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: ${calculateSpacing(4)};
    height: 100%;

    .icon {
      width: 100%;
      height: auto;
    }
  }

  svg path {
    fill: ${getColorToken('colors.foundation.icon-default')};
  }

  ${minScreen(BREAKPOINTS.md)} {
    margin: 0 0 0 ${calculateSpacing(4)};
  }
`;
const SimpleNavigationUtilityLinks = styled(Navigation.Horizontal).withConfig({
    displayName: 'SimpleNavigationUtilityLinks'
}) ``;
const SimpleNavigationSectionUtilityLinks = styled.div.withConfig({
    displayName: 'SimpleNavigationSectionUtilityLinks'
}) `
  justify-content: flex-end;

  .navigation__link {
    display: none;
    margin: 0 ${calculateSpacing(4)} 0 0;
  }

  .consumer-marketing-unit--nav-cta {
    height: calc(${calculateSpacing(6)} - 1px);
  }
`;
const SimpleNavigationLogoImage = styled(ResponsiveAsset).withConfig({
    displayName: 'SimpleNavigationLogoImage'
}) `
  display: flex;
  justify-content: center;
  text-align: center;

  ${ResponsiveImageContainer} {
    object-fit: contain;
    max-height: ${calculateSpacing(6)};
  }
`;
const SimpleNavigationLogoLink = styled.a.withConfig({
    displayName: 'SimpleNavigationLogoLink'
}) `
  justify-content: center;
  width: 100%;
  height: 100%;
`;
const SimpleNavigationSectionLogo = styled.div.withConfig({
    displayName: 'SimpleNavigationSectionLogo'
}) `
  justify-content: center;
  margin: 0.75rem auto;
  width: 17rem;
  min-width: initial;
  justify-self: center;
  overflow: hidden;

  ${minScreen(BREAKPOINTS.md)} {
    max-width: initial;
  }
`;
const SimpleNavigationGrid = styled.div.withConfig({
    displayName: 'SimpleNavigationGrid'
}) `
  ${cssVariablesGrid()}
  ${applyGridSpacing('padding')}

  display: grid;
  justify-content: space-between;
  column-gap: var(--grid-gap);
  margin: 0 auto;
  width: 100%;
  max-width: ${BREAKPOINTS.xxl};
  height: 100%;
  row-gap: var(--grid-gap);

  ${maxScreen(BREAKPOINTS.md)} {
    grid-gap: 0;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 ${calculateSpacing(2)};
  }
`;
const simpleNavigationSectionstyle = css `
  display: flex;
  align-items: center;

  .navigation__link,
  .simple-navigation__subscribe-link {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-primary')}
    ${({ theme }) => getLinkStyles(theme, 'colors.foundation.collapsed-menu.nav-link.default', 'colors.foundation.collapsed-menu.nav-link.hover')}
    min-width: ${calculateSpacing(5)};
  }

  .navigation__list {
    margin: 0;
  }

  .navigation__list-item {
    display: flex;
    padding: 0;
  }
`;
const SimpleNavigationWrapper = styled.header.withConfig({
    displayName: 'SimpleNavigationWrapper'
}) `
  display: flex;
  position: fixed;
  top: 0;
  justify-content: center;
  transition: background-color 0.2s ease-in-out;
  z-index: get-z(siteHeader);
  background: ${getColorToken('colors.foundation.menu-bg.collapsed')};
  width: 100%;
  height: ${calculateSpacing(6)};

  ${({ decorationStyle }) => decorationStyle === 'border-thin' &&
    css `
      border-bottom: 1px solid
        ${getColorToken('colors.foundation.menu.dividers')};
    `}

  ${({ logoAlign }) => logoAlign === 'left' &&
    css `
      ${SimpleNavigationSectionLogo} {
        grid-column: 2 / 3;
      }

      ${SimpleNavigationSectionUtilityLinks} {
        grid-column: 3 / 4;
      }

      ${minScreen(BREAKPOINTS.md)} {
        ${SimpleNavigationLogoLink} {
          justify-content: flex-start;
        }

        ${SimpleNavigationSectionLogo} {
          grid-column: 1 / 5;
          align-items: center;
          justify-self: baseline;
        }

        ${SimpleNavigationSectionUtilityLinks} {
          grid-column: 5 / 13;
          align-items: center;
          justify-content: flex-end;

          .navigation__link {
            display: flex;
          }
        }
      }
    `}

  ${({ logoAlign }) => logoAlign === 'center' &&
    css `
      ${SimpleNavigationSectionLogo} {
        grid-column: 2 / 3;
      }

      ${SimpleNavigationSectionUtilityLinks} {
        grid-column: 3 / 4;
      }

      ${minScreen(BREAKPOINTS.md)} {
        ${SimpleNavigationSectionLogo} {
          grid-column: 5 / 9;
        }

        ${SimpleNavigationSectionUtilityLinks} {
          grid-column: 9 / 13;

          .navigation__link--persistent.navigation__link {
            display: flex;
          }
        }
      }

      ${minScreen(BREAKPOINTS.lg)} {
        ${SimpleNavigationSectionUtilityLinks} {
          .navigation__link {
            display: flex;
          }
        }
      }
    `}

  ${({ isScrolled }) => isScrolled &&
    css `
      background-color: ${getColorToken('colors.foundation.menu-bg.collapsed')};
    `}

  ${({ logoWide }) => logoWide &&
    css `
      display: block;

      ${SimpleNavigationGrid} {
        display: block;
        grid-gap: unset;
        grid-template-columns: unset;
      }

      ${SimpleNavigationSectionLogo} {
        margin: 0.75rem auto;
        min-width: initial;
        max-width: initial;
      }

      ${SimpleNavigationSectionLogo},
      ${SimpleNavigationLogoImage} {
        width: ${calculateSpacing(34)};
      }
    `}

  ${({ mobileOption }) => mobileOption === 'search' &&
    css `
      ${SimpleNavigationUtilityLinks},
      .simple-navigation__consumer-marketing-unit--nav-cta {
        display: none;

        ${minScreen(BREAKPOINTS.md)} {
          display: flex;
        }

        &.consumer-marketing-unit--no-failsafe {
          display: none;
        }
      }

      ${SimpleNavigationSearchButton}.button--link {
        display: flex;
      }
    `}

  ${({ mobileOption }) => mobileOption === 'cm' &&
    css `
      span,
      picture {
        width: inherit;
      }

      ${SimpleNavigationSectionUtilityLinks} {
        display: flex;
        align-items: center;
      }

      ${SimpleNavigationSearchButton}.button--link {
        display: none;

        ${minScreen(BREAKPOINTS.md)} {
          display: flex;
        }
      }
    `}

  ${SimpleNavigationSectionLogo},
  ${SimpleNavigationSectionUtilityLinks} {
    ${simpleNavigationSectionstyle}
  }
`;
module.exports = {
    SimpleNavigationSearchButton,
    SimpleNavigationUtilityLinks,
    SimpleNavigationSectionUtilityLinks,
    SimpleNavigationLogoImage,
    SimpleNavigationLogoLink,
    SimpleNavigationSectionLogo,
    SimpleNavigationGrid,
    SimpleNavigationWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 64035:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    searchLabel: {
        id: 'SimpleNavigation.SearchLabel',
        defaultMessage: 'Search',
        description: 'Label for search button'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 19769:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const SimpleNavigation = __webpack_require__(56115);
SimpleNavigation.LogoCenterWithSearch = asVariation(SimpleNavigation, 'LogoCenterWithSearch', {
    logoAlign: 'center',
    mobileOption: 'search'
});
SimpleNavigation.LogoCenterWithCM = asVariation(SimpleNavigation, 'LogoCenterWithCM', {
    logoAlign: 'center',
    mobileOption: 'cm'
});
SimpleNavigation.LogoLeftWithSearch = asVariation(SimpleNavigation, 'LogoLeftWithSearch', {
    logoAlign: 'left',
    mobileOption: 'search'
});
SimpleNavigation.LogoLeftWithCM = asVariation(SimpleNavigation, 'LogoLeftWithCM', {
    logoAlign: 'left',
    mobileOption: 'cm'
});
module.exports = SimpleNavigation;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 60169:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { connect: connectToStore } = __webpack_require__(67851);
const SiteFooter = __webpack_require__(70589);
const mergeProps = (stateProps, dispatchProps, ownProps) => {
    const { className } = ownProps;
    const localProps = {};
    if (className) {
        localProps.className = `${stateProps.className} ${className}`;
    }
    return {
        ...ownProps,
        ...stateProps,
        ...dispatchProps,
        ...localProps
    };
};
/**
 * SiteFooterWithStore component
 *
 * @param {object} attributes - Optional attributes to add top level i.e. aria-\*, role, etc.
 * @param {object} className - Optional top-level class to add to component
 *
 * @returns {ReactElement} <footer>
 */
const SiteFooterWithStore = connectToStore((state) => {
    const { brandName, comScoreCollectionName, footerLogo, legalese: { dangerousLegalese }, navigation: { aboutText, appDownloadUrls, contactLinks, contactLinksHeading, footerLinks: navigationLinks, footerLinksHeading: navigationLinksHeading, isEthycaEnabled, internationalInfo, noticesLinks, socialLinks }, footerStamp, logoBaseUrl } = state;
    return {
        aboutText,
        appDownloadUrls,
        brandName,
        className: 'site-footer--with-store',
        contactLinks,
        contactLinksHeading,
        comScoreCollectionName,
        internationalInfo,
        isEthycaEnabled,
        logo: footerLogo,
        logoBaseUrl,
        navigationLinks,
        dangerousLegalese,
        navigationLinksHeading,
        noticesLinks,
        socialIconsProps: {
            links: socialLinks
        },
        footerStamp
    };
}, null, mergeProps)(SiteFooter);
module.exports = SiteFooterWithStore;
//# sourceMappingURL=SiteFooterWithStore.js.map

/***/ }),

/***/ 98928:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(60169);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 609:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const ExternalLink = __webpack_require__(39832);
const year = new Date().getFullYear();
const { SiteFooterLegaleseText, SiteFooterLegaleseTextWrapper } = __webpack_require__(51916);
/**
 * Render a paragraph of legal information with links to policies.
 *
 * @param {string} brandName - The legal name of the current brand
 * @param {string} dangerousLegalese - The Legal footer
 *
 * @returns {ReactElement} <p>
 */
const Legalese = ({ brandName, dangerousLegalese }) => (React.createElement(React.Fragment, null,
    React.createElement(SiteFooterLegaleseTextWrapper, { "data-nosnippet": "true" }, dangerousLegalese ? (React.createElement(SiteFooterLegaleseText, { id: "dangerous-legalese-brand-text", dangerouslySetInnerHTML: { __html: dangerousLegalese } })) : (React.createElement(SiteFooterLegaleseText, { "data-testid": "dangerous-legalese-brand-text" },
        "\u00A9 ",
        year,
        " Cond\u00E9 Nast. All rights reserved. ",
        React.createElement("em", null, brandName),
        " may earn a portion of sales from products that are purchased through our site as part of our Affiliate Partnerships with retailers. The material on this site may not be reproduced, distributed, transmitted, cached or otherwise used, except with the prior written permission of Cond\u00E9 Nast.",
        ' ',
        React.createElement(ExternalLink, { href: "http://www.aboutads.info" }, "Ad Choices"))))));
Legalese.propTypes = {
    brandName: PropTypes.string.isRequired,
    dangerousLegalese: PropTypes.string
};
module.exports = Legalese;
//# sourceMappingURL=Legalese.js.map

/***/ }),

/***/ 96205:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(89049)/* ["default"] */ .A);
const Navigation = __webpack_require__(54790);
const ResponsiveAsset = __webpack_require__(73275);
const AppDownloadLinks = __webpack_require__(34568);
const SocialIcons = __webpack_require__(35676);
const { TrackComponentChannel } = __webpack_require__(78788);
const Legalese = __webpack_require__(609);
const { ButtonIcon, useFidesModalLinkLabel } = __webpack_require__(48990);
const { useClientStatus } = __webpack_require__(8877);
const { SiteFooterSocialIcons, SiteFooterWrapper, SiteFooterGridNoMargins, SiteFooterBrandInfo, SiteFooterLogo, SiteFooterLogoResponsiveAsset, SiteFooterAbout, SiteFooterAboutText, SiteFooterNavigationVertical, SiteFooterNavigationContactVertical, SiteFooterNavigationHorizontal, SiteFooterDisclaimer, SiteFooterNavigationDropdown, SiteFooterConsentButton, SiteFooterCollectionContainer, SiteFooterCollection, SiteFooterNoticesWrapper, SiteFooterNoticesContainerWrapper, SiteFooterConsentButtonContainer, SiteFooterLogoStamp } = __webpack_require__(51916);
/**
 * SiteFooter component
 * The bottom of a brand web site.
 *
 * @param {object} props - React props
 * @param {string} [props.aboutText] - The text for about section
 * @param {Array} [props.appDownloadUrls] - Array of the Mobile Apps Links
 * @param {string} props.brandName - The name of the brand
 * @param {string} [props.className] - An optional additional className
 * @param {string} [props.comScoreCollectionName] - Value pulled from tenant config; can be an empty string
 * @param {Navigation.propTypes.links} [props.contactLinks] - Navigation contact links
 * @param {string} props.contactLinksHeading - Heading text for contact links
 * @param {string} props.dangerousLegalese - Legal footer text
 * @param {string} [props.disclaimerText] - Optional text for adding disclaimer text
 * @param {boolean} props.hideTagline - Optional whether the tagline should be hidden
 * @param {object} props.internationalInfo - Optional object with array of `{ name, url }` objects and string of home location of that tenant. Pulled from MT nav config.
 * @param {boolean} [props.isEthycaEnabled] - Optional flag to indicate if Ethyca is enabled
 * @param {object} props.logo - Required logo image
 * @param {string} props.logoBaseUrl - Logo URL
 * @param {Array<object>} props.navigationLinks - A list of `{ url, text }` objects
 * @param {string} props.navigationLinksHeading - The heading text for navigation links
 * @param {Navigation.propTypes.links} [props.noticesLinks] - Navigation notices links
 * @param {boolean} [props.showOneTrustButton] - Optional
 * @param {object} props.socialIconsProps - An object containing a list of `{ network, url }` objects
 * @param {object} [props.variations] - Optional variation properties used in rendering the component
 * @param {string} [props.variations.isLinkDense] - Optional value determining if the layout is link dense
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 * @param {object} [props.footerStamp] - Optional. Stamp image for the footer
 *
 * @returns {ReactElement} <footer>
 */
const SiteFooter = ({ aboutText, appDownloadUrls = [], brandName, className, comScoreCollectionName, contactLinks, contactLinksHeading, dangerousLegalese, disclaimerText = '', hideTagline = false, internationalInfo, isEthycaEnabled, logo, logoBaseUrl = '/', navigationLinks, navigationLinksHeading, noticesLinks, showOneTrustButton, socialIconsProps, variations: { isLinkDense } = {}, variationName, footerStamp = null }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SiteFooter',
            variation: variationName
        });
    }, [variationName]);
    const intl = useIntl();
    const hasVerticalNavigation = contactLinks?.length || navigationLinks?.length;
    const SocialIconsFooter = (React.createElement(SiteFooterSocialIcons, { isLinkDense: isLinkDense, ...socialIconsProps }));
    const isClient = useClientStatus();
    const fidesModalLinkLabel = useFidesModalLinkLabel();
    return (React.createElement(SiteFooterWrapper, { className: className, isLinkDense: isLinkDense, "data-testid": "site-footer-wrapper" },
        React.createElement(SiteFooterGridNoMargins, { className: !hasVerticalNavigation ? 'site-footer--single-column' : '', siteFooterSingleColumn: !hasVerticalNavigation, isLinkDense: isLinkDense, shouldShowStamp: Boolean(footerStamp), "data-testid": "SiteFooterGridNoMargins" },
            React.createElement(SiteFooterBrandInfo, null,
                React.createElement(SiteFooterLogo, { className: "site-footer__logo" },
                    React.createElement("a", { href: logoBaseUrl },
                        React.createElement(SiteFooterLogoResponsiveAsset, { ...logo, className: "site-footer__responsive-image" }))),
                !hideTagline && (React.createElement(SiteFooterAbout, { "data-testid": "SiteFooterAbout" },
                    React.createElement(SiteFooterAboutText, null, aboutText))),
                !isLinkDense && SocialIconsFooter,
                disclaimerText && (React.createElement(SiteFooterDisclaimer, { dangerouslySetInnerHTML: { __html: disclaimerText } })),
                appDownloadUrls?.length > 0 && (React.createElement(AppDownloadLinks, { appDownloadUrls: appDownloadUrls }))),
            footerStamp && (React.createElement(SiteFooterLogoStamp, null,
                React.createElement(SiteFooterLogoResponsiveAsset, { ...footerStamp, className: "site-footer__stamp" }))),
            navigationLinks?.length > 0 && (React.createElement(SiteFooterNavigationVertical, { isCollapsible: true, attributes: { 'aria-label': navigationLinksHeading }, heading: navigationLinksHeading, links: navigationLinks })),
            contactLinks?.length > 0 && (React.createElement(SiteFooterNavigationContactVertical, { isCollapsible: true, attributes: { 'aria-label': contactLinksHeading }, heading: contactLinksHeading, links: contactLinks })),
            React.createElement(SiteFooterNoticesWrapper, null,
                React.createElement(SiteFooterNoticesContainerWrapper, { isLinkDense: isLinkDense },
                    noticesLinks && (React.createElement(SiteFooterNavigationHorizontal, { attributes: {
                            'aria-label': intl.formatMessage(translations.noticesContainer)
                        }, links: noticesLinks, showOneTrustButton: isLinkDense ? false : showOneTrustButton, isEthycaEnabled: isLinkDense ? false : isEthycaEnabled })),
                    React.createElement(Legalese, { brandName: brandName, dangerousLegalese: dangerousLegalese }),
                    React.createElement(SiteFooterCollectionContainer, null,
                        comScoreCollectionName && (React.createElement(SiteFooterCollection, null, comScoreCollectionName)),
                        internationalInfo?.internationalSites?.length > 0 && (React.createElement(SiteFooterNavigationDropdown, { id: "site-footer-dropdown", "data-testid": "site-footer-dropdown", assistiveLabel: intl.formatMessage(translations.dropdown), label: internationalInfo?.homeLocation?.name, showLabel: true, options: internationalInfo.internationalSites }))),
                    isLinkDense && SocialIconsFooter))),
        isLinkDense && (React.createElement(SiteFooterConsentButtonContainer, null,
            React.createElement(ButtonIcon, null),
            isClient && (React.createElement(SiteFooterConsentButton, { id: isEthycaEnabled ? 'fides-modal-link' : 'ot-sdk-btn', className: isEthycaEnabled
                    ? 'consent-sdk-show-settings'
                    : 'ot-sdk-show-settings ot-sdk-btn-show--cookies', label: fidesModalLinkLabel ??
                    intl.formatMessage(translations.oneTrustButtonLabel), isInline: true }))))));
};
SiteFooter.displayName = 'SiteFooter';
SiteFooter.propTypes = {
    aboutText: PropTypes.string,
    appDownloadUrls: PropTypes.array,
    brandName: PropTypes.string.isRequired,
    className: PropTypes.string,
    comScoreCollectionName: PropTypes.string,
    contactLinks: Navigation.propTypes.links,
    contactLinksHeading: PropTypes.string.isRequired,
    dangerousLegalese: PropTypes.string,
    disclaimerText: PropTypes.string,
    footerStamp: PropTypes.shape(ResponsiveAsset.propTypes),
    hideTagline: PropTypes.bool,
    internationalInfo: PropTypes.object,
    isEthycaEnabled: PropTypes.bool,
    logo: PropTypes.shape(ResponsiveAsset.propTypes).isRequired,
    logoBaseUrl: PropTypes.string,
    navigationLinks: Navigation.propTypes.links,
    navigationLinksHeading: PropTypes.string.isRequired,
    noticesLinks: Navigation.propTypes.links,
    shouldShowStamp: PropTypes.bool,
    showOneTrustButton: PropTypes.bool,
    socialIconsProps: PropTypes.shape(SocialIcons.propTypes).isRequired,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        isLinkDense: PropTypes.bool
    })
};
module.exports = SiteFooter;
//# sourceMappingURL=SiteFooter.js.map

/***/ }),

/***/ 70589:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const VariedSiteFooter = __webpack_require__(54779);
module.exports = asConfiguredComponent(VariedSiteFooter, 'SiteFooter');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 51916:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { hideVisually } = __webpack_require__(52813);
const ResponsiveAsset = __webpack_require__(73275);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const Button = __webpack_require__(73730);
const Navigation = __webpack_require__(54790);
const NavigationDropdown = __webpack_require__(36062);
const SocialIcons = __webpack_require__(35676);
const { BREAKPOINTS, INTERACTIVE } = __webpack_require__(96472);
const { cssVariablesGrid } = __webpack_require__(1123);
const { getColorToken, calculateSpacing, getTypographyStyles, getLinkStyles, minScreen, maxScreen } = __webpack_require__(26865);
const { universalGridCore } = __webpack_require__(89085);
const { applyGridSpacing } = __webpack_require__(1123);
const { NavigationHeadingWrapper, NavigationListWrapper, NavigationListItemWrapper, NavigationInternalLink, NavigationExternalLink, NavigationHeadingButton, NavigationHeadingArrow } = __webpack_require__(51418);
const SiteFooterLogoResponsiveAsset = styled(ResponsiveAsset).withConfig({
    displayName: 'SiteFooterLogoResponsiveAsset'
}) `
  display: flex;
  justify-content: center;
  margin: 0 auto;
  max-height: ${calculateSpacing(4)};

  ${minScreen(BREAKPOINTS.lg)} {
    justify-content: flex-start;
    margin: 0;
  }

  ${ResponsiveImageContainer} {
    width: auto;
    max-height: inherit;
  }
`;
const SiteFooterLogo = styled.div.withConfig({
    displayName: 'SiteFooterLogo'
}) `
  align-self: end;
`;
const SiteFooterAbout = styled.div.withConfig({
    displayName: 'SiteFooterAbout'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.meta-primary')}
  margin-top: ${calculateSpacing(2)};
  margin-bottom: ${calculateSpacing(5)};
  color: ${getColorToken('colors.foundation.footer.meta-primary')};

  ${minScreen(BREAKPOINTS.lg)} {
    padding-right: ${calculateSpacing(20)};
  }
`;
const SiteFooterLegaleseText = styled.p.withConfig({
    displayName: 'SiteFooterLegaleseText'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.meta-secondary')}
  order: 3;
  margin: 0;
  text-align: center;
  color: ${getColorToken('colors.foundation.footer.meta-secondary')};

  ${minScreen(BREAKPOINTS.lg)} {
    grid-area: footer-notices-legal;
    order: initial;
    text-align: left;
  }

  .external-link {
    ${({ theme }) => getLinkStyles(theme, 'colors.foundation.footer.meta-secondary', null)}
    color: ${getColorToken('colors.foundation.footer.meta-secondary')};
  }

  .external-link:link {
    text-decoration: underline;
  }
`;
const SiteFooterLegaleseTextWrapper = styled.div.withConfig({
    displayName: 'SiteFooterLegaleseTextWrapper'
}) `
  display: contents;
`;
const SiteFooterSocialIcons = styled(SocialIcons.Footer).withConfig({
    displayName: 'SiteFooterSocialIcons'
}) `
  ${({ isLinkDense }) => isLinkDense
    ? css `
          grid-area: footer-notices-social;
          grid-column: 1;

          ${minScreen(BREAKPOINTS.lg)} {
            grid-column: -1/-5;
            justify-self: end;
            grid-row: 2;
            margin-top: ${calculateSpacing(4)};
          }

          .social-icons__list-item {
            padding-right: ${calculateSpacing(0.5)};
          }

          ${minScreen(BREAKPOINTS.lg)} {
            .social-icons__list-item:last-child {
              padding-right: 0;
            }
          }

          .social-icons__list-item a {
            width: 32px;
            height: 32px;

            ${minScreen(BREAKPOINTS.lg)} {
              width: 32px;
              height: 32px;
            }
          }
        `
    : ''}
`;
// Overriding One-Trust injected styling
const oneTrustStyleOverride = css `
  /* stylelint-disable selector-max-id */
  #fides-modal-link.consent-sdk-show-settings,
  #ot-sdk-btn.ot-sdk-show-settings,
  #ot-sdk-btn.optanon-show-settings {
    ${({ theme }) => getLinkStyles(theme, 'colors.foundation.footer.meta-secondary', null)}
    border: none;
    background-color: transparent;
    padding: ${calculateSpacing(0.5)} ${calculateSpacing(1)}
      ${calculateSpacing(0.5)} 0;
    line-height: 1;
    color: ${getColorToken('colors.foundation.footer.meta-secondary')};

    .button__label {
      color: ${getColorToken('colors.foundation.footer.meta-secondary')};
    }

    &:hover {
      background-color: inherit;
      text-decoration: none;
      color: ${getColorToken('colors.foundation.footer.meta-secondary')};
    }
  }

  #ot-sdk-btn.ot-sdk-btn-show--cookies {
    display: inline-block;
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-utility')}
    padding: ${calculateSpacing(0.5)} ${calculateSpacing(2.5)} ${calculateSpacing(0.5)} 0;
    height: ${calculateSpacing(5.625)};
  }
  /* stylelint-enable selector-max-id */
`;
const SiteFooterConsentButtonContainer = styled.div.withConfig({
    displayName: 'SiteFooterConsentButtonContainer'
}) ``;
const SiteFooterConsentButton = styled(Button.Utility).withConfig({
    displayName: 'SiteFooterConsentButton'
}) ``;
const SiteFooterWrapper = styled.footer.withConfig({
    displayName: 'SiteFooterWrapper'
}) `
  display: grid;
  grid-column: 1 / -1;
  background-color: ${getColorToken('colors.foundation.footer.bg')};

  ${minScreen(BREAKPOINTS.lg)} {
    ${NavigationHeadingArrow} {
      ${hideVisually()}
    }
    ${NavigationHeadingButton} {
      pointer-events: none;
    }
  }

  ${SiteFooterConsentButtonContainer} {
    display: table;
    margin: ${calculateSpacing(4)} auto ${calculateSpacing(8)};
  }

  ${({ isLinkDense }) => isLinkDense
    ? `
    display: block;

    ${SiteFooterLogo}{
      ${SiteFooterLogoResponsiveAsset}{
        ${minScreen(BREAKPOINTS.lg)} {
          justify-content: center;
        }
      }
    }
  `
    : ``}

  ${oneTrustStyleOverride}
`;
const SiteFooterBrandInfo = styled.div.withConfig({
    displayName: 'SiteFooterBrandInfo'
}) `
  grid-area: f-brand;
`;
const siteFooterNavigationVerticalCss = css `
  ${NavigationHeadingWrapper} {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.title-secondary')}
    transition: color ${INTERACTIVE.timingLinkNavigation} ease;
    color: ${getColorToken('colors.foundation.footer.context')};

    ${minScreen(BREAKPOINTS.md)} {
      margin: 0 0 ${calculateSpacing(2)};
    }

    ${minScreen(BREAKPOINTS.lg)} {
      text-align: left;
    }
  }

  ${NavigationListWrapper} {
    flex-direction: column;
    margin: 0;

    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.list')}

    ${maxScreen(BREAKPOINTS.md)} {
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    ${minScreen(BREAKPOINTS.lg)} {
      justify-content: start;
      text-align: left;
    }
  }

  ${NavigationInternalLink}, ${NavigationExternalLink} {
    ${({ theme }) => getLinkStyles(theme, 'colors.foundation.footer.links.primary', null, 'navigation')};
    transition: color ${INTERACTIVE.timingLinkNavigation} ease;

    &:hover,
    &:focus,
    &:active {
      text-decoration: underline;
    }
  }

  ${NavigationListItemWrapper} {
    margin-bottom: ${calculateSpacing(3)};
    padding-right: 0;
    min-height: 0;

    ${minScreen(BREAKPOINTS.md)} {
      margin-bottom: ${calculateSpacing(0.5)};
    }

    &:last-of-type {
      margin-bottom: 0;
    }
  }
`;
const SiteFooterNavigationVertical = styled(Navigation.Vertical).withConfig({
    displayName: 'SiteFooterNavigationVertical'
}) `
  grid-area: f-nav;
  ${siteFooterNavigationVerticalCss}
`;
const SiteFooterNavigationContactVertical = styled(Navigation.Vertical).withConfig({
    displayName: 'SiteFooterNavigationContactVertical'
}) `
  grid-area: f-nav-contact;
  ${siteFooterNavigationVerticalCss}
`;
const SiteFooterNoticesWrapper = styled.div.withConfig({
    displayName: 'SiteFooterNoticesWrapper'
}) `
  display: grid;
  grid-area: f-meta;
  justify-items: center;
  width: 100%;

  ${NavigationListWrapper} {
    flex-direction: column;
    align-items: center;
    margin: 0;

    ${minScreen(BREAKPOINTS.md)} {
      flex-direction: row;
      align-items: baseline;
    }
  }

  ${NavigationListItemWrapper} {
    margin-bottom: ${calculateSpacing(0.5)};
    padding-right: 0;

    ${minScreen(BREAKPOINTS.md)} {
      display: inline-flex;
      position: relative;
      align-items: center;
      margin-right: ${calculateSpacing(1)};
      margin-bottom: 0;

      + ${NavigationListItemWrapper} {
        &::before {
          display: inline-block;
          margin: auto;
          color: ${getColorToken('colors.foundation.footer.links.secondary')};
          content: '|';
        }

        ${NavigationInternalLink}, ${NavigationExternalLink} {
          margin-left: ${calculateSpacing(1)};
        }
      }
    }
  }
`;
const SiteFooterNoticesContainerWrapper = styled.div.withConfig({
    displayName: 'SiteFooterNoticesContainerWrapper'
}) `
  display: grid;
  border-top: 2px solid ${getColorToken('colors.foundation.footer.accent')};
  padding: ${calculateSpacing(5)} 0 ${calculateSpacing(6)};
  width: 100%;
  gap: var(--grid-gap);

  ${({ isLinkDense }) => isLinkDense
    ? css `
          border-bottom: 1px solid
            ${getColorToken('colors.foundation.footer.accent')};
        `
    : ``}

  ${minScreen(BREAKPOINTS.lg)} {
    grid-template-areas:
      'footer-notices-navigation footer-notices-collection'
      'footer-notices-legal footer-notices-legal';
    grid-template-columns: 1fr auto;
    align-items: baseline;
    margin: 0;
    justify-items: start;
  }

  ${minScreen(BREAKPOINTS.xl)} {
    margin: 0;
  }
`;
const SiteFooterNavigationHorizontal = styled(Navigation.Horizontal).withConfig({
    displayName: 'SiteFooterNavigationHorizontal'
}) `
  ${minScreen(BREAKPOINTS.lg)} {
    grid-area: footer-notices-navigation;
  }
  ${NavigationListWrapper} {
    ${NavigationInternalLink}, ${NavigationExternalLink} {
      transition: color ${INTERACTIVE.timingLinkNavigation} ease;

      &:hover,
      &:focus,
      &:active {
        text-decoration: underline;
      }
    }
  }

  ${NavigationListWrapper} {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.list')}

    ${minScreen(BREAKPOINTS.md)} {
      justify-content: center;
    }

    ${minScreen(BREAKPOINTS.lg)} {
      justify-content: start;
    }
  }

  ${NavigationListItemWrapper} {
    min-height: 0;

    ${minScreen(BREAKPOINTS.md)} {
      margin-bottom: ${calculateSpacing(0.5)};
    }

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  ${NavigationInternalLink}, ${NavigationExternalLink} {
    ${({ theme }) => getLinkStyles(theme, 'colors.foundation.footer.links.secondary', null, 'navigation')};
    color: ${getColorToken('colors.foundation.footer.links.secondary')};
  }
`;
const SiteFooterCollectionContainer = styled.div.withConfig({
    displayName: 'SiteFooterCollectionContainer'
}) `
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;

  ${minScreen(BREAKPOINTS.lg)} {
    grid-area: footer-notices-collection;
    flex-direction: row;
  }
`;
const SiteFooterGridNoMargins = styled.div.withConfig({
    displayName: 'SiteFooterGridNoMargins'
}) `
  ${cssVariablesGrid()}

  ${universalGridCore()}
  && {
    grid-template-areas:
      'f-brand f-brand f-brand f-brand'
      'f-nav f-nav f-nav f-nav'
      'f-nav-contact f-nav-contact f-nav-contact f-nav-contact'
      'f-meta f-meta f-meta f-meta';
    padding-top: ${calculateSpacing(6)};
    text-align: center;
    justify-items: center;

    ${minScreen(BREAKPOINTS.md)} {
      grid-template-areas:
        'f-brand f-brand f-brand f-brand f-brand f-brand f-brand f-brand f-brand f-brand f-brand f-brand'
        'f-nav f-nav f-nav f-nav f-nav f-nav f-nav-contact f-nav-contact f-nav-contact f-nav-contact f-nav-contact f-nav-contact'
        'f-meta f-meta f-meta f-meta f-meta f-meta f-meta f-meta f-meta f-meta f-meta f-meta';
    }

    ${minScreen(BREAKPOINTS.lg)} {
      grid-template-areas:
        'f-brand f-brand f-brand f-brand f-brand f-nav f-nav f-nav f-nav f-nav-contact f-nav-contact f-nav-contact'
        'f-brand f-brand f-brand f-brand f-brand f-nav f-nav f-nav f-nav f-nav-contact f-nav-contact f-nav-contact'
        'f-brand f-brand f-brand f-brand f-brand f-nav f-nav f-nav f-nav f-nav-contact f-nav-contact f-nav-contact'
        'f-meta f-meta f-meta f-meta f-meta f-meta f-meta f-meta f-meta f-meta f-meta f-meta';
      text-align: left;
      justify-items: start;
    }

    ${minScreen(BREAKPOINTS.xl)} {
      grid-template-areas:
        'f-brand f-brand f-brand f-brand f-brand f-brand f-nav f-nav f-nav f-nav-contact f-nav-contact f-nav-contact'
        'f-brand f-brand f-brand f-brand f-brand f-brand f-nav f-nav f-nav f-nav-contact f-nav-contact f-nav-contact'
        'f-brand f-brand f-brand f-brand f-brand f-brand f-nav f-nav f-nav f-nav-contact f-nav-contact f-nav-contact'
        'f-meta f-meta f-meta f-meta f-meta f-meta f-meta f-meta f-meta f-meta f-meta f-meta';
    }

    ${minScreen(BREAKPOINTS.max)} {
      position: relative;
    }

    ${({ siteFooterSingleColumn }) => siteFooterSingleColumn
    ? css `
            grid-template-areas:
              'f-brand'
              'f-brand'
              'f-brand'
              'f-meta';
            grid-template-columns: repeat(1, 1fr);
          `
    : ``}
    ${({ isLinkDense }) => isLinkDense
    ? css `
            grid-row-gap: 0;
            padding-top: ${calculateSpacing(4)};

            ${SiteFooterBrandInfo} {
              grid-column: 1/-1;
              grid-row: 1;
              border-bottom: 1px solid
                ${getColorToken('colors.foundation.footer.accent')};
              width: 100%;
              text-align: center;

              ${minScreen(BREAKPOINTS.lg)} {
                display: grid;
                grid-column-gap: var(--grid-gap);
                grid-template-columns: repeat(12, 1fr);
                ${SiteFooterLogo} {
                  grid-column: 6 / -6;
                }
                ${SiteFooterAbout} {
                  grid-column: 4 / -4;
                }
              }
            }

            ${SiteFooterLogo},${SiteFooterAbout} {
              margin-bottom: ${calculateSpacing(4)};
            }

            ${SiteFooterAbout} {
              margin-top: 0;
              padding-right: 0;
            }

            ${SiteFooterNavigationVertical}, ${SiteFooterNavigationContactVertical} {
              width: 100%;
              padding-top: ${calculateSpacing(4)};
              grid-area: unset;
              grid-column: 1 / -1;

              ${minScreen(BREAKPOINTS.lg)} {
                padding: ${calculateSpacing(4)} 0;
              }

              ${NavigationHeadingWrapper} {
                margin-bottom: ${calculateSpacing(4)};
                text-align: left;

                ${minScreen(BREAKPOINTS.lg)} {
                  margin-bottom: ${calculateSpacing(1)};
                }

                ${NavigationHeadingArrow} {
                  display: none;
                }
              }
            }

            ${SiteFooterNavigationVertical} {
              border-bottom: 1px solid
                ${getColorToken('colors.foundation.footer.accent')};
              ${minScreen(BREAKPOINTS.lg)} {
                grid-column: 1 / span 6;
                grid-row: 2;
                border-bottom: none;
              }
            }

            ${SiteFooterNavigationContactVertical} {
              ${minScreen(BREAKPOINTS.lg)} {
                grid-column: 7/-1;
                grid-row: 2;
              }
            }

            ${NavigationListWrapper} {
              display: block;
              column-gap: var(--grid-gap);
              column-count: 2;
              height: auto;
              text-align: left;

              ul {
                display: block;
              }

              li {
                display: inline-block;
                margin-bottom: ${calculateSpacing(4)};
                width: 100%;

                ${minScreen(BREAKPOINTS.lg)} {
                  grid-column: span 3;
                  margin: 0;
                }

                a {
                  white-space: normal;
                }
              }
            }

            ${SiteFooterNoticesWrapper} {
              grid-area: unset;
              grid-column: 1/-1;
            }

            ${SiteFooterNoticesContainerWrapper} {
              grid-template-columns: repeat(1, 1fr);
              grid-row-gap: 0;
              margin: 0;
              border-top-width: 1px;
              padding: ${calculateSpacing(4)} 0 ${calculateSpacing(4)};

              ${minScreen(BREAKPOINTS.lg)} {
                grid-column-gap: 1.25rem;
                grid-template-columns: repeat(12, 1fr);
                max-width: none;
              }

              ${NavigationListWrapper} {
                grid-template-columns: repeat(2, 1fr);

                ${minScreen(BREAKPOINTS.lg)} {
                  column-count: 4;
                }

                li::before {
                  margin: 0;
                  content: '';
                }

                * a {
                  margin: 0;
                }
              }
            }

            ${SiteFooterNavigationHorizontal} {
              width: 100%;
              ${minScreen(BREAKPOINTS.lg)} {
                grid-column: 1/-1;
                border-bottom: 1px solid
                  ${getColorToken('colors.foundation.footer.accent')};
                padding-bottom: ${calculateSpacing(4)};
              }
            }

            ${SiteFooterCollectionContainer} {
              display: none;
            }

            ${SiteFooterLegaleseText} {
              align-self: start;
              margin-top: ${calculateSpacing(4)};
              text-align: left;
              ${minScreen(BREAKPOINTS.lg)} {
                grid-column: 1/9;
                grid-row: 2;
              }
            }
          `
    : ``}

${({ shouldShowStamp }) => shouldShowStamp &&
    `
  ${SiteFooterNavigationVertical} {
    ${minScreen(BREAKPOINTS.lg)} {
      display: flex;
      flex-direction: column;
      justify-content: center;
      grid-column: 4 / span 4;
    }
  }

  ${SiteFooterBrandInfo} {
    ${minScreen(BREAKPOINTS.sm)} {
      height: 0;
      visibility: hidden;
    }
  }

  ${SiteFooterNavigationContactVertical} {
    ${minScreen(BREAKPOINTS.lg)} {
      display: flex;
      flex-direction: column;
      justify-content: center;
      grid-column: 8/-1;
    }
  }
    &&& {
      ${NavigationListWrapper} {
        ${minScreen(BREAKPOINTS.lg)} {
          column-count: 2;
        }
      }

      ${SiteFooterNoticesContainerWrapper} {
        ${NavigationListWrapper} {
          ${minScreen(BREAKPOINTS.lg)} {
            column-count: 5;
          }
      }
      }
    }
  `}

  @media print {
      display: none;
    }
  }
`;
const SiteFooterAboutText = styled.div.withConfig({
    displayName: 'SiteFooterAboutText'
}) `
  margin: 0 ${calculateSpacing(4)};

  ${minScreen(BREAKPOINTS.lg)} {
    margin: 0;
  }
`;
const SiteFooterDisclaimer = styled.p.withConfig({
    displayName: 'SiteFooterDisclaimer'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.meta-secondary')}
  margin: revert;
  padding: ${calculateSpacing(2)} ${calculateSpacing(6)} 0
    ${calculateSpacing(6)};
  text-align: center;
  color: ${getColorToken('colors.foundation.footer.links.secondary')};

  ${minScreen(BREAKPOINTS.md)} {
    padding: ${calculateSpacing(2)} ${calculateSpacing(20)} 0
      ${calculateSpacing(20)};
  }

  ${minScreen(BREAKPOINTS.lg)} {
    padding: ${calculateSpacing(2)} 0 0 0;
    text-align: left;
  }
`;
const SiteFooterNavigationDropdown = styled(NavigationDropdown.Footer).withConfig({
    displayName: 'SiteFooterNavigationDropdown'
}) `
  margin: ${calculateSpacing(2)} 0 0;

  &:first-child {
    margin-top: 0;
  }

  ${minScreen(BREAKPOINTS.lg)} {
    margin: 0 0 0 ${calculateSpacing(2)};

    &:first-child {
      margin-left: 0;
    }
  }
`;
const SiteFooterCollection = styled.p.withConfig({
    displayName: 'SiteFooterCollection'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.utility.assistive-text')}
  margin: ${calculateSpacing(2)} 0 0;
  text-align: center;
  color: ${getColorToken('colors.foundation.footer.links.secondary')};

  ${minScreen(BREAKPOINTS.md)} {
    margin-top: 0;
  }

  ${minScreen(BREAKPOINTS.lg)} {
    max-width: 20vw;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
`;
const SiteFooterStoryBookGrid = styled('div').withConfig({
    displayName: 'SiteFooterStoryBookGrid'
}) `
  ${universalGridCore()}
  ${applyGridSpacing('padding')}
`;
const SiteFooterLogoStamp = styled.div.withConfig({
    displayName: 'SiteFooterLogoStamp'
}) `
  display: flex;
  grid-column: 1/-1;
  grid-row: 2;
  justify-content: left;
  border-bottom: 1px solid ${getColorToken('colors.foundation.footer.accent')};
  padding: 0 0 ${calculateSpacing(4)} 0;
  width: 100%;

  ${SiteFooterLogoResponsiveAsset} {
    width: ${calculateSpacing(30)};
    max-height: unset;
  }

  ${minScreen(BREAKPOINTS.lg)} {
    grid-column: 1 / 4;
    border-bottom: none;
  }
`;
module.exports = {
    SiteFooterSocialIcons,
    SiteFooterLegaleseText,
    SiteFooterLegaleseTextWrapper,
    SiteFooterWrapper,
    SiteFooterGridNoMargins,
    SiteFooterBrandInfo,
    SiteFooterLogo,
    SiteFooterLogoResponsiveAsset,
    SiteFooterAbout,
    SiteFooterAboutText,
    SiteFooterNavigationVertical,
    SiteFooterNavigationContactVertical,
    SiteFooterNavigationHorizontal,
    SiteFooterDisclaimer,
    SiteFooterNavigationDropdown,
    SiteFooterConsentButton,
    SiteFooterCollectionContainer,
    SiteFooterCollection,
    SiteFooterNoticesWrapper,
    SiteFooterNoticesContainerWrapper,
    SiteFooterStoryBookGrid,
    SiteFooterConsentButtonContainer,
    SiteFooterLogoStamp
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 89049:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    noticesContainer: {
        id: 'SiteFooter.NoticesContainer',
        defaultMessage: 'Notices',
        description: 'ARIA label for Notices Container'
    },
    dropdown: {
        id: 'SiteFooter.Dropdown',
        defaultMessage: 'Select international site',
        description: 'ARIA description for site dropdown'
    },
    oneTrustButtonLabel: {
        id: 'SiteFooter.OneTrustButtonLabel',
        defaultMessage: 'Your Privacy Choices',
        description: 'ARIA description for site footer OneTrust button label'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 54779:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const SiteFooter = __webpack_require__(96205);
SiteFooter.LinkDense = asVariation(SiteFooter, 'LinkDense', {
    isLinkDense: true
});
module.exports = SiteFooter;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 95772:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { default: useFocusTrap } = __webpack_require__(64744);
const bodyScrollLock = __webpack_require__(24208);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(88864)/* ["default"] */ .A);
const PaletteProvider = __webpack_require__(49235);
const Navigation = __webpack_require__(54790);
const ResponsiveAsset = __webpack_require__(73275);
const SocialIcons = __webpack_require__(35676);
const CloseIcon = __webpack_require__(76399);
const ExternalLink = __webpack_require__(39832);
const AppDownloadLinks = __webpack_require__(34568);
const { NavDrawer } = __webpack_require__(12501);
const { useEffect, useState, useRef, useCallback } = React;
const { OverlayNavigationWrapper, OverlayNavigationTop, OverlayNavigationBottom, OverlayNavigationButton, OverlayNavigationLogo, OverlayNavigationUtility, OverlayNavigationUtilityLinks, OverlayNavigationUtilityListItem, OverlayNavigationUtilityLink, OverlayNavigationPrimaryLinks, OverlayNavigationPrimaryListItem, OverlayNavigationPrimaryLink, OverlayNavigationSecondaryLinks, OverlayNavigationSecondaryListItem, OverlayNavigationSecondaryLink, OverlayNavigationSocialLinks, OverlayNavigationSocialHeading } = __webpack_require__(18550);
/**
 * OverlayNavigation
 * Full viewport navigation
 *
 * @param {object} props - React props
 * @param {object} props.accountProps - Required properties for the account drop down
 * @param {Array} [props.appDownloadUrls] - Array of the Mobile Apps Links
 * @param {object} [props.additionalCSS] - Optional additional CSS to apply
 * @param {string} props.brandName - The brand name of the site
 * @param {string} props.closeButtonLabel - The accessibility label of the close button
 * @param {string} props.hasSearch - Define in the link to the search page is visible
 * @param {boolean} props.hasTopRule - Define if top rule is rendered on the nav
 * @param {object} props.invertedLogo - The inverted brand logo of the site
 * @param {boolean} [props.isAccountsEnabled] - If `true` enable account support
 * @param {boolean} [props.isCenteredOnDesktop] - If `true` logo is center aligned on medium breakpoints
 * @param {boolean} props.isVisible - Is the overlay visible
 * @param {object} props.logo - The brand logo of the site
 * @param {object} props.logoBaseUrl - The base URL of the site
 * @param {Array} props.primaryLinks - List of nav items
 * @param {Function} props.onClose - Callback to trigger when closing
 * @param {string} props.searchLink - The URL link of the search page
 * @param {Array} props.secondaryLinks - List of secondary links
 * @param {string} [props.signInLabel] - Optional label for the sign in link - defaults to "Sign In"
 * @param {Array} props.socialLinks - List of social networks
 * @param {string} props.socialLinksHeading - Heading for social network section
 * @param {string} [props.theme] - The theme set by the base page "standard" | "inverted"
 * @param {object} props.user - required user object
 * @param {Array} props.utilityLinks - List of utility items
 * @param {boolean} props.shouldOverridePrimaryLinkBISize - Optional flag to override/not-override BI font size for primary links
 * @param {boolean} props.shouldShowOverlayTop - Optional flag to show or hide overlay header
 *
 * @returns {ReactElement} <div>
 *
 */
const OverlayNavigation = ({ accountProps, additionalCSS, appDownloadUrls = [], brandName, hasSearch, hasTopRule, invertedLogo, isCenteredOnDesktop, isAccountsEnabled, isVisible, logo, logoBaseUrl = '/', onClose, primaryLinks, signInLabel, searchLink, shouldShowOverlayTop = true, shouldOverridePrimaryLinkBISize = true, secondaryLinks, socialLinks, socialLinksHeading, theme = 'standard', user, utilityLinks }) => {
    const { formatMessage } = useIntl();
    const overlayRef = useRef();
    const [totalUtilityLinks, setTotalUtilityLinks] = useState(null);
    const setFocusTrap = useFocusTrap(isVisible);
    const handleKeyDown = useCallback((e) => {
        if (e.key === 'Escape') {
            onClose();
        }
    }, [onClose]);
    useEffect(() => {
        const allUtilityLinks = [];
        if (hasSearch) {
            const searchLabel = formatMessage(translations.searchLabel);
            allUtilityLinks.push({ text: searchLabel, url: searchLink });
        }
        const { accountLinks, signInLink } = accountProps || {};
        const hasAccounts = isAccountsEnabled && user && accountLinks?.length > 0 && signInLink;
        if (hasAccounts) {
            const { isAuthenticated } = user;
            if (isAuthenticated) {
                allUtilityLinks.push(...accountLinks);
            }
            else {
                allUtilityLinks.push({
                    text: signInLabel || formatMessage(translations.signInLabel),
                    url: signInLink
                });
            }
        }
        allUtilityLinks.push(...utilityLinks);
        setTotalUtilityLinks(allUtilityLinks);
    }, [
        accountProps,
        formatMessage,
        hasSearch,
        isAccountsEnabled,
        searchLink,
        signInLabel,
        user,
        utilityLinks
    ]);
    useEffect(() => {
        if (overlayRef) {
            setFocusTrap(overlayRef.current);
        }
    }, [overlayRef, setFocusTrap]);
    useEffect(() => {
        const overlayEl = overlayRef?.current;
        if (isVisible && overlayRef) {
            bodyScrollLock.disableBodyScroll(overlayEl);
            window.addEventListener('keydown', handleKeyDown);
        }
        else {
            bodyScrollLock.enableBodyScroll(overlayEl);
            window.removeEventListener('keydown', handleKeyDown);
        }
        return () => {
            bodyScrollLock.enableBodyScroll(overlayEl);
            window.removeEventListener('keydown', handleKeyDown);
        };
    }, [isVisible, overlayRef, handleKeyDown]);
    const handleClickNavigation = (text) => {
        if ( true && window.dataLayer) {
            window.dataLayer.push({
                event: 'navigation-click',
                navigationType: 'menu',
                clickText: text
            });
        }
    };
    const hasPrimaryLinks = primaryLinks?.length > 0;
    const hasSecondaryLinks = secondaryLinks?.length > 0;
    const hasUtilityLinks = totalUtilityLinks?.length > 0;
    const hasSocialLinks = socialLinks?.length > 0;
    const isInverted = theme === 'inverted';
    const resolvedLogo = isInverted ? invertedLogo : logo;
    const closeButtonLabel = formatMessage(translations.closeButtonLabel);
    return (React.createElement(PaletteProvider, { palette: theme },
        React.createElement(OverlayNavigationWrapper, { role: "dialog", "aria-modal": "true", "aria-label": formatMessage(translations.navigationWrapper), isVisible: isVisible, ref: overlayRef, hasTopRule: hasTopRule, additionalCSS: additionalCSS?.wrapper, topRuleAdditionalCSS: additionalCSS?.topRule, shouldShowOverlayTop: shouldShowOverlayTop },
            shouldShowOverlayTop && (React.createElement(OverlayNavigationTop, { additionalCSS: additionalCSS?.top },
                resolvedLogo && (React.createElement(OverlayNavigationLogo, { isCenteredOnDesktop: isCenteredOnDesktop },
                    React.createElement("a", { href: logoBaseUrl, "aria-label": brandName },
                        React.createElement(ResponsiveAsset, { ...resolvedLogo })))),
                React.createElement(OverlayNavigationUtility, null,
                    React.createElement(OverlayNavigationButton, { label: closeButtonLabel, ButtonIcon: CloseIcon, isIconButton: true, "aria-label": closeButtonLabel, onClickHandler: onClose })))),
            React.createElement(OverlayNavigationBottom, { tabIndex: "0" },
                hasUtilityLinks && (React.createElement("nav", { "aria-label": formatMessage(translations.utilityLinks) },
                    React.createElement(OverlayNavigationUtilityLinks, null,
                        totalUtilityLinks
                            .filter((link) => !link.hideFromOverlayNavigation)
                            .map(({ isExternal, text, url, isSubscribeButton = false, hasInvertedSubscribeLink = false, isColorTokenInverted = false, ...rest }) => (React.createElement(OverlayNavigationUtilityListItem, { key: text },
                            React.createElement(OverlayNavigationUtilityLink, { onClick: () => handleClickNavigation(text), href: url, as: isExternal ? ExternalLink : 'a', isSubscribeButton: isSubscribeButton && hasInvertedSubscribeLink, isColorTokenInverted: isColorTokenInverted, ...rest }, text)))),
                        React.createElement(NavDrawer, { use: "OverlayNavigation" })),
                    appDownloadUrls?.length > 0 && (React.createElement(AppDownloadLinks, { appDownloadUrls: appDownloadUrls })))),
                hasPrimaryLinks && (React.createElement("nav", { "aria-label": formatMessage(translations.primaryLinks) },
                    React.createElement(OverlayNavigationPrimaryLinks, null, primaryLinks.map(({ isExternal, text, url, ...rest }) => url && (React.createElement(OverlayNavigationPrimaryListItem, { key: text },
                        React.createElement(OverlayNavigationPrimaryLink, { onClick: () => handleClickNavigation(text), href: url, as: isExternal ? ExternalLink : 'a', shouldOverridePrimaryLinkBISize: shouldOverridePrimaryLinkBISize, ...rest }, text))))))),
                (hasSecondaryLinks || hasSocialLinks) && (React.createElement("nav", { "aria-label": formatMessage(translations.secondaryLinks) },
                    hasSecondaryLinks && (React.createElement(OverlayNavigationSecondaryLinks, null, secondaryLinks.map(({ isExternal, text, url, ...rest }) => (React.createElement(OverlayNavigationSecondaryListItem, { key: text },
                        React.createElement(OverlayNavigationSecondaryLink, { onClick: () => handleClickNavigation(text), href: url, as: isExternal ? ExternalLink : 'a', ...rest }, text)))))),
                    hasSocialLinks && (React.createElement(OverlayNavigationSocialLinks, null,
                        React.createElement(OverlayNavigationSocialHeading, null, socialLinksHeading),
                        React.createElement(SocialIcons.Standard, { links: socialLinks })))))))));
};
OverlayNavigation.propTypes = {
    accountProps: PropTypes.object,
    additionalCSS: PropTypes.object,
    appDownloadUrls: PropTypes.array,
    brandName: PropTypes.string,
    hasSearch: PropTypes.bool,
    hasTopRule: PropTypes.bool,
    invertedLogo: PropTypes.shape(ResponsiveAsset.propTypes).isRequired,
    isAccountsEnabled: PropTypes.bool,
    isCenteredOnDesktop: PropTypes.bool,
    isVisible: PropTypes.bool,
    logo: PropTypes.shape(ResponsiveAsset.propTypes).isRequired,
    logoBaseUrl: PropTypes.string,
    onClose: PropTypes.func,
    primaryLinks: Navigation.propTypes.links,
    searchLink: PropTypes.string,
    secondaryLinks: Navigation.propTypes.links,
    shouldOverridePrimaryLinkBISize: PropTypes.bool,
    shouldShowOverlayTop: PropTypes.bool,
    signInLabel: PropTypes.string,
    socialLinks: PropTypes.array,
    socialLinksHeading: PropTypes.string,
    theme: PropTypes.string,
    user: PropTypes.shape({
        isAuthenticated: PropTypes.bool.isRequired
    }),
    utilityLinks: Navigation.propTypes.links
};
OverlayNavigation.displayName = 'OverlayNavigation';
module.exports = OverlayNavigation;
//# sourceMappingURL=OverlayNavigation.js.map

/***/ }),

/***/ 59898:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const OverlayNavigation = __webpack_require__(95772);
module.exports = asConfiguredComponent(OverlayNavigation, 'OverlayNavigation');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 88864:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    navigationWrapper: {
        id: 'OverlayNavigation.OverlayNavigationWrapper',
        defaultMessage: 'Overlay Navigation',
        description: 'ARIA label navigation wrapper'
    },
    closeButtonLabel: {
        id: 'OverlayNavigation.OverlayNavigationButton',
        defaultMessage: 'Close Navigation Menu',
        description: 'ARIA label for the close button on navigation menu'
    },
    utilityLinks: {
        id: 'OverlayNavigation.OverlayNavigationUtilityLinks',
        defaultMessage: 'Utility',
        description: 'ARIA label for the utility links'
    },
    primaryLinks: {
        id: 'OverlayNavigation.OverlayNavigationPrimaryLinks',
        defaultMessage: 'Primary',
        description: 'ARIA label for the primary links'
    },
    searchLabel: {
        id: 'OverlayNavigation.OverlayNavigationSearchLabel',
        defaultMessage: 'Search',
        description: 'Text for the search link'
    },
    secondaryLinks: {
        id: 'OverlayNavigation.OverlayNavigationSecondaryLinks',
        defaultMessage: 'Secondary',
        description: 'ARIA label for the secondary links'
    },
    signInLabel: {
        id: 'OverlayNavigation.OverlayNavigationSignInLabel',
        defaultMessage: 'Sign In',
        description: 'Text for the sign in link'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 29001:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { useIntl } = __webpack_require__(46984);
const debounce = __webpack_require__(38221);
const throttle = __webpack_require__(7350);
const { GatewayDest } = __webpack_require__(10103);
const translations = (__webpack_require__(79483)/* ["default"] */ .A);
const { connector } = __webpack_require__(57744);
const Drawer = __webpack_require__(98653);
const SecondaryMenu = __webpack_require__(82814);
const MegaMenu = __webpack_require__(69834);
const PaletteProvider = __webpack_require__(49235);
let UtilityNavigation = __webpack_require__(96962);
let ScrollingNavigation = __webpack_require__(14212);
const LinkBanner = __webpack_require__(82873);
const ResponsiveAsset = __webpack_require__(73275);
const NavLeft = __webpack_require__(93394);
let OverlayNavigation = __webpack_require__(59898);
const { sizesFullName } = __webpack_require__(99906);
const { TrackComponentChannel } = __webpack_require__(78788);
const { INITIAL_STATE, computeScroll, getStateWithHeaderHeight } = __webpack_require__(70698);
const { SiteHeaderWrapper, SiteHeaderStickyWrapper, SiteHeaderTopRule, SiteHeaderTop, SiteHeaderTopStatic, SiteHeaderTopSticky, VisibleStickyWrapper, HiddenStickyWrapper, SiteHeaderLogo, SiteHeaderUtility, SiteHeaderNavLeft } = __webpack_require__(27985);
const UniversalDrawer = __webpack_require__(32217);
const { useState, useRef, useEffect, memo } = React;
OverlayNavigation = memo(OverlayNavigation);
UtilityNavigation = memo(UtilityNavigation);
ScrollingNavigation = memo(ScrollingNavigation);
/**
 * SiteHeader
 * The top of a brand site.
 *
 * @param {Drawer.propTypes} props.drawerProps - Required properties for the drawer
 * @param {object} props - React props
 * @param {object} props.accountProps - Required properties for the account drop down
 * @param {Array} [props.appDownloadUrls] - Array of the Mobile Apps Links
 * @param {string} props.brandName - The brand name of the site
 * @param {string} [props.className] - Optional class name on the header
 * @param {string} props.hasContentHeaderLogo - defines if content header has logo
 * @param {string} props.hasSearch - Define in the link to the search page is visible
 * @param {boolean} props.hasTopRule - Define if top rule is rendered on the nav
 * @param {object} props.headerInvertedLogo - The inverted brand logo of the site to use in the overlay
 * @param {object} props.headerLogo - The brand logo of the site to use in the overlay
 * @param {object} props.hideUtilityNavButton - Hide Utility Nav Button across all breakpoints
 * @param {object} [props.internationalInfo] - Object containing data for market switcher
 * @param {object} props.invertedLogo - The inverted brand logo of the site
 * @param {boolean} [props.isAccountsEnabled] - If `true` enable account support
 * @param {boolean} props.isPointerEventEnabledOnHover - Determine pointer events when hasHrefForLinks is true for megamenu
 * @param {object} [props.linkBannerData] - link banner information from the redux store
 * @param {boolean} [props.showNavigationWithlinkBanner] - If `true` show link banner with navigation
 * @param {object} props.logo - The brand logo of the site
 * @param {string} props.logoBaseUrl - The URl link for the logo
 * @param {Array} props.primaryLinks - Navigational links
 * @param {string} props.searchLink - The URL link of the search page
 * @param {Array} [props.secondaryLinks] - Optional navigational links
 * @param {boolean} [props.showBannerUnderNav] - Optional value to determine if linkBanner displays below navigation
 * @param {Array} [props.socialLinks] - Social navigation items
 * @param {Array} [props.socialLinksHeading] - Title for social navigation items
 * @param {string} [props.theme] - The theme set by the base page "standard" | "inverted"
 * @param {boolean} [props.isFixedHeight] - Optional value to determine fixed height for site header
 * @param {object} props.user - required user object
 * @param {boolean} props.user.isAuthenticated - represents if the user is currently authenticated
 * @param {Array} [props.utilityLinks] - Utility navigation items
 * @param {object} [props.variations] - Optional variation properties used in rendering the component
 * @param {boolean} [props.isCenteredOnDesktop] - Optionally center align the logo on desktop breakpoints, links on all breakpoints
 * @param {boolean} [props.hasCart] - Optional prop to determine if Shopify Cart needs to be shown
 * @param {boolean} props.isShopifyCartWidgetOpen - status of whether shopify cart is open
 * @param {boolean} [props.fadeWidth] - props for the fade width of megamenu
 * @param {boolean} [props.isHamburgerMenuHidden] - prop for hiding the Hamburger menu
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 * @param {boolean} [props.hasSEOSupport] - Optional enable the SEO Suport for mega menu default value false
 */
// eslint-disable-next-line complexity
const SiteHeader = ({ drawerProps, accountProps, appDownloadUrls, brandName, className, hasContentHeaderLogo, hasSearch, hasTopRule, hideUtilityNavButton, headerInvertedLogo, headerLogo, internationalInfo, invertedLogo, isAccountsEnabled, isFixedHeight, isHamburgerMenuHidden = false, isPointerEventEnabledOnHover, linkBannerData, logo, logoBaseUrl, primaryLinks, secondaryLinks, searchLink, showBannerUnderNav, socialLinks, socialLinksHeading, theme = 'standard', user, utilityLinks, variations = {
    isDrawerEnabled: false
}, fadeWidth = 'sm', showNavigationWithlinkBanner, isCenteredOnDesktop, hasCart, variationName, hasSEOSupport = false }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SiteHeader',
            variation: variationName
        });
    }, [variationName]);
    const intl = useIntl();
    const megaMenuwrapperRef = useRef([]);
    const stickyWrapperRef = useRef(null);
    const navWrapper = useRef(null);
    const [navState, setNavState] = useState(INITIAL_STATE);
    const [isOverlayVisible, setIsOverlayVisible] = useState(false);
    const [isDrawerOpen, setDrawerVisible] = useState(false);
    const [icon, setIcon] = useState('Menu');
    const [isMegaMenu, setMegaMenu] = useState(false);
    const [utilLinks] = useState(utilityLinks
        .filter((link) => link.showInTopNav)
        .sort((a, b) => b.forceLeftOfNav - a.forceLeftOfNav));
    const universalDrawerMenuContent = React.useMemo(() => primaryLinks.filter((link) => link.hasChildren), [primaryLinks]);
    const [megamenuContent, setMegaMenuContent] = useState(hasSEOSupport ? universalDrawerMenuContent : {});
    const [megaMenuPrimaryLinks, setMegaMenuPrimaryLinks] = useState(primaryLinks);
    const [showLinkBanner, setShowLinkBanner] = useState(false);
    const topRightLinks = utilityLinks.filter((link) => !link.forceLeftOfNav);
    const isOverlayEnabled = !variations.isDrawerEnabled;
    const handleMenuNavigation = (action) => {
        if ( true && window.dataLayer) {
            window.dataLayer.push({
                event: 'menu-click',
                menuAction: action
            });
        }
    };
    const doToggle = () => {
        setIsOverlayVisible(!isOverlayVisible);
        const menuStatus = isOverlayVisible ? 'Close' : 'Open';
        handleMenuNavigation(menuStatus);
        isOverlayVisible ? setIcon('Menu') : setIcon('Close');
    };
    const doToggleMemoized = React.useCallback(doToggle, [isOverlayVisible]);
    const handleScroll = () => setNavState((prevState) => computeScroll(prevState));
    const handleResize = () => setNavState((prevState) => getStateWithHeaderHeight(prevState, stickyWrapperRef));
    const collapseMegaMenu = (e) => {
        const activemenuTarget = megaMenuwrapperRef.current.map((menuRef) => menuRef.contains(e.target));
        if (isDrawerOpen &&
            isMegaMenu &&
            !navWrapper.current.contains(e.target) &&
            (!activemenuTarget.includes(true) || e.type === 'click')) {
            if (hasSEOSupport) {
                setMegaMenuContent(universalDrawerMenuContent);
            }
            setIcon('Menu');
            setDrawerVisible(false);
            handleMenuNavigation('Close');
        }
    };
    const onHover = (text) => {
        if (variations.isDrawerEnabled) {
            const activeLink = megaMenuPrimaryLinks.find((currentLink) => currentLink.text === text);
            if (activeLink.hasChildren) {
                setDrawerVisible(true);
                setMegaMenu(true);
                if (hasSEOSupport) {
                    setMegaMenuContent(universalDrawerMenuContent.reduce((links, link) => {
                        links.push({
                            ...link,
                            isActive: link.text === text && link.hasChildren
                        });
                        return links;
                    }, []));
                }
                else {
                    setMegaMenuContent({
                        ...activeLink,
                        isActive: true
                    });
                }
                setMegaMenuPrimaryLinks(megaMenuPrimaryLinks.reduce((links, link) => {
                    links.push({
                        ...link,
                        isActive: link.text === text && link.hasChildren
                    });
                    return links;
                }, []));
            }
            else {
                isMegaMenu && isDrawerOpen && handleMenuNavigation('Close');
                setDrawerVisible(false);
                setMegaMenu(false);
                setIcon('Menu');
            }
        }
    };
    const memoizedOnHover = React.useCallback(onHover, [
        hasSEOSupport,
        isDrawerOpen,
        isMegaMenu,
        megaMenuPrimaryLinks,
        universalDrawerMenuContent,
        variations.isDrawerEnabled
    ]);
    useEffect(() => {
        if (!isDrawerOpen) {
            setMegaMenuPrimaryLinks(primaryLinks);
        }
        if (isDrawerOpen) {
            handleMenuNavigation('Open');
        }
    }, [isDrawerOpen, primaryLinks]);
    useEffect(() => {
        function handleDocScroll() {
            setIcon('Menu');
            setDrawerVisible(false);
        }
        const throttledDocScroll = throttle(handleDocScroll, 10);
        window.addEventListener('scroll', throttledDocScroll);
        return () => window.removeEventListener('scroll', throttledDocScroll);
    }, []);
    useEffect(() => {
        const throttledScroll = throttle(handleScroll, 100);
        const debouncedResize = debounce(handleResize, 300);
        handleResize();
        window.addEventListener('scroll', throttledScroll, { passive: true });
        window.addEventListener('resize', debouncedResize);
        return () => {
            window.removeEventListener('scroll', throttledScroll);
            window.removeEventListener('resize', debouncedResize);
        };
    }, []);
    useEffect(() => {
        if (window && window.document) {
            const targetElement = window.document.querySelector('[data-testid="MobileProductCardOuter"]');
            if (navState.showSticky) {
                targetElement?.classList.add('headerIsSticky');
            }
            else {
                targetElement?.classList.remove('headerIsSticky');
            }
        }
    });
    useEffect(() => {
        const shouldShowLinkBanner = linkBannerData?.links?.length > 0 &&
            linkBannerData?.bannerType !== 'visual-link-banner';
        if (window?.location) {
            const { pathname } = window.location;
            setShowLinkBanner(!(pathname.includes('/hotels/') || !shouldShowLinkBanner));
        }
    }, [linkBannerData]);
    const { clippedMenu, headerHeight, showSticky } = navState;
    const additionalCSS = {
        wrapper: showSticky ? VisibleStickyWrapper : HiddenStickyWrapper,
        top: clippedMenu ? SiteHeaderTopSticky : SiteHeaderTopStatic,
        topRule: !clippedMenu && SiteHeaderTopRule,
        fixedHeight: isFixedHeight ? SiteHeaderTop : ''
    };
    const getTopPrimaryLinks = () => variations.isDrawerEnabled
        ? megaMenuPrimaryLinks.filter((link) => link.showInTopNav)
        : primaryLinks.filter((link) => link.showInTopNav);
    const topPrimaryLinks = React.useMemo(getTopPrimaryLinks, [
        megaMenuPrimaryLinks,
        primaryLinks,
        variations.isDrawerEnabled
    ]);
    const primaryUtilityLink = utilLinks[0];
    const hidePrimaryUtilityLink = sizesFullName.large;
    const isInverted = theme === 'inverted';
    const resolvedLogo = isInverted ? invertedLogo : logo;
    const handleClickNavigation = (e) => {
        if ( true && window.dataLayer) {
            const str = (e.target.innerText || '').toLowerCase();
            const existingValues = ['', 'subscribe', 'sign in', 'newsletter'];
            if (!existingValues.includes(str)) {
                window.dataLayer.push({
                    event: 'navigation-click',
                    navigationType: 'header',
                    clickText: str
                });
            }
        }
    };
    const scrollingNavigation = (React.createElement(ScrollingNavigation, { ariaLabel: intl.formatMessage(translations.primaryNavigationLabel), hasDivider: true, hasBottomBorder: variations.isDrawerEnabled, hasContentHeaderLogo: hasContentHeaderLogo, hidePrimaryLink: hidePrimaryUtilityLink, isCentered: isCenteredOnDesktop, isSlim: clippedMenu, links: topPrimaryLinks, primaryLink: primaryUtilityLink, onHover: memoizedOnHover, shouldUseHoverState: isMegaMenu, fadeWidth: fadeWidth, isPointerEventEnabledOnHover: isPointerEventEnabledOnHover, theme: theme }));
    // conditional to determine placement of link banner in relation to scrolling navigation
    const scrollingNavigationWithLinkBanner = !showBannerUnderNav ? (React.createElement(React.Fragment, null,
        React.createElement(LinkBanner, { hasBorder: false, palette: theme }),
        scrollingNavigation)) : (React.createElement(React.Fragment, null,
        scrollingNavigation,
        React.createElement(LinkBanner, { palette: theme, showBannerUnderNav: showBannerUnderNav })));
    // check if both ScrollingNavigation and LinkBanner render, otherwise only display LinkBanner
    const shouldRenderLinkBanner = showNavigationWithlinkBanner ? (scrollingNavigationWithLinkBanner) : (React.createElement(LinkBanner, { hasBorder: false, pallette: theme }));
    return (React.createElement(PaletteProvider, { palette: theme },
        React.createElement(SiteHeaderWrapper, { "data-testid": "PersistentTop SiteHeaderWrapper", className: className, headerHeight: headerHeight, hasContentHeaderLogo: hasContentHeaderLogo, additionalCSS: additionalCSS.wrapper },
            React.createElement(SiteHeaderStickyWrapper, { ref: stickyWrapperRef, hasTopRule: hasTopRule, headerHeight: headerHeight, "data-testid": "SiteHeaderStickyWrapper", topRuleAdditionalCSS: additionalCSS.topRule, shouldHideShadow: variations.isDrawerEnabled, onClick: handleClickNavigation, hasSEOSupport: hasSEOSupport },
                React.createElement("div", { "data-testid": "SiteHeaderContent" },
                    React.createElement(SiteHeaderTop, { hasContentHeaderLogo: hasContentHeaderLogo, additionalCSS: isFixedHeight ? additionalCSS.fixedHeight : additionalCSS.top },
                        React.createElement(SiteHeaderNavLeft, null,
                            React.createElement(NavLeft, { isExpanded: !clippedMenu })),
                        resolvedLogo && (React.createElement(SiteHeaderLogo, { isCenteredOnDesktop: isCenteredOnDesktop },
                            React.createElement("a", { href: logoBaseUrl, "aria-label": brandName, "data-testid": "Logo" },
                                React.createElement(ResponsiveAsset, { ...resolvedLogo })))),
                        React.createElement(SiteHeaderUtility, null,
                            React.createElement(UtilityNavigation, { ariaLabel: intl.formatMessage(translations.utilityNavigationLabel), accountProps: accountProps, isAccountsEnabled: isAccountsEnabled, buttonIcon: icon, hasEnableIcon: true, hasPrimaryLink: !!primaryUtilityLink, hidePrimaryLink: hidePrimaryUtilityLink, hideNavButton: hideUtilityNavButton, hrefLink: drawerProps.searchAction || '/search', links: utilLinks, isHamburgerMenuHidden: isHamburgerMenuHidden, onButtonClick: doToggleMemoized, shouldSwitchMenuIcon: variations.isDrawerEnabled, user: user, ...internationalInfo, hasCart: hasCart, isBrandLogoCenteredOnDesktop: isCenteredOnDesktop, theme: theme })))),
                React.createElement("div", { ref: navWrapper }, showLinkBanner ? shouldRenderLinkBanner : scrollingNavigation)),
            variations.isDrawerEnabled && hasSEOSupport && (React.createElement(UniversalDrawer.SiteHeaderDrawer, { hasLinkBanner: showNavigationWithlinkBanner, theme: theme, className: "universal_drawer--megamenu", isDrawerOpen: isDrawerOpen, onClose: () => setDrawerVisible(false), registryName: "mega-menu-siteheader-modal" }, megamenuContent.map((menu, i) => (React.createElement("div", { ref: (el) => {
                    megaMenuwrapperRef.current[i] = el;
                }, className: menu.isActive ? 'show-menu' : 'hide-menu' },
                React.createElement(MegaMenu, { isSlim: clippedMenu, megaMenuContent: menu, collapseMegaMenu: collapseMegaMenu, isDrawerOpen: isDrawerOpen, theme: theme, hasLinkBanner: showLinkBanner && showNavigationWithlinkBanner })))))),
            React.createElement(GatewayDest, { name: "mega-menu-siteheader-modal", className: "modal-container" }),
            (isOverlayEnabled || isOverlayVisible) && (React.createElement(OverlayNavigation, { accountProps: accountProps, appDownloadUrls: appDownloadUrls, isAccountsEnabled: isAccountsEnabled, user: user, hasSearch: hasSearch, hasTopRule: hasTopRule, primaryLinks: primaryLinks, utilityLinks: utilityLinks, searchLink: searchLink, secondaryLinks: secondaryLinks, socialLinks: socialLinks, socialLinksHeading: socialLinksHeading, logo: headerLogo, logoBaseUrl: logoBaseUrl, invertedLogo: headerInvertedLogo, isCenteredOnDesktop: isCenteredOnDesktop, brandName: brandName, isVisible: isOverlayVisible, onClose: doToggleMemoized, theme: theme })),
            variations.isDrawerEnabled && !hasSEOSupport && (React.createElement(Drawer.SiteHeaderDrawer, { appElement: drawerProps.appElement, isOpen: isDrawerOpen, hasBodyScrollWhenDrawerOpen: false, onClose: () => setDrawerVisible(false), contentLabel: intl.formatMessage(translations.drawerLabel), hasLinkBanner: showNavigationWithlinkBanner, theme: theme, className: "drawer--megamenu" },
                !isMegaMenu && (React.createElement(SecondaryMenu, { accountProps: accountProps, ...drawerProps, contentAlign: "center", showSearch: hasSearch, isAccountsEnabled: isAccountsEnabled, user: user, utilityLinks: topRightLinks })),
                isMegaMenu && (React.createElement(MegaMenu, { isSlim: clippedMenu, megaMenuContent: megamenuContent, isDrawerOpen: isDrawerOpen, collapseMegaMenu: collapseMegaMenu, theme: theme, hasLinkBanner: showLinkBanner && showNavigationWithlinkBanner })))),
            variations.isDrawerEnabled &&
                isDrawerOpen &&
                !isMegaMenu &&
                hasSEOSupport && (React.createElement(Drawer.SiteHeaderDrawer, { appElement: drawerProps.appElement, isOpen: isDrawerOpen, onClose: () => setDrawerVisible(false), contentLabel: intl.formatMessage(translations.drawerLabel), hasLinkBanner: showNavigationWithlinkBanner, theme: theme, className: "drawer--megamenu" },
                React.createElement(SecondaryMenu, { accountProps: accountProps, ...drawerProps, contentAlign: "center", showSearch: hasSearch, isAccountsEnabled: isAccountsEnabled, user: user, utilityLinks: topRightLinks }))))));
};
SiteHeader.propTypes = {
    accountProps: PropTypes.object,
    appDownloadUrls: PropTypes.array,
    brandName: PropTypes.string,
    className: PropTypes.string,
    drawerProps: PropTypes.shape({
        appElement: PropTypes.any,
        searchAction: PropTypes.string
    }),
    fadeWidth: PropTypes.string,
    hasCart: PropTypes.bool,
    hasContentHeaderLogo: PropTypes.bool,
    hasSearch: PropTypes.bool,
    hasSEOSupport: PropTypes.bool,
    hasTopRule: PropTypes.bool,
    headerInvertedLogo: PropTypes.shape(ResponsiveAsset.propTypes).isRequired,
    headerLogo: PropTypes.shape(ResponsiveAsset.propTypes).isRequired,
    hideUtilityNavButton: PropTypes.bool,
    internationalInfo: PropTypes.object,
    invertedLogo: PropTypes.shape(ResponsiveAsset.propTypes).isRequired,
    isAccountsEnabled: PropTypes.bool,
    isCenteredOnDesktop: PropTypes.bool,
    isFixedHeight: PropTypes.bool,
    isHamburgerMenuHidden: PropTypes.bool,
    isPointerEventEnabledOnHover: PropTypes.bool,
    isShopifyCartWidgetOpen: PropTypes.bool,
    linkBannerData: PropTypes.shape(LinkBanner.propTypes.linkBannerData),
    logo: PropTypes.shape(ResponsiveAsset.propTypes).isRequired,
    logoBaseUrl: PropTypes.string,
    primaryLinks: PropTypes.array,
    searchLink: PropTypes.string,
    secondaryLinks: PropTypes.array,
    showBannerUnderNav: PropTypes.bool,
    showNavigationWithlinkBanner: PropTypes.bool,
    socialLinks: PropTypes.array,
    socialLinksHeading: PropTypes.string,
    theme: PropTypes.string,
    user: PropTypes.shape({
        isAuthenticated: PropTypes.bool.isRequired
    }),
    utilityLinks: PropTypes.array,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        hasTopRule: PropTypes.bool,
        isDrawerEnabled: PropTypes.bool
    })
};
SiteHeader.displayName = 'SiteHeader';
module.exports = connector(SiteHeader, {
    keysToPluck: ['linkBannerData']
});
//# sourceMappingURL=SiteHeader.js.map

/***/ }),

/***/ 25126:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { calculateSpacing, getColorToken } = __webpack_require__(26865);
const { BaseLink } = __webpack_require__(76955);
const { BREAKPOINTS } = __webpack_require__(96472);
const { resolveMenuKey, isInverted } = __webpack_require__(70698);
const { Wrapper: NavRollover } = __webpack_require__(32788);
const Link = styled(BaseLink)
    .withConfig({
    displayName: 'Link'
})
    .attrs(({ theme }) => ({
    colorSecondaryLinkToken: resolveMenuKey(theme, 'colors.foundation.collapsed-menu.nav-link.hover'),
    colorStaticLinkToken: resolveMenuKey(theme, 'colors.foundation.collapsed-menu.nav-link.default')
})) `
  display: block;
  padding: ${calculateSpacing(1.5)} ${calculateSpacing(1)};
  white-space: nowrap;

  &:link,
  &:visited {
    ${({ theme, hasInvertedSubscribeButton }) => hasInvertedSubscribeButton
    ? `color: ${getColorToken(theme, resolveMenuKey(theme, 'colors.background.white'))};}`
    : `color: ${getColorToken(theme, resolveMenuKey(theme, 'colors.foundation.collapsed-menu.nav-link.hover'))};}`}
  }

  &:hover + div ${NavRollover},
  &:focus + div ${NavRollover} {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
  }

  &:hover,
  &:focus {
    text-decoration: none;
  }

  ${({ theme }) => isInverted(theme) &&
    `&:link,
       &:visited {
          color : ${getColorToken(theme, resolveMenuKey(theme, 'colors.consumption.lead.inverted.link'))}
      }
      &:hover,
      &:focus {
        color : ${getColorToken(theme, resolveMenuKey(theme, 'colors.consumption.lead.inverted.link-hover'))}
        }`}

  @media (min-width: ${BREAKPOINTS.md}) {
    padding-right: ${calculateSpacing(2)};
    padding-left: ${calculateSpacing(2)};
  }
`;
Link.defaultProps = {
    linkStyle: 'navigation',
    typeToken: 'typography.definitions.foundation.link-primary'
};
module.exports = Link;
//# sourceMappingURL=Link.styles.js.map

/***/ }),

/***/ 75197:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { NavCTA, NavRollover } = __webpack_require__(12501);
const ConsumerMarketingUnit = __webpack_require__(71284);
const ExternalLink = __webpack_require__(39832);
const Link = __webpack_require__(25126);
const { NavCTADivider, ListItem, StyledLinks } = __webpack_require__(54064);
const { sizesAscending } = __webpack_require__(99906);
const handleClickNavigation = (text) => {
    if ( true && window.dataLayer) {
        window.dataLayer.push({
            event: 'navigation-click',
            navigationType: 'header',
            clickText: text
        });
    }
};
const Links = ({ utilityLinks, hasInvertedSubscribeButton, hasJourneyUnit, hasPrimaryLink, hasSiblings, hidePrimaryLink, isBrandLogoCenteredOnDesktop, shouldHideMenuOnMobile }) => {
    return (React.createElement(StyledLinks, { hasSiblings: hasSiblings, hasPrimaryLink: hasPrimaryLink, hidePrimaryLink: hidePrimaryLink, isBrandLogoCenteredOnDesktop: isBrandLogoCenteredOnDesktop },
        utilityLinks.map(({ isActive, isExternal, text, url, isSubscribeButton = false, isColorTokenInverted = false, hideFromUtilityNavigation = false }, index) => !hideFromUtilityNavigation && (React.createElement(ListItem, { key: text, hasPrimaryLink: hasPrimaryLink, isActive: isActive, hasDivider: !hasInvertedSubscribeButton, hasJourneyUnit: hasJourneyUnit, hasInvertedSubscribeButtons: isSubscribeButton && hasInvertedSubscribeButton, isBrandLogoCenteredOnDesktop: isBrandLogoCenteredOnDesktop, isColorTokenInverted: isColorTokenInverted, utilityLinksCnt: utilityLinks.length, 
            // only hide the first two links in this list on mobile
            shouldHideOnMobile: shouldHideMenuOnMobile && index < 2 },
            React.createElement(Link, { href: url, isActive: isActive, onClick: () => handleClickNavigation(text), as: isExternal ? ExternalLink : 'a', hasInvertedSubscribeButton: isSubscribeButton && hasInvertedSubscribeButton, isColorTokenInverted: isColorTokenInverted, "data-testid": isSubscribeButton ? 'NavCTA' : null }, text),
            isSubscribeButton && React.createElement(NavRollover, null)))),
        React.createElement(ListItem, { hasDivider: !hasInvertedSubscribeButton, hasJourneyUnit: hasJourneyUnit, isBrandLogoCenteredOnDesktop: isBrandLogoCenteredOnDesktop, hasCMUnit: true },
            hasJourneyUnit && React.createElement(NavCTA, null),
            !hasInvertedSubscribeButton && React.createElement(NavCTADivider, null),
            React.createElement(ConsumerMarketingUnit, { position: "nav-rollover" }),
            React.createElement(NavRollover, null))));
};
Links.propTypes = {
    hasInvertedSubscribeButton: PropTypes.bool,
    hasJourneyUnit: PropTypes.bool,
    hasPrimaryLink: PropTypes.bool,
    hasSiblings: PropTypes.bool,
    hidePrimaryLink: PropTypes.oneOf(sizesAscending),
    isBrandLogoCenteredOnDesktop: PropTypes.bool,
    shouldHideMenuOnMobile: PropTypes.bool,
    utilityLinks: PropTypes.array
};
module.exports = Links;
//# sourceMappingURL=Links.js.map

/***/ }),

/***/ 54064:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.StyledLinks = exports.ListItem = exports.NavCTADivider = void 0;
const styles_1 = __webpack_require__(32788);
const { default: styled, css } = __webpack_require__(92168);
const { beforeDivider, afterDivider } = __webpack_require__(60574);
const { BREAKPOINTS, ZINDEX_MAP } = __webpack_require__(96472);
const { calculateSpacing, getColorToken } = __webpack_require__(26865);
const { resolveMenuKey } = __webpack_require__(70698);
const { Link: NavCTALink } = __webpack_require__(82552);
exports.NavCTADivider = styled.div.withConfig({
    displayName: 'NavCTADivider'
}) `
  ${({ theme }) => afterDivider(theme)}
`;
const bothDividers = (theme) => css `
    ${beforeDivider(theme)};
    ${afterDivider(theme)};
  `;
const consumerMarketingStyles = css `
  .nav-cta__component,
  .consumer-marketing-unit--nav-cta {
    height: 100%;

    &:hover,
    &:focus-within,
    &:focus {
      ~ .consumer-marketing-unit--nav-rollover,
      ~ .nav-rollover__component > div {
        ${styles_1.ShowRollover}
      }
    }

    + ${exports.NavCTADivider} {
      display: none;
    }
  }

  .nav-rollover__component > div,
  .consumer-marketing-unit--nav-rollover {
    &:hover,
    &:focus,
    &:focus-within {
      ${styles_1.ShowRollover}
    }
  }

  .consumer-marketing-unit--nav-rollover,
  .nav-rollover__component > div {
    ${styles_1.HideRollover}
    display: none;
    top: ${calculateSpacing(7)};
    right: 0;
    align-items: center;
    justify-content: center;
    z-index: ${ZINDEX_MAP.navFixed};
    @media (min-width: ${BREAKPOINTS.md}) {
      display: flex;
    }
  }
`;
const ListItemCommonCss = (isColorTokenInverted, theme) => `
  background-color: ${getColorToken(theme, resolveMenuKey(theme, isColorTokenInverted
    ? 'colors.consumption.body.inverted.link'
    : 'colors.foundation.collapsed-menu.nav-link.hover'))};
  border-radius: 2px;
  color: ${getColorToken(theme, resolveMenuKey(theme, 'colors.background.white'))};;

  &:active,
  &:focus,
  &:hover,
  &:visited,
  &:link {
    color: ${getColorToken(theme, resolveMenuKey(theme, 'colors.background.white'))};
`;
exports.ListItem = styled.li.withConfig({
    displayName: 'ListItem'
}) `
  display: inline-block;
  position: relative;
  cursor: pointer;

  &:not(:last-child):not(:nth-last-child(2)) {
    ${({ theme, hasDivider }) => hasDivider && afterDivider(theme)};
  }

  ${({ hasInvertedSubscribeButtons, hasCMUnit, hasJourneyUnit, isBrandLogoCenteredOnDesktop, isColorTokenInverted, theme, utilityLinksCnt }) => {
    if (hasInvertedSubscribeButtons && utilityLinksCnt < 2) {
        return `
        @media (min-width: ${BREAKPOINTS.md}) {
          display: block;
        }
        ${ListItemCommonCss(isColorTokenInverted, theme)};`;
    }
    else if (hasInvertedSubscribeButtons && utilityLinksCnt === 2) {
        return `
        @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
          display: block !important;
        }
        ${ListItemCommonCss(isColorTokenInverted, theme)}`;
    }
    else if (hasJourneyUnit || isBrandLogoCenteredOnDesktop) {
        return `@media (max-width: ${BREAKPOINTS.md}) {
        &:nth-last-child(n + 2) {
          display: none;
        }}`;
    }
    else if (hasCMUnit) {
        return `@media (max-width: ${BREAKPOINTS.md}) {
        &:last-child {
          display: block;
        }}`;
    }
    return `@media (max-width: ${BREAKPOINTS.md}) {
      display: none;
    }`;
}}

  ${consumerMarketingStyles}
  ${NavCTALink} {
    padding: ${calculateSpacing(1.5)};

    ${({ theme, hasDivider }) => hasDivider && bothDividers(theme)};
  }

  ${({ shouldHideOnMobile }) => shouldHideOnMobile &&
    `@media (max-width: ${BREAKPOINTS.md}) {
      display: none;
    }`}
`;
exports.StyledLinks = styled.ul.withConfig({
    displayName: 'StyledLinks'
}) `
  display: flex;
  align-items: ${({ hasSiblings }) => (hasSiblings ? 'stretch' : null)};
  margin: 0;
  padding: 0;
  list-style: none;

  /*
    Available spaces
    small - 1
    medium - 2
    large - 3
    xlarge - 4
    xxlarge - 5
    If hasSiblings reduce number of available space for utility items by 1
    Note: the n count was increased by 1 in all spaces due to the addition of a
      slot for Consumer Marketing Units within a hardcoded ListItem
      that is always present across all brands.
  */
  ${exports.ListItem} {
    ${({ hasPrimaryLink, hidePrimaryLink }) => hasPrimaryLink && hidePrimaryLink
    ? `
        @media (max-width: ${BREAKPOINTS[hidePrimaryLink]}){
          &:first-child {
            display: none;
          }
        }
        `
    : null}

    ${({ hasSiblings, isBrandLogoCenteredOnDesktop }) => hasSiblings
    ? `

    ${isBrandLogoCenteredOnDesktop
        ? `
        @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
          &:nth-last-child(n + 2) {
            display: none;
          }
        }
      `
        : `
        @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
          &:nth-last-child(n + 3) {
            display: none;
          }
        }
      `}

    @media (min-width: ${BREAKPOINTS.lg}) and (max-width: ${BREAKPOINTS.xl}) {
      &:nth-last-child(n + 4) {
        display: none;
      }
    }

    @media (min-width: ${BREAKPOINTS.xl}) and (max-width: ${BREAKPOINTS.xxl}) {
      &:nth-last-child(n + 5) {
        display: none;
      }
    }
  }`
    : `
    @media (max-width: ${BREAKPOINTS.md}) {
    &:nth-last-child(n + 3) {
      display: none;
    }
  }

  @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
    &:nth-last-child(n + 4) {
      display: none;
    }
  }

  ${isBrandLogoCenteredOnDesktop
        ? `
        @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
          &:nth-last-child(n + 3) {
            display: none;
          }
        }
      `
        : `
        @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
          &:nth-last-child(n + 4) {
            display: none;
          }
        }
      `};

  @media (min-width: ${BREAKPOINTS.lg}) and (max-width: ${BREAKPOINTS.xl}) {
    &:nth-last-child(n + 5) {
      display: none;
    }
  }
  `};
  }
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 36780:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const classnames = __webpack_require__(32485);
const get = __webpack_require__(58156);
const PropTypes = __webpack_require__(5556);
const { useIntl } = __webpack_require__(46984);
const { connect } = __webpack_require__(67851);
const translations = (__webpack_require__(16696)/* ["default"] */ .A);
const MenuIcon = __webpack_require__(26488);
const SearchIcon = __webpack_require__(73767);
const CloseIcon = __webpack_require__(76399);
const NavigationDropdown = __webpack_require__(36062);
const { connector } = __webpack_require__(57744);
const { sizesAscending } = __webpack_require__(99906);
const breakpoints = __webpack_require__(99906);
const { googleAnalytics } = __webpack_require__(90090);
const Shopping = __webpack_require__(10934);
const ShopifyCart = __webpack_require__(75391);
const createActions = __webpack_require__(62067);
const { useClientStatus } = __webpack_require__(8877);
const { Wrapper, UtilityNavigationButton: Button, UtilityNavigationDropdown, SiteHeaderCartButton, SiteHeaderCartQuantity, SiteHeaderCart } = __webpack_require__(60574);
const Link = __webpack_require__(25126);
const Links = __webpack_require__(75197);
const { useState, useEffect } = React;
const MAX_LINKS = 3;
const handleClickNavigation = (text) => {
    if ( true && window.dataLayer) {
        window.dataLayer.push({
            event: 'navigation-click',
            navigationType: 'header',
            clickText: text
        });
    }
};
const getNavIcon = (shouldSwitchMenuIcon, buttonIcon, size, isHamburgerMenuHidden) => {
    const { width } = size;
    const widthForMobile = width < breakpoints.minThresholds.xl;
    if (!shouldSwitchMenuIcon || (!isHamburgerMenuHidden && widthForMobile)) {
        const icon = buttonIcon === 'Menu' ? MenuIcon : CloseIcon;
        return { icon, iconName: 'menu' };
    }
    return { icon: SearchIcon, iconName: 'search' };
};
const AccountDropdown = ({ accountProps, assistiveLabel, isInverted = false, label, signInLabel, user }) => {
    const { accountLinks, signInLink } = accountProps || {};
    const isClient = useClientStatus();
    if (!accountLinks?.length || !signInLink)
        return null;
    const { isAuthenticated } = user;
    if (isAuthenticated && isClient) {
        const options = [
            ...accountLinks.map(({ text, url }) => ({
                name: text,
                url
            }))
        ];
        return (React.createElement(UtilityNavigationDropdown, null,
            React.createElement(NavigationDropdown, { id: "utility-navigation-dropdown", options: options, isInverted: isInverted, label: label, showLabel: true, assistiveLabel: assistiveLabel, align: { sm: 'right', md: 'left' } })));
    }
    return (React.createElement(UtilityNavigationDropdown, { onClick: () => handleClickNavigation(signInLabel) },
        React.createElement(Link, { href: signInLink }, signInLabel)));
};
AccountDropdown.propTypes = {
    accountProps: PropTypes.object,
    assistiveLabel: PropTypes.string,
    isInverted: PropTypes.bool,
    label: PropTypes.string,
    signInLabel: PropTypes.string,
    user: PropTypes.shape({
        isAuthenticated: PropTypes.bool.isRequired
    })
};
const MarketsDropdown = ({ assistiveLabel, hasDivider, internationalSites, label, showLabel }) => {
    return (React.createElement(UtilityNavigationDropdown, { hasDivider: hasDivider },
        React.createElement(NavigationDropdown, { label: label, showLabel: showLabel, options: internationalSites, name: "market-switch-dropdown", assistiveLabel: assistiveLabel, align: { sm: 'right', md: 'left' } })));
};
MarketsDropdown.propTypes = {
    assistiveLabel: PropTypes.string,
    hasDivider: PropTypes.bool,
    internationalSites: PropTypes.arrayOf(PropTypes.shape({
        name: PropTypes.string,
        url: PropTypes.string
    })),
    label: PropTypes.string,
    showLabel: PropTypes.bool
};
const ButtonFactory = ({ iconName, shouldSwitchMenuIcon, formatMessage, menuButtonLabel, icon, onButtonClick, hrefLink, trackSearchSource, isHamburgerMenuHidden }) => {
    // factory method to get the appropriate button component
    let componentContent;
    if (iconName === 'menu' && !isHamburgerMenuHidden) {
        componentContent = (React.createElement(Button, { className: classnames({
                'navigation-button--hide-on-desktop': shouldSwitchMenuIcon
            }), label: menuButtonLabel, ButtonIcon: icon, isIconButton: true, role: "button", "aria-label": menuButtonLabel, onClickHandler: onButtonClick }));
    }
    else {
        // for non menu items, i.e search icons
        componentContent = (React.createElement(Button, { className: classnames({
                'navigation-button--hide-on-desktop': shouldSwitchMenuIcon
            }), ariaLabel: formatMessage(translations.searchLabel), label: formatMessage(translations.searchLabel), ButtonIcon: icon, isIconButton: true, inputKind: "link", href: hrefLink, onClickHandler: trackSearchSource('icon') }));
    }
    return componentContent;
};
/**
 * UtilityNavigation
 * A list of utility items
 *
 * @param {object} props - React props
 * @param {object} props.accountProps - Required properties for the account drop down
 * @param {string} [props.ariaLabel] - Optional string to set a aria-label attribute
 * @param {string} [props.buttonIcon] - Optional boolean to set button icon
 * @param {boolean} props.hasInvertedSubscribeButton - Whether subscribe button has inverted colors
 * @param {boolean} props.hasPrimaryLink - Display primary promo item across all breakpoints
 * @param {boolean} props.hideNavButton - Hide Utility Nav Button across all breakpoints
 * @param {string} [props.hidePrimaryLink] - Breakpoint to hide primary promo item at
 * @param {string} props.homeLocation - The default value for the market switcher dropdown
 * @param {Array} [props.internationalSites] - The name and url list of options for the Market Switcher
 * @param {boolean} [props.isAccountsEnabled] - If `true` enable account support
 * @param {boolean} [props.isBrandLogoCenteredOnDesktop] - If true, then show only 2 items on navbar right for medium device
 * @param {object} [props.journey] - journey object
 * @param {Array} [props.links] - Promotion navigation items - eg. "Newsletter"
 * @param {string} [props.marketSwitcherAssistiveLabel] - Optional assistive label for the market switcher drop down - defaults to "Country"
 * @param {Function} props.onButtonClick - Callback when menu button is fired
 * @param {string} [props.signInLabel] - Optional label for the sign in link - defaults to "Sign In"
 * @param {boolean} [props.shouldSwitchMenuIcon] - Optional prop that helps to determine the hamburger menu to be switched to search icon if the viewport is larger than 1024px
 * @param {object} props.user - required user object
 * @param {string} [props.hrefLink] - url to be redirected when search icon is clicked
 * @param {boolean} [props.hasCart] - Optional prop to determine if Shopify Cart needs to be shown
 * @param {boolean} props.isShopifyCartWidgetOpen - status of whether shopify cart is open
 * @param {Function} props.setShopifyWidgetState - function to set shopify widget state to either false or true
 * @param {boolean} [props.isHamburgerMenuHidden] - prop for hiding the Hamburger menu
 * @param {bool} [props.isInverted] - Optional apply the inverted theme
 *
 */
const UtilityNavigation = ({ ariaLabel, accountProps, buttonIcon, componentConfig, isAccountsEnabled, isBrandLogoCenteredOnDesktop, isHamburgerMenuHidden = false, hasInvertedSubscribeButton, hasPrimaryLink, hideNavButton = false, hidePrimaryLink, homeLocation, hrefLink = '', internationalSites, isInverted = false, journey, links, marketSwitcherAssistiveLabel, onButtonClick, signInLabel, shouldSwitchMenuIcon = false, user, hasCart, isShopifyCartWidgetOpen = false, setShopifyWidgetState, theme }) => {
    const { formatMessage } = useIntl();
    const utilityLinks = links ? links.slice(0, MAX_LINKS) : [];
    const hasUtilityLinks = utilityLinks?.length > 0;
    const hasMarketSwitcher = internationalSites?.length > 0;
    const hasAccounts = isAccountsEnabled && user;
    const [shopifyCartQuantity, setShopifyCartQuantity] = useState(0);
    const [windowSize, setWindowSize] = useState({
        width: undefined,
        height: undefined
    });
    const hasJourneyUnit = !!journey?.url;
    const handleResize = () => {
        setWindowSize({
            width: window.innerWidth,
            height: window.innerHeight
        });
    };
    const useWindowSize = () => {
        useEffect(() => {
            if (true) {
                window.addEventListener('resize', handleResize);
                handleResize();
                return () => window.removeEventListener('resize', handleResize);
            }
            return '';
        }, []);
        return windowSize;
    };
    const size = useWindowSize();
    const { icon, iconName } = getNavIcon(shouldSwitchMenuIcon, buttonIcon, size, isHamburgerMenuHidden);
    const trackSearchSource = (source) => {
        return () => googleAnalytics.emitGoogleTrackingEvent(`navigation-site-search-${source}`);
    };
    const menuButtonLabel = formatMessage(translations.menuButtonLabel);
    const onCartDataChange = (cartItems) => {
        const quantity = cartItems?.length || undefined;
        setShopifyCartQuantity(quantity === undefined ? 0 : quantity);
        if (isShopifyCartWidgetOpen) {
            document.body.style.overflow = 'hidden';
        }
        else {
            document.body.style.overflow = 'unset';
        }
    };
    const handleToggleShopifyCart = () => {
        setShopifyWidgetState(!isShopifyCartWidgetOpen);
    };
    return (React.createElement(Wrapper, { "aria-label": ariaLabel },
        hasMarketSwitcher && !shouldSwitchMenuIcon && (React.createElement(MarketsDropdown, { assistiveLabel: marketSwitcherAssistiveLabel ||
                formatMessage(translations.marketSwitcherLabel), hasDivider: !hasInvertedSubscribeButton && !shouldSwitchMenuIcon, internationalSites: internationalSites, label: homeLocation.name, showLabel: !!homeLocation.name })),
        hasUtilityLinks && (React.createElement(Links, { utilityLinks: utilityLinks, hasInvertedSubscribeButton: hasInvertedSubscribeButton, hasSiblings: (hasMarketSwitcher || hasAccounts) && !shouldSwitchMenuIcon, hasJourneyUnit: hasJourneyUnit, hasPrimaryLink: hasPrimaryLink, hidePrimaryLink: hidePrimaryLink, isBrandLogoCenteredOnDesktop: isBrandLogoCenteredOnDesktop, shouldHideMenuOnMobile: shouldSwitchMenuIcon, theme: theme })),
        hasAccounts && (React.createElement(AccountDropdown, { accountProps: accountProps, isInverted: isInverted, assistiveLabel: formatMessage(translations.accountDropdownAssistiveLabel), label: formatMessage(translations.accountDropdownLabel), signInLabel: signInLabel || formatMessage(translations.signInLabel), signOutLabel: get(componentConfig, 'SignOutButton.settings.buttonLabel') ||
                formatMessage(translations.signOutLabel), user: user })),
        !hideNavButton && (React.createElement(ButtonFactory, { iconName: iconName, shouldSwitchMenuIcon: shouldSwitchMenuIcon, formatMessage: formatMessage, menuButtonLabel: menuButtonLabel, icon: icon, onButtonClick: onButtonClick, hrefLink: hrefLink, isHamburgerMenuHidden: isHamburgerMenuHidden, trackSearchSource: trackSearchSource })),
        hasCart && (React.createElement(SiteHeaderCart, { onClick: handleToggleShopifyCart },
            React.createElement(SiteHeaderCartButton, { ariaLabel: `${shopifyCartQuantity} ${formatMessage(translations.shoppingCartAriaLabel)}`, label: formatMessage(translations.shoppingCartLabel), ButtonIcon: Shopping, isIconButton: true, inputKind: "link", tabIndex: 0 }),
            shopifyCartQuantity > 0 && (React.createElement(SiteHeaderCartQuantity, null, shopifyCartQuantity)))),
        React.createElement(ShopifyCart, { showShopifyCart: isShopifyCartWidgetOpen, closeButtonCallback: handleToggleShopifyCart, onCartDataChange: onCartDataChange })));
};
UtilityNavigation.propTypes = {
    accountProps: PropTypes.object,
    ariaLabel: PropTypes.string,
    buttonIcon: PropTypes.string,
    componentConfig: PropTypes.object,
    hasCart: PropTypes.bool,
    hasInvertedSubscribeButton: PropTypes.bool,
    hasPrimaryLink: PropTypes.bool,
    hideNavButton: PropTypes.bool,
    hidePrimaryLink: PropTypes.oneOf(sizesAscending),
    homeLocation: PropTypes.shape({
        name: PropTypes.string
    }),
    hrefLink: PropTypes.string,
    internationalSites: PropTypes.arrayOf(PropTypes.shape({
        name: PropTypes.string,
        url: PropTypes.string
    })),
    isAccountsEnabled: PropTypes.bool,
    isBrandLogoCenteredOnDesktop: PropTypes.bool,
    isHamburgerMenuHidden: PropTypes.bool,
    isInverted: PropTypes.bool,
    isShopifyCartWidgetOpen: PropTypes.bool,
    journey: PropTypes.shape({
        url: PropTypes.string
    }),
    links: PropTypes.array,
    marketSwitcherAssistiveLabel: PropTypes.string,
    onButtonClick: PropTypes.func,
    setShopifyWidgetState: PropTypes.func,
    shouldSwitchMenuIcon: PropTypes.bool,
    signInLabel: PropTypes.string,
    theme: PropTypes.string,
    user: PropTypes.shape({
        isAuthenticated: PropTypes.bool.isRequired
    })
};
UtilityNavigation.displayName = 'UtilityNavigation';
const mapStateToProps = ({ isShopifyCartWidgetOpen, journey }) => ({
    isShopifyCartWidgetOpen,
    journey
});
const mapDispatchToProps = (dispatch) => {
    const { setShopifyWidgetState } = createActions(dispatch);
    return {
        setShopifyWidgetState
    };
};
module.exports = connector(connect(mapStateToProps, mapDispatchToProps)(UtilityNavigation), {
    keysToPluck: ['componentConfig']
});
//# sourceMappingURL=UtilityNavigation.js.map

/***/ }),

/***/ 96962:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const UtilityNavigation = __webpack_require__(36780);
module.exports = asConfiguredComponent(UtilityNavigation, 'UtilityNavigation');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 60574:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.SiteHeaderCart = exports.SiteHeaderCartQuantity = exports.SiteHeaderCartButton = exports.UtilityNavigationDropdown = exports.afterDivider = exports.beforeDivider = exports.UtilityNavigationButton = exports.Wrapper = void 0;
const { default: styled } = __webpack_require__(92168);
const { calculateSpacing, getColorToken } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { resolveMenuKey, isInverted } = __webpack_require__(70698);
const { SiteHeaderButton } = __webpack_require__(27985);
const Button = __webpack_require__(73730);
const { SiteNavigationSearch } = __webpack_require__(49829);
exports.Wrapper = styled.nav.withConfig({
    displayName: 'UtilityNavigationWrapper'
}) `
  justify-self: self-end;
  display: flex;
  align-items: center;
`;
exports.UtilityNavigationButton = styled(SiteHeaderButton).withConfig({
    displayName: 'UtilityNavigationButton'
}) `
  .icon-menu {
    padding: 8px;
    width: initial;
    height: initial;
  }

  .icon-search {
    transform: scale(0.6);
  }

  .icon-close {
    padding: 8px;
  }

  path {
    stroke: ${({ theme }) => getColorToken(theme, isInverted(theme)
    ? 'colors.consumption.lead.inverted.link'
    : 'colors.foundation.collapsed-menu.nav-link.default')};
  }
`;
const themeBackgroundColor = (theme) => getColorToken(theme, 'colors.foundation.menu.dividers');
const divider = (theme) => `
    display: block;
    content: '';
    height: ${calculateSpacing(4)};
    width: 1px;
    background-color: ${themeBackgroundColor(theme)};
    top: 50%;
    margin-top: -${calculateSpacing(2)};
    position: absolute;
`;
const beforeDivider = (theme) => `
@media (min-width: ${BREAKPOINTS.md}) {
  &::before {
    ${divider(theme)}
    left: 0;
  }
}
`;
exports.beforeDivider = beforeDivider;
const afterDivider = (theme) => `
@media (min-width: ${BREAKPOINTS.md}) {
  &::after {
    ${divider(theme)}
    right: 0;
  }
}
`;
exports.afterDivider = afterDivider;
exports.UtilityNavigationDropdown = styled.div.withConfig({
    displayName: 'UtilityNavigationDropdown'
}) `
  position: relative;
  ${({ theme, hasDivider }) => hasDivider && (0, exports.afterDivider)(theme)};
`;
exports.SiteHeaderCartButton = styled(Button.Utility).withConfig({
    displayName: 'SiteHeaderCartButton'
}) `
  position: absolute;
  /* stylelint-disable-next-line declaration-no-important */
  && {
    margin: ${calculateSpacing(2)} 0 0 ${calculateSpacing(2)};
  }
  ${SiteNavigationSearch()};
  padding-bottom: ${calculateSpacing(2)};

  @media (max-width: ${BREAKPOINTS.md}) {
    margin-right: 0;
  }
`;
exports.SiteHeaderCartQuantity = styled.span.withConfig({
    displayName: 'SiteHeaderCartQuantity'
}) `
  position: absolute;
  top: 2rem;
  right: -0.25rem;
  align-items: center;
  z-index: 1;
  border-radius: 50%;
  background-color: ${({ theme }) => getColorToken(theme, resolveMenuKey(theme, isInverted(theme)
    ? 'colors.background.white'
    : 'colors.background.black'))};
  width: 17.25px;
  height: 17.25px;
  text-align: center;
  text-transform: uppercase;
  line-height: 17px;
  letter-spacing: 1px;
  color: ${({ theme }) => getColorToken(theme, resolveMenuKey(theme, isInverted(theme)
    ? 'colors.background.black'
    : 'colors.background.white'))};
  font-size: 10px;

  @media (max-width: ${BREAKPOINTS.md}) {
    left: 2.25rem;
  }

  &:hover,
  &:focus {
    border: 0;
    background-color: ${getColorToken('colors.foundation.icon.hover')};
  }
`;
exports.SiteHeaderCart = styled.div.withConfig({
    displayName: 'SiteHeaderCart'
}) `
  position: relative;

  svg path {
    fill: ${({ theme }) => getColorToken(theme, resolveMenuKey(theme, isInverted(theme)
    ? 'colors.consumption.lead.inverted.link'
    : 'colors.background.black'))};
  }

  &:hover,
  &:focus {
    border: 0;
    background-color: transparent;
    cursor: pointer;

    span {
      background-color: ${getColorToken('colors.foundation.icon.hover')};
    }

    svg path {
      fill: ${({ theme }) => getColorToken(theme, isInverted(theme)
    ? 'colors.consumption.lead.inverted.link-hover'
    : 'colors.foundation.icon.hover')};
    }
  }
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 16696:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    accountDropdownAssistiveLabel: {
        id: 'UtilityNavigation.AccountDropdownAssistive',
        defaultMessage: 'Account Navigation',
        description: 'ARIA label for account navigation'
    },
    accountDropdownLabel: {
        id: 'UtilityNavigation.AccountDropdown',
        defaultMessage: 'Account',
        description: 'ARIA label for account navigation dropdown'
    },
    marketSwitcherLabel: {
        id: 'UtilityNavigation.MarketSwitcherLabel',
        defaultMessage: 'Country',
        description: 'ARIA label for market switcher',
        isConfigurable: true
    },
    menuButtonLabel: {
        id: 'UtilityNavigation.UtilityNavigationButton',
        defaultMessage: 'Open Navigation Menu',
        description: 'ARIA label for account navigation button'
    },
    signInLabel: {
        id: 'UtilityNavigation.SignInLabel',
        defaultMessage: 'Sign In',
        description: 'ARIA label for user account sign in button',
        isConfigurable: true
    },
    searchLabel: {
        id: 'UtilityNavigation.SearchLabel',
        defaultMessage: 'Search',
        description: 'ARIA label for search link'
    },
    shoppingCartLabel: {
        id: 'UtilityNavigation.ShoppingCartLabel',
        defaultMessage: 'Shopping Cart',
        description: 'Label for Shopping cart'
    },
    shoppingCartAriaLabel: {
        id: 'UtilityNavigation.ShoppingCartAriaLabel',
        defaultMessage: 'item(s) in Cart',
        description: 'ARIA label for Shopping cart'
    },
    signOutLabel: {
        id: 'UtilityNavigation.SignOut',
        defaultMessage: 'Sign Out',
        description: 'ARIA label for user account sign out button'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 12911:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const { asThemedComponent } = __webpack_require__(20223);
const VariedSiteHeader = __webpack_require__(6369);
module.exports = asThemedComponent(asConfiguredComponent(VariedSiteHeader, 'SiteHeader'));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 79483:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    utilityNavigationLabel: {
        id: 'SiteHeader.UtilityNavigation',
        defaultMessage: 'Utility',
        description: 'ARIA label for the whole utility navigation'
    },
    primaryNavigationLabel: {
        id: 'SiteHeader.ScrollingNavigation',
        defaultMessage: 'Primary',
        description: 'ARIA label for the whole primary navigation'
    },
    drawerLabel: {
        id: 'StandardNavigation.Drawer',
        defaultMessage: 'Navigation and Sign Up Menu',
        description: 'ARIA label for the drawer modal'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 6369:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const SiteHeader = __webpack_require__(29001);
SiteHeader.TopRule = asVariation(SiteHeader, 'TopRule', {}, { hasTopRule: true });
SiteHeader.DrawerEnabled = asVariation(SiteHeader, 'DrawerEnabled', {
    isDrawerEnabled: true
});
module.exports = SiteHeader;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 16871:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const classNames = __webpack_require__(32485);
const { SmartComponentWrapper } = __webpack_require__(31257);
const { TrackComponentChannel } = __webpack_require__(78788);
const SmartContainer = __webpack_require__(20555);
const { PresetProvider } = __webpack_require__(6009);
const { connector } = __webpack_require__(57744);
/**
 * SmartComponent component
 *
 * @param {object} props - React props
 * @param {string} [props.id] - id of the container
 * @param {string} [props.className] - class name for the component
 * @param {object} [props.themeExtensions] - Extensions to add to theme object
 * @returns {ReactElement} <div>
 */
const SmartComponent = ({ id, className, themeExtensions = {}, ...props }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SmartComponent'
        });
    }, []);
    return (React.createElement(SmartComponentWrapper, { className: classNames('smart-component', className) },
        React.createElement(PresetProvider, { id: id, themeExtensions: themeExtensions },
            React.createElement(SmartContainer, { ...props }))));
};
SmartComponent.propTypes = {
    className: PropTypes.string,
    dangerousHed: PropTypes.string,
    id: PropTypes.string,
    themeExtensions: PropTypes.shape({
        componentStylePools: PropTypes.objectOf(PropTypes.objectOf(PropTypes.func))
    })
};
SmartComponent.displayName = 'SmartComponent';
module.exports = connector(SmartComponent, {
    keysToPluck: ['bundle']
});
//# sourceMappingURL=SmartComponent.js.map

/***/ }),

/***/ 30583:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(16871);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 62923:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { SmartItem, SmartContainerWrapper, SmartContainerHeader, SmartContainerHeaderImage, SmartContainerHeaderHed, SmartContainerHeaderDek, SmartContainerContent, SmartContainerFooter, SmartContainerAd } = __webpack_require__(81278);
const ResponsiveAsset = __webpack_require__(73275);
const smartItemImplementations = __webpack_require__(64587);
const CarouselFooter = __webpack_require__(87797);
const { useCarouselDots } = __webpack_require__(94060);
const { useTrackingAnalytics } = __webpack_require__(82489);
/**
 * SmartContainer component
 *
 * @param {object} props - React Props
 * @param {object} props.bundle - Container bundle data
 * @param {string} [props.dangerousDek] - Optional HTML (dangerously set) dek/sub-headline of content
 * @param {string} props.dangerousHed - HTML (dangerously set) hed/headline of content
 * @param {object} [props.header] - Possible style props for smart-container header
 * @param {object} [props.image] - Site image of the bundle
 * @param {Array}  props.items -  Items to display that map to the smart item pattern
 * @param {string|React.ElementType}  [props.itemType] - Item type to use
 * @param {Array}  [props.layout]  - layout configuration for the component
 * @param {Array}  [props.styleSettings]  - style settings for smart container
 * @param {object} [props.itemLayouts] - layout configurations for item component
 * @param {object} [props.itemStyleSettings] - style settings for item component
 * @param {number} props.index - Index of container
 * @param {string} props.template - The containers package type
 * @param {string} props.sectionName - section name
 * @param {boolean} [props.showHeader] - Whether to show header or not
 * @param {boolean} [props.showItemDivider] - Whether to show divider between items or not
 *
 * @returns {ReactElement} <div>
 */
const SmartContainer = ({ bundle, dangerousDek, dangerousHed, header, image, items, itemType = 'StoryUnit', layout = ['river', 'river', 'grid'], styleSettings = [], itemLayouts = {}, itemStyleSettings = {
    default: []
}, index, template, sectionName, showHeader = true, showItemDivider = true }) => {
    const { imageSize, imagePosition, isContributor, softRule } = header || {};
    const contentClassName = `smart-container__content-${index}`;
    const { clickHandler } = useTrackingAnalytics({
        selector: `.${contentClassName}`,
        index,
        template,
        sectionName,
        bundle,
        items
    });
    const { handleScroll, carouselDots, selectedDot, ref: contentRef } = useCarouselDots({
        itemsLength: items.length,
        listen: layout.includes('carousel')
    });
    const ItemImplementation = typeof itemType === 'string'
        ? smartItemImplementations[itemType]
        : itemType;
    return (React.createElement(SmartContainerWrapper, { layout: layout, styleSettings: styleSettings, itemLength: items.length, className: "smart-container__wrapper", onClick: clickHandler, showItemDivider: showItemDivider },
        showHeader && (React.createElement(SmartContainerHeader, { className: "smart-container__header", softRule: softRule },
            image && (React.createElement(SmartContainerHeaderImage, { className: "smart-container__header__image", as: ResponsiveAsset, isLazy: true, ...image, imageAttributes: { 'aria-hidden': true }, imageSize: imageSize, imagePosition: imagePosition, isContributor: isContributor })),
            React.createElement(SmartContainerHeaderHed, { className: "smart-container__header__hed", dangerouslySetInnerHTML: { __html: dangerousHed } }),
            dangerousDek && (React.createElement(SmartContainerHeaderDek, { className: "smart-container__header__dek", dangerouslySetInnerHTML: { __html: dangerousDek } })))),
        React.createElement(SmartContainerContent, { className: contentClassName, onScroll: handleScroll, ref: contentRef },
            items.map((item, index) => {
                const layout = itemLayouts[index] ?? itemLayouts.default;
                const styleSettings = itemStyleSettings[index] ?? itemStyleSettings.default;
                return (React.createElement(SmartItem, { as: ItemImplementation, className: "smart-item", key: index, ...item, layout: layout, styleSettings: styleSettings }));
            }),
            layout[2] === 'river' && (React.createElement(SmartContainerAd, { className: "smart-container__ad" },
                React.createElement("h3", null, "It is a ad section"),
                React.createElement("img", { src: items[0].image.sources.sm.url, alt: "ad" })))),
        React.createElement(SmartContainerFooter, { className: "smart-container__footer", as: CarouselFooter, dotLength: carouselDots, selectedDotIndex: selectedDot, onDotClick: () => null })));
};
SmartContainer.propTypes = {
    bundle: PropTypes.shape({
        containers: PropTypes.array
    }).isRequired,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    header: PropTypes.shape({
        imageSize: PropTypes.oneOf(['icon', 'banner']),
        imagePosition: PropTypes.oneOf(['above', 'below']),
        isContributor: PropTypes.bool,
        softRule: PropTypes.bool
    }),
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    index: PropTypes.number.isRequired,
    itemLayouts: PropTypes.objectOf(PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.oneOf(['dense', 'side-by-side', 'stack'])),
        PropTypes.arrayOf(PropTypes.oneOf(['overlay', 'side-by-side', 'stack']))
    ])),
    items: PropTypes.arrayOf(PropTypes.object).isRequired,
    itemStyleSettings: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.shape({
        inset: PropTypes.bool,
        textAlign: PropTypes.oneOf(['start', 'center', 'end']),
        image: PropTypes.shape({
            inset: PropTypes.bool,
            showBackgroundColor: PropTypes.bool,
            showOutline: PropTypes.bool,
            shape: PropTypes.oneOf(['default', 'circle', 'curved'])
        })
    }))),
    itemType: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
    layout: PropTypes.arrayOf(PropTypes.oneOf(['grid', 'river', 'carousel'])),
    sectionName: PropTypes.string.isRequired,
    showHeader: PropTypes.bool,
    showItemDivider: PropTypes.bool,
    styleSettings: PropTypes.arrayOf(PropTypes.shape({
        fullBleed: PropTypes.bool
    })),
    template: PropTypes.string.isRequired
};
SmartContainer.displayName = 'SmartContainer';
module.exports = SmartContainer;
//# sourceMappingURL=SmartContainer.js.map

/***/ }),

/***/ 45005:
/***/ ((module) => {

function calculateSpan(itemsLength) {
    switch (itemsLength) {
        case 1:
            return 12; // 1 column grid
        case 2:
            return 6; // 2 column grid
        default:
            if (itemsLength % 3 === 0 && itemsLength <= 9) {
                return 4; // 3 column grid
            }
            return 3; // 4 column grid
    }
}
module.exports = {
    calculateSpan
};
//# sourceMappingURL=grid-span-calculator.js.map

/***/ }),

/***/ 20555:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const SmartContainer = __webpack_require__(62923);
const wrappedComponent = asConfiguredComponent(SmartContainer, 'SmartContainer');
module.exports = wrappedComponent;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 81278:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { BaseWrap } = __webpack_require__(76955);
const { injectStyles } = __webpack_require__(37338);
const { BREAKPOINTS } = __webpack_require__(96472);
const { applyGridSpacing, cssVariablesGrid } = __webpack_require__(1123);
const { SmartContainerHeader, SmartContainerHeaderImage, SmartContainerHeaderHed, SmartContainerHeaderDek, SmartContainerContent, SmartContainerFooter, SmartContainerAd, SmartItem } = __webpack_require__(48666);
const stylePool = __webpack_require__(62142);
const SmartContainerWrapper = styled(BaseWrap).withConfig({
    displayName: 'SmartContainerWrapper'
}) `
  margin: 0 auto;
  ${cssVariablesGrid()};
  ${applyGridSpacing('padding')}
  width: 100%;
  max-width: ${BREAKPOINTS.xxl};
  ${({ layout, styleSettings }) => injectStyles('layout', { layout, styleSettings }, stylePool)}

  .small {
    font-variant: small-caps;
    text-transform: lowercase;
    font-style: normal;
  }

  h3 {
    .small {
      font-synthesis-small-caps: none;
    }
  }
`;
module.exports = {
    SmartContainerWrapper,
    SmartContainerHeader,
    SmartContainerHeaderImage,
    SmartContainerHeaderHed,
    SmartContainerHeaderDek,
    SmartContainerContent,
    SmartContainerFooter,
    SmartContainerAd,
    SmartItem
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 48666:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { getColorToken, getDecoration, getColorStyles, calculateSpacing, minScreen, minMaxScreen, maxScreen } = __webpack_require__(26865);
const { BaseWrap, BaseText } = __webpack_require__(76955);
const { minThresholds, maxThresholds } = __webpack_require__(99906);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const iconStyles = css `
  max-width: 48px;
  height: 48px;
`;
const bannerStyles = css `
  max-width: 300px;
  height: auto;
`;
const SmartContainerHeader = styled(BaseWrap).withConfig({
    displayName: 'SmartContainerHeader'
}) `
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: ${calculateSpacing(1)};
  border-top: ${({ theme }) => getDecoration(theme, 'dividerWidth')} solid;
  padding-top: ${calculateSpacing(2)};
  padding-bottom: ${calculateSpacing(6)};
  ${maxScreen(`${maxThresholds.md}px`)} {
    padding-bottom: ${calculateSpacing(4)};
  }
  ${minScreen(`${minThresholds.lg}px`)} {
    gap: ${calculateSpacing(2)};
  }

  ${({ softRule, theme }) => getColorStyles(theme, 'border-top-color', softRule
    ? 'colors.discovery.body.white.border'
    : 'colors.discovery.body.white.divider')};
`;
const SmartContainerHeaderImage = styled.div.withConfig({
    displayName: 'SmartContainerHeaderImage'
}) `
  ${({ imageSize }) => css `
    img {
      ${imageSize === 'icon' ? iconStyles : bannerStyles}
    }
  `}

  ${({ imagePosition }) => imagePosition === 'below'
    ? css `
          order: 3;
          padding-bottom: 0;
        `
    : css `
          &:not(picture) {
            ${minMaxScreen(0, `${maxThresholds.md}px`)} {
              padding-bottom: ${calculateSpacing(1)};
            }
          }
        `}

  ${({ isContributor, theme }) => isContributor
    ? css `
          ${ResponsiveImageContainer} {
            border-radius: 50%;
            background: ${getColorToken(theme, 'colors.discovery.lead.secondary.background')};
          }
        `
    : ``};
`;
const SmartContainerHeaderHed = styled(BaseText).withConfig({
    displayName: 'SmartContainerHeaderHed'
}) ``;
SmartContainerHeaderHed.defaultProps = {
    as: 'h2',
    colorToken: 'colors.discovery.body.white.heading',
    textAlign: 'center',
    typeIdentity: 'typography.definitions.discovery.subhed-section-primary'
};
const SmartContainerHeaderDek = styled(BaseText).withConfig({
    displayName: 'SmartContainerHeaderDek'
}) ``;
SmartContainerHeaderDek.defaultProps = {
    colorToken: 'colors.discovery.body.white.heading',
    textAlign: 'center',
    typeIdentity: 'typography.definitions.discovery.description-page'
};
const SmartContainerContent = styled(BaseWrap).withConfig({
    displayName: 'SmartContainerContent'
}) ``;
const SmartContainerFooter = styled(BaseWrap).withConfig({
    displayName: 'SmartContainerFooter'
}) `
  display: none;
`;
const SmartContainerAd = styled(BaseWrap).withConfig({
    displayName: 'SmartContainerAd'
}) `
  display: none;
`;
const SmartItem = styled.div.withConfig({
    displayName: 'SmartItem'
}) `
  position: relative;
`;
module.exports = {
    SmartContainerHeader,
    SmartContainerHeaderImage,
    SmartContainerHeaderHed,
    SmartContainerHeaderDek,
    SmartContainerContent,
    SmartContainerFooter,
    SmartContainerAd,
    SmartItem
};
//# sourceMappingURL=style-element.js.map

/***/ }),

/***/ 62142:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { css } = __webpack_require__(92168);
const { minScreen, minMaxScreen, calculateSpacing, getColorToken, maxScreen } = __webpack_require__(26865);
const { minThresholds, maxThresholds } = __webpack_require__(99906);
const { SmartContainerContent, SmartContainerFooter, SmartContainerAd, SmartItem } = __webpack_require__(48666);
const { calculateSpan } = __webpack_require__(45005);
const { SmartItemAssetContainer } = __webpack_require__(78465);
const { applyGridSpacing } = __webpack_require__(1123);
const Divider = css `
  ${SmartItemAssetContainer}:not(picture) {
    overflow: visible;

    &::after {
      display: block;
      position: absolute;
      top: 0;
      right: calc(-1 * var(--grid-gap) / 2);
      background-color: ${getColorToken('colors.discovery.body.white.border')};
      width: 1px;
      height: 100%;
      content: '';
    }
  }
`;
const commonLayoutStyles = ({ styleSettings }) => css `
  ${styleSettings.fullBleed &&
    css `
    ${applyGridSpacing('padding', true)};
    max-width: none;
  `}
`;
const gridLayout = (_, styleSettings = {}) => css `
  --smart-container-layout: 'grid';
  ${commonLayoutStyles({ styleSettings })}
  ${SmartContainerContent} {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    ${minScreen(`${minThresholds.xl}px`)} {
      grid-template-columns: repeat(12, 1fr);
    }
    gap: var(--grid-gap);
  }
  ${SmartItem} {
    width: auto;
    ${({ itemLength, showItemDivider }) => {
    const spanSize = calculateSpan(itemLength);
    let nthChild;
    if (spanSize === 4) {
        nthChild = '3n';
    }
    else if (spanSize === 3) {
        nthChild = '4n';
    }
    else {
        nthChild = `${itemLength}n`;
    }
    return css `
        grid-column: span ${spanSize};
        ${minScreen(`${minThresholds.xl}px`)} {
          &:not(:nth-child(${nthChild}), :last-child) {
            ${showItemDivider && Divider}
          }
        }
      `;
}}
  }
`;
const carouselLayout = (_, styleSettings = {}) => css `
  --smart-container-layout: 'carousel';
  --grid-gap: ${calculateSpacing(4)};

  ${commonLayoutStyles({ styleSettings })}
  ${SmartContainerContent} {
    display: flex;
    ${maxScreen(`${maxThresholds.xxl}px`)} {
      margin-right: calc(-1 * var(--grid-margin));
      margin-left: calc(-1 * var(--grid-margin));
      padding-right: var(--grid-margin);
      padding-left: var(--grid-margin);
    }
    padding-bottom: ${calculateSpacing(3)};
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--grid-gap);
  }

  ${SmartItem} {
    flex-shrink: 0;
    align-self: stretch;
    scroll-snap-align: center;

    ${({ showItemDivider }) => showItemDivider &&
    css `
        &:not(:last-child) {
          ${Divider}
        }
      `}
  }

  ${SmartContainerFooter} {
    display: flex;
  }

  ${minMaxScreen(0, `${maxThresholds.md}px`)} {
    ${SmartItem} {
      width: 70%;
    }
  }
  ${minMaxScreen(`${minThresholds.lg}px`, `${maxThresholds.lg}px`)} {
    ${SmartItem} {
      width: 38%;
    }
  }
  ${minScreen(`${minThresholds.xl}px`)} {
    ${SmartItem} {
      width: calc(24% - ${calculateSpacing(4)});
    }
  }
`;
const riverLayout = (_, styleSettings = {}) => css `
  --smart-container-layout: 'river';
  --margin: ${calculateSpacing(1)};
  --padding: ${calculateSpacing(2)};
  ${commonLayoutStyles({ styleSettings })}
  ${SmartContainerContent} {
    ${SmartItem}.story-unit {
      border-bottom: 1px solid
        ${getColorToken('colors.discovery.body.white.border')};
      padding: var(--padding) 0;

      &:first-child {
        padding-top: 0;
      }

      &:last-child {
        border-bottom: none;
        padding-bottom: 0;
      }
    }
  }

  ${minScreen(`${minThresholds.xl}px`)} {
    ${SmartContainerContent} {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      ${SmartContainerAd} {
        display: inline-block;
        grid-column: 9/13;
        grid-row: 1 / span 4;
        margin: var(--margin);
        padding: var(--padding);
      }
      ${SmartItem} {
        grid-column: span 8;
      }
    }
  }
`;
const stylePool = {
    grid: gridLayout,
    carousel: (_, styleSettings) => css `
    ${({ itemLength }) => {
        /**
          When there is less than 4 items, from desktop breakpoint there is no enough items to display as carousel.
          So using grid layout to avoid pagination dots and additional right spacing.
        */
        if (itemLength > 4) {
            return carouselLayout('', styleSettings);
        }
        return css `
        ${minMaxScreen(0, `${maxThresholds.lg}px`)} {
          ${carouselLayout('', styleSettings)}
        }
        ${minScreen(`${minThresholds.xl}px`)} {
          ${gridLayout('', styleSettings)}
        }
      `;
    }}
  `,
    river: riverLayout
};
module.exports = stylePool;
//# sourceMappingURL=style-pool.js.map

/***/ }),

/***/ 96872:
/***/ ((module) => {

/**
 * Filters out containers with the template 'verso-mid-content-ad' and determines
 *  the position of a container.
 * @param {Array} containers - Array of container objects.
 * @param {number} index - Index of the container in the original array.
 * @returns {string} - The position of the container in the filtered list in the format 'x/y'.
 */
function getPackagePosition(containers, index) {
    const packageContainers = containers.filter((container) => container.template !== 'verso-mid-content-ad');
    const newIndex = packageContainers.indexOf(containers[index]);
    return `${newIndex + 1}/${packageContainers.length}`;
}
/**
 * Maps an index to a positional label ('top', 'middle', 'bottom') based on the total number of containers.
 * If the container count is 3 or less, it directly returns the corresponding position from a predefined array.
 * For larger container counts, it divides the indices into three equal parts and assigns 'top', 'middle', or 'bottom' accordingly.
 * This function helps in categorizing positions within a varying number of containers.
 * @param {number} index - The index of the container which is needed to map.
 * @param {number} containerCount - The total number of containers.
 * @returns {string} - The position label corresponding to the index.
 */
function mapIndexToPosition(index, containerCount) {
    if (containerCount <= 3) {
        return (['top', containerCount === 2 ? 'bottom' : 'middle', 'bottom'][index] ||
            'bottom');
    }
    const firstThirdIndex = Math.floor(containerCount / 3);
    const secondThirdIndex = 2 * firstThirdIndex;
    let position;
    if (index < firstThirdIndex) {
        position = 'top';
    }
    else if (index < secondThirdIndex) {
        position = 'middle';
    }
    else {
        position = 'bottom';
    }
    return position;
}
/**
 * Transforms an array of items into a new array of objects with specific properties.
 * @param {Array} items - The array of items to transform.
 * @param {object} window - window object data.
 * @returns {Array} - The transformed array of objects.
 */
const transformItems = (items, window) => {
    return items.map((item) => ({
        content_id: item.copilotID || item.id,
        content_title: item.dangerousHed,
        content_type: item.contentType,
        content_url: new URL(item.url, window.location.origin)
    }));
};
/**
 * Creates event data for tracking or analytics purposes for snowplow.
 * @param {string} type - The type of the event.
 * @param {string} label - The label for the event.
 * @param {string} subject - The subject of the event.
 * @param {Array} items - The array of items related to the event.
 * @param {number} index - The index of the event.
 * @param {number} containerCount - The total number of containers.
 * @param {string} presetName - It is a preset name.
 * @returns {object} - Transformed event data object.
 */
const createEventData = (type, label, subject, items, index, containerCount, presetName) => {
    return {
        type,
        label,
        subject,
        items,
        placement: mapIndexToPosition(index, containerCount),
        index,
        total_index: containerCount,
        subject_id: presetName
    };
};
module.exports = {
    getPackagePosition,
    transformItems,
    createEventData,
    mapIndexToPosition
};
//# sourceMappingURL=transform-data.js.map

/***/ }),

/***/ 82489:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.useTrackingAnalytics = void 0;
const React = __webpack_require__(96540);
const { emitGoogleTrackingEvent, emitUniqueGoogleTrackingEvent } = __webpack_require__(37402);
const { useViewportObserver } = __webpack_require__(55030);
const { createEventData, transformItems, getPackagePosition } = __webpack_require__(96872);
const { PresetContext } = __webpack_require__(6009);
const { trackNavigationEvent } = __webpack_require__(14307);
/**
 * This hook is used to add analytics to smart components
 * This hook does
 * 1. Impression tracking for a smart component
 * 2. Expose a click handler to be used for click tracking for smart component items
 *
 * @param {object} params - useTrackingAnalytics hook parameters
 * @param {object} params.selector - selector for the element to be observed
 * @param {number} params.index - index of the container
 * @param {string} params.template - container name
 * @param {string} params.sectionName - section name
 * @param {string} params.bundle -  present bundle
 * @param {object} params.items - items of a containers present in current bundle
 * @returns {object} - Object containing click handler to perform click tracking
 */
const useTrackingAnalytics = ({ selector, index, template, sectionName, bundle, items }) => {
    const context = React.useContext(PresetContext);
    const { containers = [] } = bundle || {};
    const containerData = React.useMemo(() => ({
        preset_type: context.presetName || 'none',
        package_type: template,
        section_name: sectionName,
        package_position: getPackagePosition(containers, index)
    }), [containers, context.presetName, sectionName, index, template]);
    const packageContainers = containers.filter((container) => container.template !== 'verso-mid-content-ad');
    useViewportObserver(selector, undefined, (isInViewport, cleanup) => {
        const transformedItems = transformItems(items, window);
        if (isInViewport) {
            emitUniqueGoogleTrackingEvent('package-impression', containerData);
            const eventData = createEventData('impression', sectionName, template, transformedItems, index, packageContainers.length, context.presetName || 'none');
            trackNavigationEvent(eventData);
            cleanup();
        }
    });
    const clickHandler = React.useCallback((event) => {
        const { target } = event;
        const smartItem = target.closest('.smart-item');
        const tout = target.closest('.smart-item--tout');
        let toutLink;
        const id = smartItem.getAttribute('id');
        const item = items.find((item) => item.id === id);
        if (tout) {
            toutLink = target.getAttribute('href');
        }
        const transformedItems = transformItems([item], window);
        const eventData = createEventData('click', sectionName, template, transformedItems, index, packageContainers.length, context.presetName || 'none');
        if (smartItem) {
            const smartItemHedLink = smartItem.querySelector('.smart-item__hed-link');
            emitGoogleTrackingEvent('package-interaction', {
                ...containerData,
                url: toutLink || smartItemHedLink?.href,
                title: smartItemHedLink?.innerText
            });
        }
        trackNavigationEvent(eventData);
    }, [
        containerData,
        sectionName,
        template,
        index,
        context,
        packageContainers,
        items
    ]);
    return { clickHandler };
};
exports.useTrackingAnalytics = useTrackingAnalytics;
//# sourceMappingURL=use-tracking-analytics.js.map

/***/ }),

/***/ 52386:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { SmartItemAssetContainer } = __webpack_require__(78465);
const ResponsiveAsset = __webpack_require__(86157);
const { SummaryItemImageIcon, SummaryItemFloatingIcon } = __webpack_require__(14207);
const { getIconComponent } = __webpack_require__(77000);
const HeadphoneIcon = __webpack_require__(77818);
/**
 * Smart Item asset
 * @param {object} props - React Props
 * @param {Array} [props.styleSettings] - style settings for the smart Item asset
 * @param {string} [props.className] - className to pass to the container
 * @param {boolean} [props.isContributor] - Whether the image is a contributor
 * @param {string} [props.insetType] - Type of inset style to apply to asset
 * @param {boolean} [props.isLazy] - is Lazy Loading for the image is true except Top story
 * @param {string} [props.signalType] - Specifying the icon to be displayed.
 * @param {object} [props.actionBarConfig] - Config for Actionbar
 * @param {boolean} [props.shouldHideIcon] - Flag to show or hide icon
 * @param {object} [props.variationsProp] - Variation props of the Summary Item variation
 * @param {string} [props.contentCategory] - Content type
 * @returns {ReactElement} <div>
 */
function SmartItemAsset({ styleSettings, className, isContributor, insetType, isLazy = true, signalType, actionBarConfig, shouldHideIcon, variationsProp, contentCategory, ...props }) {
    const Icon = getIconComponent(contentCategory, variationsProp?.layoutPlacement);
    const hasAudioTag = variationsProp?.hasAudioTag;
    return (React.createElement(SmartItemAssetContainer, { className: className, styleSettings: styleSettings, isContributor: isContributor, insetType: insetType },
        React.createElement(ResponsiveAsset, { shouldHoldImageSpace: true, isLazy: isLazy, signalType: signalType, actionBarConfig: actionBarConfig, ...props }),
        Icon && !shouldHideIcon && (React.createElement(SummaryItemImageIcon, { className: 'summary-item__icon-button', ButtonIcon: Icon, inputKind: "text", isIconButton: true, label: "icon" })),
        hasAudioTag && (React.createElement(SummaryItemFloatingIcon, { className: "summary-item__icon-floating" },
            React.createElement(HeadphoneIcon, null)))));
}
SmartItemAsset.propTypes = {
    ...ResponsiveAsset.propTypes,
    actionBarConfig: PropTypes.object,
    className: PropTypes.string,
    contentCategory: PropTypes.string,
    insetType: PropTypes.string,
    isContributor: PropTypes.bool,
    isLazy: PropTypes.bool,
    shouldHideIcon: PropTypes.bool,
    signalType: PropTypes.string,
    styleSettings: PropTypes.arrayOf(PropTypes.shape({
        inset: PropTypes.bool,
        showBackgroundColor: PropTypes.bool,
        showOutline: PropTypes.bool,
        shape: PropTypes.oneOf(['default', 'circle', 'curved'])
    })),
    variationsProp: PropTypes.object
};
SmartItemAsset.displayName = 'SmartItemAsset';
module.exports = SmartItemAsset;
//# sourceMappingURL=SmartItemAsset.js.map

/***/ }),

/***/ 34574:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const SmartItemAsset = __webpack_require__(52386);
module.exports = SmartItemAsset;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 78465:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { BaseWrap } = __webpack_require__(76955);
const { injectStyles } = __webpack_require__(37338);
const styleFunction = __webpack_require__(71747);
const { contributorIconStyles } = __webpack_require__(13983);
const { ActionBarWrapper } = __webpack_require__(11586);
const { calculateSpacing } = __webpack_require__(26865);
const { ResponsiveCartoonCaption, ResponsiveCartoonCredit } = __webpack_require__(77527);
const SmartItemAssetContainer = styled(BaseWrap).withConfig({
    displayName: 'SmartItemAssetContainer'
}) `
  ${({ styleSettings }) => {
    return (styleSettings &&
        injectStyles('styleSettings', { styleSettings }, styleFunction));
}}

  ${ActionBarWrapper} {
    position: absolute;
    right: ${calculateSpacing(0.75)};
    bottom: ${calculateSpacing(0.75)};
    z-index: 1;

    ${({ isContributor }) => isContributor &&
    `
     right: ${calculateSpacing(-0.75)};
     bottom: 0; 
     &::before {
      border-radius: 50%;
     }
    `}
  }

  .responsive-asset {
    ${({ isContributor }) => isContributor && contributorIconStyles};
  }

  .responsive-asset,
  .responsive-clip {
    height: 100%;
  }

  .responsive-clip {
    display: block;
  }

  .responsive-cartoon {
    height: 100%;
    ${ResponsiveCartoonCaption}, ${ResponsiveCartoonCredit} {
      display: none;
    }
  }
`;
module.exports = {
    SmartItemAssetContainer
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 13983:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { css } = __webpack_require__(92168);
const { getColorStyles, calculateSpacing } = __webpack_require__(26865);
const { AspectRatioContainer } = __webpack_require__(7044);
const iconDimensions = css `
  width: ${calculateSpacing(8)};
  height: ${calculateSpacing(8)};
`;
const denseDimensions = css `
  width: ${calculateSpacing(14)};
  height: ${calculateSpacing(10.5)};
`;
const contributorIconStyles = css `
  ${iconDimensions}
  overflow: visible;

  ${AspectRatioContainer} {
    position: relative;
  }

  .aspect-ratio--overlay-container {
    overflow: visible;
  }

  img {
    ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.discovery.lead.secondary.background')};
    border-radius: 50%;
    overflow: hidden;
    vertical-align: top;
  }
`;
module.exports = {
    iconDimensions,
    denseDimensions,
    contributorIconStyles
};
//# sourceMappingURL=mixins.js.map

/***/ }),

/***/ 71747:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { css } = __webpack_require__(92168);
const { getColorToken } = __webpack_require__(26865);
const insetStyles = ({ insetType }) => {
    switch (insetType) {
        case 'focus': {
            return css `
        margin: var(--smart-item-asset-v-inset) var(--smart-item-asset-h-inset);
      `;
        }
        default: {
            return css `
        padding: 0 var(--smart-item-asset-h-inset);
      `;
        }
    }
};
const styleFunction = (_breakpoint, styleSettings = {}) => css `
  position: relative;
  text-align: center;

  picture {
    height: 100%;
  }

  img {
    border: ${({ theme }) => styleSettings.showOutline
    ? `1px solid ${getColorToken(theme, 'colors.discovery.body.white.border')}`
    : 'none'};
    height: 100%;
  }

  ${({ insetType }) => {
    return styleSettings.inset && insetStyles({ insetType });
}}
`;
module.exports = styleFunction;
//# sourceMappingURL=style-pool.js.map

/***/ }),

/***/ 73338:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { css } = __webpack_require__(92168);
const { minThresholds } = __webpack_require__(99906);
const { calculateSpacing, minScreen } = __webpack_require__(26865);
const LANDSCAPE_COLUMN_WIDTH = calculateSpacing(26);
const PORTRAIT_COLUMN_WIDTH = calculateSpacing(14);
const CONTRIBUTOR_COLUMN_WIDTH = calculateSpacing(8);
function getGridWidth(aspectRatio) {
    const [width, height] = aspectRatio.split(':');
    const result = Number(width) / Number(height);
    return result <= 1 ? PORTRAIT_COLUMN_WIDTH : LANDSCAPE_COLUMN_WIDTH;
}
function getAspectRatios(image) {
    if (!image) {
        return [];
    }
    return [
        image.segmentedSources?.sm?.[0].aspectRatio,
        image.segmentedSources?.lg?.[0].aspectRatio
    ].filter(Boolean);
}
function getGridColumns({ image, isContributor }) {
    if (isContributor) {
        return css `
      grid-template-columns: auto ${CONTRIBUTOR_COLUMN_WIDTH};
    `;
    }
    const aspectRatios = getAspectRatios(image);
    if (!aspectRatios.length) {
        return css `
      grid-template-columns: auto max-content;
    `;
    }
    const [mobileWidth, desktopWidth] = aspectRatios.map(getGridWidth);
    return css `
    grid-template-columns: auto ${mobileWidth};
    ${minScreen(`${minThresholds.lg}px`)} {
      grid-template-columns: auto ${desktopWidth};
    }
  `;
}
module.exports = {
    getGridColumns,
    LANDSCAPE_COLUMN_WIDTH,
    PORTRAIT_COLUMN_WIDTH,
    CONTRIBUTOR_COLUMN_WIDTH
};
//# sourceMappingURL=helpers.js.map

/***/ }),

/***/ 93039:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const classNames = __webpack_require__(32485);
const Rubric = __webpack_require__(34187);
const { CardUnitWrapper, CardUnitHeader, SmartItemHed, SmartItemDek, SmartItemCTA } = __webpack_require__(86734);
const SmartItemAsset = __webpack_require__(34574);
const ResponsiveAsset = __webpack_require__(86157);
/**
 * SmartItem
 *
 * @param {object} props - React Props
 * @param {string} [props.cardColor] - CardUnit background color
 * @param {string} [props.className] - Class name to be added to the wrapper element
 * @param {Array} [props.layout] - Possible layout-configs for smart-item on various device
 * @param {string} [props.dangerousDek] - Optional HTML (dangerously set) dek/sub-headline of content
 * @param {string} props.dangerousHed - HTML (dangerously set) hed/headline of content
 * @param {string} [props.id] - cardUnit Id
 * @param {object} [props.image] - Image of content type
 * @param {object} [props.rubric] - Optional rubric data
 * @param {string} props.url - URL of content type
 * @param {Array}  [props.styleSettings] - Breakpoint specific settings that affect layout styles
 * @returns {ReactElement} <div>
 */
const CardUnit = ({ cardColor = '#F6F6F6', className, layout = ['side-by-side', 'side-by-side', 'stack'], dangerousDek, dangerousHed, id, image, rubric, url, styleSettings = [] }) => {
    // TODO: Remove if styleSettings are not needed
    const imageStyleSettings = styleSettings.map((styleSetting) => styleSetting.image);
    const goToLink = () => {
        window.location = url;
    };
    return (React.createElement(CardUnitWrapper, { className: classNames('smart-item', className), layout: layout, styleSettings: styleSettings, cardColor: cardColor, ...(image?.contentType === 'clip' && { onClick: goToLink }), id: id },
        React.createElement(CardUnitHeader, null,
            React.createElement(SmartItemHed, { className: "smart-item__hed", dangerouslySetInnerHTML: { __html: dangerousHed } }),
            React.createElement(SmartItemDek, { className: "smart-item__dek", dangerouslySetInnerHTML: { __html: dangerousDek } })),
        React.createElement(SmartItemAsset, { className: "smart-item__asset-container", ...image, styleSettings: imageStyleSettings }),
        rubric && (React.createElement(SmartItemCTA, { className: "smart-item__CTA", href: url, dangerouslySetInnerHTML: {
                __html: rubric?.name
            }, image: image }))));
};
CardUnit.propTypes = {
    cardColor: PropTypes.string,
    className: PropTypes.string,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string.isRequired,
    id: PropTypes.string,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    layout: PropTypes.arrayOf(PropTypes.oneOf(['side-by-side', 'stack'])),
    rubric: PropTypes.shape(Rubric.propTypes),
    styleSettings: PropTypes.arrayOf(PropTypes.shape({})),
    url: PropTypes.string.isRequired
};
CardUnit.displayName = 'SmartItem';
module.exports = CardUnit;
//# sourceMappingURL=CardUnit.js.map

/***/ }),

/***/ 12059:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const CardUnit = __webpack_require__(93039);
module.exports = asConfiguredComponent(CardUnit, 'SmartItem');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 86734:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { BaseWrap } = __webpack_require__(76955);
const { injectStyles } = __webpack_require__(37338);
const { SmartItemHed, SmartItemDek, SmartItemCTA } = __webpack_require__(88154);
const { CardUnitHeader } = __webpack_require__(28313);
const { calculateSpacing } = __webpack_require__(26865);
const stylePool = __webpack_require__(97678);
const CardUnitWrapper = styled(BaseWrap).withConfig({
    displayName: 'CardUnitWrapper'
}) `
  border-radius: ${calculateSpacing(2)};
  cursor: pointer;
  padding: ${calculateSpacing(3)};

  ${({ cardColor }) => cardColor && `background: ${cardColor};`}

  ${({ layout, styleSettings }) => injectStyles('layout', { layout, styleSettings }, stylePool)};
`;
module.exports = {
    CardUnitWrapper,
    CardUnitHeader,
    SmartItemHed,
    SmartItemDek,
    SmartItemCTA
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 28313:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const CardUnitHeader = styled.div.withConfig({
    displayName: 'CardUnitHeader'
}) ``;
module.exports = {
    CardUnitHeader
};
//# sourceMappingURL=style-elements.js.map

/***/ }),

/***/ 97678:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { css } = __webpack_require__(92168);
const { SmartItemAssetContainer } = __webpack_require__(78465);
const { SmartItemCTA, SmartItemDek } = __webpack_require__(88154);
const { CardUnitHeader } = __webpack_require__(28313);
const { calculateSpacing, minMaxScreen, maxScreen, minScreen } = __webpack_require__(26865);
const { minThresholds, maxThresholds } = __webpack_require__(99906);
const stylePool = {
    'side-by-side': (_) => css `
    --smart-item-layout: 'side-by-side';
    display: grid;
    grid-column-gap: ${calculateSpacing(2)};
    grid-template-rows: auto;
    margin-bottom: ${calculateSpacing(2)};
    width: 100%;
    height: min-content;
    ${maxScreen(`${minThresholds.lg}px`)} {
      padding: ${calculateSpacing(2)};
    }
    ${minMaxScreen(`${minThresholds.lg}px`, `${maxThresholds.lg}px`)} {
      padding-right: ${calculateSpacing(2)};
      padding-left: ${calculateSpacing(2)};
      min-height: ${calculateSpacing(12)};
    }

    ${CardUnitHeader} {
      grid-column: 1;
      ${SmartItemDek} {
        padding-top: ${calculateSpacing(1)};
      }
    }

    ${SmartItemAssetContainer} {
      grid-column: 2;
      grid-row: 1 / final;
      margin-top: 0;
      margin-left: auto;
      ${maxScreen(`${minThresholds.lg}px`)} {
        width: ${calculateSpacing(14)};
        max-height: ${calculateSpacing(10)};
      }
      ${minMaxScreen(`${minThresholds.lg}px`, `${maxThresholds.lg}px`)} {
        width: ${calculateSpacing(20)};
        max-height: ${calculateSpacing(15)};
      }
    }
    ${SmartItemCTA} {
      grid-column: 1;
      margin-top: ${calculateSpacing(2)};
      ${minScreen(`${minThresholds.lg}px`)} {
        margin-top: auto;
      }
    }
  `,
    stack: () => css `
    --smart-item-layout: 'stack';
    display: flex;
    grid-column: span 3;
    flex-direction: column;
    padding: ${calculateSpacing(2)};

    & > * {
      text-align: center;
    }
    ${SmartItemAssetContainer} {
      margin-top: auto;
      max-height: 40%;
    }

    ${SmartItemCTA} {
      margin-top: 24%;
    }
    ${SmartItemDek} {
      margin-top: ${calculateSpacing(1)};
    }
    ${maxScreen(`${maxThresholds.md}px`)} {
      min-width: ${calculateSpacing(31.25)};
      min-height: ${calculateSpacing(42.5)};
    }
    ${minScreen(`${minThresholds.lg}px`)} {
      padding: ${calculateSpacing(3)};
    }
    ${maxScreen(`${maxThresholds.lg}px`)} {
      aspect-ratio: 3 / 4;
    }
    ${minScreen(`${minThresholds.xl}px`)} {
      min-height: ${calculateSpacing(40)};
      ${SmartItemAssetContainer} {
        margin-bottom: ${calculateSpacing(2)};
      }
      ${SmartItemCTA} {
        margin-top: 10%;
      }
    }
    ${minScreen(`${minThresholds.xxl}px`)} {
      aspect-ratio: 3 / 4;
      padding: ${calculateSpacing(3)};
      ${SmartItemAssetContainer} {
        max-height: ${calculateSpacing(16)};
      }
      ${SmartItemCTA} {
        margin-top: 10%;
      }
    }
    ${minScreen(`${minThresholds.xxxl}px`)} {
      ${SmartItemAssetContainer} {
        max-height: 45%;
      }
      ${SmartItemCTA} {
        margin-top: 20%;
      }
      padding: ${calculateSpacing(4)};
    }
  `
};
module.exports = stylePool;
//# sourceMappingURL=style-pool.js.map

/***/ }),

/***/ 35423:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const classnames = __webpack_require__(32485);
const Rubric = __webpack_require__(34187);
const Bylines = __webpack_require__(52540);
const { FocusUnitWrapper, FocusUnitActionBarWrapper, TextContainer, TextWrapper, SmartItemHed, SmartItemHedLink, SmartItemDek, SmartItemRubric, SmartItemBylines, SmartItemPublishedDate } = __webpack_require__(5228);
const SmartItemAsset = __webpack_require__(34574);
const ResponsiveAsset = __webpack_require__(86157);
const { PresetContext } = __webpack_require__(6009);
const { AdditionalContentWrapper } = __webpack_require__(42667);
const ActionBar = __webpack_require__(72014);
const { getVariationNames } = __webpack_require__(81372);
const actionBarConfig = {
    audio: {
        defaultLabel: 'audioPrimaryLabel',
        defaultIcon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 1.5C6.2 1.5 1.5 6.2 1.5 12V17C1.5 20 4 22.5 7 22.5H7.5V20.9C8.4 20.7 9 19.9 9 19V15C9 14.1 8.4 13.3 7.5 13.1V11.5H7C5.1 11.5 3.5 12.4 2.5 13.8V12C2.5 6.8 6.8 2.5 12 2.5C17.2 2.5 21.5 6.8 21.5 12V13.8C20.5 12.4 18.9 11.5 17 11.5H16.5V13.1C15.6 13.3 15 14.1 15 15V19C15 19.9 15.6 20.7 16.5 20.9V22.5H17C20 22.5 22.5 20 22.5 17V12C22.5 6.2 17.8 1.5 12 1.5ZM6.5 12.5V21.5C4.3 21.3 2.5 19.3 2.5 17C2.5 14.7 4.3 12.8 6.5 12.5ZM17.5 21.5V12.5C19.7 12.7 21.5 14.7 21.5 17C21.5 19.3 19.7 21.2 17.5 21.5Z" fill="black"/> </svg>'
    }
};
/**
 * SmartItem - Focus
 *
 * @param {object} props - React Props
 * @param {string} [props.className]  - Class to be applied to the smart-item
 * @param {Array} [props.layout] - Possible layout-configs for smart-item on various device
 * @param {object} [props.contributors] - object containing data to create contributors byline
 * @param {string} [props.dangerousDek] - HTML (dangerously set) dek/sub-headline of content
 * @param {string} props.dangerousHed - HTML (dangerously set) hed/headline of content
 * @param {string} [props.date] - Issue Date of article
 * @param {string} [props.id] - SmartItem FocusUnit Id
 * @param {object} [props.image] - Image of article
 * @param {object} [props.rubric] - rubric data
 * @param {object} [props.insetType] - type of inset to use
 * @param {string} props.url - URL of Article
 * @param {Array}  [props.styleSettings] - Breakpoint specific settings that affect layout styles
 * @param {number} [props.maxContributors] - Maximum number of contributor types to show
 * @param {number} [props.maxContributorsNames] - Maximum number of contributor names to show
 * @param {string} [props.textPosition] - Position of text within container for side-by-side layouts
 * @param {ReactElement} [props.additionalContent] - Additional element to render
 * @param {string} [props.rubricVariation] - Rubric variation to use
 * @param {boolean} [props.shouldLinkBylines] - Whether bylines should be links or not
 * @param {string} [props.signalType] - Specifying the icon to be displayed.
 * @returns {ReactElement} <div>
 */
const FocusUnit = ({ additionalContent = null, className, layout = ['stack', 'side-by-side', 'side-by-side'], contributors, dangerousDek, dangerousHed, date, id, image, rubric, insetType = 'focus', url, styleSettings = [], maxContributors, maxContributorsNames, textPosition, rubricVariation = 'ItemAsText', shouldLinkBylines = false, signalType }) => {
    const imageStyleSettings = styleSettings.map((styleSetting) => styleSetting?.image);
    const { presetCategory } = React.useContext(PresetContext);
    const goToLink = () => {
        window.location = url;
    };
    const RubricVariation = Rubric[rubricVariation];
    return (React.createElement(FocusUnitWrapper, { layout: layout, styleSettings: styleSettings, className: classnames('smart-item', className), image: image, presetCategory: presetCategory, textPosition: textPosition, ...(image?.contentType === 'clip' && { onClick: goToLink }), additionalContent: additionalContent, contributors: contributors, date: date, signalType: signalType, id: id },
        image && (React.createElement(SmartItemAsset, { className: "smart-item__asset-container", ...image, styleSettings: imageStyleSettings, insetType: insetType, shouldYieldControlOfVideoPlayPause: true })),
        React.createElement(TextContainer, null,
            React.createElement(TextWrapper, null,
                rubric && (React.createElement(SmartItemRubric, { className: "smart-item__rubric", as: RubricVariation, ...rubric })),
                React.createElement(SmartItemHedLink, { className: "smart-item__hed-link", href: url, image: image },
                    React.createElement(SmartItemHed, { className: "smart-item__hed", dangerouslySetInnerHTML: { __html: dangerousHed } })),
                dangerousDek && (React.createElement(SmartItemDek, { className: "smart-item__dek", dangerouslySetInnerHTML: { __html: dangerousDek } })),
                contributors && (React.createElement(SmartItemBylines, { className: "smart-item__contributor", as: Bylines, contributors: contributors, maxContributors: maxContributors, maxContributorsNames: maxContributorsNames, shouldLink: shouldLinkBylines })),
                date && (React.createElement(SmartItemPublishedDate, { className: "smart-item__published-date" }, date)),
                signalType && (React.createElement(FocusUnitActionBarWrapper, null,
                    React.createElement(ActionBar, { actionButtons: [signalType], actionBarConfig: actionBarConfig, isInteractive: false }))))),
        additionalContent && (React.createElement(AdditionalContentWrapper, null, additionalContent))));
};
FocusUnit.propTypes = {
    additionalContent: PropTypes.element,
    className: PropTypes.string,
    contributors: PropTypes.shape(Bylines.propTypes.contributors),
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string.isRequired,
    date: PropTypes.string,
    id: PropTypes.string,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    insetType: PropTypes.oneOf(['focus', 'default']),
    layout: PropTypes.arrayOf(PropTypes.oneOf(['stack', 'side-by-side', 'overlay'])),
    maxContributors: PropTypes.number,
    maxContributorsNames: PropTypes.number,
    rubric: PropTypes.shape(Rubric.propTypes),
    rubricVariation: PropTypes.oneOf(getVariationNames(Rubric)),
    shouldLinkBylines: PropTypes.bool,
    signalType: PropTypes.string,
    styleSettings: PropTypes.arrayOf(PropTypes.shape({
        image: PropTypes.shape({
            inset: PropTypes.bool
        }),
        textAlign: PropTypes.oneOf(['start', 'center', 'end', 'left', 'right'])
    })),
    textPosition: PropTypes.oneOf(['start', 'center', 'end']),
    url: PropTypes.string.isRequired
};
FocusUnit.displayName = 'FocusUnit';
module.exports = FocusUnit;
//# sourceMappingURL=FocusUnit.js.map

/***/ }),

/***/ 43193:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const FocusUnit = __webpack_require__(35423);
module.exports = asConfiguredComponent(FocusUnit, 'SmartItem');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 5228:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { BaseWrap } = __webpack_require__(76955);
const { injectStyles } = __webpack_require__(37338);
const { SmartItemRubric, SmartItemHedLink, SmartItemPublishedDate } = __webpack_require__(88154);
const { TextContainer, TextWrapper, FocusUnitBylines, FocusUnitDek, FocusUnitHed } = __webpack_require__(42667);
const { ActionBarWrapper, ActionBarButtonText, ActionBarButton } = __webpack_require__(11586);
const stylePool = __webpack_require__(79888);
const { getTypographyStyles, minScreen, calculateSpacing, getColorStyles } = __webpack_require__(26865);
const { minThresholds } = __webpack_require__(99906);
const inset = css `
  --smart-item-asset-h-inset: ${calculateSpacing(3)};
  --smart-item-asset-v-inset: ${calculateSpacing(3)};
  ${minScreen(`${minThresholds.lg}px`)} {
    --smart-item-asset-h-inset: ${calculateSpacing(2)};
  }
  ${minScreen(`${minThresholds.xl}px`)} {
    --smart-item-asset-h-inset: ${calculateSpacing(6)};
    --smart-item-asset-v-inset: ${calculateSpacing(4)};
  }
`;
const FocusUnitWrapper = styled(BaseWrap).withConfig({
    displayName: 'FocusUnitWrapper'
}) `
  ${inset}
  ${({ layout, styleSettings }) => injectStyles('layout', { layout, styleSettings }, stylePool)};

  ${({ theme }) => theme.palette !== 'standard' && `background: rgba(0,0,0);`}

  ${FocusUnitHed} {
    ${({ presetCategory }) => presetCategory === 'TEXT_ONLY'
    ? getTypographyStyles('typography.definitions.discovery.hed-break-out')
    : getTypographyStyles('typography.definitions.discovery.hed-feature')};
  }

  ${({ signalType }) => signalType &&
    `
      ${minScreen(`${minThresholds.lg}px`)} {
        ${TextContainer} {
          padding-top: ${calculateSpacing(8)};
        }
      }
    `}

  &:hover {
    cursor: pointer;
  }
`;
const colorShade = (palette) => palette === 'transparent' || palette === 'inverted' ? 'black' : 'white';
const FocusUnitActionBarWrapper = styled.div.withConfig({
    displayName: 'FocusUnitActionBarWrapper'
}) `
  display: flex;
  justify-content: center;

  ${ActionBarWrapper} {
    background: transparent;
    height: ${calculateSpacing(6)};

    ${ActionBarButton} {
      border: none;
      background: none;
      text-decoration: none;
    }

    ${ActionBarButtonText} {
      ${getTypographyStyles('typography.definitions.globalEditorial.context-title')};
    }

    ${({ theme }) => `
        ${getColorStyles(theme, 'border-color', `colors.discovery.body.${colorShade(theme.palette)}.border`)};

        ${ActionBarButtonText} {
          ${getColorStyles(theme, 'color', `colors.discovery.body.${colorShade(theme.palette)}.accent`)};
        }
    
        svg {
          path {
            ${getColorStyles(theme, 'fill', `colors.discovery.body.${colorShade(theme.palette)}.accent`)};
          }
        }
        
      `}
  }
`;
module.exports = {
    FocusUnitWrapper,
    FocusUnitActionBarWrapper,
    SmartItemBylines: FocusUnitBylines,
    SmartItemHedLink,
    SmartItemHed: FocusUnitHed,
    SmartItemDek: FocusUnitDek,
    SmartItemRubric,
    SmartItemPublishedDate,
    TextContainer,
    TextWrapper
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 42667:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { SmartItemBylines, SmartItemDek, SmartItemHed, SmartItemPublishedDate, SmartItemRubric, SmartItemHedLink, BoldAsByline } = __webpack_require__(88154);
const TextContainer = styled.div.withConfig({
    displayName: 'TextContainer'
}) `
  text-align: center;
`;
const TextWrapper = styled.div.withConfig({
    displayName: 'TextWrapper'
}) ``;
const FocusUnitBylines = styled(SmartItemBylines).withConfig({
    displayName: 'FocusUnitBylines'
}) ``;
FocusUnitBylines.defaultProps = {
    typeIdentity: 'typography.definitions.globalEditorial.accreditation-feature'
};
const FocusUnitDek = styled(SmartItemDek).withConfig({
    displayName: 'FocusUnitDek'
}) ``;
FocusUnitDek.defaultProps = {
    typeIdentity: 'typography.definitions.discovery.description-feature'
};
const FocusUnitHed = styled(SmartItemHed).withConfig({
    displayName: 'FocusUnitHed'
}) ``;
const AdditionalContentWrapper = styled.div.withConfig({
    displayName: 'AdditionalContentWrapper'
}) `
  position: relative;
  z-index: 1;

  ul {
    & > li {
      ${BoldAsByline}
    }
  }
`;
module.exports = {
    AdditionalContentWrapper,
    TextContainer,
    TextWrapper,
    FocusUnitHed,
    FocusUnitDek,
    FocusUnitBylines,
    FocusUnitRubric: SmartItemRubric,
    FocusUnitHedLink: SmartItemHedLink,
    FocusUnitPublishedDate: SmartItemPublishedDate
};
//# sourceMappingURL=style-elements.js.map

/***/ }),

/***/ 79888:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { css } = __webpack_require__(92168);
const { calculateSpacing, minMaxScreen, minScreen } = __webpack_require__(26865);
const { SmartItemAssetContainer } = __webpack_require__(78465);
const { TextContainer, TextWrapper, FocusUnitBylines, FocusUnitPublishedDate, AdditionalContentWrapper } = __webpack_require__(42667);
const { minThresholds, maxThresholds } = __webpack_require__(99906);
const { applyStyleExtensions } = __webpack_require__(37338);
const smartItemStyleExtender = applyStyleExtensions('SmartItem');
const containerMaxHeight = css `
  ${({ additionalContent }) => !additionalContent
    ? css `
          --aspect-ratio-box-max-height: ${calculateSpacing(75)};
          ${minMaxScreen(`${minThresholds.lg}px`, `${maxThresholds.xl}px`)} {
            --aspect-ratio-box-max-height: ${calculateSpacing(65.25)};
          }
          ${minScreen(`${minThresholds.xxl}px`)} {
            --aspect-ratio-box-max-height: ${calculateSpacing(81)};
          }
        `
    : css `
          --aspect-ratio-box-max-height: ${calculateSpacing(100)};
        `}
  min-height: var(--aspect-ratio-box-max-height);
`;
const textContainerSpacing = css `
  /*
   Targets sibling of each direct child
  */
  ${TextWrapper} {
    > * + * {
      margin-top: ${calculateSpacing(2)};
    }

    ${FocusUnitBylines} + ${FocusUnitPublishedDate} {
      margin-top: ${calculateSpacing(1)};
    }
  }
`;
const overlayWithAdditionalContent = () => css `
  ${({ additionalContent }) => additionalContent &&
    `
    grid-template-areas: "content" 
                         "additionalContent";
    grid-template-rows: 1fr min-content;
    ${SmartItemAssetContainer}{
      grid-area: content-start/content-start/additionalContent-end/additionalContent-end;
    }
    ${AdditionalContentWrapper}{
      margin:auto;
      grid-area: additionalContent;
      z-index:1;
    }
 
 `}
`;
const stackWithAdditionalContent = () => css `
  ${({ additionalContent }) => additionalContent &&
    `
    ${AdditionalContentWrapper}{
      order:2;
    }
 `}
`;
const sideBySideWithAdditionalContent = () => css `
  ${({ additionalContent }) => additionalContent &&
    css `
      display: grid;
      ${({ textPosition }) => textPosition === 'end'
        ? css `
              grid-template-areas:
                'image content'
                'image additionalContent';
            `
        : css `
              grid-template-areas:
                'content image'
                'additionalContent image';
            `};
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr min-content;
      ${SmartItemAssetContainer} {
        grid-area: image;
      }
      ${AdditionalContentWrapper} {
        grid-area: additionalContent;
      }
      ${TextContainer} {
        grid-area: content;
      }
    `}
`;
const getGradient = (textAlign, additionalContent) => {
    let direction = '';
    let gradientShade = 'rgba(0, 0, 0, .85) 0, transparent 100%';
    switch (textAlign) {
        case 'start':
            direction = 'to bottom';
            gradientShade = additionalContent
                ? 'rgba(0, 0, 0, .85) 0, transparent 65%, rgba(0, 0, 0, .85) 100%'
                : gradientShade;
            break;
        case 'left':
            direction = 'to right';
            break;
        case 'right':
            direction = 'to left';
            break;
        default:
            direction = 'to top';
            break;
    }
    return `linear-gradient(${direction}, ${gradientShade})`;
};
const backDrop = ({ textAlign }) => {
    return css `
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: ${({ additionalContent }) => getGradient(textAlign, additionalContent)};
    content: '';
    pointer-events: none;
  `;
};
const stylePool = {
    'side-by-side': (breakPoint, styleSettings = {}) => css `
    --smart-item-layout: 'side-by-side';
    display: flex;
    width: 100%;
    ${containerMaxHeight};

    ${SmartItemAssetContainer} {
      flex-basis: ${styleSettings.image?.inset
        ? `calc(50% - var(--smart-item-asset-h-inset))`
        : `50%`};

      .responsive-asset {
        img {
          object-fit: ${styleSettings.image?.inset ? 'contain' : 'cover'};
          ${!styleSettings.image?.inset &&
        css `
            height: auto;
            min-height: 100%;
          `}
        }
      }
    }

    ${({ textPosition }) => textPosition &&
        css `
        flex-direction: ${textPosition === 'start' && 'row-reverse'};
      `}

    ${TextContainer} {
      display: flex;
      flex-basis: 50%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: ${calculateSpacing(3)};
      ${textContainerSpacing}

      & > * {
        max-width: ${calculateSpacing(62.5)};
      }

      ${minScreen(`${minThresholds.xl}px`)} {
        padding-right: ${calculateSpacing(6)};
        padding-left: ${calculateSpacing(6)};
      }
    }
    ${sideBySideWithAdditionalContent(styleSettings)};
    ${smartItemStyleExtender('side-by-side', styleSettings, breakPoint)};
  `,
    stack: (breakPoint, styleSettings = {}) => css `
    --smart-item-layout: 'stack';
    display: flex;
    flex-direction: column-reverse;
    ${TextContainer} {
      margin: ${calculateSpacing(6)} ${calculateSpacing(3)};
      ${textContainerSpacing}
    }
    ${SmartItemAssetContainer} {
      margin-top: 0;
    }
    ${stackWithAdditionalContent()};
    ${smartItemStyleExtender('stack', styleSettings, breakPoint)};
  `,
    overlay: (breakPoint, styleSettings = {}) => css `
    --smart-item-layout: 'overlay';
    display: grid;
    position: relative;
    grid-template-areas: 'content';
    grid-template-columns: 1fr;
    justify-content: ${styleSettings?.textAlign === 'left' ||
        styleSettings?.textAlign === 'right'
        ? styleSettings?.textAlign
        : 'center'};

    ${containerMaxHeight};

    ${TextContainer} {
      display: flex;
      grid-area: content;
      flex-direction: column;
      justify-content: ${styleSettings?.textAlign === 'left' ||
        styleSettings?.textAlign === 'right'
        ? 'center'
        : styleSettings?.textAlign};
      z-index: 1;
      margin: auto;
      padding: ${calculateSpacing(6)} ${calculateSpacing(3)}
        ${calculateSpacing(4)} ${calculateSpacing(3)};
      width: 100%;
      height: 100%;
      ${textContainerSpacing}
    }
    ${SmartItemAssetContainer} {
      position: unset;
      grid-area: content;

      .responsive-asset {
        img {
          object-fit: cover;
          width: 100%;
        }
      }

      &::after {
        ${backDrop({ textAlign: styleSettings?.textAlign })}
      }
    }

    ${minScreen(`${minThresholds.lg}px`)} {
      ${TextContainer} {
        padding: ${calculateSpacing(4)} 0; /* Existing styles. Once text align goes live, we can remove this padding. */
        max-width: ${calculateSpacing(62)};

        ${['left', 'right'].includes(styleSettings?.textAlign) &&
        `padding: ${calculateSpacing(3)} ${calculateSpacing(6)};`}
        ${styleSettings?.textAlign === 'start' &&
        `padding-top: ${calculateSpacing(12)};`};
      }

      ${AdditionalContentWrapper} {
        max-width: ${calculateSpacing(62)};
      }
    }

    ${minMaxScreen(`${minThresholds.lg}px`, `${maxThresholds.lg}px`)} {
      ${TextContainer} {
        ${['left', 'right'].includes(styleSettings?.textAlign) &&
        `padding: ${calculateSpacing(3)};`}
      }
    }

    ${overlayWithAdditionalContent()};

    ${minScreen(`${minThresholds.xl}px`)} {
      ${TextWrapper} {
        margin-right: auto;
        margin-left: auto;
        max-width: ${calculateSpacing(62.5)};
      }

      ${TextContainer}, ${AdditionalContentWrapper} {
        margin: unset;
        padding-right: ${calculateSpacing(6)};
        padding-left: ${calculateSpacing(6)};
        width: 50%;
        max-width: 50%;
      }

      ${() => {
        if (styleSettings?.textAlign === 'left') {
            return `
            ${TextContainer}, ${AdditionalContentWrapper} {
              margin-right: auto;
            }
          `;
        }
        else if (styleSettings?.textAlign === 'right') {
            return `
            ${TextContainer}, ${AdditionalContentWrapper} {
              margin-left: auto;
            }
          `;
        }
        return `
          ${TextContainer} , ${AdditionalContentWrapper} {
            margin: auto;
          }
        `;
    }};
    }

    ${smartItemStyleExtender('overlay', styleSettings, breakPoint)};
  `
};
module.exports = stylePool;
//# sourceMappingURL=style-pool.js.map

/***/ }),

/***/ 75989:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { useEffect } = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const classnames = __webpack_require__(32485);
const { useInView } = __webpack_require__(26855);
const Rubric = __webpack_require__(34187);
const Byline = __webpack_require__(77813);
const Bylines = __webpack_require__(52540);
const { StoryUnitWrapper, SmartItemHed, SmartItemHedLink, SmartItemDek, SmartItemRubric, SmartItemBylines, SmartItemPublishedDate } = __webpack_require__(63993);
const SmartItemAsset = __webpack_require__(34574);
const ResponsiveAsset = __webpack_require__(86157);
const { getVariationNames } = __webpack_require__(81372);
const actionBarConfig = {
    audio: {
        defaultLabel: 'audioPrimaryLabel',
        defaultIcon: '<svg width="14" height="14" viewBox="0 0 21.5 21.5" xmlns="http://www.w3.org/2000/svg"><title>Listen</title><defs><style>.cls-1{fill:#231f20;stroke:#231f20;stroke-miterlimit:10;stroke-width:0.5px;}</style></defs><g id="icons"><path class="cls-1" d="M39.75,29.5A10.51,10.51,0,0,0,29.25,40v5a5.51,5.51,0,0,0,5.5,5.5h.5V48.93A2,2,0,0,0,36.75,47V43a2,2,0,0,0-1.5-1.93V39.5h-.5a5.49,5.49,0,0,0-4.5,2.35V40a9.5,9.5,0,0,1,19,0v1.85a5.49,5.49,0,0,0-4.5-2.35h-.5v1.57A2,2,0,0,0,42.75,43v4a2,2,0,0,0,1.5,1.93V50.5h.5a5.51,5.51,0,0,0,5.5-5.5V40A10.51,10.51,0,0,0,39.75,29.5Zm-5.5,11v8.94a4.5,4.5,0,0,1,0-8.94Zm11,8.94V40.53a4.5,4.5,0,0,1,0,8.94Z" transform="translate(-29 -29.25)"/></g></svg>'
    }
};
/**
 * Decides the display and ordering of elements based on props
 * @param {object} props - props to decide display and order of elements
 * @param {object} props.rubric - rubric data
 * @param {object} props.image - image
 * @param {string} props.dangerousDek - dek
 * @param {object} props.contributors - contributors data
 * @param {'bottom'|'top'} props.bylinesPosition - byline position
 * @param {'string'} props.date - publish date
 * @returns {Array<string>} - element to be displayed in order
 */
function getElements({ rubric, image, dangerousDek, contributors, bylinesPosition, date }) {
    let hedIndex = 0;
    const elements = [];
    if (rubric?.name) {
        elements.push('rubric');
        hedIndex++;
    }
    if (image && dangerousDek) {
        elements.push('hed', 'image', 'dek');
    }
    else if (image && !dangerousDek) {
        hedIndex++;
        elements.push('image', 'hed');
    }
    else {
        elements.push('hed');
    }
    if (contributors && bylinesPosition === 'top') {
        elements.splice(hedIndex, 0, 'bylines');
    }
    else if (contributors) {
        elements.push('bylines');
    }
    if (date)
        elements.push('date');
    return elements;
}
/**
 * SmartItem
 *
 * @param {object} props - React Props
 * @param {string} [props.className]  - Class to be applied to the smart-item
 * @param {Array} [props.layout] - Possible layout-configs for smart-item on various device
 * @param {object} [props.contributors] - Optional object containing data to create contributors byline
 * @param {string} [props.dangerousDek] - Optional HTML (dangerously set) dek/sub-headline of content
 * @param {string} props.dangerousHed - HTML (dangerously set) hed/headline of content
 * @param {string} [props.date] - Issue Date of article
 * @param {string} [props.id] - SmartItem StoryUnit Id
 * @param {object} [props.image] - Image of article
 * @param {object} [props.rubric] - Optional rubric data
 * @param {string} props.url - URL of Article
 * @param {Array}  [props.styleSettings] - Breakpoint specific settings that affect layout styles
 * @param {string} [props.bylinesPosition] - Position of bylines within smart-item
 * @param {string} [props.bylinesTextAlign] - Alignment of bylines within smart-item
 * @param {string} [props.bylineVariation] - variation of byline
 * @param {boolean} [props.isContributor] - Applies contributor icon styles to image
 * @param {number} [props.maxContributors] - Maximum number of contributor types to show
 * @param {number} [props.maxContributorsNames] - Maximum number of contributor names to show
 * @param {string} [props.rubricVariation] - Rubric variation to use
 * @param {boolean} [props.shouldLinkBylines] - Whether bylines should be links or not
 * @param {string} [props.signalType] - Specifying the icon to be displayed.
 * @param {string} [props.impressionHandler] - Pass your impression tracking function to this prop
 * @param {string} [props.clickHandler] - This will have a function to be executed
 * @param {string} [props.shouldTrackSnowplowEvent] - Flag to track snowplow event
 * @param {boolean} [props.shouldHideIcon] - Flag to show or hide icon
 * @param {object} [props.variationsProp] - Variation props of the Summary Item variation
 * @param {string} [props.contentType] - Content type
 * @returns {ReactElement} <div>
 */
const StoryUnit = ({ className, clickHandler, impressionHandler, shouldTrackSnowplowEvent, layout = ['dense', 'side-by-side', 'stack'], contributors, dangerousDek, dangerousHed, date, id, image, rubric, url, styleSettings = [], bylinesPosition, bylinesTextAlign = 'left', bylineVariation, isContributor = false, maxContributors, maxContributorsNames, rubricVariation = 'ItemAsText', shouldLinkBylines = false, signalType, shouldHideIcon = true, variationsProp, contentType }) => {
    const { ref: smartItemRef, entry } = useInView({
        threshold: 0.5,
        trackVisibility: true,
        delay: 100,
        triggerOnce: true
    });
    useEffect(() => {
        if (entry?.isIntersecting && shouldTrackSnowplowEvent) {
            impressionHandler();
        }
    }, [entry, shouldTrackSnowplowEvent, impressionHandler]);
    const imageStyleSettings = styleSettings.map((styleSetting) => styleSetting.image);
    const goToLink = () => {
        if (image?.contentType === 'clip') {
            window.location = url;
        }
        clickHandler();
    };
    const elements = getElements({
        rubric,
        image,
        dangerousDek,
        contributors,
        bylinesPosition,
        date
    });
    const RubricVariation = Rubric[rubricVariation];
    return (React.createElement(StoryUnitWrapper, { layout: layout, hasRubric: Boolean(rubric?.name), hasDek: Boolean(dangerousDek), hasBylines: Boolean(contributors), bylinesPosition: bylinesPosition, isContributor: isContributor, styleSettings: styleSettings, className: classnames('smart-item', 'story-unit', className), onClick: goToLink, image: image, id: id, ref: smartItemRef }, elements.map((element) => {
        switch (element) {
            case 'hed':
                return (React.createElement(SmartItemHedLink, { className: "smart-item__hed-link", href: url, key: "hedWrapper", image: image },
                    React.createElement(SmartItemHed, { className: "smart-item__hed", dangerouslySetInnerHTML: { __html: dangerousHed } })));
            case 'dek':
                return (React.createElement(SmartItemDek, { key: "dek", className: "smart-item__dek", dangerouslySetInnerHTML: { __html: dangerousDek } }));
            case 'rubric':
                return (React.createElement(SmartItemRubric, { key: "rubric", className: "smart-item__rubric", as: RubricVariation, ...rubric }));
            case 'image':
                return (React.createElement(SmartItemAsset, { key: "asset", className: "smart-item__asset-container", ...image, styleSettings: imageStyleSettings, isContributor: isContributor, shouldYieldControlOfVideoPlayPause: true, signalType: signalType, actionBarConfig: actionBarConfig, shouldHideIcon: shouldHideIcon, variationsProp: variationsProp, contentCategory: contentType }));
            case 'bylines':
                return (React.createElement(SmartItemBylines, { key: "bylines", className: "smart-item__contributor", as: Bylines, contentAlign: bylinesTextAlign, contributors: contributors, maxContributors: maxContributors, maxContributorsNames: maxContributorsNames, bylinesPosition: bylinesPosition, shouldLink: shouldLinkBylines, bylineVariation: bylineVariation }));
            case 'date':
                return (React.createElement(SmartItemPublishedDate, { key: "date", className: "smart-item__published-date" }, date));
            default:
                return null;
        }
    })));
};
StoryUnit.propTypes = {
    bylinesPosition: PropTypes.oneOf(['top', 'bottom']),
    bylinesTextAlign: PropTypes.oneOf(['left', 'right', 'center']),
    bylineVariation: PropTypes.oneOf(getVariationNames(Byline)),
    className: PropTypes.string,
    clickHandler: PropTypes.func,
    contentType: PropTypes.string,
    contributors: PropTypes.shape(Bylines.propTypes.contributors),
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string.isRequired,
    date: PropTypes.string,
    id: PropTypes.string,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    impressionHandler: PropTypes.func,
    isContributor: PropTypes.bool,
    layout: PropTypes.arrayOf(PropTypes.oneOf(['dense', 'side-by-side', 'stack'])),
    maxContributors: PropTypes.number,
    maxContributorsNames: PropTypes.number,
    rubric: PropTypes.shape(Rubric.propTypes),
    rubricVariation: PropTypes.oneOf(getVariationNames(Rubric)),
    shouldHideIcon: PropTypes.bool,
    shouldLinkBylines: PropTypes.bool,
    shouldTrackSnowplowEvent: PropTypes.bool,
    signalType: PropTypes.string,
    styleSettings: PropTypes.arrayOf(PropTypes.shape({
        inset: PropTypes.bool,
        textAlign: PropTypes.oneOf(['start', 'center', 'end']),
        image: PropTypes.shape({
            inset: PropTypes.bool,
            showOutline: PropTypes.bool
        })
    })),
    url: PropTypes.string.isRequired,
    variationsProp: PropTypes.object
};
StoryUnit.displayName = 'SmartItem';
module.exports = StoryUnit;
//# sourceMappingURL=StoryUnit.js.map

/***/ }),

/***/ 99366:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const StoryUnit = __webpack_require__(75989);
module.exports = asConfiguredComponent(StoryUnit, 'SmartItem');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 63993:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { BaseWrap } = __webpack_require__(76955);
const { injectStyles } = __webpack_require__(37338);
const { SmartItemBylines, SmartItemHed, SmartItemHedLink, SmartItemDek, SmartItemRubric, SmartItemPublishedDate } = __webpack_require__(88154);
const { SmartItemAssetContainer } = __webpack_require__(78465);
const stylePool = __webpack_require__(14824);
const { minScreen, calculateSpacing } = __webpack_require__(26865);
const { minThresholds } = __webpack_require__(99906);
const { BylinePreamble } = __webpack_require__(74423);
const { ResponsiveImagePicture } = __webpack_require__(7228);
const inset = css `
  --smart-item-inset: 0;
  --smart-item-asset-h-inset: 0;
  --smart-item-asset-v-inset: 0;

  ${minScreen(`${minThresholds.lg}px`)} {
    --smart-item-asset-h-inset: 0;
    --smart-item-inset: ${calculateSpacing(4)};
  }
`;
const StoryUnitWrapper = styled(BaseWrap).withConfig({
    displayName: 'SmartItemWrapper'
}) `
  ${inset}
  cursor: pointer;
  text-decoration: none;
  ${({ bylinesPosition }) => bylinesPosition === 'top' &&
    css `
      order: -1;
      ${BylinePreamble} {
        display: none;
      }
    `}
  ${({ layout, styleSettings }) => injectStyles('layout', { layout, styleSettings }, stylePool)}

  ${SmartItemAssetContainer} {
    ${ResponsiveImagePicture} {
      ${minScreen(`${minThresholds.lg}px`)} {
        width: auto;
      }
    }
  }
`;
StoryUnitWrapper.defaultProps = {
    as: 'div'
};
module.exports = {
    StoryUnitWrapper,
    SmartItemBylines,
    SmartItemHed,
    SmartItemHedLink,
    SmartItemDek,
    SmartItemRubric,
    SmartItemPublishedDate
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 14824:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { css } = __webpack_require__(92168);
const { SmartItemHedLink, SmartItemDek, SmartItemRubric, SmartItemBylines, SmartItemPublishedDate } = __webpack_require__(88154);
const { calculateSpacing } = __webpack_require__(26865);
const { SmartItemAssetContainer } = __webpack_require__(78465);
const { iconDimensions, denseDimensions } = __webpack_require__(13983);
const { getGridColumns } = __webpack_require__(73338);
const stylePool = {
    'side-by-side': (_, styleSettings = {}) => css `
    --smart-item-layout: 'side-by-side';
    display: grid;
    grid-column-gap: ${calculateSpacing(2)};
    ${getGridColumns};
    grid-template-rows: auto;
    width: 100%;
    height: min-content;
    gap: ${calculateSpacing(1)};

    ${SmartItemRubric}, ${SmartItemHedLink}, ${SmartItemDek}, ${SmartItemBylines} ,${SmartItemPublishedDate} {
      grid-column: 1;
    }

    ${SmartItemAssetContainer} {
      --aspect-ratio-box-max-height: ${calculateSpacing(19.5)};
      grid-column: 2;
      grid-row: 1/6;
      margin-top: 0;
      max-height: var(--aspect-ratio-box-max-height);

      .responsive-asset,
      .responsive-cartoon {
        position: relative;
      }
    }

    ${styleSettings.textAlign &&
        css `
      text-align: ${styleSettings.textAlign};
    `}

    ${styleSettings.inset &&
        css `
      padding: var(--smart-item-inset);
    `}
  `,
    dense: () => css `
    --smart-item-layout: 'dense';
    display: block;
    ${SmartItemRubric} {
      display: block;
    }

    & > *:not(:first-child) {
      margin-top: ${calculateSpacing(0.5)};
    }

    ${SmartItemAssetContainer} {
      float: right;

      margin-bottom: ${calculateSpacing(1)};
      margin-left: ${calculateSpacing(2)};
      ${({ hasDek }) => hasDek &&
        css `
          margin-top: ${calculateSpacing(1)};
        `}

      ${({ isContributor }) => css `
          ${isContributor ? iconDimensions : denseDimensions}
        `}
      &+${SmartItemBylines} {
        margin-top: 0;
      }
    }

    &::after {
      display: table;
      clear: both;
      content: '';
    }
  `,
    stack: (_, styleSettings = {}) => css `
    --smart-item-layout: 'stack';
    gap: ${calculateSpacing(1)};

    ${styleSettings.inset &&
        css `
      & > * {
        padding-right: var(--smart-item-inset);
        padding-left: var(--smart-item-inset);
      }
    `}
    ${styleSettings.textAlign &&
        css `
      text-align: ${styleSettings.textAlign};
    `}

    display: flex;
    flex-direction: column;
    ${SmartItemAssetContainer} {
      ${styleSettings.image?.inset &&
        css `
        --aspect-ratio-box-max-height: ${calculateSpacing(33.375)};
        max-height: var(--aspect-ratio-box-max-height);
      `}
      order: -2;
      margin-bottom: ${calculateSpacing(1)};

      .responsive-asset,
      .responsive-cartoon {
        display: block;
        position: relative;
        margin: 0 auto;
      }
    }

    ${({ isContributor }) => isContributor &&
        css `
        position: relative;
        ${SmartItemAssetContainer} {
          position: unset;
        }
      `}
  `
};
module.exports = stylePool;
//# sourceMappingURL=style-pool.js.map

/***/ }),

/***/ 64587:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const StoryUnit = __webpack_require__(99366);
const FocusUnit = __webpack_require__(43193);
const CardUnit = __webpack_require__(12059);
module.exports = {
    StoryUnit,
    FocusUnit,
    CardUnit
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 88154:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { BaseText, BaseLink } = __webpack_require__(76955);
const { BylinePreamble, BylineLink, BylineName } = __webpack_require__(74423);
const { getColorStyles, getTypographyStyles, minScreen } = __webpack_require__(26865);
const { ZINDEX_MAP } = __webpack_require__(96472);
const { minThresholds } = __webpack_require__(99906);
const invertedTokens = css `
  ${({ invertedColorToken, theme }) => ['inverted', 'transparent'].includes(theme.palette) &&
    invertedColorToken &&
    getColorStyles('color', invertedColorToken)};
`;
const BoldAsByline = css `
  & > b,
  & > strong {
    font-size: inherit; /* inherits parent font size and sets 1em to refer parent font size */
    ${minScreen(`${minThresholds.lg}px`)} {
      font-size: inherit; /* inherits parent font size and sets 1em to refer parent font size */
    }
  }

  & > b,
  & > strong {
    ${getTypographyStyles('typography.definitions.globalEditorial.accreditation-feature')};
    font-size: calc(1em - 1px); /* subtracts 1px from parent font size */
    font-weight: inherit;
    ${minScreen(`${minThresholds.lg}px`)} {
      font-size: calc(1em - 1px);
    }
  }
`;
const SmartItemBaseText = styled(BaseText).withConfig({
    displayName: 'SmartItemBaseText'
}) `
  ${({ colorToken }) => getColorStyles('color', colorToken)};
  ${({ typeIdentity }) => getTypographyStyles(typeIdentity)};
  ${invertedTokens};
`;
const SmartItemHed = styled(SmartItemBaseText).withConfig({
    displayName: 'SmartItemHed'
}) `
  position: relative;
  z-index: ${ZINDEX_MAP.content};

  &:hover {
    text-decoration: underline;
  }
`;
SmartItemHed.defaultProps = {
    as: 'h3',
    colorToken: 'colors.discovery.body.white.heading',
    invertedColorToken: 'colors.discovery.body.black.heading',
    typeIdentity: 'typography.definitions.discovery.hed-core-primary'
};
const SmartItemDek = styled(SmartItemBaseText).withConfig({
    displayName: 'SmartItemDek'
}) `
  ${BoldAsByline}
`;
SmartItemDek.defaultProps = {
    colorToken: 'colors.discovery.body.white.description',
    invertedColorToken: 'colors.discovery.body.black.description',
    typeIdentity: 'typography.definitions.discovery.description-core'
};
const SmartItemRubric = styled(SmartItemBaseText).withConfig({
    displayName: 'SmartItemRubric'
}) ``;
SmartItemRubric.defaultProps = {
    colorToken: 'colors.discovery.body.white.context-signature',
    invertedColorToken: 'colors.discovery.body.black.context-signature',
    typeIdentity: 'typography.definitions.globalEditorial.context-primary'
};
const SmartItemBylines = styled(SmartItemBaseText).withConfig({
    displayName: 'SmartItemBylines'
}) `
  span,
  ${BylinePreamble}, ${BylineLink}, ${BylineName} {
    margin: 0;
    text-align: inherit;
    ${({ colorToken }) => getColorStyles('color', colorToken)};
    ${({ typeIdentity }) => getTypographyStyles(typeIdentity)};
    ${invertedTokens};
  }
`;
SmartItemBylines.defaultProps = {
    colorToken: 'colors.discovery.body.white.accreditation',
    invertedColorToken: 'colors.discovery.body.black.accreditation',
    typeIdentity: 'typography.definitions.globalEditorial.accreditation-core'
};
const SmartItemPublishedDate = styled(SmartItemBaseText).withConfig({
    displayName: 'SmartItemPublishedDate'
}) ``;
SmartItemPublishedDate.defaultProps = {
    colorToken: 'colors.discovery.body.white.context-tertiary',
    invertedColorToken: 'colors.discovery.body.black.context-tertiary',
    typeIdentity: 'typography.definitions.globalEditorial.context-tertiary'
};
const SmartItemHedLink = styled(SmartItemBaseText).withConfig({
    displayName: 'SmartItemHedLink'
}) `
  display: block;
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }

  ${({ image }) => {
    const coverLink = !image || image?.contentType !== 'clip';
    return (coverLink &&
        css `
        &::after {
          position: absolute;
          z-index: 1;
          content: '';
          inset: 0;
        }
      `);
}}
`;
SmartItemHedLink.defaultProps = {
    as: 'a',
    colorToken: 'colors.discovery.body.white.heading',
    invertedColorToken: 'colors.discovery.body.black.heading'
};
const SmartItemCTA = styled(BaseLink).withConfig({
    displayName: 'SmartItemCTA'
}) `
  &::after {
    content: ' »';
  }

  ${({ image }) => {
    const coverLink = !image || image?.contentType !== 'clip';
    return (coverLink &&
        css `
        &::before {
          position: absolute;
          content: '';
          inset: 0;
        }
      `);
}}
`;
SmartItemCTA.defaultProps = {
    as: 'a',
    colorToken: 'colors.interactive.base.black',
    hasUnderline: false,
    typeIdentity: 'typography.definitions.utility.button-utility'
};
module.exports = {
    SmartItemBylines,
    SmartItemHedLink,
    SmartItemHed,
    SmartItemDek,
    SmartItemRubric,
    SmartItemPublishedDate,
    SmartItemBaseText,
    SmartItemCTA,
    BoldAsByline
};
//# sourceMappingURL=style-element.js.map

/***/ }),

/***/ 37338:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { css } = __webpack_require__(92168);
const { minScreen, minMaxScreen } = __webpack_require__(26865);
const { minThresholds, maxThresholds } = __webpack_require__(99906);
const injectLayoutStyles = ({ layout, styleSettings = [] }, stylePool) => {
    const [mobileLayout, tabletLayout, desktopLayout] = layout;
    const [mobileSettings, tabletSettings, desktopSettings] = styleSettings;
    // render same style for all the breakpoints if layout contains only mobile
    if (mobileLayout && !tabletLayout && !desktopLayout) {
        return stylePool[mobileLayout]('mobile', mobileSettings);
    }
    const MobileBreakpoint = css `
    ${minMaxScreen(0, `${maxThresholds.md}px`)} {
      ${stylePool[mobileLayout]('mobile', mobileSettings)}
    }
  `;
    const TabletBreakpoint = css `
    ${minMaxScreen(`${minThresholds.lg}px`, `${maxThresholds.lg}px`)} {
      ${stylePool[tabletLayout]('tablet', tabletSettings)}
    }
  `;
    const DesktopBreakpoint = css `
    ${minScreen(`${minThresholds.xl}px`)} {
      ${stylePool[desktopLayout]('desktop', desktopSettings)}
    }
  `;
    const MobileAndTabletBreakpoint = css `
    ${minMaxScreen(0, `${maxThresholds.lg}px`)} {
      ${stylePool[mobileLayout]('mobile', mobileSettings)}
    }
  `;
    const TabletAndDesktopBreakpoint = css `
    ${minScreen(`${minThresholds.lg}px`)} {
      ${stylePool[tabletLayout]('tablet', tabletSettings)}
    }
  `;
    // render same style for mobile and tablet breakpoints if mobile and tablet layouts are same
    // and separate settings doesn't exists
    if (mobileLayout === tabletLayout && !tabletSettings) {
        return css `
      ${MobileAndTabletBreakpoint}
      ${DesktopBreakpoint}
    `;
    }
    // render same style for tablet and desktop breakpoints if tablet and desktop layouts are same
    // and separate settings doesn't exists
    if (tabletLayout === desktopLayout && !desktopSettings) {
        return css `
      ${MobileBreakpoint}
      ${TabletAndDesktopBreakpoint}
    `;
    }
    // render different layout for the each breakpoint
    return css `
    ${MobileBreakpoint}
    ${TabletBreakpoint}
    ${DesktopBreakpoint}
  `;
};
const injectStyleSettings = ({ styleSettings = [] }, styleFunction) => {
    const [mobileSettings, tabletSettings, desktopSettings] = styleSettings;
    // Don't use breakpoints if only mobile settings exists
    if (mobileSettings && !tabletSettings && !desktopSettings) {
        return styleFunction('mobile', mobileSettings);
    }
    const MobileBreakpoint = css `
    ${minMaxScreen(0, `${maxThresholds.md}px`)} {
      ${styleFunction('mobile', mobileSettings)}
    }
  `;
    const TabletBreakpoint = css `
    ${minMaxScreen(`${minThresholds.lg}px`, `${maxThresholds.lg}px`)} {
      ${styleFunction('tablet', tabletSettings)}
    }
  `;
    const DesktopBreakpoint = css `
    ${minScreen(`${minThresholds.xl}px`)} {
      ${styleFunction('desktop', desktopSettings)}
    }
  `;
    const TabletAndDesktopBreakpoint = css `
    ${minScreen(`${minThresholds.lg}px`)} {
      ${styleFunction('tablet', tabletSettings)}
    }
  `;
    const MobileAndTabletBreakpoint = css `
    ${minMaxScreen(0, `${maxThresholds.lg}px`)} {
      ${styleFunction('mobile', mobileSettings)}
    }
  `;
    if (mobileSettings && tabletSettings && !desktopSettings) {
        return css `
      ${MobileBreakpoint}
      ${TabletAndDesktopBreakpoint}
    `;
    }
    if (mobileSettings && desktopSettings && !tabletSettings) {
        return css `
      ${MobileAndTabletBreakpoint}
      ${DesktopBreakpoint}
    `;
    }
    return css `
    ${MobileBreakpoint}
    ${TabletBreakpoint}
    ${DesktopBreakpoint}
  `;
};
const injectorStrategy = new Map([
    ['layout', injectLayoutStyles],
    ['styleSettings', injectStyleSettings]
]);
/**
 *
 * @param {"layout"|"styleSettings"} strategy - strategy to apply for injecting styles
 * @param {object} props - props required for tweaking styles
 * @param {object|Function} handler  - handler for strategy - stylepool or style function
 * @returns {object} - styled component styles
 */
function injectStyles(strategy, props, handler) {
    return injectorStrategy.get(strategy)(props, handler);
}
/**
 * This function selects the style pools coming from parent and apply it to the correct layout
 *
 * @param {string} componentName - Name of the component
 * @returns {Function} - Function returning a function to extend styles
 */
const applyStyleExtensions = (componentName) => (layout, styleSettings, breakPoint) => ({ theme }) => {
    const { componentStylePools } = theme;
    if (componentStylePools && componentStylePools[componentName]) {
        return componentStylePools[componentName]
            .slice()
            .reverse()
            .map((stylePool) => {
            if (stylePool[layout]) {
                return stylePool[layout](breakPoint, styleSettings);
            }
            return undefined;
        })
            .filter(Boolean)
            .reduce((finalStyle, style) => css `
            ${finalStyle}
            ${style}
          `, ``);
    }
    return '';
};
module.exports = {
    injectStyles,
    applyStyleExtensions
};
//# sourceMappingURL=style-pool-injector.js.map

/***/ }),

/***/ 31257:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const SmartComponentWrapper = styled.div.withConfig({
    displayName: 'SmartComponentWrapper'
}) ``;
module.exports = {
    SmartComponentWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 66441:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const CNEVideoEmbed = __webpack_require__(59098);
const { SplitScreenContentHeaderLede, SplitScreenContentHeaderLedeBlock } = __webpack_require__(9481);
const { storyVideoPosition } = __webpack_require__(62327);
/*
 * LeadAsset component
 *
 * @param {object} props - React props
 * @param {object} [props.captionCredit] - Optional if present it will display the caption/credit wrapper
 * @param {string} [props.className] - Optional inserts the className for the main wrapper of lede block
 * @param {boolean} [props.isCNEVideo] - Optional states if the content is realted to CNEVideo, if so then embed is applied
 * @param {object} [props.lede] - describes the props to for the lede
 * @param {object} [props.socialMedia] - Optional it contain the social median wrapper if present then displays the container
 */
const LeadAsset = ({ captionCredit, className, isCNEVideo, lede, socialMedia }) => {
    if (!lede)
        return null;
    if (isCNEVideo) {
        if (!lede.scriptEmbedUrl) {
            return null;
        }
        let cneVideoOverrides = null;
        if (lede.modelName === 'cnevideo' &&
            lede.cneVideoOverrides &&
            Object.keys(lede.cneVideoOverrides).length) {
            cneVideoOverrides = { ...lede.cneVideoOverrides };
        }
        const cneVideoProps = cneVideoOverrides
            ? {
                shouldAutoplay: Boolean(!cneVideoOverrides.disableAutoplay),
                shouldMute: Boolean(cneVideoOverrides.muted),
                shouldPlayContinuously: Boolean(cneVideoOverrides.continuousPlay),
                isStickyType: Boolean(cneVideoOverrides.sticky),
                shouldDisableAds: Boolean(cneVideoOverrides.disableAds),
                shouldLoopVideo: Boolean(cneVideoOverrides.loopVideo)
            }
            : {
                shouldAutoplay: true
            };
        return (React.createElement(SplitScreenContentHeaderLedeBlock, { "data-testid": "ContentHeaderLeadAsset", className: className },
            React.createElement(CNEVideoEmbed, { hasMargins: false, ...cneVideoProps, scriptUrl: lede.scriptEmbedUrl, videoEmbedPosition: storyVideoPosition })));
    }
    return (React.createElement(SplitScreenContentHeaderLedeBlock, { "data-testid": "ContentHeaderLeadAsset", className: className },
        React.createElement(SplitScreenContentHeaderLede, { ...lede, shouldEagerLoad: true, hasNativeImgLazyLoading: true }),
        captionCredit,
        socialMedia));
};
LeadAsset.propTypes = {
    captionCredit: PropTypes.object,
    className: PropTypes.string,
    isCNEVideo: PropTypes.bool,
    lede: PropTypes.object,
    socialMedia: PropTypes.object
};
module.exports = LeadAsset;
//# sourceMappingURL=LeadAsset.js.map

/***/ }),

/***/ 67040:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const SocialIcons = __webpack_require__(35676);
const { calculateSpacing, getColorToken } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { SocialIconsListItem, SocialIconContainer, SocialIconExternalLink, SocialIconsList } = __webpack_require__(51000);
const iconSocialSmall = calculateSpacing(5, 'px');
const SplitScreenContentHeaderSocialIcons = styled(SocialIcons).withConfig({
    displayName: 'SplitScreenContentHeaderSocialIcons'
}) `
  display: none;

  @media (min-width: ${BREAKPOINTS.lg}) {
    display: table;

    &:not(.social-icons--circular) {
      background-color: ${({ theme }) => getColorToken(theme, 'colors.interactive.base.black')};
    }
  }

  ${SocialIconsListItem} {
    padding: 0;

    ${SocialIconExternalLink} ${SocialIconContainer} {
      background-color: transparent;
    }

    &:hover {
      ${SocialIconExternalLink} ${SocialIconContainer} {
        background-color: transparent;
      }
    }
  }

  ${SocialIconsList} {
    @media (min-width: ${BREAKPOINTS.lg}) {
      flex-direction: column;
      margin-left: 0;
    }
  }

  ${SocialIconExternalLink} {
    padding: 10px;
    width: ${calculateSpacing(7)};
    height: ${calculateSpacing(7)};
  }

  .social-icons__list-item--circular {
    ${SocialIconExternalLink} {
      width: ${iconSocialSmall};
      height: ${iconSocialSmall};
    }
  }
`;
module.exports = {
    SplitScreenContentHeaderSocialIcons
};
//# sourceMappingURL=SocialIconShare.styles.js.map

/***/ }),

/***/ 44879:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const throttle = __webpack_require__(7350);
const translations = (__webpack_require__(76707)/* ["default"] */ .A);
const { mapSourcesToSegmentedSources } = __webpack_require__(52009);
const LeadAsset = __webpack_require__(66441);
const ResponsiveAsset = __webpack_require__(73275);
const Rubric = __webpack_require__(34187);
const InfoSlice = __webpack_require__(59525);
const ScoreBox = __webpack_require__(55252);
const Bylines = __webpack_require__(52540);
const PersistentAside = __webpack_require__(40855);
const SocialIcons = __webpack_require__(35676);
const Rating = __webpack_require__(21093);
const getElDimensions = __webpack_require__(94409);
const { formatInfoSliceItems } = __webpack_require__(88722);
const NativeShareButton = __webpack_require__(77554);
const { useNativeShare } = __webpack_require__(90072);
const { getThemedBylineVariation } = __webpack_require__(27053);
const { getOverrideBehaviour } = __webpack_require__(68089);
const { TrackComponentChannel } = __webpack_require__(78788);
const { BookmarkIcon } = __webpack_require__(72964);
const { SplitScreenContentHeaderArtist, SplitScreenContentHeaderArtistSlash, SplitScreenContentHeaderArtistWrapper, SplitScreenContentHeaderByline, SplitScreenContentHeaderCaption, SplitScreenContentHeaderContributorImage, SplitScreenContentHeaderDek, SplitScreenContentHeaderDekDown, SplitScreenContentHeaderDivider, SplitScreenContentHeaderHed, SplitScreenContentHeaderMain, SplitScreenContentHeaderInfoSlice, SplitScreenContentHeaderForMusicReview, SplitScreenContentHeaderNativeShareButton, SplitScreenContentHeaderPublishDate, SplitScreenContentHeaderRating, SplitScreenContentHeaderRubric, SplitScreenContentHeaderRubricIssueDate, SplitScreenContentHeaderSignageRubric, SplitScreenContentHeaderSocialShare, SplitScreenContentHeaderTitleBlock, SplitScreenContentHeaderWrapper, SplitScreenContentHeaderScoreBox, SplitScreenContentHeaderLeadWrapper, SplitScreenContentHeaderArtistLink, SplitScreenContentHeaderGrid, SplitScreenContentHeaderPersistentAside, SplitScreenContentHeaderReleaseYear, SplitScreenContentHeaderLeadOverride, SplitScreenContentHeaderOffersCTA } = __webpack_require__(9481);
const { SplitScreenContentHeaderSocialIcons } = __webpack_require__(67040);
const { doHideBookmark, doDisplayBookmark } = __webpack_require__(69836);
const { BREAKPOINTS } = __webpack_require__(96472);
const FULL_WIDTH_SELECTOR = '.container--full, .full-bleed-ad, .callout--feature-large';
/**
 * This is a temporary hack to add segmented sources to ledes.
 * Without segmentedSources an image may not render the correct aspect ratio.
 * This can be removed once GraphQL moves in.
 *
 * @param {*} lede - the lede asset
 * @returns {*} the augmented lede asset
 */
const transformLegacySources = (lede) => {
    if (!lede) {
        return undefined;
    }
    const augmentedLede = { ...lede };
    if (new Set(['photo', 'cartoon']).has(lede.contentType) &&
        !lede.segmentedSources &&
        lede.sources) {
        augmentedLede.segmentedSources = mapSourcesToSegmentedSources(lede.sources);
    }
    return augmentedLede;
};
const getAspectRatioArray = (aspectRatio) => {
    if (aspectRatio.indexOf(':') !== -1) {
        return aspectRatio.split(':');
    }
    return null;
};
const ContentHeaderRubric = ({ contributors, contributorsPosition, hasInvertedBylineLink, hideContributors, hideIssueDate, hidePublishDate, issueDate, issueLink, publishDate, publishDatePosition, rubric, rubricVariation, hideRubric, themedBylineVariation }) => {
    const RubricVariation = Rubric[rubricVariation] || Rubric;
    const IssueDateRubric = Rubric.Item;
    const hasContributors = contributors && Object.keys(contributors).length !== 0;
    return (React.createElement("div", { "data-testid": "ContentHeaderRubric" },
        hasContributors &&
            !hideContributors &&
            contributorsPosition === 'top' && (React.createElement(SplitScreenContentHeaderByline, { contributors: contributors, bylineVariation: themedBylineVariation, isCompact: false, contributorsPosition: contributorsPosition, hasInvertedBylineLink: hasInvertedBylineLink })),
        rubric && !hideRubric && (React.createElement(SplitScreenContentHeaderRubric, { as: RubricVariation, ...rubric })),
        !hideIssueDate && issueDate && (React.createElement(SplitScreenContentHeaderRubricIssueDate, { as: IssueDateRubric, name: issueDate, url: issueLink })),
        !hidePublishDate && publishDate && publishDatePosition === 'top' && (React.createElement(SplitScreenContentHeaderPublishDate, { "data-testid": "ContentHeaderPublishDate" }, publishDate))));
};
ContentHeaderRubric.propTypes = {
    contributors: PropTypes.object,
    contributorsPosition: PropTypes.oneOf(['top', 'bottom']),
    hasInvertedBylineLink: PropTypes.bool,
    hideContributors: PropTypes.bool,
    hideIssueDate: PropTypes.bool,
    hidePublishDate: PropTypes.bool,
    hideRubric: PropTypes.bool,
    issueDate: PropTypes.string,
    issueLink: PropTypes.string,
    publishDate: PropTypes.string,
    publishDatePosition: PropTypes.oneOf(['top', 'bottom']),
    rubric: PropTypes.shape(Rubric.propTypes),
    rubricVariation: PropTypes.string,
    themedBylineVariation: PropTypes.string
};
const ContentHeaderRubricSignage = ({ signage, shouldDisplaySignage }) => {
    return signage && shouldDisplaySignage ? (React.createElement("div", { "data-testid": "ContentHeaderRubricSignage" },
        React.createElement(SplitScreenContentHeaderSignageRubric, { name: signage }))) : null;
};
ContentHeaderRubricSignage.propTypes = {
    shouldDisplaySignage: PropTypes.bool,
    signage: PropTypes.string
};
const renderSocialMedia = (hasStickySocialIcons, hideSocialIcons, hideSocialIconsOnMobile, socialIconsToHide, socialMedia, socialMediaPositionInMobile, hasSplitScreenSocialShareReduceTopSpacing, showFullHeaderViewInMobile) => socialMedia && (React.createElement(SplitScreenContentHeaderSocialShare, { ...socialMedia, hasSocialShare: true, hasStickySocialIcons: hasStickySocialIcons, hideSocialIcons: hideSocialIcons, hideSocialIconsOnMobile: hideSocialIconsOnMobile, socialIconsToHide: socialIconsToHide, socialMediaPositionInMobile: socialMediaPositionInMobile, ...(showFullHeaderViewInMobile && {
        hasSplitScreenSocialShareReduceTopSpacing
    }) }));
const renderCaptionCreditGrid = (hideCaption, lede) => (lede?.caption || lede?.credit) &&
    !hideCaption && (React.createElement(SplitScreenContentHeaderGrid, null,
    React.createElement(SplitScreenContentHeaderCaption, { dangerousCaptionText: lede.caption, dangerousCredit: lede.credit })));
const { useRef, useEffect } = React;
/**
 * SplitScreenContentHeader component
 *
 * @param {object} props - React props
 * @param {object} [props.artists] - Optional Artist data
 * @param {string} [props.brandSlug] - brand identifier slug value.
 * @param {string} [props.captionPosition] - defines the position of caption, default below header.
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.contentAlign] - Aligns the side content (headline, divider, dek, byline, and date)
 * @param {object} [props.contributorImage] - Optional contributor image object.
 * @param {string} props.dangerousHed - Article Hed
 * @param {string} [props.dangerousDek] - Optional Article Dek
 * @param {boolean} [props.shouldRemoveBylineTopMargin] - To add/remove the margin top of the SplitScreenContentHeaderByline
 * @param {boolean} [props.hasContributorImageBackground] - Display a background color on the contributor image
 * @param {boolean} [props.showFullHeaderViewInMobile] - Feature flag for enabling ACDC space changes
 * @param {boolean} [props.hasImageBottomSpacing] - Add/remove content header image bottom spacing
 * @param {boolean} [props.hasInvertedBylineLink] - Optional, use inverted colors.
 * @param {boolean} [props.hasMargin] - Optional flag to check for margin space.
 * @param {bool} [props.hasNativeShareButton] - Optional show a native share button rather than social sharing
 * @param {boolean} [props.hasSplitScreenSocialShareReduceTopSpacing] - Reduced padding top for SplitScreenContentHeaderSocialShare
 * @param {boolean} [props.hasStickySocialIcons] - Optional hide social icons on desktop, defaults to true.
 * @param {boolean} [props.hideContributors] - Show or hide the contributors
 * @param {boolean} [props.hideContributorTitle] - Show or hide the contributors title
 * @param {boolean} [props.hideDangerousDek] - Show or hide the dangerousDek
 * @param {boolean} [props.hideHeaderDividerInMobile] - To hide header divider in mobile
 * @param {boolean} [props.hideIssueDate] - Show or hide the issue date
 * @param {boolean} [props.hidePublishDate] - Show or hide the publishDate
 * @param {Array} [props.socialIconsToHide] - Optional hide mentioned social icons on mobile - default empty array.
 * @param {boolean} [props.hideSocialIcons] - Optional hide social icons on desktop & mobile
 * @param {boolean} [props.hideSocialIconsOnMobile] - Optional hide social icons on mobile.
 * @param {boolean} [props.hideCaption] - Optional hide Caption.
 * @param {boolean} [props.hideRubric] - Optional hide rubric.
 * @param {string} [props.imageAlignment] - Optional Image alignment.
 * @param {string} [props.interactiveOverride] - Optional interactive element to override the lede image asset
 * @param {object} [props.infoSliceFields] - Optional contains infoSliceItems
 * @param {string} [props.isInset] - Optional defines if the lede image should be inset
 * @param {boolean} [props.isMusicReview] - determines Review is Music review or not.
 * @param {boolean} [props.isRatingClickable] - Optinal flag to make RatingForm Clickable
 * @param {object} [props.isTextRight] - Optional defines if title block should be to the righ.
 * @param {boolean} [props.isTrackReview] - determines Review is Track review or not.
 * @param {string} [props.issueDate] - Optional issue date
 * @param {string} [props.issueLink] - Optional link for this article's issue
 * @param {bool} [props.isSplitScreenArtistLarge] - Optional boolean to define large size of SplitScreenContentHeaderArtist
 * @param {object} [props.rubric] - Optional rubric.
 * @param {string} [props.rubricVariation] - The name of the variation of Rubric to use
 * @param {object} [props.contributors] -  Optional object containing data to create authors byline.
 * @param {string} [props.contributorsPosition] - Sets position of contributors at the top or the bottom of the content header.
 * @param {string} [props.contributorsBelowHeaderPosition] - Sets display position of contributors at the top or the bottom of the content header info section.
 * @param {string} [props.bylineVariation] - Optional variation of byline.
 * @param {string} [props.persistentAsideAlign] - Optional persistentAside alignment.
 * @param {string} props.publishDate - Publish Date.
 * @param {string} props.publishDatePosition - Sets position of publish at the top or the bottom of content header.
 * @param {object} [props.lede] - Optional lede image asset
 * @param {object} [props.ledeContentAlign] - Optional change alignment of the lede asset content (caption, credit)
 * @param {object} [props.modifiedDate] - Optional modified date of the content
 * @param {object} [props.musicRating] - optional Music rating
 * @param {bool} [props.shouldAlignCenterWhenNoCaption] - should apply center align on mobile when only credit no caption present
 * @param {bool} [props.shouldEnableNativeShareOnDesktop] - Optional
 * @param {bool} [props.shouldFitToViewport] - Optional defines if the lede image should match the viewport height
 * @param {bool} [props.shouldHeaderFitToViewport] - Optional defines if the header should fit to view port height - defalt is false
 * @param {bool} [props.showBookmarked] - Optional show a bookmarked -default is false
 * @param {object} [props.showContentDivider] - Optional show a divider between hed and dek.
 * @param {boolean} [props.showContributorImage] - Optional show the contributor image.
 * @param {boolean} [props.showHeaderDivider] - Optional show / Hide header section divider.
 * @param {object} [props.socialMedia] - Optional Social Icon Links to share article.
 * @param {string} [props.socialMediaPositionInMobile] - Optional describes Social Icon Links position in article - default inTitleBlock.
 * @param {object} [props.socialTitle] - Optional social title to be used with the native share button.
 * @param {object} [props.socialDescription] - Optional social description to be used with the native share button.
 * @param {object} [props.stickySocialAnchorBottom] - Optional Sticky Social Icon bottom anchor selectors.
 * @param {object} [props.stickySocialAnchorTop] - Optional Sticky Social Icon top anchor selectors.
 * @param {string} [props.theme] - Optional theme name
 * @param {theme} [props.rating] - Optional rating details
 * @param {object} [props.signage] - Optional article signage
 * @param {bool} [props.shouldDisplaySignage] - Optional boolean to display signage, defaults to false
 * @param {string} [props.textAlign] - Optional text alignment
 *
 * @returns {ReactElement} <div>
 */
/* eslint-disable complexity */
const SplitScreenContentHeader = ({ artists, brandSlug = '', captionPosition = 'belowHeader', className, contentAlign = 'center', config = {
    adsConfig: {
        contentHeaderRubricName: undefined
    }
}, contributorImage, dangerousDek, dangerousHed, shouldRemoveBylineTopMargin, hasContributorImageBackground = false, showFullHeaderViewInMobile = false, hasInvertedBylineLink = false, hasBottomSpacingOnMobileHeader = false, hasMargin = false, hasSplitScreenSocialShareReduceTopSpacing, hasStickySocialIcons = true, hasNativeShareButton, hideContributorTitle = false, hideContributors = false, hideDangerousDek = false, hideHeaderDividerInMobile, hasImageBottomSpacing, hideIssueDate, hidePublishDate = false, hideRubric = false, socialIconsToHide = [], hideSocialIcons = false, hideSocialIconsOnMobile = false, hideCaption = false, imageAlignment = 'center', infoSliceFields, interactiveOverride, isInset = false, isMusicReview, isTextRight = false, isTrackReview, issueDate, issueLink, isRatingClickable, isSplitScreenArtistLarge, rubric, rubricVariation, contributors, contributorsPosition = 'bottom', contributorsBelowHeaderPosition = 'top', bylineVariation, persistentAsideAlign = 'left', publishDate, publishDatePosition = 'bottom', lede, ledeContentAlign = 'left', modifiedDate, musicRating = {
    score: null
}, offers, offersCTA, shouldEnableNativeShareOnDesktop = false, shouldFitToViewport = true, showBookmarked = false, shouldHeaderFitToViewport = false, showContentDivider = false, showContributorImage = true, showHeaderDivider = true, socialDescription, socialMedia, socialMediaPositionInMobile = 'inTitleBlock', socialTitle, stickySocialAnchorBottom = {
    selector: '.page',
    edge: 'bottom'
}, stickySocialAnchorTop = {
    selector: "[data-testid='SplitScreenContentHeaderWrapper']",
    edge: 'bottom'
}, theme = 'standard', rating, signage, shouldDisplaySignage, showReviewLink = true, textAlign = 'center', shouldAlignCenterWhenNoCaption = false }) => {
    if (rubric) {
        rubric.name = config.adsConfig?.contentHeaderRubricName || rubric.name;
    }
    const [viewportWidth, setViewPortWidth] = React.useState('100vw');
    React.useEffect(() => {
        if (isInset && "object" !== 'undefined') {
            const mediaQueryString = `(min-width: ${BREAKPOINTS.md})`;
            const isWidthInDesktopBreakpointRange = window.matchMedia(mediaQueryString).matches;
            if (isWidthInDesktopBreakpointRange) {
                // window.visualViewport.width gives the width minus the vertical scrollbar width
                const widthMinusScrollBar = window.visualViewport?.width;
                widthMinusScrollBar && setViewPortWidth(`${widthMinusScrollBar}px`);
            }
        }
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SplitScreenContentHeader'
        });
    }, [isInset]);
    const isFireworkOverride = getOverrideBehaviour(interactiveOverride) === 'CTA-firework';
    const themedBylineVariation = getThemedBylineVariation({
        bylineVariation,
        theme
    });
    const { showNativeShareButton, pageUrl } = useNativeShare(hasNativeShareButton, shouldEnableNativeShareOnDesktop);
    const { score, isBestNewMusic, isBestNewReissue } = musicRating;
    const infoSliceItems = formatInfoSliceItems(infoSliceFields);
    const releaseYear = infoSliceFields?.releaseYear;
    const augmentedLede = transformLegacySources(lede);
    const isCNEVideo = lede?.modelName === 'cnevideo';
    const isFullWidth = !lede || isCNEVideo;
    const { rating: averageRatingCount, count: totalRatingCount } = rating || {};
    const SplitScreenContentHeaderTopMain = isMusicReview
        ? SplitScreenContentHeaderForMusicReview
        : SplitScreenContentHeaderMain;
    const { formatMessage } = useIntl();
    const bookmarkLink = {
        label: 'Save story',
        url: '#',
        network: 'bookmark',
        behavior: 'bookmark'
    };
    const leadAssetProps = {};
    const bookmarkWrapperRef = useRef();
    if (captionPosition === 'belowImage') {
        leadAssetProps.captionCredit = renderCaptionCreditGrid(hideCaption, lede);
    }
    if (socialMediaPositionInMobile === 'inLeadWrapperBelowImg') {
        leadAssetProps.socialMedia = renderSocialMedia(hasStickySocialIcons, hideSocialIcons, hideSocialIconsOnMobile, socialIconsToHide, socialMedia, socialMediaPositionInMobile, showFullHeaderViewInMobile);
    }
    const hasMoved = (node) => {
        const offsetTop = node.current && node.current.offsetTop;
        const position = window.pageYOffset;
        return Math.abs(position) > Math.abs(offsetTop);
    };
    const handleScroll = () => {
        const node = bookmarkWrapperRef;
        const showBookMark = hasMoved(node);
        if (showBookMark) {
            doDisplayBookmark();
        }
        else {
            doHideBookmark();
        }
    };
    useEffect(() => {
        const throttledScroll = throttle(handleScroll, 100);
        window.addEventListener('scroll', throttledScroll, { passive: true });
        return () => {
            window.removeEventListener('scroll', throttledScroll);
        };
    });
    const dateTimeProps = modifiedDate && { datetime: modifiedDate };
    const insetImgAspectRatioForDesktop = isInset && augmentedLede?.segmentedSources?.lg[0]?.aspectRatio;
    const imgAspectRatioForDesktop = insetImgAspectRatioForDesktop
        ? getAspectRatioArray(insetImgAspectRatioForDesktop)
        : null;
    const hasLedeTextAlignCenterForMobile = shouldAlignCenterWhenNoCaption && (!lede?.caption || lede?.caption === '');
    // render contributors byline
    const renderContributorsByline = () => {
        if (!contributors || !hideContributors)
            return null;
        return (React.createElement(SplitScreenContentHeaderByline, { contributors: contributors, bylineVariation: !hideContributorTitle ? bylineVariation : 'Item', isCompact: false, isMusicReview: isMusicReview, contentAlign: contentAlign }));
    };
    return (React.createElement(SplitScreenContentHeaderWrapper, { className: classnames('content-header', 'standard', {
            [className]: className
        }), contentHeaderTheme: theme, isFullWidth: isFullWidth, isTextRight: isTextRight, isInset: isInset, imageAlignment: imageAlignment, ledeContentAlign: ledeContentAlign, shouldFitToViewport: !shouldFitToViewport, isMusicReview: isMusicReview, "data-testid": "SplitScreenContentHeaderWrapper", showHeaderDivider: showHeaderDivider, socialMediaPositionInMobile: socialMediaPositionInMobile, hideSocialIconsOnMobile: hideSocialIconsOnMobile, hideSocialIcons: hideSocialIcons, shouldHeaderFitToViewport: shouldHeaderFitToViewport, captionPosition: captionPosition, hidePublishDate: hidePublishDate, mediaContentType: augmentedLede?.contentType || '', hasInvertedBylineLink: hasInvertedBylineLink, hasBottomSpacingOnMobileHeader: hasBottomSpacingOnMobileHeader, hasMargin: hasMargin, imgAspectRatioForDesktop: imgAspectRatioForDesktop, viewportWidth: viewportWidth, hasLedeTextAlignCenterForMobile: hasLedeTextAlignCenterForMobile, hasPublishDateBottomPadding: showFullHeaderViewInMobile &&
            (!socialMedia || hideSocialIcons || hideSocialIconsOnMobile), ...(showFullHeaderViewInMobile && {
            hasImageBottomSpacing,
            hideHeaderDividerInMobile
        }) },
        React.createElement(SplitScreenContentHeaderTopMain, { className: theme, showHeaderDivider: theme === 'standard' ? showHeaderDivider : true, shouldFitToViewport: !shouldFitToViewport },
            React.createElement(SplitScreenContentHeaderTitleBlock, { contentAlign: contentAlign, textAlign: textAlign, hasBottomSpacingOnMobileHeader: hasBottomSpacingOnMobileHeader },
                React.createElement(ContentHeaderRubricSignage, { signage: signage, shouldDisplaySignage: shouldDisplaySignage }),
                React.createElement(ContentHeaderRubric, { ...{
                        contributors,
                        contributorsPosition,
                        rubric,
                        rubricVariation,
                        hideContributors,
                        hideIssueDate,
                        hidePublishDate,
                        issueDate,
                        issueLink,
                        publishDate,
                        publishDatePosition,
                        hideRubric,
                        hasInvertedBylineLink,
                        themedBylineVariation,
                        shouldRemoveBylineTopMargin
                    } }),
                React.createElement(SplitScreenContentHeaderHed, { dangerouslySetInnerHTML: { __html: dangerousHed }, "data-testid": "ContentHeaderHed", isMusicReview: isMusicReview }),
                isFireworkOverride && (React.createElement(SplitScreenContentHeaderLeadOverride, { dangerouslySetInnerHTML: {
                        __html: interactiveOverride.markup
                    } })),
                showContentDivider && (React.createElement(SplitScreenContentHeaderDivider, { ledeContentAlign: ledeContentAlign, hasLedeTextAlignCenterForMobile: hasLedeTextAlignCenterForMobile })),
                artists && isMusicReview ? (React.createElement(SplitScreenContentHeaderArtistWrapper, { isMusicReview: isMusicReview },
                    artists.length === 0 && (React.createElement(SplitScreenContentHeaderArtist, { isSplitScreenArtistLarge: isSplitScreenArtistLarge }, formatMessage(translations.variousArtists))),
                    artists.map((artist, index) => {
                        return (React.createElement(React.Fragment, { key: index },
                            React.createElement(SplitScreenContentHeaderArtistLink, { key: index, href: '/'.concat(artist.uri) },
                                React.createElement(SplitScreenContentHeaderArtist, { dangerouslySetInnerHTML: { __html: artist.name }, isSplitScreenArtistLarge: isSplitScreenArtistLarge })),
                            !(index === artists.length - 1) && (React.createElement(SplitScreenContentHeaderArtistSlash, { dangerouslySetInnerHTML: { __html: ' / ' }, isSplitScreenArtistLarge: isSplitScreenArtistLarge }))));
                    }))) : (!hideDangerousDek &&
                    dangerousDek && (React.createElement(SplitScreenContentHeaderDek, { dangerouslySetInnerHTML: { __html: dangerousDek } }))),
                showContributorImage && contributorImage && (React.createElement(SplitScreenContentHeaderContributorImage, { ...contributorImage, sizes: "66px", hasContributorImageBackground: hasContributorImageBackground })),
                contributors &&
                    !hideContributors &&
                    contributorsPosition === 'bottom' && (React.createElement(SplitScreenContentHeaderByline, { contributors: contributors, bylineVariation: themedBylineVariation, isCompact: false, hasInvertedBylineLink: hasInvertedBylineLink, ...(showFullHeaderViewInMobile && {
                        shouldRemoveBylineTopMargin
                    }), contentAlign: contentAlign })),
                !hidePublishDate && publishDatePosition === 'bottom' && (React.createElement(SplitScreenContentHeaderPublishDate, { "data-testid": "ContentHeaderPublishDate", hasPublishDateBottomPadding: showFullHeaderViewInMobile &&
                        (!socialMedia || hideSocialIcons || hideSocialIconsOnMobile), ...dateTimeProps }, publishDate)),
                (isMusicReview || isTrackReview) && releaseYear && (React.createElement(SplitScreenContentHeaderReleaseYear, { "data-testid": "SplitScreenContentHeaderReleaseYear" }, releaseYear)),
                showBookmarked && (React.createElement("div", { ref: bookmarkWrapperRef },
                    React.createElement(BookmarkIcon, { bookmarkTrackingType: "header", link: bookmarkLink, theme: "standard", type: "thin", isUrlBookmark: true, isBookmarkButton: true }))),
                !!averageRatingCount && !!totalRatingCount && (React.createElement(SplitScreenContentHeaderRating, { averageRatingCount: Math.round(averageRatingCount * 10) / 10, brandSlug: brandSlug, hasBorderTop: true, showReviewLink: showReviewLink, link: {
                        label: formatMessage(translations.ratingLinkLabel),
                        onClick: (e) => {
                            e.preventDefault();
                            const el = document.getElementById('reviews');
                            const { top } = getElDimensions(el);
                            el?.focus();
                            // Nav height - 56
                            window.scrollTo(0, top - 56);
                        },
                        url: '#reviews'
                    }, totalRatingCount: totalRatingCount, isRatingClickable: isRatingClickable })),
                offers?.length && (React.createElement(SplitScreenContentHeaderOffersCTA, { hideTopDisclaimerOnMobile: true, showHeaderButton: true, ctaText: offersCTA, offers: offers })),
                showNativeShareButton ? (React.createElement(SplitScreenContentHeaderNativeShareButton, null,
                    React.createElement(NativeShareButton, { shareData: {
                            url: pageUrl,
                            title: socialTitle,
                            text: socialDescription
                        } }))) : (renderSocialMedia(hasStickySocialIcons, hideSocialIcons, hideSocialIconsOnMobile, socialIconsToHide, socialMedia, socialMediaPositionInMobile, hasSplitScreenSocialShareReduceTopSpacing, showFullHeaderViewInMobile))),
            React.createElement(SplitScreenContentHeaderLeadWrapper, { isMusicReview: isMusicReview },
                React.createElement(LeadAsset, { lede: augmentedLede, isCNEVideo: isCNEVideo, ...leadAssetProps }),
                isMusicReview &&
                    (isBestNewMusic ||
                        isBestNewReissue ||
                        isTrackReview ||
                        score != null) && (React.createElement(SplitScreenContentHeaderScoreBox, null,
                    React.createElement(ScoreBox, { rating: score, isBestNewMusic: isBestNewMusic, isBestNewReissue: isBestNewReissue, isTrackReview: isTrackReview }))))),
        captionPosition === 'belowHeader' &&
            renderCaptionCreditGrid(hideCaption, lede),
        contributorsBelowHeaderPosition === 'top' && renderContributorsByline(),
        infoSliceItems.length > 0 && (React.createElement(SplitScreenContentHeaderGrid, null,
            React.createElement(SplitScreenContentHeaderInfoSlice, null,
                React.createElement(InfoSlice, { items: infoSliceItems, isMusicReview: isMusicReview })))),
        !hideDangerousDek && isMusicReview && dangerousDek && (React.createElement(SplitScreenContentHeaderGrid, null,
            React.createElement(SplitScreenContentHeaderDekDown, { dangerouslySetInnerHTML: { __html: dangerousDek } }))),
        contributorsBelowHeaderPosition === 'bottom' &&
            renderContributorsByline(),
        !showNativeShareButton && hasStickySocialIcons && socialMedia && (React.createElement(SplitScreenContentHeaderPersistentAside, { align: persistentAsideAlign, attributes: { shouldFadeOnMove: true }, anchorBottom: stickySocialAnchorBottom, anchorTop: stickySocialAnchorTop, fullWidthSelector: FULL_WIDTH_SELECTOR },
            React.createElement(SplitScreenContentHeaderSocialIcons, { ...socialMedia, bookmarkTrackingType: "sticky", className: "social-icons--share" })))));
};
/* eslint-enable complexity */
SplitScreenContentHeader.propTypes = {
    artists: PropTypes.array,
    brandSlug: PropTypes.string,
    bylineVariation: PropTypes.string,
    captionPosition: PropTypes.oneOf(['belowHeader', 'belowImage']),
    className: PropTypes.string,
    config: PropTypes.object,
    contentAlign: PropTypes.oneOf(['center', 'left']),
    contributorImage: PropTypes.shape(ResponsiveAsset.propTypes),
    contributors: PropTypes.shape(Bylines.propTypes.contributors),
    contributorsBelowHeaderPosition: PropTypes.oneOf(['top', 'bottom']),
    contributorsPosition: PropTypes.oneOf(['top', 'bottom']),
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string.isRequired,
    hasBottomSpacingOnMobileHeader: PropTypes.bool,
    hasContributorImageBackground: PropTypes.bool,
    hasImageBottomSpacing: PropTypes.bool,
    hasInvertedBylineLink: PropTypes.bool,
    hasMargin: PropTypes.bool,
    hasNativeShareButton: PropTypes.bool,
    hasSplitScreenSocialShareReduceTopSpacing: PropTypes.bool,
    hasStickySocialIcons: PropTypes.bool,
    hideCaption: PropTypes.bool,
    hideContributors: PropTypes.bool,
    hideContributorTitle: PropTypes.bool,
    hideDangerousDek: PropTypes.bool,
    hideHeaderDividerInMobile: PropTypes.bool,
    hideIssueDate: PropTypes.bool,
    hidePublishDate: PropTypes.bool,
    hideRubric: PropTypes.bool,
    hideSocialIcons: PropTypes.bool,
    hideSocialIconsOnMobile: PropTypes.bool,
    imageAlignment: PropTypes.oneOf(['center', 'top', 'left', 'right', 'bottom']),
    infoSliceFields: PropTypes.object,
    interactiveOverride: PropTypes.shape({
        markup: PropTypes.string,
        behavior: PropTypes.string
    }),
    isInset: PropTypes.bool,
    isMusicReview: PropTypes.bool,
    isRatingClickable: PropTypes.bool,
    isSplitScreenArtistLarge: PropTypes.bool,
    issueDate: PropTypes.string,
    issueLink: PropTypes.string,
    isTextRight: PropTypes.bool,
    isTrackReview: PropTypes.bool,
    lede: PropTypes.oneOfType([PropTypes.shape(ResponsiveAsset.propTypes)]),
    ledeContentAlign: PropTypes.oneOf(['left', 'center']),
    modifiedDate: PropTypes.string,
    musicRating: PropTypes.object,
    offers: PropTypes.array,
    offersCTA: PropTypes.string,
    persistentAsideAlign: PropTypes.oneOf(['left', 'left-lead-asset']),
    publishDate: PropTypes.string.isRequired,
    publishDatePosition: PropTypes.oneOf(['top', 'bottom']),
    rating: PropTypes.shape(Rating.propTypes),
    rubric: PropTypes.shape(Rubric.propTypes),
    rubricVariation: PropTypes.string,
    shouldAlignCenterWhenNoCaption: PropTypes.bool,
    shouldDisplaySignage: PropTypes.bool,
    shouldEnableNativeShareOnDesktop: PropTypes.bool,
    shouldFitToViewport: PropTypes.bool,
    shouldHeaderFitToViewport: PropTypes.bool,
    shouldRemoveBylineTopMargin: PropTypes.bool,
    showBookmarked: PropTypes.bool,
    showContentDivider: PropTypes.bool,
    showContributorImage: PropTypes.bool,
    showFullHeaderViewInMobile: PropTypes.bool,
    showHeaderDivider: PropTypes.bool,
    showReviewLink: PropTypes.bool,
    signage: PropTypes.string,
    socialDescription: PropTypes.string,
    socialIconsToHide: PropTypes.array,
    socialMedia: PropTypes.shape(SocialIcons.propTypes),
    socialMediaPositionInMobile: PropTypes.oneOf([
        'inLeadWrapperBelowImg',
        'inTitleBlock'
    ]),
    socialTitle: PropTypes.string,
    stickySocialAnchorBottom: PersistentAside.propTypes.anchorBottom,
    stickySocialAnchorTop: PersistentAside.propTypes.anchorTop,
    textAlign: PropTypes.oneOf(['left', 'center']),
    theme: PropTypes.oneOf(['standard', 'inverted', 'special'])
};
SplitScreenContentHeader.displayName = 'SplitScreenContentHeader';
module.exports = SplitScreenContentHeader;
//# sourceMappingURL=SplitScreenContentHeader.js.map

/***/ }),

/***/ 84231:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(44879);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 9481:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { BaseText, BaseLink } = __webpack_require__(76955);
const { BREAKPOINTS } = __webpack_require__(96472);
const { maxThresholds } = __webpack_require__(99906);
const { applyGridSpacing } = __webpack_require__(1123);
const { calculateSpacing, getColorToken, getLinkStyles, getTypographyStyles, maxScreen, minScreen, minMaxScreen } = __webpack_require__(26865);
const { roundImageBase } = __webpack_require__(52027);
const Bylines = __webpack_require__(52540);
const { BylineLink, BylineWrapper } = __webpack_require__(74423);
const Caption = __webpack_require__(14760);
const { CaptionWrapper } = __webpack_require__(38860);
const Grid = __webpack_require__(86659);
const Rating = __webpack_require__(21093);
const ResponsiveAsset = __webpack_require__(86157);
const SocialIcons = __webpack_require__(35676);
const { SocialIconsWrapper } = __webpack_require__(51000);
const OffersData = __webpack_require__(19762);
const Rubric = __webpack_require__(34187);
const { RubricLink } = __webpack_require__(6613);
const { ResponsiveClipWrapper, ResponsiveClipPlayPauseButton, ResponsiveClipVideoContainer } = __webpack_require__(91783);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const PersistentAside = __webpack_require__(40855);
const { GridItem, GridWrapper } = __webpack_require__(40653);
const { Design, shim } = __webpack_require__(75163);
const cssTohideSocialIcons = (socialIconsToHide) => socialIconsToHide
    .map((socialShareKey) => `
        .social-icons__list-item--${socialShareKey} {
          display: none;
        }
    `)
    .join('\n');
const addSplitHeaderTitleBlockPaddings = () => `
  padding-right: ${calculateSpacing(3)};
  padding-left: ${calculateSpacing(3)};

  ${minScreen(BREAKPOINTS.xl)} {
    padding-right: 0;
    padding-left: 0;
  }
`;
const SplitScreenContentHeaderHed = styled(BaseText).withConfig({
    displayName: 'SplitScreenContentHeaderHed'
}) `
  margin: 0;
  padding: ${calculateSpacing(4)} 0;
  color: var(${Design.Color.TextHeading});

  ${({ isMusicReview }) => isMusicReview &&
    `
        ${minMaxScreen(BREAKPOINTS.sm, '767px')} {
          padding: ${calculateSpacing(0)};
        }
        `}

  ${minScreen(BREAKPOINTS.sm)} {
    padding: ${calculateSpacing(2)} 0;
  }
`;
SplitScreenContentHeaderHed.defaultProps = {
    as: 'h1',
    typeIdentity: 'typography.definitions.consumptionEditorial.hed-standard'
};
const SplitScreenContentHeaderArtist = styled(BaseText).withConfig({
    displayName: 'SplitScreenContentHeaderArtist'
}) `
  margin: 0;
  color: var(${Design.Color.TextHeading});
  font-size: ${({ isSplitScreenArtistLarge }) => isSplitScreenArtistLarge ? `28px` : 'inherit'};
`;
SplitScreenContentHeaderArtist.defaultProps = {
    as: 'div',
    typeIdentity: 'typography.definitions.consumptionEditorial.description-core'
};
const SplitScreenContentHeaderArtistSlash = styled.span.withConfig({
    displayName: 'SplitScreenContentHeaderArtistSlash'
}) `
  color: var(${Design.Color.TextHeading});
  font-size: ${({ isSplitScreenArtistLarge }) => isSplitScreenArtistLarge ? `28px` : 'inherit'};
`;
SplitScreenContentHeaderArtistSlash.defaultProps = {
    typeIdentity: 'typography.definitions.consumptionEditorial.description-core'
};
const SplitScreenContentHeaderArtistLink = styled(BaseLink).withConfig({
    displayName: 'SplitScreenContentHeaderArtistLink'
}) `
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
`;
SplitScreenContentHeaderArtistLink.displayName =
    'SplitScreenContentHeaderArtistLink';
const SplitScreenContentHeaderArtistWrapper = styled.ul.withConfig({
    displayName: 'SplitScreenContentHeaderArtistWrapper'
}) `
  padding-left: ${calculateSpacing(0)};
  ${({ isMusicReview }) => isMusicReview &&
    `
  ${minMaxScreen(BREAKPOINTS.sm, '767px')} {
    margin-top: ${calculateSpacing(0)};
    padding-top: ${calculateSpacing(0)};
  }
  `}
`;
const SplitScreenContentHeaderDek = styled(BaseText).withConfig({
    displayName: 'SplitScreenContentHeaderDek'
}) `
  margin: 0;
  padding-bottom: ${calculateSpacing(4)};
  color: var(${Design.Color.TextDek});

  ${minScreen(BREAKPOINTS.sm)} {
    padding-bottom: ${calculateSpacing(2)};
  }

  .small {
    text-transform: lowercase;
    font-style: inherit;
    font-variant: small-caps;
  }
`;
SplitScreenContentHeaderDek.defaultProps = {
    as: 'div',
    typeIdentity: 'typography.definitions.consumptionEditorial.description-core'
};
const SplitScreenContentHeaderDekDown = styled(BaseText).withConfig({
    displayName: 'SplitScreenContentHeaderDekDown'
}) `
  padding-top: ${calculateSpacing(1)};
  padding-bottom: ${calculateSpacing(3)};
  text-align: center;
`;
SplitScreenContentHeaderDekDown.defaultProps = {
    as: 'div',
    typeIdentity: 'typography.definitions.consumptionEditorial.description-core'
};
const SplitScreenContentHeaderInfoSlice = styled.div.withConfig({
    displayName: 'SplitScreenContentHeaderInfoSlice'
}) `
  align-items: center;
  padding-top: ${calculateSpacing(0)};
`;
const SplitScreenContentHeaderNativeShareButton = styled.div.withConfig({
    displayName: 'SplitScreenContentHeaderNativeShareButton'
}) `
  background-color: transparent;
  padding: ${calculateSpacing(4)} 0;
`;
const SplitScreenContentHeaderTitleBlock = styled.div.withConfig({
    displayName: 'SplitScreenContentHeaderTitleBlock'
}) `
  ${addSplitHeaderTitleBlockPaddings()};

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;

  > * {
    max-width: 500px;
  }

  ${({ contentAlign }) => contentAlign === 'left' &&
    `
      align-items: flex-start;
      margin-left: ${calculateSpacing(4.5)};
      text-align: left;

        ${maxScreen(`calc(${BREAKPOINTS.md} - 1px)`)} {
          margin-left: 0px;
        }
    `};

  ${({ textAlign }) => textAlign === 'left' &&
    `
    text-align: left;

    > * {
      margin: 0 auto;
      width: 100%;
    }
    `};
  ${maxScreen(`calc(${BREAKPOINTS.md} - 1px)`)} {
    ${({ hasBottomSpacingOnMobileHeader }) => hasBottomSpacingOnMobileHeader &&
    `padding-bottom: ${calculateSpacing(3)};`}
  }
`;
const SplitScreenContentHeaderLedeBlock = styled.div.withConfig({
    displayName: 'SplitScreenContentHeaderLedeBlock'
}) ``;
const SplitScreenContentHeaderMain = styled(Grid.TwoUpFullBleedNoGap).withConfig({
    displayName: 'SplitScreenContentHeaderMain'
}) `
  border-bottom: ${({ showHeaderDivider }) => showHeaderDivider ? '1px' : '0px'}
    solid var(${Design.Color.BorderStory});
  background: var(${Design.Color.Surface});
  color: var(${Design.Color.Text});

  &.grid-full-bleed {
    ${minScreen(BREAKPOINTS.md)} {
      grid-template-rows: auto 1fr;

      /* Make the content header full bleed for all viewport height and remove the stacked nav size so the content header occupies all the visible space. */
      ${SplitScreenContentHeaderLedeBlock} {
        height: calc(100vh - 108px);
        ${({ shouldFitToViewport }) => shouldFitToViewport &&
    `height: 100%;
          min-height:calc(100vh - 108px);
          `}
      }
    }
    ${maxScreen(BREAKPOINTS.lg)} {
      ${SplitScreenContentHeaderLedeBlock} {
        height: 100%;
        ${({ shouldFitToViewport }) => shouldFitToViewport &&
    `min-height: 100%;
          `}
      }
    }
    ${GridItem} {
      align-items: center;
      justify-content: center;
      text-align: center;
    }
  }
`;
const SplitScreenContentHeaderLeadWrapper = styled.div.withConfig({
    displayName: 'SplitScreenContentHeaderLeadWrapper'
}) `
  ${({ isMusicReview }) => isMusicReview &&
    `
    display: flex;
    flex-direction: row;
  `}
  align-items: left;
  justify-content: center;
  text-align: center;

  ${ResponsiveClipWrapper} {
    display: block;
  }
`;
const SplitScreenContentHeaderScoreBox = styled.div.withConfig({
    displayName: 'SplitScreenContentHeaderScoreBox'
}) `
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: justify;
  ${minScreen(BREAKPOINTS.sm)} {
    margin-bottom: ${calculateSpacing(4)};
    padding-left: ${calculateSpacing(2)};
  }
  ${minScreen(BREAKPOINTS.md)} {
    margin-bottom: ${calculateSpacing(0)};
    padding-left: ${calculateSpacing(4)};
  }
`;
const SplitScreenContentHeaderContributorImageWithBackground = css `
  display: inline-block;
  border-radius: 50%;
  background-color: #f5f5f5;
  overflow: hidden;
`;
const SplitScreenContentHeaderContributorImage = styled(ResponsiveAsset).withConfig({
    displayName: 'SplitScreenContentHeaderContributorImage'
}) `
  ${roundImageBase('100%', '60px', '66px')};
  margin-right: auto;
  margin-bottom: ${calculateSpacing(2)};
  margin-left: auto;

  img {
    width: 100%;
  }

  ${({ hasContributorImageBackground }) => hasContributorImageBackground &&
    SplitScreenContentHeaderContributorImageWithBackground}
`;
const SplitScreenContentHeaderByline = styled(Bylines).withConfig({
    displayName: 'SplitScreenContentHeaderByline'
}) `
  ${getTypographyStyles('typography.definitions.globalEditorial.accreditation-feature')}
  padding-bottom: ${calculateSpacing(1)};
  color: var(${Design.Color.TextByline});

  ${({ isMusicReview }) => isMusicReview &&
    `${minScreen(BREAKPOINTS.sm)} {
      margin-top: ${calculateSpacing(2)};
      justify-content: center;
      display: flex;
    }
    `}

  ${({ contributorsPosition }) => contributorsPosition === 'top' &&
    `
      display: inline-block;
      margin: 0 1rem 0 0;
    `}

${({ shouldRemoveBylineTopMargin }) => shouldRemoveBylineTopMargin &&
    css `
      ${BylineWrapper} {
        margin-top: ${calculateSpacing(0.5)};

        &:first-child {
          margin-top: 0;
        }
      }
    `}

    & span {
    text-align: ${({ contentAlign }) => contentAlign};
  }
`;
const SplitScreenContentHeaderPublishDate = styled.time
    .withConfig({
    displayName: 'SplitScreenContentHeaderPublishDate'
})
    .attrs(({ datetime }) => ({ dateTime: datetime })) `
  display: inline-flex;
  color: var(${Design.Color.TextPubdate});
  ${getTypographyStyles('typography.definitions.globalEditorial.context-tertiary')};
  ${({ hasPublishDateBottomPadding }) => hasPublishDateBottomPadding &&
    `
    ${maxScreen(`${maxThresholds.lg}px`)} {
      padding-bottom: ${calculateSpacing(4)};
    }
  `}
`;
const SplitScreenContentHeaderReleaseYear = styled.time.withConfig({
    displayName: 'SplitScreenContentHeaderReleaseYear'
}) `
  ${getTypographyStyles('typography.definitions.globalEditorial.context-tertiary')};
`;
const SplitScreenContentHeaderRating = styled(Rating).withConfig({
    displayName: 'SplitScreenContentHeaderRating'
}) `
  max-width: none;
`;
const SplitScreenContentHeaderSocialShare = styled(SocialIcons.Standard).withConfig({
    displayName: 'SplitScreenContentHeaderSocialShare'
}) `
  background-color: transparent;
  padding: ${calculateSpacing(4)} 0;

  ${({ socialMediaPositionInMobile }) => socialMediaPositionInMobile === 'inLeadWrapperBelowImg' &&
    `
    display: grid;
    justify-items: center;
  `}

  ${({ hasSplitScreenSocialShareReduceTopSpacing }) => hasSplitScreenSocialShareReduceTopSpacing &&
    `padding-top: ${calculateSpacing(2)};`}

  /* Hide sosial share icons on mobile */
  ${({ hideSocialIconsOnMobile }) => hideSocialIconsOnMobile &&
    `
      @media (min-width: 0) and (max-width: ${BREAKPOINTS.lg}) {
        display: none;
      }
  `}

  /* Hide social icon mentioned in props - social-icons */
  ${({ hideSocialIconsOnMobile, socialIconsToHide }) => !hideSocialIconsOnMobile &&
    `
      ${maxScreen(BREAKPOINTS.lg)} {
        ${cssTohideSocialIcons(socialIconsToHide)}
      }
    `}

  /* Hide social share icons */
  ${({ hideSocialIcons }) => hideSocialIcons && `display: none;`}
      
  /* Hide social share icons on desktop */
    ${({ hasStickySocialIcons }) => hasStickySocialIcons &&
    `
      @media (min-width: ${BREAKPOINTS.lg}) {
        display: none;
      }
    `}
`;
const SplitScreenContentHeaderCaption = styled(Caption).withConfig({
    displayName: 'SplitScreenContentHeaderCaption'
}) `
  padding-top: ${calculateSpacing(1)};

  &${CaptionWrapper} {
    margin: 0;
  }
`;
const SplitScreenContentHeaderRubric = styled.div.withConfig({
    displayName: 'SplitScreenContentHeaderRubric'
}) `
  &:only-child {
    margin-right: 0;
  }
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-primary')}
  display: inline-flex;
  margin: ${calculateSpacing(4)} ${calculateSpacing(0.5)} 0
    ${calculateSpacing(0.5)};
  color: var(${Design.Color.TextRubric});

  ${minScreen(BREAKPOINTS.md)} {
    margin: 0 ${calculateSpacing(2)} 0 0;
  }

  ${RubricLink} {
    vertical-align: baseline;
  }
`;
const SplitScreenContentHeaderLede = styled(ResponsiveAsset).withConfig({
    displayName: 'SplitScreenContentHeaderLede'
}) `
  height: 100%;

  &.responsive-asset {
    ${minScreen(BREAKPOINTS.md)} {
      padding-bottom: 0;
      height: 100%;

      ${ResponsiveClipVideoContainer} {
        .responsive-clip__video {
          height: 100%;
        }
        position: relative;
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    ${maxScreen(BREAKPOINTS.md)} {
      ${ResponsiveClipVideoContainer} {
        padding: 0 1.5rem 1.5rem;
      }

      ${ResponsiveImageContainer} {
        img {
          padding-bottom: 1.5rem;
        }
      }
    }

    ${ResponsiveClipPlayPauseButton} {
      display: none;
    }
  }

  .responsive-image {
    width: 100%;
    height: 100%;
  }

  ${ResponsiveImageContainer} {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
`;
const SplitScreenContentHeaderForMusicReview = styled(Grid.EvenAny).withConfig({
    displayName: 'SplitScreenContentHeaderForMusicReview'
}) `
  border-bottom: ${({ showHeaderDivider }) => showHeaderDivider ? '1px' : '0px'}
    solid var(${Design.Color.BorderStory});
  background: var(${Design.Color.Surface});
  color: var(${Design.Color.Text});

  &.grid-even-any {
    ${minScreen(BREAKPOINTS.sm)} {
      ${SplitScreenContentHeaderLede} {
        ${ResponsiveImageContainer} {
          margin-bottom: ${calculateSpacing(4)};
          max-width: 204px;
          height: 204px;
          object-fit: contain;
        }
      }
    }

    ${minScreen(BREAKPOINTS.md)} {
      ${({ shouldFitToViewport }) => shouldFitToViewport ? `max-width: 1600px;` : `max-width: none;`}
      grid-template-columns: 37% auto;
      ${SplitScreenContentHeaderLede} {
        ${ResponsiveImageContainer} {
          margin-top: ${calculateSpacing(4)};
          max-width: 312px;
          height: 312px;
          object-fit: contain;
        }
      }
    }
    ${minScreen('980px')} {
      grid-template-columns: 50% auto;
    }
  }
`;
const SplitScreenContentHeaderRubricIssueDate = styled(BaseText).withConfig({
    displayName: 'SplitScreenContentHeaderRubricIssueDate'
}) `
  display: inline-flex;
  margin: 0 ${calculateSpacing(0.5)};
  color: var(${Design.Color.TextPubdate});
  ${minScreen(BREAKPOINTS.md)} {
    margin: 0;
  }
`;
SplitScreenContentHeaderRubricIssueDate.defaultProps = {
    as: 'div',
    typeIdentity: 'typography.definitions.globalEditorial.context-primary'
};
const SplitScreenContentHeaderSignageRubric = styled(Rubric.Card).withConfig({
    displayName: 'SplitScreenContentHeaderSignageRubric'
}) ``;
const SplitScreenContentHeaderThemeStandard = () => {
    return css `
    ${SplitScreenContentHeaderRubricIssueDate} {
      ${RubricLink} {
        ${({ theme }) => getLinkStyles(theme, 'colors.consumption.lead.standard.heading', 'colors.consumption.lead.standard.heading', 'global')};
      }
    }

    ${SplitScreenContentHeaderByline} > * {
      ${BylineLink},
      .byline__social-link {
        ${({ theme, hasInvertedBylineLink }) => hasInvertedBylineLink
        ? getLinkStyles(theme, 'colors.consumption.lead.inverted.link', 'colors.consumption.lead.inverted.link-hover', 'global')
        : getLinkStyles(theme, 'colors.consumption.lead.standard.link', 'colors.consumption.lead.standard.link-hover', 'global')};
        transition: color 200ms ease;
      }
    }
  `;
};
const SplitScreenContentHeaderThemeInverted = () => {
    return css `
    ${SplitScreenContentHeaderRubric} {
      ${RubricLink} {
        ${({ theme }) => getLinkStyles(theme, 'colors.consumption.lead.inverted.context-signature', 'colors.consumption.lead.inverted.context-signature', 'global')};
      }
    }

    ${SplitScreenContentHeaderRubricIssueDate} {
      ${RubricLink} {
        ${({ theme }) => getLinkStyles(theme, 'colors.consumption.lead.inverted.context-tertiary', 'colors.consumption.lead.inverted.context-tertiary', 'global')};
      }
    }

    ${SplitScreenContentHeaderByline} > * {
      ${BylineLink},
      .byline__social-link {
        ${({ theme, isMusicReview }) => isMusicReview
        ? getLinkStyles(theme, 'colors.consumption.lead.standard.link', 'colors.consumption.lead.standard.link-hover', 'global')
        : getLinkStyles(theme, 'colors.consumption.lead.inverted.link', 'colors.consumption.lead.inverted.link-hover', 'global')};
        transition: color 200ms ease;
      }
    }

    .social-icons__list-item--standard {
      .icon path {
        fill: ${getColorToken('colors.interactive.base.white')};
      }

      .social-icons__link--bookmark {
        background: ${getColorToken('colors.consumption.lead.inverted.accent')};

        .icon-bookmark-fill,
        .icon-bookmark-stroke {
          fill: ${getColorToken('colors.interactive.base.white')};
        }

        &:hover {
          background: ${getColorToken('colors.interactive.base.brand-primary')};
        }
      }

      .social-icons__link--bookmarkactivated {
        background: ${getColorToken('colors.interactive.base.brand-primary')};

        .icon-bookmark-fill,
        .icon-bookmark-stroke {
          fill: ${getColorToken('colors.interactive.base.white')};
        }
        ${minScreen(BREAKPOINTS.md)} {
          &:hover {
            background: ${getColorToken('colors.interactive.base.white')};
          }
        }
      }
    }

    ${SplitScreenContentHeaderSocialShare} {
      .icon path {
        fill: ${getColorToken('colors.interactive.base.white')};
      }

      .social-icons__list-item--standard {
        .icon path {
          fill: ${getColorToken('colors.interactive.base.white')};
        }

        .social-icons__link--bookmark {
          background: ${getColorToken('colors.consumption.lead.inverted.accent')};

          .icon-bookmark-fill,
          .icon-bookmark-stroke {
            fill: ${getColorToken('colors.interactive.base.white')};
          }

          &:hover {
            background: ${getColorToken('colors.interactive.base.brand-primary')};
          }
        }

        .social-icons__link--bookmarkactivated {
          background: ${getColorToken('colors.interactive.base.brand-primary')};

          .icon-bookmark-fill,
          .icon-bookmark-stroke {
            fill: ${getColorToken('colors.interactive.base.white')};
          }

          ${minScreen(BREAKPOINTS.md)} {
            &:hover {
              fill: ${getColorToken('colors.interactive.base.white')};
            }
          }
        }
      }
    }
  `;
};
const SplitScreenContentHeaderThemeSpecial = css `
  ${SplitScreenContentHeaderRubric} {
    ${RubricLink} {
      ${({ theme }) => getLinkStyles(theme, 'colors.consumption.lead.special.context-signature', 'colors.consumption.lead.special.context-signature', 'global')};
    }
  }

  ${SplitScreenContentHeaderRubricIssueDate} {
    ${RubricLink} {
      ${({ theme }) => getLinkStyles(theme, 'colors.consumption.lead.special.context-tertiary', 'colors.consumption.lead.special.context-tertiary', 'global')};
    }
  }

  ${SplitScreenContentHeaderByline} > * {
    ${BylineLink},
    ${BylineWrapper} {
      ${({ theme }) => getLinkStyles(theme, 'colors.consumption.lead.special.link', 'colors.consumption.lead.special.link-hover', 'global')};
      transition: color 200ms ease;
    }
  }
`;
const SplitScreenContentHeaderFullWidth = (shouldFitToViewport) => {
    return `
  ${SplitScreenContentHeaderMain}, ${SplitScreenContentHeaderForMusicReview} {
    &.grid-full-bleed {
      ${SplitScreenContentHeaderLedeBlock} {
        grid-column: 1/-1;
        height: auto;
      }
      ${shouldFitToViewport && `min-height: auto;`};
    }
  }
   
  ${SplitScreenContentHeaderTitleBlock} {
    padding-top: ${calculateSpacing(4, 'px')};
    padding-bottom: ${calculateSpacing(2, 'px')};

    ${minScreen(BREAKPOINTS.md)} {
      padding-bottom: ${calculateSpacing(4, 'px')};
    }
  }
`;
};
const SplitScreenContentHeaderTextPositionRight = css `
  ${GridItem}:first-child {
    ${minScreen(BREAKPOINTS.md)} {
      order: 2;
    }
  }
`;
const SplitScreenContentHeaderMusicLede = css `
  padding: ${calculateSpacing(0)};
  object-fit: fill;
`;
const DESKTOP_INSET_IMG_PADDING_UNIT = 4;
const SplitScreenContentHeaderIsInset = css `
  ${SplitScreenContentHeaderLede} {
    ${ResponsiveImageContainer}, ${ResponsiveClipVideoContainer} {
      ${applyGridSpacing('padding')};
      ${maxScreen(BREAKPOINTS.md)} {
        padding-bottom: ${calculateSpacing(3)};
      }
      ${({ isMusicReview }) => isMusicReview && `${applyGridSpacing('padding', true)};`}
      ${minScreen(BREAKPOINTS.md)} {
        padding: ${calculateSpacing(DESKTOP_INSET_IMG_PADDING_UNIT)};
        object-fit: contain;
        ${({ isMusicReview }) => isMusicReview && SplitScreenContentHeaderMusicLede};
      }
    }

    ${({ hasImageBottomSpacing }) => !hasImageBottomSpacing &&
    `
        ${ResponsiveImageContainer} {
          ${maxScreen(`${maxThresholds.md}px`)} {
            padding-bottom: 0;
          }
        }
      `}
  }

  ${({ shouldFitToViewport, imgAspectRatioForDesktop, viewportWidth }) => {
    if (shouldFitToViewport && imgAspectRatioForDesktop && viewportWidth) {
        /*
         * Calculate the height of the image and apply to the grid, as img may take time to load
         * which will result in the text content centered in the next grid column to jump
         * once the image loads due to the difference in the height
         * height: calc(((viewport width / (number of columns = which is 2 here) * aspect ratio height) / aspect ratio width) - padding assigned to ResponsiveImageContainer)
         */
        const columnsCount = 2;
        const [aspectRatioWidth, aspectRatioHeight] = imgAspectRatioForDesktop;
        const containerPadding = calculateSpacing(DESKTOP_INSET_IMG_PADDING_UNIT);
        return `&& ${SplitScreenContentHeaderLedeBlock} {
        ${minScreen(BREAKPOINTS.md)} {
          height: calc((((${viewportWidth} / ${columnsCount}) * ${aspectRatioHeight})/${aspectRatioWidth}) - ${containerPadding});
        }
      }`;
    }
    return ``;
}}

  ${({ isFullWidth, isTextRight }) => {
    if (!isFullWidth && !isTextRight)
        return `${SplitScreenContentHeaderTitleBlock} {
          ${minScreen(BREAKPOINTS.md)} {
            padding-right: 0;
          }
        }`;
    if (!isFullWidth && isTextRight)
        return `${SplitScreenContentHeaderTitleBlock} {
          ${minScreen(BREAKPOINTS.md)} {
            padding-left: 0;
          }
        }`;
    return '';
}}
`;
const SplitScreenContentHeaderImageAlignmentTop = css `
  ${SplitScreenContentHeaderLede} {
    ${ResponsiveImageContainer} {
      object-position: top;
    }
  }
`;
const SplitScreenContentHeaderImageAlignmentRight = css `
  ${SplitScreenContentHeaderLede} {
    ${ResponsiveImageContainer} {
      object-position: right;
    }
  }
`;
const SplitScreenContentHeaderImageAlignmentLeft = css `
  ${SplitScreenContentHeaderLede} {
    ${ResponsiveImageContainer} {
      object-position: left;
    }
  }
`;
const SplitScreenContentHeaderImageAlignmentBottom = css `
  ${SplitScreenContentHeaderLede} {
    ${ResponsiveImageContainer} {
      object-position: bottom;
    }
  }
`;
const SplitScreenContentHeaderLedeContentAlignmentLeft = css `
  ${SplitScreenContentHeaderCaption} {
    text-align: left;
  }
`;
const SplitScreenContentHeaderLedeContentAlignmentCenter = css `
  ${SplitScreenContentHeaderCaption} {
    text-align: center;
  }
`;
const SplitScreenContentHeaderDivider = styled.span.withConfig({
    displayName: 'SplitScreenContentHeaderDivider'
}) `
  display: block;
  grid-column: 1 / -1;
  margin-bottom: ${calculateSpacing(4)};
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: var(${Design.Color.BorderAccent});
  width: 100px;

  ${({ ledeContentAlign }) => ledeContentAlign === 'center' && `justify-self: center;`}

  ${maxScreen(`${maxThresholds.md}px`)} {
    ${({ hasLedeTextAlignCenterForMobile }) => hasLedeTextAlignCenterForMobile && `justify-self: center;`}
  }
`;
const SplitScreenContentHeaderGrid = styled(Grid.WithMargins).withConfig({
    displayName: 'SplitScreenContentHeaderGrid'
}) `
  > ${GridItem} {
    grid-column: 1 / -1;
    ${minScreen(BREAKPOINTS.md)} {
      grid-column: 2 / -2;
    }
  }
`;
const SplitScreenContentHeaderOffersCTA = styled(OffersData).withConfig({
    displayName: 'ContentHeaderOffersData'
}) `
  margin-right: ${calculateSpacing(6)};

  &&.disclaimer-container {
    display: block;
    grid-column: main;

    @media (min-width: ${BREAKPOINTS.lg}) {
      display: none;
    }
  }

  &&.offer-data {
    grid-column: main;
    margin-top: ${calculateSpacing(4)};
    width: 100%;
    max-width: 300px;
  }
`;
const videoClipStyling = () => css `
  ${ResponsiveClipWrapper} {
    display: flex;
    justify-content: center;
    padding: ${calculateSpacing(4)};

    ${ResponsiveClipVideoContainer} {
      display: flex;
      position: inherit;
      align-items: center;

      video {
        width: 100%;
        height: 100%;
      }
    }
  }

  ${maxScreen(`calc(${BREAKPOINTS.md} - 1px)`)} {
    ${ResponsiveClipWrapper} {
      padding: 0 calc(1 * var(--grid-margin));

      ${ResponsiveClipVideoContainer} {
        justify-content: center;
        width: 100%;
        overflow: hidden;

        video {
          width: auto;
        }
      }
    }
  }
`;
const cssForHeaderFitToViewport = () => css `
  ${videoClipStyling()}

  ${minScreen(`${BREAKPOINTS.md}`)} {
    ${SplitScreenContentHeaderMain} {
      grid-template-rows: 100%;
    }

    ${SplitScreenContentHeaderMain} {
      > div:nth-child(2) {
        > div:nth-child(1) {
          display: grid;
          align-items: center;
          height: 100%;

          ${({ mediaContentType }) => mediaContentType === 'clip' && `display: block;`}
        }
      }
    }
  }

  ${maxScreen(`calc(${BREAKPOINTS.lg} - 1px)`)} {
    ${SplitScreenContentHeaderMain} {
      height: calc(100vh - 56px);
    }
  }

  ${maxScreen(`calc(${BREAKPOINTS.md} - 1px)`)} {
    ${SplitScreenContentHeaderTitleBlock} {
      ${SplitScreenContentHeaderRubric} {
        margin-top: ${calculateSpacing(2)};
      }
    }

    ${SplitScreenContentHeaderMain} {
      display: flex;
      flex-direction: column;
      justify-content: center;

      > div:nth-child(2) {
        flex: 1;
        overflow: hidden;

        ${SplitScreenContentHeaderLeadWrapper} {
          height: 100%;
        }

        ${SplitScreenContentHeaderLedeBlock} {
          height: 100%;
        }

        ${SplitScreenContentHeaderLede} {
          ${ResponsiveImageContainer} {
            object-fit: scale-down;
          }
        }
      }
    }
  }

  /* exceptional case to fit image as per screen specially height iphone X to 13 pro max */
  /* It should not impact other devices that why using height width combination */
  ${minMaxScreen(`375px`, `428px`)} and (min-height: 737px) and (max-height: 926px) {
    ${SplitScreenContentHeaderMain} {
      > div:nth-child(2) {
        ${SplitScreenContentHeaderLede} {
          ${ResponsiveImageContainer} {
            object-fit: cover;
          }
        }
      }
    }
  }

  ${SplitScreenContentHeaderPublishDate} {
    padding-bottom: ${calculateSpacing(2)};

    ${({ hasPublishDateBottomPadding }) => hasPublishDateBottomPadding &&
    css `
        ${maxScreen(`${maxThresholds.lg}px`)} {
          padding-bottom: ${calculateSpacing(4)};
        }
      `}
  }

  ${SocialIconsWrapper} {
    padding-bottom: ${calculateSpacing(2)};

    ${minMaxScreen(BREAKPOINTS.md, `calc(${BREAKPOINTS.lg} - 1px)`)} {
      /* for ipad: add top padding 16px if publish date to hide, else 0 if publish date present */
      ${({ hidePublishDate }) => hidePublishDate
    ? `padding-top: ${calculateSpacing(2)};`
    : `
                padding-top: 0;
          `}
    }

    ${maxScreen(`calc(${BREAKPOINTS.md} - 1px)`)} {
      /* for mobile: add top padding 0 if caption position is not below image else 16px */
      ${({ captionPosition }) => captionPosition === 'belowImage'
    ? `padding-top: 0;`
    : `
            padding-top: ${calculateSpacing(2)};
          `}
    }

    /* small screen / Iphone 4 changes */
    ${maxScreen(BREAKPOINTS.sm)} {
      padding-bottom: ${calculateSpacing(1)};
    }
  }

  ${SplitScreenContentHeaderHed} {
    padding-top: ${calculateSpacing(1)};
    padding-bottom: ${calculateSpacing(2)};
  }

  ${SplitScreenContentHeaderByline} {
    padding-bottom: ${calculateSpacing(1)};

    p {
      margin-top: 0;
    }
  }

  /* Iphone 4 changes - START */
  ${maxScreen(BREAKPOINTS.sm)} {
    ${SplitScreenContentHeaderTitleBlock} {
      ${SplitScreenContentHeaderRubric} {
        margin-top: ${calculateSpacing(2)};
      }
    }

    ${SplitScreenContentHeaderHed} {
      padding-top: ${calculateSpacing(1)};
      padding-bottom: ${calculateSpacing(1)};
      line-height: ${calculateSpacing(3)};
      /* font changes required for small screens as per figma */
      font-size: ${calculateSpacing(2.5)};
    }

    ${SplitScreenContentHeaderSocialShare} {
      padding-bottom: ${calculateSpacing(2)};
    }
  }
  /* Iphone 4 changes - END */

  ${SplitScreenContentHeaderLedeBlock} {
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* add padding bottom to mobile view if caption or social media is not below image */
    ${({ captionPosition, socialMediaPositionInMobile }) => captionPosition !== 'belowImage' &&
    socialMediaPositionInMobile !== 'inLeadWrapperBelowImg' &&
    `${maxScreen(`calc(${BREAKPOINTS.md} - 1px)`)} {
              padding-bottom: ${calculateSpacing(2)};
             }
          `}

    ${minScreen(BREAKPOINTS.md)} {
      /* image span */
      span${SplitScreenContentHeaderLede} {
        align-self: center;
        ${({ mediaContentType }) => mediaContentType === 'clip' && `width: 100%;`}

        ${({ captionPosition }) => captionPosition === 'belowImage'
    ? `
                  ${minScreen(BREAKPOINTS.xl)} {
                    max-width: ${calculateSpacing(75)};
                    max-height: ${calculateSpacing(99.75)};
                  }
      
                  ${minMaxScreen(BREAKPOINTS.md, `calc(${BREAKPOINTS.xl} - 1px)`)} {
                    max-width: ${calculateSpacing(45.25)};
                    max-height: ${calculateSpacing(60.25)};
                  }
      
                  ${ResponsiveImageContainer} {
                    object-fit: scale-down;
                    padding: 0;
                  }
                `
    : `
              ${minScreen(BREAKPOINTS.xxl)} {
                max-width: ${calculateSpacing(75)};
                max-height: ${calculateSpacing(99.75)};
              }
            `}
      }
    }

    /* caption/credit block changes */
    ${SplitScreenContentHeaderCaption} {
      padding-top: ${calculateSpacing(2)};
      padding-bottom: ${calculateSpacing(2)};
    }
  }
`;
const displaySocialIcons = () => `
    /* hide social icon div on mobile from title block and visible in lead block */
    ${maxScreen(`calc(${BREAKPOINTS.md} - 1px)`)} {
      ${SplitScreenContentHeaderTitleBlock} {
        ${SplitScreenContentHeaderSocialShare} {
          display: none;
        }
       }
      
      ${SplitScreenContentHeaderLeadWrapper} {
        ${SplitScreenContentHeaderSocialShare} {
          display: ${({ hideSocialIconsOnMobile, hideSocialIcons }) => hideSocialIconsOnMobile || hideSocialIcons ? 'none' : 'grid'};
        }
      }
    }
    
    /* hide social icon div till lg view for lead block and visile in title block */
    ${minMaxScreen(BREAKPOINTS.md, `calc(${BREAKPOINTS.lg} - 1px)`)} {
      ${SplitScreenContentHeaderTitleBlock} {
        ${SplitScreenContentHeaderSocialShare} {
          display: ${({ hideSocialIconsOnMobile, hideSocialIcons }) => hideSocialIconsOnMobile || hideSocialIcons ? 'none' : 'block'};
        }
      }
        
      ${SplitScreenContentHeaderLeadWrapper} {
        ${SplitScreenContentHeaderSocialShare} {
          display: none;
        }
      }
    }
  `;
const SplitScreenContentHeaderWrapper = styled.header.withConfig({
    displayName: 'SplitScreenContentHeaderWrapper'
}) `
  &.standard,
  .standard {
    ${({ theme }) => shim(theme, {
    [Design.Color.BorderAccent]: 'colors.consumption.lead.standard.accent',
    [Design.Color.BorderStory]: 'colors.consumption.lead.standard.divider',
    [Design.Color.Surface]: 'colors.consumption.lead.standard.background',
    [Design.Color.Text]: 'colors.consumption.body.standard.body',
    [Design.Color.TextByline]: 'colors.consumption.lead.standard.accreditation',
    [Design.Color.TextDek]: 'colors.consumption.lead.standard.description',
    [Design.Color.TextHeading]: 'colors.consumption.lead.standard.heading',
    [Design.Color.TextImageCaption]: 'colors.consumption.lead.standard.description',
    [Design.Color.TextImageCredit]: 'colors.consumption.body.standard.body-deemphasized',
    [Design.Color.TextPubdate]: 'colors.consumption.lead.standard.context-tertiary',
    [Design.Color.TextRubric]: 'colors.consumption.lead.standard.context-signature'
})}
  }

  &.inverted,
  .inverted {
    ${({ theme }) => shim(theme, {
    [Design.Color.BorderAccent]: 'colors.consumption.lead.inverted.accent',
    [Design.Color.BorderStory]: 'colors.consumption.lead.inverted.divider',
    [Design.Color.Surface]: 'colors.consumption.lead.inverted.background',
    [Design.Color.Text]: 'colors.consumption.body.inverted.body',
    [Design.Color.TextByline]: 'colors.consumption.lead.inverted.accreditation',
    [Design.Color.TextDek]: 'colors.consumption.lead.inverted.description',
    [Design.Color.TextHeading]: 'colors.consumption.lead.inverted.heading',
    [Design.Color.TextImageCaption]: 'colors.consumption.lead.inverted.description',
    [Design.Color.TextImageCredit]: 'colors.consumption.body.inverted.body-deemphasized',
    [Design.Color.TextPubdate]: 'colors.consumption.lead.inverted.context-tertiary',
    [Design.Color.TextRubric]: 'colors.consumption.lead.inverted.context-signature'
})}
  }

  &.special,
  .special {
    ${({ theme }) => shim(theme, {
    [Design.Color.BorderAccent]: 'colors.consumption.lead.special.accent',
    [Design.Color.BorderStory]: 'colors.consumption.lead.special.divider',
    [Design.Color.Surface]: 'colors.consumption.lead.special.background',
    [Design.Color.Text]: 'colors.consumption.body.special.body',
    [Design.Color.TextByline]: 'colors.consumption.lead.special.accreditation',
    [Design.Color.TextDek]: 'colors.consumption.lead.special.description',
    [Design.Color.TextHeading]: 'colors.consumption.lead.special.heading',
    [Design.Color.TextImageCaption]: 'colors.consumption.lead.special.description',
    [Design.Color.TextImageCredit]: 'colors.consumption.body.special.body-deemphasized',
    [Design.Color.TextPubdate]: 'colors.consumption.lead.special.context-tertiary',
    [Design.Color.TextRubric]: 'colors.consumption.lead.special.context-signature'
})}
  }

  ${SplitScreenContentHeaderMain}, ${SplitScreenContentHeaderForMusicReview} {
    ${({ hideHeaderDividerInMobile }) => hideHeaderDividerInMobile &&
    `
        ${maxScreen(`${maxThresholds.md}px`)} {
          border-bottom: 0;
        }
        `}
  }

  ${SplitScreenContentHeaderSignageRubric} {
    margin-bottom: ${calculateSpacing(1)};

    ${minScreen(BREAKPOINTS.sm)} {
      margin-top: ${calculateSpacing(2)};
    }
  }

  ${({ contentHeaderTheme }) => {
    if (contentHeaderTheme === 'standard') {
        return SplitScreenContentHeaderThemeStandard;
    }
    else if (contentHeaderTheme === 'inverted') {
        return SplitScreenContentHeaderThemeInverted;
    }
    return SplitScreenContentHeaderThemeSpecial;
}}

  ${({ hasMargin }) => hasMargin && `margin: ${calculateSpacing(4)} 0;`}

  ${({ isTextRight }) => isTextRight && SplitScreenContentHeaderTextPositionRight};

  ${({ isFullWidth, shouldFitToViewport }) => isFullWidth && SplitScreenContentHeaderFullWidth(shouldFitToViewport)}

  ${({ imageAlignment }) => {
    if (imageAlignment === 'top')
        return SplitScreenContentHeaderImageAlignmentTop;
    else if (imageAlignment === 'right')
        return SplitScreenContentHeaderImageAlignmentRight;
    else if (imageAlignment === 'left')
        return SplitScreenContentHeaderImageAlignmentLeft;
    else if (imageAlignment === 'bottom')
        return SplitScreenContentHeaderImageAlignmentBottom;
    return '';
}}

  ${({ isInset }) => isInset && SplitScreenContentHeaderIsInset};

  ${({ ledeContentAlign }) => ledeContentAlign === 'left'
    ? SplitScreenContentHeaderLedeContentAlignmentLeft
    : SplitScreenContentHeaderLedeContentAlignmentCenter}

  ${maxScreen(`${maxThresholds.md}px`)} {
    ${({ hasLedeTextAlignCenterForMobile }) => hasLedeTextAlignCenterForMobile &&
    css `
        ${SplitScreenContentHeaderLedeContentAlignmentCenter}
      `}
  }

  @media print {
    ${({ contentHeaderTheme }) => {
    if (contentHeaderTheme === 'standard') {
        return SplitScreenContentHeaderThemeStandard;
    }
    else if (contentHeaderTheme === 'inverted') {
        return SplitScreenContentHeaderThemeInverted;
    }
    return SplitScreenContentHeaderThemeSpecial;
}}

    display: block;

    ${SplitScreenContentHeaderMain}, ${SplitScreenContentHeaderForMusicReview} {
      grid-template-columns: none;
      border-bottom: none;
      ${GridItem}:first-child {
        order: 0;
      }

      ${GridWrapper}.grid-full-bleed {
        ${SplitScreenContentHeaderLedeBlock} {
          height: auto;
          max-height: ${calculateSpacing(69)};

          ${ResponsiveImageContainer} {
            object-fit: contain;
            padding: ${calculateSpacing(4)};
            max-height: ${calculateSpacing(69)};
          }
        }
      }
    }
    ${SocialIconsWrapper} {
      display: none;
    }
  }

  ${({ socialMediaPositionInMobile }) => socialMediaPositionInMobile === 'inLeadWrapperBelowImg' &&
    displaySocialIcons()}

  ${({ shouldHeaderFitToViewport }) => shouldHeaderFitToViewport && cssForHeaderFitToViewport()}
`;
const SplitScreenContentHeaderPersistentAside = styled(PersistentAside).withConfig({
    displayName: 'SplitScreenContentHeaderPersistentAside'
}) ``;
const SplitScreenContentHeaderLeadOverride = styled.div.withConfig({
    displayName: 'SplitScreenContentHeaderLeadOverride'
}) ``;
module.exports = {
    SplitScreenContentHeaderArtist,
    SplitScreenContentHeaderArtistSlash,
    SplitScreenContentHeaderArtistWrapper,
    SplitScreenContentHeaderByline,
    SplitScreenContentHeaderCaption,
    SplitScreenContentHeaderContributorImage,
    SplitScreenContentHeaderDek,
    SplitScreenContentHeaderDekDown,
    SplitScreenContentHeaderDivider,
    SplitScreenContentHeaderHed,
    SplitScreenContentHeaderInfoSlice,
    SplitScreenContentHeaderLede,
    SplitScreenContentHeaderLedeBlock,
    SplitScreenContentHeaderMain,
    SplitScreenContentHeaderForMusicReview,
    SplitScreenContentHeaderNativeShareButton,
    SplitScreenContentHeaderPublishDate,
    SplitScreenContentHeaderRating,
    SplitScreenContentHeaderRubric,
    SplitScreenContentHeaderRubricIssueDate,
    SplitScreenContentHeaderSignageRubric,
    SplitScreenContentHeaderSocialShare,
    SplitScreenContentHeaderTitleBlock,
    SplitScreenContentHeaderWrapper,
    SplitScreenContentHeaderLeadWrapper,
    SplitScreenContentHeaderScoreBox,
    SplitScreenContentHeaderArtistLink,
    SplitScreenContentHeaderGrid,
    SplitScreenContentHeaderPersistentAside,
    SplitScreenContentHeaderReleaseYear,
    SplitScreenContentHeaderLeadOverride,
    SplitScreenContentHeaderOffersCTA
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 76707:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    ratingLinkLabel: {
        id: 'SplitScreenContentHeader.RatingLinkLabel',
        defaultMessage: 'Read Reviews',
        description: 'SplitScreenContentHeader component Rating Link Label'
    },
    variousArtists: {
        id: 'SplitScreenContentHeader.VariousArtists',
        defaultMessage: 'Various Artists',
        description: 'SplitScreenContentHeader component various artists text'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 88722:
/***/ ((module) => {

const INFO_SLICE_ITEMS_LABELS = {
    genre: 'Genre:',
    label: 'Label:',
    reviewDate: 'Reviewed:'
};
const formatInfoSliceItems = (infoSliceFields) => {
    if (!infoSliceFields)
        return [];
    const items = [];
    Object.keys(infoSliceFields).forEach((key) => {
        if (infoSliceFields[key] &&
            infoSliceFields[key].length &&
            INFO_SLICE_ITEMS_LABELS[key]) {
            items.push({
                key: INFO_SLICE_ITEMS_LABELS[key],
                value: infoSliceFields[key]
            });
        }
    });
    return items;
};
module.exports = {
    formatInfoSliceItems
};
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 78141:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(56165)/* ["default"] */ .A);
const { SelectedStoriesList, SelectedStoriesSectionTitle, SelectedStoriesGrid } = __webpack_require__(52058);
const SectionTitle = __webpack_require__(24277);
/**
 * LargeDeviceSelectedStories
 *
 * @param {object} props - React props
 * @param {Array} props.items - Article objects
 * @param {string} props.sectionTitleVariation - Optional variation of SectionTitle to use
 * @param {string} props.selectedStoriesHeadline - Header for seleted stories section.
 * @param {string} props.selectedStoriesImageWidth - Width of images for selected stories.
 * @param {boolean} props.shouldUseDekForselectedStoriesHeadline - Prop to set the dek as heading for seleted stories section.
 * @param {boolean} props.shouldHideSelectedStoriesByline - prop to hide byline for selected stories Item
 * @param {boolean} [props.shouldHideSelectedStoriesHeadline] - Hide selected stories headline
 * @param {boolean} [props.shouldHideDangerousDek] - Hide dek on selected stories
 * @param {boolean} [props.shouldShowStackedRatingsCard] - Optional flag to show StackedRatingsCard instead of SummaryItem
 * @param {object} [props.stackedRatingsCardProps] - Props for stacked rating card
 * @param {object} [props.snowplowEvent] - Optional. Properties that can be passed to snowplow event navigation on click
 * @param {string} [props.summaryItemVariation] - Summary item variation to use
 * @param {string} props.trackingNamespace - Tracking namespace
 * @param {boolean} [props.isImageOnRight] - An optional boolean flag to set summary item image on right
 * @param {object} [props.actionBarConfig] - Config for ActionBar
 * @returns {ReactElement} - Component tree
 */
const LargeDeviceSelectedStories = ({ items, sectionTitleVariation = 'TextCenter', selectedStoriesHeadline, selectedStoriesImageWidth, shouldUseDekForselectedStoriesHeadline = false, summaryItemVariation = 'TextBelowDesktopOnlyThirds', shouldHideSelectedStoriesByline = false, shouldHideSelectedStoriesHeadline = false, shouldHideDangerousDek = false, shouldShowStackedRatingsCard = false, stackedRatingsCardProps, snowplowEvent, trackingNamespace, isImageOnRight, actionBarConfig }) => {
    const intl = useIntl();
    if (!items.length) {
        return null;
    }
    return (React.createElement(SelectedStoriesGrid, { selectedStoriesImageWidth: selectedStoriesImageWidth, isImageOnRight: isImageOnRight },
        !shouldHideSelectedStoriesHeadline && (React.createElement(SelectedStoriesSectionTitle, { as: SectionTitle[sectionTitleVariation], className: "SelectedStoriesSectionTitle", dangerousHed: shouldUseDekForselectedStoriesHeadline
                ? selectedStoriesHeadline
                : intl.formatMessage(translations.selectedStoriesHeading), hasDividerBelow: true })),
        React.createElement(SelectedStoriesList, { snowplowEvent: { ...snowplowEvent, placement: 'right-rail' }, items: items, shouldHideFinalBorder: true, shouldHideSponsoredAd: true, hasMarginSpacing: true, hideRubricItemSummary: true, hasUnderlineHed: false, shouldShowStackedRatingsCard: shouldShowStackedRatingsCard, ...stackedRatingsCardProps, shouldHideBylines: shouldHideSelectedStoriesByline, shouldHideDangerousDek: shouldHideDangerousDek, summaryItemVariation: summaryItemVariation, trackingNamespace: trackingNamespace, shouldEnableBundleComponentAnalytics: true, actionBarConfig: actionBarConfig })));
};
LargeDeviceSelectedStories.propTypes = {
    actionBarConfig: PropTypes.object,
    isImageOnRight: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape({
        categories: PropTypes.shape({
            tags: PropTypes.array
        }),
        contributors: PropTypes.shape({
            author: PropTypes.shape({
                items: PropTypes.arrayOf(PropTypes.shape({
                    dangerousBio: PropTypes.string,
                    dangerousTitle: PropTypes.string,
                    name: PropTypes.string,
                    socialMedia: PropTypes.array,
                    url: PropTypes.string
                }))
            })
        }),
        dangerousDek: PropTypes.string,
        dangerousHed: PropTypes.string,
        image: PropTypes.object,
        signalType: PropTypes.string,
        url: PropTypes.string
    })).isRequired,
    sectionTitleVariation: PropTypes.string,
    selectedStoriesHeadline: PropTypes.string,
    selectedStoriesImageWidth: PropTypes.number,
    shouldHideDangerousDek: PropTypes.bool,
    shouldHideSelectedStoriesByline: PropTypes.bool,
    shouldHideSelectedStoriesHeadline: PropTypes.bool,
    shouldShowStackedRatingsCard: PropTypes.bool,
    shouldUseDekForselectedStoriesHeadline: PropTypes.bool,
    snowplowEvent: PropTypes.object,
    stackedRatingsCardProps: PropTypes.object,
    summaryItemVariation: PropTypes.string,
    trackingNamespace: PropTypes.string.isRequired
};
LargeDeviceSelectedStories.displayName = 'LargeDeviceSelectedStories';
module.exports = LargeDeviceSelectedStories;
//# sourceMappingURL=LargeDeviceSelectedStories.js.map

/***/ }),

/***/ 59269:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { useIntl } = __webpack_require__(46984);
const { default: Carousel } = __webpack_require__(36061);
const SummaryItem = __webpack_require__(74992);
const translations = (__webpack_require__(56165)/* ["default"] */ .A);
const { componentTracking } = __webpack_require__(90090);
const { SelectedStoriesSectionTitle, SelectedStoriesCarousel, SelectedStory } = __webpack_require__(52058);
const SectionTitle = __webpack_require__(24277);
const StackedRatingsCard = __webpack_require__(68712);
/**
 * SmallDeviceSelectedStories
 *
 * @param {object} props - React props
 * @param {Array} props.items - Article objects
 * @param {boolean} props.isDotClickable - An optional boolean that when set to true allows the dots to be clickable.
 * @param {string} [props.sectionTitleVariation] - Optional variation of SectionTitle to use
 * @param {string} [props.summaryItemVariation] - Summary item variation to use
 * @param {string} props.selectedStoriesHeadline - Header for seleted stories section.
 * @param {boolean} props.shouldUseDekForselectedStoriesHeadline - Prop to set the dek as heading for seleted stories section.
 * @param {string} [props.shouldHideSelectedStoriesHeadline] - Hide the selectedStories headline
 * @param {boolean} [props.shouldShowStackedRatingsCard] - Optional flag to show StackedRatingsCard instead of SummaryItem
 * @param {object} [props.stackedRatingsCardProps] - Props for stacked rating card
 * @param {boolean} [props.shouldHideDangerousDek] - Hide dek on selected stories
 * @param {object} [props.snowplowEvent] - Optional. Properties that can be passed to snowplow event navigation on click
 * @param {string} props.trackingNamespace - Tracking namespace
 * @param {object} [props.actionBarConfig] - Config for action bar

 * @returns {ReactElement} - Component tree
 */
const SmallDeviceSelectedStories = ({ items, isDotClickable = false, sectionTitleVariation = 'TextCenter', selectedStoriesHeadline, shouldShowStackedRatingsCard = false, shouldUseDekForselectedStoriesHeadline = false, stackedRatingsCardProps, summaryItemVariation = 'TextBelowLeft', shouldHideSelectedStoriesHeadline = false, shouldHideDangerousDek = false, snowplowEvent, trackingNamespace, actionBarConfig }) => {
    const intl = useIntl();
    if (!items.length) {
        return null;
    }
    const SummaryItemVariation = SummaryItem[summaryItemVariation];
    return (React.createElement(SelectedStoriesCarousel, null,
        !shouldHideSelectedStoriesHeadline && (React.createElement(SelectedStoriesSectionTitle, { as: SectionTitle[sectionTitleVariation], className: "SelectedStoriesSectionTitle", dangerousHed: shouldUseDekForselectedStoriesHeadline
                ? selectedStoriesHeadline
                : intl.formatMessage(translations.selectedStoriesHeading), hasDividerBelow: false })),
        React.createElement(Carousel, { className: "selected-stories-carousel", carouselSettings: {
                showControls: false,
                hasPaginationDots: true,
                isPaginationClickable: isDotClickable
            } }, items.map((item, index) => (React.createElement(Carousel.CarouselItem, { key: item.copilotID, "data-testid": "SelectedStoriesSummaryList" },
            React.createElement(SelectedStory, { ...item.image, ...item, ...stackedRatingsCardProps, analyticsDataAttribute: componentTracking.addDataSectionTitleAttribute(true, trackingNamespace, index), snowplowEvent: snowplowEvent && {
                    ...snowplowEvent,
                    items: [
                        {
                            content_title: item.dangerousHed,
                            content_url: item.url
                        }
                    ],
                    index,
                    total_index: items.length,
                    placement: 'right-rail'
                }, hideRubricItemSummary: true, shouldHideBylines: true, shouldHideDangerousDek: shouldHideDangerousDek, hasUnderlineHed: false, hasBorder: false, as: shouldShowStackedRatingsCard
                    ? StackedRatingsCard
                    : SummaryItemVariation, actionBarConfig: actionBarConfig })))))));
};
SmallDeviceSelectedStories.propTypes = {
    actionBarConfig: PropTypes.object,
    isDotClickable: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape({
        categories: PropTypes.shape({
            tags: PropTypes.array
        }),
        contributors: PropTypes.shape({
            author: PropTypes.shape({
                items: PropTypes.arrayOf(PropTypes.shape({
                    dangerousBio: PropTypes.string,
                    dangerousTitle: PropTypes.string,
                    name: PropTypes.string,
                    socialMedia: PropTypes.array,
                    url: PropTypes.string
                }))
            })
        }),
        dangerousDek: PropTypes.string,
        dangerousHed: PropTypes.string,
        image: PropTypes.object,
        signalType: PropTypes.string,
        url: PropTypes.string
    })).isRequired,
    sectionTitleVariation: PropTypes.string,
    selectedStoriesHeadline: PropTypes.string,
    shouldHideDangerousDek: PropTypes.bool,
    shouldHideSelectedStoriesHeadline: PropTypes.bool,
    shouldShowStackedRatingsCard: PropTypes.bool,
    shouldUseDekForselectedStoriesHeadline: PropTypes.bool,
    snowplowEvent: PropTypes.object,
    stackedRatingsCardProps: PropTypes.object,
    summaryItemVariation: PropTypes.string,
    trackingNamespace: PropTypes.string.isRequired
};
SmallDeviceSelectedStories.displayName = 'SmallDeviceSelectedStories';
module.exports = SmallDeviceSelectedStories;
//# sourceMappingURL=SmallDeviceSelectedStories.js.map

/***/ }),

/***/ 52058:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.SelectedStoriesCarousel = exports.SelectedStory = exports.SelectedStoriesGrid = exports.SelectedStoriesSectionTitle = exports.SelectedStoriesList = void 0;
const styles_1 = __webpack_require__(1817);
const { default: styled } = __webpack_require__(92168);
const { calculateSpacing, getTypographyStyles, maxScreen, minScreen } = __webpack_require__(26865);
const { maxThresholds } = __webpack_require__(99906);
const { BREAKPOINTS } = __webpack_require__(96472);
const SectionTitle = __webpack_require__(35864);
const SummaryList = __webpack_require__(22539);
const { SummaryItemWrapper } = __webpack_require__(63637);
const { SummaryItemContent, SummaryItemDek } = __webpack_require__(68116);
const { SummaryItemHedBase } = __webpack_require__(36211);
const SelectedStoriesList = styled(SummaryList).withConfig({
    displayName: 'SelectedStoriesList'
}) ``;
exports.SelectedStoriesList = SelectedStoriesList;
const SelectedStoriesGrid = styled.section.withConfig({
    displayName: 'SelectedStoriesGrid'
}) `
  ${maxScreen(`${maxThresholds.md}px`)} {
    display: none;
  }
  ${SelectedStoriesList} {
    padding: 0;

    ${SummaryItemWrapper} {
      display: grid;
      grid-template-areas: ${({ isImageOnRight }) => isImageOnRight ? `content image` : `image content`};
      grid-template-columns: ${({ isImageOnRight, selectedStoriesImageWidth }) => isImageOnRight
    ? `auto ${calculateSpacing(selectedStoriesImageWidth || 7.5)}`
    : `${calculateSpacing(selectedStoriesImageWidth || 7.5)} auto`};
      gap: ${calculateSpacing(4)};
      margin-bottom: ${calculateSpacing(2)};
      padding-bottom: ${calculateSpacing(2)};

      :last-of-type {
        margin-bottom: 0;
        border-bottom: 0;
        padding-bottom: 0;
      }
    }

    ${SummaryItemContent} {
      padding-top: 0;

      ${SummaryItemHedBase} {
        ${getTypographyStyles('typography.definitions.discovery.hed-core-secondary')};
      }

      ${SummaryItemDek} {
        margin: 0;
      }
    }
  }
`;
exports.SelectedStoriesGrid = SelectedStoriesGrid;
const SelectedStoriesSectionTitle = styled(SectionTitle).withConfig({
    displayName: 'SelectedStoriesSectionTitle'
}) `
  ${minScreen(BREAKPOINTS.md)} {
    margin-top: ${calculateSpacing(5)};
    border-bottom-width: 1px;
  }

  ${minScreen(BREAKPOINTS.md)} {
    margin-top: ${calculateSpacing(4)};
  }

  h2 {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.subhed-section-secondary')};
    justify-self: center;
  }

  ${maxScreen(BREAKPOINTS.md)} {
    margin-bottom: ${calculateSpacing(1)};
  }

  ${minScreen(BREAKPOINTS.md)} {
    margin-bottom: ${calculateSpacing(2)};
  }
`;
exports.SelectedStoriesSectionTitle = SelectedStoriesSectionTitle;
const SelectedStory = styled.section.withConfig({
    displayName: 'SelectedStory'
}) `
  text-align: left;

  .summary-item__content {
    padding-bottom: 0;
  }
`;
exports.SelectedStory = SelectedStory;
const SelectedStoriesCarousel = styled.section.withConfig({
    displayName: 'SelectedStoriesCarousel'
}) `
  .selected-stories-carousel {
    margin-top: ${calculateSpacing(1)};
    margin-bottom: ${calculateSpacing(5)};

    .summary-item {
      width: ${calculateSpacing(23.75)};
    }

    ${styles_1.StackedRatingsCardWrapper} {
      width: ${calculateSpacing(23.75)};
    }
  }
  ${minScreen(BREAKPOINTS.md)} {
    display: none;
  }
`;
exports.SelectedStoriesCarousel = SelectedStoriesCarousel;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 29497:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useCallback, useState, useEffect, useRef } = __webpack_require__(96540);
const { injectIntl } = __webpack_require__(46984);
const throttle = __webpack_require__(7350);
const isEmpty = __webpack_require__(62193);
const { GatewayDest } = __webpack_require__(10103);
const PaletteProvider = __webpack_require__(49235);
const { TrackComponentChannel } = __webpack_require__(78788);
const translations = (__webpack_require__(98904)["default"]);
const { openAIEntryPointButtonLabel } = (__webpack_require__(94528)/* ["default"] */ .A);
const { connector } = __webpack_require__(57744);
const ConsumerMarketingUnit = __webpack_require__(71284);
const { NavCTA, NavRollover, NewsletterRibbon } = __webpack_require__(12501);
const Navigation = __webpack_require__(54790);
const { PaymentGateway } = __webpack_require__(92807);
const ResponsiveImage = __webpack_require__(43608);
const CloseIcon = __webpack_require__(76399);
const MenuIcon = __webpack_require__(26488);
const SearchIcon = __webpack_require__(73767);
const scrollHelper = __webpack_require__(26890);
const SecondaryMenu = __webpack_require__(82814);
const ScrollingNavigation = __webpack_require__(14212);
const { sizesFullName } = __webpack_require__(99906);
const MegaMenu = __webpack_require__(69834);
const Drawer = __webpack_require__(98653);
const UniversalDrawer = __webpack_require__(32217);
const OverlayNavigation = __webpack_require__(59898);
const SearchBar = __webpack_require__(54120);
const { googleAnalytics } = __webpack_require__(90090);
const { trackNavigationEvent } = __webpack_require__(14307);
const { useClientStatus } = __webpack_require__(8877);
const { doDisplayModal: displayOpenAIModal } = __webpack_require__(44354);
const { LinkBannerStackedNavigation, StackedNavigationBottom, StackedNavigationDrawer, StackedNavigationDrawerGlobalStyles, StackedNavigationDrawerToggle, StackedNavigationHeader, StackedNavigationGrid, StackedNavigationLogoLink, StackedNavigationSectionLogoSize, StackedNavigationProfileLink, StackedNavigationSearch, StackedNavigationSectionCmUnitNavLeft, StackedNavigationSectionLogo, StackedNavigationSectionMobileOption, StackedNavigationSectionMobileOptionLink, StackedNavigationSectionPrimaryLinks, StackedNavigationSearchToggleIcon, StackedNavigationSearchToggle, StackedNavigationSectionUtilityLinks, StackedNavigationSectionUtilityLinksLogin, StackedNavigationScrolledDrawer, StackedNavigationTop, StackedNavigationNavigationPrimaryLink, StackedNavigationScrollingSection, StackedNavigationSearchBarWrapper, ScrollingNavigationNavWrapper, StackedNavigationMegaMenuWrapper, StackedNavigationConsumerMarketingWrapper, StackedSeriesNavigation, StackedNavigationDrawerSearchBarWrapper } = __webpack_require__(77630);
const { OpenAIEntryPointButton: OpenAISearchBarEntryPointButton } = __webpack_require__(21686);
/**
 * StackedNavigation component
 *
 * @param {object} props - React props
 * @param {AccountDropdown.propTypes} props.accountProps - Required properties for the account drop down
 * @param {string} [props.adStyle] - Optional strategy for nav-cta ad
 * @param {Array} props.callToActionLink - Link to subscription
 * @param {string} [props.className] - Optional top-level class to add
 * @param {Drawer.propTypes} props.drawerProps - Required properties for the drawer
 * @param {boolean} [props.hasBoxShadowInMobile] - Optional prop for having box-shadow border for mobile screen
 * @param {boolean} [props.hasLeftMarginOnMobile] - Optional prop for margin for mobile devices
 * @param {boolean} [props.hasLinkbannerCrossSlideAnimation] - Enable/Disable Header cross slide animation
 * @param {boolean} [props.hasNoRightMarginforSm] - Optional to remove right margin for small mobile screen
 * @param {boolean} [props.hasSearch] - Optional boolean value, determines if search should be hidden
 * @param {boolean} [props.hasSearchBarWithDrawer] - Optional boolean value, determines if search drawer should be hidden
 * @param {boolean} [props.hasScrollingNavigationContentCenterAligned] - Optional prop to center align navigation links and would be effective when hasSearchBarInSecondRow is false
 * @param {boolean} [props.hasSearchBar] - Optional boolean value, determines if the Search Bar should be made available to Stacked Navigation
 * @param {boolean} [props.hasTopStory] - TopStory module will be present when the value is true
 * @param {boolean} props.hasUtilityLinksCenterAlign - optional flag to set the utility link center aligned
 * @param {object} props.headerLogo - Header logo image data including sources and alt text
 * @param {object} [props.headerLogoDim] - Optional Header logo image data with sources for different viewports
 * @param {object} props.headerInvertedLogo - Inverted header logo image data including sources and alt text
 * @param {string} [props.headerTheme] - Optional Navigation header theme: standard, inverted, transparent
 * @param {object} props.hideNavWhenLinkBannerEnabled - Inverted header logo image data including sources and alt text
 * @param {boolean} props.isAccountsEnabled - Determine whether to show account-related functionality
 * @param {boolean} props.isEditorPicksAvailable - Determine whether EditorPicks is available in the tenant
 * @param {object} props.invertedLogo - Inverted logo image data including sources and alt text
 * @param {isVisualLinkBanner} [props.isVisualLinkBanner] - If `false` show link banner with navigation
 * @param {object} props.logo - Logo image data including sources and alt text
 * @param {string} props.logoBaseUrl - The URL the logo links to
 * @param {string} [props.navigationHideStrategy] - Optional primary links section hiding strategy
 * @param {Array} [props.primaryLinks] - Optional Primary list of `{ isExternal, text, url, isPersistent }` object links
 * @param {Array} [props.primaryNavigationSize] - Optional size of the primary links navigation section
 * @param {string} [props.searchPlaceholder] - Optional placeholder string for search
 * @param {string} [props.scrollingHeaderLogoDim] - Optional Header logo image data with sources for different viewports when the page is scrolled
 * @param {object} props.seriesData - Data for SeriesPagination
 * @param {boolean} props.shouldInvertMenuHeader - Invert the header too when theme is inverted.  Default is to not invert.
 * @param {string} [props.shouldNavigationScroll] - Defaults to true. Flag to trigger scroll events
 * @param {boolean} [props.shouldBundlePagesBehaveLikeHP] - Optional param to treat bundle pages different from homepage
 * @param {boolean} [props.shouldHideSeriesPagination] - Optional param to show series pagination banner
 * @param {boolean} [props.shouldInvertSecondaryMenuTheme] - Boolean value to determine if Secondary Menu Theme to be inverted when Theme in inverted
 * @param {boolean} [props.shouldShow100AnnivLogo] - optional flag to show TNY 100th anniversary logo
 * @param {boolean} [props.showAccountAfterNavCta] - If `true` show account info after nav cta (journey unit, Subscribe link)
 * @param {boolean} [props.showLinkBanner] - If `true` show link banner with navigation
 * @param {boolean} [props.showMarketSwitcherInDrawerOverlay] - If `true` show market switcher in drawer overlay when menu is opened
 * @param {boolean} [props.showNavigationDrawerOnTopInDesktop] - Optional prop to show hamburger menu at the top on desktop in the line of the logo
 * @param {boolean} [props.showOverlayNavigation] - Optional prop to show overlayNavigation instead of secondaryMenu
 * @param {boolean} [props.showPrimaryNavOnScroll] - If `true` on scrolling the primary nav bar on pages with link banner is shown
 * @param {string} [props.showSecondaryFooterAllLink] - Optional prop to show Secondary footer All link in megamenu
 * @param {boolean} [props.showSignInOnMobile] - Optional prop to show signIn button on the nav for mobile for FixedHeader variation
 * @param {boolean} [props.showUtilityLinkOnNavigationBottom] - If `true` show utility link with bottom navigation
 * @param {Array} [props.socialLinksHeading] - Title for social navigation items
 * @param {string} [props.subscribeLink] - Optional Link for subscribe button on top left nav bar
 * @param {string} [props.theme] - Optional theme name
 * @param {Array} [props.utilityLinks] - Optional Secondary list of `{ isExternal, text, url, isPersistent }` object links
 * @param {object} props.user - required user object
 * @param {boolean} props.user.isAuthenticated - represents if the user is currently authenticated
 * @param {object} [props.variations] - Optional variation properties used in rendering the component
 * @param {string} [props.variations.headerLayout] - Optional value determining the header layout
 * @param {boolean} [props.variations.hasLinkBanner] - Optional value determining whether the navigation uses a link banner
 * @param {boolean} [props.variations.hasOnlyMenuToRight] - Optional value to determine whether utility links to displayed to left and hamburger menu to right
 * @param {boolean} [props.variations.hasSearchBarInSecondRow] - Optional value determining whether search bar should be in second row
 * @param {boolean} [props.variations.hasXLargeLogo] - Optional value determining whether the logo should be XLarge
 * @param {boolean} [props.variations.isLargeOnHomeOnly] - Optional value determining whether logo should be large in HP only
 * @param {boolean} [props.variations.shouldShowOverlayTop] - Optional value to determine whether to render Overlay top
 * @param {boolean} [props.variations.shouldUseCustomStyle] - Optional value to determine whether custom styles should be applied
 * @param {boolean} [props.variations.showSecondRowOnScroll] - Optional value determining the second row should be hide on scroll
 * @param {boolean} [props.variations.showScrollingNavigation] - Optional value determining the second row should be scroll navigation
 * @param {boolean} [props.variations.showMegaMenuForMobile] - Optional value determining the menu drawer on mobile viewport should be mega menu
 * @param {boolean} [props.variations.overlayCSS] - Optional value for providing additonal css to overlay navigation
 * @param {boolean} [props.isNavigationActiveState] - Optionally style components based on navigaation to enable the active state of links
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 * @param {boolean} [props.hasSEOSupport] - Optional enable the SEO Suport for mega menu default value false
 * @param {Function} [props.onDrawerStateChange] - Callback function when the Drawer is open/close
 * @param {object} [props.engagementChatbotConfig] - Engagement Chat Bot config object
 * @returns {ReactElement} <header>
 */
// eslint-disable-next-line complexity
const StackedNavigation = ({ accountProps, adStyle = 'default', className, utilityNavLinkColorToken, customMobileOptionLink, customMobileOptionLinkText, drawerProps, hasBoxShadowInMobile = false, hasLeftMarginOnMobile = false, hasLinkbannerCrossSlideAnimation = false, hasNoRightMarginforSm = false, hasSearch = true, hasSearchBarWithDrawer = false, hasScrollingNavigationContentCenterAligned = false, hasSearchBar = false, hasTopStory, hasUnderlineActiveLink, hasUtilityLinksCenterAlign = false, headerLogo, headerLogoDim, headerInvertedLogo, headerTheme, hideNavWhenLinkBannerEnabled, intl, invertedLogo, isHomepage, isAccountsEnabled, isEditorPicksAvailable = false, isNavigationActiveState, isVisualLinkBanner = false, journeyRibbonHeight, logo, logoBaseUrl = '/', mobileLogoAlignment = 'center', navigationHideStrategy = 'default', primaryLinks, profileLinkLabel, primaryNavigationSize = 'default', seriesData, shouldBundlePagesBehaveLikeHP = true, shouldInvertMenuHeader = false, shouldHideSeriesPagination = true, showLinkBanner = false, showMarketSwitcherInDrawerOverlay = false, showNavigationDrawerOnTopInDesktop = false, shouldNavigationScroll = true, showSignInOnMobile, showAccountAfterNavCta = false, showNavigationDrawerOnTopOnScroll = false, showOverlayNavigation = false, showPrimaryNavOnScroll = false, showSecondaryFooterAllLink = false, showUtilityLinkOnNavigationBottom = false, scrollingHeaderLogoDim, socialLinksHeading, theme = 'standard', user, utilityLinks, variationName, variations = {
    isDrawerEnabled: false,
    isLargeOnHomeOnly: false,
    headerLayout: 'default-header-layout',
    hasLinkBanner: false,
    hasOnlyMenuToRight: false,
    hasSearchBarInSecondRow: false,
    hasXLargeLogo: false,
    shouldUseCustomStyle: false,
    showMegaMenuForMobile: false,
    showScrollingNavigation: false,
    showSecondRowOnScroll: false
}, hasSEOSupport = false, onDrawerStateChange, shouldInvertSecondaryMenuTheme = true, shouldShow100AnnivLogo = false, searchPlaceholder, engagementChatbotConfig, hasAIChatbotEnabledGB = false }) => {
    // Assigning the prop value to local variable for handling
    // styles differently for channel pages & homepage.
    let isHomePage = isHomepage;
    const { enableChatBot: hasAIChatbotEnabled, title } = engagementChatbotConfig || {};
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'StackedNavigation',
            variation: variationName
        });
    }, [variationName]);
    const isClient = useClientStatus();
    const [isDrawerOpen, setDrawerOpenState] = useState(false);
    const [isSearchBarOpen, setSearchBarOpenState] = useState(false);
    const [isScrolled, setIsScrolled] = useState(false);
    const lastScrollPosition = useRef(0);
    const [isContentHeaderVisible, setIsContentHeaderVisible] = useState(true);
    const [megaMenuPrimaryLinks, setMegaMenuPrimaryLinks] = useState(primaryLinks);
    const [isMegaMenu, setMegaMenu] = useState(false);
    const [scrollingNavLink, setScrollingNavLink] = useState({});
    const [isMenuDrawerOpen, setDrawerVisible] = useState(false);
    const [isSearchDrawerOpen, setSearchDrawerVisible] = useState(false);
    const [editorPicksCalled, setEditorPicksCalled] = useState(false);
    const observerRef = useRef(null);
    const formattedPrimaryLinks = variations.isDrawerEnabled
        ? megaMenuPrimaryLinks
        : primaryLinks;
    const universalDrawerMenuContent = formattedPrimaryLinks.filter((link) => link.hasChildren);
    const [megamenuContent, setMegaMenuContent] = useState(hasSEOSupport ? universalDrawerMenuContent : {});
    useEffect(() => {
        if (!isEditorPicksAvailable ||
            !variations.isDrawerEnabled ||
            editorPicksCalled)
            return;
        const getFormattedChildLinks = (link, cardGroupNames, editorPicksData) => {
            return link.children.map((item) => {
                if (cardGroupNames.includes(item.text)) {
                    const galleryData = editorPicksData[item.text];
                    const cards = [];
                    if (!isEmpty(galleryData)) {
                        const hasMultipleGalleries = galleryData.length > 1;
                        galleryData.forEach((data, i) => {
                            const groupName = i === 0
                                ? `Editors' Pick${hasMultipleGalleries ? 's' : ''}`
                                : '';
                            const cardData = {
                                groupName,
                                isCard: true,
                                links: [{ ...data, cardPosition: i + 1 }]
                            };
                            cards.push(cardData);
                        });
                    }
                    const updatedItem = {
                        ...item,
                        children: [...item.children, ...cards]
                    };
                    return updatedItem;
                }
                return item;
            });
        };
        const addGalleryDataToPrimaryLinks = (editorPicksData) => {
            const cardGroupNames = Object.keys(editorPicksData);
            return formattedPrimaryLinks.map((link) => {
                if (link.hasChildren && link.children) {
                    const updatedChildren = getFormattedChildLinks(link, cardGroupNames, editorPicksData);
                    const updatedLink = {
                        ...link,
                        children: updatedChildren
                    };
                    return updatedLink;
                }
                return link;
            });
        };
        const fetchEditorPicks = () => {
            fetch('/editor-picks')
                .then((res) => res.json())
                .then((res) => {
                const { editorPicks: editorPicksData } = res;
                if (!isEmpty(editorPicksData)) {
                    const updatedPrimaryLinks = addGalleryDataToPrimaryLinks(editorPicksData);
                    setEditorPicksCalled(true);
                    setMegaMenuPrimaryLinks(updatedPrimaryLinks);
                }
            })
                .catch((err) => err);
        };
        fetchEditorPicks();
    }, [
        formattedPrimaryLinks,
        variations.isDrawerEnabled,
        editorPicksCalled,
        isEditorPicksAvailable
    ]);
    const handleClickNavigation = (e) => {
        if (e.target.innerText !== 'Newsletter' &&
            e.target.innerText !== 'NEWSLETTER') {
            if ( true && window.dataLayer) {
                window.dataLayer.push({
                    event: 'navigation-click',
                    navigationType: 'header',
                    clickText: e.target.innerText
                });
            }
        }
    };
    const handleScroll = useCallback(() => {
        const scrollTop = window.pageYOffset;
        if (scrollHelper.shouldUpdateScroll(isScrolled, scrollTop, lastScrollPosition.current, navigationHideStrategy)) {
            // Safari bug covered by the following if statement. Small bounce when user would scroll up to the top on Safari, isScrolled would become true while it should be false.
            if (scrollTop <= 0 &&
                window.navigator.userAgent.indexOf('Safari') !== -1 &&
                window.navigator.userAgent.indexOf('Chrome') === -1) {
                setIsScrolled(false);
            }
            else {
                setIsScrolled(scrollTop - lastScrollPosition.current > 0);
            }
            lastScrollPosition.current = scrollTop;
        }
    }, [isScrolled, lastScrollPosition, navigationHideStrategy]);
    const collapseMegaMenu = () => {
        setScrollingNavLink({});
        setDrawerVisible(false);
        setMegaMenuPrimaryLinks(formattedPrimaryLinks.map((link) => {
            link.isActive = false;
            return link;
        }));
        if (hasSEOSupport) {
            setMegaMenuContent(universalDrawerMenuContent);
        }
    };
    const onMenuClick = (text) => {
        const activeLink = formattedPrimaryLinks.find((currentLink) => currentLink.text === text);
        if (activeLink.text !== scrollingNavLink.text) {
            setScrollingNavLink({
                ...activeLink,
                isActive: true
            });
            if (hasSEOSupport) {
                setMegaMenuContent(universalDrawerMenuContent.reduce((links, link) => {
                    links.push({
                        ...link,
                        isActive: link.text === text && link.hasChildren
                    });
                    return links;
                }, []));
            }
            setMegaMenuPrimaryLinks(formattedPrimaryLinks.reduce((links, link) => {
                links.push({
                    ...link,
                    isActive: link.text === text && link.hasChildren
                });
                return links;
            }, []));
            if ( true && window.dataLayer) {
                window.dataLayer.push({
                    event: 'navigation-click',
                    navigationType: 'header',
                    clickText: `Nav Link/${text}`
                });
            }
        }
        else {
            collapseMegaMenu();
        }
    };
    /**
     * Handles content header visibility changes (the content header visibility
     * changes from invisible to visible, or from visible to invisible).
     *
     * @param {Array} entries - the content header intersection changes
     *
     * @returns {undefined}
     */
    const onContentHeaderVisibilityChange = (entries) => {
        const [entry] = entries;
        setIsContentHeaderVisible(entry.isIntersecting);
    };
    /**
     * Registers the content header intersection observer and binds a handler
     * method to it. When the content header visibility changes (becomes
     * visible or invisible) the navigation component will know it via
     * intersection observer. The navigation bar is then able to change its
     * own theme according to the content header visibility.
     *
     * When the theme is dark, both content header and navigation are dark when
     * viewport is positioned at the top. When the user scrolls down pass the
     * content header, it will reach the article content section, which is
     * always white. The navigation will know that the user scrolled down the
     * content header and will set itself to white. If the user scrolls back up
     * to the content header, the navigation will once again change itself to dark
     *
     * @returns {undefined}
     */
    const registerContentHeaderVisibilityObserver = useCallback(() => {
        observerRef.current = new IntersectionObserver(onContentHeaderVisibilityChange);
        const contentHeader = document.querySelector('.article__content-header');
        if (contentHeader) {
            observerRef.current.observe(contentHeader);
        }
    }, []);
    useEffect(() => {
        if (shouldNavigationScroll || hasLinkbannerCrossSlideAnimation) {
            let throttledScroll;
            if (shouldNavigationScroll) {
                throttledScroll = throttle(handleScroll, 150);
                window.addEventListener('scroll', throttledScroll);
            }
            registerContentHeaderVisibilityObserver();
            return () => {
                shouldNavigationScroll &&
                    window.removeEventListener('scroll', throttledScroll);
                observerRef.current.disconnect();
            };
        }
        return null;
    }, [
        handleScroll,
        shouldNavigationScroll,
        hasLinkbannerCrossSlideAnimation,
        registerContentHeaderVisibilityObserver
    ]);
    useEffect(() => {
        if (!isMenuDrawerOpen) {
            setMegaMenuPrimaryLinks(formattedPrimaryLinks);
        }
    }, [isMenuDrawerOpen, formattedPrimaryLinks]);
    useEffect(() => {
        if (scrollingNavLink.hasChildren) {
            setMegaMenu(true);
            if (!hasSEOSupport) {
                setMegaMenuContent(scrollingNavLink);
            }
            setDrawerVisible(true);
        }
        else {
            setDrawerVisible(false);
            setMegaMenu(false);
        }
    }, [scrollingNavLink, hasSEOSupport]);
    const trackSnowplowEvent = (event) => {
        const eventData = {
            type: event,
            subject: 'hamburger_menu',
            placement: 'top'
        };
        trackNavigationEvent(eventData);
    };
    /**
     * Toggle the Drawer
     *
     * @returns {undefined} undefined
     */
    const doToggleDrawer = () => {
        if (hasSEOSupport) {
            collapseMegaMenu();
        }
        onDrawerStateChange && onDrawerStateChange(!isDrawerOpen);
        setDrawerOpenState(!isDrawerOpen);
        googleAnalytics.emitGoogleTrackingEvent(`hamburger-menu-${!isDrawerOpen ? 'expanded' : 'collapsed'}`);
        if (isDrawerOpen) {
            trackSnowplowEvent('close');
        }
        else {
            trackSnowplowEvent('open');
        }
    };
    /**
     * Toggle the Search Bar
     *
     * @returns {undefined} undefined
     */
    const doToggleSearchBar = () => {
        setSearchBarOpenState(!isSearchBarOpen);
    };
    /**
     * Toggle the Search Bar Drawer
     *
     * @returns {undefined} undefined
     */
    const doToggleSearchDrawer = () => {
        setSearchDrawerVisible(!isSearchDrawerOpen);
    };
    /**
     * Checks if the navigation theme to use is the inverted theme
     *
     * @returns {boolean} whether the inverted theme should be used
     */
    const isNavigationThemeInverted = () => theme === 'inverted' &&
        (!isDrawerOpen || shouldInvertMenuHeader || theme === 'inverted') &&
        isContentHeaderVisible;
    /**
     * Renders the account drop down component
     *
     * @param {object} newAccountProps - account dropdown properties
     * @param {boolean} isAccountsEnable - if accounts are enabled for the tenant
     * @param {object} newuser - user object
     *
     * @returns {ReactElement} the utility links section
     */
    let navigationTheme = hasTopStory && isDrawerOpen ? 'standard' : headerTheme;
    if (!navigationTheme) {
        navigationTheme = isNavigationThemeInverted() ? 'inverted' : 'standard';
    }
    const renderAccountDropdown = (newAccountProps, isAccountsEnable, newuser) => isAccountsEnable &&
        user && (React.createElement(StackedNavigationSectionUtilityLinksLogin, { ...newAccountProps, accountAvatar: navigationTheme === 'inverted'
            ? accountProps.accountIconInverted
            : accountProps.accountIcon, user: newuser, utilityNavLinkColorToken: utilityNavLinkColorToken }));
    /**
     * Renders a CM unit to be displayed on the navigation bar top right corner for mobile
     *
     * @returns {ReactElement} the profile link
     */
    const renderMobileConsumerMarketingUnit = () => (React.createElement(PaymentGateway, { group: "subscription-workflow" },
        React.createElement(ConsumerMarketingUnit, { position: "mob-nav-cta" })));
    /**
     * Renders a profile link to be displayed on the navigation bar top right corner for mobile
     *
     * @param {bool} isAccountsEnable - whether the accounts feature is enabled
     *
     * @returns {ReactElement} the profile link
     */
    const renderMobileProfileLink = (isAccountsEnable = false) => {
        const profileLink = isAccountsEnable &&
            accountProps &&
            accountProps.accountLinks &&
            accountProps.accountLinks.find((l) => l.isProfileLink);
        return (profileLink && (React.createElement(PaymentGateway, { group: "subs-cta" },
            React.createElement(StackedNavigationProfileLink, { href: profileLink.url }, profileLinkLabel ||
                profileLink.text ||
                intl.formatMessage(translations.profileLinkLabel)))));
    };
    /**
     * Renders the utility links section
     *
     * @param {object} topRightLinks - the links to display in the utility links section
     * @param {boolean} hasSearch - if the search feature is enabled
     * @param {boolean} hasSearchBar - if the search is implemented as a search bar
     * @param {object} accountDropdown - account dropdown component
     * @param {object} drawerProps - drawer props with the correct search link
     * @param {object} intl - react-intl internationalisation props
     *
     * @returns {ReactElement} the utility links section
     */
    const renderUtilityLinks = (topRightLinks, hasSearchOption, hasSearchBarOption, accountDropdown, drawerProperties, newIntl) => {
        const searchButtonProps = {
            href: drawerProperties.searchAction,
            inputKind: 'link'
        };
        if (hasSearchBarWithDrawer) {
            delete searchButtonProps.inputKind;
            delete searchButtonProps.href;
            searchButtonProps.role = 'button';
            searchButtonProps.onClickHandler = doToggleSearchDrawer;
        }
        return (React.createElement(StackedNavigationSectionUtilityLinks, { hasSearchBarInSecondRow: variations.hasSearchBarInSecondRow, onClick: handleClickNavigation, shouldUseCustomStyle: variations.shouldUseCustomStyle, showAccountAfterNavCta: showAccountAfterNavCta, utilityNavLinkColorToken: utilityNavLinkColorToken },
            topRightLinks.length > 0 && (React.createElement(Navigation.Horizontal, { attributes: {
                    'aria-label': newIntl.formatMessage(translations.utilityLinksLabel)
                }, links: topRightLinks, shouldAllowNavItemHide: true })),
            !showAccountAfterNavCta && accountDropdown,
            React.createElement(StackedNavigationConsumerMarketingWrapper, null,
                React.createElement(NavCTA, null),
                React.createElement(PaymentGateway, { group: "consumer-marketing" },
                    React.createElement(ConsumerMarketingUnit, { position: "nav-cta" })),
                React.createElement(NavRollover, null),
                React.createElement(PaymentGateway, { group: "consumer-marketing" },
                    React.createElement(ConsumerMarketingUnit, { position: "nav-rollover" }),
                    React.createElement(ConsumerMarketingUnit, { position: "nav-dialog" }))),
            showAccountAfterNavCta && accountDropdown,
            hasSearchOption && (React.createElement(React.Fragment, null, hasSearchBarOption ? (React.createElement(StackedNavigationSearchToggle, { onClick: doToggleSearchBar, type: "button", label: newIntl.formatMessage(translations.searchLabel) },
                newIntl.formatMessage(translations.openSearchMenuLabel),
                React.createElement(StackedNavigationSearchToggleIcon, null))) : (React.createElement(StackedNavigationSearch, { ...searchButtonProps, ButtonIcon: isSearchDrawerOpen ? CloseIcon : SearchIcon, isIconButton: true, label: intl.formatMessage(translations.searchLabel), hasTopStory: hasTopStory }))))));
    };
    /**
     * Renders the utility links section to the left for mobile
     *
     * @param {object} topLeftMobileLinks - the links to display in the left utility links section
     * @param {object} intl - react-intl internationalisation props
     *
     * @returns {ReactElement} the utility links section
     */
    const renderLeftUtilityLinks = (topLeftMobileLinks, newIntl) => {
        return (React.createElement(StackedNavigationSectionUtilityLinks, { hasOnlyMenuToRight: variations.hasOnlyMenuToRight, shouldUseCustomStyle: variations.shouldUseCustomStyle }, topLeftMobileLinks.length > 0 && (React.createElement(Navigation.Horizontal, { "data-testid": "StackedNavigationSectionUtilityLinksMobileLeft", attributes: {
                'aria-label': newIntl.formatMessage(translations.utilityLinksLabel)
            }, links: topLeftMobileLinks, shouldAllowNavItemHide: true }))));
    };
    /**
     * Renders the Navigation Drawer component
     *
     * @param {object} buttonIcon - standard Close Icon or standard Menu Icon based on Drawer open state
     * @param {object} isDrawerOpen - boolean value based on Drawer open state
     * @param {object} intl - react-intl internationalisation props
     *
     * @returns {ReactElement} the Navigation Drawer
     */
    const renderNavigationDrawer = (buttonIcon, isDrawerOpened, newIntl) => {
        return (React.createElement(StackedNavigationDrawer, { hasOnlyMenuToRight: variations.hasOnlyMenuToRight, showNavigationDrawerOnTopInDesktop: showNavigationDrawerOnTopInDesktop },
            React.createElement(StackedNavigationDrawerToggle, { ButtonIcon: buttonIcon, hasOnlyMenuToRight: variations.hasOnlyMenuToRight, isIconButton: true, label: newIntl.formatMessage(translations.navigationMenuButtonLabel), onClickHandler: doToggleDrawer, role: "button", "aria-expanded": isDrawerOpened }),
            React.createElement(StackedNavigationDrawerGlobalStyles, null)));
    };
    const buttonIcon = isDrawerOpen ? CloseIcon : MenuIcon;
    const topRightLinks = utilityLinks.filter((link) => link.forceLeftOfNav === false);
    const topLeftMobileLinks = utilityLinks.filter((link) => link.showInTopNavMobile === true);
    const accountDropdown = renderAccountDropdown(accountProps, isAccountsEnabled, user);
    const utilityLinksContent = renderUtilityLinks(topRightLinks, hasSearch, hasSearchBar, accountDropdown, drawerProps, intl);
    const utilityLinksContentLeftMobile = renderLeftUtilityLinks(topLeftMobileLinks, intl);
    const navigationDrawer = renderNavigationDrawer(buttonIcon, isDrawerOpen, intl);
    const adOverlay = adStyle === 'overlay';
    const fixedHeader = variations.headerLayout === 'fixed-header-layout';
    const logos = navigationTheme === 'standard'
        ? { logo, headerLogo }
        : { logo: invertedLogo, headerLogo: headerInvertedLogo };
    const { hasXLargeLogo, isLargeOnHomeOnly } = variations;
    if (!shouldBundlePagesBehaveLikeHP)
        isHomePage = false;
    const { shouldExcludeSeriesPagination = false, links } = seriesData || {};
    const shouldDisplaySeriesPagination = () => !!(!shouldHideSeriesPagination &&
        !isDrawerOpen &&
        !shouldExcludeSeriesPagination &&
        !isContentHeaderVisible &&
        links?.length);
    const shouldShowXLLogo = !hasTopStory &&
        ((hasXLargeLogo && !isLargeOnHomeOnly) ||
            (hasXLargeLogo && isLargeOnHomeOnly && isHomePage));
    const xlLogoVisible = shouldShowXLLogo && !isScrolled;
    const logoSize = xlLogoVisible ? 'xlarge' : 'large';
    const topUtilityLinks = utilityLinks.filter((link) => link.showInTopNav);
    const leftUtilityLinks = topUtilityLinks.filter((link) => link.forceLeftOfNav);
    const topPrimaryLinks = formattedPrimaryLinks.filter((link) => link.showInTopNav);
    const primaryUtilityLink = leftUtilityLinks[0];
    const hidePrimaryUtilityLink = sizesFullName.large;
    let showOnlyNonVisualLinkBanner = !isVisualLinkBanner && (showLinkBanner || variations.hasLinkBanner);
    if (hasLinkbannerCrossSlideAnimation && isContentHeaderVisible) {
        showOnlyNonVisualLinkBanner = false;
    }
    const openAIChatbotSnowplowData = {
        type: 'open',
        label: 'OpenAIEntryPointButton',
        subject: 'chatbot',
        placement: 'top_nav'
    };
    const shouldReduceStackedNavigationHeaderHeight = isDrawerOpen && variations.hasOnlyMenuToRight;
    const showNavigationDrawOnTop = showNavigationDrawerOnTopInDesktop ||
        (isScrolled && showNavigationDrawerOnTopOnScroll);
    const hasScrollingNavLinksCenteredWithoutSearchBar = !variations.hasSearchBarInSecondRow &&
        hasScrollingNavigationContentCenterAligned;
    return (React.createElement(PaletteProvider, { palette: navigationTheme },
        React.createElement(StackedNavigationHeader, { "data-testid": "StackedNavigationHeader", className: classnames(`stacked-navigation--${variations.headerLayout}`, `stacked-navigation--theme-${navigationTheme}`, { 'stacked-navigation--is-scrolled': isScrolled }, className), hasOnlyMenuToRight: variations.hasOnlyMenuToRight, hasScrollingNavigation: variations.showScrollingNavigation, hasSearchBarInSecondRow: variations.hasSearchBarInSecondRow, hasAIChatbotEnabled: hasAIChatbotEnabled, navigationTheme: navigationTheme, headerLayout: variations.headerLayout, primaryNavigationSize: primaryNavigationSize, isDrawerOpen: isDrawerOpen, hasLinkBanner: showOnlyNonVisualLinkBanner, hasBoxShadowInMobile: hasBoxShadowInMobile, hasLinkbannerCrossSlideAnimation: hasLinkbannerCrossSlideAnimation, hideNavWhenLinkBannerEnabled: hideNavWhenLinkBannerEnabled, isScrolled: isScrolled, showPrimaryNavOnScroll: showPrimaryNavOnScroll, showSecondRowOnScroll: variations.showSecondRowOnScroll, shouldReduceStackedNavigationHeaderHeight: shouldReduceStackedNavigationHeaderHeight, shouldUseCustomStyle: variations.shouldUseCustomStyle, adOverlay: adOverlay, xlLogoVisible: xlLogoVisible, showAccountAfterNavCta: showAccountAfterNavCta, hasUtilityLinksCenterAlign: hasUtilityLinksCenterAlign, enableMobileLinkBannerScroll: hasLinkbannerCrossSlideAnimation, isContentHeaderVisible: isContentHeaderVisible, hasSEOSupport: hasSEOSupport, hasTopStory: hasTopStory, utilityNavLinkColorToken: utilityNavLinkColorToken, journeyRibbonHeight: journeyRibbonHeight },
            React.createElement(NewsletterRibbon, null),
            React.createElement(PaymentGateway, { group: "consumer-marketing" },
                React.createElement(ConsumerMarketingUnit, { position: "cm-banner" })),
            React.createElement(StackedNavigationGrid, { isDrawerOpen: isDrawerOpen, xlLogoVisible: xlLogoVisible, headerLayout: variations.headerLayout, hasOnlyMenuToRight: variations.hasOnlyMenuToRight, hasScrollingNavigation: variations.showScrollingNavigation, hasSearchBarInSecondRow: variations.hasSearchBarInSecondRow, isNavigationActiveState: isNavigationActiveState, shouldReduceStackedNavigationHeaderHeight: shouldReduceStackedNavigationHeaderHeight, collapseHeightWhenDrawerOpen: showNavigationDrawerOnTopInDesktop && isDrawerOpen, hasUtilityLinksCenterAlign: hasUtilityLinksCenterAlign },
                React.createElement(StackedNavigationTop, null,
                    React.createElement(React.Fragment, null,
                        React.createElement(StackedNavigationSectionCmUnitNavLeft, null,
                            React.createElement(PaymentGateway, { group: "consumer-marketing" },
                                React.createElement(ConsumerMarketingUnit, { position: "nav-left" }))),
                        showNavigationDrawOnTop && navigationDrawer,
                        React.createElement(StackedNavigationSectionLogoSize, { className: classnames(`stacked-navigation__section--${logoSize}-logo`), isHomepage: isHomePage, logoSize: logoSize, headerLogoDim: headerLogoDim, scrollingHeaderLogoDim: scrollingHeaderLogoDim, headerLayout: variations.headerLayout, isScrolled: isScrolled, shouldUseCustomStyle: variations.shouldUseCustomStyle, shouldShow100AnnivLogo: shouldShow100AnnivLogo, hasTopStory: hasTopStory },
                            React.createElement(StackedNavigationLogoLink, { href: logoBaseUrl, "data-testid": "Logo" },
                                React.createElement(ResponsiveImage, { ...logos.logo }))),
                        fixedHeader && utilityLinksContent,
                        variations.hasOnlyMenuToRight && navigationDrawer)),
                !hasTopStory && formattedPrimaryLinks.length > 0 && (React.createElement(React.Fragment, null, variations.showScrollingNavigation ? (React.createElement(StackedNavigationScrollingSection, { "data-testid": "StackedNavigationScrollingSection", hasScrollingNavigationContentCenterAligned: hasScrollingNavigationContentCenterAligned, hasAIChatbotEnabled: hasAIChatbotEnabled },
                    React.createElement(ScrollingNavigationNavWrapper, { hasAIChatbotEnabled: hasAIChatbotEnabled },
                        React.createElement(ScrollingNavigation, { ariaLabel: intl.formatMessage(translations.primaryNavigationLabel), hasDivider: true, hasGradient: !hasScrollingNavLinksCenteredWithoutSearchBar, isCentered: hasScrollingNavLinksCenteredWithoutSearchBar, hasBottomBorder: false, hidePrimaryLink: hidePrimaryUtilityLink, isLeftSpaceDisabled: true, isSlim: false, links: topPrimaryLinks, primaryLink: primaryUtilityLink, onHover: onMenuClick, shouldUseHoverState: isMegaMenu, isMenuDrawerOpen: isMenuDrawerOpen, drawerProps: drawerProps, isRightSpaceDisabled: hasScrollingNavLinksCenteredWithoutSearchBar, collapseMegaMenu: collapseMegaMenu, isNavigationActiveState: isNavigationActiveState, showMoreLink: true, shouldOpenDrawerOnClick: true, showChevron: true, defaultNavLinkCount: hasScrollingNavLinksCenteredWithoutSearchBar ? 6 : 5, hideMoreLinkOnLargerScreens: hasScrollingNavLinksCenteredWithoutSearchBar })),
                    variations.hasSearchBarInSecondRow && (React.createElement(StackedNavigationSearchBarWrapper, { hasAIChatbotEnabled: hasAIChatbotEnabled },
                        React.createElement(SearchBar, { placeholder: searchPlaceholder }))),
                    hasAIChatbotEnabled && hasAIChatbotEnabledGB && (React.createElement(OpenAISearchBarEntryPointButton, { btnStyle: "text", label: title || intl.formatMessage(openAIEntryPointButtonLabel), onClickHandler: () => {
                            if (openAIChatbotSnowplowData) {
                                displayOpenAIModal({
                                    snowplowData: openAIChatbotSnowplowData,
                                    source: 'StackedNavigation'
                                });
                            }
                        } })))) : (React.createElement(StackedNavigationSectionPrimaryLinks, { "data-testid": "StackedNavigationSectionPrimaryLinks" },
                    React.createElement(StackedNavigationNavigationPrimaryLink, { attributes: {
                            'aria-label': intl.formatMessage(translations.primaryLinksLabel)
                        }, links: formattedPrimaryLinks, hasUnderlineActiveLink: hasUnderlineActiveLink, shouldAllowNavItemHide: true, shouldUseCustomStyle: variations.shouldUseCustomStyle, isNavigationActiveState: isNavigationActiveState }))))),
                React.createElement(StackedNavigationBottom, { hasScrollingNavigation: variations.showScrollingNavigation, mobileLogoAlignment: mobileLogoAlignment, hasOnlyMenuToRight: variations.hasOnlyMenuToRight, hasNoRightMarginforSm: hasNoRightMarginforSm, hasAIChatbotEnabled: hasAIChatbotEnabled },
                    navigationDrawer,
                    variations.hasOnlyMenuToRight ? (React.createElement(StackedNavigationSectionLogo, { hasOnlyMenuToRight: variations.hasOnlyMenuToRight, headerLogo: logo, shouldUseCustomStyle: variations.shouldUseCustomStyle, shouldShow100AnnivLogo: shouldShow100AnnivLogo },
                        React.createElement(StackedNavigationLogoLink, { href: logoBaseUrl },
                            React.createElement(ResponsiveImage, { ...logos.logo })))) : (React.createElement(StackedNavigationSectionLogo, { headerLogo: headerLogo, shouldShow100AnnivLogo: shouldShow100AnnivLogo },
                        React.createElement(StackedNavigationLogoLink, { href: logoBaseUrl },
                            React.createElement(ResponsiveImage, { ...logos.headerLogo })))),
                    (!fixedHeader || showUtilityLinkOnNavigationBottom) &&
                        utilityLinksContent,
                    React.createElement(StackedNavigationSectionMobileOption, { hasLeftMarginOnMobile: hasLeftMarginOnMobile, hasOnlyMenuToRight: variations.hasOnlyMenuToRight },
                        showAccountAfterNavCta ? (React.createElement(React.Fragment, null,
                            variations.hasOnlyMenuToRight &&
                                utilityLinksContentLeftMobile,
                            React.createElement(NavCTA, null),
                            isClient &&
                                user?.isAuthenticated &&
                                renderMobileProfileLink(isAccountsEnabled),
                            showSignInOnMobile &&
                                !showUtilityLinkOnNavigationBottom &&
                                accountDropdown)) : (React.createElement(React.Fragment, null,
                            variations.hasOnlyMenuToRight &&
                                utilityLinksContentLeftMobile,
                            isClient &&
                                user?.isAuthenticated &&
                                renderMobileProfileLink(isAccountsEnabled),
                            showSignInOnMobile &&
                                !showUtilityLinkOnNavigationBottom &&
                                accountDropdown,
                            React.createElement(NavCTA, null))),
                        renderMobileConsumerMarketingUnit(),
                        adOverlay && (React.createElement(StackedNavigationSectionMobileOptionLink, { hasNoRightMarginforSm: hasNoRightMarginforSm, href: customMobileOptionLink || '/go/failsafe' }, customMobileOptionLinkText ||
                            intl.formatMessage(translations.subscribeLabel)))),
                    variations.hasSearchBarInSecondRow && (React.createElement(StackedNavigationSearchBarWrapper, { hasAIChatbotEnabled: hasAIChatbotEnabled },
                        React.createElement(SearchBar, { placeholder: searchPlaceholder }))),
                    hasAIChatbotEnabled && hasAIChatbotEnabledGB && (React.createElement(OpenAISearchBarEntryPointButton, { btnStyle: "text", label: title || intl.formatMessage(openAIEntryPointButtonLabel), onClickHandler: () => {
                            if (openAIChatbotSnowplowData) {
                                displayOpenAIModal({
                                    snowplowData: openAIChatbotSnowplowData,
                                    source: 'StackedNavigation'
                                });
                            }
                        } })))),
            showOnlyNonVisualLinkBanner && (React.createElement(LinkBannerStackedNavigation, { palette: navigationTheme, isScrolled: isScrolled, ...(hasLinkbannerCrossSlideAnimation && {
                    hasLinkbannerCrossSlideAnimation,
                    showOnMobile: !isContentHeaderVisible
                }) })),
            variations.isDrawerEnabled && !hasSEOSupport && (React.createElement(Drawer.SiteHeaderDrawer, { appElement: drawerProps.appElement, isOpen: isMenuDrawerOpen, onClose: () => collapseMegaMenu(), contentLabel: intl.formatMessage(translations.drawerLabel), theme: theme, className: "drawer--megamenu", hideOnMobile: true }, isMegaMenu && (React.createElement(StackedNavigationMegaMenuWrapper, { xlLogoVisible: xlLogoVisible, journeyRibbonHeight: journeyRibbonHeight },
                React.createElement(MegaMenu.NewVerbose, { collapseMegaMenu: collapseMegaMenu, isDrawerOpen: isMenuDrawerOpen, isSlim: false, megaMenuContent: megamenuContent, theme: theme, showSecondaryFooterAllLink: showSecondaryFooterAllLink, primaryNavLink: scrollingNavLink, isContentCentered: hasScrollingNavigationContentCenterAligned, hasLinkBanner: showOnlyNonVisualLinkBanner }))))),
            hasSearchBarWithDrawer && (React.createElement(Drawer, { appElement: drawerProps.appElement, contentLabel: intl.formatMessage(translations.searchLabel), className: "drawer--search", isOpen: isSearchDrawerOpen, hasBodyScrollWhenDrawerOpen: false, onClose: () => doToggleSearchDrawer() },
                React.createElement(StackedNavigationDrawerSearchBarWrapper, { xlLogoVisible: xlLogoVisible },
                    React.createElement(SearchBar, { searchLink: drawerProps.searchAction, shouldSetFocus: isSearchDrawerOpen, placeholder: intl.formatMessage(translations.searchLabel) })))),
            variations.isDrawerEnabled && hasSEOSupport && (React.createElement(UniversalDrawer.SiteHeaderDrawer, { isDrawerOpen: isMenuDrawerOpen, onClose: () => collapseMegaMenu(), theme: theme, className: "universal_drawer--megamenu", hideOnMobile: true, registryName: "stacked-navigation-mega-modal" }, megamenuContent.map((menu) => (React.createElement("div", { className: menu.isActive ? 'show-menu' : 'hide-menu' },
                React.createElement(StackedNavigationMegaMenuWrapper, { xlLogoVisible: xlLogoVisible },
                    React.createElement(MegaMenu.NewVerbose, { collapseMegaMenu: collapseMegaMenu, isDrawerOpen: isMenuDrawerOpen, isSlim: false, megaMenuContent: menu, theme: theme, showSecondaryFooterAllLink: showSecondaryFooterAllLink, primaryNavLink: menu, hasLinkBanner: showOnlyNonVisualLinkBanner })))))))),
        !showOverlayNavigation && (React.createElement(StackedNavigationScrolledDrawer, { isOpen: isDrawerOpen, xlLogoVisible: xlLogoVisible, onClose: doToggleDrawer, isScrolled: isScrolled, journeyRibbonHeight: journeyRibbonHeight, showNavigationDrawerOnTopInDesktop: showNavigationDrawerOnTopInDesktop, fixedHeader: fixedHeader ? 'fixed-' : '', appElement: drawerProps.appElement, contentLabel: intl.formatMessage(translations.drawerLabel), className: classnames('drawer--megamenu', {
                'drawer--megamenu-topstory': hasTopStory
            }), hideOnDesktop: variations.isDrawerEnabled, hasSearchBarInSecondRow: variations.hasSearchBarInSecondRow, cropWidth: variations.isDrawerEnabled }, !variations.isDrawerEnabled ? (React.createElement(SecondaryMenu, { ...drawerProps, user: user, accountProps: accountProps, isAccountsEnabled: isAccountsEnabled, showSearch: hasSearch, showMarketSwitcher: showMarketSwitcherInDrawerOverlay, utilityLinks: topRightLinks, theme: theme, shouldInvertSecondaryMenuTheme: shouldInvertSecondaryMenuTheme })) : (React.createElement(MegaMenu.MultipleColumn, { isSlim: false, megaMenuContent: { children: formattedPrimaryLinks }, collapseMegaMenu: collapseMegaMenu, isDrawerOpen: isMenuDrawerOpen, theme: theme, utilityLinks: topRightLinks, user: user, accountProps: accountProps, isAccountsEnabled: isAccountsEnabled, showSecondaryFooterAllLink: showSecondaryFooterAllLink, hasLinkBanner: showOnlyNonVisualLinkBanner })))),
        showOverlayNavigation && (React.createElement(OverlayNavigation, { accountProps: accountProps, additionalCSS: !variations.shouldShowOverlayTop
                ? variations?.overlayCSS
                : undefined, isAccountsEnabled: isAccountsEnabled, user: user, hasSearch: hasSearch, hasTopRule: !variations.shouldShowOverlayTop, primaryLinks: primaryLinks, utilityLinks: utilityLinks, searchLink: drawerProps.searchAction, secondaryLinks: drawerProps.secondaryLinks, socialLinks: drawerProps.socialIconsProps.links, socialLinksHeading: socialLinksHeading, logo: headerLogo, invertedLogo: headerInvertedLogo, isCenteredOnDesktop: true, isVisible: isDrawerOpen, onClose: doToggleDrawer, theme: theme, shouldShowOverlayTop: variations.shouldShowOverlayTop })),
        React.createElement(StackedSeriesNavigation, { shouldDisplaySeriesPagination: shouldDisplaySeriesPagination(), className: classnames({
                'series-pagination__standard-navigation--hidden': !shouldDisplaySeriesPagination
            }), "data-testid": "StackedSeriesNavigationPagination" }),
        React.createElement(GatewayDest, { name: "stacked-navigation-mega-modal", className: "modal-container" })));
};
StackedNavigation.propTypes = {
    accountProps: PropTypes.object,
    adStyle: PropTypes.string,
    className: PropTypes.string,
    customMobileOptionLink: PropTypes.string,
    customMobileOptionLinkText: PropTypes.string,
    drawerProps: PropTypes.object.isRequired,
    engagementChatbotConfig: PropTypes.object,
    hasAIChatbotEnabledGB: PropTypes.bool,
    hasBoxShadowInMobile: PropTypes.bool,
    hasLeftMarginOnMobile: PropTypes.bool,
    hasLinkbannerCrossSlideAnimation: PropTypes.bool,
    hasNoRightMarginforSm: PropTypes.bool,
    hasScrollingNavigationContentCenterAligned: PropTypes.bool,
    hasSearch: PropTypes.bool,
    hasSearchBar: PropTypes.bool,
    hasSearchBarWithDrawer: PropTypes.bool,
    hasSEOSupport: PropTypes.bool,
    hasTopStory: PropTypes.bool,
    hasUnderlineActiveLink: PropTypes.bool,
    hasUtilityLinksCenterAlign: PropTypes.bool,
    headerInvertedLogo: PropTypes.shape(ResponsiveImage.propTypes).isRequired,
    headerLogo: PropTypes.shape(ResponsiveImage.propTypes).isRequired,
    headerLogoDim: PropTypes.shape(ResponsiveImage.propTypes),
    headerTheme: PropTypes.string,
    hideNavWhenLinkBannerEnabled: PropTypes.bool,
    intl: PropTypes.shape({
        formatMessage: PropTypes.func
    }),
    invertedLogo: PropTypes.shape(ResponsiveImage.propTypes).isRequired,
    isAccountsEnabled: PropTypes.bool,
    isEditorPicksAvailable: PropTypes.bool,
    isHomepage: PropTypes.bool,
    isNavigationActiveState: PropTypes.bool,
    isVisualLinkBanner: PropTypes.bool,
    journeyRibbonHeight: PropTypes.number,
    logo: PropTypes.shape(ResponsiveImage.propTypes).isRequired,
    logoBaseUrl: PropTypes.string,
    mobileLogoAlignment: PropTypes.oneOf(['center', 'left']),
    navigationHideStrategy: PropTypes.oneOf(['default', 'delta']),
    onDrawerStateChange: PropTypes.func,
    primaryLinks: Navigation.propTypes.links,
    primaryNavigationSize: PropTypes.oneOf(['default', 'large']),
    profileLinkLabel: PropTypes.string,
    scrollingHeaderLogoDim: PropTypes.shape(ResponsiveImage.propTypes),
    searchPlaceholder: PropTypes.string,
    seriesData: PropTypes.object,
    shouldBundlePagesBehaveLikeHP: PropTypes.bool,
    shouldHideSeriesPagination: PropTypes.bool,
    shouldInvertMenuHeader: PropTypes.bool,
    shouldInvertSecondaryMenuTheme: PropTypes.bool,
    shouldNavigationScroll: PropTypes.bool,
    shouldShow100AnnivLogo: PropTypes.bool,
    showAccountAfterNavCta: PropTypes.bool,
    showLinkBanner: PropTypes.bool,
    showMarketSwitcherInDrawerOverlay: PropTypes.bool,
    showNavigationDrawerOnTopInDesktop: PropTypes.bool,
    showNavigationDrawerOnTopOnScroll: PropTypes.bool,
    showOverlayNavigation: PropTypes.bool,
    showPrimaryNavOnScroll: PropTypes.bool,
    showSecondaryFooterAllLink: PropTypes.bool,
    showSignInOnMobile: PropTypes.bool,
    showUtilityLinkOnNavigationBottom: PropTypes.bool,
    socialLinksHeading: PropTypes.string,
    subscribeLink: PropTypes.string,
    theme: PropTypes.string,
    user: PropTypes.shape({
        isAuthenticated: PropTypes.bool.isRequired
    }),
    utilityLinks: Navigation.propTypes.links,
    utilityNavLinkColorToken: PropTypes.string,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        isDrawerEnabled: PropTypes.bool,
        isLargeOnHomeOnly: PropTypes.bool,
        headerLayout: PropTypes.oneOf([
            'default-header-layout',
            'fixed-header-layout'
        ]),
        hasLinkBanner: PropTypes.bool,
        hasOnlyMenuToRight: PropTypes.bool,
        hasSearchBarInSecondRow: PropTypes.bool,
        hasXLargeLogo: PropTypes.bool,
        overlayCSS: PropTypes.object,
        shouldShowOverlayTop: PropTypes.bool,
        shouldUseCustomStyle: PropTypes.bool,
        showMegaMenuForMobile: PropTypes.bool,
        showScrollingNavigation: PropTypes.bool,
        showSecondRowOnScroll: PropTypes.bool
    })
};
StackedNavigation.displayName = 'StackedNavigation';
module.exports = connector(injectIntl(StackedNavigation), {
    keysToPluck: ['hasTopStory', 'isHomepage', 'engagementChatbotConfig']
});
//# sourceMappingURL=StackedNavigation.js.map

/***/ }),

/***/ 55266:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const { asThemedComponent } = __webpack_require__(20223);
const VariedStackedNavigation = __webpack_require__(17210);
module.exports = asThemedComponent(asConfiguredComponent(VariedStackedNavigation, 'StackedNavigation'));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 77630:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css, createGlobalStyle, keyframes } = __webpack_require__(92168);
const { BaseLink } = __webpack_require__(76955);
const { BREAKPOINTS, ZINDEX_MAP } = __webpack_require__(96472);
const { maxThresholds } = __webpack_require__(55058);
const { hideTextVisually } = __webpack_require__(52813);
const { SiteNavigationSearch } = __webpack_require__(49829);
const { GridItem } = __webpack_require__(40653);
const { MegaMenuGridWrapper } = __webpack_require__(10246);
const { calculateSpacing, getColorStyles, getColorToken, getLinkStyles, getTypographyStyles, minScreen, minMaxScreen, maxScreen, isInverted } = __webpack_require__(26865);
const { NavigationListItemWrapper, NavigationInternalLink, NavigationListWrapper, NavigationExternalLink } = __webpack_require__(51418);
const Button = __webpack_require__(88456);
const AccountDropdown = __webpack_require__(50152);
const LinkBanner = __webpack_require__(82873);
const Navigation = __webpack_require__(54790);
const Drawer = __webpack_require__(98653);
const { SignOutButtonWrapper } = __webpack_require__(81591);
const { ButtonWrapper } = __webpack_require__(18974);
const { getSiteNavigationMenuStyles } = __webpack_require__(56341);
const { cssVariablesGrid } = __webpack_require__(1123);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const { MoreDropdownLabel, StandardNavigationAccountLabel, StandardNavigationDropdown, StandardNavigationSeriesPagination, NavigationAccountSignIn, NavigationAccountIconWrapper, AccountDropdownToggleIcon } = __webpack_require__(88570);
const { universalGridCore } = __webpack_require__(89085);
const { Link: NavCTALink } = __webpack_require__(82552);
const { ShowRollover, HideRollover } = __webpack_require__(32788);
const { AlertWrapper } = __webpack_require__(3318);
const { NavListItem, NavList } = __webpack_require__(79424);
const { SearchBarWrapper, SearchForm } = __webpack_require__(26348);
const { DESKTOP_HEIGHT: LINK_BANNER_DESKTOP_HEIGHT, MOBILE_HEIGHT: LINK_BANNER_MOBILE_HEIGHT } = __webpack_require__(89635);
const STACKED_NAVIGATION_FIXED_HEADER_TOP_HEIGHT = calculateSpacing(8);
const SCROLLING_SECTION_WITHOUT_SEARCHBAR_HEIGHT = calculateSpacing(6);
const SCROLLING_SECTION_WITH_SEARCHBAR_HEIGHT = calculateSpacing(9);
const linkBannerDesktopSlideDown = keyframes `
  0% {
    height: 0;
  }

  100% {
    height: ${LINK_BANNER_DESKTOP_HEIGHT}px;
  }
`;
const linkBannerDesktopSlideUp = keyframes `
  0% {
    height: ${LINK_BANNER_DESKTOP_HEIGHT}px;
  }

  100% {
    height: 0;
  }
`;
const linkBannerMobileSlideDown = keyframes `
  0% {
    height: 0;
  }

  100% {
    height: ${LINK_BANNER_MOBILE_HEIGHT}px;
  }
`;
const linkBannerMobileSlideUp = keyframes `
  0% {
    height: ${LINK_BANNER_MOBILE_HEIGHT}px;
  }

  100% {
    height: 0;
  }
`;
const getSourceDimensions = (sources) => !!sources &&
    `
    width: ${sources.sm.width}px;
    height: ${sources.sm.height}px;

    ${minScreen(BREAKPOINTS.md)} {
      width: ${sources.md.width}px;
      height: ${sources.md.height}px;
    }

    ${minScreen(BREAKPOINTS.lg)} {
      width: ${sources.lg.width}px;
      height: ${sources.lg.height}px;
    }

    ${minScreen(BREAKPOINTS.xl)} {
      width: ${sources.xl.width}px;
      height: ${sources.xl.height}px;
    }

    ${minScreen(BREAKPOINTS.xxl)} {
      width: ${sources.xxl.width}px;
      height: ${sources.xxl.height}px;
    }
  `;
const StackedNavigationSearchToggle = styled.button.withConfig({
    displayName: 'StackedNavigationSearchToggle'
}) `
  ${hideTextVisually()};
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 0;
  background-color: transparent;
  padding: 0;
  width: ${calculateSpacing(4)};
  min-width: ${calculateSpacing(4)};
  height: 100%;
  color: transparent;

  ${minScreen(BREAKPOINTS.md)} {
    margin: 0 ${calculateSpacing(3)} 0 ${calculateSpacing(2)};
  }
`;
const StackedNavigationSearchToggleIcon = styled.div.withConfig({
    displayName: 'StackedNavigationSearchToggleIcon'
}) `
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  ${({ theme }) => `background-image: url('/verso/static/${theme.meta.name}/assets/icons/search.svg')`};
  background-repeat: no-repeat;
  background-position: center;
  background-size: ${calculateSpacing(3)} ${calculateSpacing(3)};
  width: 100%;
  height: ${calculateSpacing(3)};
`;
const StackedNavigationWrapper = css `
  position: relative;
  z-index: 2;
  border-bottom: 1px solid ${getColorToken('colors.foundation.menu.dividers')};

  && {
    width: 100%;
  }
`;
const StackedNavigationSearch = styled(Button.Utility).withConfig({
    displayName: 'StackedNavigationSearch'
}) `
  ${SiteNavigationSearch()};
  grid-column: 12 / -1;
  justify-self: flex-end;
  transition: opacity 0.3s ease-in-out;

  &&&& .icon-search {
    transform: scale(0.5);
  }
`;
const StackedNavigationProfileLink = styled(BaseLink).withConfig({
    displayName: 'StackedNavigationProfileLink'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.meta-secondary')};
  position: absolute;
  right: 20px;
  align-self: center;
  z-index: 0;
`;
const StackedNavigationSubscribeLink = css `
  ${NavigationInternalLink} {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-primary')};
  }

  ${NavigationInternalLink}, ${NavigationExternalLink} {
    ${({ shouldUseCustomStyle }) => shouldUseCustomStyle && `font-size: 14px;`}
  }

  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-primary')};

  min-width: ${calculateSpacing(5)};
`;
const StackedNavigationSectionMobileOption = styled.div.withConfig({
    displayName: 'StackedNavigationSectionMobileOption'
}) `
  display: flex;
  ${({ hasLeftMarginOnMobile }) => hasLeftMarginOnMobile && `margin-left: ${calculateSpacing(-3)};`}

  ${NavigationListWrapper} {
    margin: 0;
  }

  ${NavigationListItemWrapper} {
    display: flex;
    align-items: center;
    padding: 0;
  }

  ${StackedNavigationSubscribeLink}
`;
const StackedNavigationSectionPrimaryLinks = styled.div.withConfig({
    displayName: 'StackedNavigationSectionPrimaryLinks'
}) `
  margin: 0 auto;
  width: max-content;

  && {
    display: none;
    grid-row: 2 / 3;
    justify-content: center;
    z-index: 1;
  }

  ${NavigationListItemWrapper} {
    &:last-child {
      margin-right: 0;
    }
    display: flex;
    align-items: center;
    padding: 0;
  }

  ${NavigationListWrapper} {
    margin: 0;
  }

  ${StackedNavigationSubscribeLink}
`;
const StackedNavigationSearchBarWrapper = styled.div.withConfig({
    displayName: 'StackedNavigationSearchBarWrapper'
}) `
  width: 100%;

  input {
    &[type='search'] {
      appearance: none;
      border-radius: 0;
    }
  }

  ${({ hasAIChatbotEnabled }) => {
    if (hasAIChatbotEnabled) {
        return `
          @media (min-width: ${BREAKPOINTS.lg}) {
            padding-left: 0;
              ${SearchForm} {
                padding-left: 0;
              }
          }  
      `;
    }
    return '';
}}
`;
const StackedNavigationScrollingSection = styled.div.withConfig({
    displayName: 'StackedNavigationScrollingSection'
}) `
  && {
    display: none;

    ${minScreen(BREAKPOINTS.lg)} {
      padding: 0 ${calculateSpacing(4)} 0 ${calculateSpacing(6)};
    }

    ${minScreen(BREAKPOINTS.xxl)} {
      padding: 0 ${calculateSpacing(6)} 0 ${calculateSpacing(8)};
    }
  }

  ${NavigationListItemWrapper} {
    &:last-child {
      margin-right: 0;
    }
    display: flex;
    padding: 0;
  }

  ${({ hasScrollingNavigationContentCenterAligned }) => hasScrollingNavigationContentCenterAligned &&
    `&& {
      justify-content: center;
      ${minScreen(BREAKPOINTS.lg)} {
        padding: 0 ${calculateSpacing(4)};
      }
      ${minScreen(BREAKPOINTS.xxl)} {
        padding: 0 ${calculateSpacing(6)};
      }
    }`}

  ${StackedNavigationSearchBarWrapper} {
    max-width: ${calculateSpacing(58.75)};

    ${({ hasAIChatbotEnabled }) => {
    if (hasAIChatbotEnabled) {
        return `
          ${minScreen(BREAKPOINTS.lg)} {
            padding-left: 0;
          }
        `;
    }
    return `
        ${minScreen(BREAKPOINTS.lg)} {
          padding: 0 0 0 ${calculateSpacing(2)};
        }
      `;
}}

    ${minScreen(BREAKPOINTS.xxl)} {
      margin: 0 0 0 ${calculateSpacing(6)};
    }
  }

  ${NavigationListWrapper} {
    flex-wrap: nowrap;
    margin: 0;
  }

  ${StackedNavigationSubscribeLink}

  ${({ theme }) => `border-bottom: 1px solid;
    ${getColorStyles(theme, 'border-color', 'colors.foundation.menu.dividers')};
  `}
`;
const StackedNavigationSectionUtilityLinksLogin = styled(AccountDropdown).withConfig({
    displayName: 'StackedNavigationSectionUtilityLinksLogin'
}) `
  ${StandardNavigationAccountLabel} {
    ${({ theme }) => getLinkStyles(theme, 'colors.foundation.collapsed-menu.utility-link.default', 'colors.foundation.collapsed-menu.utility-link.hover', 'navigation')};
  }

  ${NavigationAccountSignIn} {
    margin-top: ${calculateSpacing(0)};
  }

  &.standard-navigation-account {
    ${minScreen(BREAKPOINTS.md)} {
      margin-right: ${calculateSpacing(2)};
    }
    position: relative;
    height: 100%;
  }

  &&.standard-navigation-account-with-avatar {
    ${minScreen(BREAKPOINTS.md)} {
      margin-right: 0;
    }
    ${minScreen(BREAKPOINTS.lg)} {
      margin-right: -${calculateSpacing(0.6)};
      height: ${calculateSpacing(5)};
    }
  }

  ${StandardNavigationAccountLabel} {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-utility')};
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 100%;

    &::after {
      position: absolute;
      right: 0;
      bottom: -15px;
      width: 220px;
      height: 15px;
      content: '';
    }

    &:hover {
      ${StandardNavigationDropdown} {
        display: block;
      }

      .icon-chevron path {
        fill: ${({ theme }) => getColorToken(isInverted(theme)
    ? 'colors.consumption.lead.inverted.link'
    : 'colors.foundation.collapsed-menu.utility-link.hover')};
      }
    }
  }
`;
// 1. Mobile layout for stacked nav does not align to our grid, drawer and search icon containers have a width of 50px,
// and we're centering the logo by default,
// Except in mobile screensizes when the mobileLogoAlignment is set as 'left'.
const StackedNavigationBottom = styled('div').withConfig({
    displayName: 'StackedNavigationBottom'
}) `
  ${universalGridCore()}
  ${cssVariablesGrid()}
  && {
    position: relative;
    grid-column: 1/-1;
    grid-row: 1/-1;
    grid-template-columns: ${calculateSpacing(6)} auto ${calculateSpacing(6)};
  }

  && {
    width: 100%;
    max-width: 100%;
  }

  &&& {
    ${({ mobileLogoAlignment }) => {
    return (mobileLogoAlignment === 'left' &&
        `grid-template-columns: ${calculateSpacing(4)} auto 1fr;`);
}}

    ${minScreen(BREAKPOINTS.md)} {
      grid-template-columns: inherit;
    }
  }

  .consumer-marketing-unit {
    display: none;
  }

  ${({ hasScrollingNavigation, hasAIChatbotEnabled }) => {
    if (hasScrollingNavigation && !hasAIChatbotEnabled) {
        return css `
        && {
          row-gap: ${calculateSpacing(1)};
        }

        ${StackedNavigationSearchBarWrapper} {
          grid-column: 1 / -1;
        }
      `;
    }
    if (hasAIChatbotEnabled) {
        return css `
        ${StackedNavigationSearchBarWrapper} {
          grid-column: 1 / 3;

          @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
            grid-column: 1 / 12;
          }

          @media (min-width: ${BREAKPOINTS.lg}) {
            grid-column: 1 / 12;
          }
        }
      `;
    }
    return '';
}}
`;
const StackedNavigationSectionLogo = styled.div.withConfig({
    displayName: 'StackedNavigationSectionLogo'
}) `
  display: flex;
  grid-column: 2 / span 1;
  align-items: center;
  justify-content: center;
  opacity: 1;
  margin: auto;
  min-width: ${calculateSpacing(6)};
  max-width: ${calculateSpacing(26)};

  ${minScreen(BREAKPOINTS.md)} {
    grid-column: 5 / span 4;
  }

  ${minScreen(BREAKPOINTS.xl)} {
    opacity: 0;
    z-index: -1;
  }
  ${ResponsiveImageContainer} {
    max-height: ${calculateSpacing(6)};
    ${({ headerLogo, navigationTheme, theme }) => {
    if (navigationTheme === 'standard') {
        const headerUrl = headerLogo?.sources?.sm?.url ||
            `/verso/static/${theme.meta.name}/assets/logo-header.svg`;
        return `content: url(${headerUrl});`;
    }
    return '';
}}

    ${({ shouldUseCustomStyle }) => shouldUseCustomStyle &&
    `
      max-height: none;
      height: ${calculateSpacing(4, 'px')};`}

    ${({ shouldShow100AnnivLogo }) => shouldShow100AnnivLogo &&
    `
        width: ${calculateSpacing(19.438)};
        height: ${calculateSpacing(1.75)};
      `}
  }
  ${StackedNavigationSubscribeLink}

  ${({ hasOnlyMenuToRight }) => hasOnlyMenuToRight &&
    `
    grid-row: 1;
    ${minMaxScreen(BREAKPOINTS.md, BREAKPOINTS.lg)} {
      padding-left: ${calculateSpacing(4)};
    }
  `}

  ${({ hasOnlyMenuToRight }) => hasOnlyMenuToRight && `grid-row: 1;`}
`;
const StackedNavigationDrawerToggle = styled(Button.Utility).withConfig({
    displayName: 'StackedNavigationDrawerToggle'
}) `
  ${({ theme }) => getSiteNavigationMenuStyles(theme, true)}

  ${({ hasOnlyMenuToRight }) => hasOnlyMenuToRight && `justify-content: flex-end;`}

  .icon-menu {
    margin: 8px;
    width: initial;
    height: initial;
  }

  .icon-close {
    padding: 8px;
  }

  .icon-menu {
    fill: ${({ theme }) => getColorToken(theme, isInverted(theme)
    ? 'colors.consumption.lead.inverted.link'
    : 'colors.foundation.collapsed-menu.nav-link.default')};

    &:hover,
    &:focus {
      fill: ${({ theme }) => getColorToken(theme, 'colors.foundation.collapsed-menu.nav-link.hover')};
    }
  }
`;
const StackedNavigationDrawer = styled.div.withConfig({
    displayName: 'StackedNavigationDrawer'
}) `
  && {
    transition: none;
  }
  grid-column: 1/2;
  margin-right: auto;
  height: inherit;
  ${({ hasOnlyMenuToRight }) => hasOnlyMenuToRight &&
    `grid-row: 1;
    ${minScreen(BREAKPOINTS.sm)} {
      grid-column: 3;
      margin-right: 0;
    }
    ${minScreen(BREAKPOINTS.md)} {
      grid-column: 12;
    }
    ${minScreen(BREAKPOINTS.lg)} {
      grid-column: 3;
      margin-left: 0;
      margin-right: 1.5rem;
    }`}

  ${({ showNavigationDrawerOnTopInDesktop }) => showNavigationDrawerOnTopInDesktop &&
    `${minScreen(BREAKPOINTS.md)} {
      ${ButtonWrapper} {
        padding: ${calculateSpacing(2)};
      }

      ${AlertWrapper} {
        display: none;
      }
    }
    ${minMaxScreen(BREAKPOINTS.md, `${maxThresholds.lg}px`)} {
      display: grid;
      grid-column: 1 / span 3;
      align-content: center;
    }`}
`;
const StackedNavigationSectionLogoCommon = css `
  display: flex;
  align-items: center;
  transition: opacity 0.3s ease-in-out;

  .navigation__link {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-primary')};
  }

  ${NavigationListWrapper} {
    margin: 0;
  }

  ${NavigationListItemWrapper} {
    display: flex;
    align-items: center;
    padding: 0;
    ${({ hasOnlyMenuToRight }) => hasOnlyMenuToRight && `margin-right: 0;`}
  }
`;
const StackedNavigationTop = styled.div.withConfig({
    displayName: 'StackedNavigationTop'
}) `
  display: none;
  grid-column: 1/-1;
  grid-row: 1/2;
  grid-template-columns: ${calculateSpacing(34)} auto ${calculateSpacing(34)};

  div[class*='StackedNavigationDrawer-'] .button__icon-container .icon-close g {
    stroke: ${({ theme }) => getColorToken(theme, 'colors.foundation.collapsed-menu.nav-link.default')};
  }
`;
const StackedNavigationSectionMobileOptionLink = styled(BaseLink).withConfig({
    displayName: 'StackedNavigationSectionMobileOptionLink'
}) `
  margin-right: ${calculateSpacing(2)};
  ${({ hasNoRightMarginforSm }) => hasNoRightMarginforSm &&
    css `
      ${minScreen(BREAKPOINTS.sm)} {
        margin-right: 0;
      }
    `}

  &:link {
    ${({ theme }) => `${getColorStyles(theme, 'color', 'colors.foundation.collapsed-menu.nav-link.default')};`}
  }
`;
const StackedNavigationAdOverlay = css `
  ${StackedNavigationSectionMobileOptionLink} {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-primary')};
  }

  .consumer-marketing-unit--mob-nav-cta {
    position: absolute;
    right: ${calculateSpacing(2)};
    width: 80px;

    ${minScreen(BREAKPOINTS.md)} {
      right: ${calculateSpacing(4)};
    }
  }
`;
const StackedNavigationConsumerMarketingWrapper = styled.div.withConfig({
    displayName: 'StackedNavigationConsumerMarketingUnitWrapper'
}) ``;
const consumerMarketingStyles = css `
  ${StackedNavigationConsumerMarketingWrapper} {
    .nav-cta__component,
    .consumer-marketing-unit--nav-cta {
      &:hover,
      &:focus,
      &:focus-within {
        ~ .consumer-marketing-unit--nav-rollover,
        ~ .nav-rollover__component > div {
          ${ShowRollover}
        }
      }
    }

    .consumer-marketing-unit--nav-cta {
      ~ ${NavigationInternalLink}:hover, ~ ${NavigationExternalLink}:hover {
        text-decoration: none;
      }

      &:hover,
      &:focus-within,
      &:focus {
        ~ ${NavigationInternalLink}, ~ ${NavigationExternalLink} {
          color: ${getColorToken('colors.foundation.collapsed-menu.nav-link.hover')};
        }
      }
    }

    .consumer-marketing-unit--nav-rollover:hover,
    .consumer-marketing-unit--nav-rollover:focus,
    .consumer-marketing-unit--nav-rollover:focus-within {
      ${ShowRollover}
    }

    .consumer-marketing-unit--nav-rollover {
      ${HideRollover}
      display: none;
      top: ${calculateSpacing(7)};
      align-items: center;
      justify-content: center;
      z-index: ${ZINDEX_MAP.navFixed};

      @media (min-width: ${BREAKPOINTS.md}) {
        display: flex;
      }
    }

    .consumer-marketing-unit--nav-dialog {
      position: absolute;
      top: ${calculateSpacing(7)};
      right: 0;
      transform: translateY(0);
      z-index: ${ZINDEX_MAP.navFixed};
    }
  }

  nav {
    &.navigation--horizontal {
      .consumer-marketing-unit--nav-rollover {
        top: ${calculateSpacing(4)};
      }
    }
  }
`;
// Standard Navigation right section
// 1. At tablet viewports , align to the right using auto margin-left
// 2. If Search Functionality is Disabled, include margin-right on utility links
const StackedNavigationSectionUtilityLinks = styled.div.withConfig({
    displayName: 'StackedNavigationSectionUtilityLinks'
}) `
  ${SignOutButtonWrapper} {
    &:hover {
      text-decoration: none;
    }
  }

  display: flex;
  grid-column: 3/-1;
  align-items: center;
  transition: opacity 0.3s ease-in-out;
  margin-left: auto;

  ${({ hasOnlyMenuToRight }) => hasOnlyMenuToRight && `grid-column: 1 / 3; margin-left: 0;`}

  ${({ hasSearchBarInSecondRow }) => hasSearchBarInSecondRow &&
    css `
      ${minScreen(BREAKPOINTS.lg)} {
        padding-right: ${calculateSpacing(4)};
      }

      ${minScreen(BREAKPOINTS.xxl)} {
        padding-right: ${calculateSpacing(6)};
      }
    `}

  ${NavigationListItemWrapper} {
    display: flex;
    position: relative;
    align-items: center;
    margin-right: ${calculateSpacing(2)};
    padding: 0;

    ${({ hasOnlyMenuToRight }) => hasOnlyMenuToRight && `margin-right: 0;`}
  }

  ${NavigationListWrapper} {
    display: none;
    margin: 0;

    ${minScreen(BREAKPOINTS.lg)} {
      display: flex;
    }

    ${({ hasOnlyMenuToRight }) => hasOnlyMenuToRight &&
    `display: flex; margin-left: ${calculateSpacing(2)}`}
  }

  ${minScreen(BREAKPOINTS.md)} {
    grid-column: 10/-1;
  }

  ${StackedNavigationSubscribeLink}

  .consumer-marketing-unit--nav-cta {
    ${({ adOverlay }) => adOverlay &&
    css `
        ${StackedNavigationAdOverlay} & {
          position: absolute;
          top: 50%;
          right: ${calculateSpacing(2)};
          transform: translateY(-50%);
          margin: 0;
          cursor: pointer;
          width: 115;

          ~ ${NavigationInternalLink}:hover {
            text-decoration: none;
          }

          &:hover,
          &:focus,
          &:focus-within {
            ~ .navigation__link {
              color: ${({ theme }) => getColorToken(theme, 'colors.foundation.collapsed-menu.nav-link.hover')};
            }
          }
        }
      `}

    .consumer-marketing-unit--nav-rollover:hover,
    .consumer-marketing-unit--nav-rollover:focus,
    .consumer-marketing-unit--nav-rollover:focus-within {
      ${ShowRollover}
    }

    .consumer-marketing-unit--nav-rollover {
      ${HideRollover}
      display: none;
      align-items: center;
      justify-content: center;

      ${minScreen(BREAKPOINTS.md)} {
        display: flex;
      }
    }

    .consumer-marketing-unit--nav-dialog {
      position: absolute;
      right: 0;
      transform: translateY(-14px);
      z-index: ${ZINDEX_MAP.navFixed};
    }
  }

  ${consumerMarketingStyles}
  ${NavCTALink} {
    padding: 0;

    @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
      padding-right: ${calculateSpacing(2)};
    }
  }

  ${({ showAccountAfterNavCta }) => showAccountAfterNavCta &&
    css `
      ${minScreen(BREAKPOINTS.lg)} {
        ${StackedNavigationSectionUtilityLinksLogin} {
          margin-right: 0;
        }
        ${NavCTALink} {
          padding-right: ${calculateSpacing(2)};
        }
      }
    `}

  .consumer-marketing-unit--nav-rollover {
    ${({ shouldUseCustomStyle }) => shouldUseCustomStyle && `left: ${calculateSpacing(18)};`}
  }

  .nav-rollover__component > div {
    ${({ shouldUseCustomStyle }) => shouldUseCustomStyle && `left: ${calculateSpacing(0)};`}
  }
`;
const StackedNavigationThemeStandard = css `
  &${StackedNavigationWrapper} {
    background: ${getColorToken('colors.foundation.menu-bg.collapsed')};
  }
  ${StackedNavigationProfileLink} {
    ${({ theme }) => getLinkStyles(theme, 'colors.interactive.base.brand-primary', 'colors.interactive.base.brand-secondary', 'navigation')};
  }

  ${StackedNavigationSectionPrimaryLinks},
  ${StackedNavigationScrollingSection} {
    .navigation__link {
      ${({ theme }) => getLinkStyles(theme, 'colors.foundation.collapsed-menu.nav-link.default', 'colors.foundation.collapsed-menu.nav-link.hover', 'navigation')};
    }
  }

  ${StackedNavigationSectionUtilityLinks} {
    .navigation__link {
      ${({ theme }) => getLinkStyles(theme, 'colors.foundation.collapsed-menu.utility-link.default', 'colors.foundation.collapsed-menu.utility-link.hover', 'navigation')};
    }

    .sign-out-button {
      &:hover {
        text-decoration: none;
        color: ${({ utilityNavLinkColorToken }) => utilityNavLinkColorToken
    ? getColorToken(utilityNavLinkColorToken)
    : ''};
      }
    }
  }

  ${StackedNavigationSectionUtilityLinksLogin} {
    ${StandardNavigationAccountLabel} {
      ${({ theme }) => getLinkStyles(theme, 'colors.foundation.collapsed-menu.utility-link.default', 'colors.foundation.collapsed-menu.utility-link.hover', 'navigation')};
    }
  }
`;
const StackedNavigationGridHeightForXlargeLogo = css `
  ${minScreen(BREAKPOINTS.lg)} {
    ${({ hasScrollingNavigation, shouldReduceStackedNavigationHeaderHeight, isDrawerOpen, hasSearchBarInSecondRow }) => {
    if (hasScrollingNavigation) {
        const navHeight = hasSearchBarInSecondRow
            ? `height: ${calculateSpacing(23)}`
            : `height: ${calculateSpacing(20)}`;
        return css `
          &&& {
            ${navHeight};
          }
        `;
    }
    if (isDrawerOpen) {
        return css `
          &&& {
            height: ${calculateSpacing(14)};
          }
        `;
    }
    if (shouldReduceStackedNavigationHeaderHeight) {
        return css `
          &&& {
            height: ${calculateSpacing(8)};
          }
        `;
    }
    return css `
        &&& {
          height: ${calculateSpacing(20)};
        }
      `;
}}
  }
`;
const StackedNavigationXlargeLogo = css `
  justify-content: center;
  margin: auto;
  ${minScreen(BREAKPOINTS.lg)} {
    ${StackedNavigationTop} {
      height: ${calculateSpacing(14)};

      ${({ shouldReduceStackedNavigationHeaderHeight }) => shouldReduceStackedNavigationHeaderHeight &&
    `height: ${calculateSpacing(8)};`}
    }

    ${StackedNavigationSectionPrimaryLinks} {
      height: ${calculateSpacing(6)};
    }

    ${StackedNavigationScrollingSection} {
      height: ${SCROLLING_SECTION_WITH_SEARCHBAR_HEIGHT};
      ${({ hasSearchBarInSecondRow }) => !hasSearchBarInSecondRow &&
    `height: ${SCROLLING_SECTION_WITHOUT_SEARCHBAR_HEIGHT};
        ${NavListItem} {
          height: ${SCROLLING_SECTION_WITHOUT_SEARCHBAR_HEIGHT};
        }
        `}
    }

    &&& {
      ${StackedNavigationSectionUtilityLinks} {
        top: ${calculateSpacing(5)};

        ${({ hasScrollingNavigation }) => hasScrollingNavigation && `top: ${calculateSpacing(6)};`}

        ${({ hasOnlyMenuToRight }) => hasOnlyMenuToRight && `top: ${calculateSpacing(6.5)};`}

        ${({ hasUtilityLinksCenterAlign }) => hasUtilityLinksCenterAlign &&
    `
            height: inherit;
            top: ${calculateSpacing(0)};
          `}
      }
    }

    ${ResponsiveImageContainer} {
      ${({ shouldReduceStackedNavigationHeaderHeight }) => shouldReduceStackedNavigationHeaderHeight && `height: 44px;`}
    }
  }
`;
const LinkBannerStackedNavigation = styled(LinkBanner).withConfig({
    displayName: 'LinkBannerStackedNavigation'
}) `
  @media (max-width: ${maxThresholds.lg}px) {
    border-top: 1px solid ${getColorToken('colors.foundation.menu.dividers')};
  }

  ${({ showOnMobile }) => showOnMobile !== undefined &&
    css `
      ${maxScreen(`${maxThresholds.lg}px`)} {
        display: ${showOnMobile ? 'block' : 'none'};
      }
    `}

  ${({ hasLinkbannerCrossSlideAnimation, isScrolled, showOnMobile }) => {
    if (hasLinkbannerCrossSlideAnimation) {
        return css `
        ${minScreen(BREAKPOINTS.lg)} {
          overflow: hidden;
          ${isScrolled
            ? css `
                animation: ${linkBannerDesktopSlideDown} 0.3s
                  cubic-bezier(0, 0.59, 0.32, 1) forwards;
              `
            : css `
                animation: ${linkBannerDesktopSlideUp} 0.3s
                  cubic-bezier(0, 0.59, 0.32, 1) forwards;
              `}
        }
        ${maxScreen(`${maxThresholds.lg}px`)} {
          overflow: hidden;
          ${showOnMobile
            ? css `
                animation: ${linkBannerMobileSlideDown} 0.3s
                  cubic-bezier(0, 0.59, 0.32, 1) forwards;
              `
            : css `
                animation: ${linkBannerMobileSlideUp} 0.3s
                  cubic-bezier(0, 0.59, 0.32, 1) forwards;
              `}
        }
      `;
    }
    return ``;
}}
`;
const StackedNavigationGrid = styled('div').withConfig({
    displayName: 'StackedNavigationGrid'
}) `
  ${universalGridCore()}
  ${cssVariablesGrid()}
  && {
    position: relative;
    grid-row-gap: 0;
    width: 100%;
    max-width: 100%;
  }

  ${minScreen(BREAKPOINTS.lg)} {
    ${({ shouldReduceStackedNavigationHeaderHeight }) => shouldReduceStackedNavigationHeaderHeight &&
    `&&& {
          height: ${calculateSpacing(8)};
        }`}
    ${({ collapseHeightWhenDrawerOpen }) => collapseHeightWhenDrawerOpen &&
    `&&& {
        height: ${calculateSpacing(8)};
        ${StackedNavigationSectionPrimaryLinks},
        ${StackedNavigationSectionUtilityLinks} {
          display: none;
        }
      }`}
  }

  ${({ isNavigationActiveState }) => isNavigationActiveState &&
    `&&&& {
        height: 100%;
    }`}

  ${({ xlLogoVisible }) => xlLogoVisible &&
    css `
      ${StackedNavigationGridHeightForXlargeLogo}
      ${StackedNavigationXlargeLogo}
    `}
`;
const StackedNavigationLinkBanner = css `
  top: 0;

  ${StackedNavigationScrollingSection} {
    display: none;
  }

  ${({ hasLinkbannerCrossSlideAnimation }) => {
    if (!hasLinkbannerCrossSlideAnimation) {
        return css `
        ${StackedNavigationSectionPrimaryLinks} {
          display: none;
        }
        ${StackedNavigationGrid} {
          @media (min-width: ${BREAKPOINTS.lg}) {
            height: ${calculateSpacing(8)};
          }
        }
      `;
    }
    return ``;
}}

  ${LinkBannerStackedNavigation}
`;
const StackedNavigationLinkBannerInverted = css `
  top: 0;

  ${({ hasLinkbannerCrossSlideAnimation }) => {
    if (!hasLinkbannerCrossSlideAnimation) {
        return css `
        ${StackedNavigationGrid} {
          @media (min-width: ${BREAKPOINTS.lg}) {
            height: ${calculateSpacing(8)};
          }
        }
      `;
    }
    return ``;
}}

  ${LinkBannerStackedNavigation}
`;
const StackedNavigationIsScrolled = css `
  ${minScreen(BREAKPOINTS.xl)} {
    ${StackedNavigationBottom} {
      .consumer-marketing-unit {
        display: flex;
      }

      ${StackedNavigationSectionLogo} {
        display: flex;
        grid-column: 5 / span 4;
      }
    }

    ${StackedNavigationDrawer} {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
    }

    ${StackedNavigationSectionLogo} {
      opacity: 1;
      z-index: initial;
    }
  }
`;
const RightStackedNavigationIsScrolled = css `
  ${minScreen(BREAKPOINTS.xl)} {
    ${StackedNavigationDrawer} {
      position: inherit;
      margin-right: 1.5rem;
      margin-left: 0;
    }
  }
`;
const StackedNavigationNavigationPrimaryLink = styled(Navigation.Horizontal).withConfig({
    displayName: 'StackedNavigationNavigationPrimaryLink'
}) `
  transition: opacity 0.3s ease-in-out;

  ${NavigationListItemWrapper} {
    margin-right: ${calculateSpacing(2)};
  }

  ${NavigationInternalLink} {
    ${({ shouldUseCustomStyle }) => shouldUseCustomStyle && `font-size: 14px;`}
  }
`;
const StackedNavigationSectionLogoSizeLarge = css `
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  min-width: ${calculateSpacing(20)};
  max-width: 100%;

  ${({ headerLayout, headerLogo, scrollingHeaderLogoDim, isHomepage, theme, hasTopStory, shouldShow100AnnivLogo, isScrolled = false }) => {
    if (headerLayout === 'fixed-header-layout') {
        const headerUrl = headerLogo?.sources?.sm?.url ||
            `/verso/static/${theme.meta.name}/assets/logo.svg`;
        return css `
        ${ResponsiveImageContainer} {
          ${isScrolled && isHomepage && scrollingHeaderLogoDim
            ? getSourceDimensions(scrollingHeaderLogoDim?.sources)
            : `${minScreen(BREAKPOINTS.lg)} {
            width: 128px;
            height: ${isHomepage && isScrolled ? 32 : 30}px;
          }`}

          ${minScreen(BREAKPOINTS.lg)} {
            ${({ navigationTheme }) => {
            return (navigationTheme === 'standard' && `content: url(${headerUrl});`);
        }}

            ${({ shouldUseCustomStyle }) => shouldUseCustomStyle && `height: 40px;`}
          }

          ${hasTopStory &&
            css `
            ${minScreen(BREAKPOINTS.lg)} {
              height: ${calculateSpacing(5)};
            }
          `}

          ${shouldShow100AnnivLogo &&
            css `
            ${minScreen(BREAKPOINTS.lg)} {
              width: ${calculateSpacing(33.32)};
              height: ${calculateSpacing(3)};
            }
          `}
        }
      `;
    }
    return '';
}}
`;
const StackedNavigationSectionLogoSizeXLarge = css `
  .navigation__link {
    ${({ theme }) => getLinkStyles(theme, 'colors.foundation.collapsed-menu.nav-link.default', 'colors.foundation.collapsed-menu.nav-link.hover', 'navigation')};
  }
  ${StackedNavigationSectionLogoCommon}
  justify-content: center;
  margin: auto;
  min-width: ${calculateSpacing(38)};
  max-width: 100%;

  ${({ headerLayout, logoSize, shouldShow100AnnivLogo }) => {
    if (headerLayout === 'fixed-header-layout' && logoSize === 'xlarge') {
        return `
        ${ResponsiveImageContainer} {
          width: ${calculateSpacing(26.25)};
          height: ${calculateSpacing(6.125)};

          ${minScreen(BREAKPOINTS.lg)} {
            width: ${calculateSpacing(37.5)};
            height: ${calculateSpacing(8.75)};

            ${shouldShow100AnnivLogo &&
            css `
                width: ${calculateSpacing(33.32)};
                height: ${calculateSpacing(3)};
              `}
          }
        `;
    }
    return '';
}}

  ${({ shouldUseCustomStyle }) => shouldUseCustomStyle &&
    `
    height: 52px;
    @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
      height: 52px;
    }`}
`;
const StackedNavigationSectionResponsiveLogo = css `
  .navigation__link {
    ${({ theme }) => getLinkStyles(theme, 'colors.foundation.collapsed-menu.nav-link.default', 'colors.foundation.collapsed-menu.nav-link.hover', 'navigation')};
  }
  ${StackedNavigationSectionLogoCommon}
  justify-content: center;
  margin: auto;
  min-width: ${calculateSpacing(38)};
  max-width: 100%;

  ${({ headerLayout, headerLogoDim }) => {
    const { sources } = headerLogoDim;
    if (headerLayout === 'fixed-header-layout' && sources) {
        return `
        ${ResponsiveImageContainer} {
         ${getSourceDimensions(sources)}
        }
      `;
    }
    return '';
}}
`;
const StackedNavigationSectionLogoSize = styled.div.withConfig({
    displayName: 'StackedNavigationSectionLogoSize'
}) `
  ${({ logoSize, headerLogoDim, isScrolled, isHomepage }) => {
    if ((headerLogoDim && !isHomepage) || (headerLogoDim && !isScrolled)) {
        return StackedNavigationSectionResponsiveLogo;
    }
    if (logoSize === 'large') {
        return StackedNavigationSectionLogoSizeLarge;
    }
    return StackedNavigationSectionLogoSizeXLarge;
}}
`;
const StackedNavigationFixedHeaderLayout = css `
  &,
  *,
  ${MoreDropdownLabel}, ${StandardNavigationAccountLabel} {
    ${({ hasTopStory, hasLinkbannerCrossSlideAnimation }) => {
    if (hasTopStory) {
        return `
          transition: background-color 0.1s cubic-bezier(0,.59,.32,1), color 0.1s cubic-bezier(0,.59,.32,1),
            fill 0.1s cubic-bezier(0,.59,.32,1), border-bottom-color 0.1s cubic-bezier(0,.59,.32,1),
            border-bottom 0.1s cubic-bezier(0,.59,.32,1), border-color 0.1s cubic-bezier(0,.59,.32,1),
            height 0.1s cubic-bezier(0,.59,.32,1), top 0.1s cubic-bezier(0,.59,.32,1);
        `;
    }
    else if (hasLinkbannerCrossSlideAnimation) {
        return `
          transition: background-color 0.3s cubic-bezier(0,.59,.32,1), color 0.3s cubic-bezier(0,.59,.32,1),
            fill 0.3s cubic-bezier(0,.59,.32,1), border-bottom-color 0.3s cubic-bezier(0,.59,.32,1),
            border-bottom 0.3s cubic-bezier(0,.59,.32,1), border-color 0.3s cubic-bezier(0,.59,.32,1),
            height 0.3s cubic-bezier(0,.59,.32,1), top 0.3s cubic-bezier(0,.59,.32,1);
        `;
    }
    return `
        transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out,
          fill 0.3s ease-in-out, border-bottom-color 0.3s ease-in-out,
          border-bottom 0.3s ease-in-out, border-color 0.3s ease-in-out,
          height 0.3s ease-in-out, top 0.3s ease-in-out;
      `;
}}
  }

  &${StackedNavigationWrapper} {
    border-bottom: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    ${({ shouldUseCustomStyle }) => shouldUseCustomStyle && `box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);`}

    ${({ hasTopStory }) => hasTopStory && `box-shadow: none;`}
    &.stacked-navigation--hidden-shadow {
      box-shadow: none;
    }
  }

  &.stacked-navigation--hidden-shadow.stacked-navigation--is-scrolled {
    & ${StackedNavigationTop} {
      border-bottom: none;
    }
  }
  ${({ hasLinkBanner, hasLinkbannerCrossSlideAnimation, hideNavWhenLinkBannerEnabled, xlLogoVisible, isDrawerOpen, hasSearchBarInSecondRow }) => {
    const scrollingSectionHeight = !hasSearchBarInSecondRow
        ? SCROLLING_SECTION_WITHOUT_SEARCHBAR_HEIGHT
        : SCROLLING_SECTION_WITH_SEARCHBAR_HEIGHT;
    if (!hasLinkBanner || hasLinkbannerCrossSlideAnimation) {
        return `
        ${StackedNavigationSectionPrimaryLinks} {
          align-items: center;
          height: ${calculateSpacing(6)};
          overflow: hidden;

          ${minScreen(BREAKPOINTS.lg)} {
            display: flex;
          }
        }

        ${StackedNavigationScrollingSection} {
          align-items: center;
          height: ${scrollingSectionHeight};
          overflow: hidden;

          ${minScreen(BREAKPOINTS.lg)} {
            display: flex;
          }
        }
      `;
    }
    else if (hasLinkBanner && !hideNavWhenLinkBannerEnabled) {
        return `
          && {
            ${StackedNavigationSectionPrimaryLinks} {
              align-items: center;
              height: ${calculateSpacing(8)};
              overflow: hidden;
              ${minScreen(BREAKPOINTS.sm)} {
                height: 0;
              }
              ${minScreen(BREAKPOINTS.lg)} {
                display: flex;
                height: ${calculateSpacing(8)};
              }
            }
            ${!xlLogoVisible && !isDrawerOpen && StackedNavigationGrid} {
              @media (min-width: ${BREAKPOINTS.lg}) {
                height: ${calculateSpacing(14)};
              }
            }
            ${StackedNavigationScrollingSection} {
              align-items: center;
              height: ${scrollingSectionHeight};
              overflow: hidden;
              z-index: 40;

              ${minScreen(BREAKPOINTS.lg)} {
                display: flex;
              }
            }
          }
        `;
    }
    return ``;
}}

  ${StackedNavigationNavigationPrimaryLink} {
    margin: ${calculateSpacing(2)} 0;
  }

  ${minScreen(BREAKPOINTS.lg)} {
    ${StackedNavigationSearchBarWrapper} {
      margin: ${calculateSpacing(2)} 0 ${calculateSpacing(2)} auto;
    }
  }

  ${StackedNavigationSearchBarWrapper} {
    ${maxScreen(BREAKPOINTS.md)} {
      ${({ hasBoxShadowInMobile, isDrawerOpen }) => hasBoxShadowInMobile &&
    !isDrawerOpen &&
    css `
          border-bottom: 1px solid
            ${getColorToken('colors.foundation.menu.dividers')};
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        `}
    }
  }

  ${({ hasSearchBarInSecondRow, hasAIChatbotEnabled }) => {
    if (hasSearchBarInSecondRow && !hasAIChatbotEnabled) {
        return css `
        ${StackedNavigationGrid} {
          height: ${calculateSpacing(14)};

          ${minScreen(BREAKPOINTS.lg)} {
            height: ${calculateSpacing(17)};
          }
        }
      `;
    }
    else if (hasAIChatbotEnabled) {
        return css `
        ${StackedNavigationGrid} {
          height: ${calculateSpacing(16)};

          ${minScreen(BREAKPOINTS.md)} {
            height: ${calculateSpacing(17)};
          }
        }
      `;
    }
    return css `
      ${StackedNavigationGrid} {
        height: ${calculateSpacing(7)};

        ${minScreen(BREAKPOINTS.lg)} {
          height: ${calculateSpacing(14)};
        }
      }
    `;
}}

  ${({ isScrolled, isContentHeaderVisible, hasLinkBanner, hasLinkbannerCrossSlideAnimation, enableMobileLinkBannerScroll, showSecondRowOnScroll, showPrimaryNavOnScroll, journeyRibbonHeight }) => {
    if (isScrolled && hasLinkBanner && journeyRibbonHeight > 0) {
        return css `
        ${!enableMobileLinkBannerScroll &&
            !showPrimaryNavOnScroll &&
            `
        ${StackedNavigationGrid} {
          ${maxScreen(`${maxThresholds.lg}px`)} {
              height: 0;
              overflow: hidden;
            }
        }
        `}
        ${StackedNavigationGrid} {
          ${enableMobileLinkBannerScroll &&
            !isContentHeaderVisible &&
            `
            ${maxScreen(`${maxThresholds.lg}px`)} {
              height: 0;
              overflow: hidden;
              transition: top 0.5s ease-in-out;
            }
          `}
        }
        && {
          ${StackedNavigationSectionPrimaryLinks},
          ${StackedNavigationScrollingSection},
          ${StackedNavigationScrollingSection} ${NavListItem} {
            transition: height 0.3s ease-in-out;
            height: 0;
          }
          ${hasLinkbannerCrossSlideAnimation &&
            css `
            ${StackedNavigationSectionPrimaryLinks} {
              transition: height 0.3s cubic-bezier(0, 0.59, 0.32, 1);
            }
          `}
          ${StackedNavigationGrid} {
            ${minScreen(BREAKPOINTS.lg)} {
              height: ${calculateSpacing(8)};
            }
          }
        }
      `;
    }
    if (isScrolled && hasLinkBanner) {
        return css `
        ${!enableMobileLinkBannerScroll &&
            !showPrimaryNavOnScroll &&
            `
          ${maxScreen(`${maxThresholds.lg}px`)} {
            top: -${calculateSpacing(7)};
            transition: top 0.5s ease-in-out;
          }`}
        ${StackedNavigationGrid} {
          ${enableMobileLinkBannerScroll &&
            !isContentHeaderVisible &&
            `
            ${maxScreen(`${maxThresholds.lg}px`)} {
              height: 0;
              overflow: hidden;
            }
          `}
        }
        && {
          ${StackedNavigationSectionPrimaryLinks},
          ${StackedNavigationScrollingSection},
          ${StackedNavigationScrollingSection} ${NavListItem} {
            transition: height 0.3s ease-in-out;
            height: 0;
          }
          ${hasLinkbannerCrossSlideAnimation &&
            css `
            ${StackedNavigationSectionPrimaryLinks} {
              transition: height 0.3s cubic-bezier(0, 0.59, 0.32, 1);
            }
          `}
          ${StackedNavigationGrid} {
            ${minScreen(BREAKPOINTS.lg)} {
              height: ${calculateSpacing(8)};
            }
          }
        }
      `;
    }
    return (isScrolled &&
        !showSecondRowOnScroll &&
        css `
        ${StackedNavigationSectionPrimaryLinks},
        ${StackedNavigationScrollingSection},
        ${StackedNavigationScrollingSection} ${NavListItem} {
          transition: height 0.3s ease-in-out;
          height: 0;
        }
        ${hasLinkbannerCrossSlideAnimation &&
            css `
          ${StackedNavigationSectionPrimaryLinks} {
            transition: height 0.3s cubic-bezier(0, 0.59, 0.32, 1);
          }
        `}
        ${StackedNavigationGrid} {
          ${minScreen(BREAKPOINTS.lg)} {
            height: ${calculateSpacing(8)};
          }
        }
      `);
}}

  & ${StackedNavigationTop} {
    border-bottom: 1px solid ${getColorToken('colors.foundation.menu.dividers')};
    height: ${STACKED_NAVIGATION_FIXED_HEADER_TOP_HEIGHT};
    ${({ shouldReduceStackedNavigationHeaderHeight }) => shouldReduceStackedNavigationHeaderHeight &&
    `border-bottom: 0px !important;`}
    ${minScreen(BREAKPOINTS.lg)} {
      display: grid;
    }
  }

  & ${StackedNavigationBottom} {
    height: ${calculateSpacing(7)};
    ${({ hasTopStory, isDrawerOpen }) => hasTopStory &&
    isDrawerOpen &&
    css `
        border-bottom: 1px solid
          ${getColorToken('colors.foundation.menu.dividers')};
      `}

    @media (min-width: 0) and (max-width: ${maxThresholds.md}px) {
      grid-template-columns: ${calculateSpacing(11)} auto ${calculateSpacing(11)};

      ${({ hasOnlyMenuToRight }) => hasOnlyMenuToRight &&
    `
        grid-template-columns: ${calculateSpacing(16)} auto ${calculateSpacing(16)};
        column-gap: 0;
        `}
    }

    ${minScreen(BREAKPOINTS.lg)} {
      display: none;
    }
  }

  ${StackedNavigationSectionUtilityLinks} {
    ${minScreen(BREAKPOINTS.lg)} {
      position: absolute;
      top: ${calculateSpacing(1.75)};
      right: 0;
      grid-column: 3/-1;

      ${({ hasScrollingNavigation }) => hasScrollingNavigation && `top: ${calculateSpacing(3)};`}

      ${({ hasOnlyMenuToRight }) => hasOnlyMenuToRight &&
    `
          top: ${calculateSpacing(3)};
          right: auto;
          left: ${calculateSpacing(3)};
          grid-column: 1 / 4;
        `}
      ${({ hasUtilityLinksCenterAlign }) => hasUtilityLinksCenterAlign &&
    `
          height: inherit;
          top: ${calculateSpacing(0)};
        `}
    }
  }

  .consumer-marketing-unit--nav-cta,
  .consumer-marketing-unit--mob-nav-cta {
    line-height: 0;
  }

  .consumer-marketing-unit--nav-rollover,
  .nav-rollover__component > div {
    top: calc(${calculateSpacing(8)} - ${calculateSpacing(2)});
    right: ${calculateSpacing(9)};
    z-index: ${ZINDEX_MAP.navFixed};

    ${({ hasUtilityLinksCenterAlign, xlLogoVisible }) => hasUtilityLinksCenterAlign &&
    xlLogoVisible &&
    css `
        top: ${calculateSpacing(11)};
      `}

    ${({ showAccountAfterNavCta }) => showAccountAfterNavCta &&
    css `
        right: ${calculateSpacing(23)};
      `}
  }

  .consumer-marketing-unit--nav-dialog {
    top: ${calculateSpacing(6)};
  }

  ${StackedNavigationSectionUtilityLinksLogin} {
    ${StandardNavigationDropdown} {
      top: calc(${calculateSpacing(8)} - ${calculateSpacing(4)});
    }
    ${StandardNavigationDropdown}.account-dropdown__avatar-links {
      top: ${calculateSpacing(6.4)};
      right: ${calculateSpacing(-1.5)};
      width: max-content;

      &::before {
        content: none;
      }
      ${minScreen(BREAKPOINTS.lg)} {
        top: ${calculateSpacing(5.6)};
        right: ${calculateSpacing(0.2)};
      }
    }
  }

  & ${StackedNavigationSectionMobileOption} {
    align-items: center;
    justify-content: flex-end;
    padding-right: ${calculateSpacing(2)};

    ${minScreen(BREAKPOINTS.md)} {
      grid-column: 10 / span 3;

      ${({ hasOnlyMenuToRight }) => hasOnlyMenuToRight &&
    `
        grid-column: 1 / span 3;`}
    }

    .consumer-marketing-unit {
      display: block;
    }

    ${({ hasOnlyMenuToRight }) => hasOnlyMenuToRight &&
    `grid-row: 1; justify-content: flex-start; padding-right: 0;`}
  }

  ${({ hasLinkBanner }) => hasLinkBanner && StackedNavigationLinkBanner}

  ${({ xlLogoVisible }) => xlLogoVisible && StackedNavigationXlargeLogo}
`;
const StackedNavigationDefaultLayout = css `
  &${StackedNavigationWrapper} {
    transition: transform 0.5s ease-in-out;
  }

  ${({ isScrolled }) => isScrolled &&
    `
    &${StackedNavigationIsScrolled}{
        ${minScreen(BREAKPOINTS.xl)} {
          transform: translateY(-130px);

          ${StackedNavigationSectionLogo} {
            transition: opacity 0.5s ease-in-out;
            transition-delay: 0.3s;
          }

          ${StackedNavigationSectionPrimaryLinks},
            ${StackedNavigationTop} {
              transform: translateY(-130px);
              opacity: 0;
          }
        }
      }
  `}

  ${StackedNavigationTop} {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;

    ${minScreen(BREAKPOINTS.xl)} {
      display: grid;
    }
  }

  ${StackedNavigationSectionPrimaryLinks},
  ${StackedNavigationScrollingSection} {
    align-items: center;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;

    ${minScreen(BREAKPOINTS.xl)} {
      display: flex;
    }
  }

  ${StackedNavigationGrid} {
    grid-template-rows: ${calculateSpacing(6)};
    ${minScreen(BREAKPOINTS.xl)} {
      grid-template-rows: ${calculateSpacing(16)} ${calculateSpacing(6)};
    }
  }

  ${StackedNavigationBottom} {
    ${minScreen(BREAKPOINTS.xl)} {
      grid-row: 2/3;
    }
  }

  ${StackedNavigationSectionLogoSizeXLarge},
  ${StackedNavigationSectionLogoSizeLarge} {
    ${ResponsiveImageContainer} {
      width: auto;
      height: 100px;
    }
  }

  ${StackedNavigationSectionUtilityLinksLogin} {
    display: none;

    ${StandardNavigationDropdown} {
      top: calc(${calculateSpacing(16)} - ${calculateSpacing(8)});
    }

    ${minScreen(BREAKPOINTS.lg)} {
      display: block;
    }
  }

  ${StackedNavigationSectionMobileOption} {
    display: none;
  }
`;
const StackedNavigationPrimaryNavigationSizeDefault = css `
  ${StackedNavigationSectionPrimaryLinks} {
    grid-column: 4 / span 6;
  }

  ${StackedNavigationScrollingSection} {
    grid-column: 1 / -1;
  }
`;
const StackedNavigationPrimaryNavigationSizeLarge = css `
  ${StackedNavigationSectionPrimaryLinks} {
    grid-column: 2 / span 10;
  }

  ${StackedNavigationScrollingSection} {
    grid-column: 1 / -1;
  }
`;
const StackedNavigationThemeInvertedStyle = (isScrolled, theme) => {
    if (isScrolled) {
        return `
    &&& {
      ${StackedNavigationTop} {
        border-bottom: 1px solid ${getColorToken(theme, 'colors.consumption.lead.inverted.divider')};
      }
      transition: border-bottom-width 0.5s ease-in-out;
      border-bottom-width: 0;
    }
    `;
    }
    return `
    &&& {
      ${StackedNavigationTop} {
        border-bottom: 1px solid;
        ${getColorStyles(theme, 'border-bottom-color', isInverted(theme)
        ? 'colors.consumption.lead.inverted.divider'
        : 'colors.foundation.menu.dividers')}
      }
    }
  `;
};
const StackedNavigationThemeInverted = css `
  ${({ headerLayout, hasLinkBanner, isScrolled, theme }) => {
    if (headerLayout === 'fixed-header-layout' && !hasLinkBanner) {
        return `
      &&& {
        ${StackedNavigationWrapper} {
          border-bottom: 1px solid
          ${getColorToken(theme, isInverted(theme)
            ? 'colors.consumption.lead.inverted.divider'
            : 'colors.foundation.menu.dividers')};
        }
      }

      ${StackedNavigationThemeInvertedStyle(isScrolled, theme)}
      `;
    }
    if (headerLayout === 'fixed-header-layout' && hasLinkBanner) {
        return `${StackedNavigationWrapper} {
        ${StackedNavigationLinkBannerInverted} {
            border-bottom: none;

          ${LinkBannerStackedNavigation} {
              @media (max-width: ${maxThresholds.md}px) {
                border-top: 1px solid ${getColorToken(theme, 'colors.consumption.lead.inverted.divider')};
              }
          }
        }
      }
      ${StackedNavigationThemeInvertedStyle(isScrolled, theme)}`;
    }
    return ``;
}}

  ${StackedNavigationWrapper},
  ${StandardNavigationDropdown} {
    background: ${getColorToken('colors.consumption.lead.inverted.background')};
  }

  ${StackedNavigationSectionUtilityLinksLogin} {
    ${StandardNavigationDropdown}.account-dropdown__avatar-links {
      border: 1px solid;
      ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.background.dark')};
    }
    ${NavigationAccountSignIn} {
      ${getColorStyles('color', 'colors.interactive.base.white')};
    }

    ${NavigationAccountIconWrapper} {
      &:hover {
        background-color: ${getColorToken('colors.interactive.base.dark')};
        ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.background.dark')};
      }
    }

    ${AccountDropdownToggleIcon} {
      svg {
        align-self: center;

        path {
          fill: ${getColorToken('colors.consumption.lead.inverted.link')};
        }
      }

      &:hover,
      &:active,
      &:focus {
        svg path {
          background-color: ${getColorToken('colors.interactive.base.dark')};
          fill: ${getColorToken('colors.consumption.lead.inverted.link')};
        }
      }
    }
  }

  ${StackedNavigationSectionPrimaryLinks},
  ${StackedNavigationSectionUtilityLinks},
  ${StackedNavigationSectionUtilityLinksLogin},
  ${StackedNavigationScrollingSection} {
    .navigation__link,
    ${StandardNavigationAccountLabel} {
      ${({ theme }) => getLinkStyles(theme, 'colors.consumption.lead.inverted.link', 'colors.consumption.lead.inverted.link', 'navigation')};
    }
  }

  ${StandardNavigationDropdown} .account-links__navigation {
    ${NavigationListItemWrapper} {
      &:hover {
        background-color: ${getColorToken('colors.interactive.base.dark')};
      }

      .navigation__link {
        ${({ theme }) => getLinkStyles(theme, 'colors.consumption.lead.inverted.link', 'colors.consumption.lead.inverted.link', 'navigation')};

        &:hover {
          text-decoration: none;
        }
      }
    }

    .navigation__link {
      &:hover {
        text-decoration: none;
      }
    }
  }

  ${StandardNavigationDropdown} {
    border: 1px solid
      ${getColorToken('colors.consumption.lead.inverted.divider')};

    ${SignOutButtonWrapper}.account-links__sign-out {
      &:hover {
        background-color: ${getColorToken('colors.interactive.base.dark')};
        text-decoration: none;
        color: ${getColorToken('colors.consumption.lead.inverted.link')};
      }
    }

    &::before {
      border-bottom-color: ${getColorToken('colors.consumption.lead.inverted.background')};
    }

    &::after {
      border-bottom-color: ${getColorToken('colors.consumption.lead.inverted.divider')};
    }
  }

  .standard-navigation-account--icon path {
    fill: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.inverted.link')};
  }

  ${StackedNavigationSearch},
  ${StackedNavigationDrawerToggle} {
    &,
    &:hover,
    &:focus {
      svg path {
        fill: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.inverted.link')};
      }
    }
  }

  ${StackedNavigationProfileLink} {
    ${({ theme }) => getLinkStyles(theme, 'colors.consumption.lead.inverted.link', 'colors.consumption.lead.inverted.link', 'navigation')};
  }
`;
const StackedNavigationThemeTransparent = css `
  ${StackedNavigationWrapper} {
    background: transparent;
  }
  ${StandardNavigationDropdown} {
    background: ${getColorToken('colors.consumption.lead.inverted.background')};
  }

  ${StackedNavigationSectionUtilityLinksLogin} {
    ${StandardNavigationDropdown}.account-dropdown__avatar-links {
      border: 1px solid;
      ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.background.dark')};
    }
    ${NavigationAccountSignIn} {
      ${getColorStyles('color', 'colors.interactive.base.white')};
    }

    ${NavigationAccountIconWrapper} {
      &:hover {
        background-color: ${getColorToken('colors.interactive.base.dark')};
        ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.background.dark')};
      }
    }

    ${AccountDropdownToggleIcon} {
      svg {
        align-self: center;

        path {
          fill: ${getColorToken('colors.consumption.lead.inverted.link')};
        }
      }

      &:hover,
      &:active,
      &:focus {
        svg path {
          background-color: ${getColorToken('colors.interactive.base.dark')};
          fill: ${getColorToken('colors.consumption.lead.inverted.link')};
        }
      }
    }
  }

  ${StackedNavigationSectionUtilityLinks} {
    .navigation__link,
    ${StandardNavigationAccountLabel} {
      ${({ theme }) => getLinkStyles(theme, 'colors.consumption.lead.inverted.link', 'colors.consumption.lead.inverted.link', 'navigation')};
    }
  }

  ${StandardNavigationDropdown} .account-links__navigation {
    ${NavigationListItemWrapper} {
      &:hover {
        background-color: ${getColorToken('colors.interactive.base.dark')};
      }

      .navigation__link {
        ${({ theme }) => getLinkStyles(theme, 'colors.consumption.lead.inverted.link', 'colors.consumption.lead.inverted.link', 'navigation')};

        &:hover {
          text-decoration: none;
        }
      }
    }

    .navigation__link {
      &:hover {
        text-decoration: none;
      }
    }
  }

  ${StandardNavigationDropdown} {
    border: 1px solid
      ${getColorToken('colors.consumption.lead.inverted.divider')};

    .account-links__sign-out {
      &:hover {
        background-color: ${getColorToken('colors.interactive.base.dark')};
        text-decoration: none;
      }
    }

    &::before {
      border-bottom-color: ${getColorToken('colors.consumption.lead.inverted.background')};
    }

    &::after {
      border-bottom-color: ${getColorToken('colors.consumption.lead.inverted.divider')};
    }
  }

  .standard-navigation-account--icon path {
    fill: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.inverted.link')};
  }

  ${StackedNavigationSearch},
  ${StackedNavigationDrawerToggle} {
    &,
    &:hover,
    &:focus {
      svg path {
        fill: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.inverted.link')};
      }
    }
  }
`;
const StackedNavigationWithDrawerOpen = css `
  ${StackedNavigationSearch}, ${StackedNavigationSectionUtilityLinks}, ${StackedNavigationNavigationPrimaryLink} {
    opacity: 0;
  }
`;
// Simple Navigation container
// 1. z-index supplied here for layering of standard navigation and search bar
const StackedNavigationHeader = styled.header.withConfig({
    displayName: 'StackedNavigationHeader'
}) `
  ${({ hasSEOSupport }) => hasSEOSupport &&
    `
  z-index: 999; `}
  ${StackedNavigationWrapper}
  ${({ navigationTheme }) => {
    if (navigationTheme === 'inverted') {
        return StackedNavigationThemeInverted;
    }
    else if (navigationTheme === 'transparent') {
        return StackedNavigationThemeTransparent;
    }
    return StackedNavigationThemeStandard;
}}

  ${({ isDrawerOpen }) => isDrawerOpen && StackedNavigationWithDrawerOpen}
  ${({ isScrolled }) => isScrolled && StackedNavigationIsScrolled}
  ${({ isScrolled, hasOnlyMenuToRight }) => isScrolled && hasOnlyMenuToRight && RightStackedNavigationIsScrolled}
  ${({ adOverlay }) => adOverlay && StackedNavigationAdOverlay}
  ${({ primaryNavigationSize }) => {
    if (primaryNavigationSize === 'default') {
        return StackedNavigationPrimaryNavigationSizeDefault;
    }
    return StackedNavigationPrimaryNavigationSizeLarge;
}}
  ${({ hasLinkBanner }) => hasLinkBanner && StackedNavigationLinkBanner}
  ${({ headerLayout }) => {
    if (headerLayout === 'fixed-header-layout') {
        return StackedNavigationFixedHeaderLayout;
    }
    return StackedNavigationDefaultLayout;
}}
`;
const StackedNavigationSectionCmUnitNavLeft = styled.div.withConfig({
    displayName: 'StackedNavigationSectionCmUnitNavLeft'
}) `
  display: flex;
  align-items: center;
  justify-content: center;
`;
const StackedNavigationLogoLink = styled.a.withConfig({
    displayName: 'StackedNavigationLogoLink'
}) `
  width: 100%;
  height: 100%;

  .responsive-image {
    display: flex;
    justify-content: center;

    ${ResponsiveImageContainer} {
      object-fit: contain;
      transition: all 0.3s ease-in-out;
    }
  }
`;
const StackedNavigationScrolledDrawer = styled(Drawer).withConfig({
    displayName: 'StackedNavigationScrolledDrawer'
}) `
  ${({ isScrolled, isOpen, fixedHeader, xlLogoVisible }) => {
    if (isScrolled && isOpen) {
        return `padding-top: ${calculateSpacing(6)};`;
    }
    if (xlLogoVisible && fixedHeader && isOpen) {
        return `${minScreen(BREAKPOINTS.lg)} {
        && {
          padding-top: ${calculateSpacing(12)};
        }
      }`;
    }
    if (fixedHeader && isOpen) {
        return `${minScreen(BREAKPOINTS.xl)} {
        padding-top: ${calculateSpacing(12)};
      }`;
    }
    if (isOpen && !isScrolled) {
        return `${minScreen(BREAKPOINTS.xl)} {
        &&& {
          padding-top: ${calculateSpacing(22)};
        }

      }`;
    }
    return '';
}}
  ${({ cropWidth }) => {
    if (cropWidth) {
        return `width: calc(100% - ${calculateSpacing(8)});`;
    }
    return '';
}}
  ${({ journeyRibbonHeight }) => {
    return `margin-top: ${journeyRibbonHeight}px;`;
}}
  ${({ hasSearchBarInSecondRow }) => {
    if (!hasSearchBarInSecondRow) {
        return `
        ${MegaMenuGridWrapper} ${GridItem} {
          margin-top: ${calculateSpacing(1)};
        }
      `;
    }
    return '';
}}
`;
const StackedNavigationDrawerGlobalStyles = createGlobalStyle `
  .body__drawer--open {
    ${StackedNavigationProfileLink} {
        display: none;
    }
  }
`;
const ScrollingNavigationNavWrapper = styled.div.withConfig({
    displayName: 'ScrollingNavigationNavWrapper'
}) `
  ${({ hasAIChatbotEnabled }) => {
    if (hasAIChatbotEnabled) {
        return `
        ${NavList} {
          @media (min-width: ${BREAKPOINTS.lg}) {
            padding-right: ${calculateSpacing(4)};
          }  
        }
      `;
    }
    return '';
}}
`;
const StackedNavigationMegaMenuWrapper = styled.div.withConfig({
    displayName: 'StackedNavigationMegaMenuWrapper'
}) `
  margin-top: ${calculateSpacing(2)};

  ${({ xlLogoVisible, journeyRibbonHeight }) => xlLogoVisible &&
    `margin-top: calc(${calculateSpacing(6)} + ${journeyRibbonHeight}px);`}
`;
const StackedSeriesNavigation = styled(StandardNavigationSeriesPagination).withConfig({
    displayName: 'StackedSeriesNavigation'
}) `
  transform: unset;
  height: ${calculateSpacing(8)};
`;
const StackedNavigationDrawerSearchBarWrapper = styled.div.withConfig({
    displayName: 'StackedNavigationDrawerSearchBarWrapper'
}) `
  margin: auto;
  ${({ xlLogoVisible }) => xlLogoVisible
    ? `margin-top:${calculateSpacing(14)};`
    : `margin-top:${calculateSpacing(8)};`}
  background-color: ${getColorToken('colors.background.white')};
  padding: ${calculateSpacing(2)} 0;
  width: 35%;

  input {
    &[type='search'] {
      appearance: none;
      border-radius: 0;
      border-color: ${getColorToken('colors.interactive.base.dark')};
    }
  }

  ${maxScreen(BREAKPOINTS.md)} {
    margin-top: ${calculateSpacing(3)};
    padding: 0;
    width: 95%;
  }

  ${SearchBarWrapper} {
    background: none;
  }
`;
module.exports = {
    LinkBannerStackedNavigation,
    StackedNavigationBottom,
    StackedNavigationDrawer,
    StackedNavigationDrawerGlobalStyles,
    StackedNavigationDrawerSearchBarWrapper,
    StackedNavigationDrawerToggle,
    StackedNavigationHeader,
    StackedNavigationGrid,
    StackedNavigationLogoLink,
    StackedNavigationSectionLogoSize,
    StackedNavigationProfileLink,
    StackedNavigationSearch,
    StackedNavigationSearchBarWrapper,
    StackedNavigationSectionCmUnitNavLeft,
    StackedNavigationSectionLogo,
    StackedNavigationSectionMobileOption,
    StackedNavigationSectionMobileOptionLink,
    StackedNavigationSectionPrimaryLinks,
    StackedNavigationScrollingSection,
    StackedNavigationSearchToggle,
    StackedNavigationSearchToggleIcon,
    StackedNavigationSectionUtilityLinks,
    StackedNavigationSectionUtilityLinksLogin,
    StackedNavigationScrolledDrawer,
    StackedNavigationTop,
    StackedNavigationWrapper,
    StackedNavigationNavigationPrimaryLink,
    ScrollingNavigationNavWrapper,
    StackedNavigationMegaMenuWrapper,
    StackedNavigationConsumerMarketingWrapper,
    StackedSeriesNavigation
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 98904:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
const react_intl_1 = __webpack_require__(46984);
exports["default"] = (0, react_intl_1.defineMessages)({
    profileLinkLabel: {
        id: 'StackedNavigation.ProfileLinkLabel',
        defaultMessage: 'My Profile',
        description: 'Label for the profile link',
        isConfigurable: true
    },
    navigationMenuButtonLabel: {
        id: 'StackedNavigation.MenuButton',
        defaultMessage: 'Open Navigation Menu',
        description: 'Label for the menu button'
    },
    primaryLinksLabel: {
        id: 'StackedNavigation.PrimaryLinksLabel',
        defaultMessage: 'Primary',
        description: 'ARIA label for the primary links'
    },
    utilityLinksLabel: {
        id: 'StackedNavigation.UtilityLinksLabel',
        defaultMessage: 'Utility',
        description: 'ARIA label for utility links'
    },
    openSearchMenuLabel: {
        id: 'StackedNavigation.OpenSearchMenuLabel',
        defaultMessage: 'Open Search Menu',
        description: 'ARIA label open search menu button'
    },
    searchLabel: {
        id: 'StackedNavigation.SearchLabel',
        defaultMessage: 'Search',
        description: 'ARIA label for search link'
    },
    subscribeLabel: {
        id: 'StackedNavigation.SubscribeLabel',
        defaultMessage: 'Subscribe',
        description: 'Text for the subscribe link'
    },
    drawerLabel: {
        id: 'StackedNavigation.DrawerLabel',
        defaultMessage: 'Navigation and Sign Up Menu',
        description: 'ARIA label for the drawer modal'
    },
    primaryNavigationLabel: {
        id: 'SiteHeader.ScrollingNavigation',
        defaultMessage: 'Primary',
        description: 'ARIA label for the whole primary navigation'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 17210:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const StackedNavigation = __webpack_require__(29497);
const { calculateSpacing } = __webpack_require__(26865);
StackedNavigation.FixedHeader = asVariation(StackedNavigation, 'FixedHeader', {
    headerLayout: 'fixed-header-layout'
});
StackedNavigation.FixedHeaderWithLinkBanner = asVariation(StackedNavigation, 'FixedHeaderWithLinkBanner', {
    headerLayout: 'fixed-header-layout',
    hasLinkBanner: true
});
StackedNavigation.FixedHeaderLargeLogo = asVariation(StackedNavigation, 'FixedHeaderLargeLogo', {
    headerLayout: 'fixed-header-layout',
    hasXLargeLogo: true,
    isLargeOnHomeOnly: true
});
StackedNavigation.FixedHeaderNormalLogoWithScrolling = asVariation(StackedNavigation, 'FixedHeaderNormalLogoWithScrolling', {
    headerLayout: 'fixed-header-layout',
    showScrollingNavigation: true,
    showSecondRowOnScroll: true
});
StackedNavigation.FixedHeaderNormalLogoWithSearchBar = asVariation(StackedNavigation, 'FixedHeaderNormalLogoWithSearchBar', {
    headerLayout: 'fixed-header-layout',
    hasSearchBarInSecondRow: true,
    isDrawerEnabled: true,
    showMegaMenuForMobile: true,
    showScrollingNavigation: true,
    showSecondRowOnScroll: true
});
StackedNavigation.FixedHeaderLogoWithSearchBar = asVariation(StackedNavigation, 'FixedHeaderLogoWithSearchBar', {
    headerLayout: 'fixed-header-layout',
    hasSearchBarInSecondRow: true,
    hasXLargeLogo: true,
    isLargeOnHomeOnly: true,
    isDrawerEnabled: true,
    showMegaMenuForMobile: true,
    showScrollingNavigation: true,
    showSecondRowOnScroll: true
});
StackedNavigation.FixedHeaderLargeLogoWithRightMenu = asVariation(StackedNavigation, 'FixedHeaderLargeLogoWithRightMenu', {
    headerLayout: 'fixed-header-layout',
    hasOnlyMenuToRight: true,
    isLargeOnHomeOnly: true,
    shouldShowOverlayTop: false,
    shouldUseCustomStyle: true,
    overlayCSS: {
        topRule: `top: ${calculateSpacing(8)}; border: 0;`
    }
});
StackedNavigation.FixedHeaderLargeLogoWithRightMenuAndLinkBanner = asVariation(StackedNavigation, 'FixedHeaderLargeLogoWithRightMenuAndLinkBanner', {
    headerLayout: 'fixed-header-layout',
    hasLinkBanner: true,
    hasOnlyMenuToRight: true,
    shouldShowOverlayTop: false,
    shouldUseCustomStyle: true,
    overlayCSS: {
        topRule: `top: ${calculateSpacing(8)}; border: 0;`
    }
});
StackedNavigation.FixedHeaderXLargeLogoWithMegaMenu = asVariation(StackedNavigation, 'FixedHeaderXLargeLogoWithMegaMenu', {
    headerLayout: 'fixed-header-layout',
    hasSearchBarInSecondRow: false,
    hasXLargeLogo: true,
    isLargeOnHomeOnly: false,
    isDrawerEnabled: true,
    showMegaMenuForMobile: true,
    showScrollingNavigation: true,
    showSecondRowOnScroll: false
});
module.exports = StackedNavigation;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 50152:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const { getCookie } = __webpack_require__(56892);
const cookies = (__webpack_require__(53788)["default"]);
const { oidcCookies } = cookies;
const translations = (__webpack_require__(52188)/* ["default"] */ .A);
const AccountLinks = __webpack_require__(33795);
const ResponsiveImage = __webpack_require__(43608);
const { storageFactory } = __webpack_require__(60663);
const localStore = storageFactory(() => window.localStorage);
const { useClientStatus } = __webpack_require__(8877);
const { AccountDropdownToggleIcon, StandardNavigationDropdown, StandardNavigationAccountLabel, NavigationAccountIconWrapper, NavigationAccountIcon, NavigationAccountSignIn, JourneyUnitDivider, StandardNavigationSuccessLoginAlert } = __webpack_require__(88570);
const Alert = __webpack_require__(54330);
const breakpoints = __webpack_require__(99906);
const isMobileLayout = () => {
    const query = `(max-width: ${breakpoints.minThresholds.lg}px)`;
    return  true && window.matchMedia(query).matches;
};
/**
 * Render an account dropdown.
 *
 * @param {object} props - React props
 * @param {object} [props.accountAvatar] - Optional Account Icon image data with sources, if present renders configured icon instead of signInLabel and accountLabel
 * @param {string} props.accountLabel - Label for the 'My Account' link
 * @param {string} [props.utilityNavLinkColorToken] - Optional colorToken to apply to the nav-link on hover
 * @param {Array<object>} props.accountLinks - A list of `{ url, text }` objects
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} props.signInLabel - Label for the 'Sign In' link
 * @param {string} props.signInLink - String url that takes user to log in page
 * @param {object} props.user - required user object
 * @param {boolean} props.user.isAuthenticated - represents if the user is currently authenticated
 * @param {object} props.tooltip - props for tooltip component
 *
 *
 * @returns {ReactElement} <p>
 */
const AccountDropdown = ({ accountAvatar, accountLabel, accountLinks, className, signInLabel, signInLink = '/account/sign-in', user, tooltip, utilityNavLinkColorToken }) => {
    const intl = useIntl();
    const dropdownRef = React.useRef(null);
    const isClient = useClientStatus();
    const { isAuthenticated } = user;
    const [showSuccessTooltip, setShowSuccessTooltip] = React.useState(!!tooltip);
    const [showAuthenticatedTooltipKey, setShowAuthenticatedTooltipKey] = React.useState('showAuthenticatedTooltip');
    const SHOW_SUCCESS_TOOLTIP_DURATION = 6000;
    const [isJourneyUnitActive, setIsJourneyUnitActive] = React.useState(false);
    const [dropdownExpanded, setDropdownExpanded] = React.useState(false);
    const options = React.useMemo(() => {
        return accountLinks?.map((obj) => obj.text.toLowerCase());
    }, [accountLinks]);
    React.useEffect(() => {
        window.cnBus?.on('journey.unit.render.begin', (payload) => {
            if (payload &&
                payload.renderer === 'verso' &&
                payload.component?.name === 'NavCTA') {
                setIsJourneyUnitActive(true);
            }
        });
    }, []);
    React.useEffect(() => {
        if (tooltip) {
            if (window && window.dataLayer) {
                const environment = window.dataLayer[0]?.site?.env;
                const { brandSlug } = window.dataLayer[0]?.content || {};
                setShowAuthenticatedTooltipKey(`${environment}-${brandSlug}-showAuthenticatedTooltip` // while testing this in local, you might see undefined for environment and brandSlug because datalayer is not yet loading
                );
            }
            const oidcAccessToken = Boolean(getCookie(oidcCookies.access));
            // Set the local storage value to show success tooltip when user is not signed in
            if (!isAuthenticated && !oidcAccessToken) {
                localStore.setItem(showAuthenticatedTooltipKey, true);
            }
            setTimeout(() => {
                if (isAuthenticated) {
                    const showAuthenticatedTooltip = Boolean(localStore.getItem(showAuthenticatedTooltipKey));
                    if (showAuthenticatedTooltip) {
                        // Remove the local storage value set to show success tooltip
                        // as the tooltip is already shown to the signed in user once
                        localStore.removeItem(showAuthenticatedTooltipKey);
                    }
                    // Adding this to autohide tooltip required to be called for all component instances
                    // and change state only if required
                    setShowSuccessTooltip(false);
                }
            }, SHOW_SUCCESS_TOOLTIP_DURATION);
        }
    }, [
        isAuthenticated,
        tooltip,
        showAuthenticatedTooltipKey,
        SHOW_SUCCESS_TOOLTIP_DURATION
    ]);
    React.useEffect(() => {
        const closeDropdown = () => {
            setDropdownExpanded(false);
        };
        const handleKeyEvent = (event) => {
            if (event.key === 'Escape') {
                if (dropdownExpanded) {
                    setDropdownExpanded(!dropdownExpanded);
                }
            }
            if (event.key === 'Tab') {
                if (!options.includes(event.target.innerText.toLowerCase())) {
                    closeDropdown();
                }
            }
        };
        const handleClickOutside = (event) => {
            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
                closeDropdown();
            }
        };
        document.addEventListener('keydown', handleKeyEvent);
        document.addEventListener('click', handleClickOutside);
        return () => {
            document.removeEventListener('keydown', handleKeyEvent);
            document.removeEventListener('click', handleClickOutside);
        };
    }, [dropdownExpanded, options]);
    const handleDropdownToggle = () => {
        setDropdownExpanded(!dropdownExpanded);
    };
    const handleKeyDown = (event) => {
        if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            setDropdownExpanded(!dropdownExpanded);
        }
    };
    const shouldShowAuthenticatedTooltip = () => {
        const showAuthenticatedTooltip = showSuccessTooltip &&
            Boolean(localStore.getItem(showAuthenticatedTooltipKey));
        if (showAuthenticatedTooltip) {
            return true;
        }
        return false;
    };
    const authenticatedTooltip = (React.createElement(StandardNavigationSuccessLoginAlert, { className: "StandardNavigationSuccessLoginAlert", dataTestId: "success-login-tooltip", isVisible: showSuccessTooltip, onClose: () => {
            setShowSuccessTooltip(false);
            // Remove the local storage value set to show success tooltip
            // as the tooltip is already shown to the signed in user once
            localStore.removeItem(showAuthenticatedTooltipKey);
        }, ...tooltip, arrowPosition: (isMobileLayout() && tooltip?.arrowPositionOnMobile) ||
            tooltip?.arrowPosition },
        React.createElement("p", null, tooltip?.dangerousBookmarkMessage)));
    const profileWithAvatar = (React.createElement(React.Fragment, null, isAuthenticated ? (React.createElement(StandardNavigationAccountLabel, { tabIndex: 0, onKeyDown: handleKeyDown, "aria-expanded": dropdownExpanded, onClick: handleDropdownToggle, ref: dropdownRef },
        isJourneyUnitActive && React.createElement(JourneyUnitDivider, null),
        React.createElement(NavigationAccountIconWrapper, { isAuthenticated: true, tabIndex: 0 },
            React.createElement(NavigationAccountIcon, { ...accountAvatar }),
            React.createElement(AccountDropdownToggleIcon, { "data-testid": "AccountDropdownToggleIcon" })))) : (React.createElement(StandardNavigationAccountLabel, { href: signInLink, rel: "nofollow", as: "a", "data-testid": "signIn" },
        isJourneyUnitActive && React.createElement(JourneyUnitDivider, null),
        React.createElement(NavigationAccountIconWrapper, { isAuthenticated: false },
            React.createElement(NavigationAccountIcon, { ...accountAvatar }),
            React.createElement(NavigationAccountSignIn, null, signInLabel || intl.formatMessage(translations.signInLabel)))))));
    const profileWithoutAvatar = (React.createElement(React.Fragment, null, isAuthenticated ? (React.createElement(StandardNavigationAccountLabel, { tabIndex: 0, onKeyDown: handleKeyDown, "aria-expanded": dropdownExpanded, onClick: handleDropdownToggle, ref: dropdownRef },
        accountLabel || intl.formatMessage(translations.accountLabel),
        React.createElement(AccountDropdownToggleIcon, { "data-testid": "AccountDropdownToggleIcon" }))) : (React.createElement(StandardNavigationAccountLabel, { href: signInLink, rel: "nofollow", as: "a", "data-testid": "signIn" }, signInLabel || intl.formatMessage(translations.signInLabel)))));
    return (React.createElement("div", { className: classnames('standard-navigation-account', accountAvatar && 'standard-navigation-account-with-avatar', className) }, isClient && (React.createElement(React.Fragment, null,
        isAuthenticated &&
            shouldShowAuthenticatedTooltip() &&
            authenticatedTooltip,
        accountAvatar ? profileWithAvatar : profileWithoutAvatar,
        isAuthenticated && (React.createElement(StandardNavigationDropdown, { className: accountAvatar && 'account-dropdown__avatar-links', accountLinks: accountLinks, as: AccountLinks, "data-testid": "StandardNavigationDropdown", expanded: dropdownExpanded, utilityNavLinkColorToken: utilityNavLinkColorToken }))))));
};
AccountDropdown.propTypes = {
    accountAvatar: PropTypes.shape(ResponsiveImage.propTypes),
    accountLabel: PropTypes.string,
    accountLinks: PropTypes.array,
    className: PropTypes.string,
    signInLabel: PropTypes.string,
    signInLink: PropTypes.string,
    tooltip: PropTypes.shape(Alert.propTypes),
    user: PropTypes.shape({
        isAuthenticated: PropTypes.bool.isRequired
    }),
    utilityNavLinkColorToken: PropTypes.string
};
module.exports = AccountDropdown;
//# sourceMappingURL=AccountDropdown.js.map

/***/ }),

/***/ 76569:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { injectIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(20702)/* ["default"] */ .A);
const MoreMenuDropdown = __webpack_require__(71319);
const { StandardNavigationSectionPrimaryLinks, StandardNavigationNavPrimaryLinks } = __webpack_require__(88570);
class DynamicChannelNav extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.getUpdatedWidth = () => {
            const { moreMenuWidth } = this.state;
            return {
                itemsWidthMap: this.getItemsWidth(),
                moreMenuWidth: this.moreMenuEL.current
                    ? this.moreMenuEL.current.offsetWidth
                    : moreMenuWidth,
                navWidth: this.navigationEl.current.offsetWidth
            };
        };
        this.getElementMarginRight = (element) => {
            return Number(window
                .getComputedStyle(element)
                .marginRight.replace('px', '')
                .replace('rem', ''));
        };
        this.getUpdatedLinks = this.getUpdatedLinks.bind(this);
        this.handleResize = this.handleResize.bind(this);
        this.moreMenuEL = React.createRef();
        this.navigationLinksEl = React.createRef();
        this.navigationEl = React.createRef();
        this.linksInTopNav = this.props.items.filter((item) => item.showInTopNav);
        this.state = {
            itemsWidthMap: {},
            moreMenuWidth: null,
            navWidth: null,
            shouldFilterVisibleLinks: false,
            // 'didMount' is needed to switch on/off --hidden modifier
            // PROBLEM: link items blink while being recounted. We need to render them all on mount
            // to get their actual widths. On narrow screen there's not enought space to fit them all
            // SOLUTION: keep link items hidden untill visible links have been recalculated
            didMount: false
        };
    }
    componentDidMount() {
        const { hideLinksWhenResize } = this.props;
        let state = { didMount: true };
        if (hideLinksWhenResize) {
            window.addEventListener('resize', this.handleResize);
            state = {
                ...state,
                ...this.getUpdatedWidth(),
                shouldFilterVisibleLinks: true
            };
        }
        this.setState(state);
    }
    componentWillUnmount() {
        window.removeEventListener('resize', this.handleResize);
    }
    getItemsWidth() {
        const items = this.linksInTopNav;
        const { itemsWidthMap } = this.state;
        const updatedItemsWidth = { ...itemsWidthMap };
        const navigationLinks = [...this.navigationLinksEl.current.children];
        navigationLinks.forEach((item, index) => {
            const linkName = items[index].text;
            const newLinkWidth = item.offsetWidth + this.getElementMarginRight(item);
            const shouldUpdateLinkWidth = newLinkWidth !== updatedItemsWidth[linkName];
            updatedItemsWidth[linkName] = shouldUpdateLinkWidth
                ? newLinkWidth
                : updatedItemsWidth[linkName];
        });
        return updatedItemsWidth;
    }
    getUpdatedLinks() {
        const { items } = this.props;
        const { moreMenuWidth, shouldFilterVisibleLinks } = this.state;
        if (!shouldFilterVisibleLinks) {
            return { visibleLinks: items };
        }
        let sortedLinks = this.getSortedLinks(this.linksInTopNav, 0);
        // If there's not enough space to fit all links
        // Should to sort the links again considering width of the 'more' label
        if (sortedLinks.visibleLinks.length !== this.linksInTopNav.length) {
            sortedLinks = this.getSortedLinks(this.linksInTopNav, moreMenuWidth);
        }
        const { visibleLinks, moreMenuLinks } = sortedLinks;
        return {
            // don't render links if there're less than 3 of them
            // it's an old requirement from way back then
            visibleLinks: visibleLinks[2] ? visibleLinks : [],
            moreMenuLinks
        };
    }
    getSortedLinks(links, initialWidth) {
        const defaultSpacing = 20;
        let sumLinksWidth = initialWidth + defaultSpacing;
        const { itemsWidthMap, navWidth } = this.state;
        return links.reduce((acc, link) => {
            sumLinksWidth += itemsWidthMap[link.text];
            if (sumLinksWidth < navWidth) {
                acc.visibleLinks.push(link);
            }
            else {
                acc.moreMenuLinks.push(link);
            }
            return acc;
        }, {
            visibleLinks: [],
            moreMenuLinks: []
        });
    }
    handleResize() {
        this.setState({
            ...this.getUpdatedWidth()
        });
    }
    render() {
        const { intl, hasBorderDropdown, hideLinksWhenResize } = this.props;
        const { didMount } = this.state;
        const { visibleLinks, moreMenuLinks } = this.getUpdatedLinks();
        const showMoreMenu = didMount
            ? hideLinksWhenResize &&
                visibleLinks[0] &&
                visibleLinks.length !== this.linksInTopNav.length
            : true;
        return (React.createElement(StandardNavigationSectionPrimaryLinks, { ref: this.navigationEl, isHidden: !didMount, isDynamic: hideLinksWhenResize },
            React.createElement(StandardNavigationNavPrimaryLinks, { attributes: {
                    'aria-label': intl.formatMessage(translations.primaryLinksLabel)
                }, links: visibleLinks, shouldAllowNavItemHide: true, element: this.navigationLinksEl }),
            showMoreMenu && (React.createElement("div", { ref: this.moreMenuEL },
                React.createElement(MoreMenuDropdown, { links: moreMenuLinks, hasBorderDropdown: hasBorderDropdown })))));
    }
}
DynamicChannelNav.propTypes = {
    hasBorderDropdown: PropTypes.bool,
    hideLinksWhenResize: PropTypes.bool.isRequired,
    intl: PropTypes.shape({
        formatMessage: PropTypes.func
    }),
    items: PropTypes.any.isRequired
};
module.exports = injectIntl(DynamicChannelNav);
//# sourceMappingURL=DynamicChannelNav.js.map

/***/ }),

/***/ 72400:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const DynamicChannelNav = __webpack_require__(76569);
module.exports = DynamicChannelNav;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 20702:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    primaryLinksLabel: {
        id: 'DynamicChannelNav.PrimaryLinks',
        defaultMessage: 'Primary',
        description: 'ARIA label for the standard navigation primary links'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 71319:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { MoreDropdownWrapper, MoreDropdownLabel, AccountDropdownToggleIcon, StandardNavigationDropdown, MoreDropdownNavigation } = __webpack_require__(88570);
/**
 * Render more links dropdown.
 *
 * @param {object} props - React props
 * @param {boolean} [props.hasBorderDropdown] - Optional. Enable or disable border.
 * @param {Array<object>} props.links - A list of `{ isExternal, text, url, isPersistent }` objects
 *
 * @returns {ReactElement} <div>
 */
const MoreMenuDropdown = ({ hasBorderDropdown = true, links }) => {
    const [isMoreMenuOpen, setIsMoreMenuOpen] = React.useState(false);
    return (React.createElement(MoreDropdownWrapper, null,
        React.createElement(MoreDropdownLabel, { "data-testid": "MoreDropdownLabel", "aria-expanded": isMoreMenuOpen, onMouseOver: () => setIsMoreMenuOpen(true), onMouseOut: () => setIsMoreMenuOpen(false), type: "button" },
            "More",
            React.createElement(AccountDropdownToggleIcon, { "data-testid": "MoreMenuDropdownToggleIcon" })),
        React.createElement(StandardNavigationDropdown, { hasBorderDropdown: hasBorderDropdown, "data-testid": "StandardNavigationDropdown" }, links && links.length > 0 && (React.createElement(MoreDropdownNavigation, { links: links, linkClassName: "more-menu__link" })))));
};
MoreMenuDropdown.propTypes = {
    hasBorderDropdown: PropTypes.bool,
    links: PropTypes.array
};
module.exports = MoreMenuDropdown;
//# sourceMappingURL=MoreMenuDropdown.js.map

/***/ }),

/***/ 55634:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
/**
 * Renders nav links to optimise for SEO
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {Array<object>} props.linksArr - A list of primary/secondary links objects
 *
 * @returns {ReactElement} <div>
 */
const NavLinks = ({ linksArr, className }) => {
    return (React.createElement("div", { "aria-hidden": "true", className: className },
        React.createElement("ul", null, linksArr.map((item, index) => (React.createElement("li", { key: index },
            React.createElement("a", { "aria-hidden": "true", tabIndex: -1, href: item.url }, item.text),
            item.children && (React.createElement("ul", null, item.children.map((child, childIndex) => (React.createElement("li", { key: childIndex },
                React.createElement("a", { "aria-hidden": "true", tabIndex: -1, href: child.url }, child.text))))))))))));
};
NavLinks.propTypes = {
    className: PropTypes.string,
    linksArr: PropTypes.array
};
module.exports = NavLinks;
//# sourceMappingURL=NavLinks.js.map

/***/ }),

/***/ 88953:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useEffect } = __webpack_require__(96540);
const { injectIntl } = __webpack_require__(46984);
const { SearchBarWrapper, SearchForm, SearchInput, SearchLabel } = __webpack_require__(26348);
const SearchIcon = __webpack_require__(73767);
const translations = (__webpack_require__(87270)/* ["default"] */ .A);
/**
 * SearchBar component
 *
 * @param {object} props - React props
 * @param props.intl - i18n functions
 * @param props.onSubmit - Function to execute when search is submitted
 * @param props.placeholder - Optional placeholder string
 * @param props.queryParameters - Map of query parameters to append to search requests
 * @param {string} props.searchLink - The link for the search action
 * @param {boolean} props.shouldSetFocus - Flag to set focus on search bar
 * @returns {ReactElement} <div>
 */
const SearchBar = ({ intl, onSubmit, placeholder, queryParameters, searchLink, shouldSetFocus = false }) => {
    const inputPlaceholder = placeholder || intl.formatMessage(translations.placeholder);
    useEffect(() => {
        if (shouldSetFocus) {
            const searchRef = document.querySelector('input[type=search]');
            searchRef?.focus();
        }
    }, [shouldSetFocus]);
    return (React.createElement(SearchBarWrapper, null,
        React.createElement(SearchForm, { name: "search-form", action: searchLink || '/search', method: "GET", onSubmit: onSubmit },
            React.createElement(SearchLabel, null,
                React.createElement(SearchInput, { type: "search", placeholder: inputPlaceholder, name: "q", formName: "search-form", label: "search", hideLabel: true }),
                queryParameters &&
                    Object.keys(queryParameters).map((key) => (React.createElement("input", { type: "hidden", name: key, value: queryParameters[key], key: key }))),
                React.createElement(SearchIcon, null)))));
};
SearchBar.propTypes = {
    intl: PropTypes.object,
    onSubmit: PropTypes.func,
    placeholder: PropTypes.string,
    queryParameters: PropTypes.object,
    searchLink: PropTypes.string,
    shouldSetFocus: PropTypes.bool
};
SearchBar.displayName = 'SearchBar';
module.exports = injectIntl(SearchBar);
//# sourceMappingURL=SearchBar.js.map

/***/ }),

/***/ 54120:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(88953);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 26348:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.SearchLabel = exports.SearchForm = exports.SearchInput = exports.SearchBarWrapper = void 0;
const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing, getColorToken } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const TextField = __webpack_require__(89662);
exports.SearchBarWrapper = styled.section.withConfig({
    displayName: 'StandardNavigationSearchBarWrapper'
}) `
  display: grid;

  border: none;
  background: ${getColorToken('colors.foundation.menu-bg.collapsed')};
`;
exports.SearchInput = styled(TextField.SingleLine).withConfig({
    displayName: 'SearchInput'
}) `
  input {
    margin-top: 0;

    border-color: ${getColorToken('colors.interactive.base.black')};
    background: ${getColorToken('colors.interactive.base.white')};
    padding-left: 2rem;
    height: 2.5rem;

    &::placeholder {
      color: ${getColorToken('colors.interactive.base.dark')};
    }
  }

  @media (min-width: ${BREAKPOINTS.lg}) {
    margin-bottom: 0;
  }
`;
exports.SearchForm = styled.form.withConfig({ displayName: 'SearchForm' }) `
  padding-right: ${calculateSpacing(2)};
  padding-left: ${calculateSpacing(2)};
`;
exports.SearchLabel = styled.label.withConfig({
    displayName: 'SearchLabel'
}) `
  position: relative;

  > svg {
    position: absolute;
    transform: translate(10px, -52px);

    fill: ${getColorToken('colors.interactive.base.black')};

    @media (min-width: ${BREAKPOINTS.lg}) {
      transform: translate(10px, -36px);
    }
  }

  .icon-search {
    margin-top: 8px;
  }
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 87270:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    placeholder: {
        id: 'SearchBar.placeholder',
        defaultMessage: 'Search for "stir-fry"',
        description: 'Placeholder text for search input'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 62363:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const ReactModal = __webpack_require__(20312);
const { injectIntl } = __webpack_require__(46984);
const throttle = __webpack_require__(7350);
const { connect } = __webpack_require__(67851);
const createActions = __webpack_require__(62067);
const { TrackComponentChannel } = __webpack_require__(78788);
const translations = (__webpack_require__(52188)/* ["default"] */ .A);
let ConsumerMarketingUnit = __webpack_require__(71284);
const { NavCTA, NavRollover, NewsletterRibbon } = __webpack_require__(12501);
const { PaymentGateway } = __webpack_require__(92807);
const Drawer = __webpack_require__(98653);
const SecondaryMenu = __webpack_require__(82814);
const Navigation = __webpack_require__(54790);
const ResponsiveAsset = __webpack_require__(73275);
const scrollHelper = __webpack_require__(26890);
const CloseIcon = __webpack_require__(76399);
const MenuIcon = __webpack_require__(26488);
const SearchIcon = __webpack_require__(73767);
const Shopping = __webpack_require__(61599);
const { googleAnalytics } = __webpack_require__(90090);
const DynamicChannelNav = __webpack_require__(72400);
const LinkBanner = __webpack_require__(82873);
const SearchBar = __webpack_require__(54120);
const AccountDropdown = __webpack_require__(50152);
const ShopifyCart = __webpack_require__(75391);
const { BookmarkIcon } = __webpack_require__(72964);
const { setStandardNavigationDispatcher } = __webpack_require__(69836);
const { StandardNavigationSearchBarWrapper, StandardNavigationWrapper, StandardNavigationDrawer, StandardNavigationDrawerButtonToggle, StandardNavigationSectionUtilityLinks, StandardNavigationSectionLogo, StandardNavigationHeadLineBlock, StandardNavigationHeadLineBlockHeadLine, StandardNavigationHeadLineBlockChannelNavigation, StandardNavigationSearchButton, StandardNavigationPrimaryLinks, StandardNavigationSecondaryLinks, StandardNavigationSeriesPagination, StandardNavigationNavSecondaryLinks, StandardNavigationLogoLink, StandardNavigationLogoImage, StandardNavigationSectionSecondaryLinks, StandardNavigationNavUtilityLinks, StandardNavigationCartButton, StandardNavigationCartQuantity, StandardNavigationCart, StandardNavigationConsumerMarketingWrapper, StandardNavigationIconWrapper, StandardNavigationDrawerSearchBarWrapper } = __webpack_require__(88570);
const { isDesktopBrowser } = __webpack_require__(72362);
ConsumerMarketingUnit = React.memo(ConsumerMarketingUnit);
/**
 * StandardNavigation component
 *
 * @param {object} props - React props
 * @param {Drawer.propTypes} props.accountProps - Required properties for the account drop down
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.contentAlign] - Optional text alignment in menu, default 'left'
 * @param {Drawer.propTypes} props.drawerProps - Required properties for the drawer
 * @param {string|object} props.drawerProps.appElement - The app element as a string selector or HTMLElement to pass to ReactModal
 * @param {boolean} props.hasBookmark - Determines if bookmark should be hidden
 * @param {boolean} props.hasHeadline - Determines if navbar should display page headline on scroll
 * @param {boolean} props.hasSearch - Determines if search should be hidden
 * @param {boolean} props.hasSearchBar - Determines if the Search Bar should be made available to Standard Navigation
 * @param {boolean} [props.hasSearchBarWithDrawer] - Optional boolean value, determines if search drawer should be hidden
 * @param {object} props.headerInvertedLogo - Inverted header logo image data including sources and alt text
 * @param {boolean} props.isAccountsEnabled - Determine whether to show account-related functionality
 * @param {boolean} props.isBookmarkVisible - Determine whether to show bookmark icon (updated through redux)
 * @param {isVisualLinkBanner} [props.isVisualLinkBanner] - If `false` show link banner with navigation
 * @param {boolean} props.isLogoWide - Determine what logo size should be shown
 * @param {object} props.logo - Logo image data including sources and alt text
 * @param {object} props.invertedLogo - Inverted logo image data including sources and alt text
 * @param {string} logoBaseUrl - The URL the logo links to
 * @param {string} [props.pageHeadline] - Headline string to display in navbar
 * @param {Array} [props.primaryLinks] - Optional Primary list of `{ isExternal, text, url, isPersistent }` object links
 * @param {boolean} props.shouldKeepSubscribeLinkActive - Should show subscribe link in mobile view
 * @param {boolean} [props.showLinkBanner] - If `true` show link banner with navigation
 * @param {object} props.searchQueryParameters - Optional query parameters to be appended to nav search bar requests
 * @param {Array} props.secondaryLinks - Array of secondary links
 * @param {object} [props.seriesData] - Optional series data if article is part of a series
 * @param {object} props.user - required user object
 * @param {boolean} props.user.isAuthenticated - represents if the user is currently authenticated
 * @param {Array} [props.utilityLinks] - Optional Secondary list of `{ isExternal, text, url, isPersistent }` object links
 * @param {object} [props.variations] - Optional variation properties used in rendering the component
 * @param {string} [props.variations.hasLinkBanner] - Optional value determining whether the navigation uses a link banner
 * @param {object} [props.variations.logoAlign] - Optional text determining left or center logo alignment
 * @param {object} [props.variations.mobileOption] - Optional value determining mobile viewport rendering for CM Unit or Search
 * @param {string} [props.variations.palette] - Optional theme name
 * @param {string} [props.theme] - Optional header theme name
 * @param {boolean} [props.shouldConsiderSeriesPagination] - Optional prop to Prioritize SeriesPagination when article contains both LinkBanner and  seriesData
 * @param {boolean} [props.variations.hasCart] - Optional prop to determine if Shopify Cart needs to be shown
 * @param {boolean} props.isShopifyCartWidgetOpen - status of whether shopify cart is open
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 *
 *
 * @returns {ReactElement} <header>
 */
class StandardNavigation extends React.Component {
    constructor(props, context) {
        super(props, context);
        /**
         * Toggle the Drawer
         * Checks against an open Search Bar
         *
         * @returns {undefined} undefined
         */
        this.doToggleDrawer = () => {
            this.setState({
                isDrawerOpen: !this.state.isDrawerOpen
            });
            googleAnalytics.emitGoogleTrackingEvent(`hamburger-menu-${!this.state.isDrawerOpen ? 'expanded' : 'collapsed'}`);
        };
        /**
         * Toggle the Search Bar Drawer
         *
         * @returns {undefined} undefined
         */
        this.doToggleSearchDrawer = () => {
            this.setState({
                isSearchDrawerOpen: !this.state.isSearchDrawerOpen
            }, () => {
                if (this.state.isSearchDrawerOpen) {
                    this.trackSearchSource('icon');
                }
            });
        };
        const { shouldKeepSubscribeLinkActive } = props;
        this.handleScroll = throttle(this.handleScroll.bind(this), 50);
        this.shouldKeepSubscribeLinkActive = shouldKeepSubscribeLinkActive;
        this.withHeadline = this.props.hasHeadline && this.props.pageHeadline;
        this.handleClickNavigation = this.handleClickNavigation.bind(this);
        this.handleToggleShopifyCart = this.handleToggleShopifyCart.bind(this);
        this.onCartDataChange = this.onCartDataChange.bind(this);
        this.state = {
            showHeadline: false,
            isDrawerOpen: false,
            isScrolled: false,
            lastScrollPosition: 0,
            isContentHeaderVisible: true,
            shopifyCartQuantity: 0,
            isSearchDrawerOpen: false,
            isClient: false
        };
    }
    componentDidMount() {
        this.setState({ isClient: true });
        const { drawerProps, headlineElementClass, mainContentElementClass } = this.props;
        const { appElement } = drawerProps;
        this.registerContentHeaderVisibilityObserver();
        window.addEventListener('scroll', this.handleScroll);
        ReactModal.setAppElement(appElement);
        // This sets a dispatcher available for component that can be triggered via helper dispatcher methods
        this.props.setStandardNavigationDispatcher();
        if (this.withHeadline) {
            this.headlineNode = document.querySelector(headlineElementClass);
            this.mainContentNode = document.querySelector(`.${mainContentElementClass}`);
        }
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'StandardNavigation',
            variation: this.props.variationName
        });
    }
    componentWillUnmount() {
        window.removeEventListener('scroll', this.handleScroll);
        this.observer.disconnect();
    }
    /**
     * Handles content header visibility changes (the content header visibility
     * changes from invisible to visible, or from visible to invisible).
     *
     * @param {Array} entries - the content header intersection changes
     *
     * @returns {undefined}
     */
    onContentHeaderVisibilityChange(entries) {
        const [entry] = entries;
        this.setState({ isContentHeaderVisible: entry.isIntersecting });
    }
    onCartDataChange(cartItems) {
        const quantity = cartItems?.length || undefined;
        this.setState({
            shopifyCartQuantity: quantity === undefined ? 0 : quantity
        });
    }
    handleToggleShopifyCart() {
        this.props.setShopifyWidgetState(!this.props.isShopifyCartWidgetOpen);
    }
    handleClickNavigation(e) {
        if (e.target.innerText !== 'Newsletter') {
            if ( true && window.dataLayer) {
                window.dataLayer.push({
                    event: 'navigation-click',
                    navigationType: 'header',
                    clickText: e.target.innerText
                });
            }
        }
    }
    /**
     * Registers the content header intersection observer and binds a handler
     * method to it. When the content header visibility changes (becomes
     * visible or invisible) the navigation component will know it via
     * intersection observer. The navigation bar is then able to change its
     * own theme according to the content header visibility.
     *
     * When the theme is dark, both content header and navigation are dark when
     * viewport is positioned at the top. When the user scrolls down pass the
     * content header, it will reach the article content section, which is
     * always white. The navigation will know that the user scrolled down the
     * content header and will set itself to white. If the user scrolls back up
     * to the content header, the navigation will once again change itself to dark
     *
     * @returns {undefined}
     */
    registerContentHeaderVisibilityObserver() {
        this.observer = new IntersectionObserver(this.onContentHeaderVisibilityChange.bind(this));
        const contentHeader = document.querySelector('.content-header');
        if (contentHeader) {
            this.observer.observe(contentHeader);
        }
    }
    /**
     * Updating state if the page has scrolled
     *
     * @returns {undefined} undefined
     */
    handleScroll() {
        const { isScrolled, lastScrollPosition } = this.state;
        const scrollTop = window.pageYOffset;
        if (this.withHeadline || this.props.seriesData) {
            this.trackScrollPosition();
        }
        if (scrollHelper.shouldUpdateScroll(isScrolled, scrollTop, lastScrollPosition)) {
            this.setState({
                isScrolled: scrollTop - lastScrollPosition > 0,
                lastScrollPosition: scrollTop
            });
        }
    }
    /**
     * Checks if the navigation theme to use is the inverted theme
     *
     * @param {string} palette - theme of current nav variation
     * @returns {boolean} whether the inverted theme should be used
     */
    isNavigationThemeInverted(palette) {
        return (palette === 'inverted' &&
            !this.state.isDrawerOpen &&
            this.state.isContentHeaderVisible);
    }
    shouldDisplaySeriesPagination() {
        const { isContentHeaderVisible, isDrawerOpen } = this.state;
        return !isContentHeaderVisible && !isDrawerOpen;
    }
    /**
     * Update state with scroll position relative to page main content and title
     *
     * @returns {undefined} undefined
     */
    trackScrollPosition() {
        if (!this.props.seriesData && this.headlineNode && this.mainContentNode) {
            const { top: mainContentStartPos, bottom: mainContentEndPos } = this.mainContentNode.getBoundingClientRect();
            const { bottom: titleEndPos } = this.headlineNode.getBoundingClientRect();
            const showHeadline = mainContentStartPos < 0 && titleEndPos < 0 && mainContentEndPos >= 0;
            this.setState({
                showHeadline
            });
        }
    }
    trackSearchSource(source) {
        return () => googleAnalytics.emitGoogleTrackingEvent(`navigation-site-search-${source}`);
    }
    /**
     * Render the StandardNavigation
     *
     * @returns {React.Element} - a react fragment
     */
    /* eslint-disable complexity */
    /* complexity is due to various temporary conditional rendering
     *  that will be cleaned up once account login and search func
     *  lands across brands
     * */
    render() {
        const { accountProps, className, contentAlign = 'left', drawerProps, decorationStyle = 'default', hasBookmark = false, hasHeadline, hasBorderDropdown, hasSearch = true, hasSearchBar = false, hasSearchBarWithDrawer, headlineAlign, headerInvertedLogo, hideLinksWhenResize = false, intl, invertedLogo, isAccountsEnabled = false, isBookmarkVisible = false, isLogoWide = false, logo, logoBaseUrl = '/', pageHeadline, primaryLinks, secondaryLinks, seriesData = null, shouldConsiderSeriesPagination = false, shouldEnableFullArticleInverted, shouldHideSeriesPagination = true, shouldKeepSubscribeLinkActive = false, showLinkBanner = false, isVisualLinkBanner = false, theme = 'standard', user, utilityLinks, variations = {
            hasLinkBanner: false,
            logoAlign: 'left',
            mobileOption: 'search',
            mobileNoBorderBottom: false,
            palette: 'standard'
        } } = this.props;
        const { isClient } = this.state;
        let { mobileOption } = variations;
        const isMobile = !isDesktopBrowser();
        const { logoAlign, mobileLogoAlign, mobileNoBorderBottom, hasCart } = variations;
        const { showHeadline, shopifyCartQuantity } = this.state;
        const palette = this.isNavigationThemeInverted(variations.palette || theme)
            ? 'inverted'
            : 'standard';
        const logos = palette === 'inverted'
            ? { logo: invertedLogo, headerLogo: headerInvertedLogo }
            : { logo, headerLogo: logo };
        const topLeftLink = utilityLinks.filter((link) => link.forceLeftOfNav === true);
        const topRightLinks = utilityLinks.filter((link) => link.forceLeftOfNav === false);
        const topRightMobileLinks = utilityLinks.filter((link) => link.showInTopNavMobile);
        const hasUtilityNavCta = !!utilityLinks.find((link) => link.showInTopNav && link.cmPosition === 'nav-cta');
        const buttonIcon = this.state.isDrawerOpen ? CloseIcon : MenuIcon;
        if (shouldKeepSubscribeLinkActive) {
            mobileOption = 'cm';
        }
        const { shouldExcludeSeriesPagination = false } = seriesData || {};
        const shouldDisplaySeriesPagination = !shouldHideSeriesPagination &&
            !shouldExcludeSeriesPagination &&
            seriesData &&
            this.shouldDisplaySeriesPagination();
        const shouldDisplayLinkBanner = !shouldConsiderSeriesPagination &&
            !isVisualLinkBanner &&
            (variations.hasLinkBanner || showLinkBanner);
        const bookmarkLink = {
            label: intl.formatMessage(translations.saveBookmarkLabel),
            url: '#',
            network: 'bookmark',
            behavior: 'bookmark'
        };
        const searchButtonProps = {
            href: drawerProps.searchAction,
            inputKind: 'link',
            onClickHandler: this.trackSearchSource('icon')
        };
        if (hasSearchBarWithDrawer) {
            delete searchButtonProps.inputKind;
            delete searchButtonProps.href;
            searchButtonProps.role = 'button';
            searchButtonProps.onClickHandler = this.doToggleSearchDrawer;
        }
        const searchLink = hasSearch && (React.createElement(React.Fragment, null, hasSearchBar ? (React.createElement(StandardNavigationSearchBarWrapper, null,
            React.createElement(SearchBar, { onSubmit: this.trackSearchSource('input-box'), queryParameters: this.props.searchQueryParameters }))) : (React.createElement(StandardNavigationSearchButton, { ...searchButtonProps, ariaLabel: intl.formatMessage(translations.searchLabel), label: intl.formatMessage(translations.searchLabel), ButtonIcon: this.state.isSearchDrawerOpen ? CloseIcon : SearchIcon, isIconButton: true, shouldEnableFullArticleInverted: shouldEnableFullArticleInverted }))));
        return (React.createElement(React.Fragment, null,
            React.createElement(NewsletterRibbon, null),
            React.createElement(StandardNavigationWrapper, { className: className, isLogoWide: isLogoWide, palette: palette, seriesData: seriesData, shouldDisplaySeriesPagination: shouldDisplaySeriesPagination, decorationStyle: decorationStyle, decorationTheme: theme, logoAlign: logoAlign, mobileLogoAlign: mobileLogoAlign, mobileOption: mobileOption, isDrawerOpen: this.state.isDrawerOpen, mobileNoBorderBottom: mobileNoBorderBottom, isHeadlineColorInverted: palette === 'inverted' && hasHeadline, shouldKeepSubscribeLinkActive: shouldKeepSubscribeLinkActive, shouldEnableFullArticleInverted: shouldEnableFullArticleInverted, "data-testid": "StandardNavigationWrapper" },
                React.createElement(StandardNavigationDrawer, { "data-testid": "StandardNavigationDrawer" }, (primaryLinks.length > 0 || secondaryLinks.length > 0) && (React.createElement(StandardNavigationDrawerButtonToggle, { ButtonIcon: buttonIcon, isIconButton: true, className: "standard-navigation__drawer-toggle", label: intl.formatMessage(translations.navigationMenuButtonLabel), onClickHandler: this.doToggleDrawer, role: "button", "aria-expanded": this.state.isDrawerOpen, shouldEnableFullArticleInverted: shouldEnableFullArticleInverted }))),
                logoAlign === 'center' && topLeftLink && topLeftLink.length > 0 && (React.createElement(StandardNavigationSectionSecondaryLinks, null,
                    React.createElement(StandardNavigationNavSecondaryLinks, { attributes: {
                            'aria-label': intl.formatMessage(translations.secondaryLinksLabel)
                        }, links: topLeftLink, shouldAllowNavItemHide: true }))),
                React.createElement(StandardNavigationSectionLogo, null,
                    React.createElement(StandardNavigationLogoLink, { href: logoBaseUrl, "data-testid": "Logo" },
                        React.createElement(StandardNavigationLogoImage, { ...logos.logo }))),
                logoAlign === 'left' && (React.createElement(StandardNavigationHeadLineBlock, { headLineVisible: hasHeadline && showHeadline, "data-testid": "StandardNavigationHeadLineBlock", className: classnames({
                        'standard-navigation__headline-block--headline': hasHeadline && showHeadline
                    }) },
                    React.createElement(StandardNavigationHeadLineBlockHeadLine, { "aria-hidden": "true", headlineAlign: headlineAlign }, pageHeadline),
                    React.createElement(StandardNavigationHeadLineBlockChannelNavigation, null, !showHeadline && (React.createElement(DynamicChannelNav, { hasBorderDropdown: hasBorderDropdown, hideLinksWhenResize: hideLinksWhenResize, items: primaryLinks }))))),
                React.createElement(StandardNavigationSectionUtilityLinks, { onClick: this.handleClickNavigation, shouldEnableFullArticleInverted: shouldEnableFullArticleInverted },
                    isAccountsEnabled && user && (React.createElement(AccountDropdown, { ...accountProps, user: user, className: "standard-navigation__section--utility-links-login" })),
                    React.createElement(React.Fragment, null,
                        isClient && topRightLinks.length > 0 && (React.createElement(StandardNavigationNavUtilityLinks, { attributes: {
                                'aria-label': intl.formatMessage(translations.utilityLinksLabel)
                            }, links: isMobile ? topRightMobileLinks : topRightLinks, shouldAllowNavItemHide: true, shouldEnableFullArticleInverted: shouldEnableFullArticleInverted })),
                        isClient && (React.createElement(StandardNavigationConsumerMarketingWrapper, null,
                            React.createElement(PaymentGateway, { group: "consumer-marketing" },
                                React.createElement(ConsumerMarketingUnit, { position: "nav-dialog" })),
                            !hasUtilityNavCta && (React.createElement(React.Fragment, null,
                                React.createElement(NavCTA, null),
                                React.createElement(PaymentGateway, { group: "consumer-marketing" },
                                    React.createElement(ConsumerMarketingUnit, { position: "nav-cta" }),
                                    React.createElement(ConsumerMarketingUnit, { position: "nav-rollover" })),
                                React.createElement(NavRollover, null))))),
                        React.createElement(PaymentGateway, { group: "subs-cta" },
                            React.createElement(ConsumerMarketingUnit, { position: "nav-gift" })))),
                hasBookmark && isBookmarkVisible ? (React.createElement(StandardNavigationIconWrapper, null,
                    React.createElement(BookmarkIcon, { bookmarkIconAlertDesktopLeft: "has-background", bookmarkIconAlertDesktopTop: "has-background", bookmarkTrackingType: "nav-header", link: bookmarkLink, theme: "standard", type: "standard", isUrlBookmark: true, isBookmarkButton: true, isIconButton: true }),
                    searchLink)) : (searchLink),
                React.createElement(React.Fragment, null, hasCart && (React.createElement(StandardNavigationCart, { onClick: this.handleToggleShopifyCart },
                    React.createElement(StandardNavigationCartButton, { ariaLabel: `${shopifyCartQuantity} ${intl.formatMessage(translations.shoppingCartAriaLabel)}`, label: intl.formatMessage(translations.shoppingCartLabel), ButtonIcon: Shopping, isIconButton: true, inputKind: "link", tabIndex: 0 }),
                    shopifyCartQuantity > 0 && (React.createElement(StandardNavigationCartQuantity, null, shopifyCartQuantity))))),
                React.createElement(ShopifyCart, { showShopifyCart: this.props.isShopifyCartWidgetOpen, closeButtonCallback: this.handleToggleShopifyCart, onCartDataChange: this.onCartDataChange })),
            React.createElement(Drawer, { appElement: drawerProps.appElement, isOpen: this.state.isDrawerOpen, onClose: this.doToggleDrawer, contentLabel: intl.formatMessage(translations.drawerLabel) },
                React.createElement(SecondaryMenu, { accountProps: accountProps, ...drawerProps, contentAlign: contentAlign, showSearch: hasSearch, isAccountsEnabled: isAccountsEnabled, user: user, utilityLinks: topRightLinks })),
            primaryLinks && (React.createElement(StandardNavigationPrimaryLinks, { linksArr: primaryLinks })),
            secondaryLinks && (React.createElement(StandardNavigationSecondaryLinks, { linksArr: secondaryLinks })),
            shouldDisplayLinkBanner && React.createElement(LinkBanner, null),
            !shouldHideSeriesPagination && (React.createElement(StandardNavigationSeriesPagination, { shouldDisplaySeriesPagination: shouldDisplaySeriesPagination, className: classnames({
                    'series-pagination__standard-navigation--hidden': !shouldDisplaySeriesPagination
                }), "data-testid": "StandardNavigationSeriesPagination" })),
            hasSearchBarWithDrawer && this.state.isSearchDrawerOpen && (React.createElement(Drawer, { appElement: drawerProps.appElement, contentLabel: intl.formatMessage(translations.searchLabel), className: "drawer--search", isOpen: this.state.isSearchDrawerOpen, onClose: () => this.doToggleSearchDrawer() },
                React.createElement(StandardNavigationDrawerSearchBarWrapper, null,
                    React.createElement(SearchBar, { searchLink: drawerProps.searchAction, shouldSetFocus: this.state.isSearchDrawerOpen }))))));
    }
}
StandardNavigation.propTypes = {
    accountProps: PropTypes.object,
    className: PropTypes.string,
    contentAlign: PropTypes.oneOf(['center', 'left']),
    decorationStyle: PropTypes.oneOf(['default', 'border-thin', 'light-shadow']),
    drawerProps: PropTypes.shape({
        appElement: PropTypes.any,
        searchAction: PropTypes.string
    }).isRequired,
    hasBookmark: PropTypes.bool,
    hasBorderDropdown: PropTypes.bool,
    hasHeadline: PropTypes.bool,
    hasSearch: PropTypes.bool,
    hasSearchBar: PropTypes.bool,
    hasSearchBarWithDrawer: PropTypes.bool,
    headerInvertedLogo: PropTypes.shape(ResponsiveAsset.propTypes).isRequired,
    headlineAlign: PropTypes.oneOf(['left', 'center']),
    headlineElementClass: PropTypes.string,
    hideLinksWhenResize: PropTypes.bool,
    intl: PropTypes.shape({
        formatMessage: PropTypes.func
    }),
    invertedLogo: PropTypes.shape(ResponsiveAsset.propTypes).isRequired,
    isAccountsEnabled: PropTypes.bool,
    isBookmarkVisible: PropTypes.bool,
    isLogoWide: PropTypes.bool,
    isShopifyCartWidgetOpen: PropTypes.bool,
    isVisualLinkBanner: PropTypes.bool,
    logo: PropTypes.shape(ResponsiveAsset.propTypes).isRequired,
    logoBaseUrl: PropTypes.string,
    mainContentElementClass: PropTypes.string,
    pageHeadline: PropTypes.string,
    primaryLinks: Navigation.propTypes.links,
    savedStoriesLabel: PropTypes.string,
    searchQueryParameters: PropTypes.object,
    secondaryLinks: PropTypes.array,
    seriesData: PropTypes.shape({
        hed: PropTypes.string,
        dek: PropTypes.string,
        image: PropTypes.object,
        links: PropTypes.arrayOf(PropTypes.shape({
            hed: PropTypes.string,
            dek: PropTypes.string,
            image: PropTypes.object,
            isPublished: PropTypes.bool,
            promoHed: PropTypes.string,
            url: PropTypes.string
        })),
        shouldExcludeSeriesPagination: PropTypes.bool
    }),
    setShopifyWidgetState: PropTypes.func,
    setStandardNavigationDispatcher: PropTypes.func,
    shouldConsiderSeriesPagination: PropTypes.bool,
    shouldEnableFullArticleInverted: PropTypes.bool,
    shouldHideSeriesPagination: PropTypes.bool,
    shouldKeepSubscribeLinkActive: PropTypes.bool,
    showLinkBanner: PropTypes.bool,
    theme: PropTypes.string,
    user: PropTypes.shape({
        isAuthenticated: PropTypes.bool.isRequired
    }),
    utilityLinks: Navigation.propTypes.links,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        hasCart: PropTypes.bool,
        hasLinkBanner: PropTypes.bool,
        logoAlign: PropTypes.oneOf(['center', 'left']).isRequired,
        mobileLogoAlign: PropTypes.oneOf(['center']),
        mobileNoBorderBottom: PropTypes.bool,
        mobileOption: PropTypes.oneOf(['search', 'cm']).isRequired,
        palette: PropTypes.oneOf(['inverted', 'standard']),
        showHeadline: PropTypes.bool
    })
};
const mapStateToProps = ({ isShopifyCartWidgetOpen, standardNavigationConfig }) => ({
    isShopifyCartWidgetOpen,
    ...standardNavigationConfig
});
const mapDispatchToProps = (dispatch) => {
    const { setShopifyWidgetState } = createActions(dispatch);
    return {
        setShopifyWidgetState,
        setStandardNavigationDispatcher: () => setStandardNavigationDispatcher(dispatch)
    };
};
StandardNavigation.displayName = 'StandardNavigation';
module.exports = connect(mapStateToProps, mapDispatchToProps)(injectIntl(StandardNavigation));
//# sourceMappingURL=StandardNavigation.js.map

/***/ }),

/***/ 69836:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.doHideBookmark = exports.doDisplayBookmark = exports.setStandardNavigationDispatcher = void 0;
let dispatch;
const actionKey = 'standardNavigationConfig';
const setStandardNavigationDispatcher = (dispatchIn) => {
    dispatch = dispatchIn;
};
exports.setStandardNavigationDispatcher = setStandardNavigationDispatcher;
const _showBookmark = (isBookmarkVisible) => {
    if (dispatch) {
        dispatch({
            type: 'MERGE_KEY',
            key: actionKey,
            value: {
                isBookmarkVisible
            }
        });
    }
};
const doDisplayBookmark = () => {
    _showBookmark(true);
};
exports.doDisplayBookmark = doDisplayBookmark;
const doHideBookmark = () => {
    _showBookmark(false);
};
exports.doHideBookmark = doHideBookmark;
//# sourceMappingURL=StandardNavigationActions.js.map

/***/ }),

/***/ 80742:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const { asThemedComponent } = __webpack_require__(20223);
const VariedStandardNavigation = __webpack_require__(10254);
module.exports = asThemedComponent(asConfiguredComponent(VariedStandardNavigation, 'StandardNavigation'));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 88570:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { calculateSpacing, getTypographyStyles, getColorToken, getLinkStyles, getColorStyles, minScreen, maxScreen } = __webpack_require__(26865);
const { BREAKPOINTS, ZINDEX_MAP } = __webpack_require__(96472);
const { maxThresholds } = __webpack_require__(99906);
const { BaseLink } = __webpack_require__(76955);
const { visuallyhidden } = __webpack_require__(52813);
const { applyGridSpacing } = __webpack_require__(1123);
const { linkStandard } = __webpack_require__(15737);
const { SiteNavigationSearch } = __webpack_require__(49829);
const { getSiteNavigationMenuStyles } = __webpack_require__(56341);
const NavLinks = __webpack_require__(55634);
const Button = __webpack_require__(73730);
const SeriesPagination = __webpack_require__(28256);
const Navigation = __webpack_require__(54790);
const ResponsiveAsset = __webpack_require__(73275);
const Toggle = __webpack_require__(1778);
const { NavigationListWrapper, NavigationListItemWrapper, NavigationInternalLink, NavigationExternalLink } = __webpack_require__(51418);
const ResponsiveImage = __webpack_require__(43608);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const { Link: NavCTALink } = __webpack_require__(82552);
const { SocialIconButton } = __webpack_require__(51000);
const { ShowRollover, HideRollover } = __webpack_require__(32788);
const Alert = __webpack_require__(54330);
const { SearchBarWrapper } = __webpack_require__(26348);
const defaultTransition = 'transition: opacity 0.3s ease-in-out;';
const navTransitionTiming = '300ms';
const standardNavigationHeight = calculateSpacing(7);
const defaultNavigationStyle = css `
  display: flex;
  align-items: center;

  ${NavigationInternalLink},${NavigationExternalLink} {
    ${getTypographyStyles('typography.definitions.foundation.link-primary')};
    ${({ theme }) => getLinkStyles(theme, 'colors.foundation.collapsed-menu.nav-link.default', 'colors.foundation.collapsed-menu.nav-link.hover', 'navigation')};
    transition: color ${navTransitionTiming} ease-in-out;
  }

  ${NavigationListWrapper} {
    margin: 0;
  }

  ${NavigationListItemWrapper} {
    display: flex;
    align-items: center;
    transition: color ${navTransitionTiming} ease-in-out;
    padding: 0;
  }
`;
const commonSectionLinksStyle = css `
  ${defaultNavigationStyle}

  display: none;

  @media (min-width: ${BREAKPOINTS.xl}) {
    display: flex;
    margin-left: ${calculateSpacing(4)};

    ${NavigationListWrapper} {
      max-height: ${calculateSpacing(3)};
      overflow: hidden;
    }

    ${NavigationListItemWrapper} {
      margin-right: ${calculateSpacing(2)};
    }
  }
`;
const commonLinkNavigationStyle = css `
  position: relative;

  ${NavigationListItemWrapper} {
    margin: 0;
    padding: ${calculateSpacing(2)} ${calculateSpacing(3)};
    overflow: hidden;

    &:hover {
      background-color: ${getColorToken('colors.foundation.menu.dividers')};
      ${NavigationInternalLink},${NavigationExternalLink} {
        text-decoration: none;
        color: ${({ utilityNavLinkColorToken }) => utilityNavLinkColorToken
    ? getColorToken(utilityNavLinkColorToken)
    : ''};
      }
    }
  }

  ${NavigationInternalLink},${NavigationExternalLink} {
    ${getTypographyStyles('typography.definitions.foundation.link-secondary')};
    ${({ theme }) => getLinkStyles(theme, 'colors.foundation.collapsed-menu.nav-link.default', null, 'navigation')};
    display: block;
    width: 100%;
  }
`;
const StandardNavigationDropdown = styled.div.withConfig({
    displayName: 'StandardNavigationDropdown'
}) `
  display: ${(props) => (props.expanded ? 'block' : 'none')};
  position: absolute;
  top: ${calculateSpacing(9)};
  right: -23px;
  z-index: ${ZINDEX_MAP.dropdown};
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: ${getColorToken('colors.foundation.menu-bg.collapsed')};
  padding: ${calculateSpacing(2)} 0;

  &:hover {
    display: block;
  }

  &::before {
    position: absolute;
    top: -19px;
    right: 20px;
    z-index: 1;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid
      ${getColorToken('colors.foundation.menu-bg.collapsed')};
    border-left: 10px solid transparent;
    width: 0;
    height: 0;
    content: '';
  }

  &::after {
    position: absolute;
    top: -21px;
    right: 20px;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    width: 0;
    height: 0;
    content: '';
  }

  &.account-links__sign-out-separator--show {
    .account-links__navigation {
      .navigation__list {
        ${NavigationListItemWrapper}:last-of-type {
          padding-top: 0;

          .navigation__link {
            border-top: 1px solid
              ${getColorToken('colors.foundation.menu.dividers')};
            padding-top: ${calculateSpacing(2)};
          }
        }
      }
    }
  }

  .account-links__navigation {
    ${commonLinkNavigationStyle}
  }

  ${({ hasBorderDropdown, theme }) => hasBorderDropdown &&
    `
    border: 1px solid ${getColorToken(theme, 'colors.foundation.menu.dividers')};

    &::after {
      border-bottom: 11px solid ${getColorToken(theme, 'colors.foundation.menu.dividers')};
    }
  `}
`;
const commonLabelStyle = css `
  ${linkStandard()}
  ${getTypographyStyles('typography.definitions.foundation.link-utility')};
  ${({ theme }) => getLinkStyles(theme, 'colors.foundation.collapsed-menu.utility-link.default', 'colors.foundation.collapsed-menu.utility-link.hover', 'navigation')};
  display: flex;
  align-items: center;
  background-color: transparent;
  cursor: pointer;
  height: 100%;

  &::after {
    position: absolute;
    right: 0;
    bottom: -15px;
    width: 100px;
    height: 15px;
    content: '';
  }
  @media (min-width: ${maxThresholds.md}px) {
    &:hover {
      + ${StandardNavigationDropdown} {
        display: block;
      }

      .icon-chevron path {
        fill: ${getColorToken('colors.foundation.collapsed-menu.utility-link.hover')};
      }
    }
  }
`;
const StandardNavigationAccountLabel = styled.button.withConfig({
    displayName: 'StandardNavigationAccountLabel'
}) `
  ${commonLabelStyle}
`;
const JourneyUnitDivider = styled.div.withConfig({
    displayName: 'JourneyUnitDivider'
}) `
  margin-right: ${calculateSpacing(2)};
  margin-left: ${calculateSpacing(2)};
  border-left: 1px solid ${getColorToken('colors.foundation.menu.dividers')};
  width: 0;
  height: 32px;

  @media (min-width: ${BREAKPOINTS.lg}) {
    margin-left: 0;
  }
`;
const NavigationAccountIcon = styled(ResponsiveImage).withConfig({
    displayName: 'NavigationAccountIcon'
}) `
  && {
    margin-left: ${calculateSpacing(0.2)};
    width: ${calculateSpacing(2)};
    height: ${calculateSpacing(2)};
    ${ResponsiveImageContainer} {
      vertical-align: unset;
    }
  }
`;
const NavigationAccountIconWrapper = styled.div.withConfig({
    displayName: 'NavigationAccountIconWrapper'
}) `
  && {
    transition: none;

    &::after {
      content: none;
    }
  }

  display: inherit;
  ${({ isAuthenticated }) => isAuthenticated && `border: 1px solid transparent;`}
  padding: ${calculateSpacing(1)};
  width: max-content;

  ${NavigationAccountIcon} + i {
    margin: 0 ${calculateSpacing(0.5)};
  }

  &:hover {
    display: inherit;
    ${({ isAuthenticated }) => isAuthenticated && `border: 1px solid;`}
    border-radius: 20px;
    ${({ theme }) => {
    return theme === 'inverted'
        ? `${getColorStyles(theme, 'background', 'colors.interactive.base.dark')};`
        : `${getColorStyles(theme, 'background', 'colors.interactive.base.highlight')};`;
}}
    ${({ theme, isAuthenticated }) => isAuthenticated &&
    `${getColorStyles(theme, 'border-color', 'colors.interactive.base.light')};`}
  }

  /* In Mobile: hover states does not exist for a Signed out user */
  @media (max-width: ${maxThresholds.md}px) {
    ${({ isAuthenticated }) => !isAuthenticated &&
    `
      &:hover {
        border: none;
        background: none;
      }
    `}
  }

  // Overriding the dimensions of the chevron icon only when seen with avatar
  .icon-chevron {
    width: ${calculateSpacing(2)};
    height: ${calculateSpacing(2)};
  }
`;
const NavigationAccountSignIn = styled.div.withConfig({
    displayName: 'NavigationAccountSignIn'
}) `
  display: none;

  @media (min-width: ${BREAKPOINTS.md}) {
    display: block;
    ${getTypographyStyles('typography.definitions.foundation.link-primary')};
    ${getColorStyles('color', 'colors.interactive.base.black')};
    margin-top: ${calculateSpacing(0.2)};
    margin-left: ${calculateSpacing(1.36)};
  }
`;
const MoreDropdownNavigation = styled(Navigation.Vertical).withConfig({
    displayName: 'MoreDropdownNavigation'
}) `
  ${commonLinkNavigationStyle}
`;
const MoreDropdownWrapper = styled.div.withConfig({
    displayName: 'MoreDropdownWrapper'
}) `
  display: block;
  position: relative;
  height: 100%;

  @media (min-width: 0) and (max-width: ${BREAKPOINTS.sm}) {
    display: none;
  }

  .icon-chevron path {
    fill: ${getColorToken('colors.foundation.collapsed-menu.nav-link.default')};
  }

  ${StandardNavigationDropdown} {
    top: ${standardNavigationHeight};
    margin-right: ${calculateSpacing(3)};

    ${NavigationListWrapper} {
      max-height: none;
    }

    ${NavigationInternalLink},${NavigationExternalLink} {
      ${getTypographyStyles('typography.definitions.foundation.link-primary')};
      ${({ theme }) => getLinkStyles(theme, 'colors.foundation.collapsed-menu.nav-link.default', null, 'navigation')};
    }
  }
`;
const MoreDropdownLabel = styled.button.withConfig({
    displayName: 'MoreDropdownLabel'
}) `
  ${commonLabelStyle}
  background-color: transparent;
  ${getTypographyStyles('typography.definitions.foundation.link-primary')};
  ${({ theme }) => getLinkStyles(theme, 'colors.foundation.collapsed-menu.nav-link.default', 'colors.foundation.collapsed-menu.nav-link.hover', 'navigation')};

  &::after {
    position: absolute;
    right: 0;
    bottom: -40px;
    width: 80px;
    height: 70px;
    content: '';
  }

  &:hover {
    .icon-chevron path {
      fill: ${getColorToken('colors.foundation.collapsed-menu.nav-link.hover')};
    }
  }
`;
const StandardNavigationSeriesPagination = styled(SeriesPagination).withConfig({
    displayName: 'StandardNavigationSeriesPagination'
}) `
  transform: translateY(-${standardNavigationHeight});
  opacity: 1;

  ${({ shouldDisplaySeriesPagination }) => !shouldDisplaySeriesPagination && 'display: none;'}
`;
const AccountDropdownToggleIcon = styled(Toggle).withConfig({
    displayName: 'AccountDropdownToggleIcon'
}) `
  display: flex;
  align-content: center;
  justify-content: center;
  margin-left: ${calculateSpacing(0.5)};
  width: ${calculateSpacing(2, 'px')};
  height: ${calculateSpacing(2)};

  svg {
    align-self: center;

    path {
      transition: fill 0.2s ease-in-out;
      fill: ${getColorToken('colors.foundation.collapsed-menu.utility-link.default')};
    }
  }

  .icon-chevron {
    transform: rotate(90deg);
  }
`;
const StandardNavigationNavPrimaryLinks = styled(Navigation.Horizontal).withConfig({
    displayName: 'StandardNavigationNavPrimaryLinks'
}) `
  ${defaultTransition}
`;
const StandardNavigationSectionPrimaryLinks = styled.div.withConfig({
    displayName: 'StandardNavigationSectionPrimaryLinks'
}) `
  ${commonSectionLinksStyle}

  ${({ isDynamic }) => isDynamic &&
    `
    display: none;

    @media (min-width: ${BREAKPOINTS.sm}) {
      display: flex;
      margin-left: ${calculateSpacing(4)};

      ${StandardNavigationNavPrimaryLinks} {
        ${NavigationListWrapper} {
          max-height: ${calculateSpacing(3)};
          overflow: hidden;
        }

        ${NavigationListItemWrapper} {
          margin-right: ${calculateSpacing(2)};
          height: ${calculateSpacing(3)};
        }
      }
    }
  `}

  ${({ isHidden }) => isHidden &&
    `
    visibility: hidden;
  `}
`;
const StandardNavigationPrimaryLinks = styled(NavLinks).withConfig({
    displayName: 'StandardNavigationPrimaryLinks'
}) `
  ${visuallyhidden}
`;
const StandardNavigationSecondaryLinks = styled(NavLinks).withConfig({
    displayName: 'StandardNavigationSecondaryLinks'
}) `
  ${visuallyhidden}
`;
const StandardNavigationNavSecondaryLinks = styled(Navigation.Horizontal).withConfig({
    displayName: 'StandardNavigationNavSecondaryLinks'
}) `
  ${defaultTransition}
`;
const StandardNavigationSectionSecondaryLinks = styled.div.withConfig({
    displayName: 'StandardNavigationSectionSecondaryLinks'
}) `
  ${commonSectionLinksStyle}
`;
const StandardNavigationNavUtilityLinks = styled(Navigation.Horizontal).withConfig({
    displayName: 'StandardNavigationNavUtilityLinks'
}) ``;
const StandardNavigationSearchButton = styled(Button.Utility).withConfig({
    displayName: 'StandardNavigationSearchButton'
}) `
  &&&& .icon-search {
    transform: scale(0.5);
  }
  ${SiteNavigationSearch()};
  ${({ shouldEnableFullArticleInverted, theme }) => shouldEnableFullArticleInverted &&
    `
svg path {
fill: ${getColorToken(theme, 'colors.consumption.lead.inverted.link')};
transition: fill ${navTransitionTiming} ease-in-out;
}
`}
`;
const StandardNavigationSearchBarWrapper = styled.div.withConfig({
    displayName: 'StandardNavigationSearchBarWrapper'
}) `
  grid-column-end: 5;
  grid-column-start: 1;
  align-items: start;

  @media (min-width: ${BREAKPOINTS.md}) {
    width: 100%;
  }

  @media (min-width: ${BREAKPOINTS.lg}) {
    grid-column-end: none;
    grid-column-start: none;
    grid-row-start: -1;
    padding-top: ${calculateSpacing(1)};
    padding-bottom: ${calculateSpacing(1)};
    width: auto;
  }
`;
const StandardNavigationCartButton = styled(Button.Utility).withConfig({
    displayName: 'StandardNavigationCartButton'
}) `
  /* stylelint-disable-next-line declaration-no-important */
  display: flex;
  position: relative;
  margin: 0 ${calculateSpacing(2)} 0 auto;
  border: 0;
  background-color: transparent;
  width: ${calculateSpacing(4)};
  height: 100%;

  .icon-shopping {
    width: initial;
    height: initial;
  }
  ${minScreen(BREAKPOINTS.md)} {
    margin: 0 ${calculateSpacing(3)} 0 ${calculateSpacing(2)};
  }

  &:hover,
  &:focus {
    border: 0;
    background-color: transparent;

    svg path {
      fill: ${getColorToken('colors.foundation.icon.hover')};
    }
  }

  svg path {
    fill: ${getColorToken('colors.foundation.icon.default')};
  }
`;
const StandardNavigationCartQuantity = styled.span.withConfig({
    displayName: 'StandardNavigationCartQuantity'
}) `
  position: absolute;
  top: 2rem;
  right: 1.25rem;
  align-items: center;
  z-index: 1;
  border-radius: 50%;
  background: ${getColorToken('colors.background.black')};
  width: 17.25px;
  height: 17.25px;
  text-align: center;
  text-transform: uppercase;
  line-height: 18px;
  color: ${getColorToken('colors.background.white')};
  font-size: 10px;

  &:hover,
  &:focus {
    border: 0;
    background-color: ${getColorToken('colors.foundation.icon.hover')};
  }
`;
const StandardNavigationCart = styled.div.withConfig({
    displayName: 'StandardNavigationCart'
}) `
  position: relative;

  &:hover,
  &:focus {
    border: 0;
    background-color: transparent;
    cursor: pointer;

    span {
      background-color: ${getColorToken('colors.foundation.icon.hover')};
    }

    svg path {
      fill: ${getColorToken('colors.foundation.icon.hover')};
    }
  }
`;
const StandardNavigationConsumerMarketingWrapper = styled.div.withConfig({
    displayName: 'StandardNavigationConsumerMarketingUnitWrapper'
}) ``;
const consumerMarketingStyles = css `
  ${StandardNavigationConsumerMarketingWrapper} {
    .nav-cta__component,
    .consumer-marketing-unit--nav-cta {
      &:hover,
      &:focus,
      &:focus-within {
        ~ .nav-rollover__component > div,
        ~ .consumer-marketing-unit--nav-rollover {
          ${ShowRollover}
        }
      }
    }

    .nav-rollover__component > div,
    .consumer-marketing-unit--nav-rollover {
      &:hover,
      &:focus,
      &:focus-within {
        ${ShowRollover}
      }
    }

    .consumer-marketing-unit--nav-cta {
      ~ ${NavigationInternalLink}:hover, ~ ${NavigationExternalLink}:hover {
        text-decoration: none;
      }

      &:hover,
      &:focus-within,
      &:focus {
        ~ ${NavigationInternalLink}, ~ ${NavigationExternalLink} {
          color: ${getColorToken('colors.foundation.collapsed-menu.nav-link.hover')};
        }
      }
    }

    .consumer-marketing-unit--nav-rollover,
    .nav-rollover__component > div {
      ${HideRollover}
      display: none;
      top: ${standardNavigationHeight};
      right: 0;
      align-items: center;
      justify-content: center;
      z-index: ${ZINDEX_MAP.navFixed};

      @media (min-width: ${BREAKPOINTS.md}) {
        display: flex;
      }
    }

    .consumer-marketing-unit--nav-dialog {
      position: absolute;
      top: ${standardNavigationHeight};
      right: 0;
      transform: translateY(0);
      z-index: ${ZINDEX_MAP.navFixed};
    }
  }

  nav {
    &.navigation--horizontal {
      .consumer-marketing-unit--nav-rollover,
      .nav-rollover__component > div {
        top: ${calculateSpacing(4)};
      }
    }
  }
`;
const StandardNavigationSectionUtilityLinks = styled.div.withConfig({
    displayName: 'StandardNavigationSectionUtilityLinks'
}) `
  ${defaultTransition}
  ${defaultNavigationStyle}
  position: relative;
  justify-content: flex-end;
  @media (min-width: ${BREAKPOINTS.md}) {
    margin-left: auto;
  }

  ${NavigationListItemWrapper} {
    display: none;
    position: relative;
    margin-right: ${calculateSpacing(2)};

    @media (min-width: ${BREAKPOINTS.md}) {
      display: inline-flex;
      align-items: center;
    }

    .consumer-marketing-unit--nav-cta {
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
    }
  }

  ${consumerMarketingStyles}

  .standard-navigation__section--utility-links-login {
    margin: 0 ${calculateSpacing(4)} 0 0;

    &::after {
      display: none;
      content: '';

      @media (min-width: ${BREAKPOINTS.md}) {
        display: inline-block;
        position: absolute;
        top: ${calculateSpacing(2, 'px')};
        right: ${calculateSpacing(-2)};
        margin: 0;
        background-color: ${getColorToken('colors.foundation.menu.dividers')};
        width: 2px;
        height: 20px;
      }
    }

    ${StandardNavigationAccountLabel} {
      ${({ shouldEnableFullArticleInverted, theme }) => shouldEnableFullArticleInverted &&
    `color: ${getColorToken(theme, 'colors.consumption.lead.inverted.link')};`}
    }
  }

  .standard-navigation-account {
    display: none;
    position: relative;
    height: 100%;

    @media (min-width: ${BREAKPOINTS.md}) {
      display: block;
    }
  }

  ${NavCTALink} {
    padding: 0;

    @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
      padding-right: ${calculateSpacing(2)};
    }
  }
`;
const StandardNavigationDrawerButtonToggle = styled(Button.Utility).withConfig({
    displayName: 'StandardNavigationDrawerButtonToggle'
}) `
  ${({ theme }) => getSiteNavigationMenuStyles(theme)}
  justify-content: center;
  transition: fill ${navTransitionTiming} ease-in-out;
  ${({ shouldEnableFullArticleInverted, theme }) => shouldEnableFullArticleInverted &&
    `
    svg path {
      fill: ${getColorToken(theme, 'colors.consumption.lead.inverted.link')};
      transition: fill ${navTransitionTiming} ease-in-out;
    }
  `}

  .icon-close {
    padding: 8px;
  }

  .icon-menu {
    margin: 8px;
    width: initial;
    height: initial;
  }
`;
const StandardNavigationLogoImage = styled(ResponsiveAsset).withConfig({
    displayName: 'StandardNavigationLogoImage'
}) `
  display: block;
  text-align: center;

  ${ResponsiveImageContainer} {
    max-height: ${standardNavigationHeight};
    object-fit: contain;
  }
`;
const StandardNavigationLogoLink = styled(BaseLink).withConfig({
    displayName: 'StandardNavigationLogoLink'
}) `
  width: 100%;
  height: auto;
`;
const StandardNavigationSectionLogo = styled.div.withConfig({
    displayName: 'StandardNavigationSectionLogo'
}) `
  ${defaultNavigationStyle}
  justify-content: center;
  margin: auto;
  max-width: ${calculateSpacing(25)};

  @media (min-width: ${BREAKPOINTS.xl}) {
    min-width: ${calculateSpacing(15)};
  }
`;
const StandardNavigationDrawer = styled.div.withConfig({
    displayName: 'StandardNavigationDrawer'
}) `
  height: ${standardNavigationHeight};

  @media (min-width: ${BREAKPOINTS.sm}) {
    width: ${calculateSpacing(6)};
  }
  @media (min-width: ${BREAKPOINTS.md}) {
    width: ${calculateSpacing(7)};
  }
`;
const getHeadLineBlockHeadLineAlignStyle = (headlineAlign) => {
    if (headlineAlign === 'left') {
        return 'text-align: left;';
    }
    else if (headlineAlign === 'center') {
        return 'text-align: center;';
    }
    return '';
};
const StandardNavigationHeadLineBlockHeadLine = styled.div.withConfig({
    displayName: 'StandardNavigationHeadLineBlockHeadLine'
}) `
  ${getTypographyStyles('typography.definitions.consumptionEditorial.subhed-aux-secondary')};
  position: absolute;
  transform: translateY(25px);
  transition: opacity 200ms, transform 400ms, color 300ms;
  visibility: hidden;
  opacity: 0;
  margin-right: ${calculateSpacing(4)};
  margin-left: ${calculateSpacing(4)};
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;

  @media (min-width: ${BREAKPOINTS.md}) {
    visibility: visible;
  }
  @media only screen and (max-width: ${BREAKPOINTS.md}) {
    display: none;
  }

  ${({ headlineAlign }) => getHeadLineBlockHeadLineAlignStyle(headlineAlign)}
`;
const StandardNavigationHeadLineBlockChannelNavigation = styled.div.withConfig({
    displayName: 'StandardNavigationHeadLineBlockChannelNavigation'
}) `
  position: static;
  transition: opacity 300ms 100ms, transform 400ms;
  opacity: 1;
  width: 100%;
`;
const StandardNavigationHeadLineBlock = styled.div.withConfig({
    displayName: 'StandardNavigationHeadLineBlock'
}) `
  ${defaultTransition}
  display: flex;
  align-items: center;
  height: 100%;

  ${({ headLineVisible }) => headLineVisible &&
    `
    ${StandardNavigationHeadLineBlockHeadLine} {
      position: static;
      transform: initial;
      transition: opacity 300ms 100ms, transform 400ms;
      opacity: 1;
    }

    ${StandardNavigationHeadLineBlockChannelNavigation} {
      position: absolute;
      transform: translateY(-25px);
      opacity: 0;
    }
  `}
`;
const getDecorationStyle = (decorationStyle, decorationTheme, theme) => {
    if (decorationStyle === 'border-thin' && decorationTheme === 'standard') {
        return `border-bottom: 1px solid ${getColorToken(theme, 'colors.foundation.menu.dividers')};`;
    }
    else if (decorationStyle === 'border-thin' &&
        decorationTheme === 'inverted') {
        return `border-bottom: 1px solid ${getColorToken(theme, 'colors.consumption.lead.inverted.divider')};`;
    }
    else if (decorationStyle === 'light-shadow' &&
        decorationTheme === 'inverted') {
        return 'box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);';
    }
    return '';
};
const getMobileLogoAlignStyle = (isDrawerOpen, mobileNoBorderBottom) => {
    return `
  && {
    grid-template-columns: repeat(3, 1fr);
  }
  @media (min-width: ${BREAKPOINTS.md}) {
    && {
      grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    }
  }

  ${StandardNavigationHeadLineBlock} {
    display: none;

    @media (min-width: ${BREAKPOINTS.md}) {
      display: flex;
    }
  }

  ${StandardNavigationLogoLink} ${StandardNavigationLogoImage} {
    text-align: center;
  }

  ${isDrawerOpen &&
        `
    grid-template-columns: repeat(3, 1fr);

    @media (min-width: ${BREAKPOINTS.md}) {
      grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    }
  `};

  ${mobileNoBorderBottom &&
        `
    @media (min-width: 0) and (max-width: ${BREAKPOINTS.md}) {
      border-bottom: none;
    }
  `};
`;
};
const getLogoAlignStyle = (logoAlign, mobileLogoAlign, isDrawerOpen, mobileNoBorderBottom) => {
    if (logoAlign === 'center') {
        return `
      @media (min-width: ${BREAKPOINTS.md}) {
        grid-template-columns: auto 1fr 2fr 1fr auto;
      }
      padding: 0 ${calculateSpacing(2)};

      @media (min-width: ${BREAKPOINTS.md}) {
        ${applyGridSpacing('padding')};
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        ${StandardNavigationSectionLogo} {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          height: ${standardNavigationHeight};
        }

        ${StandardNavigationSearchButton} {
          margin: 0 ${calculateSpacing(3)} 0 ${calculateSpacing(2)};
        }
      }

      ${StandardNavigationSectionSecondaryLinks} {
        @media (min-width: ${BREAKPOINTS.md}) {
          display: flex;
          margin-left: ${calculateSpacing(2)};

          ${NavigationListItemWrapper} {
            margin-right: 0;
          }
        }
      }
    `;
    }
    else if (logoAlign === 'left') {
        return `
      && {
        grid-template-columns: auto auto  minmax(0, 1fr) auto auto auto;
      }
      ${StandardNavigationSectionPrimaryLinks} + ${StandardNavigationSearchButton} {
        @media (min-width: ${BREAKPOINTS.md}) {
          margin-left: auto;
        }
      }

      ${StandardNavigationSectionLogo} {
        @media (min-width: ${BREAKPOINTS.md}) {
          margin-left: 0;
        }

        ${StandardNavigationLogoLink} ${StandardNavigationLogoImage} {
          text-align: left;

          @media (min-width: ${BREAKPOINTS.md}) {
            text-align: center;
          }
        }
      }

      ${mobileLogoAlign === 'center' &&
            getMobileLogoAlignStyle(isDrawerOpen, mobileNoBorderBottom)};
    `;
    }
    return '';
};
const getMobileOptionStyle = (mobileOption) => {
    if (mobileOption === 'search') {
        return `
      ${StandardNavigationNavUtilityLinks} {
        display: none;

        @media (min-width: ${BREAKPOINTS.md}) {
          display: block;
        }

        &.consumer-marketing-unit--no-failsafe {
          display: none;
        }
      }

      ${StandardNavigationSectionUtilityLinks} {
        display: none;

        @media (min-width: ${BREAKPOINTS.md}) {
          display: flex;
        }
      }
    `;
    }
    else if (mobileOption === 'cm') {
        return `
      ${StandardNavigationNavUtilityLinks} {
        ${NavigationListItemWrapper} {

            display: flex;
            margin-right: ${calculateSpacing(2)};

            &:not(:first-child) {
              display: none;
            }

            @media (min-width: ${BREAKPOINTS.md}) {
              display: inline-flex;
              align-items: center;

              &:not(:first-child) {
                display: inline-flex;
              }
            }
          }
        }
      }

      ${StandardNavigationSectionUtilityLinks} {
        margin: 0 1rem;

        @media (min-width: ${BREAKPOINTS.md}) {
          margin: 0 0 0 auto;
        }
      }

      ${StandardNavigationSearchButton} {
        display: none;

        @media (min-width: ${BREAKPOINTS.md}) {
          display: flex;
        }
      }
    `;
    }
    return '';
};
const StandardNavigationWrapper = styled.header.withConfig({
    displayName: 'StandardNavigationWrapper'
}) `
  display: grid;
  position: relative;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
  transform: translateY(0);
  transition: background-color ${navTransitionTiming} ease-in-out;
  z-index: 2;
  background-color: ${getColorToken('colors.foundation.menu-bg.collapsed')};
  width: 100%;

  @media (min-width: ${BREAKPOINTS.md}) {
    grid-template-columns: auto 2fr auto auto;
  }

  ${({ shouldEnableFullArticleInverted, theme }) => shouldEnableFullArticleInverted &&
    `
  transition: background-color ${navTransitionTiming} ease-in-out;
  background-color:  ${getColorToken(theme, 'colors.consumption.lead.inverted.background')};`}

  ${({ shouldDisplaySeriesPagination }) => shouldDisplaySeriesPagination &&
    `
    transform: translateY(-${standardNavigationHeight});
    transition: transform 300ms ease-in-out;
  `}

  ${({ seriesData, shouldDisplaySeriesPagination, palette }) => seriesData &&
    `
    transition: transform ${navTransitionTiming} ease-in-out;

    ${palette === 'inverted' &&
        `
      transition: transform ${navTransitionTiming} ease-in-out,
      background-color 0ms ease-in-out 0ms;

      ${StandardNavigationSectionPrimaryLinks},
      ${StandardNavigationSectionUtilityLinks} {
        ${NavigationInternalLink},
        ${NavigationExternalLink},
        ${StandardNavigationAccountLabel} {
          transition: none;
        }
      }
    `};

    ${shouldDisplaySeriesPagination &&
        `
      transition: transform ${navTransitionTiming} ease-in-out,
      background-color 0ms ease-in-out ${navTransitionTiming};
    `};

    ~ ${StandardNavigationSeriesPagination} {
      transition: opacity 100ms ease-in-out;
    }
  `}

  ${({ palette, theme }) => palette === 'inverted' &&
    `
    transition: background-color ${navTransitionTiming} ease-in-out,
        transform ${navTransitionTiming} ease-in-out;
    background-color: ${getColorToken(theme, 'colors.consumption.lead.inverted.background')};

    ${StandardNavigationDropdown} {
      transition: background-color ${navTransitionTiming} ease-in-out,
        transform ${navTransitionTiming} ease-in-out;
      background-color: ${getColorToken(theme, 'colors.consumption.lead.inverted.background')};
    }

    ${StandardNavigationSectionPrimaryLinks},
    ${StandardNavigationSectionUtilityLinks} {
      ${NavigationInternalLink},${NavigationExternalLink},
      ${StandardNavigationAccountLabel} {
        ${getLinkStyles(theme, 'colors.consumption.lead.inverted.link', 'colors.consumption.lead.inverted.link', 'navigation')};
        transition: color ${navTransitionTiming} ease-in-out;
      }
    }

    ${MoreDropdownWrapper} {
      ${MoreDropdownLabel} {
        ${getLinkStyles(theme, 'colors.consumption.lead.inverted.link', null, 'navigation')};

        &:hover {
          .icon-chevron path {
            fill: ${getColorToken(theme, 'colors.foundation.collapsed-menu.nav-link.hover')};
          }
        }
      }

      .icon-chevron path {
        fill: ${getColorToken(theme, 'colors.consumption.lead.inverted.link')};
      }

      ${StandardNavigationDropdown} {
        ${NavigationInternalLink},${NavigationExternalLink} {
          ${getLinkStyles(theme, 'colors.consumption.lead.inverted.link', null, 'navigation')};
          transition: none;
        }
      }
    }

    ${StandardNavigationDropdown} .account-links__navigation {
      ${NavigationListItemWrapper} {
        &:hover {
          background-color: ${getColorToken(theme, 'colors.interactive.base.dark')};
        }

        ${NavigationInternalLink},${NavigationExternalLink} {
          ${getLinkStyles(theme, 'colors.consumption.lead.inverted.link', 'colors.consumption.lead.inverted.link', 'navigation')};

          &:hover {
            text-decoration: none;
          }
        }
      }

      ${NavigationInternalLink},${NavigationExternalLink} {
        &:hover {
          text-decoration: none;
        }
      }
    }

    ${StandardNavigationDropdown} {
      border: 1px solid ${getColorToken(theme, 'colors.consumption.lead.inverted.divider')};

      &::before {
        border-bottom-color: ${getColorToken(theme, 'colors.consumption.lead.inverted.background')};
      }

      &::after {
        border-bottom-color: ${getColorToken(theme, 'colors.consumption.lead.inverted.divider')};
      }
    }

    ${AccountDropdownToggleIcon} path {
      fill: ${getColorToken(theme, 'colors.consumption.lead.inverted.link')};
    }

    ${StandardNavigationDropdown} ${MoreDropdownNavigation} {
      ${NavigationListItemWrapper}:hover {
        background: ${getColorToken(theme, 'colors.consumption.lead.inverted.link')};

        ${NavigationInternalLink},${NavigationExternalLink} {
          transition: color ${navTransitionTiming} ease-in-out;
          color: ${getColorToken(theme, 'colors.consumption.lead.inverted.link-hover')};
        }
      }
    }

    ${StandardNavigationSearchButton} {
      &,
      &:hover,
      &:focus {
        svg path {
          fill: ${getColorToken(theme, 'colors.consumption.lead.inverted.link')};
          transition: fill ${navTransitionTiming} ease-in-out;
        }
      }
    }

    ${StandardNavigationDrawerButtonToggle} {
      &,
      &:hover,
      &:focus {
        svg path {
          fill: ${getColorToken(theme, 'colors.consumption.lead.inverted.link')};
          transition: fill ${navTransitionTiming} ease-in-out;
        }
      }
    }
  `}

  ${({ isLogoWide }) => isLogoWide &&
    `
    ${StandardNavigationDrawer} {
      width: unset;
    }

    ${StandardNavigationSectionUtilityLinks} {
      margin: 0;
    }

    ${StandardNavigationSectionLogo} {
      min-width: ${calculateSpacing(34)};
    }
  `}

  ${({ decorationStyle, decorationTheme, theme }) => getDecorationStyle(decorationStyle, decorationTheme, theme)}

  ${({ logoAlign, mobileLogoAlign, isDrawerOpen }) => getLogoAlignStyle(logoAlign, mobileLogoAlign, isDrawerOpen)}

  ${({ mobileOption }) => getMobileOptionStyle(mobileOption)}

  ${({ isDrawerOpen }) => isDrawerOpen &&
    `
    ${StandardNavigationSectionUtilityLinks},
    ${StandardNavigationNavPrimaryLinks},
    ${StandardNavigationNavSecondaryLinks},
    ${StandardNavigationHeadLineBlock} {
      opacity: 0;
    }
  `}

  ${({ isHeadlineColorInverted }) => isHeadlineColorInverted &&
    `
    transition: color ${navTransitionTiming} ease-in-out;
    color: ${getColorToken('colors.discovery.lead.secondary.hed')};
  `}
`;
const StandardNavigationIconWrapper = styled.div.withConfig({
    displayName: 'StandardNavigationIconWrapper'
}) `
  display: flex;
  ${SocialIconButton} {
    border: none;
  }
`;
const StandardNavigationSuccessLoginAlert = styled(Alert).withConfig({
    displayName: 'StandardNavigationSuccessLoginAlert'
}) `
  top: ${calculateSpacing(7)};
  right: -${calculateSpacing(1)};
  left: unset;
  z-index: ${ZINDEX_MAP.tooltip + 1};
  margin-left: ${calculateSpacing(1)};
  border: 1px solid;
  border-radius: 2px;

  ${minScreen(BREAKPOINTS.md)} {
    top: ${calculateSpacing(5.9)};
    left: -${calculateSpacing(27)};
    margin-left: -${calculateSpacing(2)};
    width: ${calculateSpacing(46)};
  }

  ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.discovery.body.white.border')};
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
  width: ${calculateSpacing(45)};
  height: ${calculateSpacing(10)};

  ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.interactive.base.white')};

  .close-alert-button {
    svg {
      ${({ theme }) => getColorStyles(theme, 'fill', 'colors.interactive.social.primary')};
      transform: rotate(45);
    }
  }

  .alert-message {
    padding: ${calculateSpacing(3)} ${calculateSpacing(2)};
    max-width: fit-content;

    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.utility.label')};

    ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.special.body')};
  }

  .alert-arrow {
    border-color: transparent;

    ::before {
      position: absolute;
      bottom: -8px;
      left: -8px;
      border-width: 0 8px 11px 8px;
      border-style: solid;
      border-color: transparent transparent
        ${getColorToken('colors.discovery.body.white.border')} transparent;
      content: '';
    }

    ::after {
      position: absolute;
      bottom: -9px;
      left: -7px;
      border-width: 0 7px 9px 7px;
      border-style: solid;
      border-color: transparent transparent
        ${getColorToken('colors.interactive.base.white')} transparent;
      content: '';
    }
  }
`;
const StandardNavigationDrawerSearchBarWrapper = styled.div.withConfig({
    displayName: 'StandardNavigationDrawerSearchBarWrapper'
}) `
  margin: auto;
  margin-top: ${calculateSpacing()};
  background-color: ${getColorToken('colors.background.white')};
  padding: ${calculateSpacing(2)} 0;
  width: 35%;

  input {
    &[type='search'] {
      appearance: none;
      border-radius: 0;
      border-color: ${getColorToken('colors.interactive.base.dark')};
    }
  }

  ${maxScreen(BREAKPOINTS.md)} {
    margin-top: ${calculateSpacing(3)};
    padding: 0;
    width: 95%;
  }

  ${SearchBarWrapper} {
    background: none;
  }
`;
module.exports = {
    MoreDropdownWrapper,
    MoreDropdownLabel,
    MoreDropdownNavigation,
    JourneyUnitDivider,
    NavigationAccountIconWrapper,
    NavigationAccountIcon,
    NavigationAccountSignIn,
    AccountDropdownToggleIcon,
    StandardNavigationSearchBarWrapper,
    StandardNavigationWrapper,
    StandardNavigationDrawer,
    StandardNavigationDrawerButtonToggle,
    StandardNavigationSectionUtilityLinks,
    StandardNavigationSectionLogo,
    StandardNavigationHeadLineBlock,
    StandardNavigationHeadLineBlockHeadLine,
    StandardNavigationHeadLineBlockChannelNavigation,
    StandardNavigationSearchButton,
    StandardNavigationPrimaryLinks,
    StandardNavigationSecondaryLinks,
    StandardNavigationSeriesPagination,
    StandardNavigationNavSecondaryLinks,
    StandardNavigationLogoLink,
    StandardNavigationLogoImage,
    StandardNavigationSectionSecondaryLinks,
    StandardNavigationNavUtilityLinks,
    StandardNavigationDropdown,
    StandardNavigationAccountLabel,
    StandardNavigationSectionPrimaryLinks,
    StandardNavigationNavPrimaryLinks,
    StandardNavigationCartButton,
    StandardNavigationCartQuantity,
    StandardNavigationCart,
    StandardNavigationConsumerMarketingWrapper,
    StandardNavigationIconWrapper,
    StandardNavigationSuccessLoginAlert,
    StandardNavigationDrawerSearchBarWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 52188:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    navigationMenuButtonLabel: {
        id: 'StandardNavigation.MenuButton',
        defaultMessage: 'Open Navigation Menu',
        description: 'Label for the menu button'
    },
    secondaryLinksLabel: {
        id: 'StandardNavigation.SecondaryLinksLabel',
        defaultMessage: 'Secondary',
        description: 'ARIA label for secondary links'
    },
    utilityLinksLabel: {
        id: 'StandardNavigation.UtilityLinksLabel',
        defaultMessage: 'Utility',
        description: 'ARIA label for utility links'
    },
    openSearchMenuLabel: {
        id: 'StandardNavigation.OpenSearchMenuLabel',
        defaultMessage: 'Open Search Menu',
        description: 'ARIA label open search menu button'
    },
    searchLabel: {
        id: 'StandardNavigation.SearchLabel',
        defaultMessage: 'Search',
        description: 'ARIA label for search link'
    },
    drawerLabel: {
        id: 'StandardNavigation.Drawer',
        defaultMessage: 'Navigation and Sign Up Menu',
        description: 'ARIA label for the drawer modal'
    },
    accountLabel: {
        id: 'StandardNavigation.AccountLabel',
        defaultMessage: 'My Account',
        description: 'Label for account link',
        isConfigurable: true
    },
    signInLabel: {
        id: 'StandardNavigation.SignInLabel',
        defaultMessage: 'Sign In',
        description: 'Label for sign in link',
        isConfigurable: true
    },
    saveBookmarkLabel: {
        id: 'StandardNavigation.saveBookmarkLabel',
        defaultMessage: 'Save story',
        description: 'Label for the bookmark icon'
    },
    shoppingCartLabel: {
        id: 'StandardNavigation.ShoppingCartLabel',
        defaultMessage: 'Shopping Cart',
        description: 'Label for Shopping cart'
    },
    shoppingCartAriaLabel: {
        id: 'StandardNavigation.ShoppingCartAriaLabel',
        defaultMessage: 'item(s) in Cart',
        description: 'ARIA label for Shopping cart'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 10254:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const StandardNavigation = __webpack_require__(62363);
const LogoCenterWithSearch = asVariation(StandardNavigation, 'LogoCenterWithSearch', { logoAlign: 'center', mobileOption: 'search' });
StandardNavigation.LogoCenterWithSearch = LogoCenterWithSearch;
const LogoCenterWithSearchBar = asVariation(StandardNavigation, 'LogoCenterWithSearchBar', { logoAlign: 'center', mobileLogoAlign: 'center', mobileOption: 'cm' }, { hasSearch: true, hasSearchBar: true });
StandardNavigation.LogoCenterWithSearchBar = LogoCenterWithSearchBar;
const LogoCenterWithCM = asVariation(StandardNavigation, 'LogoCenterWithCM', {
    logoAlign: 'center',
    mobileOption: 'cm'
});
StandardNavigation.LogoCenterWithCM = LogoCenterWithCM;
// Using variation for `hasSearch` instead of config value to avoid adding
// another config value to every tenant for something that ideally will be
// short-lived. Once search functionality exists on Verso, this variation can
// and should be deprecated.
const LogoCenterWithCMNoSearch = asVariation(StandardNavigation, 'LogoCenterWithCMNoSearch', {
    logoAlign: 'center',
    mobileOption: 'cm'
}, {
    hasSearch: false
});
StandardNavigation.LogoCenterWithCMNoSearch = LogoCenterWithCMNoSearch;
const LogoLeftWithSearch = asVariation(StandardNavigation, 'LogoLeftWithSearch', {
    logoAlign: 'left',
    mobileOption: 'search'
}, {
    hideLinksWhenResize: true
});
StandardNavigation.LogoLeftWithSearch = LogoLeftWithSearch;
const LogoLeftWithSearchAndCart = asVariation(StandardNavigation, 'LogoLeftWithSearch', {
    logoAlign: 'left',
    mobileOption: 'search',
    hasCart: true
}, {
    hideLinksWhenResize: true
});
StandardNavigation.LogoLeftWithSearchAndCart = LogoLeftWithSearchAndCart;
const LogoLeftWithSearchAndLinkBanner = asVariation(StandardNavigation, 'LogoLeftWithSearchAndLinkBanner', {
    logoAlign: 'left',
    mobileOption: 'search',
    hasLinkBanner: true
}, {
    hideLinksWhenResize: true
});
StandardNavigation.LogoLeftWithSearchAndLinkBanner =
    LogoLeftWithSearchAndLinkBanner;
const LogoLeftWithSearchAndLinkBannerAndCart = asVariation(StandardNavigation, 'LogoLeftWithSearchAndLinkBannerAndCart', {
    logoAlign: 'left',
    mobileOption: 'search',
    hasLinkBanner: true,
    hasCart: true
}, {
    hideLinksWhenResize: true
});
StandardNavigation.LogoLeftWithSearchAndLinkBannerAndCart =
    LogoLeftWithSearchAndLinkBannerAndCart;
const LogoLeftWithCM = asVariation(StandardNavigation, 'LogoLeftWithCM', {
    logoAlign: 'left',
    mobileOption: 'cm'
});
StandardNavigation.LogoLeftWithCM = LogoLeftWithCM;
const LogoLeftWithCMNoSearch = asVariation(StandardNavigation, 'LogoLeftWithCMNoSearch', {
    logoAlign: 'left',
    mobileOption: 'cm'
}, {
    hasSearch: false
});
StandardNavigation.LogoLeftWithCMNoSearch = LogoLeftWithCMNoSearch;
const LogoLeftWithSearchAndHeadline = asVariation(StandardNavigation, 'LogoLeftWithSearchAndHeadline', {
    logoAlign: 'left',
    mobileOption: 'search'
}, {
    hasHeadline: true,
    headlineAlign: 'left',
    hideLinksWhenResize: true
});
StandardNavigation.LogoLeftWithSearchAndHeadline =
    LogoLeftWithSearchAndHeadline;
const LogoLeftWithSearchWithHeadlineAndLinkBanner = asVariation(StandardNavigation, 'LogoLeftWithSearchWithHeadlineAndLinkBanner', {
    logoAlign: 'left',
    mobileOption: 'search',
    hasLinkBanner: true
}, {
    hasHeadline: true,
    headlineAlign: 'left',
    hideLinksWhenResize: true
});
StandardNavigation.LogoLeftWithSearchWithHeadlineAndLinkBanner =
    LogoLeftWithSearchWithHeadlineAndLinkBanner;
const LogoLeftWithSearchAndHeadlineCenter = asVariation(StandardNavigation, 'LogoLeftWithSearchAndHeadlineCenter', {
    logoAlign: 'left',
    mobileOption: 'search'
}, {
    hasHeadline: true,
    headlineAlign: 'center',
    hideLinksWhenResize: true
});
StandardNavigation.LogoLeftWithSearchAndHeadlineCenter =
    LogoLeftWithSearchAndHeadlineCenter;
const LogoCenterWithSearchAndLinkBanner = asVariation(StandardNavigation, 'LogoCenterWithSearchAndLinkBanner', {
    logoAlign: 'center',
    mobileOption: 'search',
    hasLinkBanner: true
});
StandardNavigation.LogoCenterWithSearchAndLinkBanner =
    LogoCenterWithSearchAndLinkBanner;
const LogoDesktopLeftMobileCenterWithSearch = asVariation(StandardNavigation, 'LogoDesktopLeftMobileCenterWithSearch', {
    logoAlign: 'left',
    mobileLogoAlign: 'center',
    mobileOption: 'search',
    mobileNoBorderBottom: true
}, {
    hasHeadline: true,
    hasBorderDropdown: false,
    headlineAlign: 'left',
    hideLinksWhenResize: true
});
StandardNavigation.LogoDesktopLeftMobileCenterWithSearch =
    LogoDesktopLeftMobileCenterWithSearch;
const LogoLeftWithSearchInverted = asVariation(StandardNavigation, 'LogoLeftWithSearchInverted', {
    logoAlign: 'left',
    mobileOption: 'search',
    palette: 'inverted'
}, {
    hideLinksWhenResize: true
});
StandardNavigation.LogoLeftWithSearchInverted = LogoLeftWithSearchInverted;
module.exports = StandardNavigation;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 49938:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.trackSnowplowEvent = void 0;
const { trackNavigationEvent } = __webpack_require__(14307);
const trackSnowplowEvent = (e, subject) => {
    const eventData = {
        type: 'click',
        label: e?.target?.textContent?.toString(),
        subject: subject || 'sub_header_menu',
        items: [
            {
                content_title: e?.target?.textContent?.toString(),
                content_url: e?.target?.href
            }
        ],
        placement: 'header'
    };
    trackNavigationEvent(eventData);
};
exports.trackSnowplowEvent = trackSnowplowEvent;
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 12503:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const ResponsiveAsset = __webpack_require__(73275);
const Rubric = __webpack_require__(34187);
const { PaymentGateway } = __webpack_require__(92807);
const StickyBox = __webpack_require__(28433);
const { componentTracking } = __webpack_require__(90090);
const { TrackComponentChannel } = __webpack_require__(78788);
const { SubtopicDiscoveryTitle, SubtopicDiscoveryFirstHed, SubtopicDiscoveryHedContainer, SubtopicDiscoveryImage, SubtopicDiscoveryItemContainer, SubtopicDiscoverySubsequentHed, SubtopicDiscoveryAdRail, SubtopicDiscoveryGridContent, SubtopicDiscoveryAdRailContainer, SubtopicDiscoverySummaryItem } = __webpack_require__(87546);
// if a sub item does not have an image, it shouldn't be displayed
// ditch it and grab the next sub item in line
const trimSubItems = ({ subItems, subItemsLengthLimit }) => {
    if (!subItems || !subItems.length) {
        return [];
    }
    const [topItem, ...subequentItems] = subItems;
    const { image } = topItem || {};
    const { contentType } = image || {};
    if (contentType) {
        const truncatedSubsequentItems = subequentItems.slice(0, subItemsLengthLimit);
        return [topItem, ...truncatedSubsequentItems];
    }
    // undefined contentType means no image -- try again
    return trimSubItems({ subItems: subequentItems, subItemsLengthLimit });
};
/**
 * SubtopicDiscoveryItem component
 *
 * @param {object} props - Props
 * @param {object} props.item - A subtopic discovery item
 * @param {number} props.subItemsLengthLimit - Cutoff number for subitems
 * @param {number} props.firstHedIdx - Index of first hed for anayticsDataAttribute
 * @param {boolean} props.shouldEnableBundleComponentAnalytics - feature flag to append data-section-title attribute for analytics
 * @param {boolean} props.shouldUseSummaryItem - Optional option to use SummaryItem in SubtopicDiscovery
 * @param {object} [props.trackingNamespace] - Optional override the base namespace of data-section-title for component tracking
 *
 * @returns {ReactElement} <div>
 */
const SubtopicDiscoveryItem = ({ item, subItemsLengthLimit, firstHedIdx, shouldEnableBundleComponentAnalytics, trackingNamespace, shouldUseSummaryItem = false }) => {
    const analyticsDataAttributeSubtopicDiscoveryItemHero = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, `${trackingNamespace?.SubtopicDiscoveryItemHed} ${firstHedIdx + 1} hero`);
    const { dangerousCategoryTitle, parsedSubItems = [] } = item || {};
    const trimmedSubItems = trimSubItems({
        subItems: parsedSubItems,
        subItemsLengthLimit
    });
    if (!trimmedSubItems.length) {
        return null;
    }
    const [topSubItem, ...subsequentSubItems] = trimmedSubItems;
    const { artist, dangerousHed, genre, image, url } = topSubItem || {};
    const { altText } = image || '';
    return (React.createElement(SubtopicDiscoveryItemContainer, null,
        React.createElement(SubtopicDiscoveryHedContainer, null,
            React.createElement(Rubric.DiscoveryCard, { name: dangerousCategoryTitle.label, url: dangerousCategoryTitle.link }),
            !shouldUseSummaryItem ? (React.createElement(React.Fragment, null,
                React.createElement(SubtopicDiscoveryImage, { href: `/${url}`, "aria-label": altText, className: "SubtopicDiscoveryImage", ...analyticsDataAttributeSubtopicDiscoveryItemHero },
                    React.createElement(ResponsiveAsset, { ...image, isLazy: true })),
                React.createElement(SubtopicDiscoveryFirstHed, { href: `/${url}`, "aria-label": dangerousHed, className: "SubtopicDiscoveryFirstHed", ...analyticsDataAttributeSubtopicDiscoveryItemHero },
                    React.createElement("h2", { dangerouslySetInnerHTML: { __html: dangerousHed } })))) : (React.createElement(SubtopicDiscoverySummaryItem, { ...topSubItem, shouldHidePublishDate: false, rubric: genre, subHed: artist, url: `/${url}/` }))),
        !shouldUseSummaryItem &&
            (subsequentSubItems || []).map((_item, idx) => {
                const { dangerousHed: heading, url: uri } = _item || {};
                const analyticsDataAttributeSubtopicDiscoveryHed = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, `${trackingNamespace?.SubtopicDiscoveryItemHed} ${firstHedIdx + 1} secondary`, idx);
                return (React.createElement(SubtopicDiscoveryHedContainer, { key: idx },
                    React.createElement(SubtopicDiscoverySubsequentHed, { href: `/${uri}`, "aria-label": heading, className: "SubtopicDiscoverySubsequentHed", ...analyticsDataAttributeSubtopicDiscoveryHed },
                        React.createElement("h2", { dangerouslySetInnerHTML: { __html: heading } }))));
            })));
};
SubtopicDiscoveryItem.propTypes = {
    firstHedIdx: PropTypes.number,
    item: PropTypes.shape({
        dangerousCategoryTitle: PropTypes.shape({
            label: PropTypes.string,
            link: PropTypes.string
        }),
        parsedSubItems: PropTypes.arrayOf(PropTypes.shape({
            dangerousHed: PropTypes.string,
            image: PropTypes.object,
            url: PropTypes.string
        }))
    }),
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldUseSummaryItem: PropTypes.bool,
    subItemsLengthLimit: PropTypes.number,
    trackingNamespace: PropTypes.object
};
const SubtopicDiscoveryItems = ({ items, subItemsLengthLimit, shouldEnableBundleComponentAnalytics, trackingNamespace, shouldUseSummaryItem }) => {
    return items.map((item, idx) => {
        return (React.createElement(SubtopicDiscoveryItem, { key: idx, item: item, subItemsLengthLimit: subItemsLengthLimit, firstHedIdx: idx, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, trackingNamespace: trackingNamespace, shouldUseSummaryItem: shouldUseSummaryItem }));
    });
};
/**
 * SubtopicDiscovery component
 *
 * @param {object} props - React props
 * @param {string} [props.dangerousDek] - The container dek
 * @param {string} [props.dangerousHed] - The container title
 * @param {Array} props.items - The container items, each of which consists of subitems
 * @param {bool} [props.shouldShowContainerTitle] - Show dangerousHed?
 * @param {number} [props.subItemsLengthLimit] - Cutoff number for subitems per item
 * @param {bool} [props.showAdRightRail] - showAdRightRail bool
 * @param {boolean} props.shouldEnableBundleComponentAnalytics - feature flag to append data-section-title attribute for analytics
 * @param {boolean} props.shouldUseSummaryItem - Optional option to use SummaryItem in SubtopicDiscovery
 * @param {object} [props.trackingNamespace] - Optional override the base namespace of data-section-title for component tracking
 *
 * @returns {ReactElement} <>
 */
const SubtopicDiscovery = ({ dangerousDek = '', dangerousHed = '', items = [], shouldShowContainerTitle = false, subItemsLengthLimit = 2, showAdRightRail = false, shouldEnableBundleComponentAnalytics, shouldUseSummaryItem = false, trackingNamespace }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SubtopicDiscovery'
        });
    }, []);
    return (React.createElement(React.Fragment, null,
        dangerousHed && shouldShowContainerTitle && (React.createElement(SubtopicDiscoveryTitle, { dangerousDek: dangerousDek, dangerousHed: dangerousHed, hedTag: "h2" })),
        React.createElement(SubtopicDiscoveryGridContent, { shouldUseSummaryItem: shouldUseSummaryItem },
            React.createElement(SubtopicDiscoveryItems, { items: items, subItemsLengthLimit: subItemsLengthLimit, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, shouldUseSummaryItem: shouldUseSummaryItem, trackingNamespace: trackingNamespace })),
        showAdRightRail && (React.createElement(SubtopicDiscoveryAdRailContainer, { className: "grid-layout__aside" },
            React.createElement(StickyBox, null,
                React.createElement(PaymentGateway, { group: "ads" },
                    React.createElement(SubtopicDiscoveryAdRail, { position: "rail" })))))));
};
SubtopicDiscovery.propTypes = {
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    items: PropTypes.array,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldShowContainerTitle: PropTypes.bool,
    shouldUseSummaryItem: PropTypes.bool,
    showAdRightRail: PropTypes.bool,
    subItemsLengthLimit: PropTypes.number,
    trackingNamespace: PropTypes.object
};
SubtopicDiscovery.displayName = 'SubtopicDiscovery';
module.exports = SubtopicDiscovery;
//# sourceMappingURL=SubtopicDiscovery.js.map

/***/ }),

/***/ 13478:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const SubtopicDiscovery = __webpack_require__(12503);
module.exports = asConfiguredComponent(SubtopicDiscovery, 'SubtopicDiscovery');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 87546:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing, getColorToken, getTypographyStyles, minScreen, minMaxScreen } = __webpack_require__(26865);
const { BaseText } = __webpack_require__(76955);
const SectionTitle = __webpack_require__(35864);
const Ad = __webpack_require__(19607);
const { BREAKPOINTS } = __webpack_require__(96472);
const { applyGridSpacing } = __webpack_require__(1123);
const { universalGridCore } = __webpack_require__(89085);
const SummaryItem = __webpack_require__(74992);
const { SummaryItemHedBase } = __webpack_require__(36211);
const SubtopicDiscoveryTitle = styled(SectionTitle.LineAboveLineBelowTextCenter).withConfig({
    displayName: 'Title'
}) `
  grid-column: 1/-1;
  grid-row: 1;
  margin-bottom: ${calculateSpacing(4)};
`;
const SubtopicDiscoveryFirstHed = styled(BaseText).withConfig({
    displayName: 'SubtopicDiscoveryFirstHed'
}) `
  text-decoration: none;
  line-height: 114%;

  & h2 {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-bulletin-primary')}

    color: ${({ theme }) => `${getColorToken(theme, 'colors.discovery.body.white.heading')};`}
  }
`;
SubtopicDiscoveryFirstHed.defaultProps = {
    as: 'a'
};
const SubtopicDiscoveryHedContainer = styled.div.withConfig({
    displayName: 'SubtopicDiscoveryHedContainer'
}) `
  border-bottom: ${calculateSpacing(0.125, 'px')} solid
    ${getColorToken('colors.consumption.body.standard.divider')};

  &:last-child {
    border-bottom: none;
  }

  & .rubric--discovery {
    background-color: ${({ theme }) => `${getColorToken(theme, 'colors.foundation.footer.bg')};`};
  }
`;
const SubtopicDiscoveryImage = styled(BaseText).withConfig({
    displayName: 'SubtopicDiscoveryImage'
}) `
  display: block;
  position: relative;
  margin-bottom: ${calculateSpacing(2)};
`;
SubtopicDiscoveryImage.defaultProps = {
    as: 'a'
};
const SubtopicDiscoveryItemContainer = styled.div.withConfig({
    displayName: 'SubtopicDiscoveryItemContainer'
}) `
  grid-column: span 4;
  ${minScreen(BREAKPOINTS.md)} {
    grid-column: span 3;
  }
`;
const SubtopicDiscoverySubsequentHed = styled(BaseText).withConfig({
    displayName: 'SubtopicDiscoverySubsequentHed'
}) `
  text-decoration: none;
  line-height: 106%;

  & h2 {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-bulletin-primary')}

    color: ${({ theme }) => `${getColorToken(theme, 'colors.discovery.body.white.heading')};`}
  }
`;
SubtopicDiscoverySubsequentHed.defaultProps = {
    as: 'a'
};
const SubtopicDiscoveryAdRail = styled(Ad).withConfig({
    displayName: 'SubtopicDiscoveryAdRail'
}) ``;
const SubtopicDiscoveryAdRailContainer = styled.div.withConfig({
    displayName: 'SubtopicDiscoveryAdRailContainer'
}) `
  display: block;
`;
const SubtopicDiscoveryGridContent = styled.div.withConfig({
    displayName: 'SubtopicDiscoveryGridContent'
}) `
  display: grid;
  grid-column: span 12;
  grid-template-columns: repeat(4, 1fr);
  ${minMaxScreen(BREAKPOINTS.sm, BREAKPOINTS.md)} {
    grid-row-gap: ${calculateSpacing(4)};
  }
  ${minScreen(BREAKPOINTS.md)} {
    grid-template-columns: repeat(9, 1fr);
    column-gap: var(--grid-gap);
    row-gap: var(--grid-gap);
  }
  ${minScreen(BREAKPOINTS.lg)} {
    grid-column: ${({ shouldUseSummaryItem }) => `${!shouldUseSummaryItem ? 'span 11' : 'span 12'}`};
  }
`;
const SubtopicDiscoveryGrid = styled('div').withConfig({
    displayName: 'SubtopicDiscoveryGrid'
}) `
  ${universalGridCore()};
  ${applyGridSpacing('padding')};
`;
const SubtopicDiscoverySummaryItem = styled(SummaryItem).withConfig({
    displayName: 'SubtopicDiscoverySummaryItem'
}) `
  ${SummaryItemHedBase} {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-secondary')}
  }
`;
module.exports = {
    SubtopicDiscoveryTitle,
    SubtopicDiscoveryFirstHed,
    SubtopicDiscoveryHedContainer,
    SubtopicDiscoveryImage,
    SubtopicDiscoveryItemContainer,
    SubtopicDiscoverySubsequentHed,
    SubtopicDiscoveryAdRail,
    SubtopicDiscoveryGridContent,
    SubtopicDiscoveryAdRailContainer,
    SubtopicDiscoveryGrid,
    SubtopicDiscoverySummaryItem
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 44357:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { default: Carousel } = __webpack_require__(36061);
const SummaryCollectionGrid = __webpack_require__(91706);
const SummaryItem = __webpack_require__(74992);
const { Podcasts, PodcastsSectionTitleWrapper, PodcastsSectionTitle, CarouselWrapper, PodcastsList } = __webpack_require__(30154);
/**
 *
 * @param {object} props - React Props
 * @param {string} props.dangerousHed - heading text
 * @param {boolean} [props.hasBorder] - flag to show border
 * @param {boolean} [props.hasDividerAbove] - Displays a border above
 * @param {boolean} [props.hasDividerBelow] - Display a bottom border
 * @param {boolean} [props.hasItemsRule] - Show or should hide the decrorative rule on SummaryItem(s).
 * @param {boolean} [props.hideIssueDate] - Show or hide the issue date
 * @param {Array}  props.items - List of collage items
 * @param {number} [props.minItemsRequired] - Threshold value to render the component.
 * @param {boolean} [props.shouldHidePublishDate] - boolean to hide publish date
 * @param {string} [props.textAlign] - Aligns text left or center
 *
 * @returns {ReactElement} <div>
 */
const SummaryAudioCollection = ({ dangerousHed, hasDividerAbove = true, hasDividerBelow = true, hasBorder = false, hasItemsRule = false, hideIssueDate = false, items, minItemsRequired = 0, shouldHidePublishDate = false, textAlign = 'center' }) => {
    if (minItemsRequired && items?.length < minItemsRequired) {
        return null;
    }
    return (React.createElement(Podcasts, { itemCount: items.length },
        React.createElement(PodcastsSectionTitleWrapper, null,
            React.createElement(PodcastsSectionTitle, { dangerousHed: dangerousHed, hasDividerAbove: hasDividerAbove, hasDividerBelow: hasDividerBelow, textAlign: textAlign })),
        items.length === 3 && (React.createElement(PodcastsList, { as: SummaryCollectionGrid.ThreeColumns, hasItemsRule: hasItemsRule, hideIssueDate: hideIssueDate, items: items, shouldHidePublishDate: shouldHidePublishDate, "data-testid": "PodcastsList" })),
        React.createElement(CarouselWrapper, null,
            React.createElement(Carousel, { carouselSettings: {
                    hasPaginationDots: true,
                    showControls: false
                } }, items.map((item, index) => (React.createElement(Carousel.CarouselItem, { key: item.copilotID, "data-testid": "PodcastsList" },
                React.createElement(SummaryItem, { key: index, ...item, hasBorder: hasBorder, shouldHidePublishDate: shouldHidePublishDate, hasRule: hasItemsRule, hideIssueDate: hideIssueDate }))))))));
};
SummaryAudioCollection.propTypes = {
    dangerousHed: PropTypes.string.isRequired,
    hasBorder: PropTypes.bool,
    hasDividerAbove: PropTypes.bool,
    hasDividerBelow: PropTypes.bool,
    hasItemsRule: PropTypes.bool,
    hideIssueDate: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape({
        categories: PropTypes.shape({
            tags: PropTypes.array
        }),
        dangerousDek: PropTypes.string,
        dangerousHed: PropTypes.string,
        image: PropTypes.object,
        url: PropTypes.string
    })).isRequired,
    minItemsRequired: PropTypes.number,
    shouldHidePublishDate: PropTypes.bool,
    textAlign: PropTypes.string
};
module.exports = SummaryAudioCollection;
//# sourceMappingURL=Podcasts.js.map

/***/ }),

/***/ 3670:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const { asThemedComponent } = __webpack_require__(20223);
const SummaryAudioCollection = __webpack_require__(44357);
module.exports = asThemedComponent(asConfiguredComponent(SummaryAudioCollection, 'SummaryAudioCollection'));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 30154:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const SectionTitle = __webpack_require__(35864);
const { SummaryItemDek } = __webpack_require__(68116);
const { SummaryItemBaseByline } = __webpack_require__(277);
const Grid = __webpack_require__(86659);
const { GridItem } = __webpack_require__(40653);
const { calculateSpacing, getColorToken, maxScreen, minScreen } = __webpack_require__(26865);
const { applyGridSpacing } = __webpack_require__(1123);
const { BREAKPOINTS } = __webpack_require__(96472);
const { maxThresholds } = __webpack_require__(99906);
const PodcastsSectionTitleWrapper = styled(Grid).withConfig({
    displayName: 'PodcastsSectionTitleWrapper'
}) `
  ${applyGridSpacing('padding')}

  ${GridItem} {
    grid-column: 1/-1;
  }
`;
const PodcastsSectionTitle = styled(SectionTitle).withConfig({
    displayName: 'SummaryAudioCollectionTitle'
}) `
  grid-column: 1/-1;
  border-top: 1px solid ${getColorToken('colors.discovery.body.white.accent')};
  border-bottom: 1px solid
    ${getColorToken('colors.discovery.body.white.accent')};
`;
const PodcastsList = styled.div.withConfig({
    displayName: 'PodcastsList'
}) `
  padding-top: ${calculateSpacing(4)};
`;
const CarouselWrapper = styled(Grid.NoMargins).withConfig({
    displayName: 'CarouselWrapper'
}) `
  ${applyGridSpacing('padding')}

  ${GridItem} {
    grid-column: 1/-1;
    width: 100%;
  }
`;
const Podcasts = styled.section.withConfig({
    displayName: 'SummaryAudioCollection'
}) `
  padding-top: ${calculateSpacing(5)};

  ${({ theme }) => theme &&
    `background: ${getColorToken(theme, 'colors.discovery.lead.secondary.background')};
      }`}

  ${PodcastsList} {
    ${SummaryItemDek}, ${SummaryItemBaseByline} {
      display: none;
    }
    ${maxScreen(`${maxThresholds.md}px`)} {
      display: none;
    }
  }

  ${CarouselWrapper} {
    ${SummaryItemDek}, ${SummaryItemBaseByline} {
      display: none;
    }

    ${({ itemCount }) => itemCount === 3 &&
    css `
        ${minScreen(BREAKPOINTS.md)} {
          display: none;
        }
      `}
  }
`;
module.exports = {
    Podcasts,
    PodcastsSectionTitleWrapper,
    PodcastsSectionTitle,
    CarouselWrapper,
    PodcastsList
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 57598:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const SectionTitle = __webpack_require__(35864);
const SummaryList = __webpack_require__(22539);
const SummaryItem = __webpack_require__(74992);
const StoryUnit = __webpack_require__(99366);
const { SummaryCollageEightTitle, SummaryCollageEightGrid, SummaryCollageEightTopTitle, SummaryCollageEightGridItemCollageFour, SummaryCollageEightGridItemList, SummaryCollageEightGridItemTitle, SummaryCollageEightSummaryCollageFour, SummaryCollageEightSummaryList, SummaryCollageEightRelatedRowMobileOnlyReorderTo3, SummaryCollageEightGridItemCollageFourTitle } = __webpack_require__(55954);
const { TrackComponentChannel } = __webpack_require__(78788);
const { trackNavigationEvent } = __webpack_require__(14307);
const { isDesktopBrowser } = __webpack_require__(72362);
/**
 * SummaryCollageEight component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.curatedSearchHed] - Optional string (possibly HTML) to use as the title for the summary list
 * @param {string} [props.dangerousDek] - Optional string (possibly HTML) to use as the title/dek
 * @param {string} [props.dangerousHed] - Optional string (possibly HTML) to use as the title
 * @param {bool} [props.hasBackground] - Optional boolean to enable or disable hed underline summaryItem
 * @param {bool} [props.hasUnderlineHed] - Optional boolean to enable or disable hed underline summaryItem
 * @param {Bool} [props.hasRoundedBorder] - Optional prop to show rounded borders
 * @param {Bool} [props.hideBottomBorders] - Optional prop to hide bottom borders
 * @param {Bool} [props.hideRubricItemSummary] - Show or hide rubrics in summary items
 * @param {Bool} [props.hideSummaryListDeks] - Optional prop to hide only the deks of the SummaryList items
 * @param {Bool} [props.hideVerticalBorders] - Optional prop to hide vertical borders
 * @param {Bool} [props.isPartiallyCurated] - Optional prop to check for BestStories component
 * @param {Bool} [props.isTitleFullWidth] - optional prop to  add full width Top Title
 * @param {Array<SummaryItem.propTypes>} props.items - Array of items to render
 * @param {string} [props.recircRiver] - Optional
 * @param {object} [props.rightColumnFeature] - Optional feature object settings
 * @param {string} [props.sectionTitleVariation] - Optional variation of SectionTitle to use, defaults to 'LineAboveLineBelowTextCenter'
 * @param {Bool} [props.shouldEnableCardLevelBookmark] - Optional flag to enable bookmarks on bundle page
 * @param {Bool} [props.shouldEnableCommentsCount] - Optional flag to enable comments count on bundle page
 * @param {Array} [props.shouldLimitSavingToContentTypes] - flag to determine if saving should be enabled only on certain content types
 * @param {bool} [props.shouldEnableBundleComponentAnalytics] - Optional feature flag to append data-section-title attribute for analytics
 * @param {Bool} [props.shouldHideBylines] - Optional flag to hide bylines
 * @param {Bool} [props.shouldHideDangerousDek] - Optional flag to hide dek
 * @param {boolean} [props.shouldHidePublishDate] - Optional boolean to hide publish date
 * @param {Bool} [props.shouldShowRecipeBadge] - Optional prop to show recipe badge
 * @param {string} [props.summaryListHed] - Optional Hed for SummaryList preferred more than curatedSearchHed
 * @param {string} [props.summaryListSummaryItemVariation] - Optional variation of SummaryItem to use within SummaryList, defaults to `SideBySideDense`
 * @param {string} [props.summaryItemVariation] - Optional variation of SummaryItem to use within SummaryList, defaults to `NoAssetTextCenter`
 * @param {string} [props.summarySectionTitleVariation] - Optional variation of SectionTitle to use within SummaryList, defaults to 'TextCenter'
 * @param {Bool} [props.shouldUseDekAsHed] - Optional
 * @param {bool} [props.shouldTrackSnowplowEvent] - Optional flag to enable snowplow event capturing
 * @param {object} [props.trackingNamespace] - Optional override the base namespace of data-section-title for component tracking
 * @param {bool} [props.dangerousCategoryTitle] - section title
 * @param {object} [props.sumCollageFourItems] - SummaryCollageFour Items
 * @param {object} [props.sumListItems] - SummaryList Items
 * @param {boolean} [props.shouldShowStackedRatingsCard] - Optional prop to toggle the display of stacked ratings card
 * @param {object} [props.variations] - Optional. Variation properties used in rendering the component.
 * @param {string} [props.variationName] - Optional. Represents variation name for this component.
 * @param {bool} [props.variations.shouldUseDenseMobileVariation] - Optional flag to enable new mobile desnity variation on SummaryCollageEight
 * @param {boolean} [props.hasConsistentSpacing] - defines whether the consistent spacing is needed or not
 * @param {boolean} [props.shouldEnableBookmarkDrawers] - flag to enable bookmark drawer functionality
 *
 * @returns {ReactElement} <div>
 */
const SummaryCollageEight = ({ className, curatedSearchHed, dangerousCategoryTitle, dangerousDek, dangerousHed, hasBackground, hasConsistentSpacing = false, hasRoundedBorder, hasUnderlineHed, hideBottomBorders = false, hideRubricItemSummary = false, hideSummaryListDeks = false, hideVerticalBorders = false, isPartiallyCurated = false, isTitleFullWidth, items = [], recircRiver, rightColumnFeature, shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark, shouldEnableCommentsCount, shouldLimitSavingToContentTypes, sectionTitleVariation = 'TextLeft', shouldEnableBundleComponentAnalytics, shouldHideBylines = false, shouldHideDangerousDek = true, shouldHidePublishDate = true, shouldShowRecipeBadge, shouldShowStackedRatingsCard = false, shouldUseDekAsHed = false, sumCollageFourItems, sumListItems, summaryListHed, summaryListSummaryItemVariation = null, summaryItemVariation = 'SideBySideThirdsImageRight', shouldTrackSnowplowEvent = true, summarySectionTitleVariation = 'TextLeft', trackingNamespace, variations = {
    shouldUseDenseMobileVariation: false
}, variationName }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SummaryCollageEight',
            variation: variationName
        });
    }, [variationName]);
    const isMobile = !isDesktopBrowser();
    const SectionTitleComponent = SectionTitle[sectionTitleVariation];
    const displayHed = shouldUseDekAsHed ? dangerousDek : dangerousHed;
    const displayDek = !shouldHideDangerousDek ? dangerousDek : '';
    const hasHed = !!displayHed;
    const summaryListHeading = summaryListHed || curatedSearchHed;
    const { shouldUseDenseMobileVariation } = variations;
    const snowplowEvent = {
        type: 'click',
        label: dangerousHed,
        subject: 'summary_collage_eight',
        subject_version: isMobile && shouldUseDenseMobileVariation ? 'mobile_dense' : 'default'
    };
    const trackSnowplowEvent = (eventType, item, index, placement, total_index, subjectVersion) => {
        if (shouldTrackSnowplowEvent) {
            trackNavigationEvent({
                type: eventType,
                subject: 'summary_collage_eight',
                items: [
                    {
                        content_title: item.dangerousHed,
                        content_type: item.contentType,
                        content_id: item.copilotID,
                        content_url: item.url
                    }
                ],
                index,
                total_index,
                placement,
                subject_version: shouldUseDenseMobileVariation && isMobile
                    ? subjectVersion || 'mobile_dense'
                    : 'default'
            });
        }
    };
    const renderGridItemTitle = () => {
        return (React.createElement(SummaryCollageEightGridItemTitle, { isPartiallyCurated: isPartiallyCurated, isTitleFullWidth: isTitleFullWidth },
            React.createElement(SummaryCollageEightTitle, { as: SectionTitleComponent, dangerousHed: (isPartiallyCurated || isTitleFullWidth) && dangerousCategoryTitle
                    ? dangerousCategoryTitle
                    : displayHed, isTitleFullWidth: isTitleFullWidth, dangerousDek: displayDek })));
    };
    let listProps = {};
    if (rightColumnFeature) {
        listProps = {
            hasFeatured: true,
            summaryItemFeatured: rightColumnFeature
        };
    }
    const getCollageItems = () => {
        const collageFourItems = (isPartiallyCurated || isTitleFullWidth) && sumCollageFourItems
            ? sumCollageFourItems
            : items.slice(0, 4);
        if (isMobile && shouldUseDenseMobileVariation) {
            return collageFourItems.slice(0, 1);
        }
        return collageFourItems;
    };
    const collageItems = getCollageItems();
    return (React.createElement(SummaryCollageEightGrid, { className: classnames('summary-collage-eight', {
            'summary-collage--without-vertical-borders': hideVerticalBorders
        }, className), isPartiallyCurated: isPartiallyCurated, hasBackground: hasBackground, hasConsistentSpacing: hasConsistentSpacing },
        isTitleFullWidth && (React.createElement(SummaryCollageEightTopTitle, { as: SectionTitle.LineBelowTextCenter, dangerousHed: displayHed, dangerousDek: displayDek })),
        hasHed && !isTitleFullWidth && renderGridItemTitle(),
        React.createElement(SummaryCollageEightGridItemCollageFour, { isPartiallyCurated: isPartiallyCurated, isTitleFullWidth: isTitleFullWidth, shouldUseDenseMobileVariation: shouldUseDenseMobileVariation },
            isPartiallyCurated && !isTitleFullWidth && (React.createElement(SummaryCollageEightGridItemCollageFourTitle, { as: SectionTitleComponent, dangerousHed: displayHed, dangerousDek: displayDek })),
            React.createElement(SummaryCollageEightSummaryCollageFour, { items: collageItems, hasBorder: !hideBottomBorders, placement: "secondary", hasUnderHeroItem: true, hideLastFewSummaryImages: false, hideSummaryListDeks: hideSummaryListDeks, hideVerticalBorders: hideVerticalBorders, isPartiallyCurated: isPartiallyCurated, recircRiver: recircRiver, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, snowplowEvent: { ...snowplowEvent, total_index: 1 }, shouldHideBylines: shouldHideBylines, trackingNamespace: trackingNamespace?.main, underHeroItemVariation: summaryItemVariation, hasRoundedBorder: hasRoundedBorder, shouldShowRecipeBadge: shouldShowRecipeBadge, isTitleFullWidth: isTitleFullWidth, shouldShowStackedRatingsCard: shouldShowStackedRatingsCard, shouldEnableBookmarkDrawers: shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark: shouldEnableCardLevelBookmark, shouldEnableCommentsCount: shouldEnableCommentsCount, shouldLimitSavingToContentTypes: shouldLimitSavingToContentTypes, shouldUseDenseMobileVariation: shouldUseDenseMobileVariation, shouldTrackSnowplowEvent: shouldTrackSnowplowEvent, impressionHandler: trackSnowplowEvent }),
            isMobile &&
                shouldUseDenseMobileVariation &&
                items.slice(1, 3).map((item, index) => (React.createElement(StoryUnit, { className: `mobile_dense_smart_item-${index}`, key: index, contributors: !shouldHideBylines && item.contributors, image: item.image, dangerousHed: item.dangerousHed, dangerousDek: !shouldHideDangerousDek && item.dangerousDek, date: !shouldHidePublishDate && item.date, rubric: item.rubric, url: item.url, contentType: item.contentType, shouldHideIcon: false, shouldTrackSnowplowEvent: shouldTrackSnowplowEvent, clickHandler: () => {
                        window.location = item.url;
                        return trackSnowplowEvent('click', item, index, 'secondary', 2);
                    }, impressionHandler: () => trackSnowplowEvent('impression', item, index, 'secondary', 2) })))),
        React.createElement(SummaryCollageEightGridItemList, { hasHed: hasHed, isPartiallyCurated: isPartiallyCurated, isTitleFullWidth: isTitleFullWidth },
            hasHed && isTitleFullWidth && renderGridItemTitle(),
            React.createElement(SummaryCollageEightSummaryList, { ...listProps, hasHed: hasHed, dangerousHed: summaryListHeading, hasUnderlineHed: hasUnderlineHed, hideBottomBorders: hideBottomBorders, hideRubricItemSummary: hideRubricItemSummary, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, shouldHideDangerousDek: true, shouldHidePublishDate: shouldHidePublishDate, shouldHoldImageSpace: false, impressionHandler: trackSnowplowEvent, shouldTrackItemImpressionForSnowplow: shouldTrackSnowplowEvent, snowplowEvent: {
                    ...snowplowEvent,
                    subject_version: shouldUseDenseMobileVariation && isMobile
                        ? 'mobile_dense-off_canvas'
                        : 'default',
                    total_index: 5
                }, totalItems: 5, items: (isPartiallyCurated || isTitleFullWidth) && sumListItems
                    ? sumListItems
                    : items.slice(4), placement: "right_rail", isPartiallyCurated: isPartiallyCurated, sectionTitleVariation: summarySectionTitleVariation, summaryItemVariation: summaryListSummaryItemVariation || summaryItemVariation, recircRiver: recircRiver, shouldHideBylines: shouldHideBylines, shouldShowStackedRatingsCard: shouldShowStackedRatingsCard, shouldEnableBookmarkDrawers: shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark: shouldEnableCardLevelBookmark, shouldEnableCommentsCount: shouldEnableCommentsCount, shouldLimitSavingToContentTypes: shouldLimitSavingToContentTypes, trackingNamespace: trackingNamespace?.rightRail, hasRoundedBorder: hasRoundedBorder, shouldUseDenseMobileVariation: isMobile && shouldUseDenseMobileVariation })),
        React.createElement(SummaryCollageEightRelatedRowMobileOnlyReorderTo3, null)));
};
SummaryCollageEight.propTypes = {
    className: PropTypes.string,
    curatedSearchHed: PropTypes.string,
    dangerousCategoryTitle: PropTypes.string,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    hasBackground: PropTypes.bool,
    hasConsistentSpacing: PropTypes.bool,
    hasRoundedBorder: PropTypes.bool,
    hasUnderlineHed: PropTypes.bool,
    hideBottomBorders: PropTypes.bool,
    hideRubricItemSummary: PropTypes.bool,
    hideSummaryListDeks: PropTypes.bool,
    hideVerticalBorders: PropTypes.bool,
    isPartiallyCurated: PropTypes.bool,
    isTitleFullWidth: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape(SummaryItem.propTypes)),
    recircRiver: PropTypes.string,
    rightColumnFeature: PropTypes.shape({
        ctaUrl: PropTypes.string,
        header: PropTypes.string,
        ctaTextLabel: PropTypes.string,
        itemIndex: PropTypes.number,
        hideOnMobile: PropTypes.bool
    }),
    sectionTitleVariation: PropTypes.string,
    shouldEnableBookmarkDrawers: PropTypes.bool,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldEnableCardLevelBookmark: PropTypes.bool,
    shouldEnableCommentsCount: PropTypes.bool,
    shouldHideBylines: PropTypes.bool,
    shouldHideDangerousDek: PropTypes.bool,
    shouldHidePublishDate: PropTypes.bool,
    shouldLimitSavingToContentTypes: PropTypes.array,
    shouldShowRecipeBadge: PropTypes.bool,
    shouldShowStackedRatingsCard: PropTypes.bool,
    shouldTrackSnowplowEvent: PropTypes.bool,
    shouldUseDekAsHed: PropTypes.bool,
    sumCollageFourItems: PropTypes.object,
    sumListItems: PropTypes.object,
    summaryItemVariation: SummaryList.propTypes.summaryItemVariation,
    summaryListHed: PropTypes.string,
    summaryListSummaryItemVariation: PropTypes.string,
    summarySectionTitleVariation: PropTypes.string,
    trackingNamespace: PropTypes.object,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        shouldUseDenseMobileVariation: PropTypes.bool
    })
};
SummaryCollageEight.displayName = 'SummaryCollageEight';
module.exports = SummaryCollageEight;
//# sourceMappingURL=SummaryCollageEight.js.map

/***/ }),

/***/ 84446:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
module.exports = asConfiguredComponent(__webpack_require__(15014), 'SummaryCollageEight');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 55954:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, createGlobalStyle, css } = __webpack_require__(92168);
const { BREAKPOINTS } = __webpack_require__(96472);
const { applyGridSpacing, cssVariablesGrid } = __webpack_require__(1123);
const { cssVariablesCollage } = __webpack_require__(89085);
const { calculateSpacing, getColorToken, getTypographyStyles, minScreen, maxScreen, minMaxScreen } = __webpack_require__(26865);
const { getSectionSpacingStyling } = __webpack_require__(16800);
const { SectionTitleHed } = __webpack_require__(33500);
const { VersoIssueFeatureMagazineIssueDate, VersoIssueFeatureMagazineIssueName } = __webpack_require__(72542);
const SummaryCollageFour = __webpack_require__(199);
const SummaryList = __webpack_require__(22539);
const { SummaryCollageFourUnderMainItem, SummaryCollageFourSummaryListItem, SummaryCollageFourMainItem, SummaryCollageFourWrapper } = __webpack_require__(99337);
const { StackedRatingsCardWrapper, ImageWrapper, ContentWrapper: StackedRatingsCardContentWrapper, Hed: StackedRatingsCardHed } = __webpack_require__(1817);
const { StoryUnitWrapper } = __webpack_require__(63993);
const { SmartItemDek, SmartItemHed, SmartItemBaseText } = __webpack_require__(88154);
const stackedRatingsCardStyle = css `
  ${StackedRatingsCardContentWrapper} {
    ${({ shouldShowStackedRatingsCard }) => shouldShowStackedRatingsCard && `padding-left:0`}
  }
`;
const SummaryCollageEightTitle = styled.div.withConfig({
    displayName: 'SummaryCollageEightTitle'
}) `
  ${SectionTitleHed} {
    ${getTypographyStyles('typography.definitions.discovery.subhed-section-collection')}
    ${maxScreen(BREAKPOINTS.md)} {
      justify-self: ${({ isTitleFullWidth }) => isTitleFullWidth && 'center'};
    }
  }
`;
const SummaryCollageEightGridItemCollageFourTitle = styled.div.withConfig({
    displayName: 'SummaryCollageEightTitle'
}) `
  ${SectionTitleHed} {
    ${getTypographyStyles('typography.definitions.discovery.subhed-section-collection')}
    margin-bottom: ${calculateSpacing(3)};
  }
`;
const SummaryCollageEightGrid = styled.section.withConfig({
    displayName: 'SummaryCollageEightGrid'
}) `
  ${cssVariablesGrid()}

  display: grid;
  gap: 0 var(--grid-gap);
  grid-template-columns: repeat(4, 1fr);
  ${applyGridSpacing('padding')}
  margin: 0 auto;
  max-width: ${calculateSpacing(200)};

  ${minScreen(BREAKPOINTS.md)} {
    grid-template-columns: repeat(12, 1fr);
  }

  ${minScreen(BREAKPOINTS.lg)} {
    grid-template-rows: auto repeat(2, 1fr);
  }
  ${({ isPartiallyCurated }) => isPartiallyCurated &&
    `
    ${({ hasConsistentSpacing, theme }) => {
        if (hasConsistentSpacing &&
            getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
            return `padding-top: ${calculateSpacing(3)};`;
        }
        return null;
    }}
  
    ${minScreen(BREAKPOINTS.lg)} {
      ${({ hasConsistentSpacing, theme }) => {
        if (hasConsistentSpacing &&
            getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
            return `padding-top: ${calculateSpacing(4)};`;
        }
        return null;
    }}
      grid-template-rows: minmax(${calculateSpacing(5)}, auto) repeat(1, 1fr);
    }

    ${minScreen(BREAKPOINTS.xl)} {
      ${({ hasConsistentSpacing, theme }) => {
        if (hasConsistentSpacing &&
            getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
            return `padding-top: ${calculateSpacing(5)};`;
        }
        return null;
    }}
    }
  `}
  ${cssVariablesCollage()};

  .summary-item--has-border {
    &:last-child {
      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
        margin-bottom: 0;
        border-bottom: 0;
      }
    }
  }

  ${({ hasBackground }) => hasBackground &&
    css `
      background-color: ${getColorToken('colors.discovery.body.light.background')};
    `}
`;
const SummaryCollageEightTopTitle = styled.div.withConfig({
    displayName: 'SummaryCollageEightTopTitle'
}) `
  grid-column: 1 / -1;
  margin-top: ${calculateSpacing(6)};
  margin-bottom: ${calculateSpacing(4)};
  border-bottom-color: ${getColorToken('colors.discovery.body.white.accent')};
  padding-bottom: ${calculateSpacing(2)};
  ${minScreen(BREAKPOINTS.lg)} {
    margin-top: ${calculateSpacing(4)};
  }
`;
const SummaryCollageEightGridItemTitle = styled.div.withConfig({
    displayName: 'SummaryCollageEightGridItemTitle'
}) `
  grid-column: 1 / -1;
  align-self: flex-end;
  order: 2;
  border-bottom: 1px solid
    ${getColorToken('colors.discovery.body.white.border')};
  padding-bottom: ${calculateSpacing(1)};

  ${minScreen(BREAKPOINTS.lg)} {
    grid-column: 10 / span 3;
    grid-row: ${({ isTitleFullWidth }) => isTitleFullWidth ? '2 / span 2' : '1 / span 1'};
    margin-left: calc(var(--border-offset) * -1);
    border-top: none;
    border-bottom: none;
    border-left: ${({ isTitleFullWidth }) => !isTitleFullWidth
    ? `1px solid
      ${getColorToken('colors.discovery.body.white.border')};`
    : 'none;'};
    padding-left: var(--border-offset);
    width: calc(100% + var(--border-offset));
  }
  ${({ isPartiallyCurated }) => isPartiallyCurated &&
    `
  border-bottom: none;
  ${minMaxScreen(BREAKPOINTS.md, `calc(${BREAKPOINTS.lg} - 1px)`)} {
    grid-row: 2 / span 1;
    grid-column: 1 / span 12;
  }
`}
`;
const SummaryCollageEightGridItemCollageFour = styled.div.withConfig({
    displayName: 'SummaryCollageEightGridItemCollageFour'
}) `
  grid-column: 1 / -1;
  order: 1;

  ${minScreen(BREAKPOINTS.lg)} {
    grid-column-gap: var(--grid-gap);
    grid-column: 1 / span 9;
    grid-row: ${({ isTitleFullWidth }) => isTitleFullWidth ? '2 / span 4' : '1 / span 3'};
    grid-row-gap: ${calculateSpacing(2)};
  }
  ${({ isPartiallyCurated }) => isPartiallyCurated &&
    `
  ${minMaxScreen(BREAKPOINTS.md, `calc(${BREAKPOINTS.lg} - 1px)`)} {
    grid-column-gap: var(--grid-gap);
    grid-column: 1 / span 12;
    grid-row-gap: ${calculateSpacing(2)};
    grid-row: 1 / span 1;
    grid-template-rows: repeat(2, 0.75fr);
  }
  `}

  ${({ shouldUseDenseMobileVariation, theme }) => shouldUseDenseMobileVariation &&
    `
    ${SummaryCollageFourWrapper} {
      ${maxScreen(BREAKPOINTS.md)} {
        border-bottom: 1px solid
          ${getColorToken(theme, 'colors.discovery.body.white.border')};
      }
    }
    ${StoryUnitWrapper} {
      ${maxScreen(BREAKPOINTS.md)} {
        border-bottom: 1px solid
          ${getColorToken(theme, 'colors.discovery.body.white.border')};
        padding: ${calculateSpacing(2)} 0;
        ${SmartItemDek} {
          margin: ${calculateSpacing(2)} 0;
        }
        ${SmartItemHed} {
          margin-bottom: 0.5rem;
          ${getTypographyStyles('typography.definitions.discovery.hed-core-secondary')};
        }
        ${SmartItemBaseText}::after {
          display: none;
        }
      }
    }
    }`}
`;
const SummaryCollageEightGridItemList = styled.div.withConfig({
    displayName: 'SummaryCollageEightGridItemList'
}) `
  grid-column: 1 / -1;
  order: ${({ hasHed }) => (hasHed ? 3 : 2)};
  margin: 0;
  border-top: none;
  padding: 0;

  ${StackedRatingsCardWrapper} {
    display: grid;
    border-top: 1px solid ${getColorToken('colors.discovery.body.white.border')};
    ${ImageWrapper} {
      display: grid;
      grid-area: image;
      align-items: center;
    }
    ${StackedRatingsCardContentWrapper} {
      grid-area: content;
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  ${minScreen(BREAKPOINTS.lg)} {
    grid-column: 10 / span 3;
    grid-row: ${({ hasHed }) => (hasHed ? '2 / span 2' : '1 / span 3')};
    margin-left: calc(var(--border-offset) * -1);
    border-left: ${({ isTitleFullWidth }) => !isTitleFullWidth
    ? `1px solid
    ${getColorToken('colors.discovery.body.white.border')};`
    : 'none;'};
    padding-right: 0;
    padding-left: var(--border-offset);
    width: calc(100% + var(--border-offset));
  }

  ${({ isPartiallyCurated }) => isPartiallyCurated &&
    `
    ${minMaxScreen(BREAKPOINTS.md, `calc(${BREAKPOINTS.lg} - 1px)`)} {
      border-left: none;
      grid-column: 1 / span 12;
      grid-row: 3 / span 1;
    }
  `}
`;
const summaryCollageFourStyle = css `
  ${SummaryCollageFourMainItem} {
    position: unset;
    margin-bottom: 0;
    border-bottom: none;
    ${({ shouldShowStackedRatingsCard }) => shouldShowStackedRatingsCard && `padding-bottom: ${calculateSpacing(6)};`}

    ${StackedRatingsCardHed} {
      ${({ shouldShowStackedRatingsCard }) => shouldShowStackedRatingsCard &&
    getTypographyStyles('typography.definitions.discovery.hed-feature')}
    }
    ${stackedRatingsCardStyle}

    ${minScreen(BREAKPOINTS.lg)} {
      grid-column: 4 / -1;
      margin-bottom: ${calculateSpacing(3)};
    }
    ${({ isPartiallyCurated }) => isPartiallyCurated &&
    `
    ${minMaxScreen(BREAKPOINTS.md, `calc(${BREAKPOINTS.lg} - 1px)`)} {
      grid-column: 4 / -1;
    }
    `}
    @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
      padding-bottom: ${calculateSpacing(1)};
    }

    @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.md} - 1px)) {
      padding-bottom: ${calculateSpacing(2)};
    }

    .summary-item__dek {
      display: block;
    }

    .summary-item__content {
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .summary-item__image-link {
      padding-right: 0;

      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
        margin-right: -${calculateSpacing(3)};
        margin-left: -${calculateSpacing(3)};
        ${({ isPartiallyCurated }) => isPartiallyCurated &&
    `
        margin-right: ${calculateSpacing(0)};
        margin-left: ${calculateSpacing(0)};
      `}
      }
    }
  }
  ${SummaryCollageFourUnderMainItem} {
    border-bottom: none;
    ${minScreen(BREAKPOINTS.lg)} {
      grid-column: 4 / -1;
    }

    @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
      display: ${({ isTitleFullWidth }) => isTitleFullWidth ? 'none' : 'block'};
    }

    .summary-item__dek {
      display: block;
    }

    .summary-item__content {
      ${minScreen(BREAKPOINTS.lg)} {
        margin-top: ${calculateSpacing(2)};
      }

      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
        padding: ${calculateSpacing(2)} 0 ${calculateSpacing(4)};
      }
      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
        padding-bottom: ${calculateSpacing(2)};
      }
      ${({ isPartiallyCurated }) => isPartiallyCurated &&
    `
        padding-top: none;
      `}
    }

    .summary-item__content.summary-item__content--no-rubric {
      ${({ isPartiallyCurated }) => isPartiallyCurated &&
    `
        padding-top: none;
      `}
    }

    .summary-item__image-link {
      ${minScreen(BREAKPOINTS.lg)} {
        margin-top: ${calculateSpacing(2)};
      }
    }
    ${({ isPartiallyCurated, isTitleFullWidth }) => (isPartiallyCurated || isTitleFullWidth) &&
    css `
        border-top: none;
      `}
  }

  ${SummaryCollageFourSummaryListItem} {
    .summary-item:last-child {
      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
        padding-bottom: ${calculateSpacing(1)};
      }
      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.md} - 1px)) {
        padding-bottom: ${calculateSpacing(2)};
      }
    }

    .summary-item {
      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
        border-bottom: 0;
      }
    }

    ${StackedRatingsCardWrapper}:first-child {
      ${({ shouldShowStackedRatingsCard }) => shouldShowStackedRatingsCard &&
    `
        border-bottom: 1px solid;
        padding-bottom:0;
      margin-bottom: ${calculateSpacing(2)};`}
      border-bottom-color:  ${getColorToken('colors.discovery.body.white.border')};
    }

    ${minScreen(BREAKPOINTS.lg)} {
      grid-column: 1 / span 3;
      grid-row-start: 1;
      margin: 0 calc(var(--border-offset) * -1) 0 0;
      border-right: ${({ isTitleFullWidth }) => !isTitleFullWidth
    ? `1px solid
      ${getColorToken('colors.discovery.body.white.border')};`
    : 'none;'};
      border-left: none;
      padding-right: var(--border-offset);
      padding-left: 0;
    }

    ${({ isPartiallyCurated }) => isPartiallyCurated &&
    `
   ${minScreen(BREAKPOINTS.md)} {
     grid-column: 1 / span 3;
     grid-row-start: 1;
     margin: 0 calc(var(--border-offset) * -1) 0 0;
     border-right: none;
     border-left: none;
     padding-right: var(--border-offset);
     padding-left: 0;
   }         
   `}
    @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
      margin-bottom: ${calculateSpacing(2)};
    }

    @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
      margin-bottom: 0;
    }

    .summary-item__hed {
      /* TOFIX: Lots of overrides happening here, this reassigns the default token for .summary-item__hed */
      ${getTypographyStyles('typography.definitions.discovery.hed-core-primary')}
    }

    /* If the flag to use StackedRatingsCard is enabled, update the type token of the StackedRatingsCard Hed.*/
    ${StackedRatingsCardHed} {
      ${({ shouldShowStackedRatingsCard }) => shouldShowStackedRatingsCard &&
    getTypographyStyles('typography.definitions.discovery.hed-core-secondary')}
    }

    ${stackedRatingsCardStyle}

    .summary-item__dek {
      display: block;
    }

    .summary-item--has-border {
      margin-bottom: 0;
    }

    .summary-item__content {
      padding-bottom: 0;
    }
  }
`;
const SummaryCollageEightSummaryCollageFour = styled(SummaryCollageFour).withConfig({
    displayName: 'SummaryCollageEightSummaryCollageFour'
}) `
  && {
    grid-template-columns: repeat(4, 1fr);
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
    height: 100%;

    .summary-item,
    .summary-item--has-border {
      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
        border-bottom: 0;
      }
    }

    .summary-list--collection-list {
      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
        border-top: 0;
      }
    }

    ${minScreen(BREAKPOINTS.lg)} {
      grid-template-columns: repeat(9, 1fr);
      grid-template-rows: minmax(${calculateSpacing(5)}, auto) 1fr;
    }

    ${({ isPartiallyCurated }) => isPartiallyCurated &&
    `
            ${minMaxScreen(BREAKPOINTS.md, `calc(${BREAKPOINTS.lg} - 1px)`)} {
              grid-template-columns: repeat(9, 1fr);
              grid-template-rows: minmax(${calculateSpacing(5)}, auto) 1fr;
            }
          `}

    &.summary-collage-four {
      ${summaryCollageFourStyle}
    }

    ${({ shouldUseDenseMobileVariation }) => shouldUseDenseMobileVariation &&
    `
    && {
      ${maxScreen(BREAKPOINTS.md)} {
        height: auto;
        ${SummaryCollageFourUnderMainItem}{
          display: none;
        }
        ${SummaryCollageFourSummaryListItem}{
          display: none;
        }
      }
    }
    `}
  }
`;
const SummaryCollageEightSummaryList = styled(SummaryList.Collection).withConfig({
    displayName: 'SummaryCollageEightSummaryList'
}) `
  &&& {
    margin: 0;
    border-top: none;
    padding: 0;

    * {
      bottom: auto;
      ${({ shouldShowStackedRatingsCard }) => !shouldShowStackedRatingsCard && `width: auto;`}
    }

    video {
      width: 100%;
    }

    .summary-list__item {
      grid-template-areas: 'content image';
      grid-template-columns: 1fr 75px;

      padding-top: ${calculateSpacing(2)};
      padding-bottom: ${calculateSpacing(2)};

      &:first-of-type {
        ${minScreen(BREAKPOINTS.lg)} {
          border-top: 1px solid
            ${getColorToken('colors.discovery.body.white.border')};
          padding-top: ${calculateSpacing(2.5)};
        }
        ${({ shouldUseDenseMobileVariation }) => shouldUseDenseMobileVariation &&
    `
          ${maxScreen(BREAKPOINTS.md)} {
            padding-top: 0;
          }
        `}
      }

      &:last-of-type {
        ${minScreen(BREAKPOINTS.lg)} {
          border-bottom: none;
        }
      }

      &.summary-item--has-border {
        margin-bottom: 0;
      }

      &.summary-item--layout-placement-side-by-side {
        grid-column-gap: var(--grid-gap);
      }

      .summary-item__image-link {
        align-self: start;
        max-width: 75px;
        height: auto;
      }

      .summary-item__hed {
        ${getTypographyStyles('typography.definitions.discovery.hed-bulletin-primary')}
        margin-bottom: ${calculateSpacing(1)};
      }

      ${StackedRatingsCardHed} {
        ${({ shouldShowStackedRatingsCard }) => shouldShowStackedRatingsCard &&
    getTypographyStyles('typography.definitions.discovery.hed-bulletin-primary')}
      }
    }
    ${stackedRatingsCardStyle}
    ${({ shouldUseDenseMobileVariation, theme }) => shouldUseDenseMobileVariation &&
    `
      && {
      .summary-list__items {
        ${maxScreen(BREAKPOINTS.md)} {
          display: flex;
          flex-direction: row;
          overflow-x: auto;
          padding: ${calculateSpacing(3)} 0;
        }
      }
      .summary-list__item {
        ${maxScreen(BREAKPOINTS.md)} {
          min-width: 75vw;
          margin: 0;
          margin-right: ${calculateSpacing(2)};
          border: none;
          border-right: 1px solid ${getColorToken(theme, 'colors.discovery.body.white.border')};
          padding: 0;
          padding-right: ${calculateSpacing(2)};

          &:last-of-type {
            margin-right: 0;
            padding-right: 0;
            border-right: none;
          }
        }
      }}`}
    ${({ isPartiallyCurated }) => isPartiallyCurated &&
    `
    .summary-list__item {
      grid-template-columns: 1fr;

      padding-top: ${calculateSpacing(2)};
      padding-bottom: ${calculateSpacing(2)};

      .summary-item__content.summary-item__content--no-rubric {
        padding-top: 0px;
      }

      &:first-of-type {
        border-top: none;
        padding-top: ${calculateSpacing(2.5)};
        ${minMaxScreen('0px', BREAKPOINTS.md)} {
          padding-top: ${calculateSpacing(1)};
        }
      }

      &:last-of-type {
        ${minScreen(BREAKPOINTS.lg)} {
          border-bottom: none;
        }
      }

      &:nth-child(4) {
        ${minMaxScreen(BREAKPOINTS.md, BREAKPOINTS.lg)} {
          border-bottom: none;
        }
      }

      &.summary-item--has-border {
        margin-bottom: 0;
      }

      &.summary-item--layout-placement-side-by-side {
        grid-column-gap: var(--grid-gap);
      }

      .summary-item__image-link {
        ${minMaxScreen('0px', `calc(${BREAKPOINTS.lg} - 1px)`)}{
          display: none;
        }
        align-self: start;
        max-width: 75px;
        height: auto;
      }

      .summary-item__hed {
        ${getTypographyStyles('typography.definitions.discovery.hed-bulletin-primary')}
        margin-bottom: ${calculateSpacing(1)};
      }
    }

    ${minMaxScreen('768px', `calc(${BREAKPOINTS.lg} - 1px)`)} {
      .summary-list__items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: ${calculateSpacing(2)};
      }
    }
  `}

    ${({ isPartiallyCurated }) => !isPartiallyCurated &&
    `.summary-list__items > div:nth-last-of-type(2) {
        margin-bottom: ${calculateSpacing(2)};
        @media (min-width: 0px) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
          margin-bottom: 0;
          padding-bottom: 0;
        }
    }`}

   ${({ shouldShowStackedRatingsCard }) => shouldShowStackedRatingsCard &&
    `.summary-list__items > div:nth-last-of-type(2) {
        margin-bottom: 0;
      }`} 

    .summary-list__item--before-hidden {
      border-bottom: none;
    }

    .summary-item--bundle {
      .summary-item__hed {
        margin-bottom: 0;
      }

      .summary-item__dek {
        margin-top: ${calculateSpacing(0.5)};
      }
    }

    ${({ hasHed }) => !hasHed &&
    `&& {
    .summary-list__item {
      &:first-of-type {
       ${minScreen(BREAKPOINTS.lg)} {
          border-top: none;
          padding-top: 0;
        }
      }
    }
      }`}
  }

  img {
    ${({ hasRoundedBorder }) => hasRoundedBorder &&
    `
      border-radius: ${calculateSpacing(1)};
    `}
  }
`;
/**
 * Collage-related reorder classes
 *
 * In special cases, there are Multi-package components that may need to be reordered
 * on the page relative to the SummaryEightCollage (i.e. the verso-issue-feature component
 * on the TNY homepage). The following classes following classes declare those behaviors.
 * For more on how to apply these classes, see the MultiPackage component README.
 */
// NOTE: Reordered components will sit under items that already exist in that order
const SummaryCollageEightRelatedRowMobileOnlyReorderTo3 = createGlobalStyle `
  .summary-collage-eight-related-row--mobile-only-reorder-to-3 {
    @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
      && {
        order: 2;
        margin-top: ${calculateSpacing(2)};
      }
    }

    ${VersoIssueFeatureMagazineIssueDate} {
      margin-bottom: 0;
    }

    ${VersoIssueFeatureMagazineIssueName} {
      margin-top: ${calculateSpacing(0.5)};
    }
  }
`;
module.exports = {
    SummaryCollageEightTitle,
    SummaryCollageEightGrid,
    SummaryCollageEightTopTitle,
    SummaryCollageEightGridItemCollageFour,
    SummaryCollageEightGridItemList,
    SummaryCollageEightGridItemTitle,
    SummaryCollageEightSummaryList,
    SummaryCollageEightSummaryCollageFour,
    SummaryCollageEightRelatedRowMobileOnlyReorderTo3,
    SummaryCollageEightGridItemCollageFourTitle
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 15014:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const SummaryCollageEight = __webpack_require__(57598);
SummaryCollageEight.DenseMobile = asVariation(SummaryCollageEight, 'DenseMobile', {
    shouldUseDenseMobileVariation: true
});
module.exports = SummaryCollageEight;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 22195:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const SummaryItem = __webpack_require__(74992);
const SectionTitle = __webpack_require__(35864);
const { SummaryCollageTwoColumnWrapper, SummaryCollageOneColumnWrapper, GridWithMargins, SummaryCollageFiftyFiftyTitleWrapper, Wrapper, StickyColumn, FeaturedSummaryItem, ShowMoreButtonWrapper } = __webpack_require__(42404);
const { TitleWrapper } = __webpack_require__(22482);
const { useColumnsComponent } = __webpack_require__(22394);
const OneColumn = __webpack_require__(36474);
const { sizes } = __webpack_require__(99906);
const { BaseWrap } = __webpack_require__(76955);
const { componentTracking } = __webpack_require__(90090);
const { useResizeObserver } = __webpack_require__(55030);
const { RESOLUTION_MAP } = __webpack_require__(2097);
const Button = __webpack_require__(88456);
const { trackNavigationItems } = __webpack_require__(91755);
const MIN_THRESHOLD = 4;
const MAX_THRESHOLD = 7;
const hasEnoughItems = (items = []) => items.length >= MIN_THRESHOLD && items.length <= MAX_THRESHOLD;
/**
 * SummaryCollageFiftyFifty component
 *
 * @param {object} props - React props
 * @param {Function} props.Ad - Optional prop to receive an Ad element
 * @param {string} props.breakpoint - break point default is lg
 * @param {string} props.columnItemLimit - Optional column Item Limit
 * @param {string} props.columnItemType - Optional column Item Type default is RatingCard
 * @param {string} props.mobileColumnItemType - column Item Type for mobile default is undefined
 * @param {string} props.columnSummaryItemVariation - Optional column SummaryItem Variation
 * @param {string} props.mobileColumnSummaryItemVariation - column SummaryItem Variation for mobile, default is undefined
 * @param {string} props.customButtonText - Optional button text for show more button
 * @param {string} props.dangerousDek - Optional dangerous Dek
 * @param {string} props.dangerousHed - Optional dangerous Hed
 * @param {string} [props.featuredItemHedTag] - Optional prop to control the featured item html tag
 * @param {string} props.featuredSummaryItemVariation - Optional prop to control the variation of the featured, defaults to `OverlayCenterLimitedHeight`
 * @param {boolean} [props.hasBackground] - Optional prop to add background to the card
 * @param {boolean} [props.hasBorder] - Optional. default false
 * @param {boolean} props.hasCollapsedAd - Optional prop to flag when an ad is collapsed
 * @param {boolean} props.hasConsistentSpacing - Optional defines whether the consistent spacing is needed or not
 * @param {boolean} props.hasPadding - Optional prop to flag when an padding is added
 * @param {boolean} props.hasPaddingTop - Optional prop to flag for padding top is added/removed
 * @param {boolean} [props.hasFeaturedItemMorePadding] - Optional prop to flag for Extra padding to featured Item is added/removed
 * @param {boolean} props.hasFetauredItemStickyColumnPadding - Optional prop to apply padding around featured item
 * @param {boolean} props.hasLimitedHeightStickyColumn - Optional prop to apply min height to stickycolumn
 * @param {boolean} [props.hasRule] - Optional. Show or should hide the decrorative rule.
 * @param {boolean} [props.hasShowMoreButtonBottomMargin] - Optional prop to add show more button margin
 * @param {boolean} [props.hasWrapperPadding] - Optional prop to add summary collage wrapper margin
 * @param {boolean} [props.hideIssueDate] - Show or hide the issue date
 * @param {boolean} [props.hideRubricItemSummary] - Optional. Set `true` for hide rubrics, set `false` for
 *   show rubrics.
 * @param {boolean} [props.hideSourceTagName] - Optional Set `true` to hide sourceTagName
 * @param {boolean} props.hasRuleColumnItem - Optional to add rule below sum summary item
 * @param {Array}  props.items - Array of collage items
 * @param {string} [props.layout] - Optional prop to control the layout
 * @param {object} [props.mosaicPosition] - Optional prop to control the mosaic ad position
 * @param {boolean} [props.mobImageAlignment] - Decides alignment of image in mobile view 'top', 'default', 'bottom'
 * @param {boolean} [props.hasDekPaddingBottom] - Prop to hide padding for  One column Dek
 * @param {string} props.sectionTitleVariation - Optional prop to control section title variation, defaults to `LineAboveLineBelowTextCenter`
 * @param {string} props.shouldHideItemCount - Optional prop to hide Iem count and slide for Gallery Item.
 * @param {string} props.shouldHideDekOnMobileView - Optional prop to hide dek of SideBySideRatingsCard on mobile view.
 * @param {boolean} [props.shouldHidePublishDate] - Boolean value to hide publish date
 * @param {boolean} [props.shouldEnableBundleComponentAnalytics] - feature flag to append data-section-title attribute for analytics
 * @param {boolean} [props.showOneColumnReverse] - Arange in reverse order change respected styles
 * @param {boolean} props.hasShowMoreButton - Optional flag to show show more button
 * @param {Function} props.showMoreBtnStyle - Optional prop to add buttonStyle for show more button
 * @param {string} props.showMoreButtonURL - Optional to add href to show more button
 * @param {object} [props.showMoreButtonVariation] - Optional prop for setting variation of show more button
 * @param {string} [props.stickyPosition] - Optional prop to specify the card's sticky behaviour
 * @param {string} [props.summaryItemStickTopThreshold] - Optional prop to set min screen width threshold for sticking summary item at top
 * @param {string} props.summaryItemVariation - Optional prop to control the variation of all other summary items at larger viewport widths, defaults to `TextBelowLeft`
 * @param {object} [props.trackingNamespace] - Optional override the base namespace of data-section-title for component tracking
 * @param {boolean} props.shouldTrackItemEvents - Optional prop to enable/disable tracking for item events
 *
 * @returns {ReactElement} <div>
 */
const SummaryCollageFiftyFifty = ({ Ad, breakpoint = 'lg', columnItemLimit = 3, columnItemType = 'RatingsCard', columnSummaryItemVariation = 'SideBySideThirdsImageRight', customButtonText = 'See More', dangerousHed, dangerousDek, featuredItemHedTag, featuredSummaryItemVariation = 'OverlayCenterLimitedHeight', hasBackground = false, hasBorder = false, hasCollapsedAd, hasConsistentSpacing, hasPadding, hasPaddingTop = true, hasFeaturedItemMorePadding, hasFetauredItemStickyColumnPadding = false, hasLimitedHeightStickyColumn = false, hasRule = false, hasWrapperPadding = true, hideIssueDate = true, hideRubricItemSummary = false, hideSourceTagName, hasShowMoreButtonBottomMargin = true, hasRuleColumnItem = false, items, layout = 'two-column', mobileColumnItemType, mobileColumnSummaryItemVariation, mobImageAlignment = 'default', mosaicPosition = {}, hasDekPaddingBottom = true, sectionTitleVariation = 'LineAboveLineBelowTextCenter', shouldHideDekOnMobileView = false, shouldHideItemCount = false, shouldEnableBundleComponentAnalytics = false, shouldHidePublishDate = true, showOneColumnReverse = false, hasShowMoreButton = false, showMoreBtnStyle = 'outlined', showMoreButtonURL = '', showMoreButtonVariation = 'Utility', stickyPosition = 'top', summaryItemStickTopThreshold, summaryItemVariation = 'TextBelowDesktopOnlyThirds', trackingNamespace, shouldTrackItemEvents = false }) => {
    const [resolution, setResolution] = React.useState(RESOLUTION_MAP.NONE);
    const [isSummaryItemStickTopScreen, setIsSummaryItemStickTopScreen] = React.useState(false);
    const [summaryItemContentHeight, setSummaryItemContentHeight] = React.useState(0);
    const stickyColumnRef = React.useRef(null);
    const ButtonComponent = Button[showMoreButtonVariation];
    const [ColumnsComponent, columnsComponentDefaultProps] = useColumnsComponent(resolution, setResolution);
    const isThresholdViewPort = React.useCallback(() => () => {
        if (window) {
            const media = window.matchMedia(`(min-width: ${summaryItemStickTopThreshold}px)`);
            return Boolean(media?.matches);
        }
        return false;
    }, [summaryItemStickTopThreshold]);
    const [isMobile, setIsMobile] = React.useState(false);
    // Create a reusable impression handler function that ONLY tracks impressions
    const createImpressionHandler = (itemProps) => () => {
        trackNavigationItems('impression', itemProps, dangerousHed, shouldTrackItemEvents, isMobile, itemProps.itemIndex, 1, 'hero');
    };
    // Create a click handler that ONLY fires on actual clicks
    const createClickHandler = (itemProps) => () => {
        trackNavigationItems('click', itemProps, dangerousHed, shouldTrackItemEvents, isMobile, itemProps.itemIndex, 1, 'hero');
    };
    useResizeObserver(() => summaryItemStickTopThreshold &&
        setIsSummaryItemStickTopScreen(isThresholdViewPort()));
    React.useEffect(() => {
        summaryItemStickTopThreshold &&
            setIsSummaryItemStickTopScreen(isThresholdViewPort());
    }, [
        summaryItemStickTopThreshold,
        setIsSummaryItemStickTopScreen,
        isThresholdViewPort
    ]);
    React.useEffect(() => {
        if (!stickyColumnRef.current)
            return;
        const elemSummaryItemContent = stickyColumnRef.current.querySelector('.summary-item__content');
        if (!elemSummaryItemContent)
            return;
        if (typeof ResizeObserver === 'function') {
            const resizeObserver = new ResizeObserver(() => {
                setSummaryItemContentHeight(elemSummaryItemContent?.offsetHeight || 0);
            });
            resizeObserver.observe(elemSummaryItemContent);
            // eslint-disable-next-line consistent-return
            return () => {
                resizeObserver.disconnect();
            };
        }
        setSummaryItemContentHeight(elemSummaryItemContent?.offsetHeight || 0);
    }, [stickyColumnRef]);
    React.useEffect(() => {
        const handleResize = () => {
            if (window.innerWidth < 1024) {
                setIsMobile(true);
            }
            else {
                setIsMobile(false);
            }
        };
        handleResize();
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    });
    if (!hasEnoughItems(items)) {
        return null;
    }
    const SummaryCollageTitle = SectionTitle[sectionTitleVariation];
    const [mainItem, ...listItems] = items;
    const trackingNSHero = trackingNamespace?.hero || dangerousHed;
    const trackingNSSecondary = trackingNamespace?.aside || dangerousHed;
    const heroItemAnalyticsDataAttribute = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNSHero, trackingNamespace?.hero ? '' : 0);
    const SummaryCollageFiftyFiftyWrapper = layout === 'one-column'
        ? SummaryCollageOneColumnWrapper
        : SummaryCollageTwoColumnWrapper;
    const MainWrapper = layout === 'one-column' ? GridWithMargins : Wrapper;
    const summaryItemLayout = isSummaryItemStickTopScreen ? 'two-column' : layout;
    const summaryItemStickyPosition = isSummaryItemStickTopScreen
        ? 'top'
        : stickyPosition;
    const oneColumnProps = {
        columnItemLimit,
        columnItemType,
        columnSummaryItemVariation,
        hasRule: hasRuleColumnItem,
        layout,
        items: listItems,
        shouldEnableBundleComponentAnalytics,
        trackingNamespace: trackingNSSecondary,
        breakpoint,
        hasBackground,
        hasCollapsedAd,
        hideIssueDate,
        isLastElement: true,
        hasDekPaddingBottom,
        shouldHoldImageSpace: true,
        shouldHidePublishDate,
        hideRubricItemSummary,
        hideSourceTagName
    };
    if (isMobile) {
        oneColumnProps.columnItemType = mobileColumnItemType || columnItemType;
        oneColumnProps.columnSummaryItemVariation =
            mobileColumnSummaryItemVariation || columnSummaryItemVariation;
        oneColumnProps.shouldHideDekOnMobileView = shouldHideDekOnMobileView;
        oneColumnProps.imageAlignment = mobImageAlignment;
        oneColumnProps.isLastElement = false;
    }
    if (mainItem && featuredItemHedTag) {
        mainItem.hedTag = featuredItemHedTag;
    }
    return (React.createElement(SummaryCollageFiftyFiftyWrapper, { hasBackground: hasBackground, hasPaddingTop: hasPaddingTop, hasWrapperPadding: hasWrapperPadding, showOneColumnReverse: showOneColumnReverse, breakpoint: breakpoint, hasConsistentSpacing: hasConsistentSpacing },
        dangerousHed &&
            (layout === 'one-column' ? (React.createElement(SummaryCollageFiftyFiftyTitleWrapper, null,
                React.createElement(TitleWrapper, { hasPadding: hasPadding, as: SummaryCollageTitle, dangerousHed: dangerousHed, dangerousDek: dangerousDek }))) : (React.createElement(TitleWrapper, { hasPadding: hasPadding, as: SummaryCollageTitle, dangerousHed: dangerousHed, dangerousDek: dangerousDek }))),
        React.createElement(MainWrapper, { hasDangerousHed: Boolean(dangerousHed), layout: summaryItemLayout, stickyPosition: summaryItemStickyPosition, breakpoint: breakpoint, isSummaryItemStickTopScreen: isSummaryItemStickTopScreen },
            React.createElement(StickyColumn, { ref: stickyColumnRef, layout: summaryItemLayout, stickyPosition: summaryItemStickyPosition, hasPadding: hasFetauredItemStickyColumnPadding, hasLimitedHeightStickyColumn: hasLimitedHeightStickyColumn, isSummaryItemStickTopScreen: isSummaryItemStickTopScreen, summaryItemContentHeight: summaryItemContentHeight },
                React.createElement(FeaturedSummaryItem, { ...mainItem, className: "summary-collage-fifty-fifty-item-0", hasBorderOnMobileAndTabletOnly: true, analyticsDataAttribute: heroItemAnalyticsDataAttribute, featuredSummaryItemVariation: featuredSummaryItemVariation, hasBorder: hasBorder, hasMorePadding: hasFeaturedItemMorePadding, hasRule: hasRule, hideIssueDate: hideIssueDate, hideRubricItemSummary: hideRubricItemSummary, hideSourceTagName: hideSourceTagName, shouldHideItemCount: shouldHideItemCount, shouldHidePublishDate: shouldHidePublishDate, shouldHoldImageSpace: true, shouldUseMediumBreakpoint: true, shouldHandleOverlayForLongHed: true, impressionHandler: createImpressionHandler(mainItem), clickItem: createClickHandler(mainItem), shouldTrackItemEvents: shouldTrackItemEvents })),
            React.createElement(BaseWrap, null, layout === 'one-column' ? (React.createElement(React.Fragment, null,
                React.createElement(OneColumn, { ...oneColumnProps, shouldTrackItemEvents: shouldTrackItemEvents, dangerousHed: dangerousHed, isMobile: isMobile }))) : (React.createElement(React.Fragment, null,
                React.createElement(ColumnsComponent, { layout: layout, items: listItems, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, trackingNamespace: trackingNSSecondary, variation: summaryItemVariation, breakpoint: breakpoint, Ad: Ad, mosaicPosition: mosaicPosition, hasCollapsedAd: hasCollapsedAd, ...columnsComponentDefaultProps }))))),
        hasShowMoreButton && (React.createElement(ShowMoreButtonWrapper, { hasShowMoreButtonBottomMargin: hasShowMoreButtonBottomMargin },
            React.createElement(ButtonComponent, { btnStyle: showMoreBtnStyle, label: customButtonText, ariaLabel: customButtonText, href: showMoreButtonURL, inputKind: "link" })))));
};
SummaryCollageFiftyFifty.propTypes = {
    Ad: PropTypes.func,
    breakpoint: PropTypes.oneOf(sizes),
    columnItemLimit: PropTypes.number,
    columnItemType: PropTypes.string,
    columnSummaryItemVariation: PropTypes.string,
    customButtonText: PropTypes.string,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    featuredItemHedTag: PropTypes.oneOf(['h2', 'h3']),
    featuredSummaryItemVariation: PropTypes.string,
    hasBackground: PropTypes.bool,
    hasBorder: PropTypes.bool,
    hasCollapsedAd: PropTypes.bool,
    hasConsistentSpacing: PropTypes.bool,
    hasDekPaddingBottom: PropTypes.bool,
    hasFeaturedItemMorePadding: PropTypes.bool,
    hasFetauredItemStickyColumnPadding: PropTypes.bool,
    hasLimitedHeightStickyColumn: PropTypes.bool,
    hasPadding: PropTypes.bool,
    hasPaddingTop: PropTypes.bool,
    hasRule: PropTypes.bool,
    hasRuleColumnItem: PropTypes.bool,
    hasShowMoreButton: PropTypes.bool,
    hasShowMoreButtonBottomMargin: PropTypes.bool,
    hasWrapperPadding: PropTypes.bool,
    hideIssueDate: PropTypes.bool,
    hideRubricItemSummary: PropTypes.bool,
    hideSourceTagName: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape(SummaryItem.propTypes)).isRequired,
    layout: PropTypes.oneOf(['one-column', 'two-column']),
    mobileColumnItemType: PropTypes.string,
    mobileColumnSummaryItemVariation: PropTypes.string,
    mobImageAlignment: PropTypes.oneOf(['top', 'default', 'bottom']),
    mosaicPosition: PropTypes.object,
    sectionTitleVariation: PropTypes.string,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldHideDekOnMobileView: PropTypes.bool,
    shouldHideItemCount: PropTypes.bool,
    shouldHidePublishDate: PropTypes.bool,
    shouldTrackItemEvents: PropTypes.bool,
    showMoreBtnStyle: PropTypes.oneOf(['filled', 'outlined', 'text']),
    showMoreButtonURL: PropTypes.string,
    showMoreButtonVariation: PropTypes.oneOf([
        'Primary',
        'Utility',
        'UtilityInverted'
    ]),
    showOneColumnReverse: PropTypes.bool,
    stickyPosition: PropTypes.oneOf(['top', 'bottom']),
    summaryItemStickTopThreshold: PropTypes.number,
    summaryItemVariation: PropTypes.string,
    trackingNamespace: PropTypes.object
};
SummaryCollageFiftyFifty.displayName = 'SummaryCollageFiftyFifty';
module.exports = SummaryCollageFiftyFifty;
//# sourceMappingURL=SummaryCollageFiftyFifty.js.map

/***/ }),

/***/ 2097:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.RESOLUTION_MAP = void 0;
// ENUM of screen sizes
exports.RESOLUTION_MAP = {
    LARGE: 'large',
    SMALL: 'small',
    MEDIUM: 'medium',
    X_SMALL: 'x-small',
    X_LARGE: 'x-large',
    NONE: 'none'
};
//# sourceMappingURL=device-sizes.js.map

/***/ }),

/***/ 22394:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.useColumnsComponent = void 0;
const React = __webpack_require__(96540);
const { RESOLUTION_MAP } = __webpack_require__(2097);
const TwoColumnsWithHorizontalAd = __webpack_require__(21370);
const TwoColumnsWithVerticalAd = __webpack_require__(6272);
const RESOLUTION_VS_COMPONENT = {
    [RESOLUTION_MAP.LARGE]: TwoColumnsWithVerticalAd,
    [RESOLUTION_MAP.MEDIUM]: TwoColumnsWithHorizontalAd,
    [RESOLUTION_MAP.SMALL]: TwoColumnsWithHorizontalAd,
    [RESOLUTION_MAP.X_SMALL]: TwoColumnsWithHorizontalAd,
    [RESOLUTION_MAP.X_LARGE]: TwoColumnsWithVerticalAd,
    [RESOLUTION_MAP.NONE]: () => null
};
const RESOLUTION_VS_DEFAULT_PROP = {
    [RESOLUTION_MAP.LARGE]: { isLastElement: true },
    [RESOLUTION_MAP.MEDIUM]: { isLastElement: false },
    [RESOLUTION_MAP.SMALL]: { isLastElement: false },
    [RESOLUTION_MAP.X_SMALL]: { isLastElement: false },
    [RESOLUTION_MAP.X_LARGE]: { isLastElement: true },
    [RESOLUTION_MAP.NONE]: {}
};
const useColumnsComponent = (resolution, setResolution) => {
    const ColumnsComponent = React.useMemo(() => {
        return RESOLUTION_VS_COMPONENT[resolution];
    }, [resolution]);
    const columnsComponentDefaultProps = React.useMemo(() => {
        return RESOLUTION_VS_DEFAULT_PROP[resolution];
    }, [resolution]);
    React.useEffect(() => {
        const handleResize = () => {
            if (window.innerWidth >= 1024) {
                setResolution(RESOLUTION_MAP.LARGE);
            }
            else if (window.innerWidth < 1024 && window.innerWidth >= 768) {
                setResolution(RESOLUTION_MAP.MEDIUM);
            }
            else {
                setResolution(RESOLUTION_MAP.SMALL);
            }
        };
        handleResize();
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, [setResolution]);
    return [ColumnsComponent, columnsComponentDefaultProps];
};
exports.useColumnsComponent = useColumnsComponent;
//# sourceMappingURL=useColumnsComponent.js.map

/***/ }),

/***/ 77504:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const SummaryCollageFiftyFifty = __webpack_require__(22195);
module.exports = asConfiguredComponent(SummaryCollageFiftyFifty, 'SummaryCollageFiftyFifty');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 36474:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { Container, Column, SecondaryColumnWrapper, OneColumnWrapper } = __webpack_require__(42404);
const SideBySideRatingsCard = __webpack_require__(53743);
const { componentTracking } = __webpack_require__(90090);
const summaryItem = __webpack_require__(74992);
const { trackNavigationItems } = __webpack_require__(91755);
const OneColumn = ({ breakpoint, columnItemLimit, columnItemType, columnSummaryItemVariation, hasRule, hideIssueDate, items, isLastElement, hasDekPaddingBottom, hideRubricItemSummary, hideSourceTagName, trackingNamespace, shouldEnableBundleComponentAnalytics, shouldHideDekOnMobileView, shouldHidePublishDate, imageAlignment, shouldTrackItemEvents = false, dangerousHed, isMobile }) => {
    const slicedItems = items.slice(0, columnItemLimit);
    const ColumnItemComponent = columnItemType === 'SummaryItem'
        ? summaryItem[columnSummaryItemVariation]
        : SideBySideRatingsCard;
    const row = {
        leftColumn: []
    };
    // Create a click handler that ONLY fires on actual clicks
    const createClickHandler = (itemProps, index) => () => {
        trackNavigationItems('click', itemProps, dangerousHed, shouldTrackItemEvents, isMobile, index, items.length, 'secondary');
    };
    // Create a reusable impression handler function that ONLY tracks impressions
    const createImpressionHandler = (itemProps, index) => () => {
        trackNavigationItems('impression', itemProps, dangerousHed, shouldTrackItemEvents, isMobile, index, items.length, 'secondary');
    };
    slicedItems.forEach((item, index) => {
        const position = index + 2;
        const analyticsDataAttribute = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNamespace, index, false);
        row.leftColumn.push(React.createElement(OneColumnWrapper, { key: index, "data-slot": `${index + 2}` },
            React.createElement(ColumnItemComponent, { ...item, itemIndex: index, analyticsDataAttribute: analyticsDataAttribute, key: `one-column-vertical-element-${index + 1}`, className: `summary-collage-fifty-fifty-item-${index + 1}`, hasBorder: !(index + 1 === columnItemLimit), hasRule: hasRule, hideIssueDate: hideIssueDate, position: position, hedTag: "h3", hasDekPaddingBottom: hasDekPaddingBottom, shouldHoldImageSpace: true, shouldHideDekOnMobileView: shouldHideDekOnMobileView, shouldHidePublishDate: shouldHidePublishDate, imageAlignment: imageAlignment, hideRubricItemSummary: hideRubricItemSummary, hideSourceTagName: hideSourceTagName, shouldTrackItemEvents: shouldTrackItemEvents, impressionHandler: createImpressionHandler(item, index), clickItem: createClickHandler(item, index) })));
    });
    return (React.createElement(Container, { breakpoint: breakpoint, isLastElement: isLastElement },
        React.createElement(SecondaryColumnWrapper, null, Object.values(row).map((column, index) => (React.createElement(Column, { key: `one-columns-vertical-column-${index + 1}` }, [...column]))))));
};
OneColumn.displayName = 'OneColumn';
OneColumn.propTypes = {
    breakpoint: PropTypes.string,
    columnItemLimit: PropTypes.number,
    columnItemType: PropTypes.string,
    columnSummaryItemVariation: PropTypes.string,
    dangerousHed: PropTypes.string,
    hasDekPaddingBottom: PropTypes.bool,
    hasRule: PropTypes.bool,
    hideIssueDate: PropTypes.bool,
    hideRubricItemSummary: PropTypes.bool,
    hideSourceTagName: PropTypes.bool,
    imageAlignment: PropTypes.string,
    isLastElement: PropTypes.bool,
    isMobile: PropTypes.bool,
    items: PropTypes.array,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldHideDekOnMobileView: PropTypes.bool,
    shouldHidePublishDate: PropTypes.bool,
    shouldTrackItemEvents: PropTypes.bool,
    trackingNamespace: PropTypes.string,
    variation: PropTypes.string
};
module.exports = OneColumn;
//# sourceMappingURL=OneColumn.js.map

/***/ }),

/***/ 21370:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const get = __webpack_require__(58156);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { PaymentGateway } = __webpack_require__(92807);
const { AdWrapper, Container, Column, SecondaryColumnWrapper } = __webpack_require__(42404);
const { connector } = __webpack_require__(57744);
const SummaryItem = __webpack_require__(74992);
const { useOnAdFilled } = __webpack_require__(1184);
const { componentTracking } = __webpack_require__(90090);
const { TwoColumnsWithHorizontalAdMosaicWrapper } = __webpack_require__(50904);
const AMOUNT_OF_ITEMS_PER_ROW = 4;
const insertElementIntoRow = (element, row, index) => {
    if (index % 2 === 0) {
        row.leftColumn.push(element);
    }
    else {
        row.rightColumn.push(element);
    }
};
const hasRowElements = (row) => Object.values(row).some((column) => column?.length);
const TwoColumnsWithHorizontalAd = ({ Ad, breakpoint, adPosition, componentConfig, hasCollapsedAd, items, shouldEnableBundleComponentAnalytics, trackingNamespace, variation, mosaicPosition }) => {
    const { horizontalPosition } = mosaicPosition || {};
    const SummaryItemComponent = SummaryItem[variation];
    const firstRow = {
        leftColumn: [],
        rightColumn: []
    };
    const thirdRow = {
        leftColumn: [],
        rightColumn: []
    };
    const [showMidContentAd, , onMidContentFilled] = useOnAdFilled('mid-content-ad');
    const [showMosaicAd, , onMosaicAdFilled] = useOnAdFilled('moasic-ad');
    const hasBorderOnMobileAndTabletOnly = get(componentConfig, 'SummaryItem.settings.hasBorderOnMobileAndTabletOnly', false);
    const mosaicAdWrapper = (React.createElement(TwoColumnsWithHorizontalAdMosaicWrapper, { hasMobileOnlyBorder: hasBorderOnMobileAndTabletOnly, key: `two-columns-vertical-native-ad-${items.length + 1}` },
        React.createElement(AdWrapper, { isHidden: !showMosaicAd },
            React.createElement(PaymentGateway, { group: "ads" },
                React.createElement(Ad, { position: "mosaic", onFilled: onMosaicAdFilled })))));
    // edge case when mosaic position is greater than the number of items
    let _horizontalPosition = horizontalPosition;
    if (horizontalPosition > items.length) {
        _horizontalPosition = items.length;
    }
    const insertMosaicAd = (index) => {
        if (index === _horizontalPosition - 1) {
            const rowToInsert = index < AMOUNT_OF_ITEMS_PER_ROW ? firstRow : thirdRow;
            let colToInsertAd;
            if (index < AMOUNT_OF_ITEMS_PER_ROW) {
                colToInsertAd =
                    _horizontalPosition % 2 === 0
                        ? rowToInsert.rightColumn
                        : rowToInsert.leftColumn;
            }
            else {
                colToInsertAd =
                    _horizontalPosition % 2 === 0
                        ? rowToInsert.leftColumn
                        : rowToInsert.rightColumn;
            }
            colToInsertAd.push(mosaicAdWrapper);
        }
    };
    items.forEach((item, index) => {
        const analyticsDataAttribute = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNamespace, index);
        const secondarySummaryItem = (React.createElement(SummaryItemComponent, { ...item, analyticsDataAttribute: analyticsDataAttribute, key: `two-columns-horizontal-element-${index + 1}`, className: `summary-collage-fifty-fifty-item-${index + 1}`, hedTag: "h3" }));
        if (index < AMOUNT_OF_ITEMS_PER_ROW) {
            insertElementIntoRow(secondarySummaryItem, firstRow, index);
        }
        else {
            insertElementIntoRow(secondarySummaryItem, thirdRow, index);
        }
        insertMosaicAd(index);
    });
    return (React.createElement(Container, { breakpoint: breakpoint },
        React.createElement(SecondaryColumnWrapper, null, Object.values(firstRow).map((column, index) => (React.createElement(Column, { key: `two-columns-horizontal-first-column-${index + 1}` }, [...column])))),
        React.createElement(AdWrapper, { isHidden: hasCollapsedAd ?? !showMidContentAd },
            React.createElement(PaymentGateway, { group: "ads" },
                React.createElement(Ad, { position: adPosition || 'mid-content', onFilled: onMidContentFilled, shouldDisplayLabel: true }))),
        hasRowElements(thirdRow) && (React.createElement(SecondaryColumnWrapper, { hasTopSpacing: true }, Object.values(thirdRow).map((column, index) => (React.createElement(Column, { key: `two-columns-horizontal-second-column-${index + 1}` }, [...column])))))));
};
TwoColumnsWithHorizontalAd.displayName = 'TwoColumnsWithHorizontalAd';
TwoColumnsWithHorizontalAd.propTypes = {
    Ad: PropTypes.func,
    adPosition: PropTypes.string,
    breakpoint: PropTypes.string,
    componentConfig: PropTypes.object,
    hasCollapsedAd: PropTypes.bool,
    items: PropTypes.array,
    mosaicPosition: PropTypes.object,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    trackingNamespace: PropTypes.string,
    variation: PropTypes.string
};
module.exports = connector(TwoColumnsWithHorizontalAd, {
    keysToPluck: ['componentConfig']
});
//# sourceMappingURL=TwoColumnsWithHorizontalAd.js.map

/***/ }),

/***/ 6272:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { AdWrapper, Container, Column, SecondaryColumnWrapper } = __webpack_require__(42404);
const { PaymentGateway } = __webpack_require__(92807);
const SummaryItem = __webpack_require__(74992);
const { useOnAdFilled } = __webpack_require__(1184);
const { componentTracking } = __webpack_require__(90090);
const AD_POSITION = 3;
const TwoColumnsWithVerticalAd = ({ Ad, breakpoint, hasCollapsedAd, items, isLastElement, trackingNamespace, shouldEnableBundleComponentAnalytics, variation, mosaicPosition }) => {
    const { verticalPosition } = mosaicPosition || {};
    const SummaryItemComponent = SummaryItem[variation];
    const [showRailAd, , onRailAdFilled] = useOnAdFilled('rail-ad');
    const [showMosaicAd, , onMosaicAdFilled] = useOnAdFilled('moasic-ad');
    const row = {
        leftColumn: [],
        rightColumn: []
    };
    // edge case when mosaic position is greater than the number of items
    let _verticalPosition = verticalPosition;
    if (verticalPosition && verticalPosition > items.length) {
        _verticalPosition = items.length;
    }
    const MosaicAdWrapper = (key) => {
        return (React.createElement(AdWrapper, { isHidden: hasCollapsedAd ?? !showMosaicAd, key: `two-columns-vertical-native-ad-${key}` },
            React.createElement(PaymentGateway, { group: "ads" },
                React.createElement(Ad, { position: "mosaic", onFilled: onMosaicAdFilled }))));
    };
    items.forEach((item, index) => {
        const position = index + 2;
        const analyticsDataAttribute = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNamespace, index);
        let column = [];
        const left = row.leftColumn.length;
        let right = row.rightColumn.length;
        if (position > AD_POSITION && hasCollapsedAd) {
            // subtract ad from right col total if not rendered
            right -= 1;
        }
        if (left <= right) {
            column = row.leftColumn;
        }
        else {
            column = row.rightColumn;
        }
        column.push(React.createElement(SummaryItemComponent, { ...item, analyticsDataAttribute: analyticsDataAttribute, key: `two-columns-vertical-element-${index + 1}`, className: `summary-collage-fifty-fifty-item-${index + 1}`, position: position, hedTag: "h3" }));
        if (position === AD_POSITION) {
            row.rightColumn.push(React.createElement(AdWrapper, { isHidden: hasCollapsedAd ?? !showRailAd, key: `two-columns-vertical-rail-ad-${index + 1}` },
                React.createElement(PaymentGateway, { group: "ads" },
                    React.createElement(Ad, { position: "rail", onFilled: onRailAdFilled }))));
        }
        if (_verticalPosition && index === _verticalPosition - 1) {
            column.push(MosaicAdWrapper(index + 1));
        }
    });
    return (React.createElement(Container, { breakpoint: breakpoint, isLastElement: isLastElement },
        React.createElement(SecondaryColumnWrapper, null, Object.values(row).map((column, index) => (React.createElement(Column, { key: `two-columns-vertical-column-${index + 1}` }, [...column]))))));
};
TwoColumnsWithVerticalAd.displayName = 'TwoColumnsWithVerticalAd';
TwoColumnsWithVerticalAd.propTypes = {
    Ad: PropTypes.func,
    breakpoint: PropTypes.string,
    hasCollapsedAd: PropTypes.bool,
    hasTagLabel: PropTypes.bool,
    isLastElement: PropTypes.bool,
    items: PropTypes.array,
    mosaicPosition: PropTypes.object,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    trackingNamespace: PropTypes.string,
    variation: PropTypes.string
};
module.exports = TwoColumnsWithVerticalAd;
//# sourceMappingURL=TwoColumnsWithVerticalAd.js.map

/***/ }),

/***/ 50904:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing } = __webpack_require__(26865);
const { applyMobileOnlyBorder } = __webpack_require__(6528);
const TwoColumnsWithHorizontalAdMosaicWrapper = styled.div.withConfig({
    displayName: 'TwoColumnsWithHorizontalAdMosaicWrapper'
}) `
  margin-bottom: ${calculateSpacing(2)};
  ${applyMobileOnlyBorder}
`;
module.exports = {
    TwoColumnsWithHorizontalAdMosaicWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 42404:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { default: styled, css } = __webpack_require__(92168);
const { maxThresholds, minThresholds } = __webpack_require__(99906);
const { BREAKPOINTS } = __webpack_require__(96472);
const { maxScreen, minScreen, calculateSpacing, getTypographyStyles, getColorToken, getDecoration } = __webpack_require__(26865);
const { getSectionSpacingStyling } = __webpack_require__(16800);
const { applyGridSpacing, cssVariablesGrid } = __webpack_require__(1123);
const { GridItem } = __webpack_require__(40653);
const Grid = __webpack_require__(86659);
const SummaryItem = __webpack_require__(74992);
const FeatureRatingsCard = __webpack_require__(94258);
const { OverlaySummaryItemHed, OverlaySummaryItemResponsiveAsset, OverlaySummaryItemWrapper } = __webpack_require__(3265);
const { ContentWrapper, SideBySideRatingsCardWrapper } = __webpack_require__(78897);
const { SectionTitleRoot } = __webpack_require__(33500);
const { ClampContent } = __webpack_require__(68370);
const { SummaryItemWrapper, SummaryItemContent, SummaryItemDek } = __webpack_require__(68116);
const { SummaryItemImageLink } = __webpack_require__(14207);
const { SummaryItemHedBase } = __webpack_require__(36211);
const { ResponsiveImagePicture } = __webpack_require__(7228);
const SummaryCollageTwoColumnWrapper = styled(Grid.WithMargins).withConfig({
    displayName: 'SummaryCollageTwoColumnWrapper'
}) `
  padding: ${({ hasConsistentSpacing, theme }) => {
    return hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px'
        ? '0'
        : calculateSpacing(8);
}}
    0;

  && {
    grid-row-gap: 0;
  }

  > ${GridItem} {
    grid-column: 1/-1;
  }

  .summary-item.summary-item {
    margin-bottom: ${calculateSpacing(2)};
  }

  @media (max-width: ${minThresholds.lg}px) {
    .summary-item__content.summary-item__content {
      padding-bottom: 0;
    }
  }
  ${({ hasPaddingTop }) => {
    if (!hasPaddingTop) {
        return 'padding-top: 0';
    }
    return '';
}}
`;
const OneColumnWrapper = styled.div.withConfig({
    displayName: 'OneColumnWrapper'
}) `
  margin-bottom: ${calculateSpacing(4)};

  @media (min-width: ${minThresholds.xl}px) {
    width: 100%;
  }
`;
const Title = styled.span.withConfig({ displayName: 'Title' }) `
  margin-bottom: ${calculateSpacing(2)};
`;
const summaryCollageOneColumnWrapperPadding = (hasPadding) => {
    if (hasPadding) {
        return `
      padding: ${({ hasConsistentSpacing, theme }) => {
            return hasConsistentSpacing &&
                getSectionSpacingStyling(theme, 'gap-md') !== '0px'
                ? '0'
                : calculateSpacing(4);
        }}; 0;

      ${minScreen(BREAKPOINTS.md)} {
        padding: ${({ hasConsistentSpacing, theme }) => {
            return hasConsistentSpacing &&
                getSectionSpacingStyling(theme, 'gap-md') !== '0px'
                ? '0'
                : calculateSpacing(8);
        }}; 0;
      }
    `;
    }
    return 'padding: 0;';
};
const StickyColumn = styled.div.withConfig({
    displayName: 'StickyColumn'
}) `
  width: 100%;
  @media (max-width: ${maxThresholds.lg}px) {
    position: relative;
  }

  ${({ stickyPosition = 'top', layout = 'two-column', hasLimitedHeightStickyColumn = false, isSummaryItemStickTopScreen = false }) => layout !== 'one-column' &&
    stickyPosition === 'top' &&
    css `
      @media (min-width: ${minThresholds.xl}px) {
        display: flex;
        position: sticky;
        max-height: 100vh;
        @media (max-height: 850px) {
          ${hasLimitedHeightStickyColumn && `max-height: 100%;`}
        }
        margin-bottom: auto;
        top: ${isSummaryItemStickTopScreen ? calculateSpacing(8) : 0};
      }
    `}

  ${({ layout = '' }) => layout !== 'one-column' &&
    `
    @media (max-width: ${maxThresholds.lg}px) {
      width: 100vw;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
    }
  `}

  ${({ layout = '', hasPadding }) => layout === 'two-column' &&
    hasPadding &&
    `
    @media (max-width: ${maxThresholds.lg}px) {
      padding-left: ${calculateSpacing(3)};
      padding-right: ${calculateSpacing(3)};
    }
  `}

  ${OverlaySummaryItemWrapper} {
    width: 100%;
  }
  ${SummaryItemWrapper} {
    width: 100%;
  }
  ${OverlaySummaryItemResponsiveAsset} {
    height: auto;
  }

  ${({ isSummaryItemStickTopScreen, summaryItemContentHeight }) => isSummaryItemStickTopScreen &&
    css `
      ${SummaryItemImageLink} {
        margin-right: auto;
        margin-left: auto;
        width: fit-content;
        ${ResponsiveImagePicture} {
          img {
            object-fit: contain;
            max-height: calc(
              100vh - ${calculateSpacing(8)} - ${summaryItemContentHeight}px -
                ${calculateSpacing(2)}
            );
          }
        }
      }
      ${SummaryItemContent} {
        padding-top: ${calculateSpacing(4)};
        ${SummaryItemHedBase} {
          margin-bottom: ${calculateSpacing(1)};
        }
      }
    `}
`;
const SummaryCollageOneColumnWrapper = styled.div.withConfig({
    displayName: 'SummaryCollageOneColumnWrapper'
}) `
  --border-width: ${({ theme }) => getDecoration(theme, 'borderWidth')};
  ${({ hasWrapperPadding }) => summaryCollageOneColumnWrapperPadding(hasWrapperPadding)}

  ${({ hasBackground }) => hasBackground &&
    css `
      background-color: ${getColorToken('colors.discovery.body.light.background')};
    `}

  ${({ showOneColumnReverse, breakpoint }) => showOneColumnReverse &&
    css `
      padding: 0;
      ${SectionTitleRoot} {
        border-top: var(--border-width, 1px) solid
          ${getColorToken('colors.discovery.body.white.accent')};
        border-bottom: var(--border-width, 1px) solid
          ${getColorToken('colors.discovery.body.white.accent')};
      }
      ${SideBySideRatingsCardWrapper} {
        flex-direction: row-reverse;
      }
      ${ContentWrapper} {
        flex-grow: 1;
        padding-right: ${calculateSpacing(4)};
        padding-left: 0;
        ${ClampContent} {
          -webkit-line-clamp: unset;
        }
      }

      ${OneColumnWrapper} {
        margin-bottom: ${calculateSpacing(2)};
        border-bottom: var(--border-width, 1px) solid
          ${getColorToken('colors.discovery.body.white.border')};
        padding-bottom: ${calculateSpacing(2)};

        &:last-child {
          border-bottom: 0;
        }
        ${maxScreen(`${maxThresholds[breakpoint]}px`)} {
          margin-top: ${calculateSpacing(1)};
        }
      }

      ${StickyColumn} {
        ${SummaryItemWrapper} {
          ${maxScreen(`${maxThresholds[breakpoint]}px`)} {
            border-bottom: var(--border-width, 1px) solid
              ${getColorToken('colors.discovery.body.white.border')};
            padding-bottom: ${calculateSpacing(3)};
          }
        }
      }

      ${SummaryItemWrapper} {
        ${SummaryItemContent} {
          padding-bottom: 0;
        }

        ${maxScreen(`${maxThresholds[breakpoint]}px`)} {
          border: none;
          padding-bottom: 0;

          ${SummaryItemDek} {
            text-align: left;
          }
        }
      }

      ${Title} {
        border-top-color: ${getColorToken('colors.discovery.body.white.accent')};
        border-bottom-color: ${getColorToken('colors.discovery.body.white.accent')};
        ${maxScreen(`${maxThresholds.lg}px`)} {
          margin-bottom: ${calculateSpacing(3)};
        }
      }
    `}
`;
const Wrapper = styled(Grid.EvenAny).withConfig({ displayName: 'Wrapper' }) `
  && {
    grid-auto-flow: row;

    @media (min-width: ${minThresholds.xl}px) {
      grid-auto-flow: column;
      grid-template-columns: minmax(0, 1fr) 50%;
    }
  }
`;
const GridWithMargins = styled(Grid.WithMargins).withConfig({
    displayName: 'GridWithMargins'
}) `
  grid-column: 1/-1;

  ${({ stickyPosition, layout, isSummaryItemStickTopScreen }) => layout === 'one-column' &&
    stickyPosition === 'bottom' &&
    css `
      @media (min-width: ${minThresholds.xl}px) and (orientation: portrait) {
        & > div:nth-child(1) {
          display: flex;
          position: sticky;
          top: 0;
          margin-bottom: auto;
        }
      }
      @media (min-width: ${minThresholds.xl}px) and (orientation: landscape) {
        & > div:nth-child(1) {
          display: flex;
          position: sticky;
          @media (max-height: 1099px) {
            bottom: 0;
            margin-top: auto;
          }
          @media (min-height: 1100px) {
            top: ${isSummaryItemStickTopScreen ? calculateSpacing(8) : 0};
            margin-bottom: auto;
          }
        }
      }
    `}

  ${({ hasDangerousHed }) => hasDangerousHed &&
    `&& {
      margin-top: var(--grid-gap);
    }
  `};

  ${({ breakpoint }) => {
    return `&&& {
      grid-auto-flow: row;
  
      @media (max-width: ${maxThresholds[breakpoint]}px) {
        grid-template-columns: 1fr;
      }
  
      @media (min-width: ${maxThresholds[breakpoint] + 1}px) {
        grid-auto-flow: column;
        grid-template-columns: minmax(0, 1fr) 50%;
      }
    }
  `;
}}
`;
const SummaryCollageFiftyFiftyTitleWrapper = styled.div.withConfig({
    displayName: 'SummaryCollageFiftyFiftyTitleWrapper'
}) `
  ${cssVariablesGrid()}
  margin: 0 auto;
  ${applyGridSpacing('padding')}
  max-width: ${BREAKPOINTS.xxl};
`;
const SecondaryColumnWrapper = styled(Grid.EvenAny).withConfig({
    displayName: 'SecondaryColumnWrapper'
}) `
  width: 100%;

  && {
    ${({ hasTopSpacing }) => hasTopSpacing &&
    `
      margin-top: ${calculateSpacing(4)};
  `}
  }

  > ${GridItem} {
    grid-gap: ${calculateSpacing(2)};
    grid-auto-flow: row;
  }

  @media (min-width: ${minThresholds.lg}px) {
    width: 80%;
  }

  @media (min-width: ${minThresholds.xl}px) {
    width: 100%;
  }
`;
const Column = styled.div.withConfig({ displayName: 'Column' }) `
  margin-bottom: auto;
`;
const Container = styled(Column).withConfig({ displayName: 'Container' }) `
  display: none;

  ${({ isLastElement, breakpoint }) => !isLastElement &&
    `
    @media (max-width: ${maxThresholds[breakpoint]}px) {
      display: block;
    }

    @media (max-width: ${maxThresholds.md}px) {
      ${SecondaryColumnWrapper} {
        row-gap: 0;
      }
    }
  `}

  ${({ isLastElement, breakpoint }) => isLastElement &&
    `
    @media (min-width: ${maxThresholds[breakpoint] + 1}px) {
      display: block;
    }
  `}
`;
const AdWrapper = styled.div.withConfig({ displayName: 'AdWrapper' }) `
  max-width: 100%;

  @media (min-width: ${minThresholds.xl}px) {
    margin-bottom: ${calculateSpacing(5)};
  }

  ${({ isHidden }) => isHidden &&
    `
    height: 0;
    padding: 0;
    margin: 0;
    visibility: hidden;
  `}
`;
Column.displayName = 'Column';
const addMarginToItem = () => {
    return `
  @media (min-width: ${BREAKPOINTS.lg}) {
    padding: 0 ${calculateSpacing(5)};
  }

  @media (min-width: ${BREAKPOINTS.xl}) {
    padding: 0 ${calculateSpacing(10)};
  }
  
  @media (min-width: ${BREAKPOINTS.xxl}) {
    padding: 0 ${calculateSpacing(15)};
  }
  `;
};
const FeaturedSummaryItem = styled(({ featuredSummaryItemVariation, contentType, ...rest }) => {
    const components = {
        recipe: FeatureRatingsCard,
        review: SummaryItem[featuredSummaryItemVariation],
        article: SummaryItem[featuredSummaryItemVariation],
        gallery: SummaryItem[featuredSummaryItemVariation]
    };
    const SummaryComponent = components[contentType] || SummaryItem[featuredSummaryItemVariation];
    return React.createElement(SummaryComponent, { ...rest, contentType: contentType });
}).withConfig({ displayName: 'FeaturedSummaryItem' }) `
  ${OverlaySummaryItemHed} {
    ${getTypographyStyles('typography.definitions.discovery.hed-break-out')}
  }

  ${({ hasMorePadding }) => hasMorePadding && addMarginToItem()};
`;
const showMoreButtonWrapperMargin = (hasMarginBottom) => {
    const bottomMargin = hasMarginBottom ? 8 : 0;
    return `
    margin: ${calculateSpacing(4)} auto ${calculateSpacing(bottomMargin)};
    @media (min-width: ${BREAKPOINTS.lg}) {
      margin: ${calculateSpacing(3)} auto ${calculateSpacing(bottomMargin)};
    }
  `;
};
const ShowMoreButtonWrapper = styled.div.withConfig({
    displayName: 'ShowMoreButtonWrapper'
}) `
  display: grid;
  max-width: fit-content;
  place-items: center;
  ${({ hasShowMoreButtonBottomMargin }) => showMoreButtonWrapperMargin(hasShowMoreButtonBottomMargin)}
`;
module.exports = {
    SummaryCollageTwoColumnWrapper,
    SummaryCollageOneColumnWrapper,
    Wrapper,
    GridWithMargins,
    SummaryCollageFiftyFiftyTitleWrapper,
    Title,
    StickyColumn,
    SecondaryColumnWrapper,
    OneColumnWrapper,
    Column,
    Container,
    AdWrapper,
    FeaturedSummaryItem,
    ShowMoreButtonWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 91755:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { trackNavigationEvent, extractStrategyFromURL } = __webpack_require__(14307);
// Removes HTML tags from a string
const removeHtmlTags = (inputString) => {
    if (!inputString)
        return '';
    return inputString.replace(/<\/?[^>]+(>|$)/g, '');
};
// Store tracked items to prevent duplicates
const trackedItems = new Set();
/**
 * Tracks item events for summary collage fifty-fifty components
 * Ensures each event type is only fired once per item
 * @param {string} eventType - Type of event (impression, click)
 * @param {object} item - The content item being tracked
 * @param {string} dangerousHed - Section heading text
 * @param {boolean} shouldTrackItemEvents - Whether to track the event
 * @param {boolean} isMobile - Whether the device is mobile
 * @param {number} index - Index of the item in the list (default: 0)
 * @param {number} totalIndex - Total number of items in the list (default: 1)
 * @param {string} placement - Position of the item in the layout (e.g., 'hero', 'secondary') (default: 'hero')
 */
const trackNavigationItems = (eventType, item, dangerousHed, shouldTrackItemEvents, isMobile, index = 0, totalIndex = 1, placement = 'hero') => {
    if (!shouldTrackItemEvents)
        return;
    // Create a unique tracking key for this item and event
    const trackingKey = `${item.copilotID || item.url}-${eventType}`;
    // Skip if already tracked
    if (trackedItems.has(trackingKey))
        return;
    // Mark as tracked
    trackedItems.add(trackingKey);
    const eventData = {
        type: eventType,
        label: dangerousHed,
        subject: 'summary_collage_fifty_fifty',
        items: [
            {
                content_title: removeHtmlTags(item.dangerousHed),
                content_id: item.copilotID,
                content_type: item.contentType,
                content_url: new URL(item.url, window.location.origin)
            }
        ],
        ...(extractStrategyFromURL(item.url) && {
            strategy: extractStrategyFromURL(item.url)
        }),
        placement,
        index,
        total_index: totalIndex,
        subject_version: isMobile ? 'mobile_dense' : 'default'
    };
    trackNavigationEvent(eventData);
};
module.exports = {
    trackNavigationItems
};
//# sourceMappingURL=navigationTracking.js.map

/***/ }),

/***/ 23310:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useEffect, useState } = __webpack_require__(96540);
const throttle = __webpack_require__(7350);
const { componentTracking } = __webpack_require__(90090);
const BaseSectionTitle = __webpack_require__(35864);
const SummaryItem = __webpack_require__(74992);
const Button = __webpack_require__(73730);
const ArrowIcon = __webpack_require__(42361);
const { TrackComponentChannel } = __webpack_require__(78788);
const { SummaryCollageFiveBGWrapper, SummaryCollageFiveFooterWrapper, SummaryCollageFiveSectionTitle, SummaryCollageFiveItem, SummaryCollageFiveWrapper } = __webpack_require__(71053);
const { asConfiguredComponent } = __webpack_require__(12892);
const StackedRatingsCard = __webpack_require__(68712);
const StoryUnit = __webpack_require__(75989);
const { isDesktopBrowser } = __webpack_require__(72362);
const { trackNavigationEvent } = __webpack_require__(14307);
/**
 * SummaryCollageFive component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.dangerousHed] - Optional string (possibly HTML) to use as the title
 * @param {object} [props.featuredFooter] - Optional data {link and label} for SummaryList footer
 * @param {string} [props.dangerousDek] - Optional dek
 * @param {Bool} [props.hasBylineBeforeDek] - An optional prop to display byline before dek
 * @param {Bool} [props.hasLightBackground] - An optional prop to have light background
 * @param {Bool} [props.hasMinimalSummaryItem] - An optional prop to make Summary Items only show heds with 16:9 secondary photos, and a 4:3 main photo
 * @param {Bool} [props.hasSectionTitleDekColor] - Optional prop to change the color of dek
 * @param {Bool} [props.hasTopPadding] - Optional prop to add top padding
 * @param {Bool} [props.hideRubricItemSummary] - Show or hide rubrics in summary items
 * @param {Bool} [props.hideVerticalBorders] - Optional prop to hide vertical borders
 * @param {Array}  props.items - Array of collage items
 * @param {string} [props.recircRiver] - Recirc River string prop
 * @param {string} [props.sectionTitleVariation] - Optional prop to control section title variation, defaults to `LineAboveLineBelowTextCenter`
 * @param {Bool} [props.shouldAlignDekAtBottom] - Optional prop to align dek at bottom of the container
 * @param {string} [props.shouldEnableBundleComponentAnalytics] - Optional feature flag to append data-section-title attribute for analytics
 * @param {Bool} [props.shouldHideBylines] - Should hide bylines
 * @param {Bool} [props.shouldHideMetadataSecondary] - Optional. Show or hide metadataSecondary in SummaryItem
 * @param {Bool} [props.shouldMakePrimaryCardSticky] - Optional. Show or hide metadataSecondary in SummaryItem
 * @param {Bool} [props.shouldShowDek] - Optional. Prop to show dangerous dek
 * @param {Bool} [props.shouldShowStackedRatingsCard] - Optional flag to show StackedRatingsCard instead of SummaryItem
 * @param {Bool} [props.shouldTitleHasTopSpacing] - Optional flag to have top spacing above the title
 * @param {Bool} [props.shouldTrackSnowplowEvent] - Optional flag to track snowplow events
 * @param {Bool} [props.shouldUseFeaturedFooter] - Optional flag to use featuredTitleAndFooter. Pass hedWithLink prop using componentConfig VersoFeatures.shouldParseBundleHed
 * @param {object} [props.shouldUseAlternativeStyle] - Optional boolean to enable alternative styles
 * @param {string} [props.summaryItemRubricVariation] - Optional prop to set the variation for the rubric for the summary item
 * @param {string} [props.summaryItemVariation] - Optional prop to control summary item variation, defaults to `TextBelowLeft`
 * @param {object} [props.trackingNamespace] - Optional override the base namespace of data-section-title for component tracking
 * @param {object} [props.variations] - Variation properties used in rendering the component
 * @param {bool} [props.variations.shouldDisplayItemsBelow] - Optional boolean to render smaller summary items in a row below
 * @param {bool} [props.variations.shouldShowSubHed] - Optional boolean to display sub hed
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 * @param {boolean} [props.hasConsistentSpacing] - defines whether the consistent spacing is needed or not
 * @returns {ReactElement} <section>
 */
const SummaryCollageFive = ({ className, dangerousDek = '', dangerousHed, featuredFooter, hasBylineBeforeDek = false, hasConsistentSpacing = false, hideRubricItemSummary = false, hideVerticalBorders = false, hasLightBackground = false, hasMinimalSummaryItem = false, hasSectionTitleDekColor = false, hasTopPadding = false, items, recircRiver, sectionTitleVariation = 'LineAboveLineBelowTextCenter', shouldAlignDekAtBottom = false, shouldHideBylines = false, shouldHideMetadataSecondary = false, shouldMakePrimaryCardSticky = false, shouldEnableBundleComponentAnalytics, shouldShowDek = false, shouldShowStackedRatingsCard = false, shouldTitleHasTopSpacing, shouldTrackSnowplowEvent = false, shouldUseFeaturedFooter, shouldUseAlternativeStyle = false, summaryItemRubricVariation, summaryItemVariation = 'TextBelowLeft', trackingNamespace, variations = {
    shouldDisplayItemsBelow: false,
    shouldShowSubHed: false,
    shouldEnableDenseMobile: false
}, variationName }) => {
    const [headerHeight, setHeaderHeight] = useState(0);
    const handleScroll = () => {
        const headerElement = document.querySelector('.site-navigation');
        let headerValue = 0;
        if (headerElement)
            ({ offsetHeight: headerValue } = headerElement);
        setHeaderHeight(headerValue / 8);
    };
    useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SummaryCollageFive',
            variation: variationName
        });
    }, [variationName]);
    useEffect(() => {
        if (shouldMakePrimaryCardSticky) {
            const throttledScroll = throttle(handleScroll, 150);
            window.addEventListener('scroll', throttledScroll);
            return () => {
                window.removeEventListener('scroll', throttledScroll);
            };
        }
        return undefined;
    });
    const isMobile = !isDesktopBrowser();
    if (items.length < 5) {
        return null;
    }
    const { shouldDisplayItemsBelow, shouldShowSubHed, shouldEnableDenseMobile } = variations;
    const minimalSummaryItemProps = hasMinimalSummaryItem
        ? {
            shouldHideBylines: true,
            hideRubricItemSummary: true,
            shouldHidePublishDate: true,
            shouldHideMetadataSecondary: true,
            shouldHideIcon: true,
            shouldHideDangerousDek: true,
            hasUnderlineHed: false,
            hasTighterVerticalSpacing: true
        }
        : {};
    const SectionTitleComponent = BaseSectionTitle[sectionTitleVariation] || BaseSectionTitle;
    // Make sure there is no more that 5 items in the collage
    const slicedItems = items.slice(0, 5);
    const checkFooterEligible = () => shouldUseFeaturedFooter &&
        featuredFooter &&
        featuredFooter.link &&
        featuredFooter.label;
    const DangerousHedProp = dangerousHed;
    let analyticsIndex = 0;
    let stackedRatingsCardProps = {};
    if (shouldShowStackedRatingsCard) {
        stackedRatingsCardProps = {
            hasIcon: true,
            hasRoundedBorder: false,
            hideRubric: false,
            maxDekLines: 0,
            maxHedLines: 0
        };
    }
    const trackSnowplowEvent = (eventType, item, index, placement, totalItems) => {
        if (shouldTrackSnowplowEvent) {
            trackNavigationEvent({
                type: eventType,
                subject: 'summary_collage_five',
                items: [
                    {
                        content_title: item.dangerousHed,
                        content_type: item.contentType,
                        content_id: item.copilotID,
                        content_url: item.url
                    }
                ],
                index,
                total_index: totalItems || items.length,
                placement,
                subject_version: isMobile && shouldEnableDenseMobile ? 'mobile_dense' : 'default'
            });
        }
    };
    return (React.createElement(SummaryCollageFiveBGWrapper, { hasLightBackground: hasLightBackground },
        React.createElement(SummaryCollageFiveWrapper, { className: classnames('summary-collage-five', className), dangerousHed: dangerousHed, hasMinimalSummaryItem: hasMinimalSummaryItem, hasTopPadding: hasTopPadding, hideVerticalBorders: hideVerticalBorders, shouldDisplayItemsBelow: shouldDisplayItemsBelow, shouldUseAlternativeStyle: shouldUseAlternativeStyle, shouldHideBottomMargin: true, hasConsistentSpacing: hasConsistentSpacing },
            React.createElement(SummaryCollageFiveSectionTitle, { as: SectionTitleComponent, dangerousHed: dangerousHed, hedTag: "h2", className: "summary-collage-five__title", dangerousSubHed: shouldShowSubHed && dangerousDek ? dangerousDek : undefined, dangerousDek: shouldShowDek && dangerousDek ? dangerousDek : undefined, hasSectionTitleDekColor: hasSectionTitleDekColor, hasTopSpacing: shouldTitleHasTopSpacing, shouldUseAlternativeStyle: shouldUseAlternativeStyle }),
            slicedItems
                .filter((item) => item.image)
                .map((item, index) => {
                const summaryItemVariationRows = index === 0
                    ? 'SideBySideTwoThirdsImageLeft'
                    : 'SideBySideThirdsImageRightHedOnly';
                const summaryItemVariationFinal = shouldDisplayItemsBelow
                    ? summaryItemVariationRows
                    : summaryItemVariation;
                const SummaryItemComponent = SummaryItem[summaryItemVariationFinal];
                const Component = shouldShowStackedRatingsCard
                    ? StackedRatingsCard
                    : SummaryItemComponent;
                const analyticsDataAttribute = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, index === 0
                    ? trackingNamespace?.center
                    : trackingNamespace?.aside, index > 0 ? analyticsIndex++ : undefined);
                const shouldHidePublishDate = minimalSummaryItemProps?.shouldHidePublishDate;
                return (React.createElement(SummaryCollageFiveItem, { as: (!shouldEnableDenseMobile || index === 0) && Component, ...item, ...stackedRatingsCardProps, DangerousHedProp: DangerousHedProp, key: index, hasMinimalSummaryItem: hasMinimalSummaryItem, isSticky: shouldMakePrimaryCardSticky && index === 0, analyticsDataAttribute: analyticsDataAttribute, hasBylineBeforeDek: hasBylineBeforeDek, headerHeight: headerHeight, hedTag: "h3", hideRubricItemSummary: hideRubricItemSummary, shouldDisplayItemsBelow: shouldDisplayItemsBelow, summaryItemPosition: index + 1, recircRiver: recircRiver, rubricVariation: summaryItemRubricVariation, shouldEnableDenseMobile: shouldEnableDenseMobile, index: index, shouldAlignDekAtBottom: shouldAlignDekAtBottom, shouldHideBylines: shouldHideBylines, shouldHideMetadataSecondary: shouldHideMetadataSecondary, shouldUseAlternativeStyle: shouldUseAlternativeStyle, ...minimalSummaryItemProps, shouldTrackItemImpressionForSnowplow: shouldTrackSnowplowEvent, impressionHandler: () => trackSnowplowEvent('impression', item, index, index === 0 ? 'hero' : 'secondary', index === 0 ? 1 : 5), clickHandler: () => trackSnowplowEvent('click', item, index, index === 0 ? 'hero' : 'secondary', index === 0 ? 1 : 5) }, shouldEnableDenseMobile && index > 0 && (React.createElement(StoryUnit, { className: `mobile_dense_smart_item-${index}`, key: index, contributors: !shouldHideBylines && item.contributors, image: item.image, dangerousHed: item.dangerousHed, dangerousDek: item.dangerousDek, date: shouldHidePublishDate && item.date, rubric: item.rubric, url: item.url, rubricVariation: "DiscoveryItem", contentType: item.contentType, shouldHideIcon: minimalSummaryItemProps?.shouldHideIcon, variationsProp: SummaryItemComponent?.variationsProp, shouldTrackSnowplowEvent: shouldTrackSnowplowEvent, impressionHandler: () => trackSnowplowEvent('impression', item, index - 1, 'secondary', 4), clickHandler: () => trackSnowplowEvent('click', item, index - 1, 'secondary', 4) }))));
            }),
            checkFooterEligible() && (React.createElement(SummaryCollageFiveFooterWrapper, null,
                React.createElement(Button.Utility, { btnStyle: "text", href: featuredFooter.link, inputKind: "link", label: featuredFooter.label, ButtonIcon: ArrowIcon, hasEnableIcon: true }))))));
};
SummaryCollageFive.propTypes = {
    className: PropTypes.string,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    featuredFooter: PropTypes.shape({
        link: PropTypes.string,
        label: PropTypes.string
    }),
    hasBylineBeforeDek: PropTypes.bool,
    hasConsistentSpacing: PropTypes.bool,
    hasLightBackground: PropTypes.bool,
    hasMinimalSummaryItem: PropTypes.bool,
    hasSectionTitleDekColor: PropTypes.bool,
    hasTopPadding: PropTypes.bool,
    hideRubricItemSummary: PropTypes.bool,
    hideVerticalBorders: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape(SummaryItem.propTypes)).isRequired,
    recircRiver: PropTypes.string,
    sectionTitleVariation: PropTypes.string,
    shouldAlignDekAtBottom: PropTypes.bool,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldHideBylines: PropTypes.bool,
    shouldHideMetadataSecondary: PropTypes.bool,
    shouldMakePrimaryCardSticky: PropTypes.bool,
    shouldShowDek: PropTypes.bool,
    shouldShowStackedRatingsCard: PropTypes.bool,
    shouldTitleHasTopSpacing: PropTypes.bool,
    shouldTrackSnowplowEvent: PropTypes.bool,
    shouldUseAlternativeStyle: PropTypes.bool,
    shouldUseFeaturedFooter: PropTypes.bool,
    summaryItemRubricVariation: PropTypes.string,
    summaryItemVariation: PropTypes.string,
    trackingNamespace: PropTypes.object,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        shouldDisplayItemsBelow: PropTypes.bool,
        shouldShowSubHed: PropTypes.bool,
        shouldEnableDenseMobile: PropTypes.bool
    })
};
SummaryCollageFive.displayName = 'SummaryCollageFive';
module.exports = asConfiguredComponent(SummaryCollageFive, 'SummaryCollageFive');
//# sourceMappingURL=SummaryCollageFive.js.map

/***/ }),

/***/ 7939:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(75397);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 71053:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { calculateSpacing, getColorToken, getTypographyStyles, getLinkStyles, minMaxScreen, minScreen, maxScreen } = __webpack_require__(26865);
const { getSectionSpacingStyling } = __webpack_require__(16800);
const { minThresholds, maxThresholds } = __webpack_require__(99906);
const { cssVariablesCollage, universalGridCore } = __webpack_require__(89085);
const { BREAKPOINTS } = __webpack_require__(96472);
const { ButtonIconWrapper, ButtonLabel } = __webpack_require__(18974);
const { cssVariablesGrid, applyGridSpacing } = __webpack_require__(1123);
const { ResponsiveClipWrapper } = __webpack_require__(91783);
const { SpanWrapper } = __webpack_require__(18117);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const { RubricWrapper } = __webpack_require__(6613);
const { ContentWrapper, StackedRatingsCardWrapper } = __webpack_require__(1817);
const { applyGridMixin } = __webpack_require__(6528);
const { SummaryItemHedBase } = __webpack_require__(36211);
const { SummaryItemWrapper, SummaryItemStickyWrapper } = __webpack_require__(68116);
const { SmartItemRubric, SmartItemDek, SmartItemHed, SmartItemBaseText } = __webpack_require__(88154);
const { StoryUnitWrapper } = __webpack_require__(63993);
const { SmartItemAssetContainer } = __webpack_require__(78465);
const summaryItemGrid = () => `
  ${cssVariablesGrid()}
    
  display: grid;
  grid-column-gap: ${calculateSpacing(2)};
  grid-template-areas: 'image content';
  grid-template-columns: repeat(2, 1fr);
  align-items: center;

  &.summary-item--layout-position-image-right {
    grid-template-areas: 'content image';
  }

  &.summary-item--videodekposition {
    ${minScreen(`${maxThresholds.md}px`)} {
      border-bottom: 0;
    }

    .summary-item__image-link {
      max-width: 100%;
    }
  }

  &.summary-item--videodekposition:first-of-type {
    ${maxScreen(BREAKPOINTS.md)} {
      display: block;
    }
  }

  .summary-item__asset-container--align-top {
    align-self: start;
  }

  .summary-item__asset-container {
    grid-area: image;
  }

  .summary-item__content {
    grid-area: content;
    padding-top: 0;
  }

  &.summary-item--videodekposition:first-of-type
    > .summary-item__content--margintop {
    padding-top: 0;
    ${minScreen(BREAKPOINTS.md)} {
      margin-top: calculate-spacing(2);
    }
  }
`;
const SummaryCollageFiveFooterWrapper = styled.div.withConfig({
    displayName: 'SummaryCollageFiveFooterWrapper'
}) `
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: flex-end;

  a {
    ${({ theme }) => getLinkStyles(theme, 'colors.consumption.lead.standard.link')};
    ${ButtonIconWrapper} {
      padding-left: ${calculateSpacing(0.3)};

      .icon-arrow {
        transform: scale(0.6);
        width: 18px;
      }
    }
  }
  ${ButtonLabel} {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-secondary')};
  }
`;
const SummaryCollageFiveSectionTitle = styled.span.withConfig({
    displayName: 'SummaryCollageFiveSectionTitle'
}) `
  grid-column: 1/-1;
  grid-row: 1;
  ${({ shouldUseAlternativeStyle }) => shouldUseAlternativeStyle
    ? `margin-bottom: ${calculateSpacing(0)};`
    : ` margin-bottom: ${calculateSpacing(2)};
    @media (min-width: ${BREAKPOINTS.md}) {
      margin-bottom: ${calculateSpacing(1)};
    }
    @media (min-width: ${BREAKPOINTS.lg}) {
      margin-bottom: ${calculateSpacing(0)};
    }`}
`;
const SummaryCollageFiveMinimalSummaryItem = `
  &&& {
    ${minScreen(BREAKPOINTS.md)} {
      padding-right: ${calculateSpacing(3)};
      padding-left: ${calculateSpacing(3)};

      .summary-item__content.summary-item__content--minimal {
        padding-top: ${calculateSpacing(4)};
      }

      .summary-item__image {
        padding-right: ${calculateSpacing(2)};
        padding-left: ${calculateSpacing(2)};
      }
    }

    @media (min-width: ${minThresholds.md + 1}px) {
      padding-right: ${calculateSpacing(1)};
      padding-left: ${calculateSpacing(1)};

      .summary-item__image {
        padding: 0;
      }
    }

    ${minScreen(BREAKPOINTS.lg)} {
      padding-right: ${calculateSpacing(3)};
      padding-left: ${calculateSpacing(3)};

      .summary-item__image {
        padding: 0;
      }
    }
  }
`;
const SummaryItemPositionOne = (hasMinimalSummaryItem) => css `
  ${minScreen(BREAKPOINTS.md)} {
    grid-column: 4 / span 6;
    margin-right: calc(var(--border-offset) * -1);
    margin-left: calc(var(--border-offset) * -1);
    border-right: 1px solid
      ${getColorToken('colors.discovery.body.white.border')};
    border-left: 1px solid
      ${getColorToken('colors.discovery.body.white.border')};
    padding-right: var(--border-offset);
    padding-left: var(--border-offset);

    &.summary-item--card {
      margin-right: 0;
      margin-left: 0;
      border: 0;
      padding: 0;
    }
  }

  &.summary-item:not(.summary-item--card) {
    .summary-item__content {
      padding-bottom: 0;
    }
  }

  .summary-item__content.summary-item__content--bottom-dek {
    position: relative;
    height: 100%;

    .summary-item__metadata-secondary-without-mobile-margin {
      margin-bottom: ${calculateSpacing(4)};
    }

    .summary-item__byline-date-icon--pre-dek {
      margin: 8px 0 14px 0;
    }
  }

  ${SpanWrapper}.summary-item__image {
    ${minMaxScreen(0, BREAKPOINTS.md)} {
      width: auto;
    }
  }

  ${hasMinimalSummaryItem && SummaryCollageFiveMinimalSummaryItem}

  .summary-item__hed {
    ${getTypographyStyles('typography.definitions.discovery.hed-break-out')};

    ${minScreen(BREAKPOINTS.md)} {
      ${getTypographyStyles('typography.definitions.discovery.hed-feature')};
    }
  }

  .summary-item__dek {
    @media (max-width: ${BREAKPOINTS.md}) {
      ${getTypographyStyles('typography.definitions.discovery.description-feature')};
    }
  }

  &.summary-item--card {
    ${minMaxScreen(0, BREAKPOINTS.md)} {
      margin-right: ${calculateSpacing(-3)};
      margin-left: ${calculateSpacing(-3)};
    }

    .summary-item__content {
      ${minScreen(BREAKPOINTS.lg)} {
        padding-top: ${calculateSpacing(4)};
      }
    }
  }

  &.summary-item {
    ${minScreen(BREAKPOINTS.md)} {
      margin-bottom: 0;
    }
  }
`;
// 1. override side summary-item typography token for this composition
const SummaryItemHedTypography = css `
  .summary-item__hed {
    ${minScreen(BREAKPOINTS.md)} {
      ${getTypographyStyles('typography.definitions.discovery.hed-core-secondary')};
    }
  }
`;
const MinimalSummaryItemCss = css `
  && {
    border-top: 1px solid ${getColorToken('colors.discovery.body.white.border')};
    padding-top: ${calculateSpacing(4)};
  }
`;
const ItemsBelowMinScreenMdCommonCss = css `
  .summary-item__hed {
    margin-bottom: 0.5rem;
  }
  ${minMaxScreen(0, `${maxThresholds.md}px`)} {
    &&& {
      grid-column: 1 / span 12;
      grid-row: auto;
      grid-template-areas: 'content content content image';
      grid-template-columns: repeat(4, 1fr);

      &.summary-item--has-border-sides {
        && {
          border-right-style: none;
        }
      }
    }
    margin: 0;
    border-bottom: 1px solid
      ${getColorToken('colors.discovery.body.white.divider')};
    ${({ shouldUseAlternativeStyle }) => shouldUseAlternativeStyle ? `` : `padding: 0 0 16px 0;`}
  }
`;
const shouldDisplayItemsBelowPositionOne = css `
  &&& {
    grid-column: 1 / -1;
    grid-row: 2 / span 1;
    margin-right: 0;
    margin-left: 0;
    border-right: none;
    border-bottom: 1px solid
      ${getColorToken('colors.discovery.body.white.divider')};
    border-left: none;
    padding-right: 0;
    padding-bottom: 24px;
    padding-left: 0;
  }

  ${minMaxScreen(0, `${maxThresholds.md}px`)} {
    padding-bottom: 16px;
  }

  ${minScreen(BREAKPOINTS.md)} {
    margin-top: -8px;
  }

  &&& {
    .summary-item__hed {
      ${getTypographyStyles('typography.definitions.discovery.hed-break-out')};
    }
  }

  .summary-item__dek {
    ${getTypographyStyles('typography.definitions.discovery.description-core')};

    ${minMaxScreen(BREAKPOINTS.lg, `${maxThresholds.xl}px`)} {
      max-height: 5rem;
      overflow: scroll;
      text-align: left;
      text-overflow: ellipsis;
    }
  }

  .summary-item__content {
    .rubric.summary-item__rubric {
      margin-bottom: 16px;
      ${minMaxScreen(BREAKPOINTS.md, `${maxThresholds.lg}px`)} {
        margin-bottom: ${calculateSpacing(1)};
      }
    }
  }

  ${minMaxScreen(BREAKPOINTS.md, `${maxThresholds.lg}px`)} {
    &.summary-item--layout-proportions-66-33.summary-item--layout-position-image-left {
      ${summaryItemGrid()};
      grid-template-columns: 1fr;
      align-items: start;

      .summary-item__asset-container,
      .summary-item__content {
        grid-column: 1 / -1;
        grid-row: auto;
      }

      .summary-item__asset-container {
        padding-bottom: 24px;
      }

      .summary-item__content.summary-item__content--bottom-dek {
        .summary-item__byline-date-icon--pre-dek {
          margin: 8px 0 14px 0;
        }
      }
    }
  }

  ${minMaxScreen(0, `${maxThresholds.md}px`)} {
    &&& {
      grid-column: 1 / span 12;
      grid-row: auto;
      border-bottom: 1px solid
        ${getColorToken('colors.discovery.body.white.divider')};

      &.summary-item--has-border-sides {
        border-right-style: none;
      }
    }
    margin: 0;
    padding: 0 0 10px 0;

    &.summary-item--layout-proportions-66-33.summary-item--layout-position-image-left {
      ${applyGridMixin()}
      grid-template-columns: 1fr;
      align-items: start;

      .summary-item__asset-container,
      .summary-item__content {
        grid-column: 1 / -1;
        grid-row: auto;

        .rubric {
          &.summary-item__rubric {
            margin-bottom: 8px;
          }
        }
      }

      .summary-item__asset-container {
        padding-bottom: 16px;
      }
    }
  }
`;
const ItemsBelowPositionTwo = css `
  && {
    grid-column: 1 / 4;
    grid-row: 3 / span 1;
    padding-right: 16px;
  }

  &.summary-item--has-border-sides {
    border-right: none;
  }

  ${ItemsBelowMinScreenMdCommonCss}

  ${minMaxScreen(BREAKPOINTS.md, `${maxThresholds.lg}px`)} {
    &&& {
      grid-column: 1 / 7;
      grid-row: 3 / span 1;
      border-bottom: 1px solid
        ${getColorToken('colors.discovery.body.white.divider')};
      padding-right: 12px;
    }

    padding-bottom: 24px;

    &.summary-item--has-border-sides {
      && {
        border-right-style: none;
      }
    }

    &::after {
      position: absolute;
      top: 0;
      right: 0;
      border-right: 1px solid
        ${getColorToken('colors.discovery.body.white.divider')};
      height: 80%;
      content: '';
    }
  }
  ${minMaxScreen('1025px', `calc(${BREAKPOINTS.xl} - 1px)`)} {
    .summary-item__content--bottom-dek {
      margin-right: ${calculateSpacing(-4)};
      width: 100%;
    }
  }
`;
const ItemsBelowPositionThree = css `
  &&& {
    grid-column: 4 / 7;
  }
  margin-left: calc(-1 * var(--grid-gap));
  padding-right: 16px;
  padding-left: 16px;

  ${minMaxScreen(BREAKPOINTS.md, `${maxThresholds.lg}px`)} {
    &.summary-item--has-border-sides {
      && {
        border-right-style: none;
      }
    }

    &&& {
      grid-column: 7 / -1;
      grid-row: 3 / span 1;
      border-bottom: 1px solid
        ${getColorToken('colors.discovery.body.white.divider')};
      padding-right: 0;
      padding-left: 12px;
    }
    padding-bottom: 16px;
  }

  ${ItemsBelowMinScreenMdCommonCss}
  ${minMaxScreen('1025px', `calc(${BREAKPOINTS.xl} - 1px)`)} {
    .summary-item__content--bottom-dek {
      margin-right: ${calculateSpacing(-2)};
    }
  }
`;
const ItemsBelowPositionFour = css `
  && {
    grid-column: 7 / 10;
    grid-row: 3 / span 1;
    padding-right: 16px;
  }
  margin-left: -16px;
  ${minMaxScreen(BREAKPOINTS.md, `${maxThresholds.lg}px`)} {
    &&& {
      grid-column: 1 / 7;
      grid-row: 4 / span 1;
      margin-left: 0;
      padding-right: 12px;
      padding-bottom: 0;
    }
  }
  ${minMaxScreen(0, `${maxThresholds.md}px`)} {
    margin-left: 0;
  }

  ${ItemsBelowMinScreenMdCommonCss}
  ${minMaxScreen('1025px', `calc(${BREAKPOINTS.xl} - 1px)`)} {
    .summary-item__content--bottom-dek {
      margin-right: ${calculateSpacing(-2)};
    }
  }
`;
const ItemsBelowPositionFive = css `
  && {
    grid-column: 10 / -1;
    padding-left: 16px;
  }
  margin-left: calc(-1 * var(--grid-gap));

  ${minMaxScreen(BREAKPOINTS.md, `${maxThresholds.lg}px`)} {
    grid-row: 4 / span 1;
    padding-bottom: 0;

    && {
      grid-column: 7/-1;
    }
    padding-left: 12px;
  }

  ${minMaxScreen(0, `${maxThresholds.md}px`)} {
    &&& {
      border-bottom: none;
    }
  }
  ${minMaxScreen('1025px', `calc(${BREAKPOINTS.xl} - 1px)`)} {
    .summary-item__content--bottom-dek {
      margin-right: ${calculateSpacing(-1)};
    }
  }
  ${ItemsBelowMinScreenMdCommonCss}
  &.summary-item--has-border-sides {
    && {
      border-right-style: none;
    }
  }
`;
const summaryShouldDisplayItemBelowCss = (summaryItemPosition) => {
    switch (summaryItemPosition) {
        case 1:
            return shouldDisplayItemsBelowPositionOne;
        case 2:
            return ItemsBelowPositionTwo;
        case 3:
            return ItemsBelowPositionThree;
        case 4:
            return ItemsBelowPositionFour;
        case 5:
            return ItemsBelowPositionFive;
        default:
            return ``;
    }
};
// 1. css-grid: spans all 4 columns on mobile
const SummaryCollageFiveItem = styled.div.withConfig({
    displayName: 'SummaryCollageFiveItem'
}) `
  grid-column: 1 / -1; //1

  .summary-item__image,
  ${ResponsiveImageContainer} {
    width: 100%;
  }

  ${ResponsiveClipWrapper} {
    margin-bottom: 0;
  }

  ${({ shouldEnableDenseMobile }) => shouldEnableDenseMobile &&
    `
      .aspect-ratio--overlay-container {
        ${maxScreen(BREAKPOINTS.md)} {
          top: auto;
          height: fit-content;
        }
      }
    `}

  /* Remove bottom border from all devices except mobile */
  && {
    ${minScreen(BREAKPOINTS.md)} {
      border-bottom: none;
    }
  }

  && ${SmartItemRubric} {
    ${maxScreen(BREAKPOINTS.md)} {
      color: ${getColorToken('colors.consumption.lead.standard.context-signature')};
    }
  }

  && ${SmartItemDek} {
    ${maxScreen(BREAKPOINTS.md)} {
      margin: ${calculateSpacing(2)} 0;
    }
  }

  && ${SmartItemHed} {
    ${maxScreen(BREAKPOINTS.md)} {
      margin-bottom: 0.5rem;
      ${getTypographyStyles('typography.definitions.discovery.hed-core-secondary')};

      &::after {
        display: block;
        margin-top: ${calculateSpacing(1)};
        margin-bottom: ${calculateSpacing(2)};
        width: 5rem;
        content: '';
      }
    }
  }

  &&& ${StoryUnitWrapper} {
    ${maxScreen(BREAKPOINTS.md)} {
      border-bottom: 1px solid
        ${getColorToken('colors.discovery.body.white.border')};
      padding: ${calculateSpacing(2)} 0;
    }
    ${minScreen(BREAKPOINTS.md)} {
      display: flex;
      flex-direction: column;
      text-align: center;
      gap: 1rem;
    }

    ${SmartItemBaseText}::after {
      display: none;
    }
  }

  &&& ${SmartItemAssetContainer} {
    order: -2;
  }

  ${({ shouldDisplayItemsBelow, summaryItemPosition }) => shouldDisplayItemsBelow &&
    css `
      &.summary-item--layout-placement-side-by-side {
        align-items: start;
      }

      &.summary-item--layout-position-image-right.summary-item--layout-proportions-33-66 {
        .summary-item__content {
          &.summary-item__content--no-rubric {
            padding-top: 0;
          }
        }
      }

      &.summary-item {
        ${ResponsiveClipWrapper} {
          margin-bottom: 0;
        }
      }
      ${summaryShouldDisplayItemBelowCss(summaryItemPosition)};
    `}

  /* 1. css-grid: spans 6 columns starting 3 columns in (desktop/tablet)
     2. css-grid: spans 2 rows starting from the first row (desktop/tablet)
     3. override featured summary-item typography token for this composition */
  ${({ DangerousHedProp, hasMinimalSummaryItem, shouldDisplayItemsBelow, summaryItemPosition }) => {
    switch (summaryItemPosition) {
        case 1:
            return css `
          ${SummaryItemPositionOne(hasMinimalSummaryItem, shouldDisplayItemsBelow)};
          ${!DangerousHedProp
                ? `grid-row: 1 / span 2;`
                : `grid-row: 2 / span 2;`}
        `;
        case 2:
            return css `
          ${SummaryItemHedTypography}
          ${minScreen(BREAKPOINTS.md)} {
            position: relative; /* 2 */
            grid-column: 1 / span 3; /* 1 */
            grid-row: 2; /* 1 */
            ${!DangerousHedProp && `grid-row: 1;`}
            &.summary-item--card {
              margin-bottom: 0;
            }
          }
          ${hasMinimalSummaryItem && MinimalSummaryItemCss}
        `;
        case 3:
            return css `
          ${SummaryItemHedTypography}
          &.summary-item {
            ${minScreen(BREAKPOINTS.md)} {
              margin-bottom: 0;
            }
          }
          ${minScreen(BREAKPOINTS.md)} {
            grid-column: 1 / span 3;
          }
        `;
        case 4:
            return css `
          ${SummaryItemHedTypography}
          ${minScreen(BREAKPOINTS.md)} {
            position: relative; /* 2 */
            grid-column: 10 / span 3; /* 1 */
            grid-row: 2; /* 1 */
            ${!DangerousHedProp && `grid-row: 1;`}
            &.summary-item--card {
              margin-bottom: 0;
            }
          }
          ${hasMinimalSummaryItem && MinimalSummaryItemCss}
        `;
        case 5:
            return css `
          ${SummaryItemHedTypography}
          &.summary-item {
            ${minScreen(BREAKPOINTS.md)} {
              margin-bottom: 0;
            }
          }
          ${minScreen(BREAKPOINTS.md)} {
            grid-column: 10 / span 3; /* 1 */
          }
          ${minMaxScreen(0, BREAKPOINTS.md)} {
            && {
              margin-bottom: 0;
              padding-bottom: 0;
            }
          }
        `;
        default:
            return ``;
    }
}}

  ${({ headerHeight }) => headerHeight &&
    `
    ${SummaryItemStickyWrapper} {
      top: ${calculateSpacing(headerHeight)};
    }
  `}
`;
const SummaryCollageFiveWithoutHed = `
&& {
  .summary-item__rubric {
    margin-bottom: ${calculateSpacing(2)};
  }

  .summary-item__hed {
    margin-bottom: ${calculateSpacing(2)};
  }

  .summary-item--card {
    .summary-item__content {
      padding-top: ${calculateSpacing(2)};
    }
  }


  ${minScreen(BREAKPOINTS.lg)} {
    .summary-item__rubric {
      margin-bottom: ${calculateSpacing(2)};
    }

    .summary-item__hed {
      margin-bottom: ${calculateSpacing(2)};

      &.summary-item__hed--no-margin-bottom {
        margin-bottom: 0;
      }
    }
  }
}
`;
const SummaryCollageFiveNotAChild = `
  ${minScreen(BREAKPOINTS.lg)} {
        .summary-item__dek {
          margin-bottom: ${calculateSpacing(1)};
        }

        .summary-item__metadata-primary {
          margin-bottom: ${calculateSpacing(1)};
        }

        .summary-item__metadata-secondary {
          margin-bottom: ${calculateSpacing(2)};
        }
      }
  }
`;
const RatingsCardStyles = () => `
  ${StackedRatingsCardWrapper} {
    ${ContentWrapper} {
      padding: ${calculateSpacing(2)} 0 0;
    }

    ${RubricWrapper} {
      margin-bottom: ${calculateSpacing(1)};
    }
  }
`;
const SummaryCollageFiveWrapper = styled('div').withConfig({
    displayName: 'SummaryCollageFiveWrapper'
}) `
  ${cssVariablesCollage()};
  ${universalGridCore()};
  ${applyGridSpacing('padding')};

  ${minMaxScreen(0, BREAKPOINTS.md)} {
    ${SummaryCollageFiveSectionTitle} {
      grid-column: 1 / span 12;
    }
  }

  ${RatingsCardStyles};

  ${({ hasTopPadding }) => hasTopPadding && `padding-top: ${calculateSpacing(4)}`};

  ${minMaxScreen(0, `${maxThresholds.md}px`)} {
    &&& {
      column-gap: 0;
    }
  }
  ${({ shouldUseAlternativeStyle, hasConsistentSpacing, theme }) => shouldUseAlternativeStyle
    ? `padding-bottom: ${hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px'
        ? '20px'
        : calculateSpacing(5)};

    ${minScreen(BREAKPOINTS.lg)} {
      row-gap: ${calculateSpacing(3)};
    }
  
    ${minMaxScreen(BREAKPOINTS.md, `${maxThresholds.lg}px`)} {
      row-gap: ${calculateSpacing(2)};
    }  
  
    ${maxScreen(`${maxThresholds.md}px`)} {
      grid-gap: 0;
    } `
    : ` ${minScreen(BREAKPOINTS.md)} {
      padding-bottom: ${hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px'
        ? '20px'
        : calculateSpacing(5)};`}

  ${({ hasMinimalSummaryItem }) => hasMinimalSummaryItem &&
    ` ${minScreen(BREAKPOINTS.lg)} {
      padding-bottom: ${({ hasConsistentSpacing, theme }) => {
        return hasConsistentSpacing &&
            getSectionSpacingStyling(theme, 'gap-md') !== '0px'
            ? '0px'
            : calculateSpacing(2);
    }};
    }`}

  ${({ hideVerticalBorders }) => hideVerticalBorders &&
    ` .summary-item {
      margin-right: 0;
      margin-left: 0;
      border-right: 0;
      border-left: 0;
      padding: 0;
    }`}

    ${({ dangerousHed }) => dangerousHed
    ? ` ${SummaryCollageFiveItem}:not(:nth-child(2)) {
            ${SummaryCollageFiveNotAChild}
      };`
    : `${SummaryCollageFiveWithoutHed}{
          ${SummaryCollageFiveItem}:not(:first-child) {
              ${SummaryCollageFiveNotAChild}
          }
        };`}
        
    ${({ shouldUseAlternativeStyle }) => shouldUseAlternativeStyle
    ? `${SummaryItemHedBase} {
            margin: ${calculateSpacing(2)} 0;
          }
          ${SummaryItemWrapper} {
            padding-bottom: ${calculateSpacing(2)};
            ${maxScreen(BREAKPOINTS.md)} {
              padding: ${calculateSpacing(2)} 10px;
            }
          }
        
      & > div[data-section-title='summary collage 5/hero'] {
            ${maxScreen(BREAKPOINTS.md)} {
              margin-top: ${calculateSpacing(3)};
            }
        
            ${minMaxScreen(`${maxThresholds.md}px`, `${maxThresholds.lg}px`)} {
              margin-top: ${calculateSpacing(1)};
            }
        
            ${minScreen(BREAKPOINTS.lg)} {
              margin-top: 0;
            }
          }`
    : ``}
`;
const SummaryCollageFiveBGWrapper = styled.div.withConfig({
    displayName: 'SummaryCollageFiveBGWrapper'
}) `
  ${({ hasLightBackground, theme }) => hasLightBackground &&
    `
      background: ${getColorToken(theme, 'colors.discovery.body.light.background')};
    `}
`;
module.exports = {
    SummaryCollageFiveBGWrapper,
    SummaryCollageFiveFooterWrapper,
    SummaryCollageFiveSectionTitle,
    SummaryCollageFiveItem,
    SummaryCollageFiveWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 75397:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const SummaryCollageFive = __webpack_require__(23310);
SummaryCollageFive.RowsWithDekAndItemsBelow = asVariation(SummaryCollageFive, 'RowsWithDekAndItemsBelow', {
    shouldDisplayItemsBelow: true,
    shouldShowSubHed: true
}, {});
SummaryCollageFive.DenseMobile = asVariation(SummaryCollageFive, 'DenseMobile', {
    shouldEnableDenseMobile: true
}, {});
module.exports = SummaryCollageFive;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 41034:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useEffect, useState } = __webpack_require__(96540);
const cloneDeep = __webpack_require__(88055);
const throttle = __webpack_require__(7350);
const SummaryList = __webpack_require__(22539);
const SummaryItem = __webpack_require__(74992);
const { componentTracking } = __webpack_require__(90090);
const { interactionResponse } = __webpack_require__(56187);
const { TrackComponentChannel } = __webpack_require__(78788);
const { getContentUrl, getStackedRatingsCardProps } = __webpack_require__(4690);
const { SummaryCollageFourUnderMainItem, SummaryCollageMainItemBadge, SummaryCollageFourMainItem, SummaryCollageFourSummaryListItem, SummaryCollageFourSubMainItem, SummaryCollageFourSubMainItem2, SummaryCollageFourWrapper } = __webpack_require__(99337);
const StackedRatingsCard = __webpack_require__(68712);
const { useViewportObserver } = __webpack_require__(55030);
/**
 * Handles impressions for hero items
 *
 * @param {Function} handler - The impression handler function
 * @param {Array} items - The items to track impressions for
 * @returns {Function} The impression handler
 */
const handleHeroImpressions = (handler, items) => async (isInViewport) => {
    if (!isInViewport)
        return;
    await interactionResponse();
    // Check if items[0] exists before accessing it
    if (items[0]) {
        handler('impression', items[0], 0, 'hero', items.length - 2);
    }
    // Check if items[3] exists before accessing it
    if (items[3]) {
        handler('impression', items[3], 1, 'hero', items.length - 2);
    }
};
/**
 * Renders the main item for SummaryCollageFour
 *
 * @param {object} props - Props for the main item
 * @returns {ReactElement} The main item component
 */
const renderMainItem = (props) => {
    const { modifiedItems, hasCoverCollage, shouldShowStackedRatingsCard, summaryItemVariationForFirstElement, analyticsDataAttributeHero, headerHeight, hideRubricItemSummary, isMainSummaryItemSticky, recircRiver, shouldHideBylines, hideSummaryMainItemDeks, shouldHidePublishDate, hasBordersForFirstAndLastItem, shouldLimitSavingToContentTypes, snowplowEvent, windowLocation, stackedRatingsCardProps, hasRoundedBorder, isTitleFullWidth } = props;
    // Create snowplow event config
    const snowplowEventConfig = snowplowEvent && modifiedItems[0]
        ? {
            ...snowplowEvent,
            items: [
                {
                    content_title: modifiedItems[0].dangerousHed || '',
                    content_type: modifiedItems[0].contentType || '',
                    content_id: modifiedItems[0].copilotID || '',
                    content_url: getContentUrl(modifiedItems[0].url || '', windowLocation)
                }
            ],
            index: 0,
            total_index: modifiedItems.length - 2,
            placement: 'hero'
        }
        : null;
    return (React.createElement(SummaryCollageFourMainItem, { ...modifiedItems[0], hasCoverCollage: hasCoverCollage, as: shouldShowStackedRatingsCard
            ? StackedRatingsCard
            : summaryItemVariationForFirstElement, analyticsDataAttribute: analyticsDataAttributeHero, className: "hero_summary_item", headerHeight: headerHeight, hideRubricItemSummary: hideRubricItemSummary, isMainSummaryItemSticky: isMainSummaryItemSticky, recircRiver: recircRiver, shouldHideBylines: shouldHideBylines, shouldHideDangerousDek: hideSummaryMainItemDeks, shouldHidePublishDate: shouldHidePublishDate, hasBordersForFirstAndLastItem: hasBordersForFirstAndLastItem, shouldLimitSavingToContentTypes: shouldLimitSavingToContentTypes, snowplowEvent: snowplowEventConfig, placement: "hero", ...stackedRatingsCardProps, hasRoundedBorder: hasRoundedBorder, isTitleFullWidth: isTitleFullWidth }));
};
/**
 * SummaryCollageFour component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.dangerousHed] - Optional string (possibly HTML) to use as the title
 * @param {Bool} [props.hasBordersForFirstAndLastItem] - Optional bottom borders for the first and last summary items
 * @param {Bool} [props.hasUnderHeroItem] - Optional flag to relocate the last item of the summary list under the hero item
 * @param {object} [props.hasCoverCollage] - Optional for threeRowsDown variation
 * @param {object} [props.isTitleFullWidth] - Optional for extending section Title
 * @param {Bool} [props.hasTitleBorder] - Optional flag to show title border
 * @param {Bool} [props.hasRoundedBorder] - Optional flag to show rounded border
 * @param {Bool} [props.shouldShowRecipeBadge]  - Optional flag to show badge on Recipe type component
 * @param {Bool} [props.hideBottomBorders] - Optional prop to hide bottom borders
 * @param {Bool} [props.hideRubricItemSummary] - Show or hide rubrics in summary items
 * @param {Bool} [props.hideLastFewSummaryImages] - Show or hide summary item images
 * @param {Bool} [props.hideSummaryListDeks] - Optional prop to hide only the deks of the SummaryList items
 * @param {Bool} [props.hideSummaryMainItemDeks] - Optional prop to hide only the deks of Summary Main Items
 * @param {Bool} [props.hideVerticalBorders] - Optional prop to hide vertical borders
 * @param {Bool} [props.shouldTrackSnowplowEvent] - Optional prop to enable/disable snowplow tracking
 * @param {Bool} [props.isMainSummaryItemSticky] - Optional prop to make main item sticky to top
 * @param {Array<SummaryItem.propTypes>} props.items - Array of items to render
 * @param {string} [props.placement] - Optional top identify placement in snowplow tracking
 * @param {string} [props.recircRiver] - Prop which stores the value of the recirc river
 * @param {Bool} [props.shouldEnableCardLevelBookmark] - Optional flag to enable bookmarks on bundle page
 * @param {Bool} [props.shouldEnableCommentsCount] - Optional flag to enable comments count on bundle page
 * @param {Bool} [props.shouldEnableBundleComponentAnalytics] - Optional feature flag to append data-section-title attribute for analytics
 * @param {Bool} [props.shouldEnableSubItems] - Optional flag to enable sub Items instead of summary list
 * @param {string} [props.shouldHideBylines] - Optional flag to hide bylines
 * @param {Function} [props.impressionHandler] - Optional prop which will have impression tracking function
 * @param {string} [props.shouldHidePublishDate] - option to hide date on summary item
 * @param {Array} [props.shouldLimitSavingToContentTypes] - flag to determine if saving should be enabled only on certain content types
 * @param {Bool} [props.shouldUseHedCoreSecondaryToken] - Optional to use the hed core secondary token for selected storie's hed content
 * @param {string} [props.sectionTitleVariation] - Optional variation of SectionTitle to use
 * @param {string} [props.summaryItemVariation] - Optional variation of SummaryItem to use within SummaryList
 * @param {object} [props.trackingNamespace] - Optional override the base namespace of data-section-title for component tracking
 * @param {string} [props.underHeroItemVariation] - Optional variation of SummaryItem to use under the hero item
 * @param {boolean} [props.shouldShowStackedRatingsCard] - Optional prop to toggle the display of stacked ratings card
 * @param {boolean} [props.snowplowEvent] - Optional prop which contains snowplow event info
 * @param {boolean} [props.shouldEnableBookmarkDrawers] - flag to enable bookmark drawer functionality
 * @param {string} [props.windowLocation] - Optional prop which contains window location
 *
 * @returns {ReactElement} <div>
 */
const SummaryCollageFour = ({ className, dangerousHed, shouldEnableSubItems = false, hasBordersForFirstAndLastItem = false, hasRoundedBorder, hasTitleBorder = true, hasUnderHeroItem = false, hideBottomBorders = false, impressionHandler, hideRubricItemSummary = false, hideLastFewSummaryImages = true, hideSummaryListDeks = true, hideSummaryMainItemDeks = false, hideVerticalBorders = false, isMainSummaryItemSticky = false, items, placement, recircRiver, shouldEnableBundleComponentAnalytics, shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark, shouldEnableCommentsCount, shouldHideBylines = false, shouldHidePublishDate = true, shouldLimitSavingToContentTypes, shouldShowRecipeBadge, shouldUseHedCoreSecondaryToken = false, shouldTrackSnowplowEvent = false, sectionTitleVariation = 'TextLeft', shouldShowStackedRatingsCard = false, snowplowEvent, summaryItemVariation = 'TextBelowLeft', trackingNamespace, hasCoverCollage, underHeroItemVariation = 'TextBelowLeft', isTitleFullWidth, windowLocation = '' }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SummaryCollageFour'
        });
    }, []);
    const [headerHeight, setHeaderHeight] = useState(0);
    const handleScroll = () => {
        let headerElementHeight = document.querySelector('.site-navigation').offsetHeight;
        headerElementHeight /= 8;
        setHeaderHeight(headerElementHeight);
    };
    useEffect(() => {
        if (isMainSummaryItemSticky) {
            const throttledScroll = throttle(handleScroll, 150);
            window.addEventListener('scroll', throttledScroll);
            return () => {
                window.removeEventListener('scroll', throttledScroll);
            };
        }
        return undefined;
    });
    const itemsToModify = cloneDeep(items); // avoid mutation of 'items'
    const modifiedItems = hideLastFewSummaryImages
        ? itemsToModify.map((item, index) => {
            // Only show 1st and 2nd item's image when `hasCoverCollage` false
            if (index > 1 && item.image && !hasCoverCollage) {
                item.image = null;
            }
            if (hasCoverCollage && index === 0) {
                item.rubricVariation = 'Inverted';
                item.shouldHideEventDate = false;
                item.metadataPrimary = '';
            }
            return item;
        })
        : itemsToModify;
    const isMainItemRecipeType = modifiedItems[0]?.contentType === 'recipe';
    const listEndIndex = hasUnderHeroItem ? 3 : undefined;
    const analyticsDataAttributeHero = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNamespace?.hero || dangerousHed);
    const analyticsDataAttributeUnder = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNamespace?.under || dangerousHed);
    const summaryItemVariationForFirstElement = hasCoverCollage
        ? SummaryItem.OverlayCenter
        : SummaryItem[summaryItemVariation];
    const stackedRatingsCardProps = getStackedRatingsCardProps(shouldShowStackedRatingsCard, dangerousHed, shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark, shouldEnableCommentsCount, shouldLimitSavingToContentTypes);
    // Create a fallback no-op function for impressionHandler
    const safeImpressionHandler = impressionHandler ||
        (() => {
            // No-op function as fallback when no impression handler is provided
            // This ensures we have a callable function but doesn't do any tracking
        });
    useViewportObserver(`.hero_summary_item`, undefined, handleHeroImpressions(safeImpressionHandler, modifiedItems));
    return (React.createElement(SummaryCollageFourWrapper, { className: classnames('summary-collage-four', className, {
            'summary-collage--without-vertical-borders': hideVerticalBorders
        }), hasTitleBorder: hasTitleBorder, hasCoverCollage: hasCoverCollage },
        renderMainItem({
            modifiedItems,
            hasCoverCollage,
            shouldShowStackedRatingsCard,
            summaryItemVariationForFirstElement,
            analyticsDataAttributeHero,
            headerHeight,
            hideRubricItemSummary,
            isMainSummaryItemSticky,
            recircRiver,
            shouldHideBylines,
            hideSummaryMainItemDeks,
            shouldHidePublishDate,
            hasBordersForFirstAndLastItem,
            shouldLimitSavingToContentTypes,
            snowplowEvent,
            windowLocation,
            stackedRatingsCardProps,
            hasRoundedBorder,
            isTitleFullWidth
        }),
        shouldShowRecipeBadge && isMainItemRecipeType && (React.createElement(SummaryCollageMainItemBadge, { award: {
                badgeUrl: '/verso/static/epicurious-us/assets/icons/featuredRecipeBadge.svg'
            }, hasStaticPositionedAward: true })),
        !shouldEnableSubItems && (React.createElement(SummaryCollageFourSummaryListItem, { className: "summary-collage-four__summary-list-item", hasUnderHeroItem: hasUnderHeroItem, hasBordersForFirstAndLastItem: hasBordersForFirstAndLastItem, hideBottomBorders: hideBottomBorders, hideVerticalBorders: hideVerticalBorders, as: SummaryList.Collection, dangerousHed: dangerousHed, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, impressionHandler: impressionHandler, shouldTrackItemImpressionForSnowplow: shouldTrackSnowplowEvent, totalItems: 2, sectionTitle: dangerousHed, placement: placement, snowplowEvent: { ...snowplowEvent, total_index: 2 }, shouldHideDangerousDek: hideSummaryListDeks, items: modifiedItems.slice(1, listEndIndex), sectionTitleVariation: sectionTitleVariation, summaryItemVariation: summaryItemVariation, shouldHideBylines: shouldHideBylines, shouldHidePublishDate: shouldHidePublishDate, trackingNamespace: trackingNamespace?.aside, recircRiver: recircRiver, hasCoverCollage: hasCoverCollage, hasRoundedBorder: hasRoundedBorder, ...stackedRatingsCardProps, shouldUseHedCoreSecondaryToken: shouldUseHedCoreSecondaryToken, shouldShowStackedRatingsCard: shouldShowStackedRatingsCard, shouldLimitSavingToContentTypes: shouldLimitSavingToContentTypes, windowLocation: windowLocation })),
        shouldEnableSubItems && (React.createElement(React.Fragment, null,
            React.createElement(SummaryCollageFourSubMainItem, { ...modifiedItems[1], hasCoverCollage: hasCoverCollage, as: shouldShowStackedRatingsCard
                    ? StackedRatingsCard
                    : summaryItemVariationForFirstElement, analyticsDataAttribute: analyticsDataAttributeHero, hideRubricItemSummary: hideRubricItemSummary, recircRiver: recircRiver, snowplowEvent: { ...snowplowEvent, total_index: 8 }, shouldHideBylines: shouldHideBylines, shouldHideDangerousDek: hideSummaryMainItemDeks, shouldHidePublishDate: shouldHidePublishDate, ...stackedRatingsCardProps, placement: placement }),
            React.createElement(SummaryCollageFourSubMainItem2, { ...modifiedItems[2], hasCoverCollage: hasCoverCollage, as: shouldShowStackedRatingsCard
                    ? StackedRatingsCard
                    : summaryItemVariationForFirstElement, analyticsDataAttribute: analyticsDataAttributeHero, hideRubricItemSummary: hideRubricItemSummary, recircRiver: recircRiver, shouldHideBylines: shouldHideBylines, shouldHideDangerousDek: hideSummaryMainItemDeks, shouldHidePublishDate: shouldHidePublishDate, ...stackedRatingsCardProps, placement: placement }))),
        hasUnderHeroItem && (React.createElement(SummaryCollageFourUnderMainItem, { ...modifiedItems[3], hasCoverCollage: hasCoverCollage, as: shouldShowStackedRatingsCard
                ? StackedRatingsCard
                : SummaryItem[underHeroItemVariation], analyticsDataAttribute: analyticsDataAttributeUnder, className: "summary-collage-four__under-main-item", hideRubricItemSummary: hideRubricItemSummary, recircRiver: recircRiver, shouldHideBylines: shouldHideBylines, shouldHideDangerousDek: hideSummaryMainItemDeks, shouldHidePublishDate: shouldHidePublishDate, ...stackedRatingsCardProps, snowplowEvent: snowplowEvent &&
                modifiedItems[3] && {
                ...snowplowEvent,
                items: [
                    {
                        content_title: modifiedItems[3].dangerousHed || '',
                        content_type: modifiedItems[3].contentType || '',
                        content_id: modifiedItems[3].copilotID || '',
                        content_url: getContentUrl(modifiedItems[3].url || '', windowLocation)
                    }
                ],
                index: 1,
                total_index: modifiedItems.length - 2,
                placement: 'hero'
            } }))));
};
SummaryCollageFour.propTypes = {
    className: PropTypes.string,
    dangerousHed: PropTypes.string,
    hasBordersForFirstAndLastItem: PropTypes.bool,
    hasCoverCollage: PropTypes.bool,
    hasRoundedBorder: PropTypes.bool,
    hasTitleBorder: PropTypes.bool,
    hasUnderHeroItem: PropTypes.bool,
    hideBottomBorders: PropTypes.bool,
    hideLastFewSummaryImages: PropTypes.bool,
    hideRubricItemSummary: PropTypes.bool,
    hideSummaryListDeks: PropTypes.bool,
    hideSummaryMainItemDeks: PropTypes.bool,
    hideVerticalBorders: PropTypes.bool,
    impressionHandler: PropTypes.func,
    isMainSummaryItemSticky: PropTypes.bool,
    isTitleFullWidth: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape(SummaryItem.propTypes)).isRequired,
    placement: PropTypes.string,
    recircRiver: PropTypes.string,
    sectionTitleVariation: PropTypes.string,
    shouldEnableBookmarkDrawers: PropTypes.bool,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldEnableCardLevelBookmark: PropTypes.bool,
    shouldEnableCommentsCount: PropTypes.bool,
    shouldEnableSubItems: PropTypes.bool,
    shouldHideBylines: PropTypes.bool,
    shouldHidePublishDate: PropTypes.bool,
    shouldLimitSavingToContentTypes: PropTypes.array,
    shouldShowRecipeBadge: PropTypes.bool,
    shouldShowStackedRatingsCard: PropTypes.bool,
    shouldTrackSnowplowEvent: PropTypes.bool,
    shouldUseHedCoreSecondaryToken: PropTypes.bool,
    snowplowEvent: PropTypes.object,
    summaryItemVariation: PropTypes.string,
    trackingNamespace: PropTypes.object,
    underHeroItemVariation: PropTypes.string,
    windowLocation: PropTypes.string
};
module.exports = SummaryCollageFour;
//# sourceMappingURL=SummaryCollageFour.js.map

/***/ }),

/***/ 199:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const SummaryCollageFour = __webpack_require__(41034);
SummaryCollageFour.displayName = 'SummaryCollageFour';
module.exports = asConfiguredComponent(SummaryCollageFour, 'SummaryCollageFour');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 99337:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { css, default: styled } = __webpack_require__(92168);
const { calculateSpacing, getColorToken, minScreen, minMaxScreen, getTypographyStyles, getColorStyles, getDecoration } = __webpack_require__(26865);
const { applyGridSpacing } = __webpack_require__(1123);
const { cssVariablesCollage, universalGridCore } = __webpack_require__(89085);
const { SectionTitleHed } = __webpack_require__(33500);
const { SummaryListTitle } = __webpack_require__(63637);
const Badge = __webpack_require__(71501);
const { BadgeImage } = __webpack_require__(34447);
const { BREAKPOINTS } = __webpack_require__(96472);
const { OverlaySummaryItemHed, OverlaySummaryItemDate, OverlaySummaryItemContent } = __webpack_require__(3265);
const { SummaryItemContent } = __webpack_require__(68116);
const SummaryCollageFourMainItem = styled.div.withConfig({
    displayName: 'SummaryCollageFourMainItem'
}) `
  && {
    grid-column: 1 / -1;
    ${({ isTitleFullWidth }) => isTitleFullWidth &&
    css `
        grid-row: 1 / span 3;
      `};
    margin-bottom: ${calculateSpacing(5)};
    border-bottom: 0;
    ${({ hasCoverCollage }) => hasCoverCollage &&
    `
      height: ${calculateSpacing(90)};
      margin-bottom: ${calculateSpacing(4)};
      .rubric{
        background-color: transparent;
        padding: unset;
      }
      ${minScreen(BREAKPOINTS.md)} {
        margin-bottom: ${calculateSpacing(6)};
      }
    `};

    ${OverlaySummaryItemHed} {
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-feature')};
      ${({ theme }) => getColorStyles(theme, 'color', 'colors.discovery.body.black.heading')};
      margin-top: ${calculateSpacing(0.5)};
      margin-bottom: 0;
    }

    ${OverlaySummaryItemDate} {
      margin-top: ${calculateSpacing(0.75)};
    }

    ${OverlaySummaryItemContent} {
      padding: 0 0 ${calculateSpacing(9)} 0;
    }

    img {
      object-fit: cover;
      object-position: top;
      ${({ hasRoundedBorder }) => hasRoundedBorder &&
    `
      border-radius:10px;
    `}
    }

    ${minScreen(BREAKPOINTS.lg)} {
      grid-column: ${({ hasCoverCollage }) => hasCoverCollage ? `1 / span 12` : `1 / span 8`};
      padding-right: 0;

      .summary-item__image-link,
      .summary-item__inline-video,
      .summary-item__content {
        padding-right: 0;
      }
    }

    ${({ isMainSummaryItemSticky }) => isMainSummaryItemSticky &&
    `
      ${minScreen(BREAKPOINTS.lg)} {
        position: sticky;
        margin-bottom: auto;
      }
    `};

    ${({ headerHeight }) => headerHeight &&
    `
      ${minScreen(BREAKPOINTS.lg)} {
        top: ${calculateSpacing(headerHeight)};
      }
    `};

    ${({ hasBordersForFirstAndLastItem }) => hasBordersForFirstAndLastItem &&
    css `
        border-bottom: 1px solid
          ${getColorToken('colors.discovery.body.white.border')};
        ${minScreen(BREAKPOINTS.sm)} {
          ${SummaryItemContent} {
            margin-bottom: ${calculateSpacing(2)};
            padding-bottom: ${calculateSpacing(0)};
          }
          margin-bottom: ${calculateSpacing(2)};
          padding-bottom: ${calculateSpacing(0)};
        }
        ${minScreen(BREAKPOINTS.md)} {
          ${SummaryItemContent} {
            margin-bottom: ${calculateSpacing(2)};
            padding-bottom: ${calculateSpacing(0)};
          }
          margin-bottom: ${calculateSpacing(1)};
        }
        ${minScreen(BREAKPOINTS.lg)} {
          ${SummaryItemContent} {
            padding-bottom: ${calculateSpacing(0)};
          }
          margin-bottom: auto;
        }
      `}
  }

  .summary-item__hed {
    ${getTypographyStyles('typography.definitions.discovery.hed-break-out')};

    ${minScreen(BREAKPOINTS.md)} {
      ${getTypographyStyles('typography.definitions.discovery.hed-feature')};
    }
  }

  .summary-item__dek {
    ${getTypographyStyles('typography.definitions.discovery.description-feature')};
  }
`;
const SummaryCollageFourSubMainItem = styled(SummaryCollageFourMainItem).withConfig({
    displayName: 'SummaryCollageFourSubMainItem'
}) ``;
const SummaryCollageMainItemBadge = styled(Badge).withConfig({
    displayName: 'SummaryCollageMainItemBadge'
}) `
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  z-index: 1;
  margin-top: ${calculateSpacing(2)};
  margin-left: ${calculateSpacing(1)};
  width: 100%;
  ${minScreen(BREAKPOINTS.lg)} {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
  }
  ${BadgeImage} {
    @media (max-width: ${BREAKPOINTS.md}) {
      width: 72px;
      height: 100%;
    }
  }
`;
const SummaryCollageFourSubMainItem2 = styled(SummaryCollageFourMainItem).withConfig({
    displayName: 'SummaryCollageFourSubMainItem2'
}) ``;
const SummaryCollageFourSummaryListItem = styled.div.withConfig({
    displayName: 'SummaryCollageFourSummaryListItem'
}) `
  --border-width: ${({ theme }) => getDecoration(theme, 'borderWidth')};

  && {
    grid-column: 1 / -1;
    margin: ${({ hasCoverCollage }) => (hasCoverCollage ? `0 auto` : `0`)};
    border-top: unset;
    padding: 0;

    .summary-item {
      margin: 0 0 ${calculateSpacing(2)};
      ${({ hasCoverCollage }) => !hasCoverCollage &&
    css `
          padding: ${calculateSpacing(2)} 0;
        `}
      ${({ hideBottomBorders }) => !hideBottomBorders &&
    css `
          border-bottom: var(--border-width, 1px) solid
            ${getColorToken('colors.discovery.body.white.border')};
        `}
        ${minScreen(BREAKPOINTS.lg)} {
        position: relative;
        margin-bottom: 0;
        overflow: hidden;
      }

      &:first-child {
        padding-top: 0;
      }

      &:last-child {
        border-bottom: none;

        ${minMaxScreen(0, BREAKPOINTS.md)} {
          margin-bottom: 0;
          padding-bottom: 0;
        }

        ${minMaxScreen(0, BREAKPOINTS.lg)} {
          &::after {
            display: none;
          }
        }
      }

      .summary-item__hed {
        ${({ shouldUseHedCoreSecondaryToken }) => shouldUseHedCoreSecondaryToken
    ? getTypographyStyles('typography.definitions.discovery.hed-core-secondary')
    : getTypographyStyles('typography.definitions.discovery.hed-bulletin-primary')}
      }

      ${({ hasCoverCollage }) => !hasCoverCollage &&
    `
        .summary-item__hed-link {
          &::after {
            display: none;
          }
        }  
      `}

      .summary-item__metadata-primary,
      .summary-item__metadata-secondary {
        display: none;
      }
    }
  }

  ${({ hasCoverCollage }) => !hasCoverCollage &&
    `
      && {
        ${minScreen(BREAKPOINTS.lg)} {
          grid-column: 9 / -1;
          margin-left: calc(var(--border-offset) * -1);
          border-left: 1px solid
            ${getColorToken('colors.discovery.body.white.border')};
          padding-left: var(--border-offset);
          width: calc(100% + var(--border-offset));
        }
      `}
  ${({ hasCoverCollage }) => hasCoverCollage &&
    `
        &&{
          ${applyGridSpacing('padding')}
          border-top: unset;
          .summary-item {
            margin: unset;
            ${minMaxScreen(0, BREAKPOINTS.md)} {
              margin-bottom: ${calculateSpacing(4)};
              padding-bottom: ${calculateSpacing(2)};
            }
            &:last-child {
              border-bottom: unset;
              padding-bottom: ${calculateSpacing(5)};
              ${minScreen(BREAKPOINTS.md)} {
                padding-bottom: ${calculateSpacing(2)};
              }
            }
          }
          ${minScreen(BREAKPOINTS.md)} {
              .summary-list__items{
                display: grid;
                grid-template-columns: repeat(12,1fr);
                column-gap: var(--grid-gap);
                row-gap: var(--grid-gap);
        
                .summary-list__item {
                  &:nth-of-type(1){
                    grid-column:1 / span 4;
                  }
                  &:nth-of-type(2){
                    grid-column:5 / span 4;
                  }
                  &:nth-of-type(3){
                    grid-column:9 / span 4;
                  }
                }
              }
            }
          }  
        }
    `}

  ${({ hideVerticalBorders }) => hideVerticalBorders &&
    `&&& {
      border-left: 0;
      padding-left: 0;
      }`}

  ${({ hasUnderHeroItem }) => hasUnderHeroItem && `grid-row-end: span 2;`}

  ${({ hasBordersForFirstAndLastItem }) => hasBordersForFirstAndLastItem &&
    css `
      .summary-item:last-child {
        border-bottom: var(--border-width, 1px) solid
          ${getColorToken('colors.discovery.body.white.border')};
        ${minScreen(BREAKPOINTS.sm)} {
          ${SummaryItemContent} {
            padding-bottom: ${calculateSpacing(0)};
          }
          margin-bottom: ${calculateSpacing(0)};
          padding-bottom: ${calculateSpacing(2)};
        }
        ${minScreen(BREAKPOINTS.md)} {
          ${SummaryItemContent} {
            margin-bottom: ${calculateSpacing(2)};
            padding-bottom: ${calculateSpacing(0)};
          }
          padding-bottom: ${calculateSpacing(0)};
        }
        ${minScreen(BREAKPOINTS.lg)} {
          margin-bottom: ${calculateSpacing(0)};
        }
      }
    `}
    img {
    ${({ hasRoundedBorder }) => hasRoundedBorder &&
    `
        border-radius:10px;
      `}
  }
`;
const SummaryCollageFourUnderMainItem = styled.div.withConfig({
    displayName: 'SummaryCollageFourUnderMainItem'
}) `
  --border-width: ${({ theme }) => getDecoration(theme, 'borderWidth')};

  grid-column: 1 / -1;

  ${minScreen(BREAKPOINTS.lg)} {
    grid-column: ${({ hasCoverCollage }) => hasCoverCollage ? `1 / span 12` : `1 / span 8`};
    border-top: var(--border-width, 1px) solid
      ${getColorToken('colors.discovery.body.white.border')};
    border-bottom: none;
  }

  .summary-item__asset-container {
    ${minScreen(BREAKPOINTS.lg)} {
      margin-top: ${calculateSpacing(1)};
      margin-bottom: auto;
    }
  }
`;
const SummaryCollageFourWrapper = styled.div.withConfig({
    displayName: 'SummaryCollageFourWrapper'
}) `
  ${universalGridCore()}
  ${cssVariablesCollage()}
  ${({ hasCoverCollage }) => !hasCoverCollage && applyGridSpacing('padding')}

  ${({ hasCoverCollage }) => hasCoverCollage &&
    `
    display: unset;
    row-gap:unset;
  `}

  ${SummaryListTitle} {
    margin-bottom: 0;
  }

  ${SectionTitleHed} {
    padding-left: 0;
  }

  ${({ hasTitleBorder }) => hasTitleBorder &&
    css `
      ${SummaryListTitle} {
        border-top: 1px solid
          ${getColorToken('colors.discovery.body.white.divider')};
        border-bottom: 1px solid
          ${getColorToken('colors.discovery.body.white.border')};
      }
    `}
`;
module.exports = {
    SummaryCollageFourMainItem,
    SummaryCollageMainItemBadge,
    SummaryCollageFourSubMainItem,
    SummaryCollageFourSubMainItem2,
    SummaryCollageFourSummaryListItem,
    SummaryCollageFourUnderMainItem,
    SummaryCollageFourWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 4690:
/***/ ((module) => {

/**
 * Constructs a full URL from a relative URL using the provided base URL
 *
 * @param {string} url - The relative or absolute URL to process
 * @param {string} [windowLocation=''] - Optional window location to use for constructing absolute URLs
 * @returns {string} The processed URL
 */
const getContentUrl = (url, windowLocation = '') => {
    try {
        // Use the passed windowLocation instead of directly accessing window
        return windowLocation ? new URL(url, windowLocation).href : url;
    }
    catch (e) {
        return url;
    }
};
/**
 * Prepares stack ratings card props if needed
 *
 * @param {boolean} shouldShowStackedRatingsCard - Whether to show stacked ratings card
 * @param {string} dangerousHed - The heading text
 * @param {boolean} shouldEnableBookmarkDrawers - Whether to enable bookmark drawers
 * @param {boolean} shouldEnableCardLevelBookmark - Whether to enable card level bookmark
 * @param {boolean} shouldEnableCommentsCount - Whether to enable comments count
 * @param {Array} shouldLimitSavingToContentTypes - Content types to limit saving to
 * @returns {object} Stack ratings card props
 */
const getStackedRatingsCardProps = (shouldShowStackedRatingsCard, dangerousHed, shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark, shouldEnableCommentsCount, shouldLimitSavingToContentTypes) => {
    if (!shouldShowStackedRatingsCard)
        return {};
    return {
        hideRubric: false,
        ratingMethod: 'starRating',
        sectionTitle: dangerousHed,
        shouldEnableBookmarkDrawers,
        shouldEnableCardLevelBookmark,
        shouldEnableCommentsCount,
        shouldLimitSavingToContentTypes
    };
};
module.exports = {
    getContentUrl,
    getStackedRatingsCardProps
};
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 69646:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState, useEffect } = __webpack_require__(96540);
const SectionTitle = __webpack_require__(35864);
const SummaryList = __webpack_require__(22539);
const SummaryItem = __webpack_require__(74992);
const StickyBox = __webpack_require__(28433);
const { PaymentGateway } = __webpack_require__(92807);
const { SummaryCollageNineTitle, SummaryCollageNineTitleWrapper, SummaryCollageNineSummaryCollageFour, SummaryCollageNineSummaryList, SummaryCollageNineGrid, SummaryCollageNineGridItemList, SummaryCollageNineGridItemListButtonWrapper, SummaryCollageNineAdRailContainer, SummaryCollageNineAdRail, SummaryCollageNineSummaryCarousel, SummaryCollageNineSummaryListItems } = __webpack_require__(92365);
const breakpoints = __webpack_require__(99906);
const { TrackComponentChannel } = __webpack_require__(78788);
const Button = __webpack_require__(88456);
const { trackNavigationEvent } = __webpack_require__(14307);
const { isDesktopBrowser } = __webpack_require__(72362);
const { useClientStatus } = __webpack_require__(8877);
/**
 * SummaryCollageNine component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.curatedSearchHed] - Optional string (possibly HTML) to use as the title for the summary list
 * @param {string} [props.dangerousDek] - Optional string (possibly HTML) to use as the title/dek
 * @param {string} [props.dangerousHed] - Optional string (possibly HTML) to use as the title
 * @param {string} [props.featuredDangerousHed] - Optional string (possibly HTML) to use as the title if shouldUseFeaturedTitleAndFooter is true
 * @param {object} [props.featuredFooter] - Optional data {link and label} for SummaryList footer
 * @param {Bool} [props.hasUnderlineHed] - Optional boolean to enable or disable underline in hed in SummaryList
 * @param {Bool} [props.hideBottomBorders] - Optional prop to hide bottom borders
 * @param {Bool} [props.hideBottomBordersforMainFour] - Optional prop to hide bottom borders for main four items
 * @param {Bool} [props.hideRubricItemSummary] - Show or hide rubrics in summary items
 * @param {Bool} [props.hideVerticalBorders] - Optional prop to hide vertical borders
 * @param {Array<SummaryItem.propTypes>} props.items - Array of items to render
 * @param {Bool} [props.isCenterAlignedWithTopDividerOnly] - Optional to align section title in the center with top divider.
 * @param {number} [props.listItemsLimit] - Optional To display initial n items within SummaryCollageSidelist, defaults to 5
 * @param {string} [props.primarySummaryItemVariation] - Optional variation of SummaryItem to use for the initial 3 items within SummaryCollageFour, defaults to `TextBelowLeft`
 * @param {string} [props.recircRiver] - Optional
 * @param {object} [props.rightColumnFeature] - Optional feature object settings
 * @param {string} [props.sectionTitleVariation] - Optional variation of SectionTitle to use, defaults to 'LineAboveLineBelowTextCenter'
 * @param {bool} [props.shouldEnableBundleComponentAnalytics] - Optional feature flag to append data-section-title attribute for analytics
 * @param {bool} [props.shouldEnableChannelFeatures] - enables channelFeatures variation of summaryCollageNine
 * @param {Bool} [props.shouldHideBylines] - Optional flag to hide bylines
 * @param {Bool} [props.shouldHideBylinesInSummaryList] - Optional flag to hide bylines in summaryList items
 * @param {Bool} [props.shouldHideDangerousDek] - Optional flag to hide dek
 * @param {Bool} [props.shouldHideDangerousDekInFeaturedItems] - Optional flag to hide dek in FeaturedItems of summarycollage Nine
 * @param {Bool} [props.shouldHideDangerousDekInSummaryList] - Optional flag to hide dek in SummaryList
 * @param {Bool} [props.shouldHoldImageSpace] - Optional flag to hold space for loading images
 * @param {Bool} [props.shouldLimitListItemsOnMobile] - Optional flag to Limit number of items in side list to be diplayed for mobile deices
 * @param {Bool} [props.shouldUseFeaturedTitleAndFooter] - Optional flag to use featuredTitleAndFooter. Pass hedWithLink prop using componentConfig VersoFeatures.shouldParseBundleHed
 * @param {Bool} [props.showTopBorderInSummaryTitle] - Optional boolean to show top borders in SummaryList, defaults to false
 * @param {Bool} [props.showSummaryCarousel] - Optional boolean to show/hide summary carousel
 * @param {string} [props.summaryItemVariation] - Optional variation of SummaryItem to use within SummaryList, defaults to `NoAssetTextCenter`
 * @param {string} [props.summaryListSummaryItemVariation] - Optional variation of SummaryItem to use within SummaryList, defaults to `SideBySideDense`
 * @param {string} [props.summaryListHed] - Optional Hed for SummaryList preferred more than curatedSearchHed
 * @param {string} [props.summarySectionTitleVariation] - Optional variation of SectionTitle to use within SummaryList, defaults to 'TextCenter'
 * @param {Bool} [props.shouldUseDekAsHed] - Optional
 * @param {object} [props.trackingNamespace] - Optional override the base namespace of data-section-title for component tracking
 * @param {boolean} [props.shouldTrackSnowplowEvent] - Optional flag to enable snowplow event capturing
 *
 * @returns {ReactElement} <div>
 */
const SummaryCollageNine = ({ className, curatedSearchHed, dangerousDek, dangerousHed, shouldEnableChannelFeatures = false, featuredDangerousHed, featuredFooter, hasUnderlineHed, hideBottomBorders = false, hideRubricItemSummary = false, hideVerticalBorders = false, hideBottomBordersforMainFour, listItemsLimit = 5, isCenterAlignedWithTopDividerOnly, items = [], primarySummaryItemVariation = 'TextBelowLeft', rightColumnFeature, recircRiver, sectionTitleVariation = 'TextLeft', shouldUseFeaturedTitleAndFooter = false, shouldEnableBundleComponentAnalytics, shouldHideBylines = false, shouldHideBylinesInSummaryList, shouldHideDangerousDek = true, shouldHideDangerousDekInFeaturedItems = false, shouldHideDangerousDekInSummaryList = true, shouldLimitListItemsOnMobile = false, shouldUseDekAsHed = false, showTopBorderInSummaryTitle = false, summaryListSummaryItemVariation = null, summaryListHed, summaryItemVariation = 'SideBySideThirdsImageRight', summarySectionTitleVariation = 'TextLeft', trackingNamespace, showSummaryCarousel = true, shouldTrackSnowplowEvent = false }) => {
    const [isShowMore, setIsShowMore] = React.useState(true);
    const isMobile = !isDesktopBrowser();
    const isClient = useClientStatus();
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SummaryCollageNine'
        });
    }, []);
    const SectionTitleComponent = SectionTitle[sectionTitleVariation];
    const updatedDangerousHed = shouldUseFeaturedTitleAndFooter
        ? featuredDangerousHed || dangerousHed
        : dangerousHed;
    const displayHed = shouldUseDekAsHed ? dangerousDek : updatedDangerousHed;
    const displayDek = !shouldHideDangerousDek ? dangerousDek : '';
    const summaryListHeading = summaryListHed || curatedSearchHed;
    const hasHed = !!displayHed;
    const TOTAL_LIST_ITEMS = 5;
    const [listItemsVisible, setListItemsVisible] = useState(TOTAL_LIST_ITEMS);
    let listProps = {};
    const onShowClicked = () => {
        const itemsToDisplay = isShowMore ? TOTAL_LIST_ITEMS : listItemsLimit;
        setListItemsVisible(itemsToDisplay);
        setIsShowMore(!isShowMore);
    };
    if (rightColumnFeature) {
        listProps = {
            hasFeatured: true,
            summaryItemFeatured: rightColumnFeature
        };
    }
    const snowplowEvent = {
        type: 'click',
        label: displayHed,
        subject: 'summary_collage_nine',
        subject_version: isMobile ? 'mobile_dense' : 'default'
    };
    const trackSnowplowEvent = (eventType, item, index, placement, total_index, subjectVersion) => {
        // Add tracking state to prevent duplicate impressions
        if (shouldTrackSnowplowEvent && !item._impressionTracked) {
            trackNavigationEvent({
                type: eventType,
                label: displayHed,
                subject: 'summary_collage_nine',
                items: [
                    {
                        content_title: item.dangerousHed || '',
                        content_type: item.contentType || '',
                        content_id: item.copilotID || '',
                        content_url: new URL(item.url || '', window.location.origin)
                    }
                ],
                index,
                total_index,
                placement,
                subject_version: isMobile ? subjectVersion || 'mobile_dense' : 'default'
            });
            // Mark this item as having had its impression tracked
            if (eventType === 'impression') {
                item._impressionTracked = true;
            }
        }
    };
    useEffect(() => {
        if (shouldLimitListItemsOnMobile &&
            window.innerWidth < breakpoints.minThresholds.xl) {
            setListItemsVisible(listItemsLimit);
        }
    }, [listItemsLimit, shouldLimitListItemsOnMobile]);
    return (React.createElement(SummaryCollageNineGrid, { className: classnames('summary-collage-nine', {
            'summary-collage--without-vertical-borders': hideVerticalBorders
        }, className), enableChannelFeatures: shouldEnableChannelFeatures },
        displayHed && (React.createElement(SummaryCollageNineTitleWrapper, { showTopBorderInSummaryTitle: showTopBorderInSummaryTitle, enableChannelFeatures: shouldEnableChannelFeatures },
            React.createElement(SummaryCollageNineTitle, { as: SectionTitleComponent, dangerousHed: displayHed, dangerousDek: displayDek, enableChannelFeatures: shouldEnableChannelFeatures }))),
        React.createElement(SummaryCollageNineSummaryCollageFour, { shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, items: items.slice(0, 4), hasBorder: !hideBottomBorders, hideBottomBorders: hideBottomBordersforMainFour, hasUnderHeroItem: true, hideLastFewSummaryImages: false, hideSummaryListDeks: shouldHideDangerousDekInFeaturedItems, hideSummaryMainItemDeks: shouldHideDangerousDekInFeaturedItems, hideVerticalBorders: hideVerticalBorders, recircRiver: recircRiver, enableChannelFeatures: shouldEnableChannelFeatures, shouldHideBylines: shouldHideBylines, summaryItemVariation: primarySummaryItemVariation, trackingNamespace: trackingNamespace?.main, underHeroItemVariation: summaryItemVariation, shouldEnableSubItems: shouldEnableChannelFeatures, shouldTrackSnowplowEvent: shouldTrackSnowplowEvent, snowplowEvent: {
                ...snowplowEvent,
                total_index: 1,
                placement: 'secondary'
            }, impressionHandler: trackSnowplowEvent, placement: "secondary", windowLocation: isClient ? window.location.origin : '' }),
        shouldEnableChannelFeatures && (React.createElement(React.Fragment, null,
            React.createElement(SummaryCollageNineSummaryListItems, { hideVerticalBorders: true, as: SummaryList.Collection, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, hasSectionTitlePrimary: false, shouldHideDangerousDek: true, items: items.slice(0, 4), summaryItemVariation: "TextBelowLeft", shouldHideBylines: shouldHideBylines, shouldHidePublishDate: true, trackingNamespace: trackingNamespace?.aside, recircRiver: recircRiver, hasUnderlineHed: false, rubricVariation: "DiscoveryItem", shouldTrackItemImpressionForSnowplow: shouldTrackSnowplowEvent, shouldTrackSnowplowEvent: shouldTrackSnowplowEvent, snowplowEvent: { ...snowplowEvent, total_index: 1 }, windowLocation: isClient ? window.location.origin : '' }),
            showSummaryCarousel && (React.createElement(SummaryCollageNineSummaryCarousel, { items: items.slice(4, 4 + listItemsVisible), summaryItemVariation: "SideBySideDenseNoAsset", shouldEnableChannelFeatures: shouldEnableChannelFeatures, shouldShowViewAllButton: false, shouldHideBylines: true, shouldHideDangerousDek: true, shouldHidePublishDate: true, hasCarouselControls: false, shouldHideCarouselFooter: true, isSummaryHeadingSecondary: true, shouldShowAllContentWhenDense: true, hasModerateSpacing: false, shouldTrackItemImpressionForSnowplow: shouldTrackSnowplowEvent, totalItems: 5, impressionHandler: trackSnowplowEvent, snowplowEvent: {
                    ...snowplowEvent,
                    total_index: 5,
                    placement: 'right_rail'
                }, placement: "right_rail" })))),
        React.createElement(SummaryCollageNineGridItemList, { hasHed: hasHed, isCenterAlignedWithTopDividerOnly: isCenterAlignedWithTopDividerOnly, enableChannelFeatures: shouldEnableChannelFeatures, showSummaryCarousel: showSummaryCarousel },
            React.createElement(SummaryCollageNineSummaryList, { ...listProps, displayHed: displayHed, dangerousHed: summaryListHeading, enableChannelFeatures: shouldEnableChannelFeatures, footerWithLink: shouldUseFeaturedTitleAndFooter ? featuredFooter : {}, hasUnderlineHed: hasUnderlineHed, hideBottomBorders: hideBottomBorders, hideRubricItemSummary: hideRubricItemSummary, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, shouldHideDangerousDek: shouldHideDangerousDekInSummaryList, shouldHidePublishDate: true, shouldHoldImageSpace: false, items: items.slice(4, 4 + listItemsVisible), windowLocation: isClient ? window.location.origin : '', sectionTitleVariation: summarySectionTitleVariation, summaryItemVariation: summaryListSummaryItemVariation || summaryItemVariation, recircRiver: recircRiver, shouldHideBylines: shouldHideBylines || shouldHideBylinesInSummaryList, trackingNamespace: trackingNamespace?.rightRail, impressionHandler: trackSnowplowEvent, shouldTrackItemImpressionForSnowplow: shouldTrackSnowplowEvent, totalItems: 5, snowplowEvent: {
                    ...snowplowEvent,
                    subject_version: isMobile ? 'mobile_dense-off_canvas' : 'default',
                    total_index: 5,
                    placement: 'right_rail'
                }, placement: "right_rail" }),
            React.createElement(SummaryCollageNineGridItemListButtonWrapper, null, shouldLimitListItemsOnMobile && (React.createElement(Button.Primary, { className: "button--show-list", onClickHandler: onShowClicked, label: isShowMore ? 'Show More' : 'Show Less', inputKind: "button" })))),
        shouldEnableChannelFeatures && (React.createElement(SummaryCollageNineAdRailContainer, { className: "grid-layout__aside" },
            React.createElement(StickyBox, null,
                React.createElement(PaymentGateway, { group: "ads" },
                    React.createElement(SummaryCollageNineAdRail, { position: "rail" })))))));
};
SummaryCollageNine.propTypes = {
    className: PropTypes.string,
    curatedSearchHed: PropTypes.string,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    featuredDangerousHed: PropTypes.string,
    featuredFooter: PropTypes.shape({
        link: PropTypes.string,
        label: PropTypes.string
    }),
    hasUnderlineHed: PropTypes.bool,
    hideBottomBorders: PropTypes.bool,
    hideBottomBordersforMainFour: PropTypes.bool,
    hideRubricItemSummary: PropTypes.bool,
    hideVerticalBorders: PropTypes.bool,
    isCenterAlignedWithTopDividerOnly: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape(SummaryItem.propTypes)),
    listItemsLimit: PropTypes.number,
    primarySummaryItemVariation: SummaryList.propTypes.summaryItemVariation,
    recircRiver: PropTypes.string,
    rightColumnFeature: PropTypes.shape({
        ctaUrl: PropTypes.string,
        header: PropTypes.string,
        ctaTextLabel: PropTypes.string,
        itemIndex: PropTypes.number,
        hideOnMobile: PropTypes.bool
    }),
    sectionTitleVariation: PropTypes.string,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldEnableChannelFeatures: PropTypes.bool,
    shouldHideBylines: PropTypes.bool,
    shouldHideBylinesInSummaryList: PropTypes.bool,
    shouldHideDangerousDek: PropTypes.bool,
    shouldHideDangerousDekInFeaturedItems: PropTypes.bool,
    shouldHideDangerousDekInSummaryList: PropTypes.bool,
    shouldLimitListItemsOnMobile: PropTypes.bool,
    shouldTrackSnowplowEvent: PropTypes.bool,
    shouldUseDekAsHed: PropTypes.bool,
    shouldUseFeaturedTitleAndFooter: PropTypes.bool,
    showSummaryCarousel: PropTypes.bool,
    showTopBorderInSummaryTitle: PropTypes.bool,
    summaryItemVariation: SummaryList.propTypes.summaryItemVariation,
    summaryListHed: PropTypes.string,
    summaryListSummaryItemVariation: PropTypes.string,
    summarySectionTitleVariation: PropTypes.string,
    trackingNamespace: PropTypes.object
};
SummaryCollageNine.displayName = 'SummaryCollageNine';
module.exports = SummaryCollageNine;
//# sourceMappingURL=SummaryCollageNine.js.map

/***/ }),

/***/ 74563:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const SummaryCollageNine = __webpack_require__(69646);
SummaryCollageNine.displayName = 'SummaryCollageNine';
module.exports = asConfiguredComponent(SummaryCollageNine, 'SummaryCollageNine');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 92365:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { css, default: styled } = __webpack_require__(92168);
const { BREAKPOINTS } = __webpack_require__(96472);
const { calculateSpacing, getColorToken, getTypographyStyles, minScreen, maxScreen, minMaxScreen, getDecoration } = __webpack_require__(26865);
const { applyGridSpacing, cssVariablesGrid } = __webpack_require__(1123);
const { cssVariablesCollage } = __webpack_require__(89085);
const { GridWrapper, GridItem } = __webpack_require__(40653);
const { SectionTitleHed, SectionTitleDek } = __webpack_require__(33500);
const SummaryCollageFour = __webpack_require__(199);
const SummaryList = __webpack_require__(22539);
const SummaryCarousel = __webpack_require__(43709);
const { SummaryCollageFourUnderMainItem, SummaryCollageFourSummaryListItem, SummaryCollageFourMainItem, SummaryCollageFourSubMainItem, SummaryCollageFourSubMainItem2 } = __webpack_require__(99337);
const { SummaryItemFeaturedWrapper, FeaturedTitle, FeaturedLink } = __webpack_require__(56503);
const { SummaryItemDek, SummaryItemHedLink, SummaryItemWrapper, SummaryItemContent, SummaryItemAssetContainer } = __webpack_require__(68116);
const { SummaryItemHedBase } = __webpack_require__(36211);
const { RubricWrapper } = __webpack_require__(6613);
const Ad = __webpack_require__(19607);
const SummaryCollageNineTitle = styled.div.withConfig({
    displayName: 'SummaryCollageNineTitle'
}) `
  ${SectionTitleHed} {
    ${getTypographyStyles('typography.definitions.discovery.subhed-section-collection')}
  }
  ${({ enableChannelFeatures }) => enableChannelFeatures &&
    `
  ${SectionTitleDek} {
    margin-bottom: ${calculateSpacing(2)};
  }
  `}
`;
const SummaryCollageNineTitleWrapper = styled.div.withConfig({
    displayName: 'SummaryCollageNineTitleWrapper'
}) `
  --border-width: ${({ theme }) => getDecoration(theme, 'borderWidth')};

  grid-column: 1 / -1;
  align-self: flex-end;
  order: 2;

  border-bottom: var(--border-width, 1px) solid
    ${getColorToken('colors.discovery.body.white.border')};
  padding-bottom: ${calculateSpacing(1)};

  ${minScreen(BREAKPOINTS.lg)} {
    grid-column: 10 / span 3;
    grid-row: 1 / span 1;
    margin-left: calc(var(--border-offset) * -1);
    border-top: none;
    border-bottom: none;
    border-left: var(--border-width, 1px) solid
      ${getColorToken('colors.discovery.body.white.border')};
    padding-left: var(--border-offset);
    width: calc(100% + var(--border-offset));
  }

  ${({ showTopBorderInSummaryTitle }) => {
    showTopBorderInSummaryTitle &&
        /* adds a border above section title that do not attaches with the
           vertical border beside it  */
        css `
        border-top: var(--border-width, 1px) solid
          ${getColorToken('colors.discovery.body.white.border')};

        ${minScreen(BREAKPOINTS.lg)} {
          position: relative;

          &::before {
            position: absolute;
            top: 0;
            left: var(--border-offset);
            background-color: ${getColorToken('colors.discovery.body.white.border')};
            width: calc(100% - var(--border-offset));
            height: 1px;
            content: '';
          }
        }
      `;
}}
`;
const SummaryCollageNineSummaryCollageFour = styled(SummaryCollageFour).withConfig({
    displayName: 'SummaryCollageNineSummaryCollageFour'
}) `
  grid-column: 1 / -1;
  ${({ enableChannelFeatures }) => enableChannelFeatures &&
    `
  @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
    display: none;
  }`};

  &&& {
    grid-template-columns: repeat(4, 1fr);
    order: 1;
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;

    .summary-item,
    .summary-item--has-border {
      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
        border-bottom: 0;
      }
    }

    .summary-list--collection-list {
      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
        border-top: 0;
      }
    }

    ${({ enableChannelFeatures, theme }) => enableChannelFeatures &&
    `
      ${SummaryItemHedLink} {
        &::after {
display: none;
        }
      }
        ${minScreen(BREAKPOINTS.lg)} {
          grid-row: 2;
        }
        ${SummaryCollageFourMainItem} {
          ${minScreen(BREAKPOINTS.lg)} {
            grid-column: 4 / span 3;
            grid-row: 1;
          }
          @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
            grid-column: 5 / span 4;
            grid-row: 1;
          }
          @media (min-width: ${BREAKPOINTS.md}) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
            border-bottom: var(--border-width, 1px) solid ${getColorToken(theme, 'colors.discovery.body.white.border')};
          }
        }
        ${SummaryCollageFourSubMainItem} {
          ${minScreen(BREAKPOINTS.lg)} {
            grid-column: 1 / span 3;
            grid-row: 1;
          }
          @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
            grid-column: 1 / span 4;
            grid-row: 1;
          }
          @media (min-width: ${BREAKPOINTS.md}) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
            border-bottom: var(--border-width, 1px) solid ${getColorToken(theme, 'colors.discovery.body.white.border')};
          }
        }
        ${SummaryCollageFourSubMainItem2} {
          ${minScreen(BREAKPOINTS.lg)} {
            grid-column: 1 / span 3;
            grid-row: 2;
          }
          @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
            grid-column: 1 / span 4;
            grid-row: 2;
          }
          @media (min-width: ${BREAKPOINTS.md}) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
            border-bottom: var(--border-width, 1px) solid ${getColorToken(theme, 'colors.discovery.body.white.border')};
          }
        }
        ${SummaryCollageFourUnderMainItem} {  
          ${minScreen(BREAKPOINTS.lg)} {
            border-top: none;
            grid-column: 4 / span 3;
            grid-row: 2;
          }
          @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
            grid-column: 5 / span 4;
            grid-row: 2;
          }
          @media (min-width: ${BREAKPOINTS.md}) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
            border-bottom: var(--border-width, 1px) solid ${getColorToken(theme, 'colors.discovery.body.white.border')};
          }
        }
        @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
grid-column: 1 / span 8;
grid-row: 2;
grid-template-columns: repeat(8, 1fr);
        }
        `}

    ${minScreen(BREAKPOINTS.lg)} {
      grid-column-gap: var(--grid-gap);
      grid-column: 1 / span 9;
      ${({ enableChannelFeatures }) => !enableChannelFeatures &&
    `
      grid-row: 1 / span 3; `}
      grid-template-columns: repeat(9, 1fr);
      grid-template-rows: minmax(${calculateSpacing(5)}, auto) 1fr;
      grid-row-gap: ${calculateSpacing(2)};
    }
    ${SummaryCollageFourMainItem} {
      position: unset;
      margin-bottom: 0;
      border-bottom: none;

      ${({ enableChannelFeatures }) => !enableChannelFeatures &&
    `
      ${minScreen(BREAKPOINTS.lg)} {
        grid-column: 4 / -1;
      }`}

      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
        padding-bottom: ${calculateSpacing(1)};
      }

      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.md} - 1px)) {
        padding-bottom: ${calculateSpacing(2)};
      }

      .summary-item__dek {
        display: block;
      }

      .summary-item__content {
        margin-bottom: 0;
        padding-bottom: 0;
      }

      .summary-item__image-link {
        padding-right: 0;

        @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
        }
      }

      .summary-item__byline {
        @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
          margin-bottom: 0;
        }
      }
    }

    ${SummaryCollageFourUnderMainItem} {
      border-bottom: none;
      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg})) {
        ${({ enableChannelFeatures, theme }) => enableChannelFeatures &&
    `display: block; 
    @media (min-width: ${BREAKPOINTS.md}) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
      border-bottom: var(--border-width, 1px) solid ${getColorToken(theme, 'colors.discovery.body.white.border')};
  }`}
      }
      ${({ enableChannelFeatures }) => !enableChannelFeatures &&
    `
        ${minScreen(BREAKPOINTS.lg)} {
          grid-column: 4 / -1;
        }`}

      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
        display: block;
      }

      .summary-item__dek {
        display: block;
      }

      .summary-item__content {
        ${minScreen(BREAKPOINTS.lg)} {
          ${({ enableChannelFeatures }) => {
    if (enableChannelFeatures)
        return `margin-top: 0;
    padding: ${calculateSpacing(2)} 0 ${calculateSpacing(4)};`;
    return `margin-top: ${calculateSpacing(2)};`;
}}
        }

        @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
          padding: ${calculateSpacing(2)} 0 ${calculateSpacing(4)};
        }

        @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
          padding-bottom: ${calculateSpacing(2)};
        }
      }

      .summary-item__image-link {
        ${minScreen(BREAKPOINTS.lg)} {
          ${({ enableChannelFeatures }) => {
    if (enableChannelFeatures)
        return `margin-top: 0;`;
    return `margin-top: ${calculateSpacing(2)};`;
}}
        }
        @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg})) {
          ${({ enableChannelFeatures }) => enableChannelFeatures && ` max-width: 100%;`}
        }
      }
    }

    ${SummaryCollageFourSummaryListItem} {
      .summary-item:last-child {
        @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
          padding-bottom: ${calculateSpacing(1)};
        }

        @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.md} - 1px)) {
          padding-bottom: ${calculateSpacing(2)};
        }
      }
      ${minScreen(BREAKPOINTS.lg)} {
        grid-column: 1 / span 3;
        grid-row-start: 1;
        margin: 0 calc(var(--border-offset) * -1) 0 0;
        border-right: var(--border-width, 1px) solid
          ${getColorToken('colors.discovery.body.white.border')};
        border-left: none;
        padding-right: var(--border-offset);
        padding-left: 0;
      }

      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
        margin-bottom: ${calculateSpacing(2)};
      }

      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
        margin-bottom: 0;
      }

      .summary-item__hed {
        /* TOFIX: Lots of overrides happening here, this reassigns the default token for .summary-item__hed */
        ${getTypographyStyles('typography.definitions.discovery.hed-core-primary')}
      }

      .summary-item__dek {
        display: block;
      }

      .summary-item--has-border {
        margin-bottom: 0;
      }

      .summary-item__content {
        padding-bottom: 0;
      }

      .summary-item--has-rule .summary-item__hed-link::after {
        display: block;
      }
    }
  }
`;
const SummaryCollageNineSummaryList = styled(SummaryList.Collection).withConfig({
    displayName: 'SummaryCollageNineSummaryList'
}) `
  --border-width: ${({ theme }) => getDecoration(theme, 'borderWidth')};

  ${SummaryItemWrapper} {
    ${({ enableChannelFeatures }) => enableChannelFeatures &&
    `
   ${RubricWrapper} {
   display: block;
   grid-row: 1;
   }
 ${SummaryItemContent} {
  grid-row: 2;
}`}
  }

  &&& {
    order: 3;
    margin: 0;
    border-top: none;
    padding: 0;

    ${minScreen(BREAKPOINTS.lg)} {
      grid-column: 10 / span 3;
      grid-row: 2 / span 2;
      margin-left: calc(var(--border-offset) * -1);
      border-left: var(--border-width, 1px) solid
        ${getColorToken('colors.discovery.body.white.border')};
      padding-right: 0;
      padding-left: var(--border-offset);
      width: calc(100% + var(--border-offset));
      height: 100%;
    }

    /* reset width of child elements */
    &: {
      width: auto;
    }

    .summary-list__item {
      grid-template-areas: 'content image';
      grid-template-columns: 1fr 75px;
      padding-top: ${calculateSpacing(2)};
      padding-bottom: ${calculateSpacing(2)};

      &:first-of-type {
        ${minScreen(BREAKPOINTS.lg)} {
          border-top: var(--border-width, 1px) solid
            ${getColorToken('colors.discovery.body.white.border')};
          padding-top: ${calculateSpacing(2.5)};
        }
      }

      &:last-of-type {
        ${minScreen(BREAKPOINTS.lg)} {
          border-bottom: none;
        }

        @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
          padding-bottom: 0;
        }
      }

      &.summary-item--has-border {
        margin-bottom: 0;
      }

      &.summary-item--layout-placement-side-by-side {
        grid-column-gap: var(--grid-gap);
      }

      .summary-item__image-link {
        align-self: start;
        max-width: 75px;
        height: auto;
      }

      .summary-item__hed {
        ${getTypographyStyles('typography.definitions.discovery.hed-bulletin-primary')}
        margin-bottom: ${calculateSpacing(1)};
      }
    }
    ${({ displayHed }) => !displayHed &&
    ` && {
        order: 2;

        ${minScreen(BREAKPOINTS.lg)} {
          grid-row: 1 / span 3;
        }
    
        .summary-list__item {
          &:first-of-type {
            ${minScreen(BREAKPOINTS.lg)} {
              border-top: none;
              padding-top: 0;
            }
          }
        }
      }
    `}
  }
`;
const SummaryCollageNineGridItemList = styled.div.withConfig({
    displayName: 'SummaryCollageNineGridItemList'
}) `
  ${({ isCenterAlignedWithTopDividerOnly, theme }) => isCenterAlignedWithTopDividerOnly &&
    `${GridWrapper}{
      ${GridItem} {
        .summary-list__items {
          ${SummaryItemFeaturedWrapper} {
            ${SummaryItemHedLink} {
              ${SummaryItemHedBase} {
                text-transform: capitalize;
                line-height: 1.45em;
                ${getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-secondary')};
                color: ${getColorToken('colors.discovery.body.white.heading')};
                padding-top: 0;
              }
            }

            ${SummaryItemDek} {
              ${getTypographyStyles(theme, 'typography.definitions.discovery.description-core')};
              padding-bottom: 8px;
              text-transform: none;
              color: ${getColorToken(theme, 'colors.discovery.body.white.description')};
            }

            ${FeaturedTitle} {
              color:
              ${getColorToken(theme, 'colors.consumption.lead.standard.context-signature')};
              ${getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-primary')};
              text-align: center;
              padding-top: 20px;
              border-bottom: none;
              padding-bottom: 0;
              border-top: var(--border-width, 1px) solid;
              border-top-color: ${getColorToken(theme, 'colors.discovery.body.white.border')};;
            }

            ${FeaturedLink} {
              padding-top:24px;
              padding-bottom: 24px;
              color: ${getColorToken(theme, 'colors.discovery.body.white.description')};
            }
          }
        }
      }
    }`}

  grid-column: 1 / -1;
  order: ${({ hasHed }) => (hasHed ? 3 : 2)};

  ${({ enableChannelFeatures, theme }) => enableChannelFeatures &&
    `
  @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
    grid-column: 1 / span 12;
    padding-top: 32px;
}
${SummaryItemWrapper} {
  border-bottom: var(--border-width, 1px) solid ${getColorToken(theme, 'colors.discovery.body.white.border')};
}
${SummaryItemAssetContainer} {
  display: none;
}
  `}

  ${({ enableChannelFeatures, showSummaryCarousel }) => enableChannelFeatures &&
    showSummaryCarousel &&
    `
    @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.md} - 1px)) {
      display: none;
    }
  `}

  ${minScreen(BREAKPOINTS.lg)} {
    ${({ enableChannelFeatures }) => {
    if (enableChannelFeatures)
        return `grid-column: 7 / span 2;`;
    return `grid-column: 10 / span 3;`;
}}
    grid-row: ${({ hasHed }) => (hasHed ? '2 / span 2' : '1 / span 3')};
  }

  .summary-list__item--before-hidden {
    border-bottom: none;
  }
`;
const SummaryCollageNineAdRailContainer = styled.div.withConfig({
    displayName: 'SummaryCollageNineAdRailContainer'
}) `
  display: block;
  grid-column: 10 / span 3;
  @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
    display: none;
  }
`;
const SummaryCollageNineAdRail = styled(Ad).withConfig({
    displayName: 'SummaryCollageNineAdRail'
}) ``;
const SummaryCollageNineGridItemListButtonWrapper = styled.div.withConfig({
    displayName: 'SummaryCollageNineGridItemListButtonWrapper'
}) `
  display: flex;
  align-items: center;
  justify-content: center;

  ${minScreen(BREAKPOINTS.lg)} {
    display: none;
  }

  .button--show-list {
    margin-top: ${calculateSpacing(4)};
  }
`;
const SummaryCollageNineSummaryListItems = styled.div.withConfig({
    displayName: 'SummaryCollageNineSummaryListItems'
}) `
  &&&&& {
    ${minScreen(BREAKPOINTS.lg)} {
      display: none;
    }
  }

  && {
    grid-column: 1 / span 12;
    grid-row: 2;
    margin: 0;
    border-top: none;
    padding: 0;

    .summary-item {
      margin: 0 0 ${calculateSpacing(2)};
      padding: ${calculateSpacing(2.5)} 0;
      ${minScreen(BREAKPOINTS.lg)} {
        position: relative;
        margin-bottom: 0;
        overflow: hidden;
      }

      &:first-child {
        ${minScreen(BREAKPOINTS.lg)} {
          padding-top: 0;
        }
        ${maxScreen(BREAKPOINTS.md)} {
          padding-top: ${calculateSpacing(2.5)};
        }
      }

      &:last-child {
        ${minMaxScreen(0, BREAKPOINTS.md)} {
          margin-bottom: 0;
          padding-bottom: 0;
        }

        ${minMaxScreen(0, BREAKPOINTS.lg)} {
          &::after {
            display: none;
          }
        }
      }

      .summary-item__hed {
        ${getTypographyStyles('typography.definitions.discovery.hed-core-primary')}
        color:  ${getColorToken('colors.discovery.body.white.heading')};
      }

      .summary-item__metadata-primary,
      .summary-item__metadata-secondary {
        display: none;
      }
    }
  }

  && {
    ${minScreen(BREAKPOINTS.lg)} {
      grid-column: 9 / -1;
      margin-left: calc(var(--border-offset) * -1);
      padding-left: var(--border-offset);
      width: calc(100% + var(--border-offset));
    }
    ${({ hideVerticalBorders }) => hideVerticalBorders &&
    `&&& {
    border-left: 0;
    padding-left: 0;
    }`}

    ${({ hasUnderHeroItem }) => hasUnderHeroItem && `grid-row-end: span 3;`}

.summary-item:last-child {
      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
        border-bottom: var(--border-width, 1px) solid
          ${getColorToken('colors.discovery.body.white.border')};
        padding-bottom: ${calculateSpacing(2.5)};
      }
    }
    ${minScreen(BREAKPOINTS.lg)} {
      grid-column: 1 / span 3;
      grid-row-start: 1;
      margin: 0 calc(var(--border-offset) * -1) 0 0;
      padding-right: var(--border-offset);
      padding-left: 0;
    }

    @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
      margin-bottom: ${calculateSpacing(2)};
    }

    @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
      margin-bottom: 0;
    }

    .summary-item__hed {
      /* TOFIX: Lots of overrides happening here, this reassigns the default token for .summary-item__hed */
      ${getTypographyStyles('typography.definitions.discovery.hed-core-primary')}
    }

    .summary-item__dek {
      display: block;
    }

    .summary-item--has-border {
      margin-bottom: 0;
    }

    .summary-item__content {
      padding-bottom: 0;
    }

    .summary-item--has-rule .summary-item__hed-link::after {
      display: block;
    }
  }
`;
const SummaryCollageNineGrid = styled.div.withConfig({
    displayName: 'SummaryCollageNineGrid'
}) `
  ${cssVariablesGrid()}
  ${cssVariablesCollage()}
    ${applyGridSpacing('padding')}
  
    display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--grid-gap);
  margin: 0 auto;
  width: 100%;
  max-width: ${BREAKPOINTS.xxl};
  row-gap: 0;

  ${minScreen(BREAKPOINTS.md)} {
    grid-template-columns: repeat(12, 1fr);
  }

  ${({ enableChannelFeatures, theme }) => enableChannelFeatures &&
    `
  ${SummaryCollageNineTitleWrapper} {
      grid-column: 1 / span 12;
      border-left: none;
      border-bottom: none;
      padding-bottom: 0;
  }
    ${SummaryCollageNineSummaryCollageFour} {
    ${SummaryItemHedBase} {
        ${getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-primary')}
    }
  }
  
    ${SummaryCollageNineGridItemList} {
      ${GridWrapper} {
        border-left: none;
        ${SummaryItemWrapper} {
        &:first-of-type {
          border-top: none;
          padding-top: 0;
        }
        }
      }
      ${SummaryItemHedBase} { 
        ${getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-secondary')}
    } }
  
    `}

  ${minScreen(BREAKPOINTS.lg)} {
    ${({ enableChannelFeatures }) => {
    if (enableChannelFeatures)
        return ` grid-template-rows: auto;`;
    return ` grid-template-rows: minmax(${calculateSpacing(4)}, auto) repeat(2, 1fr);`;
}}
  }

  .summary-item--has-border {
    &:last-child {
      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
        margin-bottom: 0;
        border-bottom: 0;
      }
    }
  }
`;
const SummaryCollageNineSummaryCarousel = styled(SummaryCarousel).withConfig({
    displayName: 'SummaryCollageNineSummaryCarousel'
}) ``;
module.exports = {
    SummaryCollageNineTitle,
    SummaryCollageNineTitleWrapper,
    SummaryCollageNineSummaryCollageFour,
    SummaryCollageNineSummaryList,
    SummaryCollageNineGrid,
    SummaryCollageNineGridItemList,
    SummaryCollageNineGridItemListButtonWrapper,
    SummaryCollageNineAdRailContainer,
    SummaryCollageNineAdRail,
    SummaryCollageNineSummaryCarousel,
    SummaryCollageNineSummaryListItems
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 97718:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { asConfiguredComponent } = __webpack_require__(12892);
const SectionTitle = __webpack_require__(35864);
const SummaryItem = __webpack_require__(74992);
const { componentTracking } = __webpack_require__(90090);
const CollageVideoItem = __webpack_require__(97857);
const { TrackComponentChannel } = __webpack_require__(78788);
const { withCustomTheme } = __webpack_require__(15236);
const { SummaryCollageOneTitle, SummaryCollageOneCtaLink, SummaryCollageOneGridWithMargin, SummaryCollageOneIsFullBleed, SummaryCollageOneItemComponent, SummaryCollageOneAnchorLink, SummaryCollageOneCtaIcon, SummaryCollageOneAside, SummaryCollageOneDangerousDek, SectionTitleLinkHTML } = __webpack_require__(52679);
const SummaryDek = __webpack_require__(49989);
const StickyBox = __webpack_require__(28433);
const { PaymentGateway } = __webpack_require__(92807);
const Ad = __webpack_require__(19607);
const { inlineEmbedPosition } = __webpack_require__(62327);
const FeatureLink = ({ analyticsDataAttribute, ctaLink = {}, showCtaIcon = false, dangerousDek, showCartoonLink }) => {
    if (showCartoonLink && dangerousDek) {
        return (React.createElement(SummaryCollageOneDangerousDek, { "data-testid": "SummaryCollageOneDangerousDek" },
            React.createElement(SectionTitleLinkHTML, { dangerouslySetInnerHTML: { __html: dangerousDek } })));
    }
    const { label, html, url, icon } = ctaLink;
    if (!html && (!label || !url)) {
        return null;
    }
    return (React.createElement(SummaryCollageOneCtaLink, { ...analyticsDataAttribute, showCtaIcon: showCtaIcon },
        showCtaIcon && icon && React.createElement(SummaryCollageOneCtaIcon, { icon: icon }),
        html ? (React.createElement("span", { dangerouslySetInnerHTML: { __html: html } })) : (React.createElement(SummaryCollageOneAnchorLink, { "data-testid": "SummaryCollageOneAnchorLink", href: url, dangerouslySetInnerHTML: { __html: label }, showCtaIcon: showCtaIcon }))));
};
FeatureLink.propTypes = {
    analyticsDataAttribute: PropTypes.object,
    ctaLink: PropTypes.shape({
        html: PropTypes.string,
        label: PropTypes.string,
        url: PropTypes.string
    }),
    dangerousDek: PropTypes.string,
    showCartoonLink: PropTypes.bool,
    showCtaIcon: PropTypes.bool
};
/**
 * SummaryCollageOne component
 *
 * @param {object} props - React props
 * @param {object} [props.ctaLink] - Optional href data to render at the end of the collage card
 * @param {string} [props.ctaLink.html] - raw HTML to render for appendix link (enables editors to create links with copilot markdown)
 * @param {string} [props.ctaLink.label] - string with text
 * @param {string} [props.ctaLink.url] - raw HTML to render for appendix link (enables editors to create links with copilot markdown)
 * @param {string} [props.ctaLink.icon] - Icon for the CTA
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.customizedBackgroundColorToken] - Optional background color token in case brands wants to use for collage one
 * @param {string} [props.customizedBylineColorToken] - Optional to set brand specific color token for summary item byline
 * @param {string} [props.customizedPublishDateColorToken] - Optional to set brand specific color token for summary item publish date
 * @param {string} [props.customizedSectionDekColorToken] - Optional to set brand specific color token for summary collage dek
 * @param {string} [props.customizedSectionDekTypeToken] - Optional to set brand specific font for summary collage dek
 * @param {string} [props.customizedSectionTitleColorToken] - Optional to set brand specific section title color token
 * @param {string} [props.customNativeBackgroundColor] - Optional custom color to show native background
 * @param {string} [props.dangerousHed] - Optional hed for section title
 * @param {string} [props.dangerousDek] - Optional dek for section title
 * @param {bool} [props.hasFullWidthImage] - Optional boolean to enable or disable whether the image is full-width
 * @param {boolean} [props.hasNoBottomPaddingContent] - Optional. Set `true` to remove bottom padding from summary content
 * @param {boolean} [props.hasPaddingOnContent] - Optional. Set `true` to have top padding on summary content
 * @param {boolean} [props.hasListInDek] - Optional. Set `true` if there is a ul inside.
 * @param {bool} [props.hasUnderlineHed] - Optional boolean to enable or disable hed underline summaryItem
 * @param {bool} [props.hideRubricItemSummary] - Show or hide rubrics in summary items
 * @param {Array<SummaryItem.propTypes>} props.items - Items to display in the grid that map to the summary item pattern
 * @param {bool} [props.isBorderContextSignature] - optional. assign ContextSignature for ornamental border
 * @param {string} [props.recircRiver] - Prop which stores the value of the recirc river
 * @param {string} [props.sectionTitleVariation] - Optional variation of SectionTitle to use, defaults to `LineAboveLineBelowTextCenter`
 * @param {Bool} [props.shouldDisplayDangerousDek] - Optional flag to render a dangerousDek configurable per brand
 * @param {bool} [props.shouldEmbedFeaturedVideo] - Optional feature flag to turn video into embed
 * @param {bool} [props.shouldEnableBundleComponentAnalytics] - Optional feature flag to append data-section-title attribute for analytics
 * @param {string} [props.shouldHideBylines] - Optional flag to hide bylines
 * @param {string} [props.shouldHideDangerousDek] - Optional flag to hide dangerousDek
 * @param {string} [props.shouldHideDangerousHed] - Optional flag to hide dangerousHed
 * @param {bool} [props.shouldHidePublishDate] - Optional boolean to hide publish date
 * @param {string} [props.shouldHideTitle] - Optional flag to hide title
 * @param {string} [props.shouldUseHedFeatureToken] - Optional flag to override SummaryItemHed token to `discovery.hed-feature`
 * @param {boolean} [props.showAdRail] - Show Ad rail
 * @param {string} [props.summaryItemRubricVariation] - Optional rubric variation to use for the SummaryItem
 * @param {string} [props.summaryItemVariation] - Optional variation of SummaryItem to use, defaults to `TextBelowLeft`
 * @param {object} [props.trackingNamespace] - Optional override the base namespace of data-section-title for component tracking
 * @param {object} [props.variations] - Variation properties used in rendering the component
 * @param {bool} [props.variations.isFullBleedDarkBackground] - Optional boolean to trigger a feature layout
 * @param {bool} [props.variations.isSingleFeature] - Optional boolean to trigger a feature layout
 * @param {bool} [props.variations.isHeroFeature] - Optional boolean to trigger a HeroFeature layout
 * @param {boolean} [props.variations.hasEnhancedDailyCartoon] - To enhance the daily cartoon component in Homepage
 * @param {boolean} [props.showCartoonLink] - To render cartoon gallery page component link
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 * @param {boolean} [props.hasRoundedCorners] - Optional flag to add border radious for component
 * @returns {ReactElement} <section>
 */
const SummaryCollageOne = ({ className, ctaLink, customizedBackgroundColorToken, customizedBylineColorToken, customizedPublishDateColorToken, customizedSectionDekColorToken, customizedSectionDekTypeToken, customizedSectionTitleColorToken, customNativeBackgroundColor, dangerousDek, dangerousHed, hasFullWidthImage, hasListInDek = false, hasNoBottomPaddingContent = false, hasRoundedCorners = false, hasPaddingOnContent, hasUnderlineHed, hideRubricItemSummary = false, items, isBorderContextSignature = false, recircRiver, sectionTitleVariation = 'LineAboveLineBelowTextCenter', shouldDisplayDangerousDek, shouldEmbedFeaturedVideo = false, shouldEnableBundleComponentAnalytics, shouldHideBylines = false, shouldHideDangerousDek = false, shouldHideDangerousHed = false, shouldHidePublishDate = false, shouldHideTitle = false, shouldUseHedFeatureToken, showAdRail, showCartoonLink = false, summaryItemRubricVariation, summaryItemVariation = 'TextBelowLeft', trackingNamespace, variations = {
    isFullBleedDarkBackground: false,
    isSingleFeature: false,
    hasEnhancedDailyCartoon: undefined,
    isHeroFeature: false
}, variationName }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SummaryCollageOne',
            variation: variationName
        });
    }, [variationName]);
    const { isFullBleedDarkBackground, isSingleFeature, hasEnhancedDailyCartoon, isHeroFeature } = variations;
    const SummaryItemComponent = SummaryItem[summaryItemVariation];
    const SectionTitleComponent = SectionTitle[sectionTitleVariation];
    let singleFeatureTitleProps = {};
    let singleFeatureContentProps = {};
    const shouldUseCollageVideoItem = shouldEmbedFeaturedVideo && items[0]?.image?.scriptUrl;
    if (isSingleFeature) {
        singleFeatureTitleProps = { hedTag: 'h2' };
        if (hasEnhancedDailyCartoon) {
            singleFeatureTitleProps.link = {};
        }
        else if (dangerousDek && !shouldDisplayDangerousDek) {
            singleFeatureTitleProps.link = { html: dangerousDek };
        }
        singleFeatureContentProps = {
            shouldHoldImageSpace: false
        };
    }
    const analyticsDataAttribute = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNamespace?.item || dangerousHed);
    const analyticsDataAttributeFeaturedLink = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNamespace?.featuredLink || dangerousHed);
    const contentSummaryCollage = (React.createElement(SummaryCollageOneGridWithMargin, { "data-testid": "SummaryCollageOneSingleFeature", className: classnames('summary-collage-one', className), isHeroFeature: isHeroFeature, isSingleFeature: isSingleFeature, hasFullWidthImage: hasFullWidthImage, isFullBleedDarkBackground: isFullBleedDarkBackground, hasEnhancedDailyCartoon: hasEnhancedDailyCartoon, showCartoonLink: showCartoonLink, shouldUseHedFeatureToken: shouldUseHedFeatureToken, customizedBackgroundColorToken: customizedBackgroundColorToken, customizedSectionDekTypeToken: customizedSectionDekTypeToken, customizedSectionDekColorToken: customizedSectionDekColorToken, customNativeBackgroundColor: customNativeBackgroundColor, hasRoundedCorners: hasRoundedCorners, hasPaddingOnContent: hasPaddingOnContent },
        !shouldHideTitle && dangerousHed && (React.createElement(SummaryCollageOneTitle, { isSingleFeature: isSingleFeature, customizedSectionTitleColorToken: customizedSectionTitleColorToken },
            React.createElement(SectionTitleComponent, { ...singleFeatureTitleProps, dangerousHed: dangerousHed, isBorderContextSignature: isBorderContextSignature }))),
        React.createElement(SummaryDek, { dangerousDek: dangerousDek, shouldDisplayDangerousDek: shouldDisplayDangerousDek }),
        shouldUseCollageVideoItem ? (React.createElement(SummaryCollageOneItemComponent, { as: CollageVideoItem, analyticsDataAttribute: analyticsDataAttribute, isFeatured: true, item: items[0], key: items[0].copilotID, scriptUrl: items[0].image.scriptUrl, videoEmbedPosition: inlineEmbedPosition })) : (React.createElement(SummaryCollageOneItemComponent, { ...items[0], analyticsDataAttribute: analyticsDataAttribute, as: SummaryItemComponent, hasNoBottomPaddingContent: hasNoBottomPaddingContent, hasUnderlineHed: hasUnderlineHed, hedTag: "h3", hideRubricItemSummary: hideRubricItemSummary, shouldPlayInline: true, recircRiver: recircRiver, rubricVariation: summaryItemRubricVariation, hasListInDek: hasListInDek, shouldHideBylines: shouldHideBylines, shouldHideDangerousDek: shouldHideDangerousDek, shouldHideDangerousHed: shouldHideDangerousHed, shouldHidePublishDate: shouldHidePublishDate, customizedBylineColorToken: customizedBylineColorToken, customizedPublishDateColorToken: customizedPublishDateColorToken, responsiveCartoonVariation: hasEnhancedDailyCartoon && 'WithNoSocialIcons', hasWrapperButtonRole: !hasEnhancedDailyCartoon, ...singleFeatureContentProps, hasEnhancedDailyCartoon: hasEnhancedDailyCartoon })),
        showAdRail && (React.createElement(SummaryCollageOneAside, null,
            React.createElement(StickyBox, null,
                React.createElement(PaymentGateway, { group: "ads" },
                    React.createElement(Ad, { position: "rail" }))))),
        isSingleFeature && (React.createElement(FeatureLink, { ctaLink: ctaLink, analyticsDataAttribute: analyticsDataAttributeFeaturedLink, showCtaIcon: hasEnhancedDailyCartoon, dangerousDek: dangerousDek, showCartoonLink: showCartoonLink }))));
    return isFullBleedDarkBackground ? (React.createElement(SummaryCollageOneIsFullBleed, { isFullBleedDarkBackground: isFullBleedDarkBackground }, contentSummaryCollage)) : (contentSummaryCollage);
};
SummaryCollageOne.propTypes = {
    className: PropTypes.string,
    ctaLink: PropTypes.shape({
        html: PropTypes.string,
        label: PropTypes.string,
        url: PropTypes.string,
        icon: PropTypes.string
    }),
    customizedBackgroundColorToken: PropTypes.string,
    customizedBylineColorToken: PropTypes.string,
    customizedPublishDateColorToken: PropTypes.string,
    customizedSectionDekColorToken: PropTypes.string,
    customizedSectionDekTypeToken: PropTypes.string,
    customizedSectionTitleColorToken: PropTypes.string,
    customNativeBackgroundColor: PropTypes.string,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    hasEnhancedDailyCartoon: PropTypes.bool,
    hasFullWidthImage: PropTypes.bool,
    hasListInDek: PropTypes.bool,
    hasNoBottomPaddingContent: PropTypes.bool,
    hasPaddingOnContent: PropTypes.bool,
    hasRoundedCorners: PropTypes.bool,
    hasUnderlineHed: PropTypes.bool,
    hideRubricItemSummary: PropTypes.bool,
    isBorderContextSignature: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape(SummaryItem.propTypes)).isRequired,
    recircRiver: PropTypes.string,
    sectionTitleVariation: PropTypes.string,
    shouldDisplayDangerousDek: PropTypes.bool,
    shouldEmbedFeaturedVideo: PropTypes.bool,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldHideBylines: PropTypes.bool,
    shouldHideDangerousDek: PropTypes.bool,
    shouldHideDangerousHed: PropTypes.bool,
    shouldHidePublishDate: PropTypes.bool,
    shouldHideTitle: PropTypes.bool,
    shouldUseHedFeatureToken: PropTypes.bool,
    showAdRail: PropTypes.bool,
    showCartoonLink: PropTypes.bool,
    summaryItemRubricVariation: PropTypes.string,
    summaryItemVariation: PropTypes.oneOf([
        'TextBelowLeft',
        'TextBelowCenter',
        'TextBelowLeftCard',
        'TextBelowCenterCard',
        'ImageRatio43',
        'ImageRatio169',
        'ImageRatio11',
        'CircularImage',
        'TextBelowDesktopOnly',
        'TextBelowDesktopOnlyImageRight',
        'TextBelowDesktopOnlyThirds',
        'TextBelowDesktopOnlyThirdsImageRight',
        'TextBelowDesktopOnlyThirdsImageRightThumbnail',
        'SideBySide',
        'SideBySideImageRight',
        'SideBySideThirds',
        'SideBySideThirdsImageRight',
        'SideBySideDarkBackgroundRight',
        'SideBySideDesktopOnly',
        'SideBySideDesktopOnlyImageRight',
        'SideBySideDesktopOnlyThirds',
        'SideBySideDesktopOnlyThirdsImageRight'
    ]),
    trackingNamespace: PropTypes.object,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        isFullBleedDarkBackground: PropTypes.bool,
        isSingleFeature: PropTypes.bool,
        hasEnhancedDailyCartoon: PropTypes.bool,
        isHeroFeature: PropTypes.bool
    })
};
SummaryCollageOne.displayName = 'SummaryCollageOne';
module.exports = asConfiguredComponent(withCustomTheme(SummaryCollageOne), 'SummaryCollageOne');
//# sourceMappingURL=SummaryCollageOne.js.map

/***/ }),

/***/ 82597:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(33507);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 52679:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { SectionTitleLinkHTML, SectionTitleLinkWrapper } = __webpack_require__(33500);
const { BREAKPOINTS } = __webpack_require__(96472);
const { maxThresholds } = __webpack_require__(99906);
const { applyGridSpacing, cssVariablesGrid } = __webpack_require__(1123);
const { RubricLink } = __webpack_require__(6613);
const { SectionTitleRoot, SectionTitleHed } = __webpack_require__(33500);
const { calculateSpacing, maxScreen, minScreen, minMaxScreen, getTypographyStyles, getColorToken, getColorStyles } = __webpack_require__(26865);
const { BaseLink } = __webpack_require__(76955);
const { SocialIconsList } = __webpack_require__(51000);
const { SpanWrapper } = __webpack_require__(18117);
const { ResponsiveCartoonCaption } = __webpack_require__(77527);
const { StickyBoxWrapper } = __webpack_require__(77307);
const { SummaryItemBylinePublishDate } = __webpack_require__(277);
const { BylinePreamble, BylineName } = __webpack_require__(74423);
const { SummaryItemWrapper, SummaryItemDek } = __webpack_require__(68116);
const { SummaryDekDefault } = __webpack_require__(95015);
const SummaryCollageOneAside = styled.div.withConfig({
    displayName: 'SummaryCollageOneAside'
}) `
  display: none;
  grid-row: 1 / -1;
  justify-self: end;

  ${StickyBoxWrapper} {
    top: ${calculateSpacing(10)};
  }

  ${minMaxScreen(BREAKPOINTS.md, `${maxThresholds.lg}px`)} {
    display: block;
    grid-column: 7 / -1;
  }

  ${minScreen(BREAKPOINTS.lg)} {
    display: block;
    grid-column: 9 / -1;
  }
`;
const SummaryCollageOneTitle = styled.div.withConfig({
    displayName: 'SummaryCollageOneTitle'
}) `
  grid-column: 1 / -1;

  ${SectionTitleRoot} {
    > h2 {
      color: ${({ customizedSectionTitleColorToken }) => customizedSectionTitleColorToken &&
    getColorToken(customizedSectionTitleColorToken)};
    }
  }
  ${({ isSingleFeature }) => !isSingleFeature &&
    `
      margin-bottom: ${calculateSpacing(2)};

      ${minScreen(BREAKPOINTS.md)} {
        margin-bottom: ${calculateSpacing(1)};
      }

      ${minScreen(BREAKPOINTS.lg)} {
        margin-bottom: ${calculateSpacing(0)};
      }
    `}
`;
const SummaryCollageOneCtaIcon = styled.div.withConfig({
    displayName: 'SummaryCollageOneCtaIcon'
}) `
  border-radius: ${calculateSpacing(1)};
  background-color: ${({ theme }) => getColorToken(theme, 'colors.discovery.lead.secondary.background')};
  background-image: ${({ icon }) => `url('${icon}')`};
  width: ${calculateSpacing(6)};
  height: ${calculateSpacing(6)};

  ${minScreen(BREAKPOINTS.lg)} {
    margin-right: ${calculateSpacing(2)};
  }

  ${maxScreen(`${maxThresholds.lg}px`)} {
    margin-bottom: ${calculateSpacing(2)};
  }
`;
const SummaryCollageOneAnchorLink = styled(BaseLink).withConfig({
    displayName: 'SummaryCollageOneAnchorLink'
}) `
  ${getTypographyStyles('typography.definitions.foundation.link-primary')}
  display: inline-block;
  margin-bottom: ${calculateSpacing(2)};
  vertical-align: top;

  ${minScreen(BREAKPOINTS.lg)} {
    margin-bottom: ${({ showCtaIcon }) => showCtaIcon ? 0 : calculateSpacing(4)};
  }
`;
const SummaryCollageOneCtaLink = styled.div.withConfig({
    displayName: 'SummaryCollageOneCtaLink'
}) `
  grid-column: 1 / -1;
  text-align: center;

  span {
    display: block;
    width: 100%;
    text-align: center;
  }

  ${({ showCtaIcon }) => showCtaIcon &&
    `
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      
      ${minScreen(BREAKPOINTS.lg)} {
        flex-direction: row;
      }
    `}
`;
SummaryCollageOneAnchorLink.defaultProps = {
    colorSecondaryLinkToken: 'colors.interactive.base.dark',
    colorStaticLinkToken: 'colors.interactive.base.brand-primary',
    linkStyle: 'global'
};
const summaryCollageOneMainClass = css `
  ${cssVariablesGrid()}
  ${applyGridSpacing('padding')}

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--grid-gap);
  margin: 0 auto;
  width: 100%;
  max-width: ${BREAKPOINTS.xxl};
  row-gap: var(--grid-gap);

  .summary-item--layout-placement-text-below {
    &.summary-item--text-align-left,
    &.summary-item--text-align-center {
      .summary-item__hed {
        ${getTypographyStyles('typography.definitions.discovery.hed-break-out')};
      }

      .summary-item__dek {
        ${getTypographyStyles('typography.definitions.discovery.description-feature')};
      }
    }
  }

  ${({ theme, shouldUseHedFeatureToken }) => shouldUseHedFeatureToken &&
    `
      .summary-item .summary-item__hed {
        ${getTypographyStyles(theme, 'typography.definitions.discovery.hed-feature')};
      }
    `};

  .summary-item__hed-link {
    &::after {
      border-bottom: 1px solid
        ${getColorToken('colors.discovery.body.white.accent')};
    }
  }

  .summary-item__content:empty {
    display: none;
  }

  ${SocialIconsList} {
    justify-content: center;
  }

  ${minScreen(BREAKPOINTS.md)} {
    grid-template-columns: repeat(12, 1fr);
  }
`;
const SummaryCollageOneItemComponent = styled.div.withConfig({
    displayName: 'SummaryCollageOneItemComponent'
}) `
  grid-column: 1 / -1;

  &&& {
    border-bottom: 0;

    .summary-item__content {
      margin: 0;
      @media (min-width: 0) and (max-width: ${BREAKPOINTS.lg}) {
        margin: 0;
      }
      ${({ customizedBylineColorToken }) => customizedBylineColorToken &&
    css `
          ${BylineName}, ${BylinePreamble} {
            color: ${getColorToken(customizedBylineColorToken)};
          }
        `}
      ${({ customizedPublishDateColorToken }) => customizedPublishDateColorToken &&
    css `
          ${SummaryItemBylinePublishDate} {
            color: ${getColorToken(customizedPublishDateColorToken)};
          }
        `}
    }
    @media (min-width: 0) and (max-width: ${BREAKPOINTS.md}) {
      padding-bottom: 0;
    }

    ${({ hasEnhancedDailyCartoon }) => hasEnhancedDailyCartoon &&
    `
        ${minScreen(BREAKPOINTS.md)} {
          padding-bottom: 0;
        }
      `};
  }
`;
const summaryCollageOneSingleFeature = css `
  &&& {
    grid-gap: ${calculateSpacing(4)};
    grid-template-rows: auto 1fr auto;
    height: 100%;
  }

  ${SummaryCollageOneItemComponent} {
    display: grid;
    align-items: center;
  }

  ${SpanWrapper}.summary-item__image {
    .summary-item__image {
      display: grid;
      justify-items: center;
      ${({ hasEnhancedDailyCartoon }) => hasEnhancedDailyCartoon &&
    `
          ${minScreen(BREAKPOINTS.lg)} {
            gap: 0;
            .responsive-cartoon__image-link {
              margin-bottom: ${calculateSpacing(3)};
            }

            ${ResponsiveCartoonCaption} {
              margin-bottom: ${calculateSpacing(1)};
            }
          }
        `}

      picture {
        max-width: ${calculateSpacing(37.5)};

        ${minScreen(BREAKPOINTS.lg)} {
          max-width: ${({ hasEnhancedDailyCartoon }) => calculateSpacing(hasEnhancedDailyCartoon ? 62.5 : 50)};
        }

        ${maxScreen(`${maxThresholds.md}px`)} {
          max-width: ${({ hasEnhancedDailyCartoon }) => calculateSpacing(hasEnhancedDailyCartoon ? 68.75 : 50)};
        }
      }
    }

    .responsive-cartoon__caption {
      margin-top: 0;
      ${minScreen(BREAKPOINTS.lg)} {
        margin-top: ${({ hasEnhancedDailyCartoon }) => hasEnhancedDailyCartoon ? 0 : calculateSpacing(2)};
        width: 85%;
      }
    }
  }
`;
const summaryCollageOneFullWidthImage = css `
  ${minMaxScreen(0, BREAKPOINTS.lg)} {
    .summary-item__asset-container {
      ${applyGridSpacing('margin', true)};
    }
  }
`;
const summaryCollageOneFullBleedDarkBackground = css `
  &&& {
    grid-template-rows: unset;
    background-color: ${getColorToken('colors.discovery.body.dark.background')};
    ${SummaryItemDek} {
      a {
        color: ${getColorToken('colors.discovery.body.dark.description')};
      }
    }
    max-width: ${BREAKPOINTS.xxl};

    ${minMaxScreen(BREAKPOINTS.sm, BREAKPOINTS.md)} {
      column-gap: ${calculateSpacing(9)};
      margin: ${calculateSpacing(0)};
      padding: ${calculateSpacing(0)};
    }
    ${minScreen(BREAKPOINTS.md)} {
      column-gap: ${calculateSpacing(3)};
      margin: ${calculateSpacing(0)};
      padding: ${calculateSpacing(5)} ${calculateSpacing(3)};
    }
    ${minScreen(BREAKPOINTS.lg)} {
      margin: ${calculateSpacing(0)};
      padding: ${calculateSpacing(7)} ${calculateSpacing(6)};
    }
    ${minScreen(BREAKPOINTS.xl)} {
      column-gap: 2rem;
      margin: ${calculateSpacing(0)};
      padding: ${calculateSpacing(10)} ${calculateSpacing(8)};
    }
    ${minScreen(BREAKPOINTS.xxl)} {
      column-gap: 2rem;
      margin: auto;
      padding: ${calculateSpacing(10)} ${calculateSpacing(8)};
    }
  }
  ${RubricLink} {
    color: ${getColorToken('colors.discovery.body.dark.context-signature')};
  }

  .summary-item__rubric {
    color: ${getColorToken('colors.discovery.body.dark.context-signature')};
  }

  .summary-item__dek {
    color: ${getColorToken('colors.discovery.body.dark.description')};
  }

  .summary-item__hed--hed-core-primary {
    ${getTypographyStyles('typography.definitions.discovery.hed-core-primary')}
    color: ${getColorToken('colors.discovery.body.dark.heading')};
  }

  .summary-item__hed {
    color: ${getColorToken('colors.discovery.body.dark.heading')};
  }

  .summary-item--dark-background-right {
    ${minScreen(BREAKPOINTS.md)} {
      grid-column: 2 / -2;
      margin: ${calculateSpacing(0)} ${calculateSpacing(-3)};
    }
    ${minScreen(BREAKPOINTS.lg)} {
      grid-column: 2 / -2;
      margin: ${calculateSpacing(0)} ${calculateSpacing(-3)};
      padding: ${calculateSpacing(0)};
    }
    ${minScreen(BREAKPOINTS.xl)} {
      grid-column: 2 / -2;
      margin: ${calculateSpacing(0)} ${calculateSpacing(-4)};
      padding: ${calculateSpacing(0)};
    }
    ${minScreen(BREAKPOINTS.xxl)} {
      grid-column: 2 / -2;
      margin: ${calculateSpacing(0)};
      padding: ${calculateSpacing(0)};
    }

    .summary-item__asset-container {
      ${minScreen(BREAKPOINTS.md)} {
        margin-left: ${calculateSpacing(-3)};
      }
      ${minScreen(BREAKPOINTS.xl)} {
        margin-left: ${calculateSpacing(0)};
      }
    }
  }

  .summary-item__content {
    margin: ${calculateSpacing(0)};
    ${minScreen(BREAKPOINTS.md)} {
      padding-right: ${calculateSpacing(3)};
    }
    ${minScreen(BREAKPOINTS.lg)} {
      padding-right: ${calculateSpacing(5)};
    }
    ${minScreen(BREAKPOINTS.xl)} {
      padding-right: ${calculateSpacing(3)};
    }
    ${minScreen(BREAKPOINTS.xxl)} {
      padding-right: ${calculateSpacing(6)};
    }
  }
`;
const SummaryCollageOneGridWithMargin = styled.div.withConfig({
    displayName: 'SummaryCollageOneGridWithMargin'
}) `
  ${summaryCollageOneMainClass}
  ${({ isSingleFeature }) => isSingleFeature && summaryCollageOneSingleFeature}

  ${({ hasFullWidthImage }) => hasFullWidthImage && summaryCollageOneFullWidthImage}
  
  ${({ isFullBleedDarkBackground }) => isFullBleedDarkBackground && summaryCollageOneFullBleedDarkBackground}

  background-color: ${({ customNativeBackgroundColor }) => customNativeBackgroundColor
    ? getColorToken(customNativeBackgroundColor)
    : ''};

  ${({ hasPaddingOnContent }) => hasPaddingOnContent &&
    css `
      ${SummaryItemWrapper} {
        padding-bottom: 0;
      }
    `}

  padding-top: ${({ hasPaddingOnContent }) => hasPaddingOnContent ? '16px' : 0};

  padding-bottom: ${({ hasPaddingOnContent }) => hasPaddingOnContent ? '16px' : 0};

  ${({ hasEnhancedDailyCartoon, theme }) => hasEnhancedDailyCartoon &&
    css `
      ${minMaxScreen(BREAKPOINTS.md, `${maxThresholds.lg}px`)} {
        ${SummaryCollageOneTitle}, ${SummaryCollageOneItemComponent}, ${SummaryCollageOneCtaLink} {
          grid-column: 1 / 7;
        }
      }

      ${maxScreen(`${maxThresholds.lg}px`)} {
        &&& {
          gap: ${calculateSpacing(3)};
        }
      }

      ${minScreen(BREAKPOINTS.lg)} {
        &&& {
          grid-row-gap: 0;
        }

        ${SummaryCollageOneCtaLink} {
          margin-top: ${calculateSpacing(4)};
        }

        ${SummaryCollageOneTitle}, ${SummaryCollageOneItemComponent}, ${SummaryCollageOneCtaLink} {
          grid-column: 1 / 9;
        }
      }

      ${SectionTitleRoot} {
        display: flex;
        justify-content: center;
        margin-bottom: ${calculateSpacing(3)};

        ${SectionTitleHed} {
          ${getTypographyStyles(theme, 'typography.definitions.discovery.subhed-section-primary')};
        }
      }
    `}

  ${({ showCartoonLink }) => showCartoonLink &&
    css `
      ${maxScreen(`${maxThresholds.lg}px`)} {
        &&& {
          grid-row-gap: 0;
        }
      }
    `}
      ${SummaryDekDefault} {
    color: ${({ customizedSectionDekColorToken }) => customizedSectionDekColorToken &&
    getColorToken(customizedSectionDekColorToken)};
    ${({ customizedSectionDekTypeToken }) => customizedSectionDekTypeToken &&
    getTypographyStyles(customizedSectionDekTypeToken)};
  }

  ${({ customizedBackgroundColorToken, hasRoundedCorners }) => (customizedBackgroundColorToken || hasRoundedCorners) &&
    css `
      ${SummaryItemWrapper} {
        border-radius: ${({ hasRoundedCorners }) => hasRoundedCorners ? '20px' : ''};
        background-color: ${({ customizedBackgroundColorToken }) => customizedBackgroundColorToken
        ? getColorToken(customizedBackgroundColorToken)
        : ''};
        padding-bottom: 0;

        .aspect-ratio--overlay-container {
          img {
            border-radius: 0;
          }
          ${minScreen(BREAKPOINTS.sm)} {
            border-top-left-radius: ${({ hasRoundedCorners }) => hasRoundedCorners ? '20px' : ''};
            border-top-right-radius: ${({ hasRoundedCorners }) => hasRoundedCorners ? '20px' : ''};
          }
          ${minScreen(BREAKPOINTS.md)} {
            border-top-left-radius: ${({ hasRoundedCorners }) => hasRoundedCorners ? '20px' : ''};
            border-top-right-radius: ${({ hasRoundedCorners }) => hasRoundedCorners ? '0px' : ''};
            border-bottom-left-radius: ${({ hasRoundedCorners }) => hasRoundedCorners ? '20px' : ''};
          }
        }
      }

      .summary-item__content {
        ${maxScreen(BREAKPOINTS.md)} {
          padding-top: ${calculateSpacing(4)};
          padding-right: ${calculateSpacing(3)};
          padding-bottom: ${calculateSpacing(7)};
          padding-left: ${calculateSpacing(3)};
        }
      }
    `}
`;
const SummaryCollageOneIsFullBleed = styled.div.withConfig({
    displayName: 'SummaryCollageOneIsFullBleed'
}) `
  ${({ isFullBleedDarkBackground }) => isFullBleedDarkBackground &&
    css `
      background-color: ${getColorToken('colors.discovery.body.dark.background')};
      ${SummaryItemDek} {
        a {
          color: ${getColorToken('colors.discovery.body.dark.description')};
        }
      }
      max-width: 100%;
    `}
`;
const SummaryCollageOneDangerousDek = styled(SectionTitleLinkWrapper).withConfig({
    displayName: 'SummaryCollageOneDangerousDek'
}) `
  display: flex;
  justify-content: center;
  margin-top: ${calculateSpacing(4)};
  padding-left: 0;
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.black')};

  ${maxScreen(`${maxThresholds.md}px`)} {
    grid-column: 1 / -1;
  }

  ${minMaxScreen(BREAKPOINTS.md, `${maxThresholds.lg}px`)} {
    grid-column: 1 / 7;
  }

  ${minScreen(BREAKPOINTS.lg)} {
    grid-column: 1 / 9;
  }
`;
module.exports = {
    SummaryCollageOneTitle,
    SummaryCollageOneCtaLink,
    SummaryCollageOneGridWithMargin,
    SummaryCollageOneIsFullBleed,
    SummaryCollageOneItemComponent,
    SummaryCollageOneAnchorLink,
    SummaryCollageOneCtaIcon,
    SummaryCollageOneAside,
    SectionTitleLinkHTML,
    SummaryCollageOneDangerousDek
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 33507:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const SummaryCollageOne = __webpack_require__(97718);
SummaryCollageOne.SingleFeature = asVariation(SummaryCollageOne, 'SingleFeature', {
    isSingleFeature: true
}, {
    sectionTitleVariation: 'LineAboveLineBelowTextLeft',
    shouldHideDangerousDek: true,
    shouldHideDangerousHed: true
});
SummaryCollageOne.FullBleedDarkBackground = asVariation(SummaryCollageOne, 'FullBleedDarkBackground', {
    isFullBleedDarkBackground: true
}, {
    shouldHideDangerousDek: false,
    shouldHideDangerousHed: false,
    shouldHideTitle: true
});
SummaryCollageOne.FullBleedDarkBackgroundWithTitle = asVariation(SummaryCollageOne, 'FullBleedDarkBackgroundWithTitle', {
    isFullBleedDarkBackground: true
}, {
    shouldHideDangerousDek: false,
    shouldHideDangerousHed: false,
    shouldHideTitle: false
});
SummaryCollageOne.DailyCartoon = asVariation(SummaryCollageOne, 'DailyCartoon', {
    isSingleFeature: true,
    hasEnhancedDailyCartoon: true
}, {
    sectionTitleVariation: 'SoftDivider',
    shouldHideDangerousDek: true,
    shouldHideDangerousHed: true,
    showAdRail: true,
    showCartoonLink: true
});
SummaryCollageOne.HeroFeature = asVariation(SummaryCollageOne, 'HeroFeature', {
    isHeroFeature: true
}, {
    shouldHideDangerousDek: false,
    shouldHideDangerousHed: false,
    shouldHideTitle: true,
    summaryItemRubricVariation: 'DiscoveryItem',
    summaryItemVariation: 'SideBySideCenterImageLeft',
    shouldUseHedFeatureToken: true
});
module.exports = SummaryCollageOne;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 6602:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const BaseSectionTitle = __webpack_require__(35864);
const SummaryCollageThree = __webpack_require__(66341);
const SummaryList = __webpack_require__(22539);
const SummaryItem = __webpack_require__(74992);
const { SectionTitle, SummaryCollageSevenSummaryList, SummaryCollageSevenWrapper, SummaryCollageSevenIsFullBleed } = __webpack_require__(78044);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * SummaryCollageSeven component
 *
 * @param {object} props - React props
 * @param {string} [props.curatedSearchHed] - Optional string (possibly HTML) to use as the title for the summary list
 * @param {string} [props.dangerousHed] - Optional string (possibly HTML) to use as the title
 * @param {Bool} [props.hasSectionTitleHedFeature] - Optional flag to show title with hed-feature typography
 * @param {Bool} [props.hasTopSpacing] - Show or hide top margin spacing of the component
 * @param {Bool} [props.hideBottomBorders] - Optional prop to hide bottom borders
 * @param {Bool} [props.hideRubricItemSummary] - Show or hide rubrics in summary items
 * @param {Bool} [props.hideTitleTopSpacing] - Show or hide title top spacing
 * @param {Bool} [props.hideVerticalBorders] - Optional prop to hide vertical borders
 * @param {Array<SummaryItem.propTypes>} props.items - Array of items to render
 * @param {string} [props.recircRiver] - Optional
 * @param {string} [props.sectionTitleVariation] - Optional variation of SectionTitle to use, defaults to 'LineAboveLineBelowTextCenter'
 * @param {Bool} [props.shouldHideBylines] - Optional flag to hide bylines
 * @param {Bool} [props.shouldHideSpaceAtTop] - Optional flag to hide space at top
 * @param {string} [props.summaryItemVariation] - Optional variation of SummaryItem to use within SummaryList, defaults to `NoAssetTextCenter`
 * @param {string} [props.summarySectionTitleVariation] - Optional variation of SectionTitle to use within SummaryList, defaults to 'TextCenter'
 * @param {string} [props.imageAlignment] - Optional flag to align the image at top instead of center
 * @param {bool} [props.isSpecial] - Optional prop to check whether it is special theme or not
 * @param {string} [props.isFullBleedSpecialBackground] - Optional flag to make the special background colour to full bleed
 *@param {Bool} [props.shouldRemoveSummaryItemBorder] - Optional flag to remove border on summaryItem

 * @returns {ReactElement} <div>
 */
const SummaryCollageSeven = ({ curatedSearchHed, dangerousHed, hasSectionTitleHedFeature = false, hasTopSpacing = false, hideBottomBorders = false, hideRubricItemSummary = false, hideTitleTopSpacing = false, hideVerticalBorders = false, items, isSpecial = false, isFullBleedSpecialBackground = false, sectionTitleVariation = 'LineAboveLineBelowTextCenter', imageAlignment = 'default', shouldHideBylines = false, shouldHideSpaceAtTop = false, shouldRemoveSummaryItemBorder = false, summaryItemVariation = 'NoAssetTextCenter', summarySectionTitleVariation = 'TextCenter', recircRiver }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SummaryCollageSeven'
        });
    }, []);
    const SectionTitleComponent = BaseSectionTitle[sectionTitleVariation];
    const contentSummaryCollage = (React.createElement(SummaryCollageSevenWrapper, { "data-testid": "SummaryCollageSevenWrapper", dangerousHed: !dangerousHed, hideVerticalBorders: hideVerticalBorders, hasTopSpacing: hasTopSpacing, hasSectionTitleHedFeature: hasSectionTitleHedFeature, isSpecial: isSpecial },
        dangerousHed && (React.createElement(SectionTitle, { as: SectionTitleComponent, dangerousHed: dangerousHed, hideTitleTopSpacing: hideTitleTopSpacing, isSpecial: isSpecial })),
        React.createElement(SummaryCollageThree, { items: items.slice(0, 3), hideRubricItemSummary: hideRubricItemSummary, hasBorder: !hideBottomBorders, hideVerticalBorders: hideVerticalBorders, recircRiver: recircRiver, shouldHideBylines: shouldHideBylines, shouldHideSpaceAtTop: shouldHideSpaceAtTop, isSpecial: isSpecial }),
        React.createElement(SummaryCollageSevenSummaryList, { hideRubricItemSummary: hideRubricItemSummary, dangerousHed: curatedSearchHed, shouldHideDangerousDek: true, shouldHidePublishDate: true, items: items.slice(3), sectionTitleVariation: summarySectionTitleVariation, summaryItemVariation: summaryItemVariation, recircRiver: recircRiver, shouldHideBylines: shouldHideBylines, hideBottomBorders: hideBottomBorders, imageAlignment: imageAlignment, isSpecial: isSpecial, shouldRemoveSummaryItemBorder: shouldRemoveSummaryItemBorder })));
    return isFullBleedSpecialBackground ? (React.createElement(SummaryCollageSevenIsFullBleed, { isFullBleedSpecialBackground: isFullBleedSpecialBackground }, contentSummaryCollage)) : (contentSummaryCollage);
};
SummaryCollageSeven.propTypes = {
    curatedSearchHed: PropTypes.string,
    dangerousHed: PropTypes.string,
    hasSectionTitleHedFeature: PropTypes.bool,
    hasTopSpacing: PropTypes.bool,
    hideBottomBorders: PropTypes.bool,
    hideRubricItemSummary: PropTypes.bool,
    hideTitleTopSpacing: PropTypes.bool,
    hideVerticalBorders: PropTypes.bool,
    imageAlignment: PropTypes.oneOf(['top', 'default', 'bottom']),
    isFullBleedSpecialBackground: PropTypes.bool,
    isSpecial: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape(SummaryItem.propTypes)).isRequired,
    recircRiver: PropTypes.string,
    sectionTitleVariation: PropTypes.string,
    shouldHideBylines: PropTypes.bool,
    shouldHideSpaceAtTop: PropTypes.bool,
    shouldRemoveSummaryItemBorder: PropTypes.bool,
    summaryItemVariation: SummaryList.propTypes.summaryItemVariation,
    summarySectionTitleVariation: PropTypes.string
};
SummaryCollageSeven.displayName = 'SummaryCollageSeven';
module.exports = SummaryCollageSeven;
//# sourceMappingURL=SummaryCollageSeven.js.map

/***/ }),

/***/ 99544:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const SummaryCollageSeven = __webpack_require__(6602);
module.exports = asConfiguredComponent(SummaryCollageSeven, 'SummaryCollageSeven');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 78044:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { css, default: styled } = __webpack_require__(92168);
const { calculateSpacing, getColorToken, getTypographyStyles, getColorStyles, minScreen, minMaxScreen } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { cssVariablesCollage } = __webpack_require__(89085);
const Grid = __webpack_require__(86659);
const { SectionTitleHed } = __webpack_require__(33500);
const { SummaryCollageThreeItemWrapper, SummaryCollageThreeWrapper } = __webpack_require__(85095);
const SummaryList = __webpack_require__(22539);
const { SummaryListTitle } = __webpack_require__(63637);
const { RubricWrapper } = __webpack_require__(6613);
const { GridItem } = __webpack_require__(40653);
const { getSectionSpacingStyling } = __webpack_require__(16800);
const SummaryCollageSevenThreeWithoutHed = () => css `
  ${SummaryCollageThreeWrapper} {
    padding: 0;

    ${minScreen(BREAKPOINTS.lg)} {
      grid-template-columns: repeat(9, 1fr);
      grid-template-rows: max-content;
    }

    .summary-item__metadata-secondary {
      margin-bottom: ${calculateSpacing(2)};
    }

    > ${GridItem}:first-child {
      ${SummaryCollageThreeItemWrapper} {
        ${minScreen(BREAKPOINTS.lg)} {
          margin-left: calc(var(--border-offset) * -1);
          border-left: 1px solid
            ${getColorToken('colors.discovery.body.white.border')};
          padding-left: var(--border-offset);
        }

        .summary-item__hed {
          ${getTypographyStyles('typography.definitions.discovery.hed-break-out')};
          ${minScreen(BREAKPOINTS.md)} {
            ${getTypographyStyles('typography.definitions.discovery.hed-feature')};
          }
        }

        .summary-item__dek {
          ${getTypographyStyles('typography.definitions.discovery.description-feature')};
        }
      }
    }

    > ${GridItem}:not(:first-child) {
      ${SummaryCollageThreeItemWrapper} {
        .summary-item__hed {
          margin-bottom: ${calculateSpacing(2)};
          ${minScreen(BREAKPOINTS.md)} {
            ${getTypographyStyles('typography.definitions.discovery.hed-core-secondary')};
            margin-bottom: ${calculateSpacing(2)};
          }
        }
      }
    }
  }
`;
const SummaryCollageSevenWrapper = styled(Grid.WithMargins).withConfig({
    displayName: 'SummaryCollageSevenWrapper'
}) `
  ${cssVariablesCollage()};

  && {
    ${({ hasTopSpacing }) => {
    if (hasTopSpacing) {
        return `
          ${minScreen(BREAKPOINTS.md)} {
             ${({ hasConsistentSpacing, theme }) => {
            return hasConsistentSpacing &&
                getSectionSpacingStyling(theme, 'gap-sm') !== '0px'
                ? `margin-top: 0;`
                : `margin-top: ${calculateSpacing(4)};`;
        }}
          }
        `;
    }
    return '';
}}

    ${({ isSpecial }) => {
    if (isSpecial) {
        return `
        padding-top: ${calculateSpacing(6)};
        padding-bottom: ${calculateSpacing(6)};
        `;
    }
    return ``;
}}
  }

  && {
    row-gap: 0;
  }

  > ${GridItem} {
    ${({ dangerousHed }) => !dangerousHed &&
    `
      &:first-child{
        grid-column: 1/-1;
        grid-row: 1;
      }`}
  }
  > ${GridItem} {
    grid-column: 1 / -1;
    ${minScreen(BREAKPOINTS.lg)} {
      grid-column: span 9;
    }
    ${SummaryCollageThreeWrapper} {
      > ${GridItem}:first-child {
        ${minScreen(BREAKPOINTS.lg)} {
          grid-column: 4 / -1;
          grid-row: 1 / span 2;
        }
      }
      > ${GridItem}:not(:first-child) {
        ${minScreen(BREAKPOINTS.lg)} {
          grid-column: 1 / span 3;
        }
      }
    }
  }
  > ${GridItem}:last-child {
    grid-column: 1 / -1;
    ${minScreen(BREAKPOINTS.lg)} {
      grid-column: 10 / span 3;
    }
  }
  ${SummaryListTitle} {
    margin-bottom: ${calculateSpacing(2)};
  }

  ${SummaryListTitle} ${SectionTitleHed} {
    ${({ hasSectionTitleHedFeature }) => {
    return css `
        ${getTypographyStyles(hasSectionTitleHedFeature
        ? 'typography.definitions.discovery.hed-feature'
        : 'typography.definitions.discovery.subhed-section-tertiary')}
        padding: 0
      `;
}}
  }

  ${SummaryCollageSevenThreeWithoutHed()};

  ${SummaryCollageThreeWrapper} {
    ${({ hideVerticalBorders }) => hideVerticalBorders &&
    css `
        > ${GridItem}:first-child {
          ${SummaryCollageThreeItemWrapper} {
            margin-left: 0;
            border-left: 0;
            padding-left: 0;
          }
        }
      `}
  }
`;
const SectionTitle = styled.span.withConfig({ displayName: 'SectionTitle' }) `
  ${({ hideTitleTopSpacing }) => {
    if (!hideTitleTopSpacing) {
        return `
      margin-top: ${calculateSpacing(2)};
    `;
    }
    return '';
}}
  margin-bottom: ${calculateSpacing(4)};

  ${minMaxScreen(0, BREAKPOINTS.md)} {
    margin-bottom: ${calculateSpacing(3)};
  }

  ${SectionTitleHed} {
    ${({ isSpecial, theme }) => isSpecial &&
    `${getColorStyles(theme, 'color', 'colors.background.white')};`}
  }
`;
const SummaryCollageSevenIsFullBleed = styled.div.withConfig({
    displayName: 'SummaryCollageFourIsFullBleed'
}) `
  ${({ isFullBleedSpecialBackground }) => isFullBleedSpecialBackground &&
    css `
      background-color: ${getColorToken('colors.consumption.lead.special.background')};
      max-width: 100%;
    `}
`;
const SummaryCollageSevenSummaryList = styled(SummaryList.Collection).withConfig({ displayName: 'SummaryCollageSevenSummaryList' }) `
  && {
    border-top: 0;
    padding: 0;

    ${minScreen(BREAKPOINTS.lg)} {
      .summary-item--layout-proportions-33-66 {
        grid-gap: ${calculateSpacing(2)};
      }
    }
  }

  ${RubricWrapper}.summary-item__rubric {
    margin-bottom: ${calculateSpacing(1)};

    ${minMaxScreen(0, BREAKPOINTS.md)} {
      margin-bottom: ${calculateSpacing(2)};
    }
  }

  .summary-list__item:last-child {
    margin-bottom: 0;
    border-bottom: 0;
    padding-bottom: 0;
  }

  .summary-item__byline {
    margin-bottom: 0;
  }

  .summary-item__hed {
    ${getTypographyStyles('typography.definitions.discovery.hed-bulletin-primary')}
  }

  && {
    .summary-item__hed-link::after {
      display: none;
    }
  }

  .summary-item__image-link {
    align-self: center;
  }

  .summary-item--layout-placement-side-by-side {
    .summary-item__hed {
      ${getTypographyStyles('typography.definitions.discovery.hed-bulletin-primary')}

      margin-bottom: ${calculateSpacing(2)};

      ${minMaxScreen(0, BREAKPOINTS.md)} {
        ${getTypographyStyles('typography.definitions.discovery.hed-bulletin-primary')}
      }
    }
  }
`;
module.exports = {
    SectionTitle,
    SummaryCollageSevenSummaryList,
    SummaryCollageSevenWrapper,
    SummaryCollageSevenIsFullBleed
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 56969:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const SummaryList = __webpack_require__(22539);
const SummaryItem = __webpack_require__(74992);
const { SummaryCollageSixSummaryList, SummaryCollageSixWrapper } = __webpack_require__(21215);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * SummaryCollageSix component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.dangerousHed] - Optional string (possibly HTML) to use as the title
 * @param {string} [props.dangerousDek] - Optional string (possibly HTML) to use as the dek
 * @param {string} [props.desktopFeatureColSpan] - Optional value to determine the span of featured item
 * @param {Bool} [props.hasDividerAboveHed] - Optional flag to set divider above HED text
 * @param {Bool} [props.hasDividerBelowHed] - Optional flag to set divider below HED text
 * @param {Bool} [props.hasSectionTitlePrimary] - Optional flag to set the title with primary font
 * @param {Bool} [props.hasTitleBorder] - Optional flag to show title border
 * @param {Bool} [props.hideBottomBorders] - Optional prop to hide bottom borders
 * @param {Bool} [props.hideRubricItemSummary] - Show or hide rubrics in summary items
 * @param {Bool} [props.hideVerticalBorders] - Show or hide rubrics in summary items
 * @param {Array<SummaryItem.propTypes>} props.items - Array of items to render
 * @param {string} [props.recircRiver] - Optional
 * @param {string} [props.sectionTitleVariation] - Optional variation of SectionTitle to use
 * @param {bool} [props.shouldEnableBundleComponentAnalytics] - Optional feature flag to append data-section-title attribute for analytics
 * @param {string} [props.shouldHideBylines] - Optional flag to hide bylines
 * @param {string} [props.shouldCondenseRightCells] - Optional flag to hide compress right cells
 * @param {string} [props.summaryItemVariation] - Optional prop to control summary item variation, defaults to `TextBelowLeft`
 * @param {string} [props.summaryListSummaryItemVariation] - Optional variation of SummaryItem to use within SummaryList
 * @param {object} [props.trackingNamespace] - Optional override the base namespace of data-section-title for component tracking
 * @param {object} [props.variations] - Variation properties used in rendering the component
 * @param {Bool} [props.variations.hasSubHedSecPrimary] - Optional flag to show title with primary typography
 * @param {Bool} [props.hasTwoColumnLayout] - Optional flag for Two Column layout
 * @param {Bool} [props.shouldHidePublishDate] - Optional flag to show date
 * @param {Bool} [props.hasBorder] - Optional flag to show border
 * @param {Bool} [props.shouldAlignDekInCenter] - Optional flag to align DEK in center
 * @returns {ReactElement} <div>
 */
const SummaryCollageSix = ({ className, dangerousHed, dangerousDek, desktopFeatureColSpan, hasDividerAboveHed = true, hasDividerBelowHed = true, hasSectionTitlePrimary, hasTitleBorder = true, hasTwoColumnLayout = false, hideBottomBorders = false, hideRubricItemSummary = false, hideVerticalBorders = false, items, sectionTitleVariation = 'TextLeft', shouldEnableBundleComponentAnalytics, shouldHideBylines = false, shouldCondenseRightCells = false, summaryItemVariation = 'TextBelowLeft', summaryListSummaryItemVariation = null, recircRiver, shouldHidePublishDate = true, hasBorder = true, shouldAlignDekInCenter = false, trackingNamespace }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SummaryCollageSix'
        });
    }, []);
    const modifiedItems = items.map((item, index) => {
        if (!hasTwoColumnLayout && index !== 0 && item.image) {
            item.image = null;
        }
        if (hasTwoColumnLayout) {
            item.shouldHidePublishDate = shouldHidePublishDate;
            item.hasBorder = hasBorder;
        }
        return item;
    });
    return (React.createElement(SummaryCollageSixWrapper, { className: className, hasTwoColumnLayout: hasTwoColumnLayout, hasTitleBorder: hasTitleBorder, hideBottomBorders: hideBottomBorders, hideVerticalBorders: hideVerticalBorders, shouldCondenseRightCells: shouldCondenseRightCells, summaryCollageColSpan: desktopFeatureColSpan, hasDividerBelowHed: hasDividerBelowHed },
        React.createElement(SummaryCollageSixSummaryList, { shouldAlignDekInCenter: shouldAlignDekInCenter, hasTwoColumnLayout: hasTwoColumnLayout, dangerousHed: dangerousHed, dangerousDek: dangerousDek, hideRubricItemSummary: hideRubricItemSummary, items: modifiedItems, sectionTitleVariation: sectionTitleVariation, summaryItemVariation: summaryListSummaryItemVariation || summaryItemVariation, recircRiver: recircRiver, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, shouldHideBylines: shouldHideBylines, hasSectionTitlePrimary: hasSectionTitlePrimary, hasDividerAboveHed: hasDividerAboveHed, hasDividerBelowHed: hasDividerBelowHed, trackingNamespace: trackingNamespace })));
};
SummaryCollageSix.propTypes = {
    className: PropTypes.string,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    desktopFeatureColSpan: PropTypes.string,
    hasBorder: PropTypes.bool,
    hasDividerAboveHed: PropTypes.bool,
    hasDividerBelowHed: PropTypes.bool,
    hasSectionTitlePrimary: PropTypes.bool,
    hasTitleBorder: PropTypes.bool,
    hasTwoColumnLayout: PropTypes.bool,
    hideBottomBorders: PropTypes.bool,
    hideRubricItemSummary: PropTypes.bool,
    hideVerticalBorders: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape(SummaryItem.propTypes)).isRequired,
    recircRiver: PropTypes.string,
    sectionTitleVariation: PropTypes.string,
    shouldAlignDekInCenter: PropTypes.bool,
    shouldCondenseRightCells: PropTypes.bool,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldHideBylines: PropTypes.bool,
    shouldHidePublishDate: PropTypes.bool,
    summaryItemVariation: SummaryList.propTypes.summaryItemVariation,
    summaryListSummaryItemVariation: PropTypes.string,
    trackingNamespace: PropTypes.string
};
module.exports = SummaryCollageSix;
//# sourceMappingURL=SummaryCollageSix.js.map

/***/ }),

/***/ 92125:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const SummaryCollageSix = __webpack_require__(56969);
SummaryCollageSix.displayName = 'SummaryCollageSix';
module.exports = asConfiguredComponent(SummaryCollageSix, 'SummaryCollageSix');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 21215:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { css, default: styled } = __webpack_require__(92168);
const { calculateSpacing, getColorToken, minMaxScreen, minScreen, getTypographyStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { cssVariablesCollage, universalGridCore } = __webpack_require__(89085);
const { RubricWrapper } = __webpack_require__(6613);
const { SectionTitleHed } = __webpack_require__(33500);
const { SummaryListTitle } = __webpack_require__(63637);
const SummaryList = __webpack_require__(22539);
const SummaryCollageSixWrapper = styled.div.withConfig({
    displayName: 'SummaryCollageSixWrapper'
}) `
  ${SummaryListTitle} {
    margin-bottom: ${calculateSpacing(2)};
  }

  ${minMaxScreen(0, BREAKPOINTS.md)} {
    ${({ hasTwoColumnLayout }) => hasTwoColumnLayout &&
    `
        margin: 0 ${calculateSpacing(3)};
        .summary-list--collection-list {
          padding: 0;
        }
      `}
  }

  ${({ hasTitleBorder }) => hasTitleBorder &&
    css `
      ${SummaryListTitle} {
        border-bottom: ${({ hasDividerBelowHed }) => hasDividerBelowHed &&
        `1px solid ${getColorToken('colors.discovery.body.white.border')}`};
        border-top: ${({ hasDividerAboveHed }) => hasDividerAboveHed &&
        `1px solid ${getColorToken('colors.discovery.body.white.divider')}`};
        margin-bottom: ${calculateSpacing(4)};
      }

      ${SectionTitleHed} {
        padding-left: 0;
      }
    `}

  ${({ hideVerticalBorders, hasTwoColumnLayout }) => hideVerticalBorders &&
    !hasTwoColumnLayout &&
    css `
      &&& {
        .summary-item:first-child {
          margin-right: 0;
          border-right: 0;
          padding-right: 0;
        }
      }
    `}
  
  .summary-list__items {
    ${cssVariablesCollage()}
    ${universalGridCore(false)}
  }

  .summary-item {
    grid-column: 1 / -1;
    margin-bottom: ${calculateSpacing(5)};

    ${({ hideBottomBorders }) => !hideBottomBorders &&
    css `
        border-bottom: 1px solid
          ${getColorToken('colors.discovery.body.white.border')};
      `}

    padding-bottom: ${calculateSpacing(5)};

    ${minScreen(BREAKPOINTS.lg)} {
      border-bottom: 0;
      padding-bottom: 0;
    }
  }

  .summary-item:first-child {
    ${({ hasTwoColumnLayout }) => hasTwoColumnLayout &&
    `
        ${minScreen(BREAKPOINTS.md)} {
          grid-column: 1 / span 6;
        }
    `}
    ${({ hasTwoColumnLayout }) => !hasTwoColumnLayout &&
    css `
        ${minScreen(BREAKPOINTS.lg)} {
          grid-column: 1 / span 8;
          grid-row: ${({ shouldCondenseRightCells }) => shouldCondenseRightCells ? '1 / span 6' : '1 / span 5'};
          margin-right: calc(var(--border-offset) * -1);
          border-right: 1px solid
            ${getColorToken('colors.discovery.body.white.border')};
          border-bottom: 0;
          padding-right: var(--border-offset);
          ${({ summaryCollageColSpan }) => summaryCollageColSpan === 'use6' && `grid-column: 1 / span 6;`};
        }
      `}
  ${({ hasTwoColumnLayout }) => !hasTwoColumnLayout &&
    css `
        ${RubricWrapper}.summary-item__rubric {
          margin-right: auto;
          margin-left: auto;
        }
        .summary-item__hed {
          ${getTypographyStyles('typography.definitions.discovery.hed-break-out')};

          ${minScreen(BREAKPOINTS.md)} {
            ${getTypographyStyles('typography.definitions.discovery.hed-feature')};
          }
        }
      `}
   .summary-item__dek {
      ${getTypographyStyles('typography.definitions.discovery.description-feature')};
    }
  }

  ${({ hasTwoColumnLayout }) => !hasTwoColumnLayout &&
    css `
      .summary-item__hed-link::after {
        margin-right: auto;
        margin-left: auto;
      }

      .summary-item:not(:first-child) {
        ${minScreen(BREAKPOINTS.lg)} {
          grid-column: 9 / span 4;
          margin-bottom: 0;
          border-bottom: 1px solid
            ${getColorToken('colors.discovery.body.white.border')};
          padding: 0 0 ${calculateSpacing(4)} 0;

          ${({ summaryCollageColSpan }) => summaryCollageColSpan === 'use6' && `grid-column: 7 / span 6;`};
        }

        .summary-item__hed {
          ${getTypographyStyles('typography.definitions.discovery.hed-bulletin-primary')}
        }

        .summary-item__hed-link {
          &::after {
            display: none;
          }
        }

        .summary-item__hed {
          ${getTypographyStyles('typography.definitions.discovery.hed-bulletin-secondary')}
        }

        .summary-item__dek,
        .summary-item__metadata-primary,
        .summary-item__metadata-secondary {
          display: none;
        }
      }
    `}
  ${({ hasTwoColumnLayout, theme }) => hasTwoColumnLayout &&
    css `
      ${SummaryListTitle} {
        margin-bottom: ${calculateSpacing(4)};
        padding: 0;
        padding-top: 0;
        padding-bottom: 0;

        * {
          ${getTypographyStyles(theme, 'typography.definitions.discovery.subhed-section-secondary')};
        }
      }

      .summary-item {
        border-bottom: unset;

        .summary-item__content {
          flex: 5;
        }
      }
      ${minMaxScreen(0, BREAKPOINTS.md)} {
        .summary-item {
          &:nth-of-type(n + 3) {
            display: flex;
            column-gap: 1rem;

            .summary-item__asset-container {
              flex: 1;
              align-self: center;
            }
          }
        }
      }
      ${minScreen(BREAKPOINTS.md)} {
        .summary-item {
          &:nth-of-type(2) {
            grid-column: 7 / span 6;
          }

          &:nth-of-type(n + 3) {
            grid-column: span 3;
            grid-row: 2;
          }
        }
      }
    `}

  .summary-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
`;
const SummaryCollageSixSummaryList = styled(SummaryList.Collection).withConfig({
    displayName: 'SummaryCollageSixSummaryList'
}) `
  ${RubricWrapper}.summary-item__rubric {
    margin-bottom: ${calculateSpacing(1)};
  }

  &&& {
    .summary-item__hed {
      margin-bottom: ${calculateSpacing(2)};
    }
  }

  .summary-item__publish-date {
    margin-bottom: ${calculateSpacing(3)};
  }

  .summary-list__items {
    .summary-list__item {
      .summary-item__hed {
        ${({ hasTwoColumnLayout }) => hasTwoColumnLayout &&
    getTypographyStyles('typography.definitions.discovery.hed-core-secondary')}
      }
      ${minMaxScreen(0, BREAKPOINTS.md)} {
        margin-bottom: ${({ hasTwoColumnLayout }) => !hasTwoColumnLayout ? 0 : calculateSpacing(4)};
      }
      padding-bottom: ${({ hasTwoColumnLayout }) => !hasTwoColumnLayout ? 0 : `unset`};
    }

    .summary-item:first-child {
      margin-bottom: ${({ hasTwoColumnLayout }) => !hasTwoColumnLayout ? 0 : calculateSpacing(4)};
    }
  }
`;
module.exports = { SummaryCollageSixSummaryList, SummaryCollageSixWrapper };
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 92534:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(7313)/* ["default"] */ .A);
const { componentTracking } = __webpack_require__(90090);
const Button = __webpack_require__(73730);
const SectionTitle = __webpack_require__(35864);
const SummaryItem = __webpack_require__(74992);
const SummaryList = __webpack_require__(22539);
const CollageVideoItem = __webpack_require__(97857);
const { TrackComponentChannel } = __webpack_require__(78788);
const StoryUnit = __webpack_require__(99366);
const { SummaryCollageThreeBGWrapper, SummaryCollageThreeButtonWrapper, SummaryCollageThreeTitle, SummaryCollageThreeDek, SummaryCollageThreeWrapper, SummaryCollageThreeItemWrapper } = __webpack_require__(85095);
const { getVariationNames } = __webpack_require__(81372);
const PaletteProvider = __webpack_require__(49235);
const { trackNavigationEvent } = __webpack_require__(14307);
const { isDesktopBrowser } = __webpack_require__(72362);
const { inlineEmbedPosition } = __webpack_require__(62327);
/**
 * SummaryCollageThree component
 *
 * @param {object} props - React props
 * @param {string} [props.buttonUrl] - URL to be redirected when the see more button is clicked
 * @param {string} [props.customTextForSeeMoreButton] - Optional value to render for see more button
 * @param {string} [props.dangerousDek] - Optional string (possibly HTML) to use as the dek
 * @param {string} [props.dangerousHed] - Optional string (possibly HTML) to use as the title
 * @param {string} [props.desktopFeatureColSpan] - Optional value to determine the span of featured item
 * @param {string} [props.desktopFeatureColSpanForVideo] - Optional value to determine the span of featured video item
 * @param {Bool} [props.hasBorder] - Show or hide border-bottom in summary items
 * @param {Bool} [props.hasConsistentSpacing] - defines whether the consistent spacing is needed or not
 * @param {Bool} [props.hasExtraBottomPadding] - Optional add extra bottom padding in summary items
 * @param {Bool} [props.hasExtraPadding] - Optional add extra padding in summary items
 * @param {Bool} [props.hasExtraTopPadding] - Optional add extra top padding in summary items
 * @param {Bool} [props.hasIncreasedTitleSpacing] - Optional add extra spacing to the title
 * @param {Bool} [props.hasMinimalSummaryItem] - An optional prop to make Summary Items only show heds with 16:9 secondary photos, and a 4:3 main photo
 * @param {Bool} [props.hasModerateBottomMarginOnDek] - An optional prop which allows to have moderate bottom spacing on dek
 * @param {bool} [props.hasNoBottomPadding] - An optional prop to remove bottom spacing
 * @param {bool} [props.hasNoMarginBottonOnLastItem] - Prop to remove the last item margin bottom
 * @param {bool} [props.hasNoMarginBottomLastItemHed] - Prop to remove the margin bottom for the last element hed
 * @param {Bool} [props.hasOtherTitleSpacing] - Optional add extra spacing to the title
 * @param {Bool} [props.hasTopSpacing] - Show or hide top margin spacing of the component
 * @param {Bool} [props.hideRubricItemSummary] - Show or hide rubrics in summary items
 * @param {Bool} [props.hideVerticalBorders] - Optional prop to hide vertical borders
 * @param {Array} props.items - Items to display in the collage that map to the summary item pattern
 * @param {Bool} props.isDenseSummaryCollageThree - Flag to use alternate style for SummaryCollageThree
 * @param {Array} props.isPrimaryItemFullBleed - Makes Primary item expand to full bleed
 * @param {bool} props.isSpecial - Optional prop to check whether it is special theme or not
 * @param {string} [props.recircRiver] - Prop which stores the value of the recirc river
 * @param {string} [props.sectionTitleVariation] - Optional variation of SectionTitle to use, defaults to `LineAboveLineBelowTextCenter`
 * @param {Bool} [props.shouldDisplayDangerousDek] - Optional flag to render a dangerousDek configurable per brand
 * @param {Bool} [props.shouldEmbedFeaturedVideo] - Optional flag to render CNE Video items in a CollageVideoItem instead of a SummaryItem. (defaults to false)
 * @param {bool} [props.shouldEnableBundleComponentAnalytics] - feature flag to append data-section-title attribute for analytics
 * @param {Bool} [props.shouldHideBylines] - Optional flag to hide bylines
 * @param {Bool} [props.shouldHideSpaceAtTop] - Optional flag to hide space at top
 * @param {boolean} [props.shouldUseDiscoveryTypeToken] - can be used for applying brand specific typography
 * @param {object} [props.shouldUseAlternativeStyle] - Optional boolean to enable alternative styles
 * @param {string} [props.summaryItemRubricVariation] - Optional variation name to use for rubrics in the summary item
 * @param {string} [props.summaryItemVariation] - Optional variation of SummaryItem to use within SummaryList, defaults to `TextBelowLeft`
 * @param {bool} [props.shouldHideDangerousDek] - Optional flag to hide dangerousDek
 * @param {bool} [props.shouldHideDangerousDekFirstChild] - Optional flag to hide dangerousDek for the first child
 * @param {bool} [props.shouldTrackSnowplowEvent] - Optional flag to enable snowplow event capturing
 * @param {Bool} [props.shouldShowSeeMoreButton] - Optional flag to show "See More" button
 * @param {Bool} [props.showMoreButtonVariation] - Button variation value to render for "See More" button
 * @param {string} [props.theme] - Optional flag to set theme for the component
 * @param {string} [props.shouldHidePublishDate] - option to hide date on summary item
 * @param {object} [props.variations] - Optional. Variation properties used in rendering the component.
 * @param {string} [props.variationName] - Optional. Represents variation name for this component.
 * @param {bool} [props.variations.shouldUseDenseMobileVariation] - Optional flag to enable new density++ variation on SummaryCollageThree
 * @returns {ReactElement} <div>
 */
const SummaryCollageThree = ({ buttonUrl = '', customTextForSeeMoreButton, dangerousHed, dangerousDek, desktopFeatureColSpan = 'use8', desktopFeatureColSpanForVideo = 'use8', hasBorder = true, hasConsistentSpacing = false, hasExtraPadding = false, hasExtraBottomPadding = false, hasExtraTopPadding = false, hasIncreasedTitleSpacing = false, hasMinimalSummaryItem = false, hasModerateBottomMarginOnDek = false, hasNoBottomPadding = false, hasNoMarginBottonOnLastItem = false, hasNoMarginBottomLastItemHed = false, hasOtherTitleSpacing = false, hasTopSpacing = false, hideRubricItemSummary, hideVerticalBorders = false, isPrimaryItemFullBleed = false, items, isDenseSummaryCollageThree, isSpecial = false, recircRiver, sectionTitleVariation = 'LineAboveLineBelowTextCenter', shouldDisplayDangerousDek, shouldEmbedFeaturedVideo = false, shouldEnableBundleComponentAnalytics, shouldHideBylines = false, shouldHideDangerousDek = false, shouldHideDangerousDekFirstChild = false, shouldHidePublishDate = true, shouldHideSpaceAtTop = false, shouldTrackSnowplowEvent = false, shouldUseDiscoveryTypeToken = false, shouldShowSeeMoreButton = false, shouldUseAlternativeStyle = false, showMoreButtonVariation = 'UtilityInverted', summaryItemRubricVariation, summaryItemVariation = 'TextBelowLeft', theme = 'standard', variations = {
    shouldUseDenseMobileVariation: false
}, variationName }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SummaryCollageThree',
            variation: variationName
        });
    }, [variationName]);
    const isMobile = !isDesktopBrowser();
    const { formatMessage } = useIntl();
    const { shouldUseDenseMobileVariation } = variations;
    const minimalSummaryItemProps = hasMinimalSummaryItem
        ? {
            shouldHideBylines: true,
            hideRubricItemSummary: true,
            shouldHidePublishDate: true,
            shouldHideMetadataSecondary: true,
            shouldHideIcon: true,
            shouldHideDangerousDek: true,
            hasUnderlineHed: false,
            hasTighterVerticalSpacing: true
        }
        : {};
    const hasDangerousDek = shouldDisplayDangerousDek && dangerousDek;
    const ButtonComponent = Button[showMoreButtonVariation];
    const SectionTitleComponent = SectionTitle[sectionTitleVariation];
    const SummaryItemComponent = SummaryItem[summaryItemVariation];
    const summaryItemDatatestId = 'SummaryCollageThreeItem';
    const summaryCollageColSpan = items.every((el) => el.contentType === 'cnevideo')
        ? desktopFeatureColSpanForVideo
        : desktopFeatureColSpan;
    const trackSnowplowEvent = (eventType, item, index, placement, total_index) => {
        if (shouldTrackSnowplowEvent) {
            trackNavigationEvent({
                type: eventType,
                subject: 'summary_collage_three',
                items: [
                    {
                        content_title: item.dangerousHed,
                        content_type: item.contentType,
                        content_id: item.copilotID,
                        content_url: item.url
                    }
                ],
                index,
                total_index,
                placement,
                subject_version: shouldUseDenseMobileVariation && isMobile ? 'mobile_dense' : 'default'
            });
        }
    };
    return (React.createElement(PaletteProvider, { palette: theme },
        React.createElement(SummaryCollageThreeBGWrapper, null,
            React.createElement(SummaryCollageThreeWrapper, { summaryCollageColSpan: summaryCollageColSpan, dangerousHed: dangerousHed, hasDangerousDek: hasDangerousDek, hasExtraPadding: hasExtraPadding, hasExtraBottomPadding: hasExtraBottomPadding, hasExtraTopPadding: hasExtraTopPadding, hasMinimalSummaryItem: hasMinimalSummaryItem, hasNoBottomPadding: hasNoBottomPadding, hideVerticalBorders: hideVerticalBorders, hasConsistentSpacing: hasConsistentSpacing, hasTopSpacing: hasTopSpacing && !shouldHideSpaceAtTop, isDenseSummaryCollageThree: isDenseSummaryCollageThree, shouldShowSeeMoreButton: shouldShowSeeMoreButton, shouldUseAlternativeStyle: shouldUseAlternativeStyle, hasModerateBottomMarginOnDek: hasModerateBottomMarginOnDek, hasNoMarginBottomLastItemHed: hasNoMarginBottomLastItemHed, hasNoMarginBottonOnLastItem: hasNoMarginBottonOnLastItem },
                dangerousHed && (React.createElement(SummaryCollageThreeTitle, { as: SectionTitleComponent, dangerousHed: dangerousHed, hasIncreasedTitleSpacing: hasIncreasedTitleSpacing, hasOtherTitleSpacing: hasOtherTitleSpacing, shouldUseAlternativeStyle: shouldUseAlternativeStyle })),
                hasDangerousDek && (React.createElement(SummaryCollageThreeDek, { dangerouslySetInnerHTML: { __html: dangerousDek }, shouldUseDiscoveryTypeToken: shouldUseDiscoveryTypeToken })),
                items.map((item, index) => {
                    const shouldUseCollageVideoItem = shouldEmbedFeaturedVideo && item?.image?.scriptUrl;
                    const analyticsDataAttribute = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, dangerousHed, index);
                    const shouldHideDek = index === 0
                        ? shouldHideDangerousDekFirstChild
                        : shouldHideDangerousDek;
                    return shouldUseCollageVideoItem ? (React.createElement(SummaryCollageThreeItemWrapper, { as: CollageVideoItem, "data-testid": summaryItemDatatestId, analyticsDataAttribute: analyticsDataAttribute, hasBorder: hasBorder, isFeatured: index === 0, item: item, key: item.copilotID, scriptUrl: item.image.scriptUrl, videoEmbedPosition: inlineEmbedPosition, isDenseSummaryCollageThree: isDenseSummaryCollageThree, shouldUseAlternativeStyle: shouldUseAlternativeStyle })) : (React.createElement(SummaryCollageThreeItemWrapper, { as: (!shouldUseDenseMobileVariation || index === 0) &&
                            SummaryItemComponent, "data-testid": summaryItemDatatestId, ...item, analyticsDataAttribute: analyticsDataAttribute, hasExtraPadding: hasExtraPadding, hideRubricItemSummary: hideRubricItemSummary, shouldHideDangerousDek: shouldHideDek, key: index, hedTag: "h3", recircRiver: recircRiver, rubricVariation: summaryItemRubricVariation, shouldHideBylines: shouldHideBylines, ...minimalSummaryItemProps, isPrimaryItemFullBleed: isPrimaryItemFullBleed, index: index, hasMinimalSummaryItem: hasMinimalSummaryItem, isSpecial: isSpecial, shouldUseAlternativeStyle: shouldUseAlternativeStyle, shouldHidePublishDate: shouldHidePublishDate, shouldUseDenseMobileVariation: shouldUseDenseMobileVariation, shouldTrackItemImpressionForSnowplow: shouldTrackSnowplowEvent, impressionHandler: () => trackSnowplowEvent('impression', item, index !== 0 ? index - 1 : index, index === 0 ? 'hero' : 'secondary', index === 0 ? 1 : 2), clickHandler: () => trackSnowplowEvent('click', item, index !== 0 ? index - 1 : index, index === 0 ? 'hero' : 'secondary', index === 0 ? 1 : 2) }, shouldUseDenseMobileVariation && index > 0 && (React.createElement(StoryUnit, { className: `mobile_dense_smart_item-${index}`, key: index, contributors: item.contributors, image: item.image, dangerousHed: item.dangerousHed, dangerousDek: !shouldHideDangerousDek && item.dangerousDek, date: !shouldHidePublishDate && item.date, rubric: item.rubric, url: item.url, shouldTrackSnowplowEvent: shouldTrackSnowplowEvent, impressionHandler: () => trackSnowplowEvent('impression', item, index - 1, 'secondary', 2), clickHandler: () => {
                            window.location = item.url;
                            return trackSnowplowEvent('click', item, index - 1, 'secondary', 2);
                        } }))));
                }),
                shouldShowSeeMoreButton && (React.createElement(SummaryCollageThreeButtonWrapper, null,
                    React.createElement(ButtonComponent, { btnStyle: "outlined", label: customTextForSeeMoreButton ||
                            formatMessage(translations.seeMore), ariaLabel: customTextForSeeMoreButton ||
                            formatMessage(translations.seeMore), href: buttonUrl, inputKind: "link", isSpecial: isSpecial })))))));
};
const BUTTON_VARIATIONS = getVariationNames(Button);
SummaryCollageThree.propTypes = {
    buttonUrl: PropTypes.string,
    className: PropTypes.string,
    customTextForSeeMoreButton: PropTypes.string,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    desktopFeatureColSpan: PropTypes.oneOf(['use8', 'use9']),
    desktopFeatureColSpanForVideo: PropTypes.oneOf(['use8', 'use9']),
    hasBorder: PropTypes.bool,
    hasConsistentSpacing: PropTypes.bool,
    hasExtraBottomPadding: PropTypes.bool,
    hasExtraPadding: PropTypes.bool,
    hasExtraTopPadding: PropTypes.bool,
    hasIncreasedTitleSpacing: PropTypes.bool,
    hasMinimalSummaryItem: PropTypes.bool,
    hasModerateBottomMarginOnDek: PropTypes.bool,
    hasNoBottomPadding: PropTypes.bool,
    hasNoMarginBottomLastItemHed: PropTypes.bool,
    hasNoMarginBottonOnLastItem: PropTypes.bool,
    hasOtherTitleSpacing: PropTypes.bool,
    hasTopSpacing: PropTypes.bool,
    hideRubricItemSummary: PropTypes.bool,
    hideVerticalBorders: PropTypes.bool,
    isDenseSummaryCollageThree: PropTypes.bool,
    isPrimaryItemFullBleed: PropTypes.bool,
    isSpecial: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape(SummaryItem.propTypes)).isRequired,
    recircRiver: PropTypes.string,
    sectionTitleVariation: PropTypes.string,
    shouldDisplayDangerousDek: PropTypes.bool,
    shouldEmbedFeaturedVideo: PropTypes.bool,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldHideBylines: PropTypes.bool,
    shouldHideDangerousDek: PropTypes.bool,
    shouldHideDangerousDekFirstChild: PropTypes.bool,
    shouldHidePublishDate: PropTypes.bool,
    shouldHideSpaceAtTop: PropTypes.bool,
    shouldShowSeeMoreButton: PropTypes.bool,
    shouldTrackSnowplowEvent: PropTypes.bool,
    shouldUseAlternativeStyle: PropTypes.bool,
    shouldUseDiscoveryTypeToken: PropTypes.bool,
    showMoreButtonVariation: PropTypes.oneOf(BUTTON_VARIATIONS),
    summaryItemRubricVariation: PropTypes.string,
    summaryItemVariation: SummaryList.propTypes.summaryItemVariation,
    theme: PropTypes.oneOf(['standard', 'inverted', 'special']),
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        shouldUseDenseMobileVariation: PropTypes.bool
    })
};
SummaryCollageThree.displayName = 'SummaryCollageThree';
module.exports = SummaryCollageThree;
//# sourceMappingURL=SummaryCollageThree.js.map

/***/ }),

/***/ 66341:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
module.exports = asConfiguredComponent(__webpack_require__(38755), 'SummaryCollageThree');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 85095:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { BREAKPOINTS } = __webpack_require__(96472);
const { calculateSpacing, minScreen, maxScreen, minMaxScreen, getTypographyStyles, getColorStyles, getColorToken } = __webpack_require__(26865);
const { BaseText, BaseWrap } = __webpack_require__(76955);
const Grid = __webpack_require__(86659);
const { cssVariablesCollage } = __webpack_require__(89085);
const { maxThresholds } = __webpack_require__(99906);
const { GridItem } = __webpack_require__(40653);
const { SectionTitleHed } = __webpack_require__(33500);
const { InlineVideoItemHed } = __webpack_require__(41803);
const { RubricName } = __webpack_require__(6613);
const { SummaryItemHedLink, SummaryItemContent } = __webpack_require__(68116);
const { SummaryItemHedBase } = __webpack_require__(36211);
const { SmartItemRubric, SmartItemDek, SmartItemHed, SmartItemBaseText } = __webpack_require__(88154);
const { StoryUnitWrapper } = __webpack_require__(63993);
const { SummaryItemBylineWrapper } = __webpack_require__(277);
const { getSectionSpacingStyling } = __webpack_require__(16800);
const SummaryCollageThreeItemFirst = (hideVerticalBorders) => css `
  ${({ theme }) => {
    switch (theme.palette) {
        case 'inverted':
            return css `
          ${minScreen(BREAKPOINTS.lg)} {
            border-right: 1px solid
              ${getColorToken('colors.discovery.body.black.divider')};
          }
        `;
        default:
            return css `
          ${minScreen(BREAKPOINTS.lg)} {
            border-right: 1px solid
              ${getColorToken('colors.discovery.body.white.border')};
          }
        `;
    }
}}

  ${minScreen(BREAKPOINTS.lg)} {
    border-bottom: 0;
    ${({ shouldUseAlternativeStyle }) => shouldUseAlternativeStyle
    ? `padding-right: ${calculateSpacing(2)}`
    : `padding-right: var(--border-offset)`};

    ${hideVerticalBorders &&
    ` padding-right: 0;
    `}
  }

  .summary-item__hed {
    ${getTypographyStyles('typography.definitions.discovery.hed-break-out')}
  }

  .summary-item__dek {
    ${getTypographyStyles('typography.definitions.discovery.description-feature')}
  }
`;
const SummaryCollageThreeItemFirstNoBorders = `
  ${minScreen(BREAKPOINTS.lg)} {
    border-right: 0;
    padding-right: 0;
  }
`;
const SummaryCollageThreeItemSecondColumn = (isDenseSummaryCollageThree) => css `
  ${minScreen(BREAKPOINTS.lg)} {
    padding: 0 0 ${calculateSpacing(2)} 0;
    ${isDenseSummaryCollageThree &&
    `
        padding-bottom: ${calculateSpacing(2.5)};
      `}
    ${({ shouldUseAlternativeStyle }) => shouldUseAlternativeStyle
    ? `padding: 0`
    : `padding: 0 0 ${calculateSpacing(2)} 0`};

    .summary-item__hed {
      margin-bottom: ${calculateSpacing(2)};
    }

    .summary-item__hed-link::after {
      margin-bottom: ${calculateSpacing(2)};
    }

    .summary-item__dek {
      ${({ shouldUseAlternativeStyle }) => shouldUseAlternativeStyle
    ? `margin-bottom: ${calculateSpacing(1)}`
    : `margin-bottom: ${calculateSpacing(2)}`};
    }

    .summary-item__metadata-primary {
      margin-bottom: ${calculateSpacing(1)};
    }

    .summary-item__metadata-secondary {
      margin-bottom: ${calculateSpacing(2)};
    }

    .summary-item__content {
      padding-bottom: 0;
    }
  }
`;
const SummaryCollageThreeItemThird = (hasMinimalSummaryItem, isDenseSummaryCollageThree, hasNoMarginBottomLastItemHed) => css `
  ${minMaxScreen(0, BREAKPOINTS.lg)} {
    border-bottom: none;
    padding-bottom: 0;

    ${hasNoMarginBottomLastItemHed &&
    `
        ${InlineVideoItemHed} {
          margin-bottom: 0;
        }
      `}
  }

  ${minScreen(BREAKPOINTS.md)} {
    padding-bottom: 0;

    .inline-video-item {
      border-bottom: none;
    }
  }
  ${maxScreen(BREAKPOINTS.md)} {
    ${isDenseSummaryCollageThree &&
    `.inline-video-item {
        border-bottom: 1px solid black;
      }
    `}
  }
  ${({ shouldUseAlternativeStyle }) => shouldUseAlternativeStyle
    ? `${minMaxScreen(BREAKPOINTS.md, BREAKPOINTS.lg)} {
      .summary-item__byline-date-icon {
        margin-bottom: 0;
      }
    }`
    : `${minScreen(BREAKPOINTS.lg)} {
      padding-top: ${calculateSpacing(4)};
    }`};

  ${hasMinimalSummaryItem &&
    `
    padding-bottom: 0;
  `}
`;
const SummaryCollageThreeItemWrapper = styled.div.withConfig({
    displayName: 'SummaryCollageThreeItemWrapper'
}) `
  ${({ theme }) => {
    switch (theme.palette) {
        case 'inverted':
            return `
          ${RubricName} {
            ${getColorStyles(theme, 'color', 'colors.discovery.body.black.context-signature')};
          }

          ${SummaryItemHedLink} {
            &:hover,
            &:focus,
            &:active {
              ${getColorStyles(theme, 'color', 'colors.discovery.body.black.heading')};
            }

            ${SummaryItemHedBase} {
              ${getColorStyles(theme, 'color', 'colors.discovery.body.black.heading')};
            }
          }
        `;
        default:
            return '';
    }
}}
  ${(props) => css `
    height: 100%;
    ${minMaxScreen(0, BREAKPOINTS.lg)} {
      .inline-video-item {
        border-bottom: 0;
      }
    }
    ${props.isPrimaryItemFullBleed &&
    props.index === 0 &&
    `&{
      .summary-item__image-link {
        ${minMaxScreen(0, `${maxThresholds.lg}px`)} {
          margin-right: ${calculateSpacing(-3)};
          margin-left: ${calculateSpacing(-3)};
        }
      }
     
    }`}
  `}
  ${({ shouldUseAlternativeStyle }) => shouldUseAlternativeStyle
    ? `
  .summary-item__rubric {
    margin: ${calculateSpacing(2)} 0;
  }

  .summary-item__hed-link {
    margin-bottom: ${calculateSpacing(2)};
  }

  .summary-item__dek {
    margin-bottom: ${calculateSpacing(2)};
  }

  .summary-item__content {
    padding: 0;
  }

  .summary-item__byline-date-icon {
    margin-bottom: ${calculateSpacing(2)};
  }

  ${maxScreen(BREAKPOINTS.lg)} {
    .summary-item__byline-date-icon {
      margin-bottom: ${calculateSpacing(4)};
    }
  }`
    : ''};
`;
const SummaryCollageThreeItems = (hasMinimalSummaryItem, hideVerticalBorders, isDenseSummaryCollageThree, offset = 0, hasNoMarginBottomLastItemHed = false) => css `
  &:nth-child(${offset + 1}) {
    ${minScreen(BREAKPOINTS.lg)} {
      grid-column: 1 / span 8;
      grid-row: span 3;
      ${minScreen(BREAKPOINTS.lg)} {
        margin-right: calc(var(--border-offset) * -1);
        ${hideVerticalBorders && ` margin-right: 0;`}
      }
    }
    ${SummaryCollageThreeItemWrapper} {
      ${SummaryCollageThreeItemFirst(hideVerticalBorders)};
    }
  }

  &:nth-child(1n + ${offset + 2}) {
    ${minScreen(BREAKPOINTS.lg)} {
      grid-column: 9 / span 4;
    }
    ${SummaryCollageThreeItemWrapper} {
      ${SummaryCollageThreeItemSecondColumn(isDenseSummaryCollageThree)};
    }
  }

  &:nth-child(${offset + 3}) {
    ${SummaryCollageThreeItemWrapper} {
      ${SummaryCollageThreeItemThird(hasMinimalSummaryItem, isDenseSummaryCollageThree, hasNoMarginBottomLastItemHed)};
    }
  }
`;
const SummaryCollageThreeTitle = styled.div.withConfig({
    displayName: 'SummaryCollageThreeTitle'
}) `
  ${({ theme }) => {
    switch (theme.palette) {
        case 'inverted':
            return `
          ${SectionTitleHed} {
            ${getColorStyles(theme, 'color', 'colors.discovery.body.black.heading')};
          }
        `;
        default:
            return '';
    }
}}
  margin-bottom: ${calculateSpacing(4)};
  ${({ shouldUseAlternativeStyle }) => shouldUseAlternativeStyle ? `` : `margin-bottom: ${calculateSpacing(2)};`};
  ${({ hasIncreasedTitleSpacing, hasOtherTitleSpacing }) => {
    /* Use padding instead of margin because we want the divider flush */
    if (hasOtherTitleSpacing) {
        return `
        margin-bottom: ${calculateSpacing(2)};
        padding-top: ${calculateSpacing(6)};

        ${minScreen(BREAKPOINTS.lg)}{
          margin-bottom: ${calculateSpacing(3)};
          padding-top: ${calculateSpacing(5)};
        }
      `;
    }
    else if (hasIncreasedTitleSpacing) {
        return `
        margin-bottom: ${calculateSpacing(4)};
        padding-top: ${calculateSpacing(4)};
      `;
    }
    return '';
}}
`;
const SummaryCollageThreeDek = styled(BaseText).withConfig({
    displayName: 'SummaryCollageThreeDek'
}) `
  ${({ theme }) => {
    switch (theme.palette) {
        case 'inverted':
            return `
          ${getColorStyles(theme, 'color', 'colors.discovery.body.black.heading')};
        `;
        default:
            return '';
    }
}}

  padding-right: ${calculateSpacing(1)};
  padding-left: ${calculateSpacing(1)};
  max-width: 600px;
  text-align: center;
  ${getTypographyStyles('typography.definitions.consumptionEditorial.description-core')}
  ${({ shouldUseDiscoveryTypeToken, theme }) => shouldUseDiscoveryTypeToken &&
    `${getTypographyStyles(theme, `typography.definitions.discovery.description-page`)};`};
`;
const SummaryCollageThreeWrapper = styled(Grid.WithMargins).withConfig({
    displayName: 'SummaryCollageThreeWrapper'
}) `
  ${({ hasExtraTopPadding, hasConsistentSpacing, theme }) => {
    if (hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
        return `padding-top: ${calculateSpacing(0)};`;
    }
    else if (hasExtraTopPadding) {
        return `padding-top: ${calculateSpacing(5)};`;
    }
    return '';
}}

  && {
    ${({ hasTopSpacing }) => {
    if (hasTopSpacing) {
        return `
          ${minScreen(BREAKPOINTS.md)} {
             ${({ hasConsistentSpacing, theme }) => {
            return hasConsistentSpacing &&
                getSectionSpacingStyling(theme, 'gap-sm') !== '0px'
                ? `margin-top: 0;`
                : `margin-top: ${calculateSpacing(4)};`;
        }}
          }
        `;
    }
    return '';
}}
  }

  > ${GridItem} {
    ${({ dangerousHed }) => dangerousHed &&
    `
        &:first-child {
          grid-column: 1/-1;
          grid-row: 1;
          margin-bottom: 0px;
        }
      `}

    ${({ dangerousHed, hasDangerousDek }) => !dangerousHed &&
    hasDangerousDek &&
    `
        &:first-child {
          grid-column: 1/-1;
          margin: 0 auto;
          margin-bottom: ${calculateSpacing(2)};
        }
      `}
  }

  > ${GridItem} {
    ${({ hasDangerousDek, dangerousHed, hasModerateBottomMarginOnDek }) => hasDangerousDek &&
    dangerousHed &&
    `
       &:nth-child(2){
        grid-column: 1/-1;
        margin: 0 auto;
        margin-bottom: ${calculateSpacing(4)};
        ${minScreen(BREAKPOINTS.lg)} {
          margin-bottom: ${calculateSpacing(6)};
          ${hasModerateBottomMarginOnDek &&
        `margin-bottom: ${calculateSpacing(4)}`}
        }
       }
     `}
  }

  > ${GridItem} {
    grid-column: 1 / -1;
    ${({ shouldUseAlternativeStyle }) => shouldUseAlternativeStyle
    ? `
    &:nth-child(3),
    &:nth-child(4) {
      ${minScreen(BREAKPOINTS.lg)} {
        ${SummaryCollageThreeItemWrapper} {
          margin-top: ${calculateSpacing(3)};
        }
      }
    }`
    : `margin-bottom: ${calculateSpacing(2)}`};

    ${minScreen(BREAKPOINTS.lg)} {
      margin-bottom: 0;
    }
    ${({ hasNoMarginBottonOnLastItem }) => hasNoMarginBottonOnLastItem &&
    css `
        &:last-child {
          ${maxScreen(BREAKPOINTS.lg)} {
            margin-bottom: 0;
          }
        }
      `}
  }

  && {
    ${cssVariablesCollage()}
    row-gap: 0;
  }

  ${SmartItemRubric} {
    color: ${getColorToken('colors.consumption.lead.standard.context-signature')};
  }
  ${SummaryCollageThreeItemWrapper} > ${StoryUnitWrapper} {
    ${maxScreen(BREAKPOINTS.md)} {
      border-bottom: 1px solid
        ${getColorToken('colors.discovery.body.white.border')};
      padding: ${calculateSpacing(2)} 0;

      ${SmartItemDek} {
        margin: ${calculateSpacing(2)} 0;
      }
      ${SmartItemHed} {
        margin-bottom: 0.5rem;
        ${getTypographyStyles('typography.definitions.discovery.hed-core-secondary')};
      }
      ${SmartItemHed}::after {
        display: block;
        margin-top: ${calculateSpacing(1)};
        margin-bottom: ${calculateSpacing(2)};
        border-bottom: 1px solid
          ${getColorToken('colors.consumption.lead.standard.context-signature')};
        width: 5rem;
        content: '';
      }
      ${SmartItemBaseText}::after {
        display: none;
      }
    }
  }
  ${SummaryCollageThreeItemWrapper} > ${SummaryItemContent} {
    ${maxScreen(BREAKPOINTS.md)} {
      padding: ${calculateSpacing(2)} 0 ${calculateSpacing(2)};

      ${SummaryItemBylineWrapper} {
        margin-bottom: 0;
      }
    }
  }
  ${SummaryCollageThreeItemWrapper} {
    ${({ shouldUseAlternativeStyle }) => shouldUseAlternativeStyle
    ? `
    ${({ hasBorder }) => hasBorder &&
        `border-bottom: 1px solid
    ${getColorToken('colors.discovery.body.white.border')};`}`
    : `
    border-bottom: 1px solid
      ${getColorToken('colors.discovery.body.white.border')};
      `};

    ${({ hasBorder }) => hasBorder &&
    `border-bottom: 1px solid
      ${getColorToken('colors.discovery.body.white.border')};`}
    padding-bottom: 0;

    ${minScreen(BREAKPOINTS.lg)} {
      border-bottom: 0;
    }
    ${({ shouldUseDenseMobileVariation }) => shouldUseDenseMobileVariation &&
    ` ${maxScreen(BREAKPOINTS.md)} {
    border-bottom: 1px solid
  ${getColorToken('colors.discovery.body.white.border')};}`}
  }

  ${SummaryCollageThreeItemWrapper} {
    .summary-item__hed {
      ${getTypographyStyles('typography.definitions.discovery.hed-core-primary')};

      ${minScreen(BREAKPOINTS.lg)} {
        ${getTypographyStyles('typography.definitions.discovery.hed-core-secondary')};
      }
    }
  }

  .inline-video-item__image-link {
    margin-bottom: ${calculateSpacing(2)};
  }

  .inline-video-item__hed {
    ${({ isDenseSummaryCollageThree }) => {
    if (isDenseSummaryCollageThree) {
        return `
            margin-bottom: ${calculateSpacing(2.5)};
          `;
    }
    return `margin-bottom: ${calculateSpacing(2)}`;
}}
  }

  ${({ dangerousHed, hasDangerousDek, hasMinimalSummaryItem, hideVerticalBorders, isDenseSummaryCollageThree, hasNoMarginBottomLastItemHed }) => ((dangerousHed && !hasDangerousDek) ||
    (hasDangerousDek && !dangerousHed)) &&
    css `
      > ${GridItem} {
        ${SummaryCollageThreeItems(hasMinimalSummaryItem, hideVerticalBorders, isDenseSummaryCollageThree, 1, hasNoMarginBottomLastItemHed)}
      }
    `}

  ${({ dangerousHed, hasDangerousDek, summaryCollageColSpan }) => ((dangerousHed && !hasDangerousDek) ||
    (hasDangerousDek && !dangerousHed)) &&
    summaryCollageColSpan === 'use9' &&
    css `
      > ${GridItem} {
        ${minScreen(BREAKPOINTS.lg)} {
          &:nth-child(2) {
            grid-column: 1 / span 9;
          }

          &:nth-child(1n + 3) {
            grid-column: 10 / span 3;
          }
          &:nth-child(5) {
            grid-column: 1 / -1;
          }
        }
      }
    `}
    
    ${({ dangerousHed, hasDangerousDek, hasMinimalSummaryItem, hideVerticalBorders, isDenseSummaryCollageThree }) => !dangerousHed &&
    !hasDangerousDek &&
    css `
      > ${GridItem} {
        ${SummaryCollageThreeItems(hasMinimalSummaryItem, hideVerticalBorders, isDenseSummaryCollageThree, 0)}
      }
    `}

${({ dangerousHed, hasDangerousDek, summaryCollageColSpan }) => !dangerousHed &&
    !hasDangerousDek &&
    summaryCollageColSpan === 'use9' &&
    css `
      > ${GridItem} {
        ${minScreen(BREAKPOINTS.lg)} {
          &:nth-child(1) {
            grid-column: 1 / span 9;
          }

          &:nth-child(1n + 2) {
            grid-column: 10 / span 3;
          }
        }
      }
    `}

${({ summaryCollageColSpan }) => summaryCollageColSpan === 'use4' &&
    css `
      > ${GridItem} {
        ${minScreen(BREAKPOINTS.lg)} {
          &:nth-child(1) {
            grid-column: 1 / span 12;
          }

          &:nth-child(2) {
            grid-column: 1 / span 4;

            ${SummaryCollageThreeItemWrapper} {
              border: none;

              .summary-item__hed {
                ${getTypographyStyles('typography.definitions.discovery.hed-core-primary')};
              }
            }
          }

          &:nth-child(3) {
            grid-column: 5 / span 4;
          }

          &:nth-child(4) {
            grid-column: 9 / span 4;

            ${SummaryCollageThreeItemWrapper} {
              padding-top: 0;
            }
          }
        }

        ${maxScreen(BREAKPOINTS.lg)} {
          &:nth-child(2) {
            ${SummaryCollageThreeItemWrapper} {
              .summary-item__hed {
                ${getTypographyStyles('typography.definitions.discovery.hed-core-primary')};
              }
            }
          }
        }
      }
    `}

    ${({ dangerousHed, hasDangerousDek, hasMinimalSummaryItem, hideVerticalBorders, isDenseSummaryCollageThree }) => dangerousHed &&
    hasDangerousDek &&
    css `
      > ${GridItem} {
        ${SummaryCollageThreeItems(hasMinimalSummaryItem, hideVerticalBorders, isDenseSummaryCollageThree, 2)}
      }
    `}

  > ${GridItem} {
    ${({ shouldShowSeeMoreButton }) => shouldShowSeeMoreButton &&
    `
      &:last-child {
        grid-column: 1 / -1;
        margin: 0 auto;
        ${maxScreen(`${maxThresholds.md}px`)} {
          padding-bottom: ${calculateSpacing(5)};
        }

        ${minScreen(BREAKPOINTS.lg)} {
          padding-top: ${calculateSpacing(4)};
        }
      }
    `}
  }

  ${({ dangerousHed, hasDangerousDek, summaryCollageColSpan }) => dangerousHed &&
    hasDangerousDek &&
    summaryCollageColSpan === 'use9' &&
    `
      > ${GridItem} {
        ${minScreen(BREAKPOINTS.lg)} {
          &:nth-child(3) {
            grid-column: 1 / span 9;
          }

          &:nth-child(1n + 4) {
            grid-column: 10 / span 3;
          }
        }
      }
    `}

  ${({ hasExtraBottomPadding, hasConsistentSpacing, theme }) => {
    if (hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
        return `padding-bottom: ${calculateSpacing(0)};`;
    }
    else if (hasExtraBottomPadding) {
        return `padding-bottom: ${calculateSpacing(5)};`;
    }
    return '';
}}
  
    ${({ hasExtraPadding }) => hasExtraPadding &&
    `
    > ${GridItem}{ 
        &:nth-child(1) {
          ${SummaryCollageThreeItemWrapper} {
            ${minScreen(BREAKPOINTS.lg)} {
              padding-right: ${calculateSpacing(4)};
            }
          }
        }

        &:nth-child(2),
        &:nth-child(3) {
          ${SummaryCollageThreeItemWrapper} {
            ${({ shouldUseAlternativeStyle }) => shouldUseAlternativeStyle
        ? `
            ${minScreen(BREAKPOINTS.lg)} {
              padding-left: ${calculateSpacing(2)};`
        : `padding-left: ${calculateSpacing(2)};`};
            }
          }
        }
      }
    `}

    ${({ dangerousHed, hasDangerousDek, hideVerticalBorders }) => !dangerousHed &&
    !hasDangerousDek &&
    hideVerticalBorders &&
    `
        > ${GridItem}{ 
            &:nth-child(1) {
              ${minScreen(BREAKPOINTS.lg)} {
                margin-right: 0;
              }
              ${SummaryCollageThreeItemWrapper} {
                ${SummaryCollageThreeItemFirstNoBorders}
              }
            }
        }
    `}

    ${({ dangerousHed, hasDangerousDek, hideVerticalBorders }) => ((dangerousHed && !hasDangerousDek) ||
    (hasDangerousDek && !dangerousHed)) &&
    hideVerticalBorders &&
    `
      > ${GridItem}{ 
          &:nth-child(2) {
            ${minScreen(BREAKPOINTS.lg)} {
              margin-right: 0;
            }
            ${SummaryCollageThreeItemWrapper} {
              ${SummaryCollageThreeItemFirstNoBorders}
            }
          }
      }
    `}

    ${({ dangerousHed, hasDangerousDek, hasMinimalSummaryItem }) => !dangerousHed &&
    !hasDangerousDek &&
    hasMinimalSummaryItem &&
    `
      .summary-item__content.summary-item__content--minimal {
        padding-bottom: ${calculateSpacing(2)};
      }
    `}

  ${minScreen(BREAKPOINTS.md)} {
    padding-bottom: ${({ isDenseSummaryCollageThree, hasConsistentSpacing, theme }) => {
    if (hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
        return calculateSpacing(0);
    }
    if (isDenseSummaryCollageThree) {
        return calculateSpacing(2.5);
    }
    return calculateSpacing(5);
}};
    ${({ hasNoBottomPadding }) => hasNoBottomPadding && `padding-bottom: 0;`}
  }
`;
const SummaryCollageThreeBGWrapper = styled(BaseWrap).withConfig({
    displayName: 'SummaryCollageThreeBGWrapper'
}) `
  ${({ theme }) => {
    switch (theme.palette) {
        case 'inverted':
            return `
          ${getColorStyles(theme, 'background', 'colors.discovery.body.black.background')};
        `;
        default:
            return '';
    }
}}
`;
const SummaryCollageThreeButtonWrapper = styled(BaseWrap).withConfig({
    displayName: 'SummaryCollageThreeButtonWrapper'
}) ``;
module.exports = {
    SummaryCollageThreeBGWrapper,
    SummaryCollageThreeButtonWrapper,
    SummaryCollageThreeTitle,
    SummaryCollageThreeDek,
    SummaryCollageThreeWrapper,
    SummaryCollageThreeItemWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 7313:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    seeMore: {
        id: 'SummaryCollageThree.seeMore',
        defaultMessage: 'See More Videos',
        description: 'label text for see more button'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 38755:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const SummaryCollageThree = __webpack_require__(92534);
SummaryCollageThree.DenseMobile = asVariation(SummaryCollageThree, 'DenseMobile', {
    shouldUseDenseMobileVariation: true
});
module.exports = SummaryCollageThree;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 73370:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState, useEffect } = __webpack_require__(96540);
const cloneDeep = __webpack_require__(88055);
const SummaryList = __webpack_require__(22539);
const SectionTitle = __webpack_require__(35864);
const SummaryItem = __webpack_require__(74992);
const SummaryItemFeatured = __webpack_require__(29237);
const { getPropsForSummaryItemFeatured } = __webpack_require__(6518);
const { componentTracking } = __webpack_require__(90090);
const { SummaryCollageTweleveSummaryListItem, SummaryCollageTweleveWrapper, SummaryCollageTweleveMainItem, SummaryCollageTweleveUnderMainItem, SummaryCollageTweleveSummaryList, SummaryCollageTweleveGrid, SummaryCollageTweleveGridItemList, SummaryCollageTweleveGridItemListButtonWrapper, SummaryCollageTweleveSummaryCarouselWrapper, SummaryCollageTweleveSummaryCarousel, SummaryCollageTwelveSectionTitle } = __webpack_require__(73593);
const breakpoints = __webpack_require__(99906);
const { TrackComponentChannel } = __webpack_require__(78788);
const Button = __webpack_require__(88456);
const StoryUnit = __webpack_require__(75989);
const { isDesktopBrowser } = __webpack_require__(72362);
const { trackNavigationEvent } = __webpack_require__(14307);
/**
 * SummaryCollageTweleve component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.curatedSearchHed] - Optional string (possibly HTML) to use as the title for the summary list
 * @param {string} [props.dangerousDek] - Optional string (possibly HTML) to use as the title/dek
 * @param {string} [props.dangerousHed] - Optional string (possibly HTML) to use as the title
 * @param {string} [props.featuredDangerousHed] - Optional string (possibly HTML) to use as the title if shouldUseFeaturedTitleAndFooter is true
 * @param {object} [props.featuredFooter] - Optional data {link and label} for SummaryList footer
 * @param {Bool} [props.hasUnderlineHed] - Optional boolean to enable or disable underline in hed in SummaryList
 * @param {Bool} [props.hideRubricItemSummary] - Show or hide rubrics in summary items
 * @param {Bool} [props.hideVerticalBorders] - Optional prop to hide vertical borders
 * @param {Array<SummaryItem.propTypes>} props.items - Array of items to render
 * @param {Bool} [props.isCenterAlignedWithTopDividerOnly] - Optional to align section title in the center with top divider.
 * @param {Bool} [props.isBestStories] - Optional prop to check for BestStories component
 * @param {number} [props.listItemsLimit] - Optional To display initial n items within SummaryCollageSidelist, defaults to 5
 * @param {string} [props.recircRiver] - Optional
 * @param {object} [props.rightColumnFeature] - Optional feature object settings
 * @param {string} [props.sectionTitleVariation] - Optional variation of SectionTitle to use, defaults to 'LineAboveLineBelowTextCenter'
 * @param {bool} [props.shouldEnableBundleComponentAnalytics] - Optional feature flag to append data-section-title attribute for analytics
 * @param {Bool} [props.shouldHideBylines] - Optional flag to hide bylines
 * @param {Bool} [props.shouldHideDangerousDek] - Optional flag to hide dek
 * @param {Bool} [props.shouldHideDangerousDekInFeaturedItems] - Optional flag to hide dek in FeaturedItems of summarycollage Nine
 * @param {Bool} [props.shouldHideDangerousDekInSummaryList] - Optional flag to hide dek in SummaryList
 * @param {Bool} [props.shouldHoldImageSpace] - Optional flag to hold space for loading images
 * @param {Bool} [props.shouldLimitListItemsOnMobile] - Optional flag to Limit number of items in side list to be diplayed for mobile deices
 * @param {bool} [props.shouldTrackSnowplowEvent] - Optional flag to enable snowplow event capturing
 * @param {Bool} [props.shouldUseFeaturedTitleAndFooter] - Optional flag to use featuredTitleAndFooter. Pass hedWithLink prop using componentConfig VersoFeatures.shouldParseBundleHed
 * @param {string} [props.summaryItemVariation] - Optional variation of SummaryItem to use within SummaryList, defaults to `NoAssetTextCenter`
 * @param {string} [props.summaryItemRubricVariation] - Optional prop to set the variation for the rubric for the summary item
 * @param {string} [props.summaryListSummaryItemVariation] - Optional variation of SummaryItem to use within SummaryList, defaults to `SideBySideDense`
 * @param {string} [props.summaryListHed] - Optional Hed for SummaryList preferred more than curatedSearchHed
 * @param {string} [props.summarySectionTitleVariation] - Optional variation of SectionTitle to use within SummaryList, defaults to 'TextCenter'
 * @param {Bool} [props.shouldUseDekAsHed] - Optional
 * @param {object} [props.trackingNamespace] - Optional override the base namespace of data-section-title for component tracking
 * @param {object} [props.variations] - Variation properties used in rendering the component
 *
 * @returns {ReactElement} <div>
 */
const SummaryCollageTweleve = ({ curatedSearchHed, dangerousDek, dangerousHed, featuredDangerousHed, featuredFooter, hasUnderlineHed, hideRubricItemSummary = false, listItemsLimit = 6, isCenterAlignedWithTopDividerOnly, items = [], isBestStories = false, rightColumnFeature, recircRiver, sectionTitleVariation = 'TextLeft', shouldUseFeaturedTitleAndFooter = false, shouldEnableBundleComponentAnalytics, shouldHideBylines = false, shouldHideDangerousDekInSummaryList = true, shouldLimitListItemsOnMobile = false, shouldTrackSnowplowEvent = false, shouldUseDekAsHed = false, summaryListSummaryItemVariation, summaryListHed, summaryItemRubricVariation, summaryItemVariation = 'SideBySideThirdsImageRight', summarySectionTitleVariation = 'TextLeft', trackingNamespace, variations }) => {
    const [isShowMore, setIsShowMore] = React.useState(true);
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SummaryCollageTweleve'
        });
    }, []);
    const isMobile = !isDesktopBrowser();
    const getDisplayHed = () => {
        const updatedDangerousHed = shouldUseFeaturedTitleAndFooter
            ? featuredDangerousHed || dangerousHed
            : dangerousHed;
        return shouldUseDekAsHed ? dangerousDek : updatedDangerousHed;
    };
    const displayHed = getDisplayHed();
    const summaryListHeading = summaryListHed || curatedSearchHed;
    const hasHed = !!displayHed;
    const TOTAL_LIST_ITEMS = 6;
    const [listItemsVisible, setListItemsVisible] = useState(TOTAL_LIST_ITEMS);
    const { shouldEnableDenseMobile = false } = variations || {};
    const getListProps = () => {
        return rightColumnFeature
            ? {
                hasFeatured: true,
                summaryItemFeatured: rightColumnFeature
            }
            : {};
    };
    const onShowClicked = () => {
        const itemsToDisplay = isShowMore ? TOTAL_LIST_ITEMS : listItemsLimit;
        setListItemsVisible(itemsToDisplay);
        setIsShowMore(!isShowMore);
    };
    const listProps = getListProps();
    const getSubjectVersion = (version) => {
        return (version ||
            (isMobile && shouldEnableDenseMobile ? 'mobile_dense' : 'default'));
    };
    const trackSnowplowEvent = (eventType, item, index, placement, totalItems, version) => {
        if (shouldTrackSnowplowEvent) {
            trackNavigationEvent({
                type: eventType,
                subject: 'summary_collage_twelve',
                items: [
                    {
                        content_title: item?.dangerousHed,
                        content_type: item?.contentType,
                        content_id: item?.copilotID,
                        content_url: item?.url
                    }
                ],
                index,
                total_index: totalItems || items?.length,
                placement,
                subject_version: getSubjectVersion(version)
            });
        }
    };
    useEffect(() => {
        if (shouldLimitListItemsOnMobile &&
            window.innerWidth < breakpoints.minThresholds.xl) {
            setListItemsVisible(listItemsLimit);
        }
    }, [listItemsLimit, shouldLimitListItemsOnMobile]);
    const modifiedItems = cloneDeep(items);
    const hasUnderHeroItem = true;
    // Determine under hero item variation based on conditions
    let underHeroItemVariation;
    if (isBestStories && isMobile) {
        underHeroItemVariation = 'TextBelowLeft';
    }
    else if (!isMobile) {
        underHeroItemVariation = 'SideBySideThirdsImageRight';
    }
    const analyticsDataAttributeHero = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNamespace?.hero || dangerousHed);
    const analyticsDataAttributeUnder = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNamespace?.under || dangerousHed);
    const underHeroItems = modifiedItems.slice(4, 6);
    const item = modifiedItems.slice(11, 12)[0];
    const sharedSummaryItemProps = {
        clickHandler: {},
        hasUnderlineHed: false,
        hideRubricItemSummary,
        recircRiver
    };
    const { featuredProps } = getPropsForSummaryItemFeatured({
        item,
        index: 5,
        sharedSummaryItemProps,
        ...listProps,
        shouldHoldImageSpace: true
    });
    const SectionTitleComponent = SectionTitle[sectionTitleVariation];
    const snowplowEvent = {
        type: 'click',
        subject: 'summary_collage_twelve',
        subject_version: isMobile && shouldEnableDenseMobile ? 'mobile_dense' : 'default'
    };
    return (React.createElement(SummaryCollageTweleveGrid, null,
        React.createElement(SummaryCollageTweleveWrapper, null,
            isBestStories && (React.createElement(SummaryCollageTwelveSectionTitle, { as: SectionTitleComponent, dangerousHed: dangerousHed, link: { html: dangerousDek }, hedTag: "h2" })),
            React.createElement(SummaryCollageTweleveMainItem, { ...modifiedItems[0], as: SummaryItem.TextBelowLeft, analyticsDataAttribute: analyticsDataAttributeHero, hideRubricItemSummary: false, recircRiver: recircRiver, shouldHideBylines: shouldHideBylines, shouldHideDangerousDek: false, shouldHidePublishDate: true, hasUnderlineHed: false, isBestStories: isBestStories, placement: "hero", shouldTrackItemImpressionForSnowplow: shouldTrackSnowplowEvent, impressionHandler: () => trackSnowplowEvent('impression', modifiedItems[0], 0, 'hero', 1), clickHandler: () => trackSnowplowEvent('click', modifiedItems[0], 0, 'hero', 1) }),
            React.createElement(SummaryCollageTweleveSummaryListItem, { hasUnderHeroItem: hasUnderHeroItem, hideVerticalBorders: true, as: SummaryList.Collection, dangerousHed: !isBestStories ? dangerousHed : null, isBestStories: isBestStories, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, shouldHideDangerousDek: true, items: modifiedItems.slice(1, 4), sectionTitleVariation: sectionTitleVariation, summaryItemVariation: summaryItemVariation, shouldHideBylines: shouldHideBylines, shouldHidePublishDate: true, trackingNamespace: trackingNamespace?.aside, recircRiver: recircRiver, hasUnderlineHed: false, rubricVariation: summaryItemRubricVariation, shouldEnableDenseMobile: shouldEnableDenseMobile, shouldTrackItemImpressionForSnowplow: shouldTrackSnowplowEvent, impressionHandler: trackSnowplowEvent, snowplowEvent: { ...snowplowEvent, total_index: 3 }, placement: "secondary", totalItems: 3 }),
            hasUnderHeroItem &&
                underHeroItems.map((singleItem, index) => (React.createElement(SummaryCollageTweleveUnderMainItem, { key: `underHereItem-${index}`, ...singleItem, as: SummaryItem[underHeroItemVariation], shouldHideDangerousDek: isBestStories && isMobile, analyticsDataAttribute: analyticsDataAttributeUnder, hideRubricItemSummary: false, recircRiver: recircRiver, shouldHideBylines: shouldHideBylines, shouldHidePublishDate: true, hasUnderlineHed: false, isBestStories: isBestStories, shouldEnableDenseMobile: shouldEnableDenseMobile, shouldTrackItemImpressionForSnowplow: shouldTrackSnowplowEvent, placement: "secondary_stacked", clickHandler: () => trackSnowplowEvent('click', singleItem, index, 'secondary_stacked', 2), impressionHandler: () => trackSnowplowEvent('impression', singleItem, index, 'secondary_stacked', 2) }, isMobile && !isBestStories && (React.createElement(StoryUnit, { className: `mobile_dense_smart_item-${index}`, key: index, contributors: singleItem.contributors, image: singleItem.image, dangerousHed: singleItem.dangerousHed, dangerousDek: singleItem.dangerousDek, rubric: singleItem.rubric, url: singleItem.url, rubricVariation: "DiscoveryItem", shouldTrackSnowplowEvent: shouldTrackSnowplowEvent, clickHandler: () => trackSnowplowEvent('click', singleItem, index, 'secondary_stacked', 2), impressionHandler: () => trackSnowplowEvent('impression', singleItem, index, 'secondary_stacked', 2) })))))),
        React.createElement(SummaryCollageTweleveGridItemList, { hasHed: hasHed, isCenterAlignedWithTopDividerOnly: isCenterAlignedWithTopDividerOnly, isBestStories: isBestStories },
            !shouldEnableDenseMobile || !isMobile ? (React.createElement(SummaryCollageTweleveSummaryList, { isBestStories: isBestStories, ...listProps, displayHed: displayHed, dangerousHed: summaryListHeading, footerWithLink: shouldUseFeaturedTitleAndFooter ? featuredFooter : {}, hasUnderlineHed: hasUnderlineHed, hideRubricItemSummary: false, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, shouldHideDangerousDek: shouldHideDangerousDekInSummaryList, shouldHidePublishDate: true, shouldHoldImageSpace: false, items: items.slice(6, 6 + listItemsVisible), sectionTitleVariation: summarySectionTitleVariation, summaryItemVariation: summaryListSummaryItemVariation || summaryItemVariation, recircRiver: recircRiver, shouldHideBylines: !isBestStories, trackingNamespace: trackingNamespace?.rightRail, placement: "right_rail", totalItems: 6, impressionHandler: trackSnowplowEvent, clickHandler: trackSnowplowEvent, shouldTrackItemImpressionForSnowplow: shouldTrackSnowplowEvent, snowplowEvent: { ...snowplowEvent, total_index: 6 } })) : (React.createElement(SummaryCollageTweleveSummaryCarouselWrapper, { shouldEnableDenseMobile: shouldEnableDenseMobile },
                React.createElement(SummaryCollageTweleveSummaryCarousel, { items: items.slice(6, 6 + listItemsVisible - 1), dangerousHed: summaryListHed, summaryItemVariation: "SideBySideDenseNoAsset", hideRubricItemSummary: false, shouldShowViewAllButton: false, shouldHideBylines: true, shouldHideDangerousDek: true, shouldHidePublishDate: true, hasCarouselControls: false, hasModerateSpacing: false, shouldHideCarouselFooter: true, isSummaryHeadingSecondary: true, shouldShowAllContentWhenDense: true, shouldEnableDenseMobile: shouldEnableDenseMobile, placement: "right_rail", impressionHandler: trackSnowplowEvent, shouldTrackItemImpressionForSnowplow: shouldTrackSnowplowEvent, snowplowEvent: { ...snowplowEvent, total_index: 6 }, version: "mobile_dense-off_canvas", totalItems: 6 }),
                React.createElement(SummaryItemFeatured, { ...featuredProps, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, hedTag: dangerousHed ? 'h3' : 'h2', impressionHandler: () => trackSnowplowEvent('impression', item, 5, 'right_rail', 6), clickHandler: () => trackSnowplowEvent('click', item, 5, 'right_rail', 6) }))),
            React.createElement(SummaryCollageTweleveGridItemListButtonWrapper, null, shouldLimitListItemsOnMobile && (React.createElement(Button.Primary, { className: "button--show-list", onClickHandler: onShowClicked, label: isShowMore ? 'Show More' : 'Show Less', inputKind: "button" }))))));
};
SummaryCollageTweleve.propTypes = {
    className: PropTypes.string,
    curatedSearchHed: PropTypes.string,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    featuredDangerousHed: PropTypes.string,
    featuredFooter: PropTypes.shape({
        link: PropTypes.string,
        label: PropTypes.string
    }),
    hasUnderlineHed: PropTypes.bool,
    hideRubricItemSummary: PropTypes.bool,
    hideVerticalBorders: PropTypes.bool,
    isBestStories: PropTypes.bool,
    isCenterAlignedWithTopDividerOnly: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape(SummaryItem.propTypes)),
    listItemsLimit: PropTypes.number,
    recircRiver: PropTypes.string,
    rightColumnFeature: PropTypes.shape({
        ctaUrl: PropTypes.string,
        header: PropTypes.string,
        ctaTextLabel: PropTypes.string,
        itemIndex: PropTypes.number,
        hideOnMobile: PropTypes.bool,
        overrideFeaturedLinks: PropTypes.bool
    }),
    sectionTitleVariation: PropTypes.string,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldHideBylines: PropTypes.bool,
    shouldHideDangerousDek: PropTypes.bool,
    shouldHideDangerousDekInFeaturedItems: PropTypes.bool,
    shouldHideDangerousDekInSummaryList: PropTypes.bool,
    shouldLimitListItemsOnMobile: PropTypes.bool,
    shouldTrackSnowplowEvent: PropTypes.bool,
    shouldUseDekAsHed: PropTypes.bool,
    shouldUseFeaturedTitleAndFooter: PropTypes.bool,
    summaryItemRubricVariation: PropTypes.string,
    summaryItemVariation: SummaryList.propTypes.summaryItemVariation,
    summaryListHed: PropTypes.string,
    summaryListSummaryItemVariation: PropTypes.string,
    summarySectionTitleVariation: PropTypes.string,
    trackingNamespace: PropTypes.object,
    variations: PropTypes.shape({
        shouldEnableDenseMobile: PropTypes.bool
    })
};
SummaryCollageTweleve.displayName = 'SummaryCollageTweleve';
module.exports = SummaryCollageTweleve;
//# sourceMappingURL=SummaryCollageTweleve.js.map

/***/ }),

/***/ 99383:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
module.exports = asConfiguredComponent(__webpack_require__(22505), 'SummaryCollageTweleve');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 73593:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { calculateSpacing, getColorToken, minScreen, minMaxScreen, maxScreen, getTypographyStyles } = __webpack_require__(26865);
const { applyGridSpacing, cssVariablesGrid } = __webpack_require__(1123);
const { GridWrapper, GridItem } = __webpack_require__(40653);
const { cssVariablesCollage, universalGridCore } = __webpack_require__(89085);
const { RubricWrapper } = __webpack_require__(6613);
const { SectionTitleHed } = __webpack_require__(33500);
const { SummaryListTitle } = __webpack_require__(63637);
const SummaryCarousel = __webpack_require__(43709);
const { CarouselSectionTitle, SummaryCarouselRow } = __webpack_require__(34751);
const SummaryList = __webpack_require__(22539);
const { SummaryItemHedBase } = __webpack_require__(36211);
const { BREAKPOINTS } = __webpack_require__(96472);
const { SummaryItemFeaturedWrapper, FeaturedTitle, FeaturedLink } = __webpack_require__(56503);
const { SummaryItemDek, SummaryItemHedLink, SummaryItemContent, SummaryItemWrapper, SummaryItemAssetContainer } = __webpack_require__(68116);
const { CarouselListItem } = __webpack_require__(44802);
const { StoryUnitWrapper } = __webpack_require__(63993);
const { SmartItemDek, SmartItemHed, SmartItemBaseText } = __webpack_require__(88154);
const SummaryCollageTweleveWrapper = styled.div.withConfig({
    displayName: 'SummaryCollageTweleveWrapper'
}) `
  ${universalGridCore()}
  ${cssVariablesCollage()}
  ${applyGridSpacing('padding')}
  ${SummaryListTitle} {
    margin-bottom: 0;
  }

  ${SectionTitleHed} {
    padding-left: 0;
  }
  grid-column: 1 / -1;

  &&& {
    grid-template-columns: repeat(4, 1fr);
    grid-row-gap: ${calculateSpacing(0)};
    order: 1;
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
    ${minScreen(BREAKPOINTS.lg)} {
      grid-column-gap: var(--grid-gap);
      grid-column: 1 / span 9;
      grid-row: 1 / span 3;
      grid-template-columns: repeat(9, 1fr);
      grid-template-rows:
        minmax(${calculateSpacing(5)}, auto) minmax(
          ${calculateSpacing(5)},
          auto
        )
        1fr;
      grid-row-gap: ${calculateSpacing(0)};
    }
  }
  ${maxScreen(BREAKPOINTS.md)} {
    .summary-item:first-child {
      padding-bottom: ${calculateSpacing(2.5)};
    }
  }

  .summary-item:last-child {
    align-self: start;
    border-bottom: 1px solid
      ${getColorToken('colors.discovery.body.white.border')};
    padding-bottom: ${calculateSpacing(2.5)};
  }

  .summary-item__content {
    padding-top: ${calculateSpacing(2.5)};
  }
  ${GridWrapper} {
    border-top: none;
  }
`;
const SummaryCollageTweleveMainItem = styled.div.withConfig({
    displayName: 'SummaryCollageTweleveMainItem'
}) `
  && {
    grid-column: 1 / -1;
    ${minScreen(BREAKPOINTS.lg)} {
      grid-column: 4 / 10;
      border-bottom: 0;
      padding-bottom: ${calculateSpacing(3)};
    }

    img {
      object-fit: cover;
      object-position: top;
    }
  }

  .summary-item__hed {
    ${getTypographyStyles('typography.definitions.discovery.hed-feature')};
    color: ${getColorToken('colors.discovery.body.white.heading')};
  }
  ${minScreen(BREAKPOINTS.lg)} {
    grid-column: 4 / -1;
  }

  .summary-item__dek {
    display: block;
    ${getTypographyStyles('typography.definitions.discovery.description-core')};
    color: ${getColorToken('colors.discovery.body.white.description')};
  }

  .summary-item__content {
    padding-bottom: 0;
  }

  .summary-item__image-link {
    padding-right: 0;

    @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
      margin-right: ${({ isBestStories }) => isBestStories ? 0 : `-${calculateSpacing(3)}`};
      margin-left: ${({ isBestStories }) => isBestStories ? 0 : `-${calculateSpacing(3)}`};
    }
  }

  .summary-item__byline {
    margin-bottom: 0;
  }
  ${RubricWrapper}.summary-item__rubric {
    margin-bottom: ${calculateSpacing(2)};
    @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
      margin-bottom: ${calculateSpacing(1.5)};
    }
    color: ${getColorToken('colors.discovery.body.white.context-signature')};
  }

  .summary-item:first-child {
    padding-bottom: ${calculateSpacing(2.5)};
  }
`;
const SummaryCollageTweleveSummaryListItem = styled.div.withConfig({
    displayName: 'SummaryCollageTweleveSummaryListItem'
}) `
  && {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;

    .summary-item {
      margin: 0 0 ${calculateSpacing(2)};
      padding: ${calculateSpacing(2.5)} 0;
      ${minScreen(BREAKPOINTS.lg)} {
        position: relative;
        margin-bottom: 0;
        overflow: hidden;
      }

      &:first-child {
        ${minScreen(BREAKPOINTS.lg)} {
          padding-top: 0;
        }
        ${maxScreen(BREAKPOINTS.md)} {
          padding-top: ${calculateSpacing(2.5)};
        }
      }

      &:last-child {
        ${minMaxScreen(0, BREAKPOINTS.md)} {
          margin-bottom: 0;
          padding-bottom: 0;
        }

        ${minMaxScreen(0, BREAKPOINTS.lg)} {
          &::after {
            display: none;
          }
        }
      }

      .summary-item__hed {
        ${getTypographyStyles('typography.definitions.discovery.hed-core-primary')}
        color:  ${getColorToken('colors.discovery.body.white.heading')};
      }

      .summary-item__metadata-primary,
      .summary-item__metadata-secondary {
        display: none;
      }
    }
  }

  && {
    ${minScreen(BREAKPOINTS.lg)} {
      grid-column: 9 / -1;
      margin-left: calc(var(--border-offset) * -1);
      padding-left: var(--border-offset);
      width: calc(100% + var(--border-offset));
    }
    ${({ hideVerticalBorders }) => hideVerticalBorders &&
    `&&& {
    border-left: 0;
    padding-left: 0;
    }`}

    ${({ hasUnderHeroItem }) => hasUnderHeroItem && `grid-row-end: span 3;`}

.summary-item:last-child {
      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
        border-bottom: none;
        padding-bottom: ${calculateSpacing(1)};
      }

      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.md} - 1px)) {
        padding-bottom: ${calculateSpacing(2)};
      }
    }
    ${minScreen(BREAKPOINTS.lg)} {
      grid-column: 1 / span 3;
      grid-row-start: ${({ isBestStories }) => (isBestStories ? '2' : '1')};
      margin: 0 calc(var(--border-offset) * -1) 0 0;
      padding-right: var(--border-offset);
      padding-left: 0;
    }

    @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
      margin-bottom: ${calculateSpacing(2)};
    }

    @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
      margin-bottom: 0;
    }

    .summary-item__hed {
      /* TOFIX: Lots of overrides happening here, this reassigns the default token for .summary-item__hed */
      ${getTypographyStyles('typography.definitions.discovery.hed-core-primary')}
    }

    .summary-item__dek {
      display: block;
    }

    .summary-item--has-border {
      margin-bottom: 0;
    }

    .summary-item__content {
      padding-bottom: 0;
    }

    .summary-item--has-rule .summary-item__hed-link::after {
      display: block;
    }
  }

  ${({ shouldEnableDenseMobile, theme }) => shouldEnableDenseMobile &&
    `
    ${maxScreen(BREAKPOINTS.md)} {
      border-bottom: 1px solid ${getColorToken(theme, 'colors.discovery.body.white.border')};
            
      .summary-list__items {
        display: grid;
        column-gap: 16px;
        grid-template-columns: repeat(2, 1fr);
      }

      .summary-list__items > div:nth-child(1) {
        grid-column: 1 / -1;
      }

      .summary-list__item:nth-child(2),
      .summary-list__item:nth-child(3) {
        border-bottom: none;
      }
    }
  `}
`;
const SummaryCollageTweleveUnderMainItem = styled.div.withConfig({
    displayName: 'SummaryCollageTweleveUnderMainItem'
}) `
  grid-column: 1 / -1;
  border-top: 1px solid ${getColorToken('colors.discovery.body.white.border')};
  border-bottom: none;
  ${minScreen(BREAKPOINTS.lg)} {
    grid-column: 4 / -1;
  }

  &.summary-item {
    .summary-item__hed {
      margin-bottom: ${calculateSpacing(1)};
      ${getTypographyStyles('typography.definitions.discovery.hed-core-secondary')};
      color: ${getColorToken('colors.discovery.body.white.heading')};
    }

    &:first-of-type {
      padding-bottom: ${calculateSpacing(2.5)};
    }
  }

  ${({ isBestStories }) => isBestStories &&
    `
    && ${SummaryItemHedBase} {
      font-size: 18px;
    }
  `}

  .summary-item__dek {
    display: block;
  }

  .summary-item__asset-container {
    display: grid;
    align-self: baseline;
    padding-top: ${calculateSpacing(2.5)};
  }
  ${SummaryItemContent} {
    padding-bottom: 0;
  }

  ${({ theme, isBestStories }) => `
    &&& {
      ${maxScreen(BREAKPOINTS.md)} {
        ${isBestStories
    ? `
            padding: 1rem 0px;
            border-top: 1px solid rgb(229, 229, 229);
          `
    : `
            border-top: none;
            padding-bottom: 0;
          `}
        .mobile_dense_smart_item-0 {
          border-top: 1px solid
          ${getColorToken(theme, 'colors.discovery.body.white.border')};
        }
      }
    }
    ${StoryUnitWrapper} {
      ${maxScreen(BREAKPOINTS.md)} {
        border-bottom: 1px solid
          ${getColorToken(theme, 'colors.discovery.body.white.border')};
        padding: ${calculateSpacing(2)} 0;
        ${SmartItemDek} {
          margin: ${calculateSpacing(2)} 0;
        }
        ${SmartItemHed} {
          margin-bottom: 0.5rem;
          ${getTypographyStyles('typography.definitions.discovery.hed-core-secondary')};
        }
        ${SmartItemBaseText}::after {
          display: none;
        }
      }
    }
    `}
`;
const SummaryCollageTwelveSectionTitle = styled.div.withConfig({
    displayName: 'SummaryCollageTwelveSectionTitle'
}) `
  position: relative;
  grid-column: 1/-1;
  grid-row: 1;
  z-index: 1;
  margin-bottom: ${calculateSpacing(3)};
  ${SectionTitleHed} {
    padding: 0.25rem 0.75rem;
  }
`;
const SummaryCollageTweleveSummaryList = styled(SummaryList.Collection).withConfig({
    displayName: 'SummaryCollageTweleveSummaryList'
}) `
  &&& {
    order: 3;
    margin: 0;
    border-top: none;
    padding: 0;

    ${minScreen(BREAKPOINTS.lg)} {
      grid-column: 10 / span 3;
      grid-row: 2 / span 2;
      margin-left: calc(var(--border-offset) * -1);
      padding-right: 0;
      padding-left: var(--border-offset);
      width: calc(100% + var(--border-offset));
      height: 100%;
    }

    /* reset width of child elements */
    &: {
      width: auto;
    }
    ${SummaryListTitle} {
      padding-top: 0;
      padding-bottom: 0;
      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
        margin-top: ${calculateSpacing(3)};
        margin-bottom: ${calculateSpacing(3)};
        padding-top: ${({ isBestStories }) => isBestStories ? 0 : calculateSpacing(0.5)};
        padding-bottom: ${({ isBestStories }) => isBestStories ? 0 : calculateSpacing(0.5)};
      }

      ${({ isBestStories }) => isBestStories &&
    `
        margin-bottom: 0;
        ${SectionTitleHed} {
          padding: 0.25rem 0.75rem;
        }
      `}
    }

    .summary-list__item {
      grid-template-areas: 'content image';
      grid-template-columns: 1fr 75px;
      padding-top: ${calculateSpacing(2.5)};
      padding-bottom: ${calculateSpacing(2.5)};

      &:first-of-type {
        ${minScreen(BREAKPOINTS.lg)} {
          border-top: 1px solid
            ${getColorToken('colors.discovery.body.white.border')};
          padding-top: 0;
        }
      }

      &:last-of-type {
        @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
          border-bottom: none;
          padding-bottom: 0;
        }
      }

      &.summary-item--has-border {
        margin-bottom: 0;
      }

      &.summary-item--layout-placement-side-by-side {
        grid-column-gap: var(--grid-gap);
      }

      .summary-item__image-link {
        align-self: start;
        max-width: 75px;
        height: auto;
      }

      .summary-item__hed {
        margin-bottom: 0;
      }
    }
    ${({ displayHed }) => !displayHed &&
    ` && {
        order: 2;

        ${minScreen(BREAKPOINTS.lg)} {
          grid-row: 1 / span 3;
        }
    
        .summary-list__item {
          &:first-of-type {
              border-top: none;
          }
        }
      }
    `}
  }
`;
const SummaryCollageTweleveGridItemList = styled.div.withConfig({
    displayName: 'SummaryCollageTweleveGridItemList'
}) `
  ${SummaryItemFeaturedWrapper} {
    border-bottom: 1px solid
      ${getColorToken('colors.discovery.body.white.border')};

    ${SummaryItemHedLink} {
      ${SummaryItemHedBase} {
        padding-top: 0;
        text-transform: capitalize;
        line-height: 1.45em;
        ${getTypographyStyles('typography.definitions.discovery.hed-core-secondary')};
        color: ${getColorToken('colors.discovery.body.white.heading')};
      }
    }

    ${SummaryItemDek} {
      ${getTypographyStyles('typography.definitions.discovery.description-core')};
      padding-bottom: 8px;
      text-transform: none;
      color: ${getColorToken('colors.discovery.body.white.description')};
    }

    ${FeaturedTitle} {
      border-bottom: none;
      padding-top: 20px;
      padding-bottom: 0;
      text-align: center;
      color: ${getColorToken('colors.consumption.lead.standard.context-signature')};
      ${getTypographyStyles('typography.definitions.globalEditorial.context-primary')};
    }

    ${FeaturedLink} {
      padding-top: 24px;
      padding-bottom: 24px;
      color: ${getColorToken('colors.discovery.body.white.description')};
    }

    .summary-item__rubric {
      display: none;
    }
  }

  ${({ isBestStories }) => isBestStories &&
    `
      .summary-list__items {
        display: flex;
        flex-direction: column;
      }

      ${SummaryItemFeaturedWrapper} {
        && {
          order: 1;
        }

        ${FeaturedTitle} {
          text-align: left;
        }
      }
    `}

  ${({ isCenterAlignedWithTopDividerOnly, isBestStories }) => isCenterAlignedWithTopDividerOnly &&
    `${GridWrapper}{
      ${GridItem} {
        .summary-list__items {
          ${isBestStories &&
        `
            display: flex;
            flex-direction: column;
          `}
          ${SummaryItemFeaturedWrapper} {
            ${isBestStories &&
        `
              order: 1;
              padding-bottom: 0;
              ${SummaryItemAssetContainer}{
                max-width: 100%;
                order: 1;
              }
              ${SummaryItemContent}{
                text-align: left;
                .summary-item__byline {
                  display: none;
                }
              }
              ${FeaturedTitle} {
                text-align: left;
              }
              ${SummaryItemWrapper} {
                padding-top: 1rem;
                ${SummaryItemHedBase} {
                  font-size: 18px;
                }
              }
            `}
          }
        }
      }
    }`}

  grid-column: 1 / -1;
  order: ${({ hasHed }) => (hasHed ? 3 : 2)};

  ${minScreen(BREAKPOINTS.lg)} {
    grid-column: 10 / span 3;
    grid-row: ${({ hasHed }) => (hasHed ? '2 / span 2' : '1 / span 3')};
  }

  .summary-list__item--before-hidden {
    border-bottom: none;
  }
  ${SummaryItemHedLink} {
    ${SummaryItemHedBase} {
      ${getTypographyStyles('typography.definitions.discovery.hed-bulletin-primary')};
      color: ${getColorToken('colors.discovery.body.white.heading')};
    }
  }
`;
const SummaryCollageTweleveGridItemListButtonWrapper = styled.div.withConfig({
    displayName: 'SummaryCollageTweleveGridItemListButtonWrapper'
}) `
  display: flex;
  align-items: center;
  justify-content: center;

  ${minScreen(BREAKPOINTS.lg)} {
    display: none;
  }

  .button--show-list {
    margin-top: ${calculateSpacing(4)};
  }
`;
const SummaryCollageTweleveSummaryCarouselWrapper = styled.div.withConfig({
    displayName: 'SummaryCollageTweleveSummaryCarouselWrapper'
}) `
  ${({ theme }) => `${SummaryItemFeaturedWrapper} {
    border-bottom: 1px solid ${getColorToken(theme, 'colors.discovery.body.white.border')};
  ${SummaryItemHedLink} {
    ${SummaryItemHedBase} {
      text-transform: capitalize;
      line-height: 1.45em;
      ${getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-secondary')};
      color: ${getColorToken('colors.discovery.body.white.heading')};
      padding-top: 0;
    }
  }
  ${SummaryItemDek} {
    ${getTypographyStyles(theme, 'typography.definitions.discovery.description-core')};
    padding-bottom: 8px;
    text-transform: none;
    color: ${getColorToken(theme, 'colors.discovery.body.white.description')};
  }
  ${FeaturedTitle} {
    color:
    ${getColorToken(theme, 'colors.consumption.lead.standard.context-signature')};
    ${getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-primary')};
    text-align: center;
    padding-top: 20px;
    border-bottom: none;
    padding-bottom: 0;
    border-top: 1px solid;
    border-top-color: ${getColorToken(theme, 'colors.discovery.body.white.border')};
  }
  ${FeaturedLink} {
    padding-top:24px;
    padding-bottom: 24px;
    color: ${getColorToken(theme, 'colors.discovery.body.white.description')};
  }
  .summary-item__asset-container{
    margin-left: 57px;
    margin-right: 57px;
  }
  ${minScreen(BREAKPOINTS.md)} {
    display: none;
  }
  ${RubricWrapper}.summary-item__rubric {
    display: block;
  }
  ${SummaryItemWrapper}{
    grid-template-rows: auto;
    ${SummaryItemContent}{
      grid-row: 1;
    }
    ${SummaryItemAssetContainer}{
      grid-row: 2;
      max-width: 100%;
    }
  }
}`}
  ${({ shouldEnableDenseMobile, theme }) => shouldEnableDenseMobile &&
    `
      ${CarouselListItem} {
          min-width: 75vw;
          padding: 0;
          margin-right: ${calculateSpacing(2)};
          border-right: 1px solid ${getColorToken(theme, 'colors.discovery.body.white.border')};
          padding-right: ${calculateSpacing(2)};

          &:last-child {
            border: none;
          }
      }
    `}
  ${minScreen(BREAKPOINTS.md)} {
    display: none;
  }
  ${RubricWrapper}.summary-item__rubric {
    display: block;
  }
  ${SummaryItemWrapper} {
    grid-template-rows: auto;
    ${RubricWrapper} {
      grid-row: 1;
    }
    ${SummaryItemContent} {
      grid-row: 2;
    }
  }

  .summary-item__rubric {
    display: none;
  }
  ${CarouselSectionTitle} {
    margin: ${calculateSpacing(4)} 0 0 auto;
    padding-top: 0;
    padding-bottom: 0;
  }
  ${SummaryCarouselRow} {
    padding-right: 0;
    padding-left: 0;
  }
`;
const SummaryCollageTweleveSummaryCarousel = styled(SummaryCarousel).withConfig({
    displayName: 'SummaryCollageTweleveSummaryCarousel'
}) ``;
const SummaryCollageTweleveGrid = styled.div.withConfig({
    displayName: 'SummaryCollageTweleveGrid'
}) `
  ${cssVariablesGrid()}
  ${cssVariablesCollage()}
  ${applyGridSpacing('padding')}

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--grid-gap);
  margin: 0 auto;
  width: 100%;
  max-width: ${BREAKPOINTS.xxl};
  row-gap: 0;

  ${minScreen(BREAKPOINTS.md)} {
    grid-template-columns: repeat(12, 1fr);
  }

  ${minScreen(BREAKPOINTS.lg)} {
    grid-template-rows: minmax(${calculateSpacing(4)}, auto) repeat(2, 1fr);
  }

  ${SummaryItemHedLink} {
    ${SummaryItemHedBase} {
      margin-bottom: ${calculateSpacing(1)};
    }
  }
  ${SummaryCollageTweleveMainItem} {
    ${SummaryItemHedLink} {
      ${SummaryItemHedBase} {
        margin-bottom: ${calculateSpacing(1)};
        @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
          margin-bottom: ${calculateSpacing(0.5)};
        }
      }
    }
    ${SummaryItemDek} {
      ${getTypographyStyles('typography.definitions.discovery.description-feature')};
      margin-bottom: ${calculateSpacing(2)};
      @media (min-width: 0) and (max-width: calc(${BREAKPOINTS.lg} - 1px)) {
        margin-bottom: ${calculateSpacing(1)};
      }
    }
  }
  ${SummaryCollageTweleveUnderMainItem} {
    padding-bottom: ${calculateSpacing(2.5)};
  }
`;
module.exports = {
    SummaryCollageTweleveMainItem,
    SummaryCollageTwelveSectionTitle,
    SummaryCollageTweleveSummaryListItem,
    SummaryCollageTweleveUnderMainItem,
    SummaryCollageTweleveWrapper,
    SummaryCollageTweleveSummaryList,
    SummaryCollageTweleveGrid,
    SummaryCollageTweleveGridItemList,
    SummaryCollageTweleveGridItemListButtonWrapper,
    SummaryCollageTweleveSummaryCarouselWrapper,
    SummaryCollageTweleveSummaryCarousel
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 22505:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const SummaryCollageTweleve = __webpack_require__(73370);
SummaryCollageTweleve.DenseMobile = asVariation(SummaryCollageTweleve, 'DenseMobile', {
    shouldEnableDenseMobile: true
}, {});
module.exports = SummaryCollageTweleve;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 43304:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const { useEffect } = __webpack_require__(96540);
const SummaryItem = __webpack_require__(74992);
const SectionTitle = __webpack_require__(35864);
const { PaymentGateway } = __webpack_require__(92807);
const { componentTracking, googleAnalytics } = __webpack_require__(90090);
const { useOnAdFilled } = __webpack_require__(1184);
const { asConfiguredComponent } = __webpack_require__(12892);
const { TrackComponentChannel } = __webpack_require__(78788);
const { useViewportObserver } = __webpack_require__(55030);
const { trackNavigationEvent, extractStrategyFromURL } = __webpack_require__(14307);
const { SummaryCollectionRowWrapper, SummaryCollectionRowSectionTitle, SummaryCollectionRowSectionTitleWrapper, SummaryCollectionRowItems, SummaryCollectionRowItem, SummaryCollectionRowAd, SummaryCollectionRowSmartItem } = __webpack_require__(71050);
/**
 * SummaryCollectionRow component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.dangerousHed] - Optional hed for section title
 * @param {bool} [props.isInvertedTheme] - Optional flag for inverted theme
 * @param {string} [props.dangerousSubHed] - Optional sub hed for section title
 * @param {bool} [props.hasBackgroundColor] - Optional. Enable or disable background color
 * @param {bool} [props.hasBorderItem] - Optional. Enable or disable border under SummaryItem
 * @param {bool} [props.hasExtraRubricSpace] - Optional. Enable or disable the extra spacing b/w rubric and hed
 * @param {bool} [props.hasLessBottomSpace] - Optional. Enable or disable the bottom padding
 * @param {bool} [props.hasNoDividerWidth] - Optional. Set divider width to 0
 * @param {bool} [props.hasNoBottomSpacingInMobile] - Enable/Disable the SummaryCollectionRowItems bottom spacing
 * @param {bool} [props.hasSummaryItemAssetSpacing] - Optional. Adds space around summary item asset
 * @param {bool} [props.hasTighterBylineSpacing] - Optional. Enable or disable the extra spacing b/w dek and byline
 * @param {Bool} [props.hideRubricItemSummary] - Show or hide rubrics in summary items
 * @param {string} [props.imageAlignment] - Optional flag to align the image at top instead of center
 * @param {string} [props.itemHedTag] - Optional hed tag for item
 * @param {Array<SummaryItem.propTypes>} props.items - Items to display in the grid that map to the summary item pattern
 * @param {number} [props.nativeTrendingPosition] - optional value to position trending native ad
 * @param {string} [props.sectionTitleVariation] - Optional variation of SectionTitle to use
 * @param {boolean} [props.shouldRemoveLastItemBorder] - To remove the last item border-bottom
 * @param {bool} [props.shouldShowSectionTitle] - Optional boolean to show Section Title
 * @param {bool} [props.shouldHideDangerousDek] - Optional boolean to hide dangerousDek
 * @param {bool} [props.shouldHideDangerousHed] - Optional boolean to hide dangerousHed
 * @param {bool} [props.shouldHideSponsoredContent] - Optional boolean to hide Sponsored Content
 * @param {string} [props.shouldEnableBundleComponentAnalytics] - Optional feature flag to append data-section-title attribute for analytics
 * @param {string} [props.shouldTriggerDynamicUKExperienceTracking] - Optional flag to trigger collection tracking instead of recirc_unit
 * @param {bool} [props.shouldHaveIncreasedHorizontalPadding] - Optional flag to add extra horizontal padding within a row
 * @param {boolean} [props.shouldShowAllContentWhenDense] - isDense floats the image right but also hides content
 * @param {boolean} [props.shouldUseSmartItem] - use StoryUnit instead of SummaryItem
 * on some viewports. This shows it all, always.
 * @param {string} [props.summaryItemRubricVariation] - Optional rubric variation to use for the SummaryItem
 * @param {string} [props.summaryItemVariation] - Optional variation of SummaryItem to use
 * @param {string} [props.template] - Container template name
 * @param {bool} [props.shouldTrackSnowplowRecircEvent] - Optional prop used to track snowplow event
 * @param {string} [props.titleHedTag] - Optional hed tag for section title
 * @param {string} [props.trackingNamespace] - Optional override the base namespace of data-section-title for component tracking
 * @param {string} [props.variations] - Variation properties used in rendering the component
 * @param {string} [props.variations.columnAmount] - Adds a modifier class signaling columns to display
 * @param {bool} [props.variations.hasFullWidth] - Optional variation prop which adds a class to take full width
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 * @param {object} [props.actionBarConfig] - config for Action Bar
 *
 * @returns {ReactElement} <div>
 */
const SummaryCollectionRow = ({ actionBarConfig, className, dangerousHed, dangerousSubHed, hasBackgroundColor = true, hasNoBottomSpacingInMobile = false, hasBorderItem = true, hasExtraRubricSpace = false, hasLessBottomSpace = false, hasNoDividerWidth = false, hasSummaryItemAssetSpacing = false, hasTighterBylineSpacing = false, hideRubricItemSummary, imageAlignment = 'default', shouldTrackSnowplowRecircEvent, itemHedTag, items, isInvertedTheme = false, nativeTrendingPosition = 3, sectionTitleVariation = 'LineAboveLineBelowTextCenter', shouldShowSectionTitle = true, shouldHideDangerousDek = true, shouldHideDangerousHed = false, shouldHideSponsoredContent = false, shouldEnableBundleComponentAnalytics, shouldHaveIncreasedHorizontalPadding, shouldRemoveLastItemBorder = false, shouldShowAllContentWhenDense = false, shouldTriggerDynamicUKExperienceTracking = false, summaryItemRubricVariation, summaryItemVariation = 'SideBySideThirds', shouldUseSmartItem = false, titleHedTag = 'h2', trackingNamespace, template, variations: { columnAmount, hasFullWidth } = {}, variationName }) => {
    useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SummaryCollectionRow',
            variation: variationName
        });
    }, [variationName]);
    const hedTag = itemHedTag || (dangerousHed ? 'h3' : 'h2');
    // only show trending ad slot once request is fulfilled by googletag
    const [shouldShowTrendingAd, , onTrendingAdFilled] = useOnAdFilled('trending-ad');
    const itemTitles = items.map((item) => item.dangerousHed).join('|');
    const removeHtmlTags = (inputString) => {
        return inputString.replace(/<\/?[^>]+(>|$)/g, '');
    };
    const trackSnowplowEvent = (eventType, position, title, copilotID, contentType, url) => {
        let eventData = {
            type: eventType,
            label: removeHtmlTags(title),
            subject: 'recirc_unit',
            items: [
                {
                    content_title: removeHtmlTags(title),
                    content_id: copilotID,
                    content_type: contentType,
                    content_url: url
                }
            ],
            strategy: extractStrategyFromURL(url),
            placement: 'verso-hp-trending',
            index: position,
            total_index: items.length
        };
        if (shouldTriggerDynamicUKExperienceTracking) {
            const { strategy, placement, ...restEventData } = eventData;
            eventData = Object.assign(restEventData, {
                label: dangerousHed,
                subject: 'summary_collection',
                subject_version: 'version_uk'
            });
        }
        trackNavigationEvent(eventData);
    };
    useViewportObserver('.summary-collection-row', undefined, (isInViewport) => {
        if (isInViewport) {
            googleAnalytics.emitUniqueGoogleTrackingEvent('summary-collection-row-impressions', {
                'summary-collection-row-titles': itemTitles,
                'summary-collection-row-template': template
            });
        }
    });
    const itemClickHandler = (position, title, copilotID, contentType, url) => {
        googleAnalytics.emitGoogleTrackingEvent('summary-collection-row-clicks', {
            'summary-collection-row-click-position': position,
            'summary-collection-row-click-title': title,
            'summary-collection-row-template': template
        });
        if (shouldTrackSnowplowRecircEvent) {
            trackSnowplowEvent('click', position - 1, title, copilotID, contentType, url);
        }
    };
    const itemImpressionHandler = (position, title, copilotID, contentType, url) => {
        if (shouldTrackSnowplowRecircEvent) {
            trackSnowplowEvent('impression', position - 1, title, copilotID, contentType, url);
        }
    };
    return (React.createElement(SummaryCollectionRowWrapper, { className: classnames(className, {
            'summary-collection-row--four-columns': columnAmount === 4
        }), "data-testid": "SummaryCollectionRowWrapper", isInvertedTheme: isInvertedTheme, hasBackgroundColor: hasBackgroundColor, shouldHaveIncreasedHorizontalPadding: shouldHaveIncreasedHorizontalPadding },
        dangerousHed && shouldShowSectionTitle && (React.createElement(SummaryCollectionRowSectionTitleWrapper, null,
            React.createElement(SummaryCollectionRowSectionTitle, { as: SectionTitle[sectionTitleVariation], dangerousHed: dangerousHed, dangerousSubHed: dangerousSubHed, "data-testid": "SummaryCollectionRowSectionTitle", hedTag: titleHedTag, hasNoDividerWidth: hasNoDividerWidth }))),
        React.createElement(SummaryCollectionRowItems, { dataTestId: "SummaryCollectionRowItems", showTrendingAd: !shouldHideSponsoredContent && shouldShowTrendingAd, columnAmount: columnAmount, hasFullWidth: hasFullWidth, hasNoBottomSpacingInMobile: hasNoBottomSpacingInMobile, shouldRemoveLastItemBorder: shouldRemoveLastItemBorder }, items.map((item, index) => {
            const isSponsored = !shouldHideSponsoredContent && index === nativeTrendingPosition - 1;
            const analyticsDataAttribute = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNamespace?.item, index);
            return (React.createElement(React.Fragment, { key: index },
                isSponsored && (React.createElement(PaymentGateway, { group: "ads" },
                    React.createElement(SummaryCollectionRowAd, { "data-testid": "SummaryCollectionRowAd", position: "trending", isBorderSpaceDisabled: !hasBorderItem, onFilled: onTrendingAdFilled }))),
                shouldUseSmartItem ? (React.createElement(SummaryCollectionRowSmartItem, { className: `mobile_dense_smart_item-${index}`, key: index, contributors: item.contributors, "data-testid": "SummaryCollectionRowSmartItem", bylineVariation: "ItemWithoutPreamble", image: item.image, dangerousHed: item.dangerousHed, dangerousDek: item.dangerousDek, rubric: item.rubric, url: item.url, rubricVariation: summaryItemRubricVariation, contentType: item.contentType, shouldTrackSnowplowEvent: shouldTriggerDynamicUKExperienceTracking, impressionHandler: () => itemImpressionHandler(index + 1, item.dangerousHed, item.copilotID, item.contentType, item.url), clickHandler: () => itemClickHandler(index + 1, item.dangerousHed, item.copilotID, item.contentType, item.url) })) : (React.createElement(SummaryCollectionRowItem, { ...item, analyticsDataAttribute: analyticsDataAttribute, variation: summaryItemVariation, hasBorder: hasBorderItem, recircPlacement: shouldTrackSnowplowRecircEvent && 'verso-hp-trending', hedTag: hedTag, isRecircListItem: shouldTrackSnowplowRecircEvent &&
                        !shouldTriggerDynamicUKExperienceTracking, key: index, recircId: index + 1, rubricVariation: summaryItemRubricVariation, "data-testid": "SummaryCollectionRowItem", shouldHideDangerousDek: shouldHideDangerousDek, shouldHideDangerousHed: shouldHideDangerousHed, hasTighterBylineSpacing: hasTighterBylineSpacing, hasLessBottomSpace: hasLessBottomSpace, hasExtraRubricSpace: hasExtraRubricSpace, hasSummaryItemAssetSpacing: hasSummaryItemAssetSpacing, hideRubricItemSummary: hideRubricItemSummary, parentDangerousHed: dangerousHed, shouldTriggerDynamicUKExperienceTracking: shouldTriggerDynamicUKExperienceTracking, shouldShowAllContentWhenDense: shouldShowAllContentWhenDense, totalItems: items.length, imageAlignment: imageAlignment, isInvertedTheme: isInvertedTheme, sectionTemplate: template, clickHandlerHed: () => itemClickHandler(index + 1, item.dangerousHed, item.copilotID, item.contentType, item.url), actionBarConfig: actionBarConfig }))));
        }))));
};
SummaryCollectionRow.propTypes = {
    actionBarConfig: PropTypes.object,
    className: PropTypes.string,
    dangerousHed: PropTypes.string,
    dangerousSubHed: PropTypes.string,
    experience: PropTypes.string,
    hasBackgroundColor: PropTypes.bool,
    hasBorderItem: PropTypes.bool,
    hasExtraRubricSpace: PropTypes.bool,
    hasLessBottomSpace: PropTypes.bool,
    hasNoBottomSpacingInMobile: PropTypes.bool,
    hasNoDividerWidth: PropTypes.bool,
    hasSummaryItemAssetSpacing: PropTypes.bool,
    hasTighterBylineSpacing: PropTypes.bool,
    hideRubricItemSummary: PropTypes.bool,
    imageAlignment: PropTypes.oneOf(['top', 'default', 'bottom']),
    isInvertedTheme: PropTypes.bool,
    itemHedTag: PropTypes.string,
    items: PropTypes.arrayOf(PropTypes.shape(SummaryItem.propTypes)).isRequired,
    nativeTrendingPosition: PropTypes.number,
    sectionTitleVariation: PropTypes.string,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldHaveIncreasedHorizontalPadding: PropTypes.bool,
    shouldHideDangerousDek: PropTypes.bool,
    shouldHideDangerousHed: PropTypes.bool,
    shouldHideSponsoredContent: PropTypes.bool,
    shouldRemoveLastItemBorder: PropTypes.bool,
    shouldShowAllContentWhenDense: PropTypes.bool,
    shouldShowSectionTitle: PropTypes.bool,
    shouldTrackSnowplowRecircEvent: PropTypes.bool,
    shouldTriggerDynamicUKExperienceTracking: PropTypes.bool,
    shouldUseSmartItem: PropTypes.bool,
    summaryItemRubricVariation: PropTypes.string,
    summaryItemVariation: PropTypes.oneOf([
        'TextBelowLeft',
        'TextBelowCenter',
        'TextBelowLeftCard',
        'TextBelowCenterCard',
        'ImageRatio43',
        'ImageRatio169',
        'ImageRatio11',
        'CircularImage',
        'TextBelowDesktopOnly',
        'TextBelowDesktopOnlyImageRight',
        'TextBelowDesktopOnlyThirds',
        'TextBelowDesktopOnlyThirdsImageRight',
        'TextBelowDesktopOnlyThirdsImageRightThumbnail',
        'SideBySide',
        'SideBySideImageRight',
        'SideBySideThirds',
        'SideBySideThirdsImageRight',
        'SideBySideDesktopOnly',
        'SideBySideDesktopOnlyImageRight',
        'SideBySideDesktopOnlyThirds',
        'SideBySideDesktopOnlyThirdsImageRight',
        'SideBySideCenterDesktopOnlyThirdsCircularImage',
        'SideBySideDesktopOnlyThirdsCircularImage',
        'NoAssetTextCenter'
    ]),
    template: PropTypes.string,
    titleHedTag: PropTypes.string,
    trackingNamespace: PropTypes.object,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        columnAmount: PropTypes.number,
        hasFullWidth: PropTypes.bool
    })
};
SummaryCollectionRow.displayName = 'SummaryCollectionRow';
module.exports = asConfiguredComponent(SummaryCollectionRow, 'SummaryCollectionRow');
//# sourceMappingURL=SummaryCollectionRow.js.map

/***/ }),

/***/ 35862:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(72318);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 71050:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { css, default: styled } = __webpack_require__(92168);
const Ad = __webpack_require__(19607);
const { BylineWrapper, BylinePreamble, BylineName, BylineLink } = __webpack_require__(74423);
const { SectionTitleHed } = __webpack_require__(33500);
const SummaryItem = __webpack_require__(74992);
const { SummaryItemWrapper } = __webpack_require__(68116);
const { GridItem } = __webpack_require__(40653);
const Grid = __webpack_require__(86659);
const { maxThresholds } = __webpack_require__(99906);
const StoryUnit = __webpack_require__(75989);
const { ActionBarWrapper, ActionBarButton } = __webpack_require__(11586);
const { calculateSpacing, getColorToken, getTypographyStyles, minScreen, styledProperty, maxScreen, getColorStyles } = __webpack_require__(26865);
const { applyGridSpacing, cssVariablesGrid } = __webpack_require__(1123);
const { BREAKPOINTS } = __webpack_require__(96472);
const SummaryCollectionRowWrapper = styled.div.withConfig({
    displayName: 'SummaryCollectionRowWrapper'
}) `
  background-color: ${({ hasBackgroundColor, isInvertedTheme }) => hasBackgroundColor
    ? getColorToken(!isInvertedTheme && hasBackgroundColor
        ? 'colors.discovery.body.light.background'
        : 'colors.interactive.base.black')
    : 'transparent'};

  ${minScreen(BREAKPOINTS.lg)} {
    ${({ shouldHaveIncreasedHorizontalPadding }) => shouldHaveIncreasedHorizontalPadding
    ? `padding: 0 ${calculateSpacing(8)}`
    : ''};
  }

  ${SummaryItemWrapper} {
    ${ActionBarWrapper} {
      position: absolute;
      right: ${calculateSpacing(0.5)};
      bottom: ${calculateSpacing(0.5)};
      background: transparent;
      height: ${calculateSpacing(3)};

      ${ActionBarButton} {
        border: none;
        background: none;
        text-decoration: none;
      }

      ${({ theme }) => `
          ${getColorStyles(theme, 'border-color', `colors.discovery.body.black.border`)};
      
          svg {
            path {
              ${getColorStyles(theme, 'fill', `colors.discovery.body.white.accent`)};
            }
          }
          
        `}
    }
  }
`;
const SummaryCollectionRowSectionTitleWrapper = styled.div.withConfig({
    displayName: 'SummaryCollectionRowSectionTitleWrapper'
}) `
  ${cssVariablesGrid()}
  margin: 0 auto;
  ${applyGridSpacing('padding')}
  max-width: ${BREAKPOINTS.xxl};
`;
const SummaryCollectionRowSectionTitle = styled.div.withConfig({
    displayName: 'SummaryCollectionRowSectionTitle'
}) `
  ${SectionTitleHed} {
    ${getTypographyStyles('typography.definitions.discovery.subhed-section-collection')};
  }
`;
const disabledBorderSpaceStyling = `
  &:last-child {
    padding-bottom: 0;
    
    ${minScreen(BREAKPOINTS.md)}{
      padding-bottom: ${calculateSpacing(2)};
    }
  }
`;
const SummaryCollectionRowItem = styled(({ columnAmount, variation, shouldHideDangerousDek, shouldHideDangerousHed, hasExtraRubricSpace, hasLessBottomSpace, hasTighterBylineSpacing, ...rest }) => {
    const SummaryItemComponent = SummaryItem[variation];
    return React.createElement(SummaryItemComponent, { ...rest });
}).withConfig({ displayName: 'SummaryCollectionRowItem' }) `
  ${SummaryCollectionRowWrapper} & {
    align-items: start;
    padding-bottom: ${calculateSpacing(2)};
    ${minScreen(BREAKPOINTS.md)} {
      border-bottom: 0;
    }

    .summary-item__rubric {
      ${({ isInvertedTheme }) => getTypographyStyles(isInvertedTheme
    ? 'typography.definitions.discovery.subhed-section-tertiary'
    : 'typography.definitions.globalEditorial.context-primary')};
      display: block;
      color: ${getColorToken('colors.discovery.body.light.context-signature')};

      ${minScreen(BREAKPOINTS.md)} {
        margin-bottom: ${({ hasExtraRubricSpace }) => hasExtraRubricSpace ? calculateSpacing(1) : calculateSpacing(0.5)};
      }

      > * {
        ${({ isInvertedTheme, theme }) => isInvertedTheme &&
    `color:${getColorToken(theme, 'colors.discovery.body.white.background')}`};
      }
    }

    .summary-item__hed-link {
      display: ${({ shouldHideDangerousHed }) => shouldHideDangerousHed ? `none` : `block`};

      &::after {
        display: none;
      }
      color: ${({ isInvertedTheme }) => `${getColorToken(isInvertedTheme
    ? 'colors.discovery.body.white.description'
    : 'colors.discovery.body.light.heading')}`};
    }

    .summary-item__hed {
      ${({ isInvertedTheme }) => getTypographyStyles(isInvertedTheme
    ? 'typography.definitions.globalEditorial.context-tertiary'
    : 'typography.definitions.discovery.hed-bulletin-primary')};
      margin-bottom: 0;
    }

    .summary-item__hed:hover {
      ${({ isInvertedTheme, theme }) => isInvertedTheme &&
    `color: ${getColorToken(theme, 'colors.consumption.lead.inverted.link-hover')}`};
    }

    .summary-item__dek {
      ${getTypographyStyles('typography.definitions.discovery.description-page')}
      display: ${({ shouldHideDangerousDek }) => shouldHideDangerousDek ? `none` : `block`};
      margin: ${calculateSpacing(2)} 0 ${calculateSpacing(1)};
      color: ${getColorToken('colors.discovery.body.white.description')};
    }

    .summary-item__content {
      ${({ hasLessBottomSpace }) => hasLessBottomSpace ? `padding-bottom: ${calculateSpacing(0)}` : ''}
      ${({ isInvertedTheme }) => isInvertedTheme
    ? `padding-bottom: ${calculateSpacing(2)};
            padding-top: ${calculateSpacing(3)}`
    : ''};
    }

    .summary-item__byline {
      margin-top: ${({ hasTighterBylineSpacing }) => hasTighterBylineSpacing ? calculateSpacing(1) : calculateSpacing(2)};

      ${BylineWrapper},
      ${BylinePreamble},
      ${BylineName},
      ${BylineLink} {
        ${getTypographyStyles('typography.definitions.globalEditorial.accreditation-core')};
        color: ${getColorToken('colors.discovery.body.light.accreditation')};
      }

      ${BylineLink}:link {
        color: ${getColorToken('colors.discovery.body.light.accreditation')};
      }
    }

    .summary-item__metadata-secondary {
      margin: ${calculateSpacing(2)} 0 0 0;
    }

    ${styledProperty('hasBorder', false, disabledBorderSpaceStyling)};
  }
`;
const SummaryCollectionRowSmartItem = styled(StoryUnit).withConfig({
    displayName: 'SummaryCollectionRowSmartItem'
}) `
  align-items: start;
  padding-bottom: ${calculateSpacing(2)};
  ${minScreen(BREAKPOINTS.md)} {
    display: grid;
    border-bottom: 0;
  }

  .smart-item__rubric {
    ${({ isInvertedTheme }) => getTypographyStyles(isInvertedTheme
    ? 'typography.definitions.discovery.subhed-section-tertiary'
    : 'typography.definitions.globalEditorial.context-primary')};
    display: block;
    color: ${getColorToken('colors.discovery.body.light.context-signature')};

    ${minScreen(BREAKPOINTS.md)} {
      margin-bottom: ${({ hasExtraRubricSpace }) => hasExtraRubricSpace ? calculateSpacing(1) : calculateSpacing(0.5)};
    }

    > * {
      ${({ isInvertedTheme, theme }) => isInvertedTheme &&
    `color:${getColorToken(theme, 'colors.discovery.body.white.background')}`};
    }
  }

  .smart-item__hed-link {
    display: ${({ shouldHideDangerousHed }) => shouldHideDangerousHed ? `none` : `block`};

    &::after {
      display: none;
    }
    color: ${({ isInvertedTheme }) => `${getColorToken(isInvertedTheme
    ? 'colors.discovery.body.white.description'
    : 'colors.discovery.body.light.heading')}`};
  }

  .smart-item__hed {
    ${({ isInvertedTheme }) => getTypographyStyles(isInvertedTheme
    ? 'typography.definitions.globalEditorial.context-tertiary'
    : 'typography.definitions.discovery.hed-bulletin-primary')};
    margin-bottom: 0;
  }

  .smart-item__hed:hover {
    ${({ isInvertedTheme, theme }) => isInvertedTheme &&
    `color: ${getColorToken(theme, 'colors.consumption.lead.inverted.link-hover')}`};
  }

  .smart-item__dek {
    ${getTypographyStyles('typography.definitions.discovery.description-page')}
    display: ${({ shouldHideDangerousDek }) => shouldHideDangerousDek ? `none` : `block`};
    margin: ${calculateSpacing(2)} 0 ${calculateSpacing(1)};
    color: ${getColorToken('colors.discovery.body.white.description')};
  }

  .smart-item__content {
    ${({ hasLessBottomSpace }) => hasLessBottomSpace ? `padding-bottom: ${calculateSpacing(0)}` : ''}
    ${({ isInvertedTheme }) => isInvertedTheme
    ? `padding-bottom: ${calculateSpacing(2)};
            padding-top: ${calculateSpacing(3)}`
    : ''};
  }

  .smart-item__byline {
    margin-top: ${({ hasTighterBylineSpacing }) => hasTighterBylineSpacing ? calculateSpacing(1) : calculateSpacing(2)};

    ${BylineWrapper},
    ${BylinePreamble},
      ${BylineName},
      ${BylineLink} {
      ${getTypographyStyles('typography.definitions.globalEditorial.accreditation-core')};
      color: ${getColorToken('colors.discovery.body.light.accreditation')};
    }

    ${BylineLink}:link {
      color: ${getColorToken('colors.discovery.body.light.accreditation')};
    }
  }

  .smart-item__metadata-secondary {
    margin: ${calculateSpacing(2)} 0 0 0;
  }

  ${maxScreen(BREAKPOINTS.md)} {
    border-bottom: 1px solid
      ${getColorToken('colors.discovery.body.white.border')};
    padding: ${calculateSpacing(2)} 0;
  }
`;
const SummaryCollectionRowAd = styled(Ad).withConfig({
    displayName: 'SummaryCollectionRowAd'
}) `
  padding-bottom: ${calculateSpacing(2)};

  ${minScreen(BREAKPOINTS.md)} {
    border-bottom: 0;
  }
  ${styledProperty('isBorderSpaceDisabled', true, disabledBorderSpaceStyling)};
`;
const SummaryCollectionRowItems = styled(Grid.ThreeUp).withConfig({
    displayName: 'SummaryCollectionRowItems'
}) `
  .ad--trending {
    display: ${({ showTrendingAd }) => (showTrendingAd ? 'block' : 'none')};
  }

  ${styledProperty('showTrendingAd', true, css `
      ${GridItem}:last-of-type ${SummaryCollectionRowItem} {
        display: none;
      }
    `)}

  padding-top: ${calculateSpacing(2)};
  padding-bottom: ${calculateSpacing(5)};

  ${maxScreen(`${maxThresholds.md}px`)} {
    ${({ hasNoBottomSpacingInMobile }) => hasNoBottomSpacingInMobile && `padding-bottom: 0;`};
  }

  ${GridItem} {
    grid-column: 1 / -1;
    /* crosshairs x axis */
    :nth-child(n) {
      @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${maxThresholds.lg}px) {
        position: relative;

        &::before {
          position: absolute;
          bottom: 0;
          background: ${({ theme }) => getColorToken(theme, 'colors.discovery.body.white.border')};
          width: 100%;
          height: 1px;
          content: '';
        }
      }
    }

    ${({ shouldRemoveLastItemBorder }) => shouldRemoveLastItemBorder &&
    css `
        &:last-child ${SummaryItemWrapper} {
          ${maxScreen(`${maxThresholds.md}px`)} {
            border-bottom: none;
            padding-bottom: 0;
          }
        }
      `};
  }

  @media only screen and (min-width: ${maxThresholds.md}px) and (max-width: ${maxThresholds.lg}px) {
    padding-bottom: 0;
    ${GridItem} {
      ${({ columnAmount, hasFullWidth }) => {
    if (columnAmount !== 1 && !hasFullWidth) {
        return `grid-column: ${columnAmount === 4 ? `span 6` : `span 4`}`;
    }
    return `grid-column: 1 / -1`;
}}
    }
  }

  ${minScreen(BREAKPOINTS.lg)} {
    padding-bottom: 0;

    ${GridItem} {
      ${({ columnAmount, hasFullWidth }) => {
    if (columnAmount !== 1 && !hasFullWidth) {
        return `grid-column: ${columnAmount === 4 ? `span 3` : `span 4`}`;
    }
    return `grid-column: 1 / -1`;
}}
    }
  }
`;
module.exports = {
    SummaryCollectionRowWrapper,
    SummaryCollectionRowSectionTitle,
    SummaryCollectionRowSectionTitleWrapper,
    SummaryCollectionRowItems,
    SummaryCollectionRowItem,
    SummaryCollectionRowAd,
    SummaryCollectionRowSmartItem
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 72318:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const SummaryCollectionRow = __webpack_require__(43304);
SummaryCollectionRow.FourColumnsTighterBylineSpaceWithDek = asVariation(SummaryCollectionRow, 'FourColumnsTighterBylineSpaceWithDek', { columnAmount: 4 }, {
    shouldHideDangerousDek: false,
    hasTighterBylineSpacing: true,
    hasLessBottomSpace: true,
    hasExtraRubricSpace: true
});
SummaryCollectionRow.OneColumnWithFullWidth = asVariation(SummaryCollectionRow, 'OneColumnWithFullWidth', {
    columnAmount: 1,
    hasFullWidth: true
}, {
    shouldHideDangerousDek: false,
    hasTighterBylineSpacing: true,
    hasLessBottomSpace: true,
    hasExtraRubricSpace: true
});
module.exports = SummaryCollectionRow;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 44094:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState } = __webpack_require__(96540);
const googleAnalytics = __webpack_require__(37402);
const ContentWithCTA = __webpack_require__(28543);
const SummaryItemSimple = __webpack_require__(31933);
const { SummaryGridCompactGridFive, SummaryGridCompactGridSix, SummaryGridCompactExpandButton, SummaryGridCompactWrapper, SummaryGridCompactHeaderWrapper } = __webpack_require__(34845);
const SectionTitle = __webpack_require__(35864);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * SummaryGridCompact component
 *
 * @param {object} props - React props
 * @param {Array} [props.hasButton] - Button to display in the collection
 * @param {boolean} [props.hasMobilePaddingBottom] - padding bottom for mobile view
 * @param {boolean} [props.showPrice] - Show prices for products
 * @param {boolean} [props.showSummaryGridCompactGridSix] - show SummaryGridCompactGridSix
 * @param {Array} [props.items] - Items to display in the collection
 * @param {Array} [props.dangerousHed] - dangerousHed to display in the collection
 * @param {boolean} [props.hasUnderlineHed] - Optional flag to render an underline below hed
 *
 * @returns {ReactElement} <div>
 */
const SummaryGridCompact = ({ items, dangerousHed, hasButton = true, hasMobilePaddingBottom, hasUnderlineHed, showPrice = false, showSummaryGridCompactGridSix = false }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SummaryGridCompact'
        });
    }, []);
    const AMOUNT_TO_EXTEND_GRID = 10;
    const [numberOfVisibleItems, setNumberOfVisibleItems] = useState(AMOUNT_TO_EXTEND_GRID);
    const nextChunkSize = () => {
        const remainingItems = items.length - numberOfVisibleItems;
        return remainingItems > AMOUNT_TO_EXTEND_GRID
            ? AMOUNT_TO_EXTEND_GRID
            : remainingItems;
    };
    const GridContent = (React.createElement(SummaryGridCompactWrapper, null,
        dangerousHed && (React.createElement(SummaryGridCompactHeaderWrapper, null,
            React.createElement(SectionTitle, { dangerousHed: dangerousHed, hasDividerAbove: true, hasDividerBelow: true, textAlign: "center", "data-testid": "section-title" }))),
        showSummaryGridCompactGridSix ? (React.createElement(SummaryGridCompactGridSix, null, items.map((item, index) => (React.createElement(SummaryItemSimple, { ...item, key: index, hasMobilePaddingBottom: hasMobilePaddingBottom, hasUnderlineHed: hasUnderlineHed }))))) : (React.createElement(SummaryGridCompactGridFive, null, items.slice(0, numberOfVisibleItems).map((item, index) => (React.createElement(SummaryItemSimple, { ...item, key: index, showPrice: showPrice, hasUnderlineHed: hasUnderlineHed })))))));
    const ExpandButton = items.length > numberOfVisibleItems && hasButton && (React.createElement(SummaryGridCompactExpandButton, { label: "Show more", btnStyle: "outlined", onClickHandler: () => {
            setNumberOfVisibleItems(numberOfVisibleItems + nextChunkSize());
            googleAnalytics.emitGoogleTrackingEvent('show_more');
        }, isInline: true }));
    return (React.createElement(ContentWithCTA, { contentComponent: GridContent, ctaComponent: ExpandButton }));
};
SummaryGridCompact.propTypes = {
    dangerousHed: PropTypes.string,
    hasButton: PropTypes.bool,
    hasMobilePaddingBottom: PropTypes.bool,
    hasUnderlineHed: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape(SummaryItemSimple.propTypes))
        .isRequired,
    showPrice: PropTypes.bool,
    showSummaryGridCompactGridSix: PropTypes.bool
};
module.exports = SummaryGridCompact;
//# sourceMappingURL=SummaryGridCompact.js.map

/***/ }),

/***/ 10931:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(44094);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 34845:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const Grid = __webpack_require__(86659);
const { calculateSpacing } = __webpack_require__(26865);
const Button = __webpack_require__(31226);
const { GridItem } = __webpack_require__(40653);
const summaryGridCompactGrid = css `
  && {
    column-gap: ${calculateSpacing(1)};
    row-gap: ${calculateSpacing(1)};
  }

  @keyframes fadein {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  img {
    animation: fadein 0.5s;
  }
`;
const SummaryGridCompactGridFive = styled(Grid.EvenFive).withConfig({
    displayName: 'SummaryGridCompactGridFive'
}) `
  ${summaryGridCompactGrid}
`;
const SummaryGridCompactGridSix = styled(Grid.EvenSix).withConfig({
    displayName: 'SummaryGridCompactGridSix'
}) `
  ${summaryGridCompactGrid} {
    && {
      column-gap: ${calculateSpacing(2)};
    }
  }
`;
const SummaryGridCompactWrapper = styled.div.withConfig({
    displayName: 'SummaryGridCompactWrapper'
}) ``;
const SummaryGridCompactHeaderWrapper = styled(Grid).withConfig({
    displayName: 'SummaryGridCompactHeaderWrapper'
}) `
  > ${GridItem} {
    grid-column: 1/-1;
    margin-bottom: ${calculateSpacing(4)};
  }
`;
const SummaryGridCompactExpandButton = styled(Button.Primary).withConfig({
    displayName: 'SummaryGridCompactExpandButton'
}) `
  margin-bottom: ${calculateSpacing(4)};
`;
module.exports = {
    SummaryGridCompactGridFive,
    SummaryGridCompactGridSix,
    SummaryGridCompactExpandButton,
    SummaryGridCompactWrapper,
    SummaryGridCompactHeaderWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 22539:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(62253);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 71753:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const chunk = __webpack_require__(21013);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { PaymentGateway } = __webpack_require__(92807);
const Breakpoints = __webpack_require__(99906);
const SectionTitle = __webpack_require__(35864);
const SummaryItem = __webpack_require__(74992);
const SummaryListPropTypes = (__webpack_require__(22539).propTypes);
const { TrackComponentChannel } = __webpack_require__(78788);
const { RIVER_LAYOUTS } = __webpack_require__(94776);
const { SummaryRiverAd, SummaryRiverList, SummaryRiverSection, SummaryRiverTitleWrapper, SummaryRiverWrapper } = __webpack_require__(15641);
const { getSummaryListVariant } = __webpack_require__(4290);
const { default: PhotoBookmarkingProvider } = __webpack_require__(56602);
const { connector } = __webpack_require__(57744);
const getSectionTitleLink = ({ dangerousDek, landingPageLink, shouldUseDangerousDekAsLink }) => {
    if (shouldUseDangerousDekAsLink && dangerousDek) {
        return { html: dangerousDek };
    }
    else if (landingPageLink) {
        return landingPageLink;
    }
    return null;
};
const removeAnchorTags = (description = null) => description?.replace(/<a\b[^>]*>(.*?)<\/a>/gi, '$1');
/**
 * SummaryRiver component
 *
 * @param {object} props - React props
 * @param {string} [props.btnStyle] - Optional prop used to decide the button layout
 * @param {string} [props.buttonType] - Button type for call to action
 * @param {number} [props.chunkSize] - Optional number of items per chunk
 * @param {string} [props.className] - Optional top-level class to add
 * @param {Function} [props.clickItem] - Optional click item handler for call to action
 * @param {number} [props.columnAmountForMobile] - Option to set the number of columns to show in mobile devices
 * @param {object} [props.columnsHasUnderlineHed] - Optional Has underline hed for column amount
 * @param {string} [props.content] - Optional content type
 * @param {number} [props.currentPage] - Current page number
 * @param {string} [props.dangerousDek] - Optional River dek
 * @param {string} [props.dangerousHed] - Optional River hed
 * @param {string} [props.filter] - Optional string to pass filters in query params
 * @param {Function} [props.handleLoadMore] - Optional function to handle loading more
 * @param {boolean} [props.hasBottomBorderOnLargeScreen] - Optional has Bottom Border on Large Screen
 * @param {boolean} [props.hasExtraTitlePadding] - Optional to add extra padding on section title
 * @param {boolean} [props.hasLineAboveBelowInTitle] - Optional. Enable or disable Line Above and Below In Title
 * @param {boolean} [props.hasLineAboveBelowTitelHead] - Optional. Enable or disable Line Above and Below Title head
 * @param {boolean} [props.hasMoreItems] - Optional, whether the main list has more items
 * @param {boolean} [props.hasScrollOffset] - Optional. Enable scroll top offset for title wrapper
 * @param {boolean} [props.hasSideBySideMobileOnlyImageRight] - Optional. Enable side by side image to right for mobile view only
 * @param {boolean} [props.hasRail] - Optional has right rail with ad
 * @param {boolean} [props.hasReducedMargin] - Optional. Set to `true` for no margin spacing
 * @param {boolean} [props.hasRule] - Optional leading rule before first item, true by default
 * @param {boolean} [props.hasUnderlineHed] - Optional boolean to enable or disable underline in hed (default to true)
 * @param {boolean} [props.hideBottomBorders] - Optional boolean to hide borders between summary items (defaults to false)
 * @param {boolean} [props.hideBylinesUntil] - Option to show bylines until specific breakpoint
 * @param {boolean} [props.hideRubricItemSummary] - Optional Show or hide rubrics in summary items
 * @param {boolean} [props.isFullBleedMobile] - Optional remove padding from mobile so content takes up full view width, default false
 * @param {boolean} [props.isLoading] - Optional value to indicate loading status, default false
 * @param {boolean} [props.isMidContentAdsDisabled] - Optional value to hide mid content ads
 * @param {string} [props.itemInViewGAEventName] - Optional GA event name that triggers when item is in view
 * @param {Array<SummaryItem.propTypes>} props.items - Array of items to render
 * @param {string} [props.label] - Optional label for for call to action button
 * @param {object} [props.landingPageLink] - Landing page link for SectionTitle
 * @param {object} [props.layout] - Component's Layout set in Copilot
 * @param {string} [props.link] - Optional link for call to action
 * @param {number} [props.maxDekLines] - Optional maximum number of visual lines for the dek to occupy
 * @param {number} [props.maxDekLinesInMobile] - Optional maximum number of visual lines for the dek to occupy in mobile screens
 * @param {number} [props.maxDekLinesInTablet] - Optional maximum number of visual lines for the dek to occupy in tablet screens
 * @param {number} [props.maxDekLinesInDesktop] - Optional maximum number of visual lines for the dek to occupy in desktop screens
 * @param {number} [props.maxDekLinesInLargeDesktop] - Optional maximum number of visual lines for the dek to occupy in large desktop screens
 * @param {number} [props.maxDekLinesInExtraLargeDesktop] - Optional maximum number of visual lines for the dek to occupy in extra large desktop screens
 * @param {string} [props.nextPage] - Optional url of next page
 * @param {string} [props.previousPageUrl] - Optional url of previous page
 * @param {string} [props.sectionTitleVariation] - Optional variation of SectionTitle to use
 * @param {string} [props.promoUnits] - Optional promo Units
 * @param {Array} [props.queryParamsForPagination] - Optional prop to pass query params required in pagination
 * @param {string} [props.recircRiver] - Optional recirc River
 * @param {string} [props.searchTerm] - Optional searched term query
 * @param {boolean} [props.shouldAppendReadMoreLinkForDek] - Optional flag to append 'Read More' label in item dek
 * @param {boolean} [props.shouldDekHideOnMobileAndShowOnTablet] - Optional flag to hide dek on mobile but show on tablet
 * @param {boolean} [props.shouldDisplayLoadMore] - Optional boolean for displaying load more call to action
 * @param {boolean} [props.shouldEnableBundleComponentAnalytics] - Optional feature flag to append data-section-title attribute for analytics
 * @param {boolean} [props.shouldFetchBITokens] - Optional flag to fetch border styles from BI
 * @param {boolean} [props.shouldHideBottomBorderForLastItem] - flag to hide bottom border for the last summaryItem content
 * @param {boolean} [props.shouldHideBylines] - Optional Show or hide ByLines in summary items
 * @param {boolean} [props.shouldHideDangerousDek] - Optional boolean to hide SummaryItem deks (defaults to false)
 * @param {boolean} [props.shouldHideMetadataSecondary] - Optional boolean to hide MetadataSecondary (default to false)
 * @param {boolean} [props.shouldHidePublishDate] - Optional Show or hide publish date in summary items
 * @param {boolean} [props.shouldHideSponsoredAd] - Optional Show or hide sponsored Ads
 * @param {boolean} [props.shouldHideVideoDek] - Optional Show or hide video dek
 * @param {Array} [props.shouldLimitSavingToContentTypes] - flag to determine if saving should be enabled only on certain content types
 * @param {boolean} [props.shouldUseSmallImageMobileOnly] - Set to `true` will render a small sized image for XS,S and M breakpoints
 * @param {boolean} [props.shouldShowButton] - Optional Show or hide button
 * @param {boolean} [props.shouldShowRiverDek] - Optional Show or hide river dek
 * @param {boolean} [props.shouldShowRiverHed] - Optional Show or hide hed for river
 * @param {boolean} [props.shouldTruncateDek] - Optional prop to truncate dek
 * @param {boolean} [props.shouldTreatTabletLikeMobile] - Optional should treat tablet like mobile
 * @param {string} [props.shouldUseDangerousDekAsLink] - Optional use dangerous dek as SectionTitle link
 * @param {boolean} [props.shouldTrackItemImpressionForSnowplow] - Optional boolean to tell item impression event to be tracked for snowplow
 * @param {boolean} [props.shouldUseGrid] - Optional should use grid
 * @param {boolean} [props.shouldUseRiverDekAsGridDek] - Optional should use river dek as grid dek
 * @param {boolean} [shouldUseRiverHedAsGridHed] - Optional should use river title as grid title
 * @param {boolean} [props.shouldVerticallyAlignHed] - Optional flag to remove the margin-bottom from the hed
 * @param {string} props.sideBySideVerticalAlign - [`center`, `top`] Vertical alignment of content when placed side by side.
 * @param {string} [props.sort] - Optional string to pass sort values in query params
 * @param {string} [props.summaryItemClassName] - Optional className for SummaryItem to use
 * @param {Array} [props.recircMostPopularItems] - Optional prop that contains recirc most popular items
 * @param {string} [props.summaryItemRubricVariation] - Optional variation for SummaryItem rubric
 * @param {string} [props.summaryItemHedTag] - Optional item hed element to render
 * @param {object} [props.adsSettings] - ads configuration settings
 * @param {number} [props.adsSettings.summaryRiverMidContentCadence] - verso setting lever for mid content ad cadence
 * @param {number} [props.gridColSpanValue] - Optional to have specific span value
 * @param {boolean} [props.showRecircMostPopularInAsideWithRail] - Optional to show RecircMostPopularInAside
 * @param {SummaryListPropTypes.summaryItemVariation} [props.summaryItemVariation] - Optional variation for SummaryItem
 * @param {Array<SummaryListPropTypes.summaryItemVariation>} [props.summaryItemVariationList] - Optional alternating variations of SummaryItem to use
 * @param {number} props.totalResults -  Optional prop to the total number of items
 * @param {number} props.topSpacingInRem -  Optional prop for determining whats the value that is used for topSpacing
 * @param {Function} [props.onMoreClick] - Optional click item handler for 'More'
 * @param {bool} [props.shouldShowSourceTagName] - Optional to show the source tag names for the recipe in place of rubric
 * @param {boolean} [props.shouldEnableCardLevelBookmark] - Feature flag to show the utility bookmark option
 * @param {boolean} [props.shouldEnableCommentsCount] - Feature flag to show the comments count
 * @param {boolean} [props.shouldUseBookmarkV3] - Feature flag to define whether to use bookmark v3
 * @param {boolean} [props.shouldEnableBookmarkDrawers] - flag to enable bookmark drawer functionality
 *
 * @returns {ReactElement} <div>
 */
class SummaryRiver extends React.Component {
    componentDidMount() {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SummaryRiver'
        });
    }
    render() {
        const { btnStyle, buttonType = 'more', chunkSize = 4, className, clickItem, columnAmountForMobile = 1, columnsHasUnderlineHed, content, currentPage, dangerousDek, filter, dangerousHed, handleLoadMore, hideBottomBorders, hasBottomBorderOnLargeScreen, hasBottomBorderLargeMargin, hasExtraTitlePadding = false, hasLineAboveBelowInTitle = false, hasLineAboveBelowTitleHead = false, hasScrollOffset = false, shouldTrackItemImpressionForSnowplow, hasSideBySideMobileOnlyImageRight, hasRail = true, hasReducedMargin = false, hasRule = true, hasTitleTopMargin = false, hasUnderlineHed, hideBylinesUntil = 'sm', hideRubricItemSummary, itemInViewGAEventName, isFullBleedMobile = false, isLoading = false, isMidContentAdsDisabled, items, label = 'More Stories', landingPageLink, layout = '', link, maxDekLines, maxDekLinesInMobile, maxDekLinesInTablet, maxDekLinesInDesktop, maxDekLinesInLargeDesktop, maxDekLinesInExtraLargeDesktop, nextPage, onMoreClick = () => { }, previousPageUrl, promoUnits = [], queryParamsForPagination, searchTerm, sectionTitleVariation = 'TextCenter', shouldAppendReadMoreLinkForDek, shouldDekHideOnMobileAndShowOnTablet = false, shouldDisplayLoadMore = false, shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark, shouldEnableBundleComponentAnalytics, shouldEnableCommentsCount, shouldFetchBITokens = false, shouldHideBottomBorderForLastItem = false, shouldHideBylines, shouldHideDangerousDek, shouldHideMetadataSecondary, shouldHidePublishDate = true, shouldHideSponsoredAd = false, shouldHideVideoDek = false, showRecircMostPopularInAsideWithRail = false, recircMostPopularItems, shouldLimitSavingToContentTypes, shouldShowRiverDek = false, shouldShowRiverHed = false, shouldShowButton, shouldShowSourceTagName, shouldTruncateDek, shouldTreatTabletLikeMobile, shouldUseBookmarkV3, shouldUseDangerousDekAsLink = false, shouldUseGrid = false, shouldUseRiverDekAsGridDek, shouldUseRiverHedAsGridHed, shouldUseSmallImageMobileOnly = false, shouldVerticallyAlignHed, sideBySideVerticalAlign, sort, summaryItemClassName, summaryItemRubricVariation, summaryItemVariation = 'SideBySideDesktopOnly', summaryItemVariationList, recircRiver, hasMoreItems, summaryItemHedTag, gridColSpanValue = 0, topSpacingInRem = 0, totalResults, trackingNamespace, adsSettings: { summaryRiverMidContentCadence } } = this.props;
        const showRail = hasRail && (layout ? RIVER_LAYOUTS[layout]?.hasRail : true);
        const SummaryListVariant = getSummaryListVariant(shouldUseGrid, showRail, layout);
        const summaryCollectionGridProps = shouldUseGrid
            ? {
                columnsHasUnderlineHed,
                hasBorder: !hideBottomBorders,
                hasBottomBorderLargeMargin,
                hasBottomBorderOnLargeScreen,
                shouldEnableBundleComponentAnalytics,
                shouldShowButton,
                dangerousHed: shouldUseRiverHedAsGridHed ? dangerousHed : null,
                dangerousDek: shouldUseRiverDekAsGridDek ? dangerousDek : null,
                shouldTreatTabletLikeMobile,
                trackingNamespace: trackingNamespace || dangerousHed
            }
            : {};
        const updatedItems = items.map((item) => {
            return {
                ...item,
                dangerousDek: removeAnchorTags(item.dangerousDek),
                source: { ...item.source, hed: item.source?.hed?.replace(/\\/g, '') }
            };
        });
        const [...newItems] = updatedItems;
        const summaryRiverChunkSize = summaryRiverMidContentCadence ?? chunkSize;
        const riverChunks = chunk(newItems, summaryRiverChunkSize);
        const SectionTitleComponent = SectionTitle[sectionTitleVariation];
        let adOffset = 0;
        const adCounter = (add) => {
            if (add) {
                adOffset++;
            }
            return adOffset;
        };
        const sectionTitleLink = getSectionTitleLink({
            dangerousDek,
            landingPageLink,
            shouldUseDangerousDekAsLink
        });
        const layoutForItem = RIVER_LAYOUTS[layout]?.map || summaryItemVariationList;
        return (React.createElement(SummaryRiverWrapper, { className: className, isFullBleedMobile: isFullBleedMobile, gridColSpanValue: gridColSpanValue, showRecircMostPopularInAsideWithRail: showRecircMostPopularInAsideWithRail, "data-testid": "SummaryRiverWrapper", topSpacingInRem: topSpacingInRem }, riverChunks.map((chunkData, index) => {
            const isLastChunk = riverChunks.length === index + 1;
            const isFirstChunk = index === 0;
            return (React.createElement(SummaryRiverSection, { key: index, "data-testid": "SummaryRiverSection" },
                shouldShowRiverHed && isFirstChunk && dangerousHed && (React.createElement(SummaryRiverTitleWrapper, { id: dangerousHed, hasDividerAbove: hasLineAboveBelowInTitle ||
                        hasLineAboveBelowTitleHead ||
                        !hasTitleTopMargin, hasExtraTitlePadding: hasExtraTitlePadding, hasScrollOffset: hasScrollOffset },
                    React.createElement(SectionTitleComponent, { dangerousHed: dangerousHed, dangerousDek: shouldShowRiverDek ? dangerousDek : undefined, hasDividerAbove: hasLineAboveBelowInTitle || hasLineAboveBelowTitleHead, hasDividerBelow: hasLineAboveBelowInTitle, hasDividerAboveDek: hasLineAboveBelowTitleHead, hedTag: "h2", link: sectionTitleLink }))),
                React.createElement(PhotoBookmarkingProvider, { isPhotoBookmarkingEnabled: shouldEnableBookmarkDrawers },
                    React.createElement(SummaryRiverList, { as: SummaryListVariant, buttonType: buttonType, btnStyle: btnStyle, hasRule: isFirstChunk && hasRule, adCounter: adCounter, chunkIndex: index, hideBottomBorderForLastItem: shouldHideBottomBorderForLastItem && isLastChunk, chunkSize: summaryRiverChunkSize, columnAmountForMobile: columnAmountForMobile, chunksTotal: riverChunks.length, currentPage: currentPage, hasMoreItems: hasMoreItems, isLastChunk: isLastChunk, clickFunction: handleLoadMore, clickItem: clickItem, onMoreClick: onMoreClick, link: link, maxDekLines: maxDekLines, maxDekLinesInMobile: maxDekLinesInMobile, maxDekLinesInTablet: maxDekLinesInTablet, maxDekLinesInDesktop: maxDekLinesInDesktop, maxDekLinesInLargeDesktop: maxDekLinesInLargeDesktop, maxDekLinesInExtraLargeDesktop: maxDekLinesInExtraLargeDesktop, nextPage: nextPage, previousPageUrl: previousPageUrl, isLoading: isLoading, items: chunkData, itemInViewGAEventName: itemInViewGAEventName, shouldTrackItemImpressionForSnowplow: shouldTrackItemImpressionForSnowplow, hasReducedMargin: hasReducedMargin, hasUnderlineHed: hasUnderlineHed, hasSideBySideMobileOnlyImageRight: hasSideBySideMobileOnlyImageRight, hideBylinesUntil: hideBylinesUntil, hideRubricItemSummary: hideRubricItemSummary, label: label, queryParamsForPagination: queryParamsForPagination, shouldAppendReadMoreLinkForDek: shouldAppendReadMoreLinkForDek, shouldDekHideOnMobileAndShowOnTablet: shouldDekHideOnMobileAndShowOnTablet, shouldDisplayLoadMore: shouldDisplayLoadMore, shouldFetchBITokens: shouldFetchBITokens, shouldHideBylines: shouldHideBylines, shouldHideDangerousDek: shouldHideDangerousDek, shouldHideMetadataSecondary: shouldHideMetadataSecondary, shouldHideSponsoredAd: shouldHideSponsoredAd, shouldHidePublishDate: shouldHidePublishDate, shouldHideVideoDek: shouldHideVideoDek, shouldTruncateDek: shouldTruncateDek, shouldUseSmallImageMobileOnly: shouldUseSmallImageMobileOnly, shouldVerticallyAlignHed: shouldVerticallyAlignHed, sideBySideVerticalAlign: sideBySideVerticalAlign, summaryItemClassName: summaryItemClassName, summaryItemRubricVariation: summaryItemRubricVariation, summaryItemVariation: summaryItemVariation, summaryItemVariationList: layoutForItem, recircRiver: recircRiver, summaryItemHedTag: summaryItemHedTag, hideBottomBorders: hideBottomBorders, showRecircMostPopularInAsideWithRail: showRecircMostPopularInAsideWithRail, recircMostPopularItems: recircMostPopularItems, totalResults: totalResults, ...summaryCollectionGridProps, filter: filter, sort: sort, content: content, searchTerm: searchTerm, shouldShowSourceTagName: shouldShowSourceTagName, shouldUseBookmarkV3: shouldUseBookmarkV3, shouldEnableBookmarkDrawers: shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark: shouldEnableCardLevelBookmark, shouldEnableCommentsCount: shouldEnableCommentsCount, shouldLimitSavingToContentTypes: shouldLimitSavingToContentTypes })),
                !isLastChunk && promoUnits && !isMidContentAdsDisabled && (React.createElement(React.Fragment, null,
                    promoUnits[index],
                    React.createElement(PaymentGateway, { group: "ads" },
                        React.createElement(SummaryRiverAd, { position: "mid-content", shouldDisplayLabel: true }))))));
        })));
    }
}
SummaryRiver.propTypes = {
    adsSettings: PropTypes.shape({
        summaryRiverMidContentCadence: PropTypes.number
    }),
    btnStyle: PropTypes.oneOf(['filled', 'outlined', 'text']),
    buttonType: PropTypes.oneOf(['more', 'pagination']),
    chunkSize: PropTypes.number,
    className: PropTypes.string,
    clickItem: PropTypes.func,
    columnAmountForMobile: PropTypes.number,
    columnsHasUnderlineHed: PropTypes.shape({
        hasUnderlineHedForColumnAmount2: PropTypes.bool,
        hasUnderlineHedForColumnAmount3: PropTypes.bool,
        hasUnderlineHedForColumnAmount4: PropTypes.bool
    }),
    content: PropTypes.string,
    currentPage: PropTypes.number,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    filter: PropTypes.string,
    gridColSpanValue: PropTypes.number,
    handleLoadMore: PropTypes.func,
    hasBottomBorderLargeMargin: PropTypes.bool,
    hasBottomBorderOnLargeScreen: PropTypes.bool,
    hasExtraTitlePadding: PropTypes.bool,
    hasLineAboveBelowInTitle: PropTypes.bool,
    hasLineAboveBelowTitleHead: PropTypes.bool,
    hasMoreItems: PropTypes.bool,
    hasRail: PropTypes.bool,
    hasReducedMargin: PropTypes.bool,
    hasRule: PropTypes.bool,
    hasScrollOffset: PropTypes.bool,
    hasSideBySideMobileOnlyImageRight: PropTypes.bool,
    hasTitleTopMargin: PropTypes.bool,
    hasUnderlineHed: PropTypes.bool,
    hideBottomBorders: PropTypes.bool,
    hideBylinesUntil: PropTypes.oneOf(Breakpoints.sizes),
    hideRubricItemSummary: PropTypes.bool,
    isFullBleedMobile: PropTypes.bool,
    isLoading: PropTypes.bool,
    isMidContentAdsDisabled: PropTypes.bool,
    itemInViewGAEventName: PropTypes.string,
    items: PropTypes.arrayOf(PropTypes.shape(SummaryItem.propTypes)).isRequired,
    label: PropTypes.string,
    landingPageLink: PropTypes.shape({
        url: PropTypes.string,
        label: PropTypes.string
    }),
    layout: PropTypes.oneOf([...Object.keys(RIVER_LAYOUTS), '']),
    link: PropTypes.string,
    maxDekLines: PropTypes.number,
    maxDekLinesInDesktop: PropTypes.number,
    maxDekLinesInExtraLargeDesktop: PropTypes.number,
    maxDekLinesInLargeDesktop: PropTypes.number,
    maxDekLinesInMobile: PropTypes.number,
    maxDekLinesInTablet: PropTypes.number,
    nextPage: PropTypes.string,
    onMoreClick: PropTypes.func,
    previousPageUrl: PropTypes.string,
    promoUnits: PropTypes.array,
    queryParamsForPagination: PropTypes.array,
    recircMostPopularItems: PropTypes.array,
    recircRiver: PropTypes.string,
    searchTerm: PropTypes.string,
    sectionTitleVariation: SummaryListPropTypes.sectionTitleVariation,
    shouldAppendReadMoreLinkForDek: PropTypes.bool,
    shouldDekHideOnMobileAndShowOnTablet: PropTypes.bool,
    shouldDisplayLoadMore: PropTypes.bool,
    shouldEnableBookmarkDrawers: PropTypes.bool,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldEnableCardLevelBookmark: PropTypes.bool,
    shouldEnableCommentsCount: PropTypes.bool,
    shouldFetchBITokens: PropTypes.bool,
    shouldHideBottomBorderForLastItem: PropTypes.bool,
    shouldHideBylines: PropTypes.bool,
    shouldHideDangerousDek: PropTypes.bool,
    shouldHideMetadataSecondary: PropTypes.bool,
    shouldHidePublishDate: PropTypes.bool,
    shouldHideSponsoredAd: PropTypes.bool,
    shouldHideVideoDek: PropTypes.bool,
    shouldLimitSavingToContentTypes: PropTypes.array,
    shouldShowButton: PropTypes.bool,
    shouldShowRiverDek: PropTypes.bool,
    shouldShowRiverHed: PropTypes.bool,
    shouldShowSourceTagName: PropTypes.bool,
    shouldTrackItemImpressionForSnowplow: PropTypes.bool,
    shouldTreatTabletLikeMobile: PropTypes.bool,
    shouldTruncateDek: PropTypes.bool,
    shouldUseBookmarkV3: PropTypes.bool,
    shouldUseDangerousDekAsLink: PropTypes.bool,
    shouldUseGrid: PropTypes.bool,
    shouldUseRiverDekAsGridDek: PropTypes.bool,
    shouldUseRiverHedAsGridHed: PropTypes.bool,
    shouldUseSmallImageMobileOnly: PropTypes.bool,
    shouldVerticallyAlignHed: PropTypes.bool,
    showRecircMostPopularInAsideWithRail: PropTypes.bool,
    sideBySideVerticalAlign: PropTypes.oneOf(['top', 'center']),
    sort: PropTypes.string,
    summaryItemClassName: PropTypes.string,
    summaryItemHedTag: PropTypes.oneOf(['div', 'h2', 'h3']),
    summaryItemRubricVariation: PropTypes.string,
    summaryItemVariation: SummaryListPropTypes.summaryItemVariation,
    summaryItemVariationList: PropTypes.arrayOf(SummaryListPropTypes.summaryItemVariation),
    topSpacingInRem: PropTypes.number,
    totalResults: PropTypes.number,
    trackingNamespace: PropTypes.string
};
SummaryRiver.displayName = 'SummaryRiver';
module.exports = connector(SummaryRiver, {
    keysToPluck: ['adsSettings']
});
//# sourceMappingURL=SummaryRiver.js.map

/***/ }),

/***/ 84311:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const { asThemedComponent } = __webpack_require__(20223);
const SummaryRiver = __webpack_require__(71753);
module.exports = asThemedComponent(asConfiguredComponent(SummaryRiver, 'SummaryRiver'));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 15641:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const Ad = __webpack_require__(19607);
const { BREAKPOINTS, GRID_GAP } = __webpack_require__(96472);
const { applyGridSpacing, cssVariablesGrid } = __webpack_require__(1123);
const { calculateSpacing, minMaxScreen, getDecoration, getColorToken, minScreen } = __webpack_require__(26865);
const { SummaryListWrapper } = __webpack_require__(63637);
const SummaryRiverWrapper = styled.div.withConfig({
    displayName: 'SummaryRiverWrapper'
}) `
  ${cssVariablesGrid()}

  .summary-item__dek--isCneVideo {
    display: none;
  }

  ${({ isFullBleedMobile }) => isFullBleedMobile &&
    `
        ${SummaryListWrapper} {
            ${minMaxScreen(0, BREAKPOINTS.md)} {
              padding: 0;
            }
        }
    `};
  ${({ gridColSpanValue, showRecircMostPopularInAsideWithRail }) => {
    if (gridColSpanValue >= 1 && showRecircMostPopularInAsideWithRail) {
        return `
           @media (min-width: calc(${BREAKPOINTS.lg} - 1px)) {
                .summary-list  .grid-layout__content {
                  grid-column: span ${gridColSpanValue};
                }
              }
            `;
    }
    return '';
}}

  ${({ topSpacingInRem }) => {
    if (topSpacingInRem) {
        return `
        ${minScreen(BREAKPOINTS.md)} {
          margin-top: ${calculateSpacing(topSpacingInRem)};
        }
      `;
    }
    return '';
}}
`;
const SummaryRiverAd = styled(Ad).withConfig({ displayName: 'SummaryRiverAd' }) `
  margin-bottom: ${calculateSpacing(4)};
`;
const SummaryRiverTitleWrapper = styled.div.withConfig({
    displayName: 'SummaryRiverTitleWrapper'
}) `
  ${applyGridSpacing('padding')}
  ${({ hasScrollOffset }) => {
    if (hasScrollOffset) {
        return `scroll-margin-top: ${calculateSpacing(8)};`;
    }
    return '';
}}

  margin-bottom: ${calculateSpacing(4)};

  ${({ hasExtraTitlePadding }) => {
    if (hasExtraTitlePadding) {
        return `
      @media (min-width: ${BREAKPOINTS.xxl}) {
        padding-left: calc(${2.5} * var(--grid-margin));
        padding-right: calc(${2.5} * var(--grid-margin));
      }
      `;
    }
    return '';
}}

  ${({ hasDividerAbove }) => {
    if (!hasDividerAbove) {
        return `margin-top: ${calculateSpacing(2)};`;
    }
    return '';
}}
`;
const SummaryRiverSection = styled.section.withConfig({
    displayName: 'SummaryRiverSection'
}) ``;
const SummaryRiverList = styled.div.withConfig({
    displayName: 'SummaryRiverList'
}) `
  ${({ hasRule, theme, shouldFetchBITokens }) => {
    if (hasRule) {
        return `
        &::before {
          border-top: 1px solid ${getColorToken(theme, 'colors.discovery.body.white.divider')};
          content: '';
          grid-column: 1/-1;
          margin-bottom: ${calculateSpacing(5 - GRID_GAP.md)};
          ${shouldFetchBITokens
            ? `border-top : ${getDecoration(theme, 'dividerWidth')} solid 
                                  ${getColorToken(theme, 'colors.discovery.body.white.border')};`
            : ``}
        }
      `;
    }
    return '';
}}
`;
module.exports = {
    SummaryRiverList,
    SummaryRiverWrapper,
    SummaryRiverAd,
    SummaryRiverSection,
    SummaryRiverTitleWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 4290:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getSummaryListVariant = exports.isGridLayout = void 0;
const variations_1 = __importDefault(__webpack_require__(8466));
const variations_2 = __importDefault(__webpack_require__(62253));
const river_layouts_1 = __webpack_require__(94776);
const isGridLayout = (shouldUseGrid, layout) => shouldUseGrid || (layout ? river_layouts_1.RIVER_LAYOUTS[layout]?.isGrid : false);
exports.isGridLayout = isGridLayout;
const getSummaryListVariant = (shouldUseGrid, hasRail, layout) => {
    const isGrid = (0, exports.isGridLayout)(shouldUseGrid, layout);
    let SummaryListVariant;
    if (hasRail) {
        SummaryListVariant = isGrid
            ? variations_1.default.ThreeColumnsWithAdSection
            : variations_2.default.WithAside;
    }
    else {
        SummaryListVariant = isGrid ? variations_1.default : variations_2.default;
    }
    return SummaryListVariant;
};
exports.getSummaryListVariant = getSummaryListVariant;
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 59966:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { renderToStaticMarkup } = __webpack_require__(65848);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(56165)/* ["default"] */ .A);
const SpotlightRelated = __webpack_require__(88122);
const LargeDeviceSelectedStories = __webpack_require__(78141);
const SmallDeviceSelectedStories = __webpack_require__(59269);
const SectionTitle = __webpack_require__(24277);
const { RenderRatings } = __webpack_require__(27234);
const { SpotlightMainFeatureGrid, SpotlightMainFeatureHeader, SpotlightRatingWrapper, SpotlightMainFeatureByline, SpotlightMainFeatureContent, SpotlightMainFeatureCover, SpotlightMainFeatureCoverImage, SpotlightMainFeatureCoverImageWrapper, SpotlightMainFeatureCredit, SpotlightMainFeatureLink, SpotlightMainFeatureBottomWrapper } = __webpack_require__(48665);
const { componentTracking } = __webpack_require__(90090);
const { trackNavigationEvent } = __webpack_require__(14307);
const { SpotlightSectionTitle, SpotlightDangerousBottomDek } = __webpack_require__(23555);
const SELECTED_STORIES_TRACKING_NAMESPACE = 'Author Spotlight/Story';
/**
 * SpotlightMainFeature component.
 *
 * @param {object} props - React props
 * @param {string} [props.bookmarkId] - Id of bookmark in user platform system
 * @param {object} props.contributors - Contributors if it's an article
 * @param {string} props.customizedContinueReadingText - Customized Continue Reading text displayed after main feature dek content
 * @param {string} props.dangerousDek - Dek from CMS
 * @param {string} props.dangerousHed - Hed from CMS
 * @param {string} props.contentType - contentType
 * @param {string} props.copilotID - copilotID
 * @param {bool} [props.hasBookmark] - Optional, used to toggle bookmark icon
 * @param {boolean} [props.hasCustomPadding] - Optional to have customised padding
 * @param {boolean} props.hasMarginTopOnMobile - Add margin top for featured Item content on mobile
 * @param {boolean} [props.hasRating] - Optional to enable ratings for author spotlight
 * @param {boolean} [props.hasRoundedCorners] - Optional prop to show rounded corners on image
 * @param {Function} [props.iconBookmarkOnClickHandler] - called when user clicks on bookmark icon
 * @param {string} props.image - Image for author or article
 * @param {boolean} props.isDotClickable - An optional boolean that when set to true allows the dots to be clickable
 * @param {boolean} props.isImageOnRight - An optional boolean flag to set summary item image on right
 * @param {number} [props.rating] - Optional one used to showing ratings
 * @param {Array} [props.related] - Related articles list
 * @param {number} [props.reviewsCount] - Optional one used to displaying number of reviewers
 * @param {string} props.rubric - Main feature rubric
 * @param {string} [props.sectionTitleDangerousHed] - SectionTitle Hed. Valid when showSectionTitleInsideContent is 'true'
 * @param {boolean} [props.showSectionTitleInsideContent] - Renders SectionTitle inside main feature content if 'true'
 * @param {string} [props.sectionTitleVariation] - Optional variation of SectionTitle to use
 * @param {boolean} [props.shouldHideCustmizeText] - prop to hide customize link text in leadStory
 * @param {Array} [props.selectedStories] - Selected articles list
 * @param {string} [props.selectedStoriesHeadline] - Header for seleted stories section.
 * @param {number} props.selectedStoriesImageWidth - Width of images for selected stories.
 * @param {boolean} [props.shouldUseDekForselectedStoriesHeadline] - Prop to set the dek as heading for seleted stories section.
 * @param {boolean} [props.shouldHaveLargerFeaturedImage] - To enable to increase the max-width for featuredItem
 * @param {boolean} [props.shouldHideSelectedStoriesHeadline] - Hide selected stories headline
 * @param {boolean} [props.shouldHideFeatureItemHeader] - prop for dangerousHed for featured item
 * @param {boolean} [props.shouldHideDangerousDek] - Hide dek on selected stories
 * @param {boolean} [props.shouldHideFeatureItemByline] - prop to hide byline for featured Item
 * @param {boolean} [props.shouldHideFeatureItemCaption] - prop to hide caption for featured Item
 * @param {boolean} props.shouldHideSelectedStoriesByline - prop to hide byline for selected stories Item
 * @param {boolean} [props.shouldLazyLoadCoverImage] - prop to lazy load cover image
 * @param {boolean} [props.shouldShowStackedRatingsCard] - Optional flag to show StackedRatingsCard instead of SummaryItem
 * @param {object} [props.stackedRatingsCardProps] - Props for stacked rating cards
 * @param {string} [props.shouldUseDropCap] - Will add an enlarged first capital in the main content
 * @param {boolean} [props.hasAdditionalDropcapStyling] - optional flag to apply additional padding
 * @param {string} [props.hedTag] - Option to override the default header html tag when nested within a higher level header
 * @param {boolean} [props.shouldShowDangerousBottomDek] - prop to show Spotlight section title dek at bottom
 * @param {string} [props.shouldShowSelectedStoriesBelowInMobile] - This is to move the selectedStories below the featured Item in Mobile only
 * @param {object} [props.snowplowEvent] - Optional. Properties that can be passed to snowplow event navigation on click
 * @param {string} [props.summaryItemVariation] - Which summary item to use
 * @param {string} [props.summaryItemVariationWithNoAssest] - summary item without asset
 * @param {string} [props.hasSpecialStyleForFeatureLink] - To apply special color for the feature link
 * @param {string} props.template - Template of the container
 * @param {string} props.url - URL to author or article
 * @param {boolean} [props.showItemsAsList] - Grid direction for related items
 * @param {string} [props.signalType] - Specifying the icon to show in ActionBar
 * @param {object} [props.actionBarConfig] - Config for the ActionBar
 * @param {ReactChildren} props.children - React children
 *
 * @returns {ReactElement} - A component tree
 */
const SpotlightMainFeature = ({ bookmarkId, contentType, contributors, copilotID, customizedContinueReadingText, dangerousDek, dangerousHed, hasBookmark, hasCustomPadding, hasMarginTopOnMobile = false, hasRating = false, hasSpecialStyleForFeatureLink = false, hasRoundedCorners, hedTag, image, iconBookmarkOnClickHandler, isDotClickable = false, isImageOnRight = false, rating, related = [], reviewsCount, rubric, sectionTitleDangerousHed, showSectionTitleInsideContent, sectionTitleVariation = 'TextCenter', selectedStories = [], selectedStoriesHeadline, selectedStoriesImageWidth, shouldUseDekForselectedStoriesHeadline = false, shouldHideDangerousDek, shouldHaveLargerFeaturedImage = false, shouldHideSelectedStoriesHeadline = false, shouldHideFeatureItemHeader = false, shouldHideFeatureItemByline = false, shouldHideSelectedStoriesByline = false, shouldHideFeatureItemCaption = false, shouldLazyLoadCoverImage = false, shouldUseDropCap = false, hasAdditionalDropcapStyling = false, shouldShowDangerousBottomDek, shouldShowSelectedStoriesBelowInMobile = false, shouldShowStackedRatingsCard = false, stackedRatingsCardProps, snowplowEvent: snowplowData, summaryItemVariation, summaryItemVariationWithNoAssest, template, url, showItemsAsList, signalType, actionBarConfig, shouldHideCustmizeText }) => {
    const intl = useIntl();
    const trackingLabel = template === 'spotlight-story'
        ? `Story Spotlight/${rubric.name}`
        : `Author Spotlight/${dangerousHed}`;
    const getMainFeatureLinkProps = (isImage = false) => {
        const trackingProps = componentTracking.addDataSectionTitleAttribute(true, trackingLabel, 0);
        if (isImage) {
            trackingProps['data-section-title'] = `${trackingProps['data-section-title']}-image`;
        }
        return {
            ...trackingProps,
            href: url
        };
    };
    const renderFeatureLink = () => {
        if (template !== 'spotlight-contributor' && !shouldHideCustmizeText) {
            return renderToStaticMarkup(React.createElement(SpotlightMainFeatureLink, { tabIndex: "-1", ...getMainFeatureLinkProps(), dangerouslySetInnerHTML: {
                    __html: customizedContinueReadingText ||
                        intl.formatMessage(translations.continueReadingText)
                } }));
        }
        return '';
    };
    const sectionTitleProps = {
        dangerousHed: sectionTitleDangerousHed,
        className: 'SpotlightSectionTitle'
    };
    const snowplowEvent = {
        ...(snowplowData && snowplowData),
        subject: 'summary_spotlight',
        type: 'click'
    };
    return (React.createElement(SpotlightMainFeatureGrid, null,
        React.createElement(SpotlightMainFeatureCover, null,
            showSectionTitleInsideContent && (React.createElement(SpotlightSectionTitle, { as: SectionTitle[sectionTitleVariation], shouldUseDekForselectedStoriesHeadline: shouldUseDekForselectedStoriesHeadline, showSectionTitleInsideContent: showSectionTitleInsideContent, ...sectionTitleProps, template: template })),
            !shouldHideFeatureItemHeader && (React.createElement(SpotlightMainFeatureHeader, { "data-testid": "SpotlightMainFeatureHeader", as: hedTag, dangerouslySetInnerHTML: {
                    __html: renderToStaticMarkup(React.createElement("a", { ...getMainFeatureLinkProps() }, dangerousHed))
                }, onClick: () => trackNavigationEvent({
                    ...snowplowEvent,
                    placement: 'hero',
                    items: [
                        {
                            content_title: dangerousHed,
                            content_url: window && window.location.origin + url,
                            content_id: copilotID,
                            content_type: contentType
                        }
                    ]
                }), template: template })),
            !shouldShowSelectedStoriesBelowInMobile && (React.createElement(SmallDeviceSelectedStories, { snowplowEvent: snowplowEvent, items: selectedStories, shouldHideSelectedStoriesHeadline: shouldHideSelectedStoriesHeadline, sectionTitleVariation: sectionTitleVariation, selectedStoriesHeadline: selectedStoriesHeadline, shouldUseDekForselectedStoriesHeadline: shouldUseDekForselectedStoriesHeadline, shouldHideDangerousDek: shouldHideDangerousDek, isDotClickable: isDotClickable, trackingNamespace: SELECTED_STORIES_TRACKING_NAMESPACE, actionBarConfig: actionBarConfig })),
            React.createElement(SpotlightRatingWrapper, { hasCustomPadding: hasCustomPadding },
                React.createElement(SpotlightMainFeatureCoverImageWrapper, { ...getMainFeatureLinkProps(true), tabIndex: "-1", onClick: () => trackNavigationEvent({
                        ...snowplowEvent,
                        placement: 'hero',
                        items: [
                            {
                                content_title: dangerousHed,
                                content_url: window && window.location.origin + url,
                                content_id: copilotID,
                                content_type: contentType
                            }
                        ]
                    }) },
                    React.createElement(SpotlightMainFeatureCoverImage, { "data-testid": "SpotlightCoverImage", template: template, shouldHaveLargerFeaturedImage: shouldHaveLargerFeaturedImage, isLazy: shouldLazyLoadCoverImage, ...image, hasRoundedCorners: hasRoundedCorners, signalType: signalType, actionBarConfig: actionBarConfig })),
                hasRating &&
                    RenderRatings(rating, stackedRatingsCardProps.ratingMethod, reviewsCount, hasBookmark, bookmarkId, iconBookmarkOnClickHandler)),
            !shouldHideFeatureItemByline && (React.createElement(SpotlightMainFeatureByline, { "data-testid": "SpotlightAuthorName", contributors: contributors, template: template })),
            !shouldHideFeatureItemCaption && (React.createElement(SpotlightMainFeatureCredit, { "data-testid": "SpotlightMainFeatureCredit", dangerousCaptionText: template === 'spotlight-contributor' ? '' : image.caption, dangerousCredit: image.credit, template: template }))),
        React.createElement(React.Fragment, null,
            React.createElement(SpotlightMainFeatureContent, { "data-testid": "SpotlightMainFeatureContent", dangerouslySetInnerHTML: {
                    __html: dangerousDek + renderFeatureLink()
                }, shouldUseDropCap: shouldUseDropCap, hasAdditionalDropcapStyling: hasAdditionalDropcapStyling, hasMarginTopOnMobile: hasMarginTopOnMobile, template: template, hasSpecialStyleForFeatureLink: hasSpecialStyleForFeatureLink, hasCustomPadding: hasCustomPadding }),
            React.createElement(LargeDeviceSelectedStories, { snowplowEvent: snowplowEvent, items: selectedStories, sectionTitleVariation: sectionTitleVariation, selectedStoriesHeadline: selectedStoriesHeadline, shouldUseDekForselectedStoriesHeadline: shouldUseDekForselectedStoriesHeadline, stackedRatingsCardProps: stackedRatingsCardProps, shouldShowStackedRatingsCard: shouldShowStackedRatingsCard, shouldHideSelectedStoriesByline: shouldHideSelectedStoriesByline, shouldHideSelectedStoriesHeadline: shouldHideSelectedStoriesHeadline, shouldHideDangerousDek: shouldHideDangerousDek, summaryItemVariation: isImageOnRight ? summaryItemVariation : undefined, trackingNamespace: SELECTED_STORIES_TRACKING_NAMESPACE, isImageOnRight: isImageOnRight, selectedStoriesImageWidth: selectedStoriesImageWidth, actionBarConfig: actionBarConfig }),
            shouldShowSelectedStoriesBelowInMobile && (React.createElement(SmallDeviceSelectedStories, { snowplowEvent: snowplowEvent, items: selectedStories, shouldHideSelectedStoriesHeadline: shouldHideSelectedStoriesHeadline, stackedRatingsCardProps: stackedRatingsCardProps, shouldShowStackedRatingsCard: shouldShowStackedRatingsCard, sectionTitleVariation: sectionTitleVariation, selectedStoriesHeadline: selectedStoriesHeadline, shouldUseDekForselectedStoriesHeadline: shouldUseDekForselectedStoriesHeadline, shouldHideDangerousDek: shouldHideDangerousDek, isDotClickable: isDotClickable, trackingNamespace: SELECTED_STORIES_TRACKING_NAMESPACE })),
            React.createElement(SpotlightMainFeatureBottomWrapper, null,
                React.createElement(SpotlightRelated, { items: related, ...(shouldShowDangerousBottomDek &&
                        selectedStoriesHeadline && {
                        shouldShowDangerousBottomDek
                    }), summaryItemVariation: summaryItemVariation, summaryItemVariationWithNoAssest: summaryItemVariationWithNoAssest, template: template, trackingNamespace: trackingLabel, showItemsAsList: showItemsAsList, actionBarConfig: actionBarConfig }),
                shouldShowDangerousBottomDek && selectedStoriesHeadline && (React.createElement(SpotlightDangerousBottomDek, { dangerouslySetInnerHTML: { __html: selectedStoriesHeadline }, hasEnhancedTopSpacing: shouldShowDangerousBottomDek }))))));
};
SpotlightMainFeature.propTypes = {
    actionBarConfig: PropTypes.object,
    bookmarkId: PropTypes.string,
    contentType: PropTypes.string,
    contributors: PropTypes.shape({
        author: PropTypes.shape({
            items: PropTypes.arrayOf(PropTypes.shape({
                dangerousBio: PropTypes.string,
                dangerousTitle: PropTypes.string,
                name: PropTypes.string,
                socialMedia: PropTypes.array,
                url: PropTypes.string
            }))
        })
    }).isRequired,
    copilotID: PropTypes.string,
    customizedContinueReadingText: PropTypes.string,
    dangerousDek: PropTypes.string.isRequired,
    dangerousHed: PropTypes.string.isRequired,
    hasAdditionalDropcapStyling: PropTypes.bool,
    hasBookmark: PropTypes.bool,
    hasCustomPadding: PropTypes.bool,
    hasMarginTopOnMobile: PropTypes.bool,
    hasRating: PropTypes.bool,
    hasRoundedCorners: PropTypes.bool,
    hasSpecialStyleForFeatureLink: PropTypes.bool,
    hedTag: PropTypes.string,
    iconBookmarkOnClickHandler: PropTypes.func,
    image: PropTypes.object.isRequired,
    isDotClickable: PropTypes.bool,
    isImageOnRight: PropTypes.bool,
    rating: PropTypes.number,
    related: PropTypes.arrayOf(PropTypes.shape({
        dangerousBio: PropTypes.string,
        dangerousTitle: PropTypes.string,
        name: PropTypes.string,
        socialMedia: PropTypes.array,
        url: PropTypes.string
    })),
    reviewsCount: PropTypes.number,
    rubric: PropTypes.shape({
        name: PropTypes.string
    }),
    sectionTitleDangerousHed: PropTypes.string,
    sectionTitleVariation: PropTypes.string,
    selectedStories: PropTypes.arrayOf(PropTypes.shape({
        dangerousBio: PropTypes.string,
        dangerousTitle: PropTypes.string,
        name: PropTypes.string,
        socialMedia: PropTypes.array,
        url: PropTypes.string
    })),
    selectedStoriesHeadline: PropTypes.string,
    selectedStoriesImageWidth: PropTypes.number,
    shouldHaveLargerFeaturedImage: PropTypes.bool,
    shouldHideCustmizeText: PropTypes.bool,
    shouldHideDangerousDek: PropTypes.bool,
    shouldHideFeatureItemByline: PropTypes.bool,
    shouldHideFeatureItemCaption: PropTypes.bool,
    shouldHideFeatureItemHeader: PropTypes.bool,
    shouldHideSelectedStoriesByline: PropTypes.bool,
    shouldHideSelectedStoriesHeadline: PropTypes.bool,
    shouldLazyLoadCoverImage: PropTypes.bool,
    shouldShowDangerousBottomDek: PropTypes.bool,
    shouldShowSelectedStoriesBelowInMobile: PropTypes.bool,
    shouldShowStackedRatingsCard: PropTypes.bool,
    shouldUseDekForselectedStoriesHeadline: PropTypes.bool,
    shouldUseDropCap: PropTypes.bool,
    showItemsAsList: PropTypes.bool,
    showSectionTitleInsideContent: PropTypes.bool,
    signalType: PropTypes.string,
    snowplowEvent: PropTypes.object,
    stackedRatingsCardProps: PropTypes.object,
    summaryItemVariation: PropTypes.string,
    summaryItemVariationWithNoAssest: PropTypes.string,
    template: PropTypes.oneOf([
        'spotlight-story',
        'spotlight-contributor',
        'spotlight-article'
    ]),
    url: PropTypes.string.isRequired
};
module.exports = SpotlightMainFeature;
//# sourceMappingURL=SpotlightMainFeature.js.map

/***/ }),

/***/ 48665:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.SpotlightMainFeatureBottomWrapper = exports.SpotlightMainFeatureLink = exports.SpotlightMainFeatureContent = exports.SpotlightMainFeatureCredit = exports.SpotlightMainFeatureByline = exports.SpotlightMainFeatureCoverImageWrapper = exports.SpotlightMainFeatureCoverImage = exports.SpotlightRatingWrapper = exports.SpotlightMainFeatureCover = exports.SpotlightMainFeatureHeader = exports.SpotlightMainFeatureGrid = void 0;
const grid_1 = __importDefault(__webpack_require__(86659));
const styles_1 = __webpack_require__(40653);
const { default: styled, css } = __webpack_require__(92168);
const { calculateSpacing, getColorStyles, getTypographyStyles, minMaxScreen, minScreen, maxScreen } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { maxThresholds } = __webpack_require__(99906);
const ResponsiveAsset = __webpack_require__(86157);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const Bylines = __webpack_require__(52540);
const Caption = __webpack_require__(14760);
const { BaseLink } = __webpack_require__(76955);
const { MetaData } = __webpack_require__(1817);
const SpotlightMainFeatureGrid = styled(grid_1.default.NoMarginsTwoUp).withConfig({
    displayName: 'SummarySpotlightGrid'
}) `
  /* up to md screens, we should not render a grid  */
  ${maxScreen(`${maxThresholds.lg}px`)} {
    && {
      display: unset;
    }
  }

  > ${styles_1.GridItem} {
    :nth-of-type(1) {
      text-align: center;
    }

    :nth-of-type(2) {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      ${minScreen(BREAKPOINTS.xxl)} {
        grid-column: span 5;
      }
    }
  }
`;
exports.SpotlightMainFeatureGrid = SpotlightMainFeatureGrid;
const SpotlightMainFeatureHeader = styled.h2.withConfig({
    displayName: 'SpotlightMainFeatureHeader'
}) `
  margin: 0 auto;
  padding-bottom: ${calculateSpacing(3)};
  text-align: center;
  text-transform: uppercase;

  ${({ template }) => template === 'spotlight-contributor' &&
    css `
      ${minScreen(BREAKPOINTS.md)} {
        padding-bottom: ${calculateSpacing(6)};
      }
    `}

  ${({ theme }) => css `
      ${getTypographyStyles(theme, 'typography.definitions.discovery.hed-feature')}
      ${getColorStyles(theme, 'color', 'colors.discovery.body.light.heading')};
    `};

  ${minScreen(BREAKPOINTS.lg)} {
    max-width: 80%;
  }

  a {
    text-decoration: none;
    color: inherit;

    &:hover {
      text-decoration: underline;
    }
  }
`;
exports.SpotlightMainFeatureHeader = SpotlightMainFeatureHeader;
const SpotlightMainFeatureCover = styled.div.withConfig({
    displayName: 'SpotlightMainFeatureCover'
}) ``;
exports.SpotlightMainFeatureCover = SpotlightMainFeatureCover;
const SpotlightRatingWrapper = styled.div.withConfig({
    displayName: 'SpotlightRatingWrapper'
}) `
  display: flex;
  flex-flow: column;
  justify-content: center;

  ${MetaData} {
    display: flex;
    margin: auto;
    padding-top: 16px;
    width: 64%;
    ${minMaxScreen(BREAKPOINTS.sm, `${maxThresholds.md}px`)} {
      margin: 0;
    }

    ${minMaxScreen(BREAKPOINTS.md, `${maxThresholds.lg}px`)} {
      margin-bottom: ${calculateSpacing(6)};
    }
  }
`;
exports.SpotlightRatingWrapper = SpotlightRatingWrapper;
const SpotlightMainFeatureCoverImageWrapper = styled.a.withConfig({
    displayName: 'SpotlightMainFeatureCoverImageWrapper'
}) `
  display: flex;
  flex-direction: column;
  align-items: center;
`;
exports.SpotlightMainFeatureCoverImageWrapper = SpotlightMainFeatureCoverImageWrapper;
const SpotlightMainFeatureCoverImage = styled(ResponsiveAsset).withConfig({
    displayName: 'SpotlightMainFeatureCoverImage'
}) `
  display: inline-block;

  ${minScreen(BREAKPOINTS.md)} {
    ${({ shouldHaveLargerFeaturedImage }) => shouldHaveLargerFeaturedImage ? `max-width: 80%;` : `max-width: 70%;`}
  }

  ${minScreen(BREAKPOINTS.lg)} {
    ${ResponsiveImageContainer} {
      object-fit: cover;

      ${({ template }) => template === 'spotlight-story' &&
    css `
          max-height: 70vh;
        `}
    }
  }

  ${({ template }) => template === 'spotlight-contributor' &&
    css `
      ${minScreen(BREAKPOINTS.md)} {
        max-width: ${calculateSpacing(50)};
      }
      ${maxScreen(`${maxThresholds.md}px`)} {
        display: none;
      }
    `};

  img {
    ${({ hasRoundedCorners }) => hasRoundedCorners &&
    css `
        border-radius: ${calculateSpacing(2)};
      `}
  }
`;
exports.SpotlightMainFeatureCoverImage = SpotlightMainFeatureCoverImage;
const SpotlightMainFeatureCredit = styled(Caption).withConfig({
    displayName: 'SpotlightMainFeatureCredit'
}) `
  grid-area: dek;
  padding: 0 5%;
  text-align: center;

  ${maxScreen(`${maxThresholds.lg}px`)} {
    margin-bottom: ${calculateSpacing(3)};
  }
  ${({ theme }) => css `
      ${getColorStyles(theme, 'color', 'colors.discovery.body.light.heading')};
    `};

  ${minScreen(BREAKPOINTS.md)} {
    padding: 0 20%;

    ${({ template }) => template === 'spotlight-contributor' &&
    css `
        padding: 0;
      `}
  }

  ${({ template }) => template === 'spotlight-contributor' &&
    css `
      margin-top: ${calculateSpacing(6)};
      margin-bottom: 0;

      ${minScreen(BREAKPOINTS.lg)} {
        margin-top: ${calculateSpacing(5)};
      }

      ${maxScreen(`${maxThresholds.md}px`)} {
        display: none;
      }

      ${minMaxScreen(BREAKPOINTS.md, `${maxThresholds.lg}px`)} {
        margin: ${calculateSpacing(6)} 0;
      }
    `};
`;
exports.SpotlightMainFeatureCredit = SpotlightMainFeatureCredit;
const SpotlightMainFeatureByline = styled(Bylines).withConfig({
    displayName: 'SpotlightMainFeatureByline'
}) `
  margin-top: ${calculateSpacing(3)};
  margin-bottom: ${calculateSpacing(0.8)};
  padding: 0;

  ${({ template }) => template === 'spotlight-contributor' &&
    css `
      display: none;
    `};

  span,
  a {
    ${getTypographyStyles('typography.definitions.foundation.title-primary')};
  }

  span {
    text-transform: uppercase;

    ${({ theme }) => css `
        ${getColorStyles(theme, 'color', 'colors.discovery.body.light.heading')};
      `};
  }
`;
exports.SpotlightMainFeatureByline = SpotlightMainFeatureByline;
const SpotlightMainFeatureLink = styled(BaseLink).withConfig({
    displayName: 'SpotlightMainFeatureLink'
}) ``;
exports.SpotlightMainFeatureLink = SpotlightMainFeatureLink;
const SpotlightMainFeatureContent = styled.div.withConfig({
    displayName: 'SpotlightMainFeatureContent'
}) `
  ${({ theme }) => css `
      ${getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.body-core')}
      ${getColorStyles(theme, 'color', 'colors.discovery.body.light.description')};
    `};
  ${minMaxScreen(BREAKPOINTS.md, `${maxThresholds.xl}px`)} {
    ${({ hasCustomPadding }) => hasCustomPadding && `padding-bottom: ${calculateSpacing(6)};`}
  }

  ${({ template, shouldUseDropCap }) => shouldUseDropCap &&
    template !== 'spotlight-contributor' &&
    css `
      &::first-letter {
        ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.display-large')};

        /* These values were hard-coded to work with the tny-fiction BI. If your brand has
           a requirement for the dropcap, there may be some custom styling needed. */
        margin-bottom: ${calculateSpacing(-2)};
        float: left;
        padding: 9px 4px 0 0px;

        ${({ hasAdditionalDropcapStyling }) => hasAdditionalDropcapStyling &&
        ` padding: ${calculateSpacing(2)} ${calculateSpacing(2)} ${calculateSpacing(2)} 0;`}
      }
    `}

  /* We declare the styles here because SpotlightMainFeatureLink is wrapped
     in renderToStaticMarkup. styled-components sets a component's styles
     in the DOM after mounting, a phase that won't happen if we render
     this component to static HTML during the production build. */
  ${SpotlightMainFeatureLink} {
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.brand-primary')};

    ${({ hasSpecialStyleForFeatureLink, theme }) => hasSpecialStyleForFeatureLink &&
    css `
        ${getColorStyles(theme, 'color', 'colors.consumption.body.standard.link')};
        ${getTypographyStyles(theme, 'typography.definitions.foundation.link-primary')}
      `}

    display: block;
    margin: ${calculateSpacing(3)} 0 0 0;
    width: 100%;
    height: auto;
    text-align: center;
    text-decoration: none;
    text-underline-offset: 5px; /* this was agreed in VQA and is not one of our theme values */
    white-space: nowrap;

    ${minScreen(BREAKPOINTS.md)} {
      display: inline-block;
      margin: 0 0 0 ${calculateSpacing(1)};
      width: auto;
      text-align: unset;
    }
  }

  ${SpotlightMainFeatureLink}:hover {
    text-decoration: underline;
  }

  ${({ hasMarginTopOnMobile }) => hasMarginTopOnMobile &&
    css `
      ${maxScreen(`${maxThresholds.md}px`)} {
        margin-top: ${calculateSpacing(3)};
      }
    `}

  a {
    ${({ theme }) => css `
        ${getColorStyles(theme, 'color', 'colors.discovery.body.light.description')};
      `};
  }
`;
exports.SpotlightMainFeatureContent = SpotlightMainFeatureContent;
const SpotlightMainFeatureBottomWrapper = styled.div.withConfig({
    displayName: 'SpotlightMainFeatureBottomWrapper'
}) ``;
exports.SpotlightMainFeatureBottomWrapper = SpotlightMainFeatureBottomWrapper;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 88122:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const SummaryItem = __webpack_require__(74992);
const { SpotlightRelatedItems, SpotlightRelatedItem } = __webpack_require__(96499);
const Grid = __webpack_require__(86659);
const { googleAnalytics, componentTracking } = __webpack_require__(90090);
/**
 * SpotlightRelated component.
 *
 * @param {Array} props - React props
 * @param {Array} props.items - Article objects
 * @param {boolean} [props.shouldShowDangerousBottomDek] - prop to show Spotlight section title dek at bottom
 * @param {string} [props.summaryItemVariation] - Which summary item to use
 * @param {string} [props.summaryItemVariationWithNoAssest] - summary item without asset
 * @param {string} props.template - Template of the container
 * @param {string} props.trackingNamespace - Tracking namespace
 * @param {boolean} [props.showItemsAsList] - Grid direction for related items
 * @param {object} [props.actionBarConfig] - Config for the action bar

 * @returns {ReactElement} - Component tree
 */
const SpotlightRelated = ({ items, shouldShowDangerousBottomDek, summaryItemVariation = 'SideBySideDense', summaryItemVariationWithNoAssest = 'TextBelowDesktopOnlyNoAsset', template, trackingNamespace, showItemsAsList, actionBarConfig }) => {
    if (!items.length) {
        return null;
    }
    const single = items.length === 1;
    const SummaryItemVariation = template === 'spotlight-contributor'
        ? SummaryItem[summaryItemVariationWithNoAssest]
        : SummaryItem[summaryItemVariation];
    const trackingLabel = template === 'spotlight-contributor'
        ? 'Author Spotlight/Recirc'
        : trackingNamespace;
    const handleClick = (e, item) => {
        const event = e.nativeEvent;
        // emit the event as we're preventing propagation to the analyticsDataAttribute handler
        googleAnalytics.emitGoogleTrackingEvent(template, {
            hitType: 'event',
            eventCategory: 'click tracking',
            eventAction: {
                'data-section-title': trackingLabel
            }
        });
        if (!event.target.parentElement.classList.contains('rubric__link')) {
            event.preventDefault();
            event.metaKey
                ? window.open(item.url, '_blank')
                : (window.location = item.url);
        }
    };
    return (React.createElement(SpotlightRelatedItems, { single: single, "data-testid": "SpotlightRelatedItems", template: template, ...(shouldShowDangerousBottomDek && {
            hideSummaryItemBottomSpacing: true
        }), showItemsAsList: showItemsAsList },
        React.createElement(Grid.NoMarginsTwoUp, null, items.map((item, key) => {
            return (React.createElement(SpotlightRelatedItem, { key: key, ...item.image, ...item, analyticsDataAttribute: componentTracking.addDataSectionTitleAttribute(true, trackingLabel, 
                // for contributor, there is no main article | for story, index 0 is the main feature (see parent)
                template === 'spotlight-contributor' ? key : key + 1), 
                // we show the hed text in the dek field
                // as we have limited space for these items
                dangerousDek: `<a href="${item.url}">${item.dangerousHed}</a>`, alternateClickHandlerStrategy: (e) => handleClick(e, item), 
                // and we hide the hed component
                shouldHideDangerousHed: true, shouldHideBylines: true, hasBorder: false, sideBySideVerticalAlign: "top", "data-testid": "SpotlightRelatedItem", shouldShowAllContentWhenDense: true, as: SummaryItemVariation, actionBarConfig: actionBarConfig }));
        }))));
};
SpotlightRelated.propTypes = {
    actionBarConfig: PropTypes.object,
    items: PropTypes.arrayOf(PropTypes.shape({
        categories: PropTypes.shape({
            tags: PropTypes.array
        }),
        contributors: PropTypes.shape({
            author: PropTypes.shape({
                items: PropTypes.arrayOf(PropTypes.shape({
                    dangerousBio: PropTypes.string,
                    dangerousTitle: PropTypes.string,
                    name: PropTypes.string,
                    socialMedia: PropTypes.array,
                    url: PropTypes.string
                }))
            })
        }),
        dangerousDek: PropTypes.string,
        dangerousHed: PropTypes.string,
        image: PropTypes.object,
        url: PropTypes.string
    })).isRequired,
    shouldShowDangerousBottomDek: PropTypes.bool,
    showItemsAsList: PropTypes.bool,
    summaryItemVariation: PropTypes.string,
    summaryItemVariationWithNoAssest: PropTypes.string,
    template: PropTypes.oneOf([
        'spotlight-story',
        'spotlight-contributor',
        'spotlight-article'
    ]).isRequired,
    trackingNamespace: PropTypes.string.isRequired
};
module.exports = SpotlightRelated;
//# sourceMappingURL=SpotlightRelated.js.map

/***/ }),

/***/ 96499:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.SpotlightRelatedItem = exports.SpotlightRelatedItems = void 0;
const { default: styled, css } = __webpack_require__(92168);
const { calculateSpacing, getColorStyles, maxScreen, minScreen } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { maxThresholds } = __webpack_require__(99906);
const { GridWrapper } = __webpack_require__(40653);
const { SummaryItemAssetContainer, SummaryItemContent, SummaryItemWrapper, SummaryItemDek } = __webpack_require__(68116);
const SpotlightRelatedItems = styled.div.withConfig({
    displayName: 'SpotlightRelatedItems',
    hasBorder: false
}) `
  margin-top: ${calculateSpacing(3)};

  ${({ template }) => template === 'spotlight-contributor' &&
    css `
      margin-top: ${calculateSpacing(5)};
    `}

  ${minScreen(BREAKPOINTS.md)} {
    margin-top: ${calculateSpacing(2)};
  }

  a {
    text-decoration: none;
  }

  ${({ single }) => single &&
    css `
      ${minScreen(BREAKPOINTS.md)} {
        align-self: unset;
      }
      ${GridWrapper} {
        display: unset;
      }

      ${SummaryItemAssetContainer} {
        display: none;
      }
    `}

  ${maxScreen(`${maxThresholds.md}px`)} {
    ${SummaryItemWrapper} {
      grid-gap: ${calculateSpacing(1)};
      grid-template-columns: none;
    }
  }

  .summary-item {
    border-top-width: 1px;
    border-top-style: solid;
    padding-top: ${calculateSpacing(2)};

    ${SummaryItemDek} {
      margin-bottom: 0;

      &:hover {
        text-decoration: underline;
      }
    }

    ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.discovery.body.white.border')};
  }

  ${({ hideSummaryItemBottomSpacing }) => hideSummaryItemBottomSpacing &&
    css `
      ${SummaryItemAssetContainer} {
        margin-bottom: 0;
      }
      ${SummaryItemContent} {
        padding-bottom: 0;
      }
    `}

  ${({ showItemsAsList }) => showItemsAsList &&
    `
      ${GridWrapper} {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, auto);
        grid-column-gap: 0;
      }
    `}
`;
exports.SpotlightRelatedItems = SpotlightRelatedItems;
const SpotlightRelatedItem = styled.div.withConfig({
    displayName: 'SpotlightRelatedItem'
}) `
  ${SummaryItemAssetContainer} {
    width: ${calculateSpacing(8)};
  }

  a {
    text-decoration: none;
  }
`;
exports.SpotlightRelatedItem = SpotlightRelatedItem;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 75437:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { asConfiguredComponent } = __webpack_require__(12892);
const SpotlightMainFeature = __webpack_require__(59966);
const { SpotlightDangerousBottomDek, SpotlightSummaryContainer, SpotlightSummaryInnerContainer, SpotlightSummarySingleColumn, SpotlightSectionTitle, SpotlightSummaryGrid } = __webpack_require__(23555);
const { TrackComponentChannel } = __webpack_require__(78788);
const SectionTitle = __webpack_require__(24277);
const { withCustomTheme } = __webpack_require__(15236);
/**
 * SummarySpotlight component.
 *
 * @param {object} props - React props
 * @param {string} props.customizedContinueReadingText - Customized Continue Reading text displayed after main feature dek content
 * @param {string} props.dangerousDek - Dek from CMS
 * @param {string} props.dangerousHed - Hed from CMS
 * @param {boolean} [props.hasCustomPadding] - Optional to have customised padding
 * @param {boolean} props.hasMarginTopOnMobile - Add margin top for featured Item content on mobile
 * @param {boolean} [props.hasRoundedCorners] - Optional prop to show rounded corners on image
 * @param {Array} props.items - Article items
 * @param {boolean} props.isDotClickable - An optional boolean that when set to true allows the dots to be clickable
 * @param {boolean} props.isImageOnRight - An optional boolean flag to set summary item image on right
 * @param {boolean} props.isSpecialTheme - To apply special theme
 * @param {string} [props.sectionTitleVariation] - Optional variation of SectionTitle to use
 * @param {Array} [props.selectedStories] - Selected articles list
 * @param {number} props.selectedStoriesImageWidth - Width of images for selected stories
 * @param {string} props.template - Template of the container
 * @param {bool} props.shouldHaveBackgroundWhite - should have white background
 * @param {boolean} [props.shouldHaveLargerFeaturedImage] - To enable to increase the max-width for featuredItem
 * @param {boolean} [props.shouldHideSelectedStoriesHeadline] - Prop to hide the selected stories headline
 * @param {boolean} [props.shouldUseDekForselectedStoriesHeadline] - Prop to set the dek as heading for seleted stories section.
 * @param {boolean} [props.shouldHideFeatureItemHeader] - prop for dangerousHed for featured item
 * @param {boolean} [props.shouldHideCustmizeText] - prop to hide customize link text in leadStory
 * @param {boolean} [props.shouldHideDangerousDek] - Hide dek on selected stories
 * @param {boolean} [props.shouldHideFeatureItemByline] - prop to hide byline for featured Item
 * @param {boolean} [props.shouldHideFeatureItemCaption] - prop to hide caption for featured Item
 * @param {boolean} props.shouldHideSelectedStoriesByline - prop to hide byline for selected stories Item
 * @param {boolean} [props.shouldLazyLoadCoverImage] - prop to lazy load cover image
 * @param {boolean} [props.shouldShowStackedRatingsCard] - Optional flag to show StackedRatingsCard instead of SummaryItem
 * @param {string} [props.hasRating] - Optional flag to render ratings for author spotlight.
 * @param {boolean} [props.shouldUseLightColorBackground] - should have light background
 * @param {boolean} [props.shouldUseMainContentDropCap] - Whether to use drop cap in main feature body
 * @param {boolean} [props.hasAdditionalDropcapStyling] - Optional flag  to apply additional padding to dropCap letter
 * @param {string} [props.hedTag] - Option to override the default header html tag when nested within a higher level header
 * @param {boolean} [props.shouldShowDangerousBottomDek] - prop to show Spotlight section title dek at bottom
 * @param {string} [props.shouldShowSelectedStoriesBelowInMobile] - This is to move the selectedStories below the featured Item in Mobile only
 * @param {boolean} [props.shouldStackHedAndDek] - Optional flag to stack the Hed and Dek content in the Section Title
 * @param {boolean} [props.stackedRatingsCardRatingMethod] - Optional prop to change rating methods
 * @param {string} [props.summaryItemVariation] - Which summary item to use
 * @param {string} [props.summaryItemVariationWithNoAssest] - Which summary item with no asset to use
 * @param {string} [props.hasSpecialStyleForFeatureLink] - To apply special color for the feature link
 * @param {boolean} [props.showItemsAsList] - Grid direction for related items
 * @param {string} [props.shouldUseLargeIconSize] - Optional to use large size icon
 * @param {object} [props.variations] - Optional. Variation properties used in rendering the component.
 * @param {boolean} [props.variations.showSectionTitleInsideContent] - This will render Section Title inside main feature content
 * @param {object} [props.actionBarConfig] - Config for the action bar
 *
 * @returns {ReactElement} - A component tree
 */
const SummarySpotlight = ({ customizedContinueReadingText, dangerousHed, dangerousDek, hasCustomPadding, hasMarginTopOnMobile = false, hasRating, hasRoundedCorners, hasSpecialStyleForFeatureLink = false, hedTag, items, isDotClickable = false, isImageOnRight = false, isSpecialTheme = false, sectionTitleVariation = 'TextLeftWithLineBelowTitle', selectedStories, selectedStoriesImageWidth, shouldUseDekForselectedStoriesHeadline = false, shouldHaveBackgroundWhite = false, shouldHideDangerousDek = false, shouldHaveLargerFeaturedImage = false, shouldHideSelectedStoriesHeadline = false, shouldHideFeatureItemHeader = false, shouldHideFeatureItemCaption = false, shouldHideFeatureItemByline = false, shouldHideSelectedStoriesByline = false, shouldLazyLoadCoverImage = false, shouldUseLightColorBackground = false, shouldUseMainContentDropCap, hasAdditionalDropcapStyling = false, shouldShowDangerousBottomDek = false, shouldShowSelectedStoriesBelowInMobile = false, shouldShowStackedRatingsCard = false, shouldStackHedAndDek = false, shouldUseLargeIconSize = false, stackedRatingsCardRatingMethod, summaryItemVariation, summaryItemVariationWithNoAssest, template, showItemsAsList, shouldHideCustmizeText, actionBarConfig, variations: { showSectionTitleInsideContent } = {} }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SummarySpotlight'
        });
    }, []);
    let stackedRatingsCardProps = {};
    if (shouldShowStackedRatingsCard) {
        stackedRatingsCardProps = {
            shouldUseLargeIconSize,
            hasIcon: true,
            hideRubric: false,
            ratingMethod: stackedRatingsCardRatingMethod
        };
    }
    const mainFeature = items[0];
    const sectionTitleProps = {
        dangerousDek: !shouldUseDekForselectedStoriesHeadline ? dangerousDek : '',
        dangerousHed,
        hasDividerBelow: true,
        className: 'SpotlightSectionTitle'
    };
    return (React.createElement(SpotlightSummaryContainer, { "data-testid": "SpotlightSummaryContainer", shouldHaveBackgroundWhite: shouldHaveBackgroundWhite, shouldUseLightColorBackground: shouldUseLightColorBackground, isSpecialTheme: isSpecialTheme },
        React.createElement(SpotlightSummaryInnerContainer, null,
            React.createElement(SpotlightSummarySingleColumn, null,
                !showSectionTitleInsideContent && (React.createElement(SpotlightSectionTitle, { "data-testid": "SpotlightOuterSectionTitle", as: SectionTitle[sectionTitleVariation], shouldUseDekForselectedStoriesHeadline: shouldUseDekForselectedStoriesHeadline, shouldStackHedAndDek: shouldStackHedAndDek, ...sectionTitleProps, template: template })),
                React.createElement(SpotlightSummaryGrid, null,
                    React.createElement(SpotlightMainFeature, { ...mainFeature, customizedContinueReadingText: customizedContinueReadingText, sectionTitleVariation: sectionTitleVariation, showSectionTitleInsideContent: showSectionTitleInsideContent, ...(showSectionTitleInsideContent && {
                            sectionTitleDangerousHed: dangerousHed
                        }), ...(dangerousHed && {
                            snowplowEvent: { label: dangerousHed }
                        }), selectedStoriesHeadline: dangerousDek, selectedStoriesImageWidth: selectedStoriesImageWidth, hasMarginTopOnMobile: hasMarginTopOnMobile, related: items.slice(1), selectedStories: selectedStories, isDotClickable: isDotClickable, isImageOnRight: isImageOnRight, hedTag: hedTag, shouldHideFeatureItemHeader: shouldHideFeatureItemHeader, shouldUseDropCap: shouldUseMainContentDropCap, hasAdditionalDropcapStyling: hasAdditionalDropcapStyling, shouldHideSelectedStoriesHeadline: shouldHideSelectedStoriesHeadline, stackedRatingsCardProps: stackedRatingsCardProps, shouldUseDekForselectedStoriesHeadline: shouldUseDekForselectedStoriesHeadline, shouldShowDangerousBottomDek: shouldShowDangerousBottomDek, shouldShowSelectedStoriesBelowInMobile: shouldShowSelectedStoriesBelowInMobile, hasRating: hasRating, shouldShowStackedRatingsCard: shouldShowStackedRatingsCard, shouldHaveLargerFeaturedImage: shouldHaveLargerFeaturedImage, shouldHideFeatureItemCaption: shouldHideFeatureItemCaption, shouldHideDangerousDek: shouldHideDangerousDek, shouldHideFeatureItemByline: shouldHideFeatureItemByline, shouldHideSelectedStoriesByline: shouldHideSelectedStoriesByline, summaryItemVariation: summaryItemVariation, summaryItemVariationWithNoAssest: summaryItemVariationWithNoAssest, template: template, hasSpecialStyleForFeatureLink: hasSpecialStyleForFeatureLink, showItemsAsList: showItemsAsList, shouldLazyLoadCoverImage: shouldLazyLoadCoverImage, hasRoundedCorners: hasRoundedCorners, shouldHideCustmizeText: shouldHideCustmizeText, hasCustomPadding: hasCustomPadding, actionBarConfig: actionBarConfig })),
                !shouldShowDangerousBottomDek &&
                    template === 'spotlight-contributor' && (React.createElement(SpotlightDangerousBottomDek, { "data-testid": "SpotlightMobileDangerousDek", dangerouslySetInnerHTML: { __html: dangerousDek }, hideOnTabletDesktop: true }))))));
};
SummarySpotlight.propTypes = {
    actionBarConfig: PropTypes.object,
    customizedContinueReadingText: PropTypes.string,
    dangerousDek: PropTypes.string.isRequired,
    dangerousHed: PropTypes.string.isRequired,
    hasAdditionalDropcapStyling: PropTypes.bool,
    hasCustomPadding: PropTypes.bool,
    hasMarginTopOnMobile: PropTypes.bool,
    hasRating: PropTypes.bool,
    hasRoundedCorners: PropTypes.bool,
    hasSpecialStyleForFeatureLink: PropTypes.bool,
    hedTag: PropTypes.string,
    isDotClickable: PropTypes.bool,
    isImageOnRight: PropTypes.bool,
    isSpecialTheme: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape({
        categories: PropTypes.shape({
            tags: PropTypes.array
        }),
        contributors: PropTypes.shape({
            author: PropTypes.shape({
                items: PropTypes.arrayOf(PropTypes.shape({
                    dangerousBio: PropTypes.string,
                    dangerousTitle: PropTypes.string,
                    name: PropTypes.string,
                    socialMedia: PropTypes.array,
                    url: PropTypes.string
                }))
            })
        }),
        dangerousDek: PropTypes.string,
        dangerousHed: PropTypes.string,
        contentType: PropTypes.string,
        copilotID: PropTypes.string,
        image: PropTypes.object,
        url: PropTypes.string
    })).isRequired,
    sectionTitleVariation: PropTypes.string,
    selectedStories: PropTypes.arrayOf(PropTypes.shape({
        categories: PropTypes.shape({
            tags: PropTypes.array
        }),
        contributors: PropTypes.shape({
            author: PropTypes.shape({
                items: PropTypes.arrayOf(PropTypes.shape({
                    dangerousBio: PropTypes.string,
                    dangerousTitle: PropTypes.string,
                    name: PropTypes.string,
                    socialMedia: PropTypes.array,
                    url: PropTypes.string
                }))
            })
        }),
        dangerousDek: PropTypes.string,
        dangerousHed: PropTypes.string,
        id: PropTypes.string,
        image: PropTypes.object,
        url: PropTypes.string
    })),
    selectedStoriesImageWidth: PropTypes.number,
    shouldHaveBackgroundWhite: PropTypes.bool,
    shouldHaveLargerFeaturedImage: PropTypes.bool,
    shouldHideCustmizeText: PropTypes.bool,
    shouldHideDangerousDek: PropTypes.bool,
    shouldHideFeatureItemByline: PropTypes.bool,
    shouldHideFeatureItemCaption: PropTypes.bool,
    shouldHideFeatureItemHeader: PropTypes.bool,
    shouldHideSelectedStoriesByline: PropTypes.bool,
    shouldHideSelectedStoriesHeadline: PropTypes.bool,
    shouldLazyLoadCoverImage: PropTypes.bool,
    shouldShowDangerousBottomDek: PropTypes.bool,
    shouldShowSelectedStoriesBelowInMobile: PropTypes.bool,
    shouldShowStackedRatingsCard: PropTypes.bool,
    shouldStackHedAndDek: PropTypes.bool,
    shouldUseDekForselectedStoriesHeadline: PropTypes.bool,
    shouldUseLargeIconSize: PropTypes.bool,
    shouldUseLightColorBackground: PropTypes.bool,
    shouldUseMainContentDropCap: PropTypes.bool,
    showItemsAsList: PropTypes.bool,
    stackedRatingsCardRatingMethod: PropTypes.string,
    summaryItemVariation: PropTypes.string,
    summaryItemVariationWithNoAssest: PropTypes.string,
    template: PropTypes.oneOf([
        'spotlight-story',
        'spotlight-contributor',
        'spotlight-article'
    ]).isRequired,
    variations: PropTypes.shape({
        showSectionTitleInsideContent: PropTypes.bool
    })
};
SummarySpotlight.displayName = 'SummarySpotlight';
module.exports = asConfiguredComponent(withCustomTheme(SummarySpotlight), 'SummarySpotlight');
//# sourceMappingURL=SummarySpotlight.js.map

/***/ }),

/***/ 13113:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const SummarySpotlight = __webpack_require__(4788);
module.exports = SummarySpotlight;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 23555:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.SpotlightSummaryGrid = exports.SpotlightSectionTitle = exports.SpotlightSummarySingleColumn = exports.SpotlightSummaryInnerContainer = exports.SpotlightSummaryContainer = exports.SpotlightDangerousBottomDek = exports.SpotlightMainFeatureHeader = void 0;
const layout_1 = __webpack_require__(1123);
const { default: styled, css } = __webpack_require__(92168);
const { calculateSpacing, getColorStyles, getColorToken, getTypographyStyles, getLinkStyles, minScreen, maxScreen } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { maxThresholds } = __webpack_require__(99906);
const SectionTitle = __webpack_require__(35864);
const { SectionTitleDek, SectionTitleHed } = __webpack_require__(33500);
const { BaseText } = __webpack_require__(18730);
const { SpotlightMainFeature } = __webpack_require__(48665);
const { SpotlightRelatedItems } = __webpack_require__(96499);
const { ActionBarWrapper, ActionBarButton } = __webpack_require__(11586);
const getBackgroundColor = ({ shouldHaveBackgroundWhite, shouldUseLightColorBackground, isSpecialTheme, theme }) => {
    if (shouldHaveBackgroundWhite) {
        return `${getColorStyles(theme, 'background-color', 'colors.background.white')};`;
    }
    else if (isSpecialTheme) {
        return `${getColorStyles(theme, 'background-color', 'colors.consumption.lead.special.background')};`;
    }
    else if (shouldUseLightColorBackground) {
        return `${getColorStyles(theme, 'background-color', 'colors.discovery.body.light.background')};`;
    }
    return `${getColorStyles(theme, 'background-color', 'colors.background.light')};`;
};
const SpotlightSummaryContainer = styled.section.withConfig({
    displayName: 'SpotlightSummaryContainer'
}) `
  padding: ${calculateSpacing(3)};

  ${getBackgroundColor}

  ${minScreen(BREAKPOINTS.md)} {
    padding-top: ${calculateSpacing(6)};
    padding-bottom: ${calculateSpacing(6)};
  }

  ${(0, layout_1.cssVariablesGrid)()}
  ${(0, layout_1.applyGridSpacing)('padding')}

  ${SpotlightMainFeature}, ${SpotlightRelatedItems} {
    ${ActionBarWrapper} {
      position: absolute;
      right: ${calculateSpacing(0.5)};
      bottom: ${calculateSpacing(0.5)};
      background: transparent;
      height: ${calculateSpacing(3)};
      ${ActionBarButton} {
        border: none;
        background: none;
        text-decoration: none;
      }
      ${({ theme }) => `
          ${getColorStyles(theme, 'border-color', `colors.discovery.body.black.border`)};
      
          svg {
            path {
              ${getColorStyles(theme, 'fill', `colors.discovery.body.white.accent`)};
            }
          }
          
        `}
    }
  }
`;
exports.SpotlightSummaryContainer = SpotlightSummaryContainer;
const SpotlightSummaryInnerContainer = styled.div.withConfig({
    displayName: 'SpotlightSummaryInnerContainer'
}) `
  margin: 0 auto;
  max-width: calc(${BREAKPOINTS.xxl} - (2 * ${calculateSpacing(8)}));
`;
exports.SpotlightSummaryInnerContainer = SpotlightSummaryInnerContainer;
const SpotlightSummarySingleColumn = styled.div.withConfig({
    displayName: 'SpotlightSummarySingleColumn'
}) `
  .summary-item {
    width: 100%;
  }
`;
exports.SpotlightSummarySingleColumn = SpotlightSummarySingleColumn;
const SpotlightSectionTitle = styled(SectionTitle).withConfig({
    displayName: 'SpotlightHeader'
}) `
  ${({ shouldUseDekForselectedStoriesHeadline, showSectionTitleInsideContent, shouldStackHedAndDek }) => !shouldUseDekForselectedStoriesHeadline &&
    !showSectionTitleInsideContent &&
    !shouldStackHedAndDek &&
    css `
      display: flex;
      justify-content: space-between;
    `}

  ${({ template }) => template === 'spotlight-contributor' &&
    css `
      ${maxScreen(`${maxThresholds.md}px`)} {
        display: block;
        ${SectionTitleHed} {
          width: 100%;
          text-align: center;
        }
      }
    `}
  margin-bottom: ${calculateSpacing(3)};
  border-bottom: ${calculateSpacing(0.125)} solid
    ${getColorToken('colors.discovery.body.white.accent')};
  padding-bottom: ${calculateSpacing(2)};

  ${minScreen(BREAKPOINTS.md)} {
    margin-bottom: ${calculateSpacing(4)};
  }

  ${SectionTitleDek} {
    margin-top: 0;
    padding-top: 0;
    text-underline-offset: 3px; /* this was agreed in VQA and is not one of our theme values  */
    ${({ theme }) => getLinkStyles(theme, 'colors.foundation.collapsed-menu.utility-link.default', 'colors.foundation.collapsed-menu.utility-link.hover', 'navigation')}
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-primary')};

    a {
      text-decoration: none;
      transition-duration: unset;

      &:hover {
        text-decoration: underline;
      }
    }

    ${({ template }) => template === 'spotlight-contributor' &&
    css `
        ${maxScreen(`${maxThresholds.md}px`)} {
          display: none;
        }
      `}

    ${({ shouldStackHedAndDek }) => shouldStackHedAndDek &&
    css `
        padding-top: ${calculateSpacing(1.5, 'px')};
      `}
  }

  ${({ showSectionTitleInsideContent }) => showSectionTitleInsideContent &&
    css `
      margin-bottom: ${calculateSpacing(1, 'px')};
      border-bottom: none;
      padding-bottom: 0;
      ${minScreen(BREAKPOINTS.md)} {
        margin-bottom: ${calculateSpacing(1, 'px')};
      }
      ${SectionTitleHed} {
        ${getTypographyStyles('typography.definitions.discovery.subhed-section-tertiary')}
      }
    `}
`;
exports.SpotlightSectionTitle = SpotlightSectionTitle;
const SpotlightDangerousBottomDek = styled(BaseText).withConfig({
    displayName: 'SpotlightDangerousBottomDek'
}) `
  margin-top: ${({ hasEnhancedTopSpacing }) => calculateSpacing(hasEnhancedTopSpacing ? 2 : 3)};
  text-align: center;
  ${minScreen(BREAKPOINTS.lg)} {
    text-align: left;
  }
  ${({ hideOnTabletDesktop }) => hideOnTabletDesktop &&
    css `
      ${minScreen(BREAKPOINTS.md)} {
        display: none;
      }
    `}
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-primary')};

  a {
    text-decoration: none;
  }
`;
exports.SpotlightDangerousBottomDek = SpotlightDangerousBottomDek;
const SpotlightSummaryGrid = styled.section.withConfig({
    displayName: 'SpotlightSummaryGrid'
}) `
  display: grid;
  ${(0, layout_1.cssVariablesGrid)()}
  grid-template-areas:
  'stories'
  'body';
  grid-template-columns: 100%;

  ${minScreen(BREAKPOINTS.md)} {
    grid-template-areas: 'body';
  }
`;
exports.SpotlightSummaryGrid = SpotlightSummaryGrid;
const SpotlightMainFeatureHeader = styled.h2.withConfig({
    displayName: 'SpotlightMainFeatureHeader'
}) `
  margin: 0 auto;
  padding-bottom: ${calculateSpacing(3)};
  text-align: center;
  text-transform: uppercase;

  ${({ theme }) => css `
      ${getTypographyStyles(theme, 'typography.definitions.discovery.hed-feature')}
      ${getColorStyles(theme, 'color', 'colors.discovery.body.brand.heading')};
    `};

  ${minScreen(BREAKPOINTS.lg)} {
    max-width: 80%;
  }
`;
exports.SpotlightMainFeatureHeader = SpotlightMainFeatureHeader;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 56165:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    continueReadingText: {
        id: 'SummarySpotlight.ContinueReading',
        defaultMessage: 'Continue reading »',
        description: 'Continue reading Summary Spotlight article.'
    },
    selectedStoriesHeading: {
        id: 'SummarySpotlight.SelectedStories',
        defaultMessage: 'Selected Stories',
        description: 'Title of the selected stories section'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 4788:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const SummarySpotlight = __webpack_require__(75437);
SummarySpotlight.StorySummarySpotlight = asVariation(SummarySpotlight, 'StorySummarySpotlight', {
    showSectionTitleInsideContent: true
}, {
    sectionTitleVariation: 'TextCenter',
    shouldShowDangerousBottomDek: true,
    shouldLazyLoadCoverImage: true,
    showItemsAsList: false
});
SummarySpotlight.ContributorSummarySpotlight = asVariation(SummarySpotlight, 'ContributorSummarySpotlight', {
    showSectionTitleInsideContent: true
}, {
    sectionTitleVariation: 'TextCenter',
    shouldShowDangerousBottomDek: true,
    shouldLazyLoadCoverImage: true
});
module.exports = SummarySpotlight;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 32887:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const throttle = __webpack_require__(7350);
const { connector } = __webpack_require__(57744);
const { TrackComponentChannel } = __webpack_require__(78788);
const ConnectedNavigation = __webpack_require__(10980);
const Navigation = __webpack_require__(54790);
const { useViewportObserver } = __webpack_require__(55030);
const scrollHelper = __webpack_require__(26890);
const { calculateSpacing } = __webpack_require__(26865);
const { StickyHeroAd } = __webpack_require__(19607);
const { default: navigationTranslation } = __webpack_require__(98904);
const SmartComponent = __webpack_require__(30583);
const translations = (__webpack_require__(77207)/* ["default"] */ .A);
const { TopStoryHeader, TopStoryHeroAdWrapper, TopStoryComponent, TopStoryPrimaryLinks, TopStoryWrapper, ToutsContainer, ToutsHeader, ToutsBody, stylePool, GlobalStyles } = __webpack_require__(26805);
const { StackedNavigationNavigationPrimaryLink } = __webpack_require__(77630);
/**
 *
 * @param {object} props - props for the component
 * @param {string} props.content - content to render
 * @returns {ReactElement} - React element
 */
const AdditionalContent = ({ content }) => {
    const intl = useIntl();
    if (!content) {
        return null;
    }
    return (React.createElement(ToutsContainer, { className: "smart-item--tout" },
        React.createElement(ToutsHeader, { dangerouslySetInnerHTML: {
                __html: intl.formatMessage(translations.toutHead)
            } }),
        React.createElement(ToutsBody, { dangerouslySetInnerHTML: { __html: content } })));
};
AdditionalContent.propTypes = {
    content: PropTypes.string.isRequired
};
/**
 * TopStory component
 *
 * @param {object} props - React props
 * @param {number} props.index - Index of container
 * @param {object} props.navigation - Navigation props
 * @param {object} props.layoutConfigs - Layout config from the redux store
 * @param {string} [props.additionalContent] - additional html content to display
 * @param {Array<object>} props.items - items to render
 * @param {boolean} [props.shouldShow100AnnivLogo] - optional flag to show TNY 100th anniversary logo
 *
 * @returns {ReactElement} <div>
 */
const TopStory = ({ additionalContent, index, items, navigation, layoutConfigs, shouldShow100AnnivLogo, ...container }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'TopStory'
        });
    }, []);
    const { formatMessage } = useIntl();
    const headerRef = React.useRef();
    const [headerIsFixed, setHeaderIsFixed] = React.useState(false);
    const [navIsFixed, setNavIsFixed] = React.useState(false);
    const [drawerTop, setDrawerTop] = React.useState(0);
    const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
    const [isNavbarCollapsible, setIsNavbarCollapsible] = React.useState(false);
    const [isScrolled, setScrolledState] = React.useState(false);
    const [lastScrollPosition, setLastScrollPositionState] = React.useState(0);
    const [addPaddingToCrownAd, setAddPaddingToCrownAd] = React.useState(false);
    const itemsToRender = items.map((item) => ({
        ...item,
        additionalContent: additionalContent && (React.createElement(AdditionalContent, { content: additionalContent })),
        image: item.image && {
            ...item.image,
            isLazy: false
        }
    }));
    useViewportObserver(`.top-story__crown-ad`, undefined, (isInViewport) => {
        setHeaderIsFixed(!isInViewport);
    });
    useViewportObserver(`.top_story-component`, {
        rootSelector: null,
        rootMargin: `-${calculateSpacing(shouldShow100AnnivLogo ? 8 : 9, 'px')}`,
        threshold: 0
    }, (isInViewport) => {
        setNavIsFixed(!isInViewport);
    });
    const onDrawerStateChange = React.useCallback((isDrawerOpen) => {
        if (isDrawerOpen) {
            const headerRect = headerRef.current?.getBoundingClientRect();
            setDrawerTop(headerRect?.top || 0);
        }
        setIsDrawerOpen(isDrawerOpen);
    }, []);
    useViewportObserver(`.top_story-component`, {
        rootSelector: null,
        rootMargin: `${calculateSpacing(62.5, 'px')}`,
        threshold: 0
    }, (isInViewport) => {
        setIsNavbarCollapsible(!isInViewport);
    });
    const handleScroll = React.useCallback(() => {
        const scrollTop = window.pageYOffset;
        if (scrollHelper.shouldUpdateScroll(isScrolled, scrollTop, lastScrollPosition, 'delta')) {
            setScrolledState(scrollTop - lastScrollPosition > 0);
            setLastScrollPositionState(scrollTop);
        }
    }, [isScrolled, lastScrollPosition]);
    React.useEffect(() => {
        const throttledScroll = throttle(handleScroll, 150);
        window.addEventListener('scroll', throttledScroll);
        return () => window.removeEventListener('scroll', throttledScroll);
    }, [handleScroll]);
    const onCrownAdFilled = (data) => {
        if (data) {
            setAddPaddingToCrownAd(true);
        }
    };
    const palette = layoutConfigs[container.id]?.palette || '';
    const headerTheme = navIsFixed ? 'standard' : palette;
    return (React.createElement(React.Fragment, null,
        React.createElement(TopStoryHeroAdWrapper, { className: "top-story__crown-ad", addPaddingToCrownAd: addPaddingToCrownAd },
            React.createElement(StickyHeroAd, { shouldHoldSpace: false, onFilled: onCrownAdFilled })),
        React.createElement(TopStoryHeader, { ref: headerRef, headerIsFixed: headerIsFixed, navIsFixed: navIsFixed, headerTheme: headerTheme, isDrawerOpen: isDrawerOpen, shouldShow100AnnivLogo: shouldShow100AnnivLogo, "data-testid": "top-story__header" },
            React.createElement(ConnectedNavigation, { headerTheme: headerTheme, onDrawerStateChange: onDrawerStateChange })),
        React.createElement(TopStoryWrapper, { navIsFixed: navIsFixed, headerIsFixed: headerIsFixed, headerTheme: headerTheme, palette: palette, shouldCollapseNavbar: isScrolled && isNavbarCollapsible, shouldShow100AnnivLogo: shouldShow100AnnivLogo, "data-testid": "top-story__wrapper" },
            React.createElement(TopStoryPrimaryLinks, { "data-testid": "StackedNavigationSectionPrimaryLinks" },
                React.createElement(StackedNavigationNavigationPrimaryLink, { attributes: {
                        'aria-label': formatMessage(navigationTranslation.primaryLinksLabel)
                    }, links: navigation.primaryLinks, shouldAllowNavItemHide: true })),
            React.createElement(TopStoryComponent, { id: "topstory-content" },
                React.createElement(SmartComponent, { ...container, index: index, className: "top_story-component", items: itemsToRender, themeExtensions: {
                        componentStylePools: {
                            SmartItem: stylePool
                        }
                    } })),
            React.createElement(GlobalStyles, { drawerTop: drawerTop }))));
};
TopStory.propTypes = {
    additionalContent: PropTypes.string,
    index: PropTypes.number,
    items: PropTypes.array.isRequired,
    layoutConfigs: PropTypes.object,
    navigation: PropTypes.shape({
        primaryLinks: Navigation.propTypes.links
    }),
    shouldShow100AnnivLogo: PropTypes.bool
};
module.exports = connector(TopStory, {
    keysToPluck: ['bundle', 'layoutConfigs', 'navigation']
});
//# sourceMappingURL=TopStory.js.map

/***/ }),

/***/ 75883:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(32887);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 26805:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css, createGlobalStyle } = __webpack_require__(92168);
const { SmartItemBaseText } = __webpack_require__(88154);
const { StackedNavigationHeader, StackedNavigationTop, StackedNavigationGrid, StackedNavigationSectionLogo, StackedNavigationSectionLogoSize, StackedNavigationSectionPrimaryLinks, StackedNavigationBottom, StackedNavigationSectionUtilityLinksLogin } = __webpack_require__(77630);
const { StandardNavigationDropdown } = __webpack_require__(88570);
const { PersistentTopWrapper } = __webpack_require__(43068);
const { NavigationInternalLink, NavigationExternalLink } = __webpack_require__(51418);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const { TextContainer } = __webpack_require__(42667);
const { DrawerModalWrapper } = __webpack_require__(63967);
const { SmartItemAssetContainer } = __webpack_require__(78465);
const { StickyHeroAdWrapper } = __webpack_require__(36185);
const { maxThresholds, minThresholds } = __webpack_require__(99906);
const { calculateSpacing, getColorStyles, getColorToken, minScreen, maxScreen } = __webpack_require__(26865);
const { BREAKPOINTS, ZINDEX_MAP } = __webpack_require__(96472);
const headerHeight = css `
  --top-story-header-height: ${calculateSpacing(7)};
  ${minScreen(BREAKPOINTS.lg)} {
    --top-story-header-height: ${({ shouldShow100AnnivLogo }) => calculateSpacing(shouldShow100AnnivLogo ? 8 : 9)};
    --top-story-header-height-fixed: ${calculateSpacing(8)};
    --top-story-nav-bar-height: ${calculateSpacing(6)};
  }
`;
const ToutsHeader = styled(SmartItemBaseText).withConfig({
    displayName: 'ToutsHeader'
}) ``;
ToutsHeader.defaultProps = {
    as: 'div',
    colorToken: 'colors.discovery.body.white.description',
    invertedColorToken: 'colors.discovery.body.black.description',
    typeIdentity: 'typography.definitions.discovery.description-core'
};
const ToutsBody = styled(SmartItemBaseText).withConfig({
    displayName: 'ToutsBody'
}) `
  & > ul {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: ${calculateSpacing(1)};
  }
`;
ToutsBody.defaultProps = {
    as: 'div',
    colorToken: 'colors.discovery.body.white.description',
    invertedColorToken: 'colors.discovery.body.black.description',
    typeIdentity: 'typography.definitions.discovery.description-core'
};
const ToutsContainer = styled(SmartItemBaseText).withConfig({
    displayName: 'ToutsContainer'
}) `
  text-align: center;
  ${maxScreen(`${maxThresholds.md}px`)} {
    padding: ${calculateSpacing(3)};
  }
  ${minScreen(`${minThresholds.lg}px`)} {
    margin-top: ${calculateSpacing(3)};
    padding-top: 0;
    padding-bottom: ${calculateSpacing(3)};
  }

  ${ToutsHeader} {
    margin-bottom: ${calculateSpacing(1)};
  }
`;
ToutsContainer.defaultProps = {
    as: 'div',
    colorToken: 'colors.discovery.body.white.description',
    invertedColorToken: 'colors.discovery.body.black.description',
    typeIdentity: 'typography.definitions.discovery.description-feature'
};
const topStoryHeight = css `
  height: auto;
  min-height: unset;
  ${minScreen(`${minThresholds.lg}px`)} {
    min-height: ${calculateSpacing(68)};
  }
  ${minScreen(`${minThresholds.xl}px`)} {
    min-height: ${calculateSpacing(75)};
    ${({ theme }) => theme.palette !== 'transparent'
    ? css `
            height: calc(
              100vh -
                (
                  var(--top-story-header-height) +
                    var(--top-story-nav-bar-height, 0px)
                )
            );
          `
    : css `
            height: calc(100vh - var(--top-story-nav-bar-height, 0px));
          `};
  }
  ${maxScreen(`${maxThresholds.md}px`)} {
    ${TextContainer} {
      min-height: 167vw;
    }
  }
`;
const stylePool = {
    overlay: (_, styleSettings = {}) => css `
    --top-story-layout: 'overlay';
    ${topStoryHeight}
    ${TextContainer} {
      padding-top: ${calculateSpacing(13)};
    }

    ${maxScreen(`${maxThresholds.md}px`)} {
      justify-content: stretch;
      ${TextContainer} {
        padding-bottom: ${calculateSpacing(3)};
      }
      ${SmartItemAssetContainer} {
        position: relative;
        grid-area: content;
      }
    }

    ${minScreen(`${minThresholds.lg}px`)} {
      ${TextContainer} {
        padding-bottom: ${({ additionalContent }) => additionalContent ? 0 : calculateSpacing(3)};
      }
    }

    ${minScreen(`${minThresholds.xl}px`)} {
      ${TextContainer} {
        padding-bottom: ${({ additionalContent }) => additionalContent ? calculateSpacing(3) : calculateSpacing(6)};
      }

      ${styleSettings?.textAlign === 'start' &&
        `
          && ${TextContainer} {
            padding-top: ${calculateSpacing(21)};
          }
        `}

      ${({ additionalContent }) => {
        if (styleSettings?.textAlign === 'start') {
            return `
            && ${SmartItemAssetContainer} {
              &::after {
                background: ${additionalContent
                ? 'linear-gradient(to bottom, rgba(0, 0, 0, .95) 0, transparent 65%, rgba(0, 0, 0, .85) 100%);'
                : 'linear-gradient(to bottom, rgba(0, 0, 0, .95) 0, transparent 100%);'};
              }
            }
          `;
        }
        return ``;
    }}
    }
    ${TextContainer} {
      ${({ presetCategory, additionalContent }) => presetCategory === 'TEXT_ONLY' &&
        !additionalContent &&
        css `
          padding-bottom: 0;
        `}
    }
  `,
    stack: (_, styleSettings = {}) => css `
    --top-story-layout: 'stack';
    ${styleSettings?.image?.inset &&
        css `
      ${ToutsContainer} {
        padding-top: 0;
      }
    `}
  `,
    'side-by-side': (_, styleSettings = {}) => css `
      --top-story-layout: 'side-by-side';
      ${minScreen(`${minThresholds.lg}px`)} {
        ${styleSettings?.image?.inset &&
        css `
          --smart-item-asset-h-inset: ${calculateSpacing(3)};
          --smart-item-asset-v-inset: ${calculateSpacing(3)};
        `}

        ${TextContainer} {
          ${({ additionalContent }) => additionalContent &&
        css `
              padding-bottom: 0;
            `};
        }
        ${ToutsContainer} {
          padding-right: ${calculateSpacing(3)};
          padding-left: ${calculateSpacing(3)};
        }
      }
      ${minScreen(`${minThresholds.xl}px`)} {
        ${ToutsContainer} {
          padding-right: ${calculateSpacing(6)};
          padding-left: ${calculateSpacing(6)};
        }
      }
      ${TextContainer}, ${ToutsContainer} {
        margin: 0 auto;
      }
      ${topStoryHeight}
    `
};
const TopStoryHeroAdWrapper = styled.div.withConfig({
    displayName: 'TopStoryHeroAdWrapper'
}) `
  grid-area: ad;

  ${({ addPaddingToCrownAd }) => addPaddingToCrownAd &&
    `
    ${StickyHeroAdWrapper} {
      padding: ${calculateSpacing(1)} 0;

      ${minScreen(BREAKPOINTS.md)} {
        padding: ${calculateSpacing(2)} 0;
      }
    }
    `}
`;
const TopStoryHeader = styled.div.withConfig({
    displayName: 'TopStoryHeader'
}) `
  ${headerHeight};

  position: ${({ headerIsFixed }) => (headerIsFixed ? 'fixed' : 'sticky')};
  top: 0;
  left: 0;
  grid-area: header;
  z-index: ${ZINDEX_MAP.persistentTopLayer + 1};
  width: 100%;

  ${minScreen(BREAKPOINTS.lg)} {
    ${StackedNavigationTop} {
      padding: ${calculateSpacing(2)} 0;
      height: ${({ navIsFixed }) => navIsFixed
    ? `var(--top-story-header-height-fixed)`
    : `var(--top-story-header-height)`};
    }

    ${({ shouldShow100AnnivLogo }) => !shouldShow100AnnivLogo &&
    css `
        ${StackedNavigationSectionLogoSize} ${ResponsiveImageContainer} {
          transition: width 0.3s cubic-bezier(0, 0.59, 0.32, 1);
          width: ${({ navIsFixed }) => navIsFixed ? calculateSpacing(16) : calculateSpacing(21.626)};
          height: ${({ navIsFixed }) => navIsFixed && calculateSpacing(3.75)};
        }
      `}

    &&& {
      ${StackedNavigationGrid} {
        height: ${({ navIsFixed }) => navIsFixed
    ? `var(--top-story-header-height-fixed)`
    : `var(--top-story-header-height)`};
      }
    }
  }

  ${PersistentTopWrapper} {
    position: relative;
    max-height: var(--top-story-header-height);
  }

  ${StackedNavigationHeader} {
    box-shadow: none;

    ${({ isDrawerOpen }) => isDrawerOpen &&
    css `
        & {
          transition: none;
        }
      `}

    ${maxScreen(`${maxThresholds.lg}px`)} {
      ${StackedNavigationBottom} {
        transition: none;

        ${StackedNavigationSectionLogo} ${ResponsiveImageContainer} {
          ${({ shouldShow100AnnivLogo }) => shouldShow100AnnivLogo &&
    css `
              & {
                width: ${calculateSpacing(19.438)};
                height: ${calculateSpacing(1.75)};
              }
            `}
        }
      }
    }
  }

  ${({ headerTheme }) => headerTheme === 'transparent' &&
    css `
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), transparent);
    `}

  && ${StackedNavigationHeader} {
    border-bottom: none;

    ${StackedNavigationTop}, ${StackedNavigationBottom} {
      border-bottom: ${({ navIsFixed, theme }) => navIsFixed
    ? `
          1px solid;
          ${getColorStyles(theme, 'border-bottom-color', 'colors.foundation.menu.dividers')};
        `
    : 'none'};
    }

    ${StackedNavigationSectionUtilityLinksLogin} {
      ${StandardNavigationDropdown} {
        box-shadow: none;
      }
      ${StandardNavigationDropdown}::before {
        content: none;
      }
    }
  }
`;
const TopStoryComponent = styled.div.withConfig({
    displayName: 'TopStoryComponent'
}) `
  grid-area: content;
`;
const TopStoryPrimaryLinks = styled(StackedNavigationSectionPrimaryLinks).withConfig({
    displayName: 'TopStoryPrimaryLinks'
}) `
  grid-area: navigation;
`;
const TopStoryWrapper = styled.div.withConfig({
    displayName: 'TopStoryWrapper'
}) `
  ${headerHeight};

  ${({ headerIsFixed, palette }) => {
    if (headerIsFixed) {
        return `margin-top: ${palette === 'transparent' ? 0 : 'var(--top-story-header-height)'};`;
    }
    return `margin-top: ${palette === 'transparent'
        ? 'calc(-1 * var(--top-story-header-height))'
        : 0};`;
}}

  display: grid;
  grid-template-areas:
    'content'
    'navigation';
  grid-template-rows: repeat(12, auto);

  ${({ navIsFixed }) => navIsFixed &&
    css `
      margin-bottom: var(--top-story-nav-bar-height, 0px);
    `}

  ${({ palette, theme }) => palette === 'standard' &&
    css `
      ${TopStoryComponent} {
        border-bottom: 1px solid;
        ${getColorStyles(theme, 'border-bottom-color', 'colors.interactive.base.border')};
      }
    `}

  && {
    ${TopStoryPrimaryLinks} {
      display: none;
      grid-row: -1;
      align-items: center;
      transition: height 0.3s cubic-bezier(0, 0.59, 0.32, 1);
      z-index: ${ZINDEX_MAP.persistentBottomLayer};
      height: var(--top-story-nav-bar-height);
      overflow: hidden;

      ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.foundation.menu-bg.collapsed')};

      ${({ navIsFixed }) => navIsFixed &&
    css `
          position: fixed;
          left: 0;
          top: var(--top-story-header-height-fixed);
          width: 100%;
        `}

      ${NavigationInternalLink}, ${NavigationExternalLink} {
        ${({ theme }) => getColorStyles(theme, 'color', 'colors.foundation.collapsed-menu.nav-link.default')};
      }

      ${({ shouldCollapseNavbar }) => shouldCollapseNavbar &&
    css `
          border-bottom: none;
          height: 0;
        `}
    }

    ${minScreen(BREAKPOINTS.lg)} {
      border-bottom: 1px solid;
      ${({ theme }) => getColorStyles(theme, 'border-bottom-color', 'colors.foundation.menu.dividers')};

      ${TopStoryPrimaryLinks} {
        display: flex;
      }
    }
  }

  overflow: hidden;
`;
const GlobalStyles = createGlobalStyle `
  ${DrawerModalWrapper} {
    .drawer__overlay {
      &.drawer__overlay--opening {
        transition: none;
      }

      &.drawer__overlay--closing {
        transition: none;
      }

      &.drawer__overlay--opening.drawer--overlay-color-white {
        background-color: rgba(
          ${getColorToken('colors.interactive.base.white', {
    rgbOnly: true
})},
          1
        );
      }
    }

    .drawer--megamenu-topstory {
      padding-top: ${({ drawerTop }) => css `calc(${drawerTop}px + ${calculateSpacing(6)})`};
    }
  }
`;
module.exports = {
    TopStoryHeader,
    TopStoryHeroAdWrapper,
    TopStoryComponent,
    TopStoryPrimaryLinks,
    TopStoryWrapper,
    ToutsContainer,
    ToutsHeader,
    ToutsBody,
    stylePool,
    GlobalStyles
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 77207:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    toutHead: {
        id: 'TopStory.toutHead',
        defaultMessage: '<i>Also today . . .</i>',
        description: 'Tout header for top story'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 42599:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.TriggerableContainer = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const styled_components_1 = __webpack_require__(92168);
const styles_1 = __webpack_require__(10750);
const hooks_1 = __webpack_require__(5974);
const TriggerableContainerContext_1 = __webpack_require__(46912);
const TriggerableContainerOverlay_1 = __webpack_require__(91560);
const ContainerEventManager_1 = __webpack_require__(39909);
const FocusTrap_1 = __webpack_require__(53373);
function TriggerableContainer({ id, children, hasOverlay, hasDefaultContainer, layout, theme }) {
    const containerRef = (0, react_1.useRef)(null);
    const { isOpen, position, triggerElement } = (0, hooks_1.useTriggerableContainerTrigger)(id);
    (0, hooks_1.useCloseContainerOnOutsideClick)(id, isOpen, containerRef.current, position);
    (0, hooks_1.useToggleContentScrollPrevention)(isOpen);
    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: { oneNavTheme: theme } },
        react_1.default.createElement(TriggerableContainerContext_1.TriggerableContainerContext.Provider, { value: {
                triggerElement,
                isOpen,
                containerId: id,
                position
            } },
            react_1.default.createElement(TriggerableContainerOverlay_1.TriggerableContainerOverlay, { isOpen: isOpen, hasOverlay: hasOverlay, position: position, theme: theme }),
            react_1.default.createElement(FocusTrap_1.FocusTrap, { isActive: isOpen, hasContentObservation: true, onEscPress: () => {
                    ContainerEventManager_1.ContainerEventManager.emit(ContainerEventManager_1.ContainerEventType.TRIGGER, {
                        containerId: id,
                        isOpen: false,
                        position
                    });
                }, theme: theme },
                react_1.default.createElement("div", { ref: containerRef, tabIndex: -1 }, hasDefaultContainer ? (react_1.default.createElement(styles_1.TriggerableContainerContent, { tabIndex: -1, position: position, layout: layout, isOpen: isOpen, "data-active-triggerable-container": isOpen ? id : null },
                    react_1.default.createElement(styles_1.DrawerWrapper, { tabIndex: -1, isOpen: isOpen, onWheel: allowScrollInsideContainer, onTouchMove: allowScrollInsideContainer, layout: layout },
                        react_1.default.createElement(styles_1.GridWrapper, { tabIndex: -1, isOpen: isOpen, layout: layout }, children)))) : (react_1.default.createElement(react_1.default.Fragment, null, children)))))));
}
exports.TriggerableContainer = TriggerableContainer;
function allowScrollInsideContainer(event) {
    event.stopPropagation();
}
//# sourceMappingURL=TriggerableContainer.js.map

/***/ }),

/***/ 46912:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.TriggerableContainerContext = void 0;
const react_1 = __webpack_require__(96540);
exports.TriggerableContainerContext = (0, react_1.createContext)(null);
//# sourceMappingURL=TriggerableContainerContext.js.map

/***/ }),

/***/ 31349:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.TriggerableContainerOverlay = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styles_1 = __webpack_require__(52108);
function TriggerableContainerOverlayComponent({ isOpen, hasOverlay, position, theme }) {
    if (!hasOverlay) {
        return null;
    }
    return (react_1.default.createElement(styles_1.Overlay, { "data-testid": "one-nav-overlay", isOpen: isOpen, blockStart: position.bottom, tabIndex: -1, className: theme }));
}
exports.TriggerableContainerOverlay = react_1.default.memo(TriggerableContainerOverlayComponent);
//# sourceMappingURL=TriggerableContainerOverlay.js.map

/***/ }),

/***/ 91560:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.TriggerableContainerOverlay = void 0;
var TriggerableContainerOverlay_1 = __webpack_require__(31349);
Object.defineProperty(exports, "TriggerableContainerOverlay", ({ enumerable: true, get: function () { return TriggerableContainerOverlay_1.TriggerableContainerOverlay; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 52108:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Overlay = void 0;
const styled_components_1 = __importDefault(__webpack_require__(92168));
const constants_1 = __webpack_require__(96472);
const AnimationStyleGenerator_1 = __webpack_require__(83158);
const design_1 = __webpack_require__(75163);
exports.Overlay = styled_components_1.default.div.withConfig({
    displayName: 'Overlay',
    shouldForwardProp: (prop) => !['isOpen', 'blockStart'].includes(prop)
}) `
  position: fixed;
  width: 100%;
  background: var(${design_1.Design.Color.SurfaceNavigationOverlay});
  height: ${({ blockStart }) => `calc(100% - ${blockStart}px)`};
  inset-block-start: ${({ blockStart }) => blockStart}px;
  inset-inline-start: 0;
  z-index: ${constants_1.ZINDEX_MAP.oneNav};
  opacity: ${({ isOpen }) => (isOpen ? 1 : 0)};
  visibility: ${({ isOpen }) => (isOpen ? 'visible' : 'hidden')};

  &.standard,
  .standard {
    ${({ theme }) => (0, design_1.shim)(theme, {
    [design_1.Design.Color.SurfaceNavigationOverlay]: 'colors.navigation.standard.overlay',
    [design_1.Design.Color.Surface]: 'colors.navigation.standard.background-primary',
    [design_1.Design.Color.BorderNavigation]: 'colors.navigation.standard.border'
})}
  }

  &.inverted,
  .inverted {
    ${({ theme }) => (0, design_1.shim)(theme, {
    [design_1.Design.Color.SurfaceNavigationOverlay]: 'colors.navigation.inverted.overlay',
    [design_1.Design.Color.Surface]: 'colors.navigation.inverted.background-primary',
    [design_1.Design.Color.BorderNavigation]: 'colors.navigation.inverted.border'
})}
  }

  ${({ isOpen }) => AnimationStyleGenerator_1.AnimationStyleGenerator.generateTransitionStyle({
    isOpen,
    enter: {
        animatedProperties: ['opacity', 'visibility'],
        easingFunctions: ['0,0,1,1', '0,0,0,0'],
        durations: ['300ms', '300ms']
    },
    exit: {
        animatedProperties: ['opacity', 'visibility'],
        easingFunctions: ['0,0,1,1', '0,0,0,0'],
        durations: ['200ms', '200ms'],
        delays: ['150ms', '150ms']
    }
})}
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 77589:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.TriggerableContainerStyleGenerator = void 0;
const AbstractStyleGenerator_1 = __webpack_require__(17054);
const types_1 = __webpack_require__(76066);
class TriggerableContainerStyleGenerator extends AbstractStyleGenerator_1.AbstractStyleGenerator {
    constructor(layout) {
        super();
        this.layout = layout;
    }
    getStyleForBreakpoint(breakpoint) {
        switch (breakpoint) {
            case types_1.Breakpoints.SM:
            case types_1.Breakpoints.MD:
            case types_1.Breakpoints.LG:
                return [
                    ['max-width', '400px'],
                    ['width', `calc(100% - 48px)`],
                    ['grid-template-columns', 'none'],
                    ['grid-column', 'none']
                ];
            case types_1.Breakpoints.XL:
                return [
                    ['max-width', '50%'],
                    ['width', '100%'],
                    ['grid-template-columns', 'none'],
                    ['grid-column', 'none']
                ];
            case types_1.Breakpoints.XXL:
            case types_1.Breakpoints.XXXL:
                return [
                    ['max-width', '640px'],
                    ['width', '100%'],
                    ['grid-template-columns', 'subgrid'],
                    this.layout === types_1.LayoutType.TRIGGERABLE_RIGHT
                        ? ['grid-column', '-5 / -1']
                        : ['grid-column', '1 / 5']
                ];
            default:
                return [
                    ['max-width', '400px'],
                    ['width', `calc(100% - 48px)`],
                    ['grid-template-columns', 'none'],
                    ['grid-column', 'none']
                ];
        }
    }
}
exports.TriggerableContainerStyleGenerator = TriggerableContainerStyleGenerator;
//# sourceMappingURL=TriggerableContainerStyleGenerator.js.map

/***/ }),

/***/ 67091:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.FOCUSABLE_SELECTOR = exports.TEXT_CLICKABLE_TARGET_ID = exports.DEFAULT_DOM_RECT = void 0;
/** Default value for DomRect in SSR. */
exports.DEFAULT_DOM_RECT = {
    x: 0,
    y: 0,
    width: 0,
    height: 0,
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    toJSON() {
        return null;
    }
};
/** Data attribute for text clickables with a triggerable container target. */
exports.TEXT_CLICKABLE_TARGET_ID = 'data-target-id';
/** Selector for the focusable elements. Elements that have a "defined" tab index and the tab index is not -1. */
exports.FOCUSABLE_SELECTOR = '[tabindex]:not([tabindex="-1"])';
//# sourceMappingURL=constants.js.map

/***/ }),

/***/ 5974:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.useCloseContainerOnOutsideClick = exports.useToggleContentScrollPrevention = exports.useTriggerableContainerTrigger = void 0;
const react_1 = __webpack_require__(96540);
const ContainerEventManager_1 = __webpack_require__(39909);
const constants_1 = __webpack_require__(67091);
function useTriggerableContainerTrigger(id) {
    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
    const [triggerElement, setTriggerElement] = (0, react_1.useState)(null);
    const [position, setPosition] = (0, react_1.useState)(constants_1.DEFAULT_DOM_RECT);
    (0, react_1.useEffect)(() => {
        const triggerHandler = (event) => {
            const { isOpen, triggerElement, position, containerId, keepOtherContainersOpen } = event.detail;
            if (containerId === id) {
                setIsOpen(isOpen);
                setTriggerElement(triggerElement ?? null);
                setPosition(position ?? constants_1.DEFAULT_DOM_RECT);
            }
            else if (isOpen && !keepOtherContainersOpen) {
                /** Will close the container if another container gets open. */
                setIsOpen(false);
                ContainerEventManager_1.ContainerEventManager.emit(ContainerEventManager_1.ContainerEventType.TRIGGER, {
                    containerId: id,
                    isOpen: false,
                    position
                });
            }
        };
        ContainerEventManager_1.ContainerEventManager.add(ContainerEventManager_1.ContainerEventType.TRIGGER, triggerHandler);
        return () => ContainerEventManager_1.ContainerEventManager.remove(ContainerEventManager_1.ContainerEventType.TRIGGER, triggerHandler);
    }, [id]);
    return {
        isOpen,
        triggerElement,
        position
    };
}
exports.useTriggerableContainerTrigger = useTriggerableContainerTrigger;
function useToggleContentScrollPrevention(isContainerOpen) {
    (0, react_1.useEffect)(() => toggleContentScrollPrevention(isContainerOpen), [isContainerOpen]);
}
exports.useToggleContentScrollPrevention = useToggleContentScrollPrevention;
function toggleContentScrollPrevention(isContainerOpen) {
    const preventDefault = (event) => {
        event.preventDefault();
    };
    if (isContainerOpen) {
        document.addEventListener('wheel', preventDefault, {
            passive: false
        });
        document.addEventListener('touchmove', preventDefault, {
            passive: false
        });
    }
    return () => {
        document.removeEventListener('wheel', preventDefault);
        document.removeEventListener('touchmove', preventDefault);
    };
}
function useCloseContainerOnOutsideClick(id, isContainerOpen, containerElement, position) {
    (0, react_1.useEffect)(() => closeContainerOnOutsideClick(id, isContainerOpen, containerElement, position), [containerElement, id, isContainerOpen, position]);
}
exports.useCloseContainerOnOutsideClick = useCloseContainerOnOutsideClick;
function closeContainerOnOutsideClick(id, isContainerOpen, containerElement, position) {
    if (isContainerOpen) {
        document.addEventListener('mousedown', (event) => handleOutsideContainerClick(event, id, containerElement, position));
    }
    return () => {
        document.removeEventListener('mousedown', (event) => handleOutsideContainerClick(event, id, containerElement, position));
    };
}
function handleOutsideContainerClick(event, id, containerElement, position) {
    const mouseEventTarget = event.target;
    const isClickInsideContainer = containerElement?.contains(mouseEventTarget);
    const textClickableTargetId = mouseEventTarget.getAttribute(constants_1.TEXT_CLICKABLE_TARGET_ID);
    const isTriggerSameContainer = textClickableTargetId === id;
    if (!isClickInsideContainer && !isTriggerSameContainer) {
        ContainerEventManager_1.ContainerEventManager.emit(ContainerEventManager_1.ContainerEventType.TRIGGER, {
            containerId: id,
            isOpen: false,
            position
        });
    }
}
//# sourceMappingURL=hooks.js.map

/***/ }),

/***/ 5026:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.TriggerableContainerContext = exports.TriggerableContainer = void 0;
var TriggerableContainer_1 = __webpack_require__(42599);
Object.defineProperty(exports, "TriggerableContainer", ({ enumerable: true, get: function () { return TriggerableContainer_1.TriggerableContainer; } }));
var TriggerableContainerContext_1 = __webpack_require__(46912);
Object.defineProperty(exports, "TriggerableContainerContext", ({ enumerable: true, get: function () { return TriggerableContainerContext_1.TriggerableContainerContext; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 10750:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.GridWrapper = exports.DrawerWrapper = exports.TriggerableContainerContent = void 0;
const styled_components_1 = __importStar(__webpack_require__(92168));
const AnimationStyleGenerator_1 = __webpack_require__(83158);
const TriggerableContainerStyleGenerator_1 = __webpack_require__(77589);
const constants_1 = __webpack_require__(96472);
const types_1 = __webpack_require__(76066);
const design_1 = __webpack_require__(75163);
exports.TriggerableContainerContent = styled_components_1.default.div.withConfig({
    displayName: 'TriggerableContainerContent'
}) `
  ${({ layout }) => getTriggerableContainerContentStyles(layout)}
`;
function getTriggerableContainerContentStyles(layout) {
    switch (layout) {
        case types_1.LayoutType.TRIGGERABLE_RIGHT:
        case types_1.LayoutType.TRIGGERABLE_LEFT:
            return TriggerableContainerContentVertical;
        case types_1.LayoutType.TRIGGERABLE_TOP:
            return TriggerableContainerContentTop;
        default:
            return '';
    }
}
const TriggerableContainerContentVertical = (0, styled_components_1.css) `
  position: fixed;
  width: 100%;
  height: ${({ position }) => `calc(100% - ${position.bottom}px)`};
  inset-block-start: ${({ position }) => position.bottom}px;
  inset-inline-start: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  cursor: pointer;
  z-index: ${constants_1.ZINDEX_MAP.oneNav + 1};
  visibility: hidden;
`;
const TriggerableContainerContentTop = (0, styled_components_1.css) `
  width: 100%;
  height: ${({ position }) => `${position.height}px`};
  position: fixed;
  top: ${({ position }) => `${position.top}px`};
  left: 0;
  z-index: ${constants_1.ZINDEX_MAP.oneNav + 1};

  visibility: ${({ isOpen }) => (isOpen ? 'visible' : 'hidden')};

  opacity: ${({ isOpen }) => (isOpen ? '1' : '0')};

  ${({ isOpen }) => AnimationStyleGenerator_1.AnimationStyleGenerator.generateTransitionStyle({
    isOpen,
    enter: {
        animatedProperties: ['opacity', 'visibility'],
        easingFunctions: ['0.37,0,0.63,1', '0,0,0,0'],
        durations: ['350ms', '350ms']
    },
    exit: {
        animatedProperties: ['opacity', 'visibility'],
        easingFunctions: ['0.37,0,0.63,1', '0,0,0,0'],
        durations: ['350ms', '350ms']
    }
})}
`;
exports.DrawerWrapper = styled_components_1.default.div.withConfig({
    displayName: 'DrawerWrapper'
}) `
  ${({ layout }) => getDrawerWrapperStyles(layout)}
`;
function getDrawerWrapperStyles(layout) {
    switch (layout) {
        case types_1.LayoutType.TRIGGERABLE_RIGHT:
        case types_1.LayoutType.TRIGGERABLE_LEFT:
            return DrawerWrapperVertical;
        case types_1.LayoutType.TRIGGERABLE_TOP:
            return DrawerWrapperTop;
        default:
            return '';
    }
}
const DrawerWrapperVertical = (0, styled_components_1.css) `
  cursor: default;
  display: grid;
  position: absolute;
  inset-block-start: 0;
  visibility: visible;

  ${({ layout }) => layout === types_1.LayoutType.TRIGGERABLE_LEFT && `inset-inline-start: 0;`}

  ${({ layout }) => layout === types_1.LayoutType.TRIGGERABLE_RIGHT && `inset-inline-end: 0;`}
  background-color: var(${design_1.Design.Color.Surface});

  ${({ layout }) => getBorderValue(layout)}

  height: 100%;
  overflow: hidden;

  @media (prefers-reduced-motion: no-preference) {
    transform: ${({ isOpen, layout }) => getTransformValue(isOpen, layout, '100%')};
  }
  @media (prefers-reduced-motion: reduce) {
    visibility: ${({ isOpen }) => (isOpen ? 'visible' : 'hidden')};
    opacity: ${({ isOpen }) => (isOpen ? '1' : '0')};
  }

  ${({ isOpen }) => AnimationStyleGenerator_1.AnimationStyleGenerator.generateTransitionStyle({
    isOpen,
    enter: {
        animatedProperties: ['transform'],
        easingFunctions: ['0.37,0,0.63,1'],
        durations: ['300ms']
    },
    exit: {
        animatedProperties: ['transform'],
        easingFunctions: ['0.65,0,0.35,1'],
        durations: ['300ms']
    },
    reducedMotionEnter: {
        animatedProperties: ['opacity', 'visibility'],
        easingFunctions: ['0.37,0,0.63,1', '0,0,0,0'],
        durations: ['350ms', '350ms']
    },
    reducedMotionExit: {
        animatedProperties: ['opacity', 'visibility'],
        easingFunctions: ['0.37,0,0.63,1', '0,0,0,0'],
        durations: ['350ms', '350ms']
    }
})}

  ${({ layout }) => {
    const styleGenerator = new TriggerableContainerStyleGenerator_1.TriggerableContainerStyleGenerator(layout);
    return styleGenerator.generateStyleForBreakpoints();
}}
`;
const DrawerWrapperTop = `
  height: 100%;
`;
exports.GridWrapper = styled_components_1.default.div.withConfig({
    displayName: 'GridWrapper'
}) `
  ${({ layout }) => getGridWrapperStyles(layout)}
`;
function getGridWrapperStyles(layout) {
    switch (layout) {
        case types_1.LayoutType.TRIGGERABLE_RIGHT:
        case types_1.LayoutType.TRIGGERABLE_LEFT:
            return GridWrapperVertical;
        case types_1.LayoutType.TRIGGERABLE_TOP:
            return GridWrapperTop;
        default:
            return '';
    }
}
const GridWrapperVertical = (0, styled_components_1.css) `
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  @media (prefers-reduced-motion: no-preference) {
    transform: ${({ isOpen, layout }) => getTransformValue(isOpen, layout, '5%')};
    opacity: ${({ isOpen }) => (isOpen ? '1' : '0')};
  }

  ${({ isOpen }) => AnimationStyleGenerator_1.AnimationStyleGenerator.generateTransitionStyle({
    isOpen,
    enter: {
        animatedProperties: ['opacity', 'transform'],
        easingFunctions: ['0,0,1,1', '0.37,0,0.63,1'],
        durations: ['400ms', '300ms'],
        delays: ['200ms', '150ms']
    },
    exit: {
        animatedProperties: ['opacity'],
        easingFunctions: ['0,0,1,1'],
        durations: ['300ms']
    }
})}
`;
const GridWrapperTop = (0, styled_components_1.css) `
  height: 100%;
`;
function getTransformValue(isOpen, layout, offset) {
    if (isOpen) {
        return 'translateX(0)';
    }
    switch (layout) {
        case types_1.LayoutType.TRIGGERABLE_RIGHT:
            return `translateX(${offset})`;
        case types_1.LayoutType.TRIGGERABLE_LEFT:
            return `translateX(-${offset})`;
        default:
            return 'translateX(0)';
    }
}
function getBorderValue(layout) {
    switch (layout) {
        case types_1.LayoutType.TRIGGERABLE_LEFT:
            return (0, styled_components_1.css) `
        border-right: 1px solid var(${design_1.Design.Color.BorderNavigation});
      `;
        case types_1.LayoutType.TRIGGERABLE_RIGHT:
            return (0, styled_components_1.css) `
        border-left: 1px solid var(${design_1.Design.Color.BorderNavigation});
      `;
        default:
            return '';
    }
}
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 23153:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const ReactModal2 = (__webpack_require__(48690)/* ["default"] */ .A);
const { useEffect } = __webpack_require__(96540);
const { Gateway } = __webpack_require__(10103);
const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const PaletteProvider = __webpack_require__(49235);
const translations = (__webpack_require__(76965)/* ["default"] */ .A);
const CloseIcon = __webpack_require__(76399);
const { UniversalDrawerButton, UniversalDrawerGlobalStyles, UniversalDrawerModalWrapper, UniversalModalShow, UniversalModalhide } = __webpack_require__(72899);
const { asThemedComponent } = __webpack_require__(20223);
const { asConfiguredComponent } = __webpack_require__(12892);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * Universal Drawer Component.
 *
 * @param {object} props - React props
 * @param {string} [props.className] - An optional additional className
 * @param {boolean} [props.showCloseButton] - Boolean to show close button or not
 * @param {boolean} props.hideDrawerScroll - optional to hide the scroll on universal drawer menu
 * @param {boolean} props.hideOnDesktop - Boolean to make universal drawer overlay not display on desktop
 * @param {boolean} props.hideOnMobile - Boolean to make universal drawer overlay not display on mobile
 * @param {Function} props.onClose - Required function to execute on button click
 * @param {string} [props.overlayColor] - universal drawer overlay color
 * @param {string} [props.registryName] - universal drawer modal registry name
 * @param {string} [props.theme] - Theme to be set in component config or passed in as SiteHeader theme "standard" | "inverted"
 * @param {object} [props.variations] - Variation properties used in rendering the component.
 * @param {ReactElement|string} [props.children] - content for feature.
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 *
 * @returns {ReactElement} <universal-drawer>
 */
const UniversalDrawer = ({ className, hideDrawerScroll = false, onClose, overlayColor = 'black', theme = 'standard', variations = {
    animation: 'slide-down',
    align: 'center',
    increasedTopPosition: false
}, children, showCloseButton = false, hideOnDesktop = false, hideOnMobile = false, isDrawerOpen = false, variationName, registryName }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'UniversalDrawer',
            variation: variationName
        });
    }, []); /* eslint-disable-line react-hooks/exhaustive-deps */
    const { formatMessage } = useIntl();
    const ModalClass = isDrawerOpen ? UniversalModalShow : UniversalModalhide;
    useEffect(() => {
        if (isDrawerOpen) {
            document
                .querySelector('body')
                .classList.add('body__universal_drawer--open');
            document
                .querySelector('html')
                .classList.add('html__universal_drawer--open');
        }
        else {
            document
                .querySelector('body')
                .classList.remove('body__universal_drawer--open');
            document
                .querySelector('html')
                .classList.remove('html__universal_drawer--open');
        }
    }, [isDrawerOpen]);
    const DrawerOverlayClasses = classnames('universal_drawer__overlay', 'universal_drawer__overlay--open', `universal_drawer--overlay-color-${overlayColor}`, `universal_drawer__overlay--align-${variations.align}`, {
        'universal_drawer__overlay--hide-on-desktop': hideOnDesktop,
        'universal_drawer__overlay--hide-on-mobile': hideOnMobile,
        'universal_drawer__overlay--increased-top-position': variations.increasedTopPosition
    });
    const DrawerClasses = classnames('universal_drawer', className, 'universal_drawer--open', 'universal_drawer--open-positioned', `universal_drawer--align-${variations.align}`);
    return (React.createElement(PaletteProvider, { palette: theme },
        React.createElement(Gateway, { into: registryName },
            React.createElement(ModalClass, null,
                React.createElement(UniversalDrawerModalWrapper, { "data-testid": "UniversalDrawerModalWrapper", hideDrawerScroll: hideDrawerScroll, animation: variations.animation, align: variations.align },
                    React.createElement(ReactModal2, { backdropClassName: DrawerOverlayClasses, modalClassName: DrawerClasses, onClose: onClose, closeOnEsc: true, closeOnBackdropClick: true },
                        showCloseButton && (React.createElement(UniversalDrawerButton, { isIconButton: true, ButtonIcon: CloseIcon, label: formatMessage(translations.buttonLabel), role: "button", onClickHandler: onClose })),
                        children))),
            React.createElement(UniversalDrawerGlobalStyles, null))));
};
UniversalDrawer.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    hideDrawerScroll: PropTypes.bool,
    hideOnDesktop: PropTypes.bool,
    hideOnMobile: PropTypes.bool,
    isDrawerOpen: PropTypes.bool,
    onClose: PropTypes.func.isRequired,
    overlayColor: PropTypes.oneOf(['black', 'white']),
    registryName: PropTypes.string,
    showCloseButton: PropTypes.bool,
    theme: PropTypes.string,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        animation: PropTypes.oneOf([
            'slide-down',
            'slide-right',
            'slide-left',
            'slide-up',
            'none'
        ]),
        align: PropTypes.oneOf(['center', 'left', 'right', 'bottom']),
        increasedTopPosition: PropTypes.bool
    })
};
UniversalDrawer.displayName = 'UniversalDrawer';
module.exports = asThemedComponent(asConfiguredComponent(UniversalDrawer, 'UniversalDrawer'));
//# sourceMappingURL=UniversalDrawer.js.map

/***/ }),

/***/ 32217:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(9895);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 72899:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, createGlobalStyle } = __webpack_require__(92168);
const Button = __webpack_require__(73730);
const { getColorToken, calculateSpacing, styledProperty, minScreen, getZIndex, maxScreen } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { getSiteNavigationMenuStyles } = __webpack_require__(56341);
const UniversalDrawerGlobalStyles = createGlobalStyle `
  .body__universal_drawer--open {
    overflow: hidden;

    .modal-container{
      display:block;
    }
  }

  .modal-container{
    display:none;
  }
`;
const UniversalDrawerModalWrapper = styled('div').withConfig({
    displayName: 'UniversalDrawerModalWrapper'
}) `
  .universal_drawer {
    transition: 'transform 100ms cubic-bezier(0.23, 1, 0.32, 1)';

    animation: fadeIn 0.3s;
    outline: none;

    padding: ${calculateSpacing(6)} 0 0;
    max-height: 100%;
    overflow: hidden;

    ${styledProperty('align', (align) => ['left', 'right', 'bottom'].includes(align), `
        ${minScreen(BREAKPOINTS.md)} {
          max-width: 50%;
        }
        .universal_drawer__social-icons {
          justify-content: flex-start;
        }
      `)}
  }

  .show-menu {
    display: block;
    @media (min-width: 100px) and (max-width: ${BREAKPOINTS.lg}) {
      height: 100vh;
    }
  }

  .hide-menu {
    display: none;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @-moz-keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @-o-keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @-ms-keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .universal_drawer.universal_drawer--open {
    left: 0;
    height: 100vh;
    ${minScreen(BREAKPOINTS.lg)} {
      outline: none;
      height: auto;
      max-height: 100vh;
      overflow: hidden;
      transition-delay: '.2s';
    }
    transition-delay: '.2s';
    overflow: hidden;

    .universal_drawer__content {
      transition: opacity 0.45s cubic-bezier(0.23, 1, 0.32, 1);
      opacity: 1;
    }

    ${styledProperty('align', 'right', `
        right: 0;
        left: unset;
        margin-left: auto;
      `)}
    ${styledProperty('align', 'bottom', `
        right: 0;
        max-width: 100%;
        position: absolute;
        bottom: 0;
      `)}
  }

  .universal_drawer.universal_drawer--open.universal_drawer--open-positioned {
    transform: translateZ(0);
    ${minScreen(BREAKPOINTS.lg)} {
      overflow-y: auto;
    }
  }

  .universal_drawer.universal_drawer--open.universal_drawer--open-positioned {
    transform: translateZ(0);
    ${({ hideDrawerScroll }) => !hideDrawerScroll &&
    `
        ${minScreen(BREAKPOINTS.lg)} {
          overflow-y: auto;
        }
    `}
  }

  .universal_drawer.universal_drawer--open.universal_drawer--filter-mobile {
    padding: 0;
    overflow-y: auto;
  }

  ${styledProperty('animation', 'slide-down', `
      .universal_drawer {
        transform: translate3d(0, -100%, 0);
      }

      .universal_drawer.universal_drawer--open {
        transition:  'transform 0.8s cubic-bezier(0.23, 1, 0.32, 1)';

        .universal_drawer__content {
          transition-delay: 0.8s;
        }
      }

      .universal_drawer.universal_drawer--closing {
        transform: translate3d(0, -100%, 0);
        transition: 'transform 0.6s cubic-bezier(0.23, 1, 0.32, 1)';
        transition-delay: 0.3s;
      }
    `)}

  ${styledProperty('animation', 'slide-right', `
      .universal_drawer {
        transform: translate3d(-100%, 0, 0);
      }

      .universal_drawer.universal_drawer--open {
        transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);

        .universal_drawer__content {
          transition-delay: 0.2s;
        }
      }

      .universal_drawer.universal_drawer--closing {
        transform: translate3d(-100%, 0, 0);
        transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1);
      }
    `)}

  ${styledProperty('animation', 'slide-left', `
      .universal_drawer {
        transform: translate3d(100%, 0, 0);
      }

      .universal_drawer.universal_drawer--open {
        transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);

        .universal_drawer__content {
          transition-delay: 0.2s;
        }
      }

      .universal_drawer.universal_drawer--closing {
        transform: translate3d(100%, 0, 0);
        transition: transform 0.25s cubic-bezier(0.4, 0, 1, 1);
      }
    `)}

  ${styledProperty('animation', 'slide-up', `
      .universal_drawer {
        height: 0;
        transform: translate3d(0, 100%, 0);
      }

      .universal_drawer.universal_drawer--open {
        height: auto;
        transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), 
                    height 0.8s cubic-bezier(0.23, 1, 0.32, 1);

        .universal_drawer__content {
          transition-delay: 0.2s;
        }
      }

      .universal_drawer.universal_drawer--closing {
        height: 0;
        transform: translate3d(0, 100%, 0);
        transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), 
                    height 0.8s cubic-bezier(0.23, 1, 0.32, 1);
        transition-delay: 0.2s;
      }
    `)}

  .universal_drawer.universal_drawer--closing {
    .universal_drawer__content {
      transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
      opacity: 0;
    }
  }

  .universal_drawer__overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    &.universal_drawer__overlay--open {
      transition: background-color 300ms;

      &.universal_drawer__overlay--increased-top-position {
        top: ${calculateSpacing(0)};

        .universal_drawer.universal_drawer--open.universal_drawer--open-positioned {
          width: calc(100% - ${calculateSpacing(10)});
        }

        ${minScreen(BREAKPOINTS.lg)} {
          .universal_drawer.universal_drawer--open.universal_drawer--open-positioned {
            width: auto;
          }
        }
      }

      &.universal_drawer--overlay-color-white {
        background-color: rgba(
          ${getColorToken('colors.interactive.base.white', {
    rgbOnly: true
})},
          0.7
        );
      }

      &.universal_drawer--overlay-color-black {
        background-color: rgba(
          ${getColorToken('colors.interactive.base.black', {
    rgbOnly: true
})},
          0.7
        );
      }
    }

    &.universal_drawer__overlay--closing {
      transition-delay: 0.4s;

      &.universal_drawer--overlay-color-white {
        background-color: rgba(
          ${getColorToken('colors.interactive.base.white', {
    rgbOnly: true
})},
          0
        );
      }

      &.universal_drawer--overlay-color-black {
        background-color: rgba(
          ${getColorToken('colors.interactive.base.black', {
    rgbOnly: true
})},
          0
        );
      }
    }

    &.universal_drawer__overlay--align-right {
      z-index: ${getZIndex('persistentTopLayer')};
    }

    &.universal_drawer__overlay--hide-on-desktop {
      display: block;

      ${minScreen(BREAKPOINTS.lg)} {
        display: none;
      }
    }

    &.universal_drawer__overlay--hide-on-mobile {
      display: block;

      ${maxScreen(`calc(${BREAKPOINTS.lg} - 1px)`)} {
        display: none;
      }
    }
  }
`;
const UniversalDrawerButton = styled(Button.Utility).withConfig({
    displayName: 'UniversalDrawerButton'
}) `
  ${({ theme }) => getSiteNavigationMenuStyles(theme, true)}

  position: absolute;
  top: ${calculateSpacing(1)};
  right: ${calculateSpacing(1)};
  width: ${calculateSpacing(4)};
  height: ${calculateSpacing(4)};

  .icon-close {
    padding: 8px;
  }
`;
const UniversalModalShow = styled('div').withConfig({
    displayName: 'UniversalModalShow'
}) `
  display: block;
`;
const UniversalModalhide = styled('div').withConfig({
    displayName: 'UniversalModalhide'
}) `
  display: none;
`;
module.exports = {
    UniversalDrawerGlobalStyles,
    UniversalDrawerModalWrapper,
    UniversalDrawerButton,
    UniversalModalhide,
    UniversalModalShow
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 76965:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    buttonLabel: {
        id: 'Drawer.ButtonLabel',
        defaultMessage: 'Close drawer',
        description: 'Drawer component button label'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 9895:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const UniversalDrawer = __webpack_require__(23153);
UniversalDrawer.SiteHeaderDrawer = asVariation(UniversalDrawer, 'SiteHeaderDrawer', {
    animation: 'none',
    align: 'center',
    increasedTopPosition: true
});
module.exports = UniversalDrawer;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 61057:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.doCloseModal = exports.doDisplayModal = exports.setUserNameModalDispatcher = void 0;
let dispatch;
const actionKey = 'userNameModalConfig';
const mergeKey = 'MERGE_KEY';
const setUserNameModalDispatcher = (dispatchIn) => {
    dispatch = dispatchIn;
};
exports.setUserNameModalDispatcher = setUserNameModalDispatcher;
// private method, please use doDisplayModal, doCloseModal and not showHideModal directly
const showHideModal = (isVisible, modalState = {}) => {
    if (!dispatch) {
        console.error('Component not found for UserNameModal actions');
        return;
    }
    dispatch({
        type: mergeKey,
        key: actionKey,
        value: {
            ...modalState,
            isVisible
        }
    });
};
const doDisplayModal = (modalState) => {
    showHideModal(true, modalState);
};
exports.doDisplayModal = doDisplayModal;
const doCloseModal = () => {
    showHideModal(false);
};
exports.doCloseModal = doCloseModal;
//# sourceMappingURL=UserNameModalActions.js.map

/***/ }),

/***/ 68345:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const React = __webpack_require__(96540);
const { useCallback, useState, useEffect, useRef } = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const debounce = __webpack_require__(38221);
const isEmpty = __webpack_require__(62193);
const sortBy = __webpack_require__(33031);
const throttle = __webpack_require__(7350);
const PropTypes = __webpack_require__(5556);
const compact = __webpack_require__(83673);
const getElDimensions = __webpack_require__(94409);
const scrollHelper = __webpack_require__(26890);
const Row = __webpack_require__(66657);
const VersoPlpCurated = __webpack_require__(18853);
const { BackdropWrapper, VersoCommerceCollectionCuratedWrapper, VersoPlpCuratedWrapper, PaginationModalWrapper, FilterRow, FilterWrapper, FilterComponentGrid, FilterComponentWrapper, FilterHr, LoaderWrapper } = __webpack_require__(13349);
const FilterComponent = __webpack_require__(78043);
const PaginationModal = __webpack_require__(49312);
const translations = (__webpack_require__(30951)/* ["default"] */ .A);
const { mapTypeCategoryAndValue, queryParamsForPagination } = __webpack_require__(67506);
const { useOneNavObserver } = __webpack_require__(20235);
const UN_FILTERABLE_PARAMS = ['sort', 'page', 'format', 'branch'];
/**
 * VersoCommerceCollectionCurated component
 *
 * @param {object} props - React props
 * @param {string} [props.affiliateDisclaimer] - Optional disclaimer text for affiliate products
 * @param {object}  [props.container] - container data
 * @param {Array}   [props.pimCollectionBundleLinks] - pim collection bundles url data
 * @param {boolean} [props.isMobileView] - set true if device is mobile
 * @param {boolean} [props.shouldHideFilterComponent] - set true if hide/remove filter component
 * @param {boolean} [props.isFirstProductListingContainer] - set true if first product listing container
 * @returns {ReactElement} <div>
 */
const VersoCommerceCollectionCurated = ({ container, pimCollectionBundleLinks, isMobileView, shouldHideFilterComponent, isFirstProductListingContainer, affiliateDisclaimer, containerIndex }) => {
    const { formatMessage } = useIntl();
    const formatFilterSortByLabels = (filterSortList) => {
        const filterSortValidList = filterSortList.filter(Boolean);
        if (!filterSortValidList.length)
            return [];
        const items = filterSortValidList.map((option) => {
            return translations[option.label]
                ? { ...option, label: formatMessage(translations[option.label]) }
                : option;
        });
        return items;
    };
    const [pimContainer, setPimContainer] = useState(container);
    const [paginationModalData, setPaginationModalData] = useState({});
    const [isLoading, setIsLoading] = useState(true);
    const [isFilterOpen, setIsFilterOpen] = useState(false);
    const versoCollectionWrapperRef = useRef(null);
    const filterComponentWrapperRef = useRef(null);
    const [heightDiff, setHeightDiff] = useState(0);
    const [initialFilterData, setInitialFilterData] = useState([]);
    const pimCollectionLinksAsCategory = pimCollectionBundleLinks &&
        pimCollectionBundleLinks.length && {
        label: 'StorefrontBundle',
        value: 'storefront',
        selectionType: 'single',
        paramType: 'path',
        counter: 0,
        children: sortBy(pimCollectionBundleLinks, 'label')
    };
    const ADDITIONAL_PARAMS_PAGINATION = ['status', 'type', 'color', 'brand'];
    const [isScrolled, setScrolledState] = useState(false);
    const [lastScrollPosition, setLastScrollPositionState] = useState(0);
    const [pimFilterSortPaginationData, setPimFilterSortPaginationData] = useState({
        ...container.pimFilterSortPaginationData,
        filterData: formatFilterSortByLabels([
            pimCollectionLinksAsCategory,
            ...container.pimFilterSortPaginationData.filterData
        ]),
        sortData: formatFilterSortByLabels(container.pimFilterSortPaginationData.sortData),
        optionsSelected: false
    });
    if (initialFilterData.length === 0) {
        setInitialFilterData(formatFilterSortByLabels([
            pimCollectionLinksAsCategory,
            ...container.pimFilterSortPaginationData.filterData
        ]));
    }
    const selectChildren = (children, toBeSelectedList = []) => {
        if (toBeSelectedList.length) {
            const childrenListUpdatedSelection = children.map((child) => {
                return toBeSelectedList.includes(child.value)
                    ? { ...child, isSelected: true }
                    : child;
            });
            return childrenListUpdatedSelection;
        }
        return children;
    };
    const selectChildrenCount = (filterType, toBeSelectedList = []) => {
        if (toBeSelectedList.length && filterType.selectionType === 'multiple') {
            const updatedFilterChildCounter = toBeSelectedList?.length || 0;
            return updatedFilterChildCounter;
        }
        return 0;
    };
    useOneNavObserver(filterComponentWrapperRef);
    useEffect(() => {
        const collectionWrapperDimension = versoCollectionWrapperRef.current?.getBoundingClientRect();
        const el = document.getElementById('app-root');
        const { bottom: documentBottom } = getElDimensions(el);
        setHeightDiff(documentBottom - collectionWrapperDimension.bottom);
    }, []);
    useEffect(() => {
        const scrollHandler = () => {
            const { offsetTop } = filterComponentWrapperRef.current;
            if (window && window.document) {
                const mainNavigationHeader = window.document.querySelector('header[class*="StackedNavigationHeader-"]:first-of-type');
                if (offsetTop <= 0) {
                    setTimeout(() => {
                        mainNavigationHeader.classList?.remove('stacked-navigation--hidden-shadow');
                    }, 100);
                }
                else {
                    setTimeout(() => {
                        mainNavigationHeader.classList?.add('stacked-navigation--hidden-shadow');
                    }, 100);
                }
            }
        };
        window.addEventListener('scroll', scrollHandler);
        return () => {
            window.removeEventListener('scroll', scrollHandler);
        };
    }, []);
    useEffect(() => {
        const updateFilterSortDataAsPerUrl = (filterSortDataNew, pimCollectionUrlSlug, sortQueryParam, search) => {
            const searchQueryParams = !isEmpty(search) ? search.replace('?', '') : '';
            const { filterData, sortData } = filterSortDataNew;
            const filtersFromUrlMap = new Map();
            if (pimCollectionUrlSlug.length) {
                filtersFromUrlMap.set('storefront', [pimCollectionUrlSlug]);
            }
            if (searchQueryParams.length) {
                const partials = searchQueryParams.split('&');
                partials.forEach((item) => {
                    const [key, value] = item.split('=');
                    //  to handle pagination encoded multi params separated by space
                    const checkAndValueReplaceSpace = decodeURIComponent(value).replace(/ /g, '+');
                    if (key === 'category' && filterData.length) {
                        const categoryDetails = mapTypeCategoryAndValue({ key: 'type', value: checkAndValueReplaceSpace.split('+') }, filterData);
                        if (categoryDetails.key && categoryDetails.value) {
                            filtersFromUrlMap.set(categoryDetails.key, categoryDetails.value);
                        }
                    }
                    else if (!UN_FILTERABLE_PARAMS.includes(key)) {
                        filtersFromUrlMap.set(key, checkAndValueReplaceSpace.split('+'));
                    }
                });
            }
            const updatedFilterData = filterData.map((filterType) => {
                return {
                    ...filterType,
                    counter: selectChildrenCount(filterType, filtersFromUrlMap.get(filterType.value)),
                    children: selectChildren(filterType.children, filtersFromUrlMap.get(filterType.value))
                };
            });
            const updatedSortData = !isEmpty(sortQueryParam)
                ? sortData.map((sortOption) => {
                    return {
                        ...sortOption,
                        default: sortOption.value === sortQueryParam
                    };
                })
                : sortData;
            return { filterData: updatedFilterData, sortData: updatedSortData };
        };
        if ( true &&
            !pimFilterSortPaginationData.optionsSelected) {
            const { pathname, search } = window.location;
            const pathPartials = pathname.split('/');
            pathPartials.splice(0, 1);
            const pimCollectionUrlSlug = pathPartials.join('/');
            const { sort = '', queryString } = queryParamsForPagination(search);
            setPaginationModalData({ query: '', sort });
            const updatedFilterSortDataAsPerUrl = updateFilterSortDataAsPerUrl(pimFilterSortPaginationData, pimCollectionUrlSlug, sort, queryString);
            setPimFilterSortPaginationData((prev) => {
                return {
                    ...prev,
                    ...updatedFilterSortDataAsPerUrl,
                    optionsSelected: true
                };
            });
            setIsLoading(false);
        }
    }, [pimFilterSortPaginationData]);
    const getActiveIndexInFilterData = (activeFilter, filterData) => {
        const activeFilterIndex = filterData.findIndex((filterOption) => filterOption.value === activeFilter.value);
        return activeFilterIndex;
    };
    /**
     * Fetch filtered data
     *
     * @param {Array} activeFilter - currently selected filter
     * @returns {undefined} undefined
     */
    const fetchPimCollectionBasedOnFilterSortSelection = debounce(({ activeFilter, filterData: currentFilterData, filterSelectionPriority }) => {
        const { pathname, search, origin } = window.location;
        setIsLoading(true);
        const searchPart = isEmpty(search)
            ? `?format=json`
            : `${search}&format=json`;
        const updatedUrl = `${origin}${pathname}${search}`;
        window.history.replaceState(null, '', updatedUrl);
        fetch(`${pathname}${searchPart}`)
            .then((response) => response.json())
            .then(({ bundle }) => {
            const pimContainer = bundle.containers.find((c) => c.template === 'verso-pim-collection');
            const { sort = '' } = queryParamsForPagination(search);
            setPaginationModalData({ query: '', sort });
            setPimContainer(pimContainer);
            const { filterData: newPimFilterData } = pimContainer.pimFilterSortPaginationData;
            let updatedFilterData = currentFilterData.map((filter) => {
                const checkPriority = filterSelectionPriority[filter.value] || 10;
                const lastActionTabPriority = filterSelectionPriority.lastActionTabPriority || false;
                if (checkPriority === 1) {
                    return initialFilterData.find((item) => item.value === filter.value);
                }
                else if (lastActionTabPriority &&
                    checkPriority <= lastActionTabPriority) {
                    return filter;
                }
                return newPimFilterData.find((newFilter) => newFilter.value === filter.value);
            });
            updatedFilterData = compact(updatedFilterData);
            const filterDataByPriority = newPimFilterData.map((newFilter) => {
                const existingFilter = updatedFilterData.find((currItem) => currItem.value === newFilter.value);
                return existingFilter || newFilter;
            });
            if (!isEmpty(activeFilter)) {
                const currentActiveFilterIndex = getActiveIndexInFilterData(activeFilter, currentFilterData);
                const filterDataByPriorityIndex = getActiveIndexInFilterData(activeFilter, filterDataByPriority);
                const removeActiveInNewIndex = getActiveIndexInFilterData(activeFilter, filterDataByPriority);
                const activeFilterData = currentFilterData[currentActiveFilterIndex];
                activeFilterData.children =
                    filterDataByPriority[filterDataByPriorityIndex]?.children || [];
                if (removeActiveInNewIndex > -1) {
                    filterDataByPriority.splice(removeActiveInNewIndex, 1, activeFilterData);
                }
            }
            setPimFilterSortPaginationData({
                ...pimContainer.pimFilterSortPaginationData,
                filterData: formatFilterSortByLabels([
                    pimCollectionLinksAsCategory,
                    ...filterDataByPriority
                ]),
                sortData: pimFilterSortPaginationData.sortData,
                optionsSelected: false
            });
            setIsLoading(false);
            const firstUPC = window.document &&
                window.document.querySelector('div.verso-plp-curated-wrapper div[class*="UnifiedProductCardWrapper-"]:first-of-type');
            if (firstUPC) {
                setTimeout(() => {
                    firstUPC.scrollIntoView({
                        behavior: 'smooth',
                        block: 'end'
                    });
                }, 1);
            }
        })
            .catch((error) => {
            console.warn(error);
            setIsLoading(false);
        });
    }, 1000);
    const updatePimFilterSortPaginationData = ({ pathChanged, filterData, activeFilter = null, filterSelectionPriority = {} }) => {
        if (pathChanged) {
            window.location.reload();
        }
        fetchPimCollectionBasedOnFilterSortSelection({
            filterData,
            activeFilter,
            filterSelectionPriority
        });
    };
    const sendFilterOpenStatusHandler = (IsFilterOpenFromChild) => {
        if (isMobileView) {
            if (!IsFilterOpenFromChild) {
                setTimeout(() => {
                    window && window.scrollTo(0, 0);
                }, 1);
            }
        }
        else {
            setIsFilterOpen(IsFilterOpenFromChild);
        }
    };
    const handleScroll = useCallback(() => {
        const scrollTop = window.pageYOffset;
        if (scrollHelper.shouldUpdateScroll(isScrolled, scrollTop, lastScrollPosition, 'delta')) {
            setScrolledState(scrollTop - lastScrollPosition > 0);
            setLastScrollPositionState(scrollTop);
        }
    }, [isScrolled, lastScrollPosition]);
    useEffect(() => {
        const throttledScroll = throttle(handleScroll, 150);
        window.addEventListener('scroll', throttledScroll);
        return () => {
            window.removeEventListener('scroll', throttledScroll);
        };
    }, [handleScroll]);
    return (React.createElement(VersoCommerceCollectionCuratedWrapper, { ref: versoCollectionWrapperRef },
        !shouldHideFilterComponent && (React.createElement(FilterComponentWrapper, { isScrolled: isScrolled, isMobileView: isMobileView, ref: filterComponentWrapperRef },
            React.createElement(FilterRow, null,
                React.createElement(FilterHr, { isMobileView: isMobileView }),
                React.createElement(FilterComponentGrid, null,
                    React.createElement(FilterWrapper, { isMobileView: isMobileView },
                        React.createElement(FilterComponent, { theme: "standard", filterSortData: pimFilterSortPaginationData, isMobileView: isMobileView, totalItems: pimFilterSortPaginationData.pagination.totalResults, showTotalItems: true, isCentered: false, hasBorders: false, updateParentDataHandler: updatePimFilterSortPaginationData, className: "", isContentLoading: isLoading, sendFilterOpenStatus: sendFilterOpenStatusHandler })))))),
        React.createElement(Row, null, !isMobileView && isFilterOpen && (React.createElement(BackdropWrapper, { heightDiff: heightDiff }, isLoading && React.createElement(LoaderWrapper, null)))),
        React.createElement(Row, null,
            React.createElement(VersoPlpCuratedWrapper, { className: classnames('verso-plp-curated-wrapper') },
                React.createElement(VersoPlpCurated, { ...pimContainer, isFirstProductListingContainer: isFirstProductListingContainer, affiliateDisclaimer: affiliateDisclaimer, containerIndex: containerIndex }))),
        React.createElement(Row, null,
            React.createElement(PaginationModalWrapper, null, pimFilterSortPaginationData.pagination && (React.createElement(PaginationModal, { ...paginationModalData, ...pimFilterSortPaginationData.pagination, additionalParams: ADDITIONAL_PARAMS_PAGINATION }))))));
};
VersoCommerceCollectionCurated.propTypes = {
    affiliateDisclaimer: PropTypes.string,
    container: PropTypes.object,
    containerIndex: PropTypes.number,
    isFirstProductListingContainer: PropTypes.bool,
    isMobileView: PropTypes.bool,
    pimCollectionBundleLinks: PropTypes.array,
    shouldHideFilterComponent: PropTypes.bool
};
module.exports = VersoCommerceCollectionCurated;
//# sourceMappingURL=VersoCommerceCollectionCurated.js.map

/***/ }),

/***/ 20235:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.useOneNavObserver = void 0;
const react_1 = __webpack_require__(96540);
/** Fix sticky position issue of this component when use OneNav with the help of styles defined here: src/components/compositions/one-nav/components/OneNav/style.ts */
function useOneNavObserver(filterComponentWrapperRef) {
    (0, react_1.useEffect)(() => {
        if (filterComponentWrapperRef.current == null) {
            return;
        }
        const oneNavHeader = document.querySelector('.onenav-site-navigation header');
        if (oneNavHeader == null) {
            return;
        }
        const resizeObserver = new ResizeObserver((entries) => {
            const { height } = entries[0].contentRect;
            setComponentStyles(filterComponentWrapperRef, height);
        });
        resizeObserver.observe(oneNavHeader);
        setComponentStyles(filterComponentWrapperRef, oneNavHeader.getBoundingClientRect().height);
        // eslint-disable-next-line consistent-return
        return () => {
            resizeObserver.disconnect();
        };
    }, [filterComponentWrapperRef]);
}
exports.useOneNavObserver = useOneNavObserver;
function setComponentStyles(filterComponentWrapperRef, height) {
    filterComponentWrapperRef.current.style.position = 'sticky';
    filterComponentWrapperRef.current.style.setProperty('top', `${height}px`, 'important');
}
//# sourceMappingURL=hooks.js.map

/***/ }),

/***/ 91323:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const VersoCommerceCollectionCurated = __webpack_require__(68345);
module.exports = asConfiguredComponent(VersoCommerceCollectionCurated, 'VersoCommerceCollectionCurated');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 13349:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css, keyframes } = __webpack_require__(92168);
const { calculateSpacing, getColorToken, minMaxScreen, getTypographyStyles, getColorStyles } = __webpack_require__(26865);
const { BaseWrap, BaseText } = __webpack_require__(76955);
const { BREAKPOINTS } = __webpack_require__(96472);
const Grid = __webpack_require__(86659);
const Row = __webpack_require__(66657);
const loaders = __webpack_require__(62930);
const { GridItem } = __webpack_require__(40653);
const StickyFilterComponentWrapperSlideDown = keyframes `
  0% {
    top: ${calculateSpacing(8)};
  }

  100% {
    top: ${calculateSpacing(20)};
  }
`;
const StickyFilterComponentWrapperSlideUp = keyframes `
  0% {
    top: ${calculateSpacing(20)};
  }

  100% {
    top: ${calculateSpacing(8)};
  }
`;
const VersoCommerceCollectionCuratedWrapper = styled.div.withConfig({
    displayName: 'VersoCommerceCollectionCuratedWrapper'
}) `
  ${({ hasPaddingTop }) => hasPaddingTop && `padding-top: ${calculateSpacing(4)}`}
  position: relative;
  height: 100%;
`;
const PaginationModalWrapper = styled.div.withConfig({
    displayName: 'PaginationModalWrapper'
}) `
  display: flex;
  justify-content: center;
  padding-top: ${calculateSpacing(8)};
`;
const VersoPlpCuratedWrapper = styled(BaseWrap).withConfig({
    displayName: 'VersoPlpCuratedWrapper'
}) ``;
const FilterWrapper = styled(BaseWrap).withConfig({
    displayName: 'FilterWrapper'
}) `
  ${(isMobileView) => isMobileView &&
    `
  && {
    padding-right: ${calculateSpacing(2)};
    padding-left: ${calculateSpacing(2)};
  }
  `}
  padding-right: ${calculateSpacing(4)};
  padding-left: ${calculateSpacing(4)};
  ${minMaxScreen(0, BREAKPOINTS.md)} {
    padding-right: ${calculateSpacing(3)};
    padding-left: ${calculateSpacing(3)};
  }
`;
const FilterComponentGrid = styled(Grid.NoMargins).withConfig({
    displayName: 'FilterComponentGrid'
}) `
  > ${GridItem} {
    grid-column: 1 / 9;

    @media (min-width: ${BREAKPOINTS.md}) {
      grid-column: 1 / -1;
    }
  }
`;
const FilterRow = styled(Row).withConfig({
    displayName: 'FilterRow'
}) ``;
const FilterHr = styled.hr.withConfig({
    displayName: 'FilterHr'
}) `
  && {
    display: block;
    position: relative;
    top: ${({ isMobileView }) => isMobileView ? ` ${calculateSpacing(6)};` : ` ${calculateSpacing(6.1)};`};
    margin: 0;
    border: 0;
    border-bottom: 1px solid ${getColorToken('colors.foundation.menu.dividers')};
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 0;
    height: 0;
  }
`;
const FilterComponentWrapper = styled.div.withConfig({
    displayName: 'FilterComponentWrapper'
}) `
  position: sticky;

  top: ${({ isMobileView }) => isMobileView && ` ${calculateSpacing(6.8)};`};
  z-index: ${({ isMobileView }) => (isMobileView ? 11 : 399)};
  background: rgba(255, 255, 255, 1);
  width: 100%;
  ${({ isScrolled, isMobileView }) => {
    if (!isMobileView) {
        return css `
        ${isScrolled
            ? css `
              animation: ${StickyFilterComponentWrapperSlideUp} 0.2s
                cubic-bezier(0, 0.59, 0.32, 1) both;
            `
            : css `
              animation: ${StickyFilterComponentWrapperSlideDown} 0.8s
                cubic-bezier(0, 0.59, 0.32, 1) both;
            `}
      `;
    }
    return ``;
}}
`;
const FilterTotalItemWrapper = styled(BaseText).withConfig({
    displayName: 'FilterTotalItemWrapper'
}) `
  display: flex;
  justify-content: center;
  padding: ${calculateSpacing(3)} 0 ${calculateSpacing(3)} 0;
  ${({ theme, typeToken }) => getTypographyStyles(theme, typeToken)}
  ${({ theme, colorToken }) => getColorStyles(theme, 'color', colorToken)};
`;
const BackdropWrapper = styled.div.withConfig({
    displayName: 'BackdropWrapper'
}) `
  position: absolute;
  transition: background-color 750ms;
  opacity: 1;
  z-index: 9;
  background-color: rgba(
    ${getColorToken('colors.background.black', { rgbOnly: true })},
    0.4
  );
  padding-top: ${calculateSpacing(50)};
  width: 100%;
  height: ${({ heightDiff }) => heightDiff ? `calc( 100% + ${heightDiff}px )` : `100%`};
  text-align: center;
  ${({ heightDiff }) => heightDiff ? `height: calc(100% + ${heightDiff}px);` : `height: 100%;`}
`;
const LoaderWrapper = styled(loaders.Circle).withConfig({
    displayName: 'LoaderWrapper'
}) `
  position: fixed;
  top: 50%;
  left: 46%;
`;
FilterTotalItemWrapper.defaultProps = {
    as: 'span',
    colorToken: 'colors.interactive.base.black',
    typeToken: 'typography.definitions.globalEditorial.tags'
};
module.exports = {
    VersoCommerceCollectionCuratedWrapper,
    VersoPlpCuratedWrapper,
    PaginationModalWrapper,
    FilterRow,
    FilterWrapper,
    FilterComponentGrid,
    FilterTotalItemWrapper,
    BackdropWrapper,
    LoaderWrapper,
    FilterComponentWrapper,
    FilterHr
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 30951:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    Category: {
        id: 'VersoCommerceCollectionCurated.FilterBy.Category',
        defaultMessage: 'Type',
        description: 'Text for diplaying filter type label Type'
    },
    Brand: {
        id: 'VersoCommerceCollectionCurated.FilterBy.Brand',
        defaultMessage: 'Designer',
        description: 'Text for diplaying filter type label Brand'
    },
    Size: {
        id: 'VersoCommerceCollectionCurated.FilterBy.Size',
        defaultMessage: 'Size',
        description: 'Text for diplaying filter type label Size'
    },
    StorefrontBundle: {
        id: 'VersoCommerceCollectionCurated.FilterBy.StorefrontBundle',
        defaultMessage: 'Category',
        description: 'Text for diplaying filter type label StorefrontBundle'
    },
    Color: {
        id: 'VersoCommerceCollectionCurated.FilterBy.Color',
        defaultMessage: 'Color',
        description: 'Text for diplaying filter type label Color'
    },
    Type: {
        id: 'VersoCommerceCollectionCurated.FilterBy.Type',
        defaultMessage: 'Type',
        description: 'Text for diplaying filter type label Type'
    },
    Popular: {
        id: 'VersoCommerceCollectionCurated.SortBy.Popular',
        defaultMessage: 'Most Wanted',
        description: 'Text for diplaying sort by option label Popular'
    },
    Featured: {
        id: 'VersoCommerceCollectionCurated.SortBy.Featured',
        defaultMessage: 'Featured',
        description: 'Text for diplaying sort by option label Featured'
    },
    items: {
        id: 'VersoCommerceCollectionCurated.Items',
        defaultMessage: 'Items',
        description: 'Suffix text to append to the total count'
    },
    'Most Recent': {
        id: 'VersoCommerceCollectionCurated.SortBy.MostRecent',
        defaultMessage: 'New Arrivals',
        description: 'Text for diplaying sort by option label Most Recent'
    },
    'Lowest Price': {
        id: 'VersoCommerceCollectionCurated.SortBy.LowestPrice',
        defaultMessage: 'Lowest Price',
        description: 'Text for diplaying sort by option label Lowest Price'
    },
    'Highest Price': {
        id: 'VersoCommerceCollectionCurated.SortBy.HighestPrice',
        defaultMessage: 'Highest Price',
        description: 'Text for diplaying sort by option label Highest Price'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 27469:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { useIntl } = __webpack_require__(46984);
const includes = __webpack_require__(79859);
const { CarouselRow, FeaturesRow } = __webpack_require__(20659);
const { TrackComponentChannel } = __webpack_require__(78788);
const translations = (__webpack_require__(83253)/* ["default"] */ .A);
const { default: Carousel } = __webpack_require__(36061);
const SummaryItem = __webpack_require__(74992);
const SummaryCollageEight = __webpack_require__(84446);
const SummaryCollageFive = __webpack_require__(7939);
const SummaryCollageFour = __webpack_require__(199);
const SummaryCollageNine = __webpack_require__(74563);
const SummaryCollageTweleve = __webpack_require__(99383);
const SummaryCollageOne = __webpack_require__(82597);
const SummaryCollageSeven = __webpack_require__(99544);
const SummaryCollageSix = __webpack_require__(92125);
const SummaryCollageThree = __webpack_require__(66341);
const SummaryCollectionGrid = __webpack_require__(91706);
const SummaryCollectionRow = __webpack_require__(35862);
const { venueTypes } = __webpack_require__(14515);
const { componentTracking } = __webpack_require__(90090);
const stripHTML = (string) => string.replace(/<[^>]*>/g, '');
const VisualStoryCarousel = __webpack_require__(92229);
const { isMobileViewport } = __webpack_require__(55659);
const featuresCollageCompositionMap = {};
featuresCollageCompositionMap[1] = SummaryCollageOne;
featuresCollageCompositionMap[3] = SummaryCollageThree;
featuresCollageCompositionMap[4] = SummaryCollageFour;
featuresCollageCompositionMap[5] = SummaryCollageFive;
featuresCollageCompositionMap[6] = SummaryCollageSix;
featuresCollageCompositionMap[7] = SummaryCollageSeven;
featuresCollageCompositionMap[8] = SummaryCollageEight;
featuresCollageCompositionMap[9] = SummaryCollageNine;
featuresCollageCompositionMap[12] = SummaryCollageTweleve;
const featuresCollectionGridCompositionMap = {};
featuresCollectionGridCompositionMap[2] = SummaryCollectionGrid.TwoColumns;
featuresCollectionGridCompositionMap[4] = SummaryCollectionGrid.FourColumns;
featuresCollectionGridCompositionMap[6] = SummaryCollectionGrid.FourColumns;
featuresCollectionGridCompositionMap[8] = SummaryCollectionGrid.FourColumns;
const layoutMap = {
    Carousel,
    Bubbles: Carousel,
    CollageOne: SummaryCollageOne,
    CollageThree: SummaryCollageThree,
    CollageFour: SummaryCollageFour,
    CollageFive: SummaryCollageFive,
    CollageFiveRowsWithDekAndItemsBelow: SummaryCollageFive.RowsWithDekAndItemsBelow,
    CollageSix: SummaryCollageSix,
    CollageSeven: SummaryCollageSeven,
    CollageEight: SummaryCollageEight,
    CollageNine: SummaryCollageNine,
    CollageTweleve: SummaryCollageTweleve,
    GridTwoColumns: SummaryCollectionGrid.TwoColumns,
    GridTwoColumnsWithAd: SummaryCollectionGrid.TwoColumnsWithAdSection,
    GridThreeColumns: SummaryCollectionGrid.ThreeColumns,
    GridFourColumns: SummaryCollectionGrid.FourColumns,
    SummaryCollectionRow
};
/**
 * Return composition associated with the container's items count
 *
 * @param {object} options - Configuration
 * @param {Array} options.items - items in a bundle container
 * @param {boolean} shouldPreferCollectionGrid - Object containing tenant feature flags
 * @param {boolean} shouldUseAdInCollectionGrid - Object containing tenant feature flags
 * @param {string} layout - layout to use for featureComposition
 * @param {string} summaryCollageVariation - summary collage variation
 * @returns {object} Wrapped React Component
 */
const getFeaturesComposition = ({ items = [] }, shouldPreferCollectionGrid, shouldUseAdInCollectionGrid, layout, summaryCollageVariation) => {
    if (layout && layoutMap[layout]) {
        return layoutMap[layout];
    }
    const numItems = items.length;
    if (shouldUseAdInCollectionGrid && numItems !== 0 && numItems % 3 === 0) {
        return SummaryCollectionGrid.ThreeColumnsWithAdSection;
    }
    else if (shouldPreferCollectionGrid) {
        return (featuresCollectionGridCompositionMap[numItems] ||
            featuresCollageCompositionMap[numItems] ||
            (numItems && featuresCollageCompositionMap[9]) ||
            null);
    }
    return (featuresCollageCompositionMap[numItems]?.[summaryCollageVariation] ||
        featuresCollageCompositionMap[numItems] ||
        featuresCollectionGridCompositionMap[numItems] ||
        (numItems && featuresCollageCompositionMap[9]) ||
        null);
};
/**
 * Render a list of SummaryCollage items.
 *
 * @param {object} props - React props
 * @param {string} [props.backgroundColor] - optional string value to supply to Row for background color customization
 * @param {string} [props.carouselContentAlign] - alignment of carousel text
 * @param {string} [props.carouselSummaryItemVariation] - summaryItem variation to use on the carousel layout
 * @param {string} [props.carouselItemProps] - Optional carousel Item Props
 * @param {object} [props.container] - A list of SummaryCollage items
 * @param {string} [props.contentTypesForViewAll] - Array variable that contains the type of contents for which read more to be applied
 * @param {Array} [props.enableComponentsWithBackgroundColor] - array to enter change the layout background
 * @param {boolean} [props.hasBorderOnMobileAndTabletOnly] - Optional show border on Mobile and Tablet view only
 * @param {boolean} [props.hasBottomBorderOnLargeScreen] - Optional show border bottom on large screens (1024+)
 * @param {boolean} [props.hasBottomBorderLargeMargin] - Optional show larger bottom margin on border
 * @param {boolean} [props.hasCarouselTopMargin] - Optional prop to show top margin for carousel
 * @param {boolean} [props.hasCarouselSectionTitle] - Optional prop to show/hide carousel section title
 * @param {boolean} [props.hasUnderlineHed] - Optional show underline below hed
 * @param {boolean} [props.hideStrapline] - Optional show Carousel dek
 * @param {boolean} [props.hasControls] - Optional show controls of carousel
 * @param {boolean} [props.shouldUseCustomMargin] - Optional to add custom margin
 * @param {boolean} [props.hasIncreasedPaddingTop] - Optional. Set to true to increase top row padding
 * @param {boolean} [props.hasIncreasedVerticalPadding] - Optional.  Set to true to increase top and bottom row padding
 * @param {boolean} [props.hasIncreasedVerticalPaddingTop] - Optional.  Set to true to increase top row padding
 * @param {boolean} [props.shouldDisableCarouselTitleLetterSpacing] - Optional.  Set to true removed letter spacing from carousel title
 * @param {string} [props.hasMinimalVerticalSpacing] - Optional prop for tighter spacing between verso feature rows on homepage
 * @param {string} [props.hasModerateSpacing] - Optional prop for moderate spacing
 * @param {boolean} [props.hasReducedBottomMargin] - Optional. Set to `true` for reduced margin bottom
 * @param {boolean} [props.hasReducedMargin] - Optional. Set to `true` for no margin spacing
 * @param {boolean} [props.hideDangerousDek] - Optional flag to show or hide dek
 * @param {boolean} [props.hideRubricItemSummary] - Optional flag to show or hide rubric.
 * @param {boolean} [props.isCarouselFullBleed] - Optional. Used to span carousel in full width of page irrespective of viewport
 * @param {boolean} [props.isCarouselFullBleedRight] - Optional. Used to ignore margin/padding-right on carousel irrespective of viewport
 * @param {boolean} [props.isCarouselBodyFullBleedRight] - Optional. Used to ignore margin/padding-right on carousel irrespective of viewport for AD Pro Directory
 * @param {boolean} [props.isDestinationBundle] - Optional flag for when VersFeatures is used in destination type pages
 * @param {string} [props.lowestHierarchy] - Optional prop to include lowest location from hierarchy
 * @param {boolean} [props.shouldOverrideTypeToken] - Optional prop can be used for applying brand specefic Typography
 * @param {boolean} [props.shouldHideBylines] - Optional flag to render byline.
 * @param {boolean} [props.shouldHideCarouselBylines] - Optional flag to hide byline on carousel.
 * @param {boolean} [props.shouldPreferCollectionGrid] - Feature flag to prefer Collection Grid.
 * @param {boolean} [props.shouldTreatTabletLikeMobile] - Use mobile layout fir tablet
 * @param {boolean} [props.shouldUseAdInCollectionGrid] - Use ad for last item in Collection Grid.
 * @param {boolean} [props.shouldUseMediumBreakpoint] - Optional setting to use medium breakpoint for image srcSet
 * @param {string} [props.summaryCollageVariation] - summary collage variation
 * @param {string} [props.summaryItemVariation] - Optional summary item variation to displan in summary collage
 * @param {object} [props.viewAllButton] - optional object containing slug and content type for view all button
 * @param {boolean} [props.hasNoTopBottomMarginOnMobile] - optional to show or reduce margin on mobile view
 * @param {boolean} [props.hasFullBleedCarouselWithPaddingWrapperOnMobile] - optional to remove left & right padding and add full bleed on carousel on mobile view
 * @param {boolean} [props.hasMarginOnDesktop] - optional to add left & right margin on carousel on desktop view
 * @param {boolean} [props.shouldEnableCardLevelBookmark] - Feature flag to show the utility bookmark option
 * @param {boolean} [props.shouldEnableCommentsCount] - Feature flag to show the comments count
 * @param {boolean} [props.shouldUseBookmarkV3] - Feature flag to define whether to use bookmark v3
 * @param {boolean} [props.hasConsistentSpacing] - defines whether the consistent spacing is needed or not
 * @param {boolean} [props.shouldEnableBookmarkDrawers] - flag to enable bookmark drawer functionality
 * @param {string} [props.sectionTitleVariation] - optional Section Title variation for Carousel component
 * @param {boolean} [props.shouldTrackItemImpressionForSnowplow] - Feature flag to track item impression for snowplow
 * @param {boolean} [props.hasDividerAboveCarouselSectionTitle] - Optional show divider above carousel section title
 * @param {boolean} [props.hasDividerBelowCarouselSectionTitle] - Optional show divider below carousel section title
 * @param {boolean} [props.shouldApplyCustomHeaderHeight] - Optional apply 50px height to CarouselHeaderWrapper for Wired markets
 * @param {boolean} [props.hideDesktopPagination] - Optional hide pagination dots on desktop viewport only
 * @param {string} [props.itemsDensity] - Optional items density for carousel. Possible values: 'default', 'min'
 *
 * @returns {ReactElement} <Row>
 */
const VersoFeatures = ({ backgroundColor = null, carouselContentAlign, carouselSummaryItemVariation = 'TextBelowLeft', carouselItemProps, contentTypesForViewAll, container, enableComponentsWithBackgroundColor = [], hasBorderOnMobileAndTabletOnly, hasBottomBorderOnLargeScreen, hasBottomBorderLargeMargin, hasCarouselTopMargin, hasCarouselSectionTitle, hasControls = true, shouldUseCustomMargin, hasFullBleedCarouselWithPaddingWrapperOnMobile = false, hasIncreasedPaddingTop = false, hasIncreasedVerticalPadding = false, hasIncreasedVerticalPaddingTop = false, hasMarginOnDesktop = false, hasMinimalVerticalSpacing = false, hasModerateSpacing = false, hasNoTopBottomMarginOnMobile = false, hasReducedBottomMargin, hasReducedMargin, hasUnderlineHed = true, hideDangerousDek = false, hideRubricItemSummary, hideStrapline, isCarouselFullBleed = false, isCarouselFullBleedRight = false, isCarouselBodyFullBleedRight = false, isDestinationBundle, hasConsistentSpacing, lowestHierarchy, shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark, shouldEnableCommentsCount, shouldHideBylines, shouldHideCarouselBylines = true, shouldDisableCarouselTitleLetterSpacing, shouldOverrideTypeToken = false, shouldPreferCollectionGrid, shouldTreatTabletLikeMobile, shouldUseAdInCollectionGrid, shouldUseBookmarkV3, shouldUseMediumBreakpoint, sectionTitleVariation = 'TextCenter', summaryCollageVariation, summaryItemVariation, shouldTrackItemImpressionForSnowplow = false, hasDividerAboveCarouselSectionTitle = true, hasDividerBelowCarouselSectionTitle = true, shouldApplyCustomHeaderHeight = false, hideDesktopPagination = false, itemsDensity = 'default' }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'VersoFeatures'
        });
    }, []);
    const { formatMessage } = useIntl();
    const layout = container && container.layout;
    const FeaturesComposition = getFeaturesComposition(container, shouldPreferCollectionGrid, shouldUseAdInCollectionGrid, layout, summaryCollageVariation);
    if (!FeaturesComposition) {
        return null;
    }
    const isMobile = isMobileViewport();
    const { curatedSearchHed = '', shouldHideVideoDek, dangerousDek, dangerousHed, items, shouldEnableBundleComponentAnalytics, viewAllButton } = container;
    const CarouselSummaryItem = SummaryItem[carouselSummaryItemVariation];
    const hasOffersLink = items.some((item) => item.offers);
    const shouldAppendReadMore = (item) => includes(contentTypesForViewAll, item.contentType);
    if (FeaturesComposition &&
        FeaturesComposition.CarouselItem &&
        layout === 'Bubbles') {
        return (React.createElement(VisualStoryCarousel, { container: container, className: "bundleLayout" }));
    }
    if (FeaturesComposition && FeaturesComposition.CarouselItem) {
        return (React.createElement(CarouselRow, { backgroundColor: backgroundColor, className: classnames('product__carousel', {
                [`product__carousel--has-increased-padding`]: backgroundColor,
                'product__carousel--has-moderate-padding': hasModerateSpacing,
                'product__carousel--has-full-bleed': isCarouselFullBleed,
                'product__carousel--has-full-bleed-right': isCarouselFullBleedRight,
                'product__carousel--body-has-full-bleed-right': isCarouselBodyFullBleedRight
            }), hasOffersLink: hasOffersLink, hasCarouselTopMargin: hasCarouselTopMargin, shouldOverrideTypeToken: shouldOverrideTypeToken, hasFullBleedCarouselWithPaddingWrapperOnMobile: hasFullBleedCarouselWithPaddingWrapperOnMobile, hasMarginOnDesktop: hasMarginOnDesktop, shouldDisableCarouselTitleLetterSpacing: shouldDisableCarouselTitleLetterSpacing, hasConsistentSpacing: hasConsistentSpacing, shouldApplyCustomHeaderHeight: shouldApplyCustomHeaderHeight },
            React.createElement(Carousel, { headerProps: {
                    contentAlign: carouselContentAlign,
                    dangerousHed,
                    dangerousDek,
                    sectionTitleVariation: !!hasCarouselSectionTitle && sectionTitleVariation,
                    shouldDisplayDangerousDek: !hideStrapline,
                    hasBorderTop: !!hasCarouselSectionTitle && hasDividerAboveCarouselSectionTitle,
                    hasBorderBottom: !!hasCarouselSectionTitle && hasDividerBelowCarouselSectionTitle
                }, carouselSettings: {
                    hasPaginationDots: true,
                    showControls: hasControls,
                    shouldCenterAlignIfItemsAreLess: layout === 'Bubbles',
                    hideDesktopPagination,
                    itemsDensity
                }, ctaProps: viewAllButton && viewAllButton.shouldShowViewAllButton
                    ? {
                        style: 'filled',
                        clickHandler: () => {
                            if (viewAllButton.viewAllSlug) {
                                window.location.href = viewAllButton.viewAllSlug;
                            }
                        },
                        text: `${formatMessage(translations.viewAllButton)} ${lowestHierarchy} ${viewAllButton.viewAllContentType}`
                    }
                    : {}, trackingEventData: {
                    snowplowNavEventSubject: 'carousel'
                } }, items.map((item, index) => {
                const analyticsDataAttribute = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, dangerousHed, index);
                return (React.createElement(Carousel.CarouselItem, { ...carouselItemProps, key: `product-bundle-${index}`, itemsDensity: itemsDensity, trackingEventData: {
                        carouselName: container.dangerousHed,
                        itemIndex: index,
                        totalItems: items.length,
                        label: container.dangerousHed,
                        subject_version: isMobile ? 'mobile_dense' : 'default'
                    } },
                    React.createElement(CarouselSummaryItem, { ...item, analyticsDataAttribute: analyticsDataAttribute, hasBorder: false, hasBorderOnMobileAndTabletOnly: false, hasRule: true, hasUnderlineHed: hasUnderlineHed, isMobile: isMobile, hedTag: "h3", hideRubricItemSummary: isDestinationBundle && venueTypes.includes(item.contentType)
                            ? false
                            : hideRubricItemSummary, isLazy: index > 4, shouldHideBylines: shouldHideCarouselBylines, shouldHideDangerousDek: hideDangerousDek, shouldHideIcon: false, shouldHideMetadataSecondary: false, shouldAppendReadMoreLinkForDek: shouldAppendReadMore(item) })));
            }))));
    }
    const backgroundColorOverride = enableComponentsWithBackgroundColor.length > 0 &&
        enableComponentsWithBackgroundColor.includes(layout)
        ? backgroundColor
        : null;
    const isComponentInverted = enableComponentsWithBackgroundColor.length > 0 &&
        enableComponentsWithBackgroundColor.includes(layout);
    return (React.createElement(FeaturesRow, { className: classnames('verso-features', {
            'verso-features--has-increased-padding': hasIncreasedVerticalPadding,
            'verso-features--has-increased-padding-top': hasIncreasedPaddingTop
        }), hasMinimalVerticalSpacing: hasMinimalVerticalSpacing, hasReducedBottomMargin: hasReducedBottomMargin, hasReducedMargin: hasReducedMargin, hasIncreasedVerticalPaddingTop: hasIncreasedVerticalPaddingTop, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, backgroundColor: backgroundColorOverride, shouldUseCustomMargin: shouldUseCustomMargin, hasConsistentSpacing: hasConsistentSpacing },
        React.createElement(FeaturesComposition, { ...container, hideRubricItemSummary: hideRubricItemSummary, recircRiver: stripHTML(curatedSearchHed), shouldHideBylines: shouldHideBylines, summaryItemVariation: summaryItemVariation, hasBottomBorderOnLargeScreen: hasBottomBorderOnLargeScreen, hasBottomBorderLargeMargin: hasBottomBorderLargeMargin, hasBorderOnMobileAndTabletOnly: hasBorderOnMobileAndTabletOnly, hasConsistentSpacing: hasConsistentSpacing, shouldTreatTabletLikeMobile: shouldTreatTabletLikeMobile, shouldUseMediumBreakpoint: shouldUseMediumBreakpoint, shouldHideVideoDek: shouldHideVideoDek, isInverted: isComponentInverted, shouldUseBookmarkV3: shouldUseBookmarkV3, shouldEnableBookmarkDrawers: shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark: shouldEnableCardLevelBookmark, shouldEnableCommentsCount: shouldEnableCommentsCount, shouldTrackItemImpressionForSnowplow: shouldTrackItemImpressionForSnowplow, isMobile: isMobile })));
};
VersoFeatures.propTypes = {
    backgroundColor: PropTypes.oneOf([
        null,
        'light',
        'dark',
        'brand',
        'black',
        'white'
    ]),
    carouselContentAlign: PropTypes.oneOf(['left', 'center']),
    carouselItemProps: PropTypes.object,
    carouselSummaryItemVariation: PropTypes.string,
    container: PropTypes.object,
    contentTypesForViewAll: PropTypes.array,
    enableComponentsWithBackgroundColor: PropTypes.array,
    hasBorderOnMobileAndTabletOnly: PropTypes.bool,
    hasBottomBorderLargeMargin: PropTypes.bool,
    hasBottomBorderOnLargeScreen: PropTypes.bool,
    hasCarouselSectionTitle: PropTypes.bool,
    hasCarouselTopMargin: PropTypes.bool,
    hasConsistentSpacing: PropTypes.bool,
    hasControls: PropTypes.bool,
    hasDividerAboveCarouselSectionTitle: PropTypes.bool,
    hasDividerBelowCarouselSectionTitle: PropTypes.bool,
    hasFullBleedCarouselWithPaddingWrapperOnMobile: PropTypes.bool,
    hasIncreasedPaddingTop: PropTypes.bool,
    hasIncreasedVerticalPadding: PropTypes.bool,
    hasIncreasedVerticalPaddingTop: PropTypes.bool,
    hasMarginOnDesktop: PropTypes.bool,
    hasMinimalVerticalSpacing: PropTypes.bool,
    hasModerateSpacing: PropTypes.bool,
    hasNoTopBottomMarginOnMobile: PropTypes.bool,
    hasReducedBottomMargin: PropTypes.bool,
    hasReducedMargin: PropTypes.bool,
    hasUnderlineHed: PropTypes.bool,
    hideDangerousDek: PropTypes.bool,
    hideDesktopPagination: PropTypes.bool,
    hideRubricItemSummary: PropTypes.bool,
    hideStrapline: PropTypes.bool,
    isCarouselBodyFullBleedRight: PropTypes.bool,
    isCarouselFullBleed: PropTypes.bool,
    isCarouselFullBleedRight: PropTypes.bool,
    isDestinationBundle: PropTypes.bool,
    itemsDensity: PropTypes.oneOf(['default', 'min']),
    lowestHierarchy: PropTypes.string,
    sectionTitleVariation: PropTypes.string,
    shouldApplyCustomHeaderHeight: PropTypes.bool,
    shouldDisableCarouselTitleLetterSpacing: PropTypes.bool,
    shouldEnableBookmarkDrawers: PropTypes.bool,
    shouldEnableCardLevelBookmark: PropTypes.bool,
    shouldEnableCommentsCount: PropTypes.bool,
    shouldHideBylines: PropTypes.bool,
    shouldHideCarouselBylines: PropTypes.bool,
    shouldOverrideTypeToken: PropTypes.bool,
    shouldPreferCollectionGrid: PropTypes.bool,
    shouldTrackItemImpressionForSnowplow: PropTypes.bool,
    shouldTreatTabletLikeMobile: PropTypes.bool,
    shouldUseAdInCollectionGrid: PropTypes.bool,
    shouldUseBookmarkV3: PropTypes.bool,
    shouldUseCustomMargin: PropTypes.bool,
    shouldUseMediumBreakpoint: PropTypes.bool,
    summaryCollageVariation: PropTypes.string,
    summaryItemVariation: PropTypes.string,
    viewAllButton: PropTypes.shape({
        shouldShowViewAllButton: PropTypes.bool,
        viewAllContentType: PropTypes.string,
        viewAllSlug: PropTypes.string
    })
};
VersoFeatures.displayName = 'VersoFeatures';
module.exports = VersoFeatures;
//# sourceMappingURL=VersoFeatures.js.map

/***/ }),

/***/ 46793:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const VersoFeatures = __webpack_require__(27469);
module.exports = asConfiguredComponent(VersoFeatures, 'VersoFeatures');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 20659:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { calculateSpacing, minScreen, getColorToken, getTypographyStyles, maxScreen, minMaxScreen } = __webpack_require__(26865);
const { getSectionSpacingStyling } = __webpack_require__(16800);
const { BREAKPOINTS } = __webpack_require__(96472);
const Row = __webpack_require__(66657);
const { CarouselFooterWrapper, CarouselHeaderWrapper, CarouselList, CarouselListItem, CarouselContainer, HeaderSectionTitleWrapper } = __webpack_require__(72662);
const getCarouselFooterSpacing = () => {
    return css `
    ${minMaxScreen(0, `calc(${BREAKPOINTS.md} - 1px)`)} {
      padding-right: ${calculateSpacing(3)};
    }

    ${minMaxScreen(BREAKPOINTS.md, `calc(${BREAKPOINTS.xl} - 1px)`)} {
      padding-right: ${calculateSpacing(6)};
    }

    ${minMaxScreen(BREAKPOINTS.xl, BREAKPOINTS.xxl)} {
      padding-right: ${calculateSpacing(8)};
    }
  `;
};
const CarouselRow = styled(Row).withConfig({ displayName: 'CarouselRow' }) `
  margin: 0 auto;

  &.product__carousel--has-increased-padding {
    padding-top: ${calculateSpacing(5)};
    padding-bottom: ${calculateSpacing(5)};
  }

  &.product__carousel--has-moderate-padding {
    padding-top: ${calculateSpacing(5)};
    padding-bottom: ${calculateSpacing(5)};

    @media (min-width: ${BREAKPOINTS.md}) {
      padding-top: ${calculateSpacing(5)};
    }

    @media (min-width: ${BREAKPOINTS.xl}) {
      padding-top: ${calculateSpacing(7)};
      padding-bottom: ${calculateSpacing(7)};
    }
  }

  &.product__carousel--has-full-bleed {
    ${CarouselContainer} {
      padding-right: 0;
      padding-left: 0;
      max-width: 100%;
    }
    ${CarouselList} {
      margin: 0;
    }
  }

  &.product__carousel--has-full-bleed-right {
    ${CarouselContainer} {
      ${maxScreen(BREAKPOINTS.xxl)} {
        padding-right: 0;
      }
    }

    ${CarouselFooterWrapper} {
      ${getCarouselFooterSpacing()};
    }
  }

  &.product__carousel--body-has-full-bleed-right {
    ${CarouselContainer} {
      ${maxScreen(BREAKPOINTS.xxl)} {
        padding-right: 0;
        ${HeaderSectionTitleWrapper} {
          margin-right: 4rem;
        }
      }
      ${maxScreen(BREAKPOINTS.xl)} {
        ${HeaderSectionTitleWrapper} {
          margin-right: 3rem;
        }
      }
      ${maxScreen(BREAKPOINTS.md)} {
        ${HeaderSectionTitleWrapper} {
          margin-right: 1.5rem;
        }
      }
    }
    ${CarouselFooterWrapper} {
      ${getCarouselFooterSpacing()};
    }
  }

  ${CarouselContainer} {
    margin: 0 auto;
    margin-bottom: ${({ hasConsistentSpacing, theme }) => {
    return hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-sm') !== '0px'
        ? '0px'
        : calculateSpacing(4);
}};
    padding-right: ${calculateSpacing(3)};
    padding-left: ${calculateSpacing(3)};
    ${({ hasFullBleedCarouselWithPaddingWrapperOnMobile }) => hasFullBleedCarouselWithPaddingWrapperOnMobile &&
    ` @media (max-width: ${BREAKPOINTS.md}) {
        padding: 0;
      }
    `}
    max-width: ${BREAKPOINTS.lg};
    ${({ hasCarouselTopMargin, hasConsistentSpacing, theme }) => hasCarouselTopMargin &&
    `margin: ${hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px'
        ? '0px'
        : calculateSpacing(4)} auto;`}

    @media (min-width: ${BREAKPOINTS.md}) {
      padding-right: ${calculateSpacing(6)};
      padding-left: ${calculateSpacing(6)};
      max-width: ${BREAKPOINTS.lg};
    }

    @media (min-width: ${BREAKPOINTS.lg}) {
      padding-right: ${calculateSpacing(6)};
      padding-left: ${calculateSpacing(6)};
      max-width: ${BREAKPOINTS.xl};
    }

    @media (min-width: ${BREAKPOINTS.xl}) {
      padding-right: ${calculateSpacing(8)};
      padding-left: ${calculateSpacing(8)};
      max-width: ${BREAKPOINTS.xxl};
    }

    @media (min-width: ${BREAKPOINTS.xxl}) {
      padding-bottom: ${({ hasConsistentSpacing, theme }) => {
    return hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px'
        ? '0px'
        : calculateSpacing(5);
}};
    }

    &.carousel--has-moderate-spacing {
      @media (min-width: ${BREAKPOINTS.xxl}) {
        padding-bottom: 0;
      }

      ${CarouselList} {
        margin-top: ${calculateSpacing(4)};
        @media (min-width: ${BREAKPOINTS.xl}) {
          margin-top: ${calculateSpacing(5)};
        }
      }
    }
  }

  ${CarouselList} {
    margin-top: ${calculateSpacing(2)};
    background: none;
    overflow-x: auto;
  }

  ${CarouselListItem} {
    ${({ hasMarginOnDesktop }) => hasMarginOnDesktop &&
    `
    margin: 0 32px 0 0;
    &:first-of-type {
      margin-left: -1px;
    }
    &:last-of-type {
      margin-right: 0;
    }
  `}
    ${({ hasFullBleedCarouselWithPaddingWrapperOnMobile }) => hasFullBleedCarouselWithPaddingWrapperOnMobile &&
    `
    @media (max-width: 760px) {
      margin: 0;
      padding-left: 12px;
    
      &:last-of-type {
        padding-right: 24px; 
        width: 96%;
      }
      &:first-of-type {
        padding-left: 24px; 
        width: 92%;
      }
    }
  `}
    .summary-item__rubric {
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-primary')};

      color: ${({ theme }) => getColorToken(theme, 'colors.discovery.body.light.context-signature')};
    }
  }

  .summary-item__content {
    padding-bottom: ${calculateSpacing(2)};
    width: auto;

    @media (min-width: ${BREAKPOINTS.xxl}) {
      padding-bottom: ${calculateSpacing(4)};
    }
  }

  .summary-item--bundle {
    .summary-item__content {
      width: auto;
    }

    .summary-item__hed {
      margin-top: 0;
      margin-bottom: ${calculateSpacing(1)};
    }
  }

  .summary-item {
    .summary-item__hed {
      width: auto;
      ${({ shouldOverrideTypeToken, theme }) => shouldOverrideTypeToken
    ? getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-secondary')
    : getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-primary')};

      color: ${({ theme }) => getColorToken(theme, 'colors.discovery.body.light.heading')};
    }
  }

  .summary-item__hed-link::after {
    ${({ theme }) => `
        border-bottom: 1px solid ${getColorToken(theme, 'colors.discovery.body.light.accent')};
      )};
      `}

    .summary-item__dek {
      ${({ shouldOverrideTypeToken, theme }) => shouldOverrideTypeToken
    ? getTypographyStyles(theme, 'typography.definitions.discovery.description-core')
    : getTypographyStyles(theme, 'typography.definitions.discovery.description-feature')};

      color: ${({ theme }) => getColorToken(theme, 'colors.discovery.body.light.description')};
    }
  }

  .visualStoryLayout {
    li {
      margin: 0 5px;
      padding: 0;
      width: 110px;
    }

    .summary-item__content {
      padding-top: 4px;
      padding-bottom: 0;
    }

    .summary-item__hed {
      /* stylelint-disable-next-line value-no-vendor-prefix */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .summary-item__dek {
      display: none;
    }

    .summary-item__hed-link::after {
      margin-bottom: 0;
      border: none;
    }

    ul[class^='CarouselList'] {
      margin-top: 16px;
      margin-bottom: 11px;
    }

    div[class^='CarouselListWrapper'] {
      border-bottom: 1px solid
        ${({ theme }) => getColorToken(theme, 'colors.discovery.body.white.divider')};
    }

    div[class*='CarouselListButton'] {
      top: 25px;
      transform: translateY(0%);

      > button {
        border: 1px solid
          ${({ isInverted, theme }) => isInverted
    ? getColorToken(theme, 'colors.interactive.base.white')
    : getColorToken(theme, 'colors.interactive.base.black')};
        @media (max-width: 480px) {
          display: none;
        }

        > .button__icon-container {
          top: 8px;
          left: 9px;
          width: 21px;
          height: 21px;

          svg {
            width: 21px;
            height: 21px;
          }
        }
      }
    }

    .summary-item__asset-container {
      height: 90px;
    }

    .aspect-ratio--overlay-container {
      margin: 0 auto;
      border: 1px solid
        ${({ isInverted, theme }) => isInverted
    ? getColorToken(theme, 'colors.interactive.base.border')
    : getColorToken(theme, 'colors.interactive.base.border')};
      border-radius: 50%;
      width: 90px;
      height: 90px;

      picture {
        display: flex;
        justify-content: center;

        img {
          width: unset;
          max-width: unset;
          height: 90px;
        }
      }
    }

    header[class*='CarouselHeader'] {
      margin-bottom: 0;
    }

    div[class*='CarouselHeaderItemTitle'],
    div[class*='CarouselSectionTitle'] {
      margin-bottom: 0.75rem;
      border: none;
      padding-right: 0;
      padding-bottom: 0;
      padding-left: 0;
      text-align: center;

      h2 {
        border-top: 1px solid
          ${({ theme }) => getColorToken(theme, 'colors.discovery.body.white.divider')};
        ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.subhed-section-primary')};
        border-bottom: 1px solid
          ${({ theme }) => getColorToken(theme, 'colors.discovery.body.white.divider')};
        padding: 16px 0 16px 0;
        width: 100%;
        color: ${({ theme }) => getColorToken(theme, 'colors.discovery.body.white.heading')};
        @media (min-width: 480px) {
          text-align: left;
        }
      }
    }

    p[class*='SummaryDekDefault'] {
      border-bottom: 1px solid
        ${({ theme }) => getColorToken(theme, 'colors.discovery.body.white.border')};
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.description-core')};
      padding: 4px 0 16px 0;
      text-align: center;
      color: ${({ theme }) => getColorToken(theme, 'colors.discovery.body.white.heading')};
    }

    li h3.summary-item__hed {
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-tertiary')};
      margin-bottom: 0;
      text-align: center;
      color: ${({ theme }) => getColorToken(theme, 'colors.discovery.body.white.heading')};
      font-size: 10px;
    }

    div[class*='CarouselFooterItemButton'] > button {
      bottom: 40px;
      zoom: 0.7;
    }
    @media (min-width: 480px) {
      div[class*='CarouselHeaderItemTitle'] {
        width: 100%;
        text-align: left;
      }

      p[class*='SummaryDekDefault'] {
        text-align: left;
      }
    }
  }

  ${({ shouldApplyCustomHeaderHeight }) => shouldApplyCustomHeaderHeight &&
    `
    @media (min-width: 768px) {
      ${CarouselHeaderWrapper} {
        height: 50px;
      }
    }
  `}
`;
const FeaturesRow = styled(Row).withConfig({ displayName: 'FeaturesRow' }) `
  ${({ theme, hasMinimalVerticalSpacing, hasReducedBottomMargin, hasReducedMargin, hasIncreasedVerticalPaddingTop, hasNoTopBottomMarginOnMobile, hasConsistentSpacing, shouldUseCustomMargin }) => {
    if (hasIncreasedVerticalPaddingTop) {
        return hasConsistentSpacing &&
            getSectionSpacingStyling(theme, 'gap-sm') !== '0px'
            ? `margin-top: 0;`
            : `margin-top: ${calculateSpacing(5)};`;
    }
    if (hasMinimalVerticalSpacing) {
        if (hasConsistentSpacing &&
            getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
            return `margin-bottom: ${calculateSpacing(0)};`;
        }
        return `margin-bottom: ${calculateSpacing(2)};`;
    }
    else if (hasReducedMargin) {
        return `margin-bottom: 0;`;
    }
    else if (hasReducedBottomMargin) {
        if (hasConsistentSpacing &&
            getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
            return `margin-bottom: ${calculateSpacing(0)};`;
        }
        return `margin-bottom: ${calculateSpacing(3)};`;
    }
    else if (hasNoTopBottomMarginOnMobile) {
        return `
          ${minScreen(BREAKPOINTS.sm)} {
            margin-top: 0;
            margin-bottom: 0;
          }`;
    }
    else if (shouldUseCustomMargin) {
        if (hasConsistentSpacing &&
            getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
            return `margin-bottom: ${calculateSpacing(0)};`;
        }
        return `margin-bottom: ${calculateSpacing(5)};`;
    }
    if (hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
        return `margin-bottom: ${calculateSpacing(0)};`;
    }
    return `margin-bottom: ${calculateSpacing(7)};`;
}}

  &.verso-features--has-increased-padding {
    padding-top: ${calculateSpacing(6)};
    padding-bottom: ${calculateSpacing(6)};

    @media (min-width: ${BREAKPOINTS.md}) {
      padding-top: ${calculateSpacing(8)};
      padding-bottom: ${calculateSpacing(8)};
    }

    @media (min-width: ${BREAKPOINTS.xl}) {
      padding-top: ${calculateSpacing(10)};
      padding-bottom: ${calculateSpacing(10)};
    }
  }

  &.verso-features--has-increased-padding-top {
    padding-top: ${calculateSpacing(8)};
  }
`;
module.exports = {
    CarouselRow,
    FeaturesRow
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 83253:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    viewAllButton: {
        id: 'VersoFeatures.viewAllButton',
        defaultMessage: 'View All',
        description: 'Aria label text for verso feature view all button'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 24369:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { useState } = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const _uniqueId = __webpack_require__(97200);
const debounce = __webpack_require__(38221);
const { useIntl } = __webpack_require__(46984);
const { Slot } = __webpack_require__(50035);
const StackedRatingsCard = __webpack_require__(97111);
const CTACard = __webpack_require__(38638);
const translations = __webpack_require__(68538);
const { FilterableSummaryList } = __webpack_require__(92488);
const PLPProductCard = __webpack_require__(67611);
const UnifiedProductCard = __webpack_require__(51125);
const SummaryItem = __webpack_require__(74992);
const SummaryItemSimple = __webpack_require__(31933);
const { TrackComponentChannel } = __webpack_require__(78788);
const { modifyItemObjectBasedOnContentType, childTobeRendered } = __webpack_require__(96389);
const { formatGtmData, productImpressionTracking } = __webpack_require__(60162);
const Ad = __webpack_require__(19607);
const VersoFilterableSummaryList = ({ copilotId, config, buttonConfig, ctaCardAspectRatio = [2, 1], dangerousHed, dangerousDek, dropShipSellers = [], editor, groups, hasAffiliateLinkDisabled, hasBorder, hasBorderBottom, hasCarouselSliderPagination, hasControls, hasImageGrid, hasAtRetailerNameLowerCase = false, hasImpressionTracking = true, hasMediumMarginBottom, hasNavigationButtonVariation, hasPadding, hasProductPriceColor, hasProductNewPriceColor, hasProductWhiteBackground, hasGridColumn, hasUnderlineHed, isProductCardName, isProductCardRetailerName = false, shouldCheckProductInView, hasMarginTopAuto = false, hasNoBottomPaddingForGridContent, hasPLPBrandNameContextTitle, hasPLPCardNameDescriptionCore, paginationStyle, sectionTitleVariation = 'TextCenter', shouldChipsRedirectOnClick = false, shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark, shouldEnableCommentsCount, shouldEnableBundleComponentAnalytics = false, shouldHideDangerousDek, shouldHidePublishDate, shouldLimitSavingToContentTypes, shouldPlayInline = false, shouldRenderCtaCard = false, showOfferUrl, showShopNowButton = false, summaryItemVariation = 'TextBelowLeft', shouldUseAlternativeTitleStyle, shouldUseProductPriceSecondary, shouldOpenInternalLinksInNewTab, shouldEnableSnowplowTracking, shouldUseSmallHed = false, stackedRatingsCardRatingMethod, expVariationName, isDropshipProduct = false, trackingNamespace, isDotClickable = false, layout = 'Carousel', gridConfig, priceFormatting, affiliateDisclaimer, isFirstProductListingContainer, isUpcEnabled, isPlpCurated, isContentCenter, hasCustomSlider, hideDesktopPagination, isSeriesNavigation, isPimCollectionContainer, hideRubricLink, showDisclaimer, showRichTextInDek, containerIndex }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'VersoFilterableSummaryList'
        });
    }, []);
    const [isCommerceSponsorProductAdEmpty, setIsCommerceSponsorProductAdEmpty] = useState(false);
    const { formatMessage } = useIntl();
    const layoutType = !layout ? 'Carousel' : layout;
    const hasCarouselControl = layoutType === 'ContentCarousel';
    const list = layoutType === 'GridFourColumns' ? 'PLP' : layout;
    const layoutName = dangerousHed
        ? dangerousHed.replace(/[^a-zA-Z]+/gi, '-').toLowerCase()
        : '';
    const { gridItemColSpan } = gridConfig || {};
    const ELIGIBLE_PRODUCT_LAYOUTS = ['GridFourColumns', 'ContentCarousel'];
    const VALID_PRODUCT_CONTENT_TYPES = ['commerce-product', 'product'];
    const isProduct = (type) => VALID_PRODUCT_CONTENT_TYPES.includes(type);
    React.useEffect(() => {
        if (hasCarouselControl && !hasImpressionTracking) {
            return;
        }
        window.addEventListener('scroll', debounce(() => {
            productImpressionTracking(list, document.getElementsByClassName('impressionTracking'));
        }, 1000));
        window.addEventListener('load', () => productImpressionTracking(list, document.getElementsByClassName('impressionTracking')));
    }, [list, hasCarouselControl, hasImpressionTracking]);
    const determineSummaryItemLayout = ({ isTextExternalLink, showLinkedAsset, showAssetOnly, content }) => {
        if (isTextExternalLink || (showLinkedAsset && isTextExternalLink)) {
            return SummaryItem.SideBySideDenseNoAsset;
        }
        else if (showAssetOnly || showLinkedAsset) {
            return SummaryItemSimple;
        }
        else if (content === 'externallink' && isContentCenter) {
            return SummaryItem.TextBelowCenter;
        }
        return SummaryItem[summaryItemVariation];
    };
    const { adsConfig: { enableNativeSponsoredProductforCommerce = false, nativeSponsorProductPositionGrid = 1, nativeSponsorProductPositionCarousel = 3 } = {} } = config || {};
    const isLayoutEligible = ELIGIBLE_PRODUCT_LAYOUTS.includes(layoutType);
    let sponsorProductPosition;
    if (layoutType === 'GridFourColumns') {
        sponsorProductPosition = nativeSponsorProductPositionGrid;
    }
    else if (layoutType === 'ContentCarousel') {
        sponsorProductPosition = nativeSponsorProductPositionCarousel;
    }
    const sponsorProductIndex = sponsorProductPosition
        ? sponsorProductPosition - 1
        : undefined;
    const injectSponsorAd = (items) => {
        const adElement = (React.createElement(Ad, { key: "sponsor-product-ad", position: "sponsor-product", templateLayout: layoutType, onEmpty: () => setIsCommerceSponsorProductAdEmpty(true), skipChildFilter: true }));
        items.splice(sponsorProductIndex, 0, adElement);
    };
    const componentUsed = layout === 'ContentCarousel' ? 'carousel' : 'plp_grid';
    const itemLayout = (group) => {
        const mappedItems = group.items.map((item, index) => {
            const content = item.contentType;
            const { isCurrent, isTextExternalLink } = item;
            const data_item = { ...item, layout, index };
            if (isProduct(content)) {
                if (item.image?.contentType === 'clip') {
                    item.image = isUpcEnabled
                        ? {
                            ...item.image,
                            sources: {},
                            segmentedSources: {} // Set sources to an empty object
                        }
                        : undefined;
                }
                if (isUpcEnabled) {
                    return (React.createElement(UnifiedProductCard, { ...item, isLazy: true, key: `${item.dangerousHed}-${index}`, dropShipSellers: dropShipSellers, isDropshipProduct: isDropshipProduct, showOfferUrl: showOfferUrl || hasAffiliateLinkDisabled, data_item: data_item, hasImpressionTracking: hasImpressionTracking, expVariationName: expVariationName, layout: layoutType, shouldDisableCreditText: true, componentUsed: componentUsed }));
                }
                return (React.createElement(PLPProductCard, { ...item, key: `${item.dangerousHed}-${index}`, hasAtRetailerNameLowerCase: hasAtRetailerNameLowerCase, hasImageGrid: hasImageGrid, hasProductPriceColor: hasProductPriceColor, hasProductNewPriceColor: hasProductNewPriceColor, shouldUseProductPriceSecondary: shouldUseProductPriceSecondary, hasProductWhiteBackground: hasProductWhiteBackground, isLazy: true, isProductCardName: isProductCardName, isProductCardRetailerName: isProductCardRetailerName, hasMarginTopAuto: hasMarginTopAuto, hasPLPBrandNameContextTitle: hasPLPBrandNameContextTitle, hasPLPCardNameDescriptionCore: hasPLPCardNameDescriptionCore, hasUnderlineHed: hasUnderlineHed, hasCarouselControl: hasCarouselControl, shouldCheckProductInView: shouldCheckProductInView, layout: layoutType, copilotID: copilotId, dropShipSellers: dropShipSellers, isDropshipProduct: isDropshipProduct, showOfferUrl: showOfferUrl, hasImpressionTracking: hasImpressionTracking, data_item: item, onClick: ({ event, actionId }) => {
                        formatGtmData({
                            window,
                            product: {
                                ...item,
                                expVariationName,
                                index,
                                layout: layoutType
                            },
                            index,
                            actionId,
                            layout: list,
                            event,
                            layoutTitle: layoutName
                        });
                    }, expVariationName: expVariationName, layoutName: layoutName, priceFormatting: priceFormatting, hideDesktopPagination: hideDesktopPagination }));
            }
            const modifiedItem = modifyItemObjectBasedOnContentType(item, content, shouldPlayInline);
            let SummaryItemComponent = SummaryItem[summaryItemVariation];
            const { showAssetOnly, showLinkedAsset } = modifiedItem;
            SummaryItemComponent = determineSummaryItemLayout({
                isTextExternalLink,
                showLinkedAsset,
                showAssetOnly,
                content
            });
            return (React.createElement(SummaryItemComponent, { gridItemColSpan: modifiedItem?.showAssetOnly || modifiedItem?.showLinkedAsset
                    ? 1
                    : gridItemColSpan, shouldHideIcon: true, shouldHideMetadataSecondary: true, ...modifiedItem, key: `${item.dangerousHed}-${index}`, hasBorder: hasBorder, hasUnderlineHed: hasUnderlineHed, shouldHideDangerousDek: !isTextExternalLink || shouldHideDangerousDek, shouldHidePublishDate: true, hasHedCorePrimary: true, shouldPlayInline: shouldPlayInline, hasNoBottomMarginForCneVideo: content === 'cnevideo', hasNoBottomPaddingForCneVideo: content === 'cnevideo', hasNoBottomPaddingForGridContent: hasNoBottomPaddingForGridContent && layoutType === 'GridFourColumns', hasMediumMarginBottom: hasMediumMarginBottom, buttonSize: "default", showShopNowButton: showShopNowButton && content === 'externallink', isPlpCurated: isPlpCurated, shouldOpenInternalLinksInNewTab: shouldOpenInternalLinksInNewTab, hideDesktopPagination: hideDesktopPagination, shouldUseSmallHed: shouldUseSmallHed &&
                    content === 'externallink' &&
                    layoutType !== 'GridFourColumns', layout: layoutType, index: index, isSeriesNavigation: isSeriesNavigation, isCurrent: isCurrent, hideRubricLink: hideRubricLink, isTextExternalLink: isTextExternalLink }));
        });
        const hasValidSponsorProductIndex = sponsorProductIndex >= 0 && sponsorProductIndex < mappedItems.length;
        const itemAtIndex = group.items[sponsorProductIndex];
        const isSponsorSlotProduct = isProduct(itemAtIndex?.contentType);
        const shouldShowSponsorProductAd = enableNativeSponsoredProductforCommerce &&
            !isCommerceSponsorProductAdEmpty &&
            isLayoutEligible &&
            hasValidSponsorProductIndex &&
            isSponsorSlotProduct;
        if (shouldShowSponsorProductAd) {
            injectSponsorAd(mappedItems);
        }
        return mappedItems;
    };
    const articleCarouselLayout = (group) => {
        const SummaryCarouselVariation = SummaryItem[summaryItemVariation];
        return group.items.map((item, index) => {
            return (React.createElement(SummaryCarouselVariation, { ...item, key: `${item.dangerousHed}-${index}`, hasBorder: hasBorder, hasUnderlineHed: hasUnderlineHed, shouldHideDangerousDek: shouldHideDangerousDek, shouldHidePublishDate: shouldHidePublishDate }));
        });
    };
    function determineLayout(group) {
        switch (layoutType) {
            case 'ContentCarousel':
            case 'GridFourColumns':
            case 'EditorsPicksCarousel':
                return itemLayout(group);
            case 'ArticleCarousel':
                return articleCarouselLayout(group);
            default:
                return group.items.map((item, index) => (React.createElement(StackedRatingsCard, { ...item, key: `${item.hed}-${index}`, ratingMethod: stackedRatingsCardRatingMethod, shouldTrackSnowplowEvent: shouldEnableSnowplowTracking, totalItems: group?.items?.length, sectionTitle: dangerousHed, shouldEnableBookmarkDrawers: shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark: shouldEnableCardLevelBookmark, shouldEnableCommentsCount: shouldEnableCommentsCount, shouldLimitSavingToContentTypes: shouldLimitSavingToContentTypes })));
        }
    }
    const hasToggleGridColor = hasGridColumn && layoutType === 'GridFourColumns';
    const [pid] = React.useState(parseInt(_uniqueId(), 10));
    if (!groups || groups.length === 0)
        return null;
    return (React.createElement(FilterableSummaryList, { dangerousHed: dangerousHed, dangerousDek: dangerousDek, editor: editor, sectionTitleVariation: sectionTitleVariation, shouldChipsRedirectOnClick: shouldChipsRedirectOnClick, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, shouldEnableSnowplowTracking: shouldEnableSnowplowTracking, shouldUseAlternativeTitleStyle: shouldUseAlternativeTitleStyle, hasImpressionTracking: true, trackingNamespace: trackingNamespace, isDotClickable: isDotClickable, hasCarouselSliderPagination: hasCarouselSliderPagination, hasCarouselControl: hasCarouselControl, hasControls: hasControls, hasNavigationButtonVariation: hasNavigationButtonVariation, hasToggleGridColor: hasToggleGridColor, hasPadding: hasPadding, layout: layoutType, pos: pid, paginationStyle: paginationStyle, buttonConfig: buttonConfig, gridConfig: gridConfig, hasBorderBottom: hasBorderBottom, affiliateDisclaimer: affiliateDisclaimer, isFirstProductListingContainer: isFirstProductListingContainer, isPimCollectionContainer: isPimCollectionContainer, showDisclaimer: showDisclaimer, isPlpCurated: isPlpCurated, hasCustomSlider: hasCustomSlider, hideDesktopPagination: hideDesktopPagination, isUpcEnabled: isUpcEnabled, groups: groups, isSeriesNavigation: isSeriesNavigation, showRichTextInDek: showRichTextInDek, containerIndex: containerIndex }, groups.map((group) => {
        const children = determineLayout(group);
        if (shouldRenderCtaCard && group.url) {
            children.push(React.createElement(CTACard, { aspectRatio: ctaCardAspectRatio, key: `cta-${group.label}`, url: group.url }, formatMessage(translations.ctaMessage, {
                groupName: group.label.toLocaleLowerCase()
            })));
        }
        const newChildren = childTobeRendered(children);
        return (React.createElement(Slot, { key: group.label, name: group.label, url: group.url }, newChildren));
    })));
};
VersoFilterableSummaryList.propTypes = {
    affiliateDisclaimer: PropTypes.string,
    buttonConfig: PropTypes.object,
    config: PropTypes.shape({
        adsConfig: PropTypes.shape({
            enableNativeSponsoredProductforCommerce: PropTypes.bool,
            nativeSponsorProductPositionGrid: PropTypes.number,
            nativeSponsorProductPositionCarousel: PropTypes.number
        })
    }),
    containerIndex: PropTypes.number,
    copilotId: PropTypes.string,
    ctaCardAspectRatio: PropTypes.arrayOf(PropTypes.number),
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    dropShipSellers: PropTypes.arrayOf(PropTypes.string),
    editor: PropTypes.object,
    expVariationName: PropTypes.string,
    gridConfig: PropTypes.object,
    groups: PropTypes.arrayOf(PropTypes.object),
    hasAffiliateLinkDisabled: PropTypes.bool,
    hasAtRetailerNameLowerCase: PropTypes.bool,
    hasBorder: PropTypes.bool,
    hasBorderBottom: PropTypes.bool,
    hasCarouselSliderPagination: PropTypes.bool,
    hasControls: PropTypes.bool,
    hasCustomSlider: PropTypes.bool,
    hasGridColumn: PropTypes.bool,
    hasImageGrid: PropTypes.bool,
    hasImpressionTracking: PropTypes.bool,
    hasMarginTopAuto: PropTypes.bool,
    hasMediumMarginBottom: PropTypes.bool,
    hasNavigationButtonVariation: PropTypes.bool,
    hasNoBottomPaddingForGridContent: PropTypes.bool,
    hasPadding: PropTypes.bool,
    hasPLPBrandNameContextTitle: PropTypes.bool,
    hasPLPCardNameDescriptionCore: PropTypes.bool,
    hasProductNewPriceColor: PropTypes.bool,
    hasProductPriceColor: PropTypes.bool,
    hasProductWhiteBackground: PropTypes.bool,
    hasToggleGridColor: PropTypes.bool,
    hasUnderlineHed: PropTypes.bool,
    hideDesktopPagination: PropTypes.bool,
    hideRubricLink: PropTypes.bool,
    isContentCenter: PropTypes.bool,
    isDotClickable: PropTypes.bool,
    isDropshipProduct: PropTypes.bool,
    isFirstProductListingContainer: PropTypes.bool,
    isPimCollectionContainer: PropTypes.bool,
    isPlpCurated: PropTypes.bool,
    isProductCardName: PropTypes.bool,
    isProductCardRetailerName: PropTypes.bool,
    isSeriesNavigation: PropTypes.bool,
    isTextExternalLink: PropTypes.bool,
    isUpcEnabled: PropTypes.bool,
    layout: PropTypes.string,
    paginationStyle: PropTypes.string,
    priceFormatting: PropTypes.shape({
        fractionDigits: PropTypes.number,
        shouldFormatDecimalSeparator: PropTypes.bool
    }),
    sectionTitleVariation: PropTypes.string,
    shouldCheckProductInView: PropTypes.bool,
    shouldChipsRedirectOnClick: PropTypes.bool,
    shouldEnableBookmarkDrawers: PropTypes.bool,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldEnableCardLevelBookmark: PropTypes.bool,
    shouldEnableCommentsCount: PropTypes.bool,
    shouldEnableSnowplowTracking: PropTypes.bool,
    shouldHideDangerousDek: PropTypes.bool,
    shouldHidePublishDate: PropTypes.bool,
    shouldLimitSavingToContentTypes: PropTypes.bool,
    shouldOpenInternalLinksInNewTab: PropTypes.bool,
    shouldPlayInline: PropTypes.bool,
    shouldRenderCtaCard: PropTypes.bool,
    shouldUseAlternativeTitleStyle: PropTypes.bool,
    shouldUseProductPriceSecondary: PropTypes.bool,
    shouldUseSmallHed: PropTypes.bool,
    showDisclaimer: PropTypes.bool,
    showNewProductCardDesign: PropTypes.bool,
    showOfferUrl: PropTypes.bool,
    showRichTextInDek: PropTypes.bool,
    showShopNowButton: PropTypes.bool,
    stackedRatingsCardRatingMethod: PropTypes.string,
    summaryItemVariation: PropTypes.string,
    trackingNamespace: PropTypes.shape({
        toggle: PropTypes.string,
        card: PropTypes.string
    })
};
VersoFilterableSummaryList.displayName = 'VersoFilterableSummaryList';
module.exports = VersoFilterableSummaryList;
//# sourceMappingURL=VersoFilterableSummaryList.js.map

/***/ }),

/***/ 10220:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const VersoFilterableSummaryList = __webpack_require__(24369);
module.exports = asConfiguredComponent(VersoFilterableSummaryList, 'VersoFilterableSummaryList');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 92488:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { BREAKPOINTS } = __webpack_require__(96472);
const { minScreen, calculateSpacing, minMaxScreen, getTypographyStyles, getColorStyles } = __webpack_require__(26865);
const { cssVariablesGrid, applyGridSpacing } = __webpack_require__(1123);
const { LabelText, ListWrapper } = __webpack_require__(14952);
const { CarouselWrapper, ChipWrapper } = __webpack_require__(22482);
const FilterableSummaryListBase = __webpack_require__(15998);
const SummaryItem = __webpack_require__(74992);
const { SummaryItemHedBase } = __webpack_require__(36211);
const { CarouselListItem, CarouselNavigationWrapper } = __webpack_require__(72662);
const FilterableSummaryList = styled(FilterableSummaryListBase).withConfig({
    displayName: 'FilterableSummaryList'
}) `
  margin: 0 auto;
  ${({ hasToggleGridColor }) => !hasToggleGridColor &&
    `max-width:${BREAKPOINTS.fullBleed};
  ${cssVariablesGrid()}`}
  ${({ hasPadding }) => !hasPadding && applyGridSpacing('padding')}
  ${CarouselListItem}:first-child {
    box-sizing: content-box;
    ${({ hasPadding }) => hasPadding
    ? `padding-left:${calculateSpacing(8)};
      ${minMaxScreen(0, BREAKPOINTS.md)}
      {  
        padding-left:${calculateSpacing(3)};  
      }`
    : `padding-left: 0;`}
  }
  ${CarouselListItem}:last-child {
    box-sizing: content-box;
    ${({ hasPadding }) => hasPadding
    ? `padding-right:${calculateSpacing(8)};
    ${minMaxScreen(0, BREAKPOINTS.md)}
     { padding-right:${calculateSpacing(3)}; 
    }`
    : null}
  }
  ${CarouselNavigationWrapper} {
    ${({ hasPadding }) => hasPadding &&
    `padding-right:${calculateSpacing(8)};
    ${minMaxScreen(0, BREAKPOINTS.md)}
     { padding-right:${calculateSpacing(3)}; 
    }`}
  }
  ${minScreen(BREAKPOINTS.xxl)} {
    ${ChipWrapper},
    ${CarouselWrapper} {
      ${({ hasToggleGridColor }) => !hasToggleGridColor &&
    `margin-left: revert;
      margin-right: revert;`}
      ${LabelText} ,
      ${ListWrapper} {
        padding-right: revert;
        padding-left: revert;
      }
      ${CarouselListItem}:first-child {
        ${({ hasPadding }) => !hasPadding && `padding-left: revert;`}
      }
      ${CarouselListItem}:last-child {
        ${({ hasPadding }) => !hasPadding && `padding-right: revert;`}
      }
    }
  }

  header {
    ${({ hasPadding }) => hasPadding
    ? `padding-right: calc(1 * var(--grid-margin));
    padding-left: calc(1 * var(--grid-margin));`
    : null}
  }
`;
const SummaryItemExpernalLinkWrapper = styled(SummaryItem).withConfig({
    displayName: 'SummaryItemExpernalLinkWrapper'
}) `
  ${SummaryItemHedBase} {
    ${({ theme }) => {
    return `${getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-secondary')};
      ${getColorStyles(theme, 'color', 'colors.discovery.body.white.heading')}`;
}}
  }
`;
module.exports = {
    FilterableSummaryList,
    SummaryItemExpernalLinkWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 31382:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { CTACardBody, CTACardContent, CTACardFooter, CTACardIcon, CTACardText, CTACardWrapper } = __webpack_require__(92098);
const CTACard = ({ aspectRatio = [1, 1], children, url }) => {
    return (React.createElement(CTACardWrapper, { aspectRatio: aspectRatio },
        React.createElement(CTACardContent, null,
            React.createElement(CTACardBody, null,
                React.createElement(CTACardText, { href: url }, children)),
            React.createElement(CTACardFooter, null,
                React.createElement("a", { href: url },
                    React.createElement(CTACardIcon, null))))));
};
CTACard.propTypes = {
    aspectRatio: PropTypes.arrayOf(PropTypes.number),
    children: PropTypes.node.isRequired,
    url: PropTypes.string.isRequired
};
module.exports = CTACard;
//# sourceMappingURL=CTACard.js.map

/***/ }),

/***/ 38638:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(31382);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 92098:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { BREAKPOINTS } = __webpack_require__(96472);
const { calculateSpacing, getColorToken, getDecoration, minScreen } = __webpack_require__(26865);
const { BaseLink } = __webpack_require__(76955);
const ArrowIcon = __webpack_require__(42361);
const CTACardWrapper = styled.div.withConfig({ displayName: 'CTACardWrapper' }) `
  position: relative;
  border-radius: ${({ theme }) => getDecoration(theme, 'cardRadiusSm')};
  background-color: ${getColorToken('colors.discovery.body.brand.background')};
  padding-top: ${({ aspectRatio }) => (aspectRatio[1] / aspectRatio[0]) * 100}%;

  ${minScreen(BREAKPOINTS.md)} {
    border-radius: ${({ theme }) => getDecoration(theme, 'cardRadiusMd')};
  }

  ${minScreen(BREAKPOINTS.lg)} {
    border-radius: ${({ theme }) => getDecoration(theme, 'cardRadiusLg')};
  }
`;
const CTACardContent = styled.div.withConfig({ displayName: 'CTACardContent' }) `
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex-direction: column;
  padding: 0 ${calculateSpacing(3)} ${calculateSpacing(2)}
    ${calculateSpacing(3)};

  ${minScreen(BREAKPOINTS.lg)} {
    padding: 0 ${calculateSpacing(5)} ${calculateSpacing(5)}
      ${calculateSpacing(5)};
  }
`;
const CTACardBody = styled.div.withConfig({ displayName: 'CTACardBody' }) `
  display: flex;
  flex: 1 0 auto;
  align-items: center;
`;
const CTACardFooter = styled.div.withConfig({ displayName: 'CTACardFooter' }) `
  height: ${calculateSpacing(6)};
`;
const CTACardText = styled(BaseLink).withConfig({
    displayName: 'CTACardText'
}) ``;
CTACardText.defaultProps = {
    colorToken: 'colors.discovery.body.brand.heading',
    typeIdentity: 'typography.definitions.discovery.hed-core-secondary'
};
const CTACardIcon = styled(ArrowIcon).withConfig({
    displayName: 'CTACardIcon'
}) `
  border-radius: 50%;
  background-color: ${getColorToken('colors.discovery.body.brand.context-signature')};
  width: ${calculateSpacing(6)};
  height: ${calculateSpacing(6)};
  fill: ${getColorToken('colors.discovery.body.brand.context-texture')};

  svg {
    transform: scale(0.6);
  }
`;
module.exports = {
    CTACardBody,
    CTACardContent,
    CTACardFooter,
    CTACardIcon,
    CTACardText,
    CTACardWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 68538:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { defineMessages } = __webpack_require__(46984);
module.exports = defineMessages({
    ctaMessage: {
        id: 'VersoFilterableSummaryList.CTAMessage',
        defaultMessage: 'See more {groupName} recipes',
        description: 'Message to display in the CTACard'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 96389:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

/**
 * This function is basically modifies item object based on content-type so that it is supported in right format to render or show in frontend
 *
 * @param {string} content - It is content type of each child or item
 * @param {object} item - item containing all the information of child in the form of object
 * @param {boolean} shouldPlayInline - this is boolean value to make video play inline or not
 * @returns - item object
 */
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.childTobeRendered = exports.modifyItemObjectBasedOnContentType = void 0;
const modifyItemObjectBasedOnContentType = (item, content, shouldPlayInline) => {
    if (content === 'cnevideo' && shouldPlayInline) {
        item.image = {
            ...item.image,
            url: item?.url || '',
            dangerousHed: item.dangerousHed || ''
        };
    }
    return item;
};
exports.modifyItemObjectBasedOnContentType = modifyItemObjectBasedOnContentType;
/**
 * This function is basically filters child based on certain condition and returns it
 *
 * @param {Array} children - Children is array of objects
 * @returns {object} child object
 */
const childTobeRendered = (children) => children.filter((child) => (child?.props?.image?.id ||
    child?.props?.aspectRatio ||
    (child?.props?.contentType === 'cnevideo' &&
        (child?.props?.image?.scriptUrl || child?.props?.url)) ||
    (child?.props.contentType === 'externallink' &&
        child?.props?.isTextExternalLink) ||
    child?.props?.skipChildFilter) && // to skip the filtering of <Ad> as we are trying to inject it in between the items
    child);
exports.childTobeRendered = childTobeRendered;
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 26134:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { useIntl } = __webpack_require__(46984);
const ResponsiveAsset = __webpack_require__(73275);
const SectionTitle = __webpack_require__(35864);
const { componentTracking } = __webpack_require__(90090);
const { asConfiguredComponent } = __webpack_require__(12892);
const translations = (__webpack_require__(77816)/* ["default"] */ .A);
const Button = __webpack_require__(73730);
const { VersoIssueFeatureHed, VersoIssueFeatureDek, VersoIssueFeatureWrapper, VersoIssueFeatureSectionTitle, VersoIssueFeatureMain, VersoIssueFeatureDekContainer, VersoIssueFeatureTocWrap, VersoIssueFeatureToc, VersoIssueFeatureMagazineContainer, VersoIssueFeatureMagazineIssueDate, VersoIssueFeatureMagazineIssueName, VersoIssueFeatureMagazineIssueImage, VersoIssueFeatureMagazineLink, VersoIssueFeatureMagazineIssueCaption } = __webpack_require__(72542);
const { TrackComponentChannel } = __webpack_require__(78788);
const { getVariationNames } = __webpack_require__(81372);
/**
 * VersoIssueFeature component
 *
 * @param {object} props - React props
 * @param {string} [props.btnStyle] - Prop used to set the button styling (filled or otulined or text)
 * @param {string} [props.buttonVariation] -  A prop to specify the variation of button
 * @param {string} [props.dangerousDek] -  A string (possibly HTML) to use as the subTitle
 * @param {string} props.dangerousHed - A string (possibly HTML) to use as the title
 * @param {bool} [props.shouldEnableImageAccessibility] - Optional flag to remove the element from the VoiceOver cursor and tabindex to remove element from the keyboard tab order.
 * @param {bool} [props.hideItemHed] - Optional flag to show or hide Item hed
 * @param {bool} [props.hideSectionTitle] - Optional flag to hide the section title
 * @param {bool} [props.hideSourceDek] - Optional flag to hide the dek above the magazine image
 * @param {bool} [props.hideSourceHed] - Optional flag to hide the Hed above the magazine image
 * @param {string} [props.issueFeatureLabel] - Optional text to override the existing TOC Label
 * @param {Array<SummaryItem.propTypes>} props.items - Array of items to render
 * @param {string} [props.sectionTitleVariation] - Variation of SectionTitle component you would like to use
 * @param {bool} [props.shouldEnableBundleComponentAnalytics] - feature flag to append data-section-title attribute for analytics
 * @param {bool} [props.shouldUseButtonAsLink] - Optional flag to set a button as link
 * @param {bool} [props.shouldUseMagazineLinkFromBundleItem] - Optional flag to set a dynamic magazine link from bundle item
 * @param {bool} [props.shouldUseDescriptionPrimary] - Optional flag to set styling of dek to primary
 * @param {bool} [props.showImageCaption] - Optional flag to show/hide the image caption, defaults to true
 * @param {object} [props.trackingNamespace] - Optional override the base namespace of data-section-title for component tracking
 * @param {object} [props.variations] - Optional. Variation properties used in rendering the component.
 * @param {string} [props.variations.contentAlign] - [`eft`, `right`, `center`] Optional flag to align content
 * @param {bool} [props.variations.isDarkBackground] - Optional flag to set dark background
 * @param {bool} [props.variations.isFullBleed] - Optional flag to remove all padding of image
 * @param {string} [props.variations.layoutPosition] - [`image-left`, `image-right`, ] Optional. Set which side the
 *   image is on in side by side layouts.
 * @returns {ReactElement} <div>
 */
const VersoIssueFeature = ({ btnStyle = 'text', buttonVariation = 'Primary', dangerousDek, dangerousHed, hideItemHed = true, hideSectionTitle = false, hideSourceDek = false, hideSourceHed = false, issueFeatureLabel, items, sectionTitleVariation = 'LineAboveLineBelowTextLeft', shouldEnableBundleComponentAnalytics, shouldEnableImageAccessibility = false, shouldUseButtonAsLink = false, shouldUseMagazineLinkFromBundleItem = false, shouldUseDescriptionPrimary = true, showImageCaption = true, trackingNamespace, variations = {
    contentAlign: 'left',
    isDarkBackground: false,
    isFullBleed: false,
    layoutPosition: 'image-right'
} }) => {
    const { contentAlign, isFullBleed, isDarkBackground, layoutPosition } = variations;
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'VersoIssueFeature'
        });
    }, []);
    const { formatMessage } = useIntl();
    // First item in the container is a bundle
    const magazineItem = items[0];
    if (!magazineItem) {
        return null;
    }
    const analyticsDataAttributeTOC = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNamespace?.toc);
    const analyticsDataAttributeIssueCover = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNamespace?.issueCover);
    const analyticsDataAttributeInlineLinks = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNamespace?.inlineLinks);
    const analyticsDataAttributeInlineHedLinks = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNamespace?.inlineHedLinks);
    const magazineLink = shouldUseMagazineLinkFromBundleItem
        ? magazineItem.url
        : '/magazine';
    const imagLinkAttribute = shouldEnableImageAccessibility
        ? {
            tabIndex: -1,
            'aria-hidden': true
        }
        : {};
    const titleVariation = SectionTitle[sectionTitleVariation] || SectionTitle;
    const ButtonComponent = Button[buttonVariation];
    const issueFeatureLabelContent = issueFeatureLabel || formatMessage(translations.issueFeatureLabel);
    return (React.createElement(VersoIssueFeatureWrapper, { dataTestId: "VersoIssueFeatureWrapper" },
        !hideSectionTitle && (React.createElement(VersoIssueFeatureSectionTitle, { as: titleVariation, dangerousHed: dangerousHed, hasDividerAbove: true, hasDividerBelow: true, hedTag: "h2", link: {
                html: dangerousDek
            } })),
        React.createElement(VersoIssueFeatureMain, { className: "verso-issue-feature__main", layoutPosition: layoutPosition, isDarkBackground: isDarkBackground },
            React.createElement(VersoIssueFeatureDekContainer, { "data-testid": "VersoIssueFeatureDekContainer", contentAlign: contentAlign },
                !hideItemHed && (React.createElement(VersoIssueFeatureHed, { "data-testid": "VersoIssueFeatureHed", ...analyticsDataAttributeInlineHedLinks, dangerouslySetInnerHTML: { __html: magazineItem.dangerousHed } })),
                React.createElement(VersoIssueFeatureDek, { "data-testid": "VersoIssueFeatureDek", ...analyticsDataAttributeInlineLinks, dangerouslySetInnerHTML: { __html: magazineItem.dangerousDek }, shouldUseDescriptionPrimary: shouldUseDescriptionPrimary }),
                React.createElement(VersoIssueFeatureTocWrap, { "data-testid": "VersoIssueFeatureTocWrap", ...analyticsDataAttributeTOC, contentAlign: contentAlign }, shouldUseButtonAsLink ? (React.createElement(ButtonComponent, { "data-testid": "VersoIssueFeatureButtonComponent", btnStyle: btnStyle, label: issueFeatureLabelContent, ariaLabel: issueFeatureLabelContent, href: magazineLink, inputKind: "link" })) : (React.createElement(VersoIssueFeatureToc, { "data-testid": "VersoIssueFeatureToc", href: magazineLink }, issueFeatureLabelContent)))),
            React.createElement(VersoIssueFeatureMagazineContainer, { "data-testid": "VersoIssueFeatureMagazineContainer" },
                !hideSourceHed && (React.createElement(VersoIssueFeatureMagazineIssueDate, { className: "verso-issue-feature__magazine-issue-date", "data-testid": "VersoIssueFeatureMagazineIssueDate", dangerouslySetInnerHTML: { __html: magazineItem.dangerousHed } })),
                !hideSourceDek && magazineItem.source?.dek && (React.createElement(VersoIssueFeatureMagazineIssueName, { className: "verso-issue-feature__magazine-issue-name", "data-testid": "VersoIssueFeatureMagazineIssueName" }, magazineItem.source.dek)),
                magazineItem.image && (React.createElement(VersoIssueFeatureMagazineIssueImage, { "data-testid": "VersoIssueFeatureMagazineIssueImage", ...analyticsDataAttributeIssueCover, isFullBleed: isFullBleed },
                    React.createElement(VersoIssueFeatureMagazineLink, { href: magazineLink, "data-testid": "VersoIssueFeatureMagazineLink", ...imagLinkAttribute },
                        React.createElement(ResponsiveAsset, { ...magazineItem.image })))),
                showImageCaption && magazineItem?.image?.caption && (React.createElement(VersoIssueFeatureMagazineIssueCaption, { "data-testid": "VersoIssueFeatureMagazineIssueCaption" }, magazineItem.image.caption))))));
};
const BUTTON_VARIATIONS = getVariationNames(Button);
VersoIssueFeature.propTypes = {
    btnStyle: PropTypes.oneOf(['filled', 'outlined', 'text']),
    buttonVariation: PropTypes.oneOf(BUTTON_VARIATIONS),
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string.isRequired,
    hideItemHed: PropTypes.bool,
    hideSectionTitle: PropTypes.bool,
    hideSourceDek: PropTypes.bool,
    hideSourceHed: PropTypes.bool,
    issueFeatureLabel: PropTypes.string,
    items: PropTypes.arrayOf(PropTypes.shape()).isRequired,
    sectionTitleVariation: PropTypes.string,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldEnableImageAccessibility: PropTypes.bool,
    shouldUseButtonAsLink: PropTypes.bool,
    shouldUseDescriptionPrimary: PropTypes.bool,
    shouldUseMagazineLinkFromBundleItem: PropTypes.bool,
    showImageCaption: PropTypes.bool,
    trackingNamespace: PropTypes.object,
    variations: PropTypes.shape({
        contentAlign: PropTypes.oneOf(['center', 'right', 'left']),
        isDarkBackground: PropTypes.bool,
        isFullBleed: PropTypes.bool,
        layoutPosition: PropTypes.oneOf(['image-left', 'image-right'])
    })
};
VersoIssueFeature.displayName = 'VersoIssueFeature';
module.exports = asConfiguredComponent(VersoIssueFeature, 'VersoIssueFeature');
//# sourceMappingURL=VersoIssueFeature.js.map

/***/ }),

/***/ 29794:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(17965);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 72542:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { GridItem } = __webpack_require__(40653);
const Grid = __webpack_require__(86659);
const { BREAKPOINTS } = __webpack_require__(96472);
const { BaseLink, BaseText } = __webpack_require__(76955);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const { calculateSpacing, getColorToken, minScreen, getTypographyStyles } = __webpack_require__(26865);
const VersoIssueFeatureDek = styled(BaseText).withConfig({
    displayName: 'VersoIssueFeatureDek'
}) `
  margin-top: 0;
  margin-bottom: ${calculateSpacing(6)};

  ${minScreen(BREAKPOINTS.md)} {
    order: 2;
    margin-top: ${calculateSpacing(2)};
    margin-bottom: ${calculateSpacing(2)};
  }

  a {
    color: ${getColorToken('colors.discovery.lead.secondary.description')};
  }
  ${({ shouldUseDescriptionPrimary }) => !shouldUseDescriptionPrimary &&
    getTypographyStyles('typography.definitions.discovery.description-core')};

  .small {
    font-variant: small-caps;
    text-transform: lowercase;
    font-style: normal;
  }
`;
VersoIssueFeatureDek.defaultProps = {
    colorToken: 'colors.discovery.lead.secondary.description',
    typeIdentity: 'typography.definitions.discovery.description-feature'
};
const VersoIssueFeatureHed = styled(BaseText).withConfig({
    displayName: 'VersoIssueFeatureHed'
}) `
  margin-top: ${calculateSpacing(6)};
  ${minScreen(BREAKPOINTS.md)} {
    margin-top: ${calculateSpacing(2)};
  }
`;
VersoIssueFeatureHed.defaultProps = {
    colorToken: 'colors.discovery.lead.primary.hed',
    typeIdentity: 'typography.definitions.discovery.hed-core-primary'
};
const VersoIssueFeatureWrapper = styled(Grid.WithMargins).withConfig({
    displayName: 'VersoIssueFeatureWrapper'
}) `
  > ${GridItem} {
    grid-column: 1/-1;
  }
`;
const VersoIssueFeatureSectionTitle = styled.span.withConfig({
    displayName: 'VersoIssueFeatureSectionTitle'
}) ``;
const getDarkBackgroundColor = css `
  background-color: ${getColorToken('colors.discovery.body.dark.background')};
`;
const VersoIssueFeatureMain = styled(Grid.TwoUpFullBleedNoGap).withConfig({
    displayName: 'VersoIssueFeatureMain'
}) `
  && {
    align-items: center;
    column-gap: ${calculateSpacing(4)};
  }

  > ${GridItem}:first-child {
    order: 2;
  }

  > ${GridItem} + ${GridItem} {
    order: 1;
  }

  ${minScreen(BREAKPOINTS.md)} {
    > ${GridItem}:first-child {
      order: ${({ layoutPosition }) => layoutPosition === 'image-left' ? 2 : 1};
    }

    > ${GridItem} + ${GridItem} {
      order: ${({ layoutPosition }) => layoutPosition === 'image-left' ? 1 : 2};
    }
  }

  ${({ isDarkBackground }) => isDarkBackground && getDarkBackgroundColor}
`;
const VersoIssueFeatureDekContainer = styled.div.withConfig({
    displayName: 'VersoIssueFeatureDekContainer'
}) `
  text-align: center;
  ${minScreen(BREAKPOINTS.md)} {
    ${({ contentAlign }) => `text-align: ${contentAlign};`}
  }
`;
const VersoIssueFeatureTocWrap = styled.div.withConfig({
    displayName: 'VersoIssueFeatureTocWrap'
}) `
  margin-bottom: ${calculateSpacing(6)};
  text-align: center;
  ${minScreen(BREAKPOINTS.md)} {
    margin-bottom: 0;
    ${({ contentAlign }) => `text-align: ${contentAlign};`}
  }
`;
const VersoIssueFeatureToc = styled(BaseLink).withConfig({
    displayName: 'VersoIssueFeatureToc'
}) ``;
VersoIssueFeatureToc.defaultProps = {
    as: 'a',
    colorSecondaryLinkToken: 'colors.interactive.base.dark',
    colorStaticLinkToken: 'colors.interactive.base.brand-primary',
    colorToken: 'colors.interactive.base.brand-primary',
    typeToken: 'typography.definitions.foundation.link-primary'
};
const VersoIssueFeatureMagazineContainer = styled.div.withConfig({
    displayName: 'VersoIssueFeatureMagazineContainer'
}) `
  padding-top: ${calculateSpacing(4)};
  text-align: center;
  ${minScreen(BREAKPOINTS.md)} {
    padding-top: 0;
  }
`;
const VersoIssueFeatureMagazineIssueDate = styled(BaseText).withConfig({
    displayName: 'VersoIssueFeatureMagazineIssueDate'
}) ``;
VersoIssueFeatureMagazineIssueDate.defaultProps = {
    as: 'div',
    bottomSpacing: 0.5,
    typeIdentity: 'typography.definitions.globalEditorial.context-primary'
};
const VersoIssueFeatureMagazineIssueName = styled(BaseText).withConfig({
    displayName: 'VersoIssueFeatureMagazineIssueName'
}) ``;
VersoIssueFeatureMagazineIssueName.defaultProps = {
    colorToken: 'colors.discovery.body.white.context-signature',
    typeIdentity: 'typography.definitions.globalEditorial.context-primary'
};
const VersoIssueFeatureMagazineIssueImage = styled.div.withConfig({
    displayName: 'VersoIssueFeatureMagazineIssueImage'
}) `
  margin: auto;
  ${({ isFullBleed }) => isFullBleed
    ? `
       ${ResponsiveImageContainer} {
          width: 100%;
        }
      `
    : `
      max-width: 154px;
      ${minScreen(BREAKPOINTS.md)} {
          max-width: 244px;
      }
      span {
        box-shadow: 0 0 24px 0 rgba(45, 45, 45, 0.16);
      }
      padding: ${calculateSpacing(2)} 0;
    `}
`;
const VersoIssueFeatureMagazineLink = styled(BaseLink).withConfig({
    displayName: 'VersoIssueFeatureMagazineLink'
}) ``;
const VersoIssueFeatureMagazineIssueCaption = styled(BaseText).withConfig({
    displayName: 'VersoIssueFeatureMagazineIssueCaption'
}) ``;
VersoIssueFeatureMagazineIssueCaption.defaultProps = {
    bottomSpacing: 2,
    colorToken: 'colors.interactive.base.dark',
    typeIdentity: 'typography.definitions.globalEditorial.context-secondary'
};
module.exports = {
    VersoIssueFeatureDek,
    VersoIssueFeatureHed,
    VersoIssueFeatureWrapper,
    VersoIssueFeatureSectionTitle,
    VersoIssueFeatureMain,
    VersoIssueFeatureDekContainer,
    VersoIssueFeatureTocWrap,
    VersoIssueFeatureToc,
    VersoIssueFeatureMagazineContainer,
    VersoIssueFeatureMagazineIssueDate,
    VersoIssueFeatureMagazineIssueName,
    VersoIssueFeatureMagazineIssueImage,
    VersoIssueFeatureMagazineLink,
    VersoIssueFeatureMagazineIssueCaption
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 77816:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    issueFeatureLabel: {
        id: 'VersoIssueFeature.IssueFeatureLabel',
        defaultMessage: 'Table of Contents \u00BB',
        description: 'Label for magazine link'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 17965:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const VersoIssueFeature = __webpack_require__(26134);
VersoIssueFeature.TextCenterImageLeftDark = asVariation(VersoIssueFeature, 'TextCenterImageLeftDark', {
    contentAlign: 'center',
    isDarkBackground: true,
    layoutPosition: 'image-left'
}, {});
VersoIssueFeature.TextCenterImageLeftFullBleedDark = asVariation(VersoIssueFeature, 'TextCenterImageLeftFullBleedDark', {
    contentAlign: 'center',
    isDarkBackground: true,
    isFullBleed: true,
    layoutPosition: 'image-left'
}, {});
module.exports = VersoIssueFeature;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 63395:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const _uniqueId = __webpack_require__(97200);
const Carousel = __webpack_require__(30830);
const ProductEmbed = __webpack_require__(75871);
const UnifiedProductCard = __webpack_require__(51125);
const { Disclaimer } = __webpack_require__(74307);
const { Title, VersoNativeProductCarouselWrapper } = __webpack_require__(97840);
const { TrackComponentChannel } = __webpack_require__(78788);
const SectionTitle = __webpack_require__(35864);
const CAROUSEL_SLIDE_SIZING = {
    width: { sm: 'calc(45% - 12px)', lg: 'calc(28% - 12px)' },
    spacing: { sm: '0px', lg: '12px' }
};
/**
 * VersoNativeProductCarousel component
 *
 * @param {object} props - React props
 * @param {string} [props.affiliateDisclaimer] - Optional disclaimer text for affiliate products
 * @param {string} props.dangerousHed - A string (possibly HTML) to use as the title
 * @param {Array} props.items - Array of items to render
 * @param {bool} [props.hasMargin] - Optional prop for adding the padding on left and right in wrapper
 * @param {string} [props.sectionTitleVariation] - Optional variation of SectionTitle to use
 * @param {bool} [props.hasNoHorizontalScrollCarousel] - Optional prop for disabling the horizontal scroll in carousel
 * @param {bool} [props.isFirstProductListingContainer] - optional flag for showing discalimer for first product listing carousel
 * @param {bool} [props.showDisclaimer] - flag to determine to show disclaimer or not
 *
 * @returns {ReactElement} <div>
 */
const VersoNativeProductCarousel = ({ dangerousHed, hasNoHorizontalScrollCarousel, hasMargin, sectionTitleVariation = 'LineAboveLineBelowTextCenter', isFirstProductListingContainer, affiliateDisclaimer, items = [], showDisclaimer }) => {
    const [carouselId] = React.useState(parseInt(_uniqueId(), 10));
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'VersoNativeProductCarousel'
        });
    }, []);
    const shouldShowDisclaimer = items.length > 0 && showDisclaimer && isFirstProductListingContainer;
    const SectionTitleComponent = SectionTitle[sectionTitleVariation];
    return (React.createElement(VersoNativeProductCarouselWrapper, { hasMargin: hasMargin },
        dangerousHed && (React.createElement(Title, { as: SectionTitleComponent, dangerousHed: dangerousHed })),
        React.createElement(Disclaimer.TextCenterNoTopRule, { isEnabled: shouldShowDisclaimer, disclaimerHtml: affiliateDisclaimer }),
        items.length && (React.createElement(Carousel, { className: "product__carousel__bundle", controlPosition: "center", controlPlacement: "space-between", hasNoHorizontalScrollCarousel: hasNoHorizontalScrollCarousel, hasPagination: true, dangerousHed: dangerousHed, pos: carouselId, isUpcEnabled: items[0].isUpcEnabled }, items.map((item, index) => {
            const data_item = {
                ...item,
                id: item.productId,
                offers: item.multipleOffers,
                layout: 'ProductEmbed',
                index
            };
            return (React.createElement(Carousel.CarouselItem, { ...CAROUSEL_SLIDE_SIZING, key: `product-bundle-${index}`, carouselTitle: dangerousHed, carouselItemIndex: index, carouselItemName: item.dangerousHed, pos: carouselId }, item.isUpcEnabled ? (React.createElement(UnifiedProductCard, { type: "card", brand: item.productBrand, offers: item.multipleOffers, index: index, ...item, className: "product__carousel__card", isLazy: true, hedTag: "h3", data_item: data_item, hasImpressionTracking: true, layout: "ContentCarousel", shouldDisableCreditText: true, componentUsed: "carousel" })) : (React.createElement(ProductEmbed, { index: index, ...item, className: "product__carousel__card", isLazy: true, hedTag: "h3", layout: "ContentCarousel", component: "carousel" }))));
        })))));
};
VersoNativeProductCarousel.propTypes = {
    affiliateDisclaimer: PropTypes.string,
    dangerousHed: PropTypes.string.isRequired,
    hasMargin: PropTypes.bool,
    hasNoHorizontalScrollCarousel: PropTypes.bool,
    isFirstProductListingContainer: PropTypes.bool,
    items: PropTypes.array.isRequired,
    sectionTitleVariation: PropTypes.string,
    showDisclaimer: PropTypes.bool
};
VersoNativeProductCarousel.displayName = 'VersoNativeProductCarousel';
module.exports = VersoNativeProductCarousel;
//# sourceMappingURL=VersoNativeProductCarousel.js.map

/***/ }),

/***/ 31828:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const VersoNativeProductCarousel = __webpack_require__(63395);
module.exports = asConfiguredComponent(VersoNativeProductCarousel, 'VersoNativeProductCarousel');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 97840:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing } = __webpack_require__(26865);
const { applyGridSpacing, cssVariablesGrid } = __webpack_require__(1123);
const Title = styled.div.withConfig({
    displayName: 'Title'
}) `
  margin-bottom: ${calculateSpacing(4)};
`;
const VersoNativeProductCarouselWrapper = styled.div.withConfig({
    displayName: 'VersoNativeProductCarouselWrapper'
}) `
  ${cssVariablesGrid}
  ${({ hasMargin }) => hasMargin && applyGridSpacing('padding')}
`;
module.exports = { Title, VersoNativeProductCarouselWrapper };
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 31300:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const GroupCallout = __webpack_require__(31830);
const ProductEmbed = __webpack_require__(19057);
const { Disclaimer } = __webpack_require__(74307);
const { VersoNativeProductTitle } = __webpack_require__(19145);
const { TrackComponentChannel } = __webpack_require__(78788);
const SectionTitle = __webpack_require__(35864);
/**
 * VersoNativeProduct component
 *
 * @param {object} props - React props
 * @param {string} props.dangerousHed - A string (possibly HTML) to use as the title
 * @param {Array} props.items - Array of items to render
 * @param {bool} [props.isSponsoredAffiliateLinksEnabled] - feature flag to...
 * @param {string} [props.sectionTitleVariation] - Optional variation of SectionTitle to use
 *
 * @returns {ReactElement} <div>
 */
const VersoNativeProduct = ({ dangerousHed, isSponsoredAffiliateLinksEnabled, sectionTitleVariation = 'LineAboveLineBelowTextCenter', items = [] }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'VersoNativeProduct'
        });
    }, []);
    const shouldRenderImageTopVariation = items.length >= 3;
    const shouldRenderImageLeftVariation = items.length <= 2;
    const SectionTitleComponent = SectionTitle[sectionTitleVariation];
    return (React.createElement(React.Fragment, null,
        dangerousHed && (React.createElement(VersoNativeProductTitle, { as: SectionTitleComponent, dangerousHed: dangerousHed })),
        React.createElement(Disclaimer.TextCenterNoTopRule, { isEnabled: isSponsoredAffiliateLinksEnabled }),
        shouldRenderImageTopVariation && (React.createElement(GroupCallout, { childTypes: ['product'] }, items.map((item, index) => (React.createElement(ProductEmbed.ImageTop, { ...item, key: `native-product-embed-top-${index}` }))))),
        shouldRenderImageLeftVariation && (React.createElement(GroupCallout, { childTypes: ['product'] }, items.map((item, index) => (React.createElement(ProductEmbed.ImageLeftWithButtonAndTextCentered, { ...item, key: `native-product-embed-left-${index}` })))))));
};
VersoNativeProduct.propTypes = {
    dangerousHed: PropTypes.string.isRequired,
    isSponsoredAffiliateLinksEnabled: PropTypes.bool,
    items: PropTypes.array.isRequired,
    sectionTitleVariation: PropTypes.string
};
VersoNativeProduct.displayName = 'VersoNativeProduct';
module.exports = VersoNativeProduct;
//# sourceMappingURL=VersoNativeProduct.js.map

/***/ }),

/***/ 72775:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const VersoNativeProduct = __webpack_require__(31300);
module.exports = asConfiguredComponent(VersoNativeProduct, 'VersoNativeProduct');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 19145:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { calculateSpacing } = __webpack_require__(26865);
const VersoNativeProductTitle = styled.div.withConfig({
    displayName: 'VersoNativeProductTitle'
}) `
  margin-bottom: ${calculateSpacing(4)};
`;
module.exports = { VersoNativeProductTitle };
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 39812:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const ProductVisual = __webpack_require__(49350);
const VersoFilterableSummaryList = __webpack_require__(10220);
const { VersoPlpCuratedWrapper } = __webpack_require__(20519);
/**
 * VersoPlpCurated component
 *
 * @param {object} props - React props
 * @param {string} [props.hed] - heading text, aka _hed_ (example component prop)
 * @param {string} [props.dek] - dek text
 * @param {object} [props.expertCardContent] - expertCardContent of `{ title, links[] }` information
 * @param {Array} [props.productList] - productList of `{ products }` information
 * @param {object} [props.productVisualAsset] - productVisualAsset containing asset details supported by `ResponsiveAsset` component
 * @param {object} [props.groups] - List of groups associated with a ToggleChip
 * @param {object} [props.gridConfig] - gridConfig containing grid configuration details
 * @param {string} [props.templateLayout] - prop for template layout of the bundle container
 * @param {boolean} [props.isGrid] - boolean value of prop is true if layout is GridFourColumns
 * @param {boolean} [props.isSeriesNavigation] - boolean value of prop is true if layout is SeriesNavigationCarousel
 * @param {boolean} [props.hasCarouselSliderPagination] - flag to add the slider for carousel
 * @param {boolean} [props.shouldAppendReadMoreLinkForDek] - flag to append the read more dek
 * @param {boolean} [props.showShopNowButton] - Optiona; to show the Shop Now CTA button
 * @param {boolean} [props.summaryItemVariation] - Optiona; SummaryItem variation name
 * @param {boolean} [props.shouldAppendReadMoreLinkForDek] - Optiona; flag to render read more link with dek in SummaryItem
 * @param {boolean} [props.showShopNowButton] - Optional; to show the Shop Now CTA button
 * @param {boolean} [props.shouldUseSmallHed] - Optional; to update the typography
 * @param {boolean} [props.summaryItemVariation] - Optional; SummaryItem variation name
 * @param {boolean} [props.isPlpCurated] - Optional - to remove the padding bottom from carousel slider
 * @param {boolean} [props.isContentCenter] - Optional - to align content and button center
 * @param {string} [props.paginationStyle] - Optional prop to specify pagination style
 * @param {boolean} [props.hasPadding] - Optional prop to flag for padding top is added/removed
 * @param {boolean} [props.hasCustomSlider] - n optional boolean that when set to true displays custom slider when pagination slider style is enabled.
 * @param {bolean} [props.isUpcEnabled] - Optinal boolean that is used to enable Unified Product card
 * @param {boolean} [props.hideDesktopPagination] - Optional flag to hide pagination dots on desktop
 * @param {string} [props.affiliateDisclaimer] - Optional disclaimer text for affiliate products
 * @param {boolean} [props.isFirstProductListingContainer] - flag for first productlisting container
 * @param {boolean} [props.hasAffiliateLinkDisabled] - optional prop for disabling affiliate link and show offer url
 * @param {boolean} [props.hideRubricLink] - [`bool`] Optional. Set `true` for hide rubrics link, set `false` for show rubrics link.
 * @param {boolean} [props.shouldHideDangerousDek] - Optional flag to hide dek for summary Item
 * @returns {ReactElement} <div>
 */
const VersoPlpCurated = (props) => {
    const { hed, dek, groups, gridConfig, hasAffiliateLinkDisabled, hasCarouselSliderPagination, templateLayout, isGrid, isSeriesNavigation, productVisualAsset, expertCardContent = undefined, productList = [], shouldAppendReadMoreLinkForDek, showShopNowButton, summaryItemVariation, isUpcEnabled, paginationStyle, shouldUseSmallHed, isPlpCurated, isContentCenter, shouldOpenInternalLinksInNewTab, hasPadding, hasCustomSlider, hideDesktopPagination, hasBorder, affiliateDisclaimer, isFirstProductListingContainer, hideRubricLink, showDisclaimer, showRichTextInDek, shouldHideDangerousDek, containerIndex } = props;
    const isVisualLayout = templateLayout === 'VisualCarousel';
    return isVisualLayout ? (React.createElement(VersoPlpCuratedWrapper, null,
        React.createElement(ProductVisual, { hed: hed, productList: productList, productVisualAsset: productVisualAsset, expertCardContent: expertCardContent, summaryItemVariation: summaryItemVariation, shouldAppendReadMoreLinkForDek: shouldAppendReadMoreLinkForDek, showShopNowButton: showShopNowButton, isUpcEnabled: isUpcEnabled, isContentCenter: isContentCenter, isPlpCurated: isPlpCurated, shouldOpenInternalLinksInNewTab: shouldOpenInternalLinksInNewTab, hideDesktopPagination: hideDesktopPagination, affiliateDisclaimer: affiliateDisclaimer, isFirstProductListingContainer: isFirstProductListingContainer, hasAffiliateLinkDisabled: hasAffiliateLinkDisabled, hideRubricLink: hideRubricLink, showDisclaimer: showDisclaimer, showRichTextInDek: showRichTextInDek, shouldHideDangerousDek: shouldHideDangerousDek, templateLayout: templateLayout }))) : (React.createElement(VersoPlpCuratedWrapper, null,
        React.createElement(VersoFilterableSummaryList, { dangerousHed: hed, dangerousDek: dek, groups: groups, gridConfig: gridConfig, isGrid: isGrid, layout: templateLayout, hasCarouselSliderPagination: hasCarouselSliderPagination, summaryItemVariation: summaryItemVariation, shouldAppendReadMoreLinkForDek: shouldAppendReadMoreLinkForDek, showShopNowButton: showShopNowButton, isUpcEnabled: isUpcEnabled, shouldUseSmallHed: shouldUseSmallHed, isContentCenter: isSeriesNavigation ? false : isContentCenter, isPlpCurated: isPlpCurated, shouldOpenInternalLinksInNewTab: shouldOpenInternalLinksInNewTab, paginationStyle: paginationStyle, hasPadding: hasPadding, hasCustomSlider: hasCustomSlider, hideDesktopPagination: hideDesktopPagination, hasBorder: hasBorder, isFirstProductListingContainer: isFirstProductListingContainer, affiliateDisclaimer: affiliateDisclaimer, hasAffiliateLinkDisabled: hasAffiliateLinkDisabled, isSeriesNavigation: isSeriesNavigation, hasBorderBottom: isSeriesNavigation, hideRubricLink: hideRubricLink, showDisclaimer: showDisclaimer, showRichTextInDek: showRichTextInDek, shouldHideDangerousDek: shouldHideDangerousDek, containerIndex: containerIndex })));
};
VersoPlpCurated.propTypes = {
    affiliateDisclaimer: PropTypes.string,
    containerIndex: PropTypes.number,
    dek: PropTypes.string,
    expertCardContent: PropTypes.object,
    gridConfig: PropTypes.object,
    groups: PropTypes.array,
    hasAffiliateLinkDisabled: PropTypes.bool,
    hasBorder: PropTypes.bool,
    hasCarouselSliderPagination: PropTypes.bool,
    hasCustomSlider: PropTypes.bool,
    hasPadding: PropTypes.bool,
    hed: PropTypes.string,
    hideDesktopPagination: PropTypes.bool,
    hideRubricLink: PropTypes.bool,
    isContentCenter: PropTypes.bool,
    isFirstProductListingContainer: PropTypes.bool,
    isGrid: PropTypes.bool,
    isPlpCurated: PropTypes.bool,
    isSeriesNavigation: PropTypes.bool,
    isUpcEnabled: PropTypes.bool,
    paginationStyle: PropTypes.string,
    productList: PropTypes.array,
    productVisualAsset: PropTypes.object,
    shouldAppendReadMoreLinkForDek: PropTypes.bool,
    shouldHideDangerousDek: PropTypes.bool,
    shouldOpenInternalLinksInNewTab: PropTypes.bool,
    shouldUseSmallHed: PropTypes.bool,
    showDisclaimer: PropTypes.bool,
    showRichTextInDek: PropTypes.bool,
    showShopNowButton: PropTypes.bool,
    summaryItemVariation: PropTypes.string,
    templateLayout: PropTypes.string
};
module.exports = VersoPlpCurated;
//# sourceMappingURL=VersoPlpCurated.js.map

/***/ }),

/***/ 18853:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const VersoPlpCurated = __webpack_require__(39812);
module.exports = asConfiguredComponent(VersoPlpCurated, 'VersoPlpCurated');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 20519:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { calculateSpacing } = __webpack_require__(26865);
const VersoPlpCuratedWrapper = styled.div.withConfig({
    displayName: 'VersoPlpCuratedWrapper'
}) `
  ${({ hasPaddingTop }) => hasPaddingTop && `padding-top: ${calculateSpacing(4)}`}
`;
module.exports = {
    VersoPlpCuratedWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 91424:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { TrackComponentChannel } = __webpack_require__(78788);
const { encodeImageURI } = __webpack_require__(96165);
const { LinkBanner } = __webpack_require__(82873);
const OverlaySummaryItem = __webpack_require__(18463);
const ResponsiveAsset = __webpack_require__(73275);
const SectionTitle = __webpack_require__(35864);
const { VersoSummarySpotlightByline, VersoSummarySpotlightContainer, VersoSummarySpotlightContentDivider, VersoSummarySpotlightLeadItem, VersoSummarySpotlightLeadItemContainer, VersoSummarySpotlightLeadItemWrapper, VersoSummarySpotlightSecondaryItems, VersoSummarySpotlightSecondaryItemsWrapper, VersoSummarySpotlightSectionTitle, VersoSummarySpotlightWrapper } = __webpack_require__(78021);
/**
 * VersoSummarySpotlight component
 *
 * @param {object} props - React props
 * @param {object} props.image - Object containing ResponsiveClip or ResponsiveImage properties
 * @param {string} props.className - Optional top-level class to add
 * @param {object} props.contributor - Contributor of the summary item.
 * @param {string} props.dangerousDek - Additional promo text to display for the lead item
 * @param {string} props.dangerousHed - A string (possibly HTML) to use as the title of the lead item
 * @param {string} props.rubric - A rubric text to display for the lead item
 * @param {string} props.url - Url for the lead summary item.
 * @param {string} props.sectionHed - Title of the spotlight section
 * @param {Array} props.secondaryItems - Secondary items to be displayed
 *
 * @returns {ReactElement} <VersoSummarySpotlight>
 */
const VersoSummarySpotlight = ({ image, className, contributor, dangerousDek, dangerousHed, rubric, secondaryItems, sectionHed, url }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'VersoSummarySpotlight'
        });
    }, []);
    const linkBannerData = {
        links: secondaryItems,
        bannerType: 'visual-link-banner'
    };
    const baseSources = image.segmentedSources
        ? {
            sm: Object.values(image.segmentedSources.sm).pop(),
            lg: Object.values(image.segmentedSources.lg).pop()
        }
        : '';
    const imageSources = {
        smUrl: encodeImageURI(baseSources.sm.url),
        lgUrl: encodeImageURI(baseSources.lg.url)
    };
    return (React.createElement(VersoSummarySpotlightWrapper, { className: classnames('verso-summary-spotlight', className) },
        React.createElement(VersoSummarySpotlightLeadItemWrapper, { imageSources: imageSources },
            React.createElement(VersoSummarySpotlightContainer, null,
                React.createElement(VersoSummarySpotlightLeadItemContainer, null,
                    sectionHed && (React.createElement(VersoSummarySpotlightSectionTitle, null,
                        React.createElement(SectionTitle, { dangerousHed: sectionHed, hasDividerAbove: true, "data-testid": "section-title" }))),
                    React.createElement(VersoSummarySpotlightLeadItem, null,
                        React.createElement(OverlaySummaryItem, { contentAlign: "left", dangerousHed: dangerousHed, dangerousDek: dangerousDek, rubric: rubric, shouldLeftAlignContent: true, url: url, hasLeftMargin: false, rubricVariation: "Item", shouldDisplayDangerousDekOverlay: true }),
                        contributor?.items && (React.createElement(VersoSummarySpotlightByline, { ...contributor })))),
                React.createElement(VersoSummarySpotlightContentDivider, null))),
        React.createElement(VersoSummarySpotlightSecondaryItemsWrapper, null,
            React.createElement(VersoSummarySpotlightContainer, null,
                React.createElement(VersoSummarySpotlightSecondaryItems, null,
                    React.createElement(LinkBanner, { linkBannerData: linkBannerData }))))));
};
VersoSummarySpotlight.propTypes = {
    className: PropTypes.string,
    contributor: PropTypes.object,
    dangerousDek: PropTypes.string.isRequired,
    dangerousHed: PropTypes.string.isRequired,
    image: PropTypes.shape(ResponsiveAsset.propTypes).isRequired,
    rubric: PropTypes.object,
    secondaryItems: PropTypes.array,
    sectionHed: PropTypes.string,
    url: PropTypes.string.isRequired
};
VersoSummarySpotlight.displayName = 'VersoSummarySpotlight';
module.exports = VersoSummarySpotlight;
//# sourceMappingURL=VersoSummarySpotlight.js.map

/***/ }),

/***/ 22651:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const VersoSummarySpotlight = __webpack_require__(91424);
const { asConfiguredComponent } = __webpack_require__(12892);
module.exports = asConfiguredComponent(VersoSummarySpotlight, 'VersoSummarySpotlight');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 78021:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { BREAKPOINTS } = __webpack_require__(96472);
const MAX_MOBILE_WIDTH = '767px';
const MAX_TABLET_WIDTH = '1279px';
const { applyGridSpacing, cssVariablesGrid } = __webpack_require__(1123);
const { calculateSpacing, getColorStyles, getColorToken, getTypographyStyles, maxScreen, minScreen } = __webpack_require__(26865);
const { OverlaySummaryItemBylines, OverlaySummaryItemContent, OverlaySummaryItemDek, OverlaySummaryItemHed } = __webpack_require__(3265);
const Byline = __webpack_require__(70366);
const { BylineLink, BylinePreamble } = __webpack_require__(74423);
const Grid = __webpack_require__(74479);
const { GridItem } = __webpack_require__(40653);
const { SectionTitleHed, SectionTitleRoot } = __webpack_require__(33500);
const { RubricName } = __webpack_require__(6613);
const { LinkBannerWrapper } = __webpack_require__(89635);
const { ImageWrapper, LeftScrollButton, LinkBannerRubric, NavLink, NavList, NavListItem, NavListItemContent, NavListWrapper, RightScrollButton, VisualTextWrap } = __webpack_require__(79424);
const VersoSummarySpotlightWrapper = styled.section.withConfig({
    displayName: 'VersoSummarySpotlightWrapper'
}) ``;
const VersoSummarySpotlightContainer = styled.div.withConfig({
    displayName: 'VersoSummarySpotlightContainer'
}) `
  margin: 0 auto;
  max-width: calc(${BREAKPOINTS.xxl} - (2 * ${calculateSpacing(8)}));
`;
const VersoSummarySpotlightSecondaryItemsWrapper = styled.div.withConfig({
    displayName: 'VersoSummarySpotlightSecondaryItemsWrapper'
}) `
  background: ${getColorToken('colors.consumption.lead.inverted.background')};
  padding-bottom: ${calculateSpacing(5)};
  ${cssVariablesGrid()}
  ${minScreen(BREAKPOINTS.sm)} {
    padding-right: ${calculateSpacing(3)};
    padding-left: ${calculateSpacing(3)};
  }
  ${minScreen(BREAKPOINTS.md)} {
    padding-right: ${calculateSpacing(6)};
    padding-left: ${calculateSpacing(6)};
  }
  ${minScreen(BREAKPOINTS.xl)} {
    padding-right: ${calculateSpacing(8)};
    padding-left: ${calculateSpacing(8)};
  }
  ${minScreen(BREAKPOINTS.xxl)} {
    padding-right: ${calculateSpacing(20)};
    padding-left: ${calculateSpacing(20)};
  }
`;
const VersoSummarySpotlightLeadItemWrapper = styled.div.withConfig({
    displayName: 'VersoSummarySpotlightLeadItemWrapper'
}) `
  position: relative;
  background-position: top;
  background-size: cover;
  padding: ${calculateSpacing(3)};

  ${minScreen(BREAKPOINTS.md)} {
    padding-top: ${calculateSpacing(5)};
    padding-bottom: ${calculateSpacing(5)};
  }
  ${cssVariablesGrid()}
  ${applyGridSpacing('padding')}

    && {
    ${minScreen(BREAKPOINTS.sm)} {
      padding-top: ${calculateSpacing(2.5)};
      padding-bottom: ${calculateSpacing(5)};
      ${({ imageSources }) => imageSources.smUrl
    ? `
                    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%), url(${imageSources.smUrl});
                `
    : ``}
      aspect-ratio: 9/16;
    }
    ${minScreen(BREAKPOINTS.md)}, ${minScreen(BREAKPOINTS.lg)}, ${minScreen(BREAKPOINTS.xl)} {
      padding-top: ${calculateSpacing(5)};
      ${({ imageSources }) => imageSources.lgUrl
    ? `
                background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%), url(${imageSources.lgUrl});
                `
    : ``}
      aspect-ratio: 6/4;
    }
  }
`;
const VersoSummarySpotlightLeadItemContainer = styled(Grid).withConfig({
    displayName: 'VersoSummarySpotlightLeadItemContainer'
}) `
  ${GridItem} {
    :nth-of-type(1) {
      ${minScreen(BREAKPOINTS.sm)} {
        grid-column: 1 / span 4;
      }
      ${minScreen(BREAKPOINTS.md)} {
        grid-column: 1 / span 12;
      }
    }

    :nth-of-type(2) {
      ${minScreen(BREAKPOINTS.sm)} {
        position: absolute;
        right: ${calculateSpacing(3)};
        bottom: ${calculateSpacing(10)};
        left: ${calculateSpacing(3)};
        grid-column: 1 / span 4;
      }
      ${minScreen(BREAKPOINTS.md)} {
        display: grid;
        position: absolute;
        right: ${calculateSpacing(6)};
        bottom: ${calculateSpacing(10)};
        left: ${calculateSpacing(6)};
        grid-gap: inherit;
        grid-column: 1 / span 6;
        grid-template-columns: inherit;
      }
      ${minScreen(BREAKPOINTS.xl)} {
        right: ${calculateSpacing(8)};
        left: ${calculateSpacing(8)};
      }
      ${minScreen(BREAKPOINTS.xxl)} {
        right: ${calculateSpacing(20)};
        left: ${calculateSpacing(20)};
      }
    }
  }
`;
const VersoSummarySpotlightContentDivider = styled.span.withConfig({
    displayName: 'VersoSummarySpotlightContentDivider'
}) `
  display: grid;
  grid-column: 1 /-1;
  margin-top: ${calculateSpacing(5)};
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: ${getColorToken('colors.discovery.body.black.divider')};

  ${minScreen(BREAKPOINTS.sm)} {
    position: absolute;
    right: ${calculateSpacing(3)};
    bottom: ${calculateSpacing(5)};
    left: ${calculateSpacing(3)};
  }
  ${minScreen(BREAKPOINTS.md)} {
    display: grid;
    position: absolute;
    right: ${calculateSpacing(6)};
    bottom: ${calculateSpacing(5)};
    left: ${calculateSpacing(6)};
    grid-gap: inherit;
    grid-template-columns: inherit;
  }
  ${minScreen(BREAKPOINTS.xl)} {
    right: ${calculateSpacing(8)};
    left: ${calculateSpacing(8)};
  }
  ${minScreen(BREAKPOINTS.xxl)} {
    right: ${calculateSpacing(20)};
    left: ${calculateSpacing(20)};
  }
`;
const VersoSummarySpotlightSectionTitle = styled.div.withConfig({
    displayName: 'VersoSummarySpotlightSectionTitle'
}) `
  grid-column: 1 / span 12;
  ${SectionTitleHed} {
    color: ${getColorToken('colors.discovery.body.black.heading')};
  }
  ${SectionTitleRoot} {
    ${({ theme }) => getColorStyles(theme, 'border-color', `colors.discovery.body.black.divider`)}
  }
`;
const VersoSummarySpotlightLeadItem = styled.div.withConfig({
    displayName: 'VersoSummarySpotlightLeadItem'
}) `
  grid-column: 1 / span 6;
  text-decoration: none;

  ${OverlaySummaryItemHed} {
    margin: 0;
    ${getTypographyStyles('typography.definitions.discovery.hed-feature')};
    color: ${getColorToken('colors.discovery.body.black.heading')};

    &:hover,
    &:focus {
      text-decoration: underline;
    }
  }

  ${OverlaySummaryItemDek} {
    margin-top: 0;
    ${getTypographyStyles('typography.definitions.discovery.description-feature')};
    color: ${getColorToken('colors.discovery.body.black.description')};
  }

  && {
    ${OverlaySummaryItemContent} {
      padding: 0 0 0 0;
    }
  }

  ${RubricName} {
    ${getTypographyStyles('typography.definitions.globalEditorial.context-primary')};
    color: ${getColorToken('colors.discovery.body.black.context-signature')};
  }

  ${OverlaySummaryItemHed} {
    margin-top: ${calculateSpacing(2)};
    margin-bottom: ${calculateSpacing(1)};
    ${minScreen(BREAKPOINTS.sm)} {
      margin-bottom: ${calculateSpacing(0.5)};
    }
  }
  ${OverlaySummaryItemBylines} {
    margin: 0;
  }
`;
const VersoSummarySpotlightByline = styled(Byline).withConfig({
    displayName: 'VersoSummarySpotlightByline'
}) `
  ${BylinePreamble},
  ${BylineLink} {
    ${getTypographyStyles('typography.definitions.globalEditorial.accreditation-core')};
    color: ${getColorToken('colors.discovery.body.black.accreditation')};
  }
  margin-top: ${calculateSpacing(2)};
`;
const VersoSummarySpotlightSecondaryItems = styled.div.withConfig({
    displayName: 'VersoSummarySpotlightSecondaryItems'
}) `
  ${LinkBannerWrapper} {
    position: unset;
    transform: none;
    transition: none;
    opacity: unset;
    border: none;
    background: ${getColorToken('colors.consumption.lead.inverted.background')};
  }
  ${LinkBannerRubric} {
    margin-bottom: ${calculateSpacing(1)};
    ${getTypographyStyles('typography.definitions.globalEditorial.context-primary')};
    color: ${getColorToken('colors.discovery.body.black.context-signature')};
  }

  && {
    ${NavLink} {
      ${getTypographyStyles('typography.definitions.discovery.hed-core-secondary')};
      text-overflow: none;
      color: ${getColorToken('colors.discovery.body.black.heading')};
    }
    ${NavList} {
      grid-template-columns: auto;
      grid-template-rows: auto;
      padding-right: 0;
      padding-left: 0;

      ${minScreen(BREAKPOINTS.md)} {
        max-width: 100%;
        overflow-x: hidden;
      }
    }
    ${NavListItem} {
      :nth-of-type(1) {
        grid-column: 1 / span 3;
      }

      :nth-of-type(2) {
        grid-column: 4 / span 3;
      }

      :nth-of-type(3) {
        grid-column: 7 / span 3;
      }

      :nth-of-type(4) {
        grid-column: 10 / span 3;
      }

      display: initial;

      :nth-of-type(1),
      :nth-of-type(2) {
        ${maxScreen(MAX_TABLET_WIDTH)} {
          grid-row: 1;
        }
      }

      :nth-of-type(3),
      :nth-of-type(4) {
        ${maxScreen(MAX_TABLET_WIDTH)} {
          grid-row: 2;
        }
      }

      :nth-of-type(1),
      :nth-of-type(3) {
        ${maxScreen(MAX_TABLET_WIDTH)} {
          grid-column: 1 / span 6;
        }
      }

      :nth-of-type(2),
      :nth-of-type(4) {
        ${maxScreen(MAX_TABLET_WIDTH)} {
          grid-column: 7 / span 6;
        }
      }

      :nth-of-type(1),
      :nth-of-type(2),
      :nth-of-type(3),
      :nth-of-type(4) {
        ${maxScreen(MAX_MOBILE_WIDTH)} {
          grid-area: auto / 1 / auto / span 12;
        }
      }
    }

    ${NavListItemContent} {
      display: grid;
      grid-gap: 1rem;
      grid-template-columns: 3fr auto;
      align-items: start;

      *:first-child {
        order: 1;
      }

      ${maxScreen(MAX_TABLET_WIDTH)} {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: ${getColorToken('colors.discovery.body.black.divider')};
        padding-bottom: ${calculateSpacing(1)};
      }
    }
    ${NavListWrapper} {
      height: auto;
      ${LeftScrollButton}, ${RightScrollButton} {
        display: none;
      }
    }
    ${ImageWrapper} {
      margin-right: 0;
    }
  }
  ${VisualTextWrap} {
    order: 0;
    margin-right: 0;
    margin-left: 0;
    width: unset;
    overflow: unset;
    text-decoration: none;
    text-overflow: unset;
    -webkit-line-clamp: unset;

    span {
      &:hover,
      &:focus {
        text-decoration: underline;
      }
    }
  }
`;
module.exports = {
    VersoSummarySpotlightByline,
    VersoSummarySpotlightContainer,
    VersoSummarySpotlightContentDivider,
    VersoSummarySpotlightLeadItem,
    VersoSummarySpotlightLeadItemContainer,
    VersoSummarySpotlightLeadItemWrapper,
    VersoSummarySpotlightSecondaryItems,
    VersoSummarySpotlightSecondaryItemsWrapper,
    VersoSummarySpotlightSectionTitle,
    VersoSummarySpotlightWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 88193:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { default: Carousel } = __webpack_require__(36061);
const SummaryItem = __webpack_require__(74992);
const { snowplowEvent } = __webpack_require__(14307);
const { TrackComponentChannel } = __webpack_require__(78788);
const { isDesktopBrowser } = __webpack_require__(72362);
const isMobile = !isDesktopBrowser();
const { VisualStoryCarouselWrapper } = __webpack_require__(95303);
/**
 * Visual Story Carousel component
 *
 * @param {string} [className] - Optional top-level class to add
 * @param {object} container - Carousel data
 *
 * @returns {ReactElement} <div>
 */
const VisualStoryCarousel = ({ bubbleFont = 'typography.definitions.globalEditorial.context-tertiary', className, container, hasBottomBorder = true, hasTopBorder = true, sectionTitleVariation = 'LineAboveLineBelowTextCenter' }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'VisualStoryCarousel'
        });
    }, []);
    const { dangerousDek, dangerousHed, items } = container;
    return (React.createElement(VisualStoryCarouselWrapper, { isMobile: isMobile, className: className, "data-testid": "visual-story-carousel", bubbleFont: bubbleFont },
        React.createElement(Carousel, { headerProps: {
                dangerousHed,
                dangerousDek,
                hasTopBorder,
                hasBottomBorder,
                contentAlign: 'left',
                shouldDisplayDangerousDek: dangerousDek !== '',
                sectionTitleVariation: className === 'bundleLayout'
                    ? sectionTitleVariation
                    : 'LineAboveLineBelowTextLeft'
            }, carouselSettings: {
                hasPaginationDots: false,
                hideScrollbar: false,
                itemsDensity: 'min',
                scrollType: 'set-by-set',
                showControls: !isMobile,
                showLabels: false,
                shouldRightAlignFooterControls: true
            } }, items.map((item, index) => (React.createElement(Carousel.CarouselItem, { key: `carousel-watch-${index}`, trackingEventData: {
                itemIndex: index,
                totalItems: items?.length,
                placement: 'mid-content',
                snowplowNavEventSubject: 'carousel',
                label: 'Visual Story'
            } },
            React.createElement(SummaryItem, { key: index, ...item, snowplowEvent: {
                    type: 'click',
                    label: 'Visual Story',
                    subject: 'carousel',
                    items: [
                        {
                            content_title: item.dangerousHed,
                            content_url: item.url,
                            content_id: item.copilotID,
                            content_type: item.contentType
                        }
                    ],
                    strategy: item.strategy,
                    placement: 'mid-content',
                    index,
                    total_index: snowplowEvent?.total_index
                        ? snowplowEvent?.total_index
                        : items.length
                } })))))));
};
VisualStoryCarousel.propTypes = {
    bubbleFont: PropTypes.string,
    className: PropTypes.string,
    container: PropTypes.object,
    hasBottomBorder: PropTypes.bool,
    hasTopBorder: PropTypes.bool,
    sectionTitleVariation: PropTypes.string
};
VisualStoryCarousel.displayName = 'VisualStoryCarousel';
module.exports = VisualStoryCarousel;
//# sourceMappingURL=VisualStoryCarousel.js.map

/***/ }),

/***/ 92229:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const VisualStoryCarousel = __webpack_require__(88193);
module.exports = asConfiguredComponent(VisualStoryCarousel, 'VisualStoryCarousel');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 95303:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { calculateSpacing, 
// getColorStyles,
getColorToken, 
// getDecoration,
getTypographyStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const VisualStoryCarouselWrapper = styled.div.withConfig({
    displayName: 'VisualStoryCarouselWrapper'
}) `
  h2 {
    margin: 0;
  }

  section {
    margin: 0 auto;

    div[class^='CarouselListWrapper'] {
      margin: 0;

      ul[class^='CarouselList'] {
        margin: ${calculateSpacing(2)} 0 0 0;
        padding-bottom: 11px;

        @media (min-width: ${BREAKPOINTS.md}) {
          justify-content: center;

          &::-webkit-scrollbar {
            display: none;
          }
          -ms-overflow-style: none;
          scrollbar-width: none;
        }
      }

      li {
        margin: 0;
        padding: 0;
        width: 120px;
        @media (min-width: ${BREAKPOINTS.lg}) {
          width: 150px;
        }

        .summary-item {
          border: none;
          padding: 0 5px;

          .summary-item__asset-container {
            height: 90px;
          }

          .aspect-ratio--overlay-container {
            margin: 3px auto;
            border: 3px solid transparent;
            border-radius: 50%;
            box-shadow: 0 0 0 2px
              ${({ theme }) => getColorToken(theme, 'colors.interactive.base.brand-primary')};
            width: 90px;
            height: 90px;
          }

          .responsive-asset div[class*='AspectRatioContainer']::before {
            padding-top: 0;
          }
        }

        picture {
          display: flex;
          justify-content: center;

          img {
            transition: transform 0.5s ease-in-out;
            width: unset;
            max-width: unset;
            height: 90px;
          }

          img:hover {
            transform: scale(1.3);
          }
        }

        .summary-item__hed-link {
          text-decoration: none;
          color: ${({ theme }) => getColorToken(theme, 'colors.discovery.body.white.heading')};

          &:hover,
          &:focus,
          &:active {
            text-decoration: underline;
          }
        }

        .summary-item__content {
          padding-top: 10px;
          padding-bottom: 0;

          h2.summary-item__hed {
            ${({ theme, bubbleFont }) => getTypographyStyles(theme, bubbleFont)};
            /* stylelint-disable-next-line value-no-vendor-prefix */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            margin: 0;
            overflow: hidden;
            text-align: center;
            text-overflow: ellipsis;
            color: ${({ theme }) => getColorToken(theme, 'colors.discovery.body.white.heading')};
          }

          .summary-item__hed-link::after {
            margin-bottom: 0;
            border: none;
          }
        }
      }
    }

    &:has(div[class*='CarouselNavigationWrapper']) ul[class^='CarouselList'] {
      justify-content: flex-start;
    }
  }

  &.bundleLayout section {
    padding-right: ${calculateSpacing(3)};
    padding-left: ${calculateSpacing(3)};
    max-width: ${BREAKPOINTS.lg};

    @media (min-width: ${BREAKPOINTS.md}) {
      padding-right: ${calculateSpacing(6)};
      padding-left: ${calculateSpacing(6)};
      max-width: ${BREAKPOINTS.lg};
    }

    @media (min-width: ${BREAKPOINTS.lg}) {
      padding-right: ${calculateSpacing(6)};
      padding-left: ${calculateSpacing(6)};
      max-width: ${BREAKPOINTS.xl};
    }

    @media (min-width: ${BREAKPOINTS.xl}) {
      padding-right: ${calculateSpacing(8)};
      padding-left: ${calculateSpacing(8)};
      max-width: ${BREAKPOINTS.xxl};
    }
  }
`;
module.exports = {
    VisualStoryCarouselWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 48171:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.useThemingContext = exports.ThemeProvider = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const ThemeContext = (0, react_1.createContext)(undefined);
const ThemeProvider = ({ children, theme }) => {
    return (react_1.default.createElement(ThemeContext.Provider, { value: { theme } }, children));
};
exports.ThemeProvider = ThemeProvider;
const useThemingContext = () => {
    const context = (0, react_1.useContext)(ThemeContext);
    if (context === undefined) {
        throw new Error('useThemingContext must be used within a ThemeProvider');
    }
    return context;
};
exports.useThemingContext = useThemingContext;
//# sourceMappingURL=ThemeContext.js.map

/***/ }),

/***/ 8470:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { useState } = __webpack_require__(96540);
const isEmpty = __webpack_require__(62193);
const LargeChevron = __webpack_require__(708);
const { TrackComponentChannel } = __webpack_require__(78788);
const { trackNavigationEvent } = __webpack_require__(14307);
const { AccordionWrapper, AccordionItemWrapper, AccordionItemContainer, AccordionItemContainerLabel, AccordionItemContainerContent, AccordionContainer, AccordionItemContainerButton } = __webpack_require__(76080);
function renderTableInsideAccordion(content) {
    // below code checks if table has header or not, there are some tables that are rendered without header row
    const tableChildren = content?.props?.children || [];
    const thead = tableChildren[0];
    const hasHeader = thead?.props?.children?.props?.children?.[0]?.props?.children;
    return (React.createElement("div", { className: "table-container" },
        React.createElement("div", { className: "scrollable-table-container" },
            React.createElement("table", { className: "simple-table" }, hasHeader ? tableChildren : tableChildren[1]))));
}
function renderAccordionContent(content, handleContentItemClick) {
    return Array.isArray(content) ? (content.map((item, i) => item.type !== 'table'
        ? React.cloneElement(item, {
            key: i,
            onClick: (e) => handleContentItemClick(e, i, content.length)
        })
        : renderTableInsideAccordion(item))) : (React.createElement(React.Fragment, null, content));
}
/**
 * AccrodionItem Component
 *
 * @param {string} props.content - accordion content
 * @param {string} props.label - accordion label
 * @param {boolean} props.isInitiallyOpen - default state of accordion
 * @param {boolean} props.isCollapsible - determines if the accordion should be collapsible or not
 */
const AccordionItem = ({ label, content, isInitiallyOpen, isCollapsible, snowplowEventData, handleContentItemClick }) => {
    const [isActive, setIsActive] = useState(isInitiallyOpen);
    const clickHandler = () => {
        setIsActive(!isActive);
        const eventData = {
            type: isActive ? 'close' : 'open',
            subject: snowplowEventData
                ? snowplowEventData.subject
                : 'wrapper_accordion',
            label: snowplowEventData
                ? snowplowEventData.label
                : label?.props?.children?.toString(),
            items: snowplowEventData && snowplowEventData.items
        };
        trackNavigationEvent(eventData);
    };
    return (React.createElement(AccordionContainer, { isActive: isActive },
        React.createElement(AccordionItemContainer, { onClick: isCollapsible && clickHandler, "data-testid": "accordion-item-container", isCollapsible: isCollapsible },
            React.createElement(AccordionItemContainerLabel, null,
                React.createElement(React.Fragment, null, label)),
            isCollapsible && (React.createElement(AccordionItemContainerButton, { isActive: isActive, ButtonIcon: LargeChevron, role: "button", isIconButton: true, label: "AccordionItemContainerButton", width: "0.5rem", height: "0.5rem" }))),
        !isEmpty(content) && (React.createElement(AccordionItemContainerContent, { className: isActive ? 'closing-animation' : 'opening-animation' },
            React.createElement("div", null, content.type !== 'table'
                ? renderAccordionContent(content, handleContentItemClick)
                : renderTableInsideAccordion(content))))));
};
AccordionItem.propTypes = {
    content: PropTypes.oneOfType([
        PropTypes.array,
        PropTypes.object,
        PropTypes.string
    ]),
    handleContentItemClick: PropTypes.func,
    isCollapsible: PropTypes.bool,
    isInitiallyOpen: PropTypes.bool,
    label: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
    snowplowEventData: PropTypes.object
};
const Accordion = ({ children, data, isInitiallyOpen = false, isCollapsible = true, snowplowEventData = null, handleContentItemClick }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'Accordion'
        });
    }, []);
    const label = (children && children[0]?.props?.children) || null;
    const content = (children && children[1]?.props?.children) || null;
    return !data ? (React.createElement(React.Fragment, null, label ? (React.createElement(AccordionItemWrapper, null,
        React.createElement(AccordionItem, { label: label, content: content, isInitiallyOpen: isInitiallyOpen, isCollapsible: isCollapsible }))) : null)) : (React.createElement(AccordionWrapper, { data: data }, data ? (React.createElement(AccordionItemWrapper, null, data.map((payload, index) => (React.createElement(AccordionItem, { key: index, ...payload, isInitiallyOpen: isInitiallyOpen, isCollapsible: isCollapsible, snowplowEventData: snowplowEventData, handleContentItemClick: handleContentItemClick }))))) : null));
};
Accordion.propTypes = {
    children: PropTypes.array,
    data: PropTypes.array,
    handleContentItemClick: PropTypes.func,
    isCollapsible: PropTypes.bool,
    isInitiallyOpen: PropTypes.bool,
    snowplowEventData: PropTypes.object
};
module.exports = Accordion;
//# sourceMappingURL=Accordion.js.map

/***/ }),

/***/ 82516:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const Accordion = __webpack_require__(8470);
module.exports = Accordion;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 76080:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { calculateSpacing, getTypographyStyles, getColorStyles } = __webpack_require__(26865);
const { getMotionAnimationValues } = __webpack_require__(48419);
const Button = __webpack_require__(73730);
const AccordionWrapper = styled.div.withConfig({
    displayName: 'AccordionWrapper'
}) `
  & > :first-child {
    margin-top: ${calculateSpacing(2.5)};
    border-top: 1px solid;
    ${({ theme }) => getColorStyles(theme, 'border-top-color', 'colors.consumption.body.standard.divider')};
  }
`;
const AccordionContainer = styled.div.withConfig({
    displayName: 'AccordionContainer'
}) `
  margin-top: ${calculateSpacing(2.5)};
  margin-bottom: ${calculateSpacing(2.5)};
  border-bottom: 1px solid;
  ${({ theme }) => getColorStyles(theme, 'border-bottom-color', 'colors.consumption.body.standard.divider')};

  .icon-large-chevron {
    float: right;
    transform-origin: center;
    width: 1rem;
    height: 0.75rem;
    overflow: hidden;
  }
`;
const AccordionItemContainerLabel = styled.div.withConfig({
    displayName: 'AccordionItemContainerLabel'
}) `
  display: block;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  ${getTypographyStyles('typography.definitions.consumptionEditorial.subhed-aux-secondary')};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.background.black')};

  && {
    text-transform: none;
  }

  &&&&& > p {
    margin: 0;
    padding: 0;
  }
`;
AccordionItemContainerLabel.defaultProps = {
    typeIdentity: 'typography.definitions.consumptionEditorial.subhed-aux-secondary'
};
const AccordionItemContainerContent = styled.div.withConfig({
    displayName: 'AccordionItemContainerContent'
}) `
  ${getTypographyStyles('typography.definitions.consumptionEditorial.body-core')};
  display: grid;
  grid-template-rows: 0fr;
  padding: 10px 0;
  min-height: 0;
  ${({ theme }) => `transition: grid-template-rows ${getMotionAnimationValues(theme, 'duration-250', false)['transition-duration']} ${getMotionAnimationValues(theme, 'standard-in-and-out', false)['transition-timing-function']};`}

  > * {
    overflow: hidden;
    ${({ theme }) => `transition: margin ${getMotionAnimationValues(theme, 'duration-250', false)['transition-duration']} ${getMotionAnimationValues(theme, 'standard-in-and-out', false)['transition-timing-function']}, padding ${getMotionAnimationValues(theme, 'duration-250', false)['transition-duration']} ${getMotionAnimationValues(theme, 'standard-in-and-out', false)['transition-timing-function']}, opacity ${getMotionAnimationValues(theme, 'duration-250', false)['transition-duration']} ${getMotionAnimationValues(theme, 'standard-in-and-out', false)['transition-timing-function']};`}
  }

  &.opening-animation {
    grid-template-rows: 0fr;

    &&&& > * {
      opacity: 0;
      margin: 0;
      border: none;
      padding: 0;
    }

    &&&&& > div.product-embed {
      margin: 0 auto;
    }
  }

  &.closing-animation {
    grid-template-rows: 1fr;

    &&&& > figure.iframe-embed,
    figure.cne-video-embed,
    figure.asset-embed {
      margin: 0;
    }
  }

  && > :first-child {
    margin-block-start: ${calculateSpacing(1)};
  }

  &&&&& > p {
    margin-block-start: ${calculateSpacing(1)};
    margin-block-end: ${calculateSpacing(1)};
    padding: 0;
  }

  /* Addidng the Accordion Animation to essential motion so if reduce motion feature is on these will be included. */
  @media (prefers-reduced-motion) {
    ${({ theme }) => `transition: grid-template-rows ${getMotionAnimationValues(theme, 'duration-250', false)['transition-duration']} ${getMotionAnimationValues(theme, 'standard-in-and-out', false)['transition-timing-function']};`}

    > * {
      overflow: hidden;
      ${({ theme }) => `transition: margin ${getMotionAnimationValues(theme, 'duration-250', false)['transition-duration']} ${getMotionAnimationValues(theme, 'standard-in-and-out', false)['transition-timing-function']}, padding ${getMotionAnimationValues(theme, 'duration-250', false)['transition-duration']} ${getMotionAnimationValues(theme, 'standard-in-and-out', false)['transition-timing-function']}, opacity ${getMotionAnimationValues(theme, 'duration-250', false)['transition-duration']} ${getMotionAnimationValues(theme, 'standard-in-and-out', false)['transition-timing-function']};`}
    }
  }
`;
const AccordionItemContainer = styled.div.withConfig({
    displayName: 'AccordionItemContainer'
}) `
  display: flex;
  align-items: center;
  cursor: pointer;

  ${({ isCollapsible }) => !isCollapsible &&
    `
    pointer-events: none;
  `}
`;
const AccordionItemContainerButton = styled(Button.Utility).withConfig({
    displayName: 'AccordionItemContainerButton'
}) `
  align-self: flex-start;
  fill: #615f66;
  float: right;
  transform-origin: center;
  ${({ isActive }) => isActive && `transform:rotate(180deg);`}
  padding: ${calculateSpacing(1)};
  white-space: nowrap;

  svg {
    stroke: #615f66;
    stroke-width: 3px;
  }

  &,
  &:focus,
  &:hover {
    border: 0;
    background-color: transparent;
  }
`;
const AccordionItemWrapper = styled.div.withConfig({
    displayName: 'AccordionItemWrapper'
}) ``;
module.exports = {
    AccordionWrapper,
    AccordionItemWrapper,
    AccordionItemContainer,
    AccordionItemContainerLabel,
    AccordionItemContainerContent,
    AccordionItemContainerButton,
    AccordionContainer
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 83258:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { adjustHeroAdPosition } = __webpack_require__(40510);
const { AdsSpacer } = __webpack_require__(36185);
const HeroAdSpacer = () => {
    React.useEffect(() => {
        if ( false || !window.MutationObserver) {
            return undefined;
        }
        const header = document.querySelector('header, nav');
        if (!header) {
            return undefined;
        }
        // Initial adjustment
        adjustHeroAdPosition();
        const observer = new MutationObserver(() => {
            adjustHeroAdPosition();
            // Adjust after the delay when there is an animation in place
            setTimeout(() => adjustHeroAdPosition(), 300);
        });
        // Observe the main header/nav element
        observer.observe(header, {
            attributes: true,
            attributeFilter: ['class']
        });
        // Also observe link-banner separately if it exists and is different from header
        const linkBanner = document.getElementById('link-banner');
        if (linkBanner && linkBanner !== header) {
            observer.observe(linkBanner, {
                attributes: true,
                attributeFilter: ['class']
            });
        }
        // Return cleanup function consistently
        return () => {
            observer.disconnect();
        };
    }, []);
    return React.createElement(AdsSpacer, null);
};
module.exports = HeroAdSpacer;
//# sourceMappingURL=HeroAdSpacer.js.map

/***/ }),

/***/ 28701:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { useEffect } = React;
const PropTypes = __webpack_require__(5556);
const { scrollToAnchor } = __webpack_require__(759);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * A callout component used for wrapping children in a div with an id refrencing
 * the id passed in the inline attribute list of the callout.
 *
 * @param {object} props - React props
 * @param {ReactElement} props.children - The children of this element
 * @param {string} props.name - The callout name
 * @param {string} props.attrs - The callout inline attributes
 * @param {string} hash -- The anchor hash value that the user just clicked on
 * @returns {ReactElement} - The element, wrapped in a div
 */
const handleHashChange = (event) => {
    const newURL = new URL(event.newURL);
    scrollToAnchor(newURL.hash);
};
const handleClick = (event) => {
    scrollToAnchor(event.currentTarget.hash);
};
const addEventListeners = (anchorLinks) => {
    if (anchorLinks.length) {
        window.addEventListener('hashchange', handleHashChange);
        anchorLinks.forEach((anchorLink) => {
            anchorLink.addEventListener('click', handleClick);
        });
    }
};
const removeEventListeners = (anchorLinks) => {
    if (anchorLinks.length) {
        window.removeEventListener('hashchange', handleHashChange);
        anchorLinks.forEach((anchorLink) => {
            anchorLink.removeEventListener('click', handleClick);
        });
    }
};
const AnchorCallout = (props) => {
    const { children, attrs: { id } } = props;
    useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'AnchorCallout'
        });
    });
    useEffect(() => {
        const anchorLinks = document.querySelectorAll(`a[href='#${id}']`);
        addEventListeners(anchorLinks);
        return () => {
            removeEventListeners(anchorLinks);
        };
    }, [id]);
    return (React.createElement("div", { style: { outline: 'none' }, id: id, tabIndex: "-1" }, children));
};
AnchorCallout.propTypes = {
    attrs: PropTypes.object.isRequired,
    children: PropTypes.node.isRequired
};
AnchorCallout.displayName = 'AnchorCallout';
module.exports = AnchorCallout;
//# sourceMappingURL=AnchorCallout.js.map

/***/ }),

/***/ 51114:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const AnchorCallout = __webpack_require__(28701);
module.exports = AnchorCallout;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 70486:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { AppDownloadLinksWrapper, AppDownloadLinksWrapperItem, AppDownloadLinksWrapperResponsiveAsset } = __webpack_require__(9580);
/**
 * AppDownloadLinks component
 *
 * @param {object} props - React props
 * @param {string} [props.appDownloadUrls] - appDownloadUrl array
 *
 * @returns {ReactElement} <div>
 */
const AppDownloadLinks = ({ appDownloadUrls }) => {
    return (React.createElement(AppDownloadLinksWrapper, null,
        React.createElement("ul", null, appDownloadUrls.map((items) => (React.createElement(AppDownloadLinksWrapperItem, { key: items.url },
            React.createElement("a", { href: items.url, target: "_blank", rel: "noreferrer", "aria-label": "Opens in a new window" },
                React.createElement(AppDownloadLinksWrapperResponsiveAsset, { ...items.logo }))))))));
};
AppDownloadLinks.propTypes = {
    appDownloadUrls: PropTypes.array
};
module.exports = AppDownloadLinks;
//# sourceMappingURL=AppDownloadLinks.js.map

/***/ }),

/***/ 34568:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(70486);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 29201:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useContext, useEffect } = React;
const decode = (__webpack_require__(79712)["default"]);
const { getCookie } = __webpack_require__(56892);
const { ConsentContext } = __webpack_require__(85438);
const useLazyLoadComponent = __webpack_require__(70920);
const ConsentBanner = __webpack_require__(83561);
const { BizzaboEmbedContainer, BizzaboEmbedBlockquote } = __webpack_require__(20639);
const translations = (__webpack_require__(46937)/* ["default"] */ .A);
/**
 * Inject bizzabo embed script into browser
 *
 * @returns {undefined} - undefined
 */
const injectScript = () => {
    if (!document.getElementById('bizzabo-embed')) {
        const script = document.createElement('script');
        script.id = 'bizzabo-embed';
        script.src = 'https://organizer.bizzabo.com/widgets/tickets/tickets.js';
        script.async = true;
        document.body.appendChild(script);
    }
};
/**
 * Extract info from cookie and detect membership
 *
 * @returns {boolean} - boolean
 */
const detectMembership = () => {
    const pass = getCookie('pay_ent_pass');
    const payload = decode(pass);
    const { scopes = [] } = payload || {};
    return scopes.includes('vogue-web-club');
};
/**
 * BizzaboEmbed component
 *
 * @param {string} url - Required url reference for bizzabo.
 */
const BizzaboEmbed = ({ url }) => {
    const consentContext = useContext(ConsentContext);
    const [lazyLoadElementRef, shouldLoadComponent] = useLazyLoadComponent();
    const isVogueClubMember = detectMembership();
    let bizzaboParams = null;
    let iframeUrl;
    const shouldDisplayComponent = consentContext.targeting && shouldLoadComponent;
    useEffect(() => {
        if (shouldDisplayComponent) {
            const bizzaboContainer = document.getElementById('bizzabo-tickets-widget');
            if (bizzaboContainer !== null) {
                bizzaboContainer.setAttribute('data-params', bizzaboParams);
            }
            injectScript();
        }
    }, [shouldDisplayComponent, bizzaboParams]);
    const urlArray = url ? url.split('|') : [];
    // we need both eventId and widgetId to render the widget
    if (urlArray.length < 2)
        return '';
    const [eventId = null, widgetId = null, promoId = null] = urlArray;
    // bizzaboParams manage the params required by the widget to render itself
    bizzaboParams = `isInMinisite=true&widgetId=${widgetId}`;
    // iframeUrl is the url of the iframe in case the user doesn't accept OT
    iframeUrl = `https://accounts.bizzabo.com/widgets/tickets/${eventId}?isPreview=true&widgetId=${widgetId}`;
    // promocode is just for Vogue Club members
    if (isVogueClubMember && promoId) {
        bizzaboParams += `&promo=${promoId}`;
        iframeUrl += `&promo=${promoId}`;
    }
    return (React.createElement(BizzaboEmbedContainer, { ref: lazyLoadElementRef }, shouldDisplayComponent ? (React.createElement(BizzaboEmbedBlockquote, { className: "bizzabo-tickets-widget", id: "bizzabo-tickets-widget", "data-event-id": eventId, "data-params": bizzaboParams })) : (React.createElement(ConsentBanner, { hasConsent: consentContext.targeting, url: iframeUrl, consentBannerHeader: translations.consentBannerHeader }))));
};
BizzaboEmbed.propTypes = {
    url: PropTypes.string.isRequired
};
module.exports = BizzaboEmbed;
//# sourceMappingURL=BizzaboEmbed.js.map

/***/ }),

/***/ 99933:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(29201);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 20639:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing } = __webpack_require__(26865);
const BizzaboEmbedContainer = styled.div.withConfig({
    displayName: 'BizzaboEmbedContainer'
}) `
  margin: ${calculateSpacing(5)} auto;
`;
const BizzaboEmbedBlockquote = styled.blockquote.withConfig({
    displayName: 'BizzaboEmbedBlockquote'
}) `
  margin-right: auto;
  margin-left: auto;
`;
module.exports = {
    BizzaboEmbedContainer,
    BizzaboEmbedBlockquote
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 46937:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    consentBannerHeader: {
        id: 'BizzaboEmbed.ConsentBannerHeader',
        defaultMessage: 'Bizzabo content',
        description: 'Header for message banner'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 96273:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const classnames = __webpack_require__(32485);
const { BlockquoteEmbedWrapper, BlockquoteEmbedContent, BlockquoteEmbedFooter, BlockquoteEmbedCite } = __webpack_require__(35103);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * BlockquoteEmbed component
 *
 * @param {object} props - React props
 * @param {object} [props.attributes] - Optional attributes to add top level i.e. aria-*, role, etc.
 * @param {string|ReactElement} props.children - The quote content to display.
 * @param {string} [props.citeUrl] - Optional cite link for blockquote. Must be a URL.
 * @param {string} [props.className] - Optional top-level class to add.
 * @param {string} [props.dangerousAttribution] - Optional attribution for the quote.
 * @param {bool} [props.hasParagraphMargin] - Optional whether the block quote paragraphs have margin.
 * @param {bool} [props.hasSmallMargins] - Optinal whether the block quote top and bottom margins are small.
 * @param {bool} [props.hasTopBorder] - Optional whether the block quote has a top border.
 * @param {bool} [props.shouldUseBodyColor] - Optional whether the block quote uses the body color token.
 *
 * @returns {ReactElement} <blockquote>
 */
const BlockquoteEmbed = ({ attributes, children, citeUrl, className, dangerousAttribution, hasParagraphMargin, hasSmallMargins = false, hasTopBorder = true, shouldUseBodyColor = false }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'BlockquoteEmbed'
        });
    }, []);
    return (React.createElement(BlockquoteEmbedWrapper, { ...attributes, cite: citeUrl, hasTopBorder: hasTopBorder, hasSmallMargins: hasSmallMargins, className: classnames(className, 'blockquote-embed'), "data-testid": "blockquote-wrapper" },
        React.createElement(BlockquoteEmbedContent, { hasParagraphMargin: hasParagraphMargin, shouldUseBodyColor: shouldUseBodyColor, hasTopBorder: hasTopBorder, className: "blockquote-embed__content" }, children),
        dangerousAttribution && (React.createElement(BlockquoteEmbedFooter, null,
            React.createElement(BlockquoteEmbedCite, { dangerouslySetInnerHTML: { __html: dangerousAttribution } })))));
};
BlockquoteEmbed.propTypes = {
    attributes: PropTypes.object,
    children: PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.node),
        PropTypes.node
    ]).isRequired,
    citeUrl: PropTypes.string,
    className: PropTypes.string,
    dangerousAttribution: PropTypes.string,
    hasParagraphMargin: PropTypes.bool,
    hasSmallMargins: PropTypes.bool,
    hasTopBorder: PropTypes.bool,
    shouldUseBodyColor: PropTypes.bool
};
BlockquoteEmbed.displayName = 'BlockquoteEmbed';
module.exports = BlockquoteEmbed;
//# sourceMappingURL=BlockquoteEmbed.js.map

/***/ }),

/***/ 57885:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const BlockquoteEmbed = __webpack_require__(96273);
module.exports = asConfiguredComponent(BlockquoteEmbed, 'BlockquoteEmbed');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 35103:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { calculateSpacing, getColorStyles, getTypographyStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const handleBlockquoteEmbedColor = (theme, shouldUseBodyColor) => {
    if (shouldUseBodyColor)
        return getColorStyles(theme, 'color', 'colors.consumption.body.standard.body');
    return getColorStyles(theme, 'color', 'colors.consumption.body.standard.body-deemphasized');
};
const BlockquoteEmbedContent = styled.div.withConfig({
    displayName: 'BlockquoteEmbedContent'
}) `
  padding-top: ${calculateSpacing(2)};

  &,
  p {
    ${({ hasParagraphMargin }) => !hasParagraphMargin && 'margin: 0;'}
  }

  p {
    margin-top: 0;
  }

  &,
  a {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.citation')};
    ${({ theme, shouldUseBodyColor }) => handleBlockquoteEmbedColor(theme, shouldUseBodyColor)};
  }
`;
const BlockquoteEmbedWrapper = styled.blockquote.withConfig({
    displayName: 'BlockquoteEmbedWrapper-sc'
}) `
  margin: ${calculateSpacing(5, 'px')} auto;
  width: 100%;
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body')};

  @media (min-width: ${BREAKPOINTS.md}) {
    width: 75%;
  }

  & + & {
    margin-top: 0;
    border-top: 0;
  }

  ${({ hasTopBorder, theme }) => hasTopBorder &&
    `
      border-width: 2px 0 0;
      border-style: solid;
      ${getColorStyles(theme, 'border-color', 'colors.consumption.body.standard.divider')};
    `}

  ${({ hasSmallMargins }) => hasSmallMargins &&
    `
    margin: ${calculateSpacing(3)} auto;
    ${BlockquoteEmbedContent} {
      padding-top: 0;
      & > p:last-of-type {
        margin-bottom: ${calculateSpacing(1)};
      }
    }
  `}
`;
const BlockquoteEmbedFooter = styled.footer.withConfig({
    displayName: 'BlockquoteEmbedFooter'
}) ``;
const BlockquoteEmbedCite = styled.cite.withConfig({
    displayName: 'BlockquoteEmbedCite'
}) `
  font-style: italic;
`;
module.exports = {
    BlockquoteEmbedWrapper,
    BlockquoteEmbedContent,
    BlockquoteEmbedFooter,
    BlockquoteEmbedCite
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 49033:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useContext, useEffect } = React;
const { useIntl } = __webpack_require__(46984);
const { TrackComponentChannel } = __webpack_require__(78788);
const { ConsentContext } = __webpack_require__(85438);
const useLazyLoadComponent = __webpack_require__(70920);
const ConsentBanner = __webpack_require__(83561);
const { BlueskyEmbedBlockquote, BlueskyEmbedContainer } = __webpack_require__(26985);
const translations = (__webpack_require__(1129)/* ["default"] */ .A);
/**
 * Inject bluesky embed script into browser
 *
 * @returns {undefined} - undefined
 */
const injectScript = () => {
    if (!document.getElementById('embed-bsky-app')) {
        const script = document.createElement('script');
        script.id = 'embed-bsky-app';
        script.setAttribute('charset', 'utf-8');
        script.src = 'https://embed.bsky.app/static/embed.js';
        script.setAttribute('data-testid', 'embed-bsky-script');
        document.body.appendChild(script);
    }
};
/**
 * BlueskyEmbed
 *
 * @param {object} props - React props
 * @param {object} [props.attributes] - Optional attributes to add top level i.e. aria-*, role, etc.
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} props.url - Reruired, the URL link to the Bluesky post, used if consent is not provided.
 * @param {string} props.uri - Required uri for Bluesky content.
 * @param {string} props.cid - Required cid for Bluesky content.
 */
const BlueskyEmbed = ({ attributes, className, url, uri, cid }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'BlueskyEmbed'
        });
    }, []);
    const consentContext = useContext(ConsentContext);
    const [lazyLoadElementRef, shouldLoadComponent] = useLazyLoadComponent();
    const { formatMessage } = useIntl();
    const shouldDisplayComponent = consentContext.targeting && shouldLoadComponent;
    useEffect(() => {
        if (shouldDisplayComponent) {
            injectScript();
        }
        if ('bluesky' in window) {
            // eslint-disable-next-line no-undef
            bluesky.scan();
        }
    }, [shouldDisplayComponent]);
    return (React.createElement(BlueskyEmbedContainer, { "data-testid": "bluesky-embed", "aria-label": formatMessage(translations.blueskyEmbedAriaLabelText), className: className, ref: lazyLoadElementRef }, shouldDisplayComponent ? (React.createElement(BlueskyEmbedBlockquote, { "data-testid": "bluesky-embed-blockquote", className: "bluesky-embed", "data-bluesky-uri": uri, "data-bluesky-cid": cid, ...attributes },
        React.createElement(ConsentBanner, { hasConsent: consentContext.targeting, url: url, consentBannerHeader: translations.consentBannerHeader }))) : (React.createElement(ConsentBanner, { hasConsent: consentContext.targeting, url: url, consentBannerHeader: translations.consentBannerHeader }))));
};
BlueskyEmbed.propTypes = {
    attributes: PropTypes.object,
    children: PropTypes.node,
    cid: PropTypes.string.isRequired,
    className: PropTypes.string,
    uri: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired
};
BlueskyEmbed.displayName = 'BlueskyEmbed';
module.exports = BlueskyEmbed;
//# sourceMappingURL=BlueskyEmbed.js.map

/***/ }),

/***/ 26985:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing } = __webpack_require__(26865);
const BlueskyEmbedBlockquote = styled.blockquote.withConfig({
    displayName: 'BlueskyEmbedBlockquote'
}) ``;
const BlueskyEmbedContainer = styled.div.withConfig({
    displayName: 'BlueskyEmbedContainer'
}) `
  margin: ${calculateSpacing(5)} auto;

  .bluesky-embed {
    margin-right: auto;
    margin-left: auto;
  }
`;
module.exports = {
    BlueskyEmbedBlockquote,
    BlueskyEmbedContainer
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 1129:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    blueskyEmbedAriaLabelText: {
        id: 'BlueskyEmbed.AriaLabelText',
        defaultMessage: 'social media post',
        description: 'ARIA label for the bluesky embed container on Bluesky Embed'
    },
    consentBannerHeader: {
        id: 'BlueskyEmbed.ConsentBannerHeader',
        defaultMessage: 'Bluesky content',
        description: 'Header for message banner'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 43909:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const PaletteProvider = __webpack_require__(49235);
const Grid = __webpack_require__(86659);
const { getSeparatorIconComponent } = __webpack_require__(94811);
const { BreadcrumbTrailWrapper, BreadcrumbTrailScrollContainer, BreadcrumbTrailItem } = __webpack_require__(61670);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * BreadcrumbTrail component
 *
 * @param {object} props - React props
 * @param {Array} props.hierarchy - array of items to populate the breadcrumb trail
 * @param {object} [props.separatorIcon] - Optional prop to specify the separator icon
 * @param {string} [props.separatorIcon.name] - Optional prop to specify the separator icon name, defaults to Chevron
 * @param {string} [props.separatorIcon.type] - Optional prop to specify the separator icon type one of (standard/thin/thinner), defaults to standard
 * @param {boolean} [props.shouldRemoveBackgroundColor] - Optional prop to remove the background color
 * @param {boolean} [props.shouldUseContentHeaderColorForLink] - Optional prop to change breadcrumb item link color
 * @param {string} [props.theme] - Standard or inverted, standard by default
 * @param {boolean} [props.hasMinimalVerticalSpacing] - Optional prop to remove top and bottom padding
 * @param {string}  [props.className] - Additional className to TextOvery Wrapper
 *
 * @returns {ReactElement} <div>
 */
const BreadcrumbTrail = ({ hierarchy, shouldRemoveBackgroundColor = false, theme = 'standard', shouldUseContentHeaderColorForLink, separatorIcon = { name: 'ChevronRight', type: 'standard' }, hasMinimalVerticalSpacing = false, className }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'BreadcrumbTrail'
        });
    }, []);
    return (React.createElement(PaletteProvider, { palette: theme },
        React.createElement(BreadcrumbTrailWrapper, { "data-testid": "BreadcrumbTrail", shouldRemoveBackgroundColor: shouldRemoveBackgroundColor, hasMinimalVerticalSpacing: hasMinimalVerticalSpacing, className: className }, hierarchy && hierarchy.length > 0 && (React.createElement(Grid.WithMargins, null,
            React.createElement(BreadcrumbTrailScrollContainer, null, hierarchy.map((breadcrumbItem, index) => {
                const { name, slug } = breadcrumbItem || {};
                return (React.createElement(BreadcrumbTrailItem, { key: index, shouldUseContentHeaderColorForLink: shouldUseContentHeaderColorForLink },
                    slug ? (React.createElement("a", { className: "breadCrumbLink", href: slug }, name)) : (React.createElement("span", null, name)),
                    getSeparatorIconComponent(separatorIcon)));
            })))))));
};
BreadcrumbTrail.displayName = 'BreadcrumbTrail';
BreadcrumbTrail.propTypes = {
    className: PropTypes.string,
    hasMinimalVerticalSpacing: PropTypes.bool,
    hierarchy: PropTypes.array.isRequired,
    separatorIcon: PropTypes.shape({
        name: PropTypes.string,
        type: PropTypes.oneOf(['standard', 'thin', 'thinner'])
    }),
    shouldRemoveBackgroundColor: PropTypes.bool,
    shouldUseContentHeaderColorForLink: PropTypes.bool,
    theme: PropTypes.string
};
module.exports = BreadcrumbTrail;
//# sourceMappingURL=BreadcrumbTrail.js.map

/***/ }),

/***/ 6538:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const BreadcrumbTrail = __webpack_require__(43909);
module.exports = asConfiguredComponent(BreadcrumbTrail, 'BreadcrumbTrail');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 61670:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { BaseText } = __webpack_require__(76955);
const { calculateSpacing, getLinkStyles, getColorStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { isInverted } = __webpack_require__(70698);
const BreadcrumbTrailWrapper = styled.div.withConfig({
    displayName: 'BreadcrumbTrailWrapper'
}) `
  ${({ theme, shouldRemoveBackgroundColor }) => {
    const colorToken = isInverted(theme)
        ? 'colors.background.black'
        : 'colors.background.light';
    return shouldRemoveBackgroundColor
        ? `background-color: transparent;`
        : `${getColorStyles(theme, 'background-color', colorToken)};`;
}};

  ${({ hasMinimalVerticalSpacing }) => {
    if (hasMinimalVerticalSpacing) {
        return `padding: 0px, 0px`;
    }
    return `padding-top: ${calculateSpacing(2.4)};
      padding-bottom: ${calculateSpacing(2.4)};`;
}}
  width: 100%;

  @media (max-width: ${BREAKPOINTS.md}) {
    overflow-y: hidden;
    overflow-x: scroll;

    &::-webkit-scrollbar {
      display: none;
    }
  }
`;
const BreadcrumbTrailScrollContainer = styled.div.withConfig({
    displayName: 'BreadcrumbTrailScrollContainer'
}) `
  display: flex;
  width: max-content;
`;
const BreadcrumbTrailItem = styled(BaseText).withConfig({
    displayName: 'BreadcrumbTrailItem'
}) `
  display: inline-flex;
  flex-direction: row;
  align-items: center;

  ${({ theme }) => isInverted(theme) &&
    `
      ${getColorStyles(theme, 'color', 'colors.consumption.lead.inverted.link')};`}

  a:active,
  a:link {
    text-decoration: none;
  }

  a:hover,
  a:focus {
    text-decoration: underline;
  }

  .icon {
    margin: 0 ${calculateSpacing(0.2)};

    path {
      ${({ theme }) => isInverted(theme) &&
    `
          ${getColorStyles(theme, 'fill', 'colors.consumption.lead.inverted.link')};
        `}
    }
  }

  &:last-of-type {
    a {
      ${({ theme, shouldUseContentHeaderColorForLink }) => {
    const linkStyle = isInverted(theme)
        ? getLinkStyles(theme, 'colors.consumption.lead.inverted.link', null)
        : getLinkStyles(theme, 'colors.discovery.lead.secondary.link', null);
    return shouldUseContentHeaderColorForLink
        ? getLinkStyles(theme, 'colors.consumption.lead.standard.context-signature', null)
        : linkStyle;
}}

      &:active,
      &:link {
        text-decoration: none;
      }

      &:hover,
      &:focus {
        text-decoration: underline;
      }
    }

    span {
      ${({ theme }) => getColorStyles(theme, 'color', 'colors.discovery.lead.secondary.link')};
    }

    .icon {
      display: none;
    }
  }
`;
BreadcrumbTrailItem.defaultProps = {
    typeIdentity: 'typography.definitions.globalEditorial.tags'
};
module.exports = {
    BreadcrumbTrailWrapper,
    BreadcrumbTrailScrollContainer,
    BreadcrumbTrailItem
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 94811:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { getIconComponent } = __webpack_require__(37584);
/**
 * Based on the separatorIcon properties, get the icon component
 *
 * @param  {object} separatorIcon - Object to specify the separator icon properties
 * @param  {string} separatorIcon.name - the name of the icon, defaults to Chevron
 * @param  {string} separatorIcon.type - the type of the icon (standard/thin/thinner), defaults to standard
 * @returns {ReactComponent} the icon component, fallsback to <ChevronIcon />
 */
const getSeparatorIconComponent = (separatorIcon) => {
    const iconProps = {
        width: '1rem',
        height: '1rem'
    };
    const { name, type } = separatorIcon;
    const IconComponent = getIconComponent(name, type) ||
        getIconComponent('ChevronRight', 'standard');
    return React.createElement(IconComponent, { ...iconProps });
};
module.exports = { getSeparatorIconComponent };
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 83426:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(46331)/* ["default"] */ .A);
const breakpoints = __webpack_require__(99906);
const { TrackComponentChannel } = __webpack_require__(78788);
/*
 * Simple component wrapper which only renders its children on the client
 * Also suppresses the react mismatch error
 */
const RenderClientOnly = ({ children }) => {
    return (React.createElement("div", { suppressHydrationWarning: true },  true && children));
};
RenderClientOnly.propTypes = {
    children: PropTypes.node
};
const isMobileLayout = () => {
    const query = `(max-width: ${breakpoints.minThresholds.lg}px)`;
    return  true && window.matchMedia(query).matches;
};
const Ceros = ({ width, height, mobileWidth = 0, mobileHeight = 0, url }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'Ceros'
        });
    }, []);
    let realHeight = height;
    let aspectRatio = width / height;
    if (isMobileLayout() && mobileWidth && mobileHeight) {
        realHeight = mobileHeight;
        aspectRatio = mobileWidth / mobileHeight;
    }
    const { formatMessage } = useIntl();
    const style = {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        margin: 0,
        padding: 0,
        border: 0,
        height: '1px',
        width: '1px',
        minHeight: '100%',
        minWidth: '100%'
    };
    style.WebkitOverflowScrolling = 'touch';
    return (React.createElement(React.Fragment, null,
        React.createElement(RenderClientOnly, null,
            React.createElement("div", { style: {
                    position: 'relative',
                    width: 'auto',
                    padding: `0 0 ${realHeight}%`,
                    height: 0,
                    top: 0,
                    left: 0,
                    bottom: 0,
                    right: 0,
                    margin: 0,
                    border: 0
                }, "data-aspectratio": aspectRatio },
                React.createElement("iframe", { allowFullScreen: true, src: url, title: formatMessage(translations.iframeTitle), style: style, frameBorder: "0", className: "ceros-experience", scrolling: "no" }))),
        React.createElement("script", { src: "https://view.ceros.com/scroll-proxy.min.js", "data-ceros-origin-domains": "view.ceros.com" })));
};
Ceros.propTypes = {
    height: PropTypes.number,
    mobileHeight: PropTypes.number,
    mobileWidth: PropTypes.number,
    url: PropTypes.string.isRequired,
    width: PropTypes.number
};
module.exports = Ceros;
//# sourceMappingURL=Ceros.js.map

/***/ }),

/***/ 52818:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(83426);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 46331:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    iframeTitle: {
        id: 'Ceros.IframeTitle',
        defaultMessage: 'Ceros embed',
        description: 'Ceros component iframe title'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 94093:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { useIntl } = __webpack_require__(46984);
const { CAN_USE_DOM } = __webpack_require__(96472);
const translations = (__webpack_require__(60821)/* ["default"] */ .A);
const { TrackComponentChannel } = __webpack_require__(78788);
const { ConsentBannerWrapper, ConsentBannerTitle, ConsentBannerLink } = __webpack_require__(63507);
/**
 * ConsentBanner component
 *
 * @param {object} props.consentBannerHeader - translation object for displaying banner header
 * @param {boolean} props.hasConsent - status of the consent
 * @param {string} [props.url] - source link
 *
 * @returns {ReactElement} <div>
 */
const ConsentBanner = ({ consentBannerHeader, hasConsent, url }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ConsentBanner'
        });
    }, []);
    const { formatMessage } = useIntl();
    const shouldDisplayConsentWarning = CAN_USE_DOM && !hasConsent;
    const anchorTag = (text) => (React.createElement(ConsentBannerLink, { href: url, target: "_blank", rel: "nofollow noreferrer", "aria-label": "Opens in a new window", dangerouslySetInnerHTML: { __html: text } }));
    return (React.createElement(ConsentBannerWrapper, { contentAlign: "center" },
        React.createElement(ConsentBannerTitle, null, formatMessage(consentBannerHeader)),
        React.createElement("p", null, formatMessage(shouldDisplayConsentWarning
            ? translations.consentWarningText
            : translations.consentText, {
            url,
            a: anchorTag
        }))));
};
ConsentBanner.propTypes = {
    consentBannerHeader: PropTypes.object.isRequired,
    hasConsent: PropTypes.bool.isRequired,
    url: PropTypes.string
};
module.exports = ConsentBanner;
//# sourceMappingURL=ConsentBanner.js.map

/***/ }),

/***/ 83561:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(94093);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 63507:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const Banner = __webpack_require__(62282);
const { BaseLink } = __webpack_require__(76955);
const ConsentBannerWrapper = styled(Banner).withConfig({
    displayName: 'ConsentBannerWrapper'
}) `
  width: 100%;
`;
const ConsentBannerTitle = styled.h4.withConfig({
    displayName: 'ConsentBannerTitle'
}) `
  /* Note: This overrides specificity from .body h4 */
  && {
    margin-top: 0;
  }
`;
const ConsentBannerLink = styled(BaseLink).withConfig({
    displayName: 'ConsentBannerLink'
}) ``;
/* Styles taken from MessageBanner  */
ConsentBannerLink.defaultProps = {
    colorToken: 'colors.consumption.lead.standard.context-tertiary',
    typeIdentity: 'typography.definitions.utility.assistive-text'
};
module.exports = {
    ConsentBannerWrapper,
    ConsentBannerTitle,
    ConsentBannerLink
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 60821:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    consentWarningText: {
        id: 'ConsentBanner.consentWarningText',
        defaultMessage: 'To honor your privacy preferences, this content can only be viewed on the site it <a>originates</a> from.',
        description: 'Warning text for message banner'
    },
    consentText: {
        id: 'ConsentBanner.consentText',
        defaultMessage: 'This content can also be viewed on the site it <a>originates</a> from.',
        description: 'Text for message banner'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 9125:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const { useContext, useEffect, useRef } = __webpack_require__(96540);
const { ConsentContext } = __webpack_require__(85438);
const cookie = __webpack_require__(56892);
const { getXid } = __webpack_require__(31601);
const { IdentityMapper } = __webpack_require__(49974);
const { linkPermutive, linkSparrow } = __webpack_require__(73732);
const link4d = async (xid) => {
    window._4d = window._4d || {}; // We should always already have a window._4d object
    window._4d.user = window._4d.user || {}; // Set a default value in here
    if (xid) {
        const url = `https://4d.condenastdigital.com/user?xid=${encodeURIComponent(xid)}`;
        try {
            const res = await fetch(url);
            window._4d.user = await res.json();
        }
        catch (e) {
            console.error('Error linking xid to 4d', e);
        }
    }
};
/**
 * This component listens for content targetting to be set then
 * calls out to a few things related to XID
 *
 * 1) Get an xid
 * 2) Link xid to permutive
 * 3) Link xid to sparrow
 * 4) Get 4d user data based off of xid
 *
 * @param {object} props - React props
 * @param {boolean} props.shouldEnableFourdUser - From fourd.enableFourdUser transformer
 * @param {boolean} props.shouldEnableInfinityId - From featureFlags to fetch an xid from infinityid service
 * @param {object} props.idmConfig - IdentityMapper config
 *
 * */
const ConsentTargeting = ({ shouldEnableInfinityId, shouldEnableFourdUser, idmConfig }) => {
    // only load user data after they consent
    const consentContext = useContext(ConsentContext);
    const identityMapper = useRef();
    useEffect(() => {
        async function run() {
            if (consentContext.targeting) {
                let id;
                if (shouldEnableInfinityId) {
                    id = await getXid();
                }
                const xid = id || cookie.getCookie('CN_xid');
                if (xid) {
                    if (!identityMapper.current) {
                        identityMapper.current = new IdentityMapper({ ...idmConfig, xid });
                        identityMapper.current.init();
                    }
                    linkPermutive(xid, idmConfig.isEnabled);
                    linkSparrow(xid);
                }
                if (shouldEnableFourdUser) {
                    link4d(xid);
                }
            }
        }
        run();
    }, [
        consentContext,
        shouldEnableInfinityId,
        shouldEnableFourdUser,
        idmConfig
    ]);
    return null;
};
ConsentTargeting.propTypes = {
    idmConfig: PropTypes.shape({
        isEnabled: PropTypes.bool,
        publicKey: PropTypes.string
    }),
    shouldEnableFourdUser: PropTypes.bool,
    shouldEnableInfinityId: PropTypes.bool
};
module.exports = ConsentTargeting;
//# sourceMappingURL=ConsentTargeting.js.map

/***/ }),

/***/ 55482:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(9125);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 29276:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const get = __webpack_require__(58156);
const { mergeRefs } = __webpack_require__(54370);
const useLazyLoadComponent = __webpack_require__(70920);
const { useContentLang } = __webpack_require__(76573);
const { ConsentContext } = __webpack_require__(85438);
const ConsentBanner = __webpack_require__(83561);
const translations = (__webpack_require__(22520)/* ["default"] */ .A);
const { CoolTabsEmbedContainer, CoolTabsEmbedFrame } = __webpack_require__(32414);
const { TrackComponentChannel } = __webpack_require__(78788);
const { useContext, useEffect, useState, useRef } = React;
/**
 * Language code mapping for CoolTabs
 * Maps input language codes to their CoolTabs equivalents
 */
const COOLTABS_LANG_MAP = {
    'zh-Hant-TW': 'zh-TW',
    'zh-CN': 'zh-CN',
    'zh-HK': 'zh-HK',
    'zh-SG': 'zh-SG',
    'pt-BR': 'pt-BR',
    'pt-PT': 'pt-PT',
    'es-ES': 'es',
    'es-MX': 'es-MX',
    'es-AR': 'es-AR'
};
/**
 * Get the appropriate language code for CoolTabs
 * @param {string} lang - The language code from context or props
 * @returns {string} The formatted language code for CoolTabs
 */
const getCoolTabsLang = (lang = 'en-US') => {
    return COOLTABS_LANG_MAP[lang] || lang.split('-')[0];
};
/**
 * Validates and formats the URL with language parameters
 * @param {string} url - The original URL
 * @param {string} lang - The language code
 * @returns {string} The formatted URL with language parameters
 */
const formatUrlWithLang = (url, lang) => {
    try {
        const urlObj = new URL(url);
        const coolTabsLang = getCoolTabsLang(lang);
        // Add or update locale parameter
        urlObj.searchParams.set('locale', coolTabsLang);
        return urlObj.toString();
    }
    catch (error) {
        // Log the error or handle it appropriately without console.error
        return url;
    }
};
/**
 * CoolTabsEmbed component for displaying embedded marketing forms
 * @param {object} props - React props
 * @param {object} [props.attributes] - Optional attributes to add top level i.e. aria-*, role, etc.
 * @param {string} [props.className] - Optional top-level class to add
 * @param {object} [props.dataAttributes] - Object of custom attributes like max-height, lazy, etc.
 * @param {boolean} [props.hideText] - Determines whether text should be displayed or not
 * @param {string} props.url - Required url for CoolTabs content
 * @returns {JSX.Element} CoolTabsEmbed component
 */
const CoolTabsEmbed = ({ attributes = {}, className = '', url, dataAttributes, hideText = false }) => {
    // Static methods and variables
    const { formatMessage } = useIntl();
    const consentContext = useContext(ConsentContext);
    const lang = useContentLang();
    const coolTabsLang = getCoolTabsLang(lang);
    // Instance variables
    const [containerWidth, setContainerWidth] = useState(null);
    const [lazyLoadElementRef, shouldLoadComponent] = useLazyLoadComponent();
    const [scriptLoaded, setScriptLoaded] = useState(false);
    const ref = useRef();
    // Computed properties
    const shouldDisplayComponent = consentContext.targeting && shouldLoadComponent;
    // Lifecycle methods
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'CoolTabsEmbed'
        });
    }, []);
    useEffect(() => {
        setContainerWidth(get(ref, 'current.offsetWidth', 500));
    }, [ref]);
    useEffect(() => {
        if (shouldDisplayComponent && !scriptLoaded) {
            const loadScript = () => {
                if (!document.getElementById('cooltabs-embed')) {
                    const script = document.createElement('script');
                    script.id = 'cooltabs-embed';
                    script.className = 'cooltabs-embed';
                    script.src = `https://cdn.ct-assets.com/assets/ct-embed.js?lang=${coolTabsLang}`;
                    script.onload = () => {
                        setScriptLoaded(true);
                    };
                    document.body.appendChild(script);
                }
            };
            loadScript();
        }
    }, [shouldDisplayComponent, coolTabsLang, scriptLoaded]);
    // Format URL with language parameters
    const formattedUrl = formatUrlWithLang(url, lang);
    // Render method
    return (React.createElement(CoolTabsEmbedContainer, { ...attributes, className: className, "data-type": "cooltabs", "aria-label": formatMessage(translations.cooltabsAriaLabelText), ref: mergeRefs(ref, lazyLoadElementRef) }, shouldDisplayComponent ? (React.createElement(CoolTabsEmbedFrame, { className: "ct_embeded", "data-src": formattedUrl, "data-show-text": hideText ? 'false' : 'true', "data-width": containerWidth, "data-lang": coolTabsLang, "data-locale": coolTabsLang, ...dataAttributes })) : (React.createElement(ConsentBanner, { hasConsent: consentContext.targeting, url: formattedUrl, consentBannerHeader: translations.consentBannerHeader }))));
};
CoolTabsEmbed.propTypes = {
    attributes: PropTypes.object,
    className: PropTypes.string,
    dataAttributes: PropTypes.object,
    hideText: PropTypes.bool,
    url: PropTypes.string.isRequired
};
CoolTabsEmbed.defaultProps = {
    attributes: {},
    className: '',
    dataAttributes: {},
    hideText: false
};
CoolTabsEmbed.displayName = 'CoolTabsEmbed';
CoolTabsEmbed.getCoolTabsLang = getCoolTabsLang;
module.exports = CoolTabsEmbed;
//# sourceMappingURL=CoolTabsEmbed.js.map

/***/ }),

/***/ 63938:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(29276);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 32414:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing } = __webpack_require__(26865);
const CoolTabsEmbedContainer = styled.div.withConfig({
    displayName: 'CoolTabsEmbedContainer'
}) `
  align-self: center;
  margin: ${calculateSpacing(5)} auto;
  text-align: center;
  justify-self: center;
  place-self: auto;
`;
const CoolTabsEmbedFrame = styled.div.withConfig({
    displayName: 'CoolTabsEmbedFrame'
}) `
  justify-self: center;
  margin: 0 auto;
`;
module.exports = {
    CoolTabsEmbedContainer,
    CoolTabsEmbedFrame
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 22520:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    cooltabsAriaLabelText: {
        id: 'CoolTabsEmbed.AriaLabelText',
        defaultMessage: 'CoolTabs embed',
        description: 'ARIA label for the CoolTabs embed container'
    },
    consentBannerHeader: {
        id: 'CoolTabsEmbed.ConsentBannerHeader',
        defaultMessage: 'CoolTab content',
        description: 'Header for consent banner'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 19941:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { useEffect, useState } = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const injectScript = __webpack_require__(22445);
const { FIDES_IDENTIFIER, useConsentUpdatedCallback } = __webpack_require__(64687);
/**
 * Checks if the user has consented to functional cookies
 * Works with both Ethyca and OneTrust consent management platforms
 *
 * @param {string|undefined} cmp - The consent management platform identifier
 * @returns {boolean} - Whether the user has consented to functional cookies
 */
const checkFunctionalConsent = (cmp) => {
    if (false)
        {}
    return cmp === FIDES_IDENTIFIER
        ? window?.Fides?.consent?.functional
        : window.OnetrustActiveGroups?.split(',').includes('C0003');
};
/**
 * Checks if the current browser is Safari
 *
 * @returns {boolean} - Whether the current browser is Safari
 */
const isSafariBrowser = () => {
    if (false)
        {}
    try {
        const { userAgent } = window.navigator;
        return (userAgent.includes('Safari') &&
            !userAgent.includes('Chrome') &&
            !userAgent.includes('Edg') && // Modern Edge (Chromium-based)
            !userAgent.includes('Edge') // Legacy Edge (EdgeHTML-based)
        );
    }
    catch (e) {
        return false;
    }
};
/**
 * CrashDetection component
 * Renders crash detection script that appends to the bottom of the body
 * only when user has provided functional consent and is using Safari browser
 *
 * @param {object} props - Component props
 * @param {boolean} [props.isEnabled=true] - Whether the crash detection is enabled
 * @param {string} [props.scriptPath] - Crash detection script path
 * @returns {React.ReactElement|null} Empty fragment
 */
const CrashDetection = ({ isEnabled = true, scriptPath = '/verso/static/crash-detection.js' }) => {
    const cmp =  true && window?.Fides
        ? FIDES_IDENTIFIER
        : undefined;
    const [hasUserConsented, setUserConsented] = useState(() => checkFunctionalConsent(cmp));
    useConsentUpdatedCallback(() => {
        setUserConsented(checkFunctionalConsent(cmp));
    });
    useEffect(() => {
        if (isEnabled && hasUserConsented && isSafariBrowser()) {
            const scriptElement = injectScript(scriptPath, document.body, {
                type: 'text/javascript',
                id: 'crash-detection-script',
                async: true
            }, () => {
                console.log('Crash detection script loaded');
            });
            return () => {
                if (scriptElement && scriptElement.parentNode) {
                    scriptElement.parentNode.removeChild(scriptElement);
                }
            };
        }
        return undefined;
    }, [isEnabled, hasUserConsented, scriptPath]);
    return null;
};
CrashDetection.propTypes = {
    isEnabled: PropTypes.bool,
    scriptPath: PropTypes.string
};
module.exports = CrashDetection;
//# sourceMappingURL=CrashDetection.js.map

/***/ }),

/***/ 51355:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(19941);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 65134:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { DiscoveryPullQuoteContainer, DiscoveryPullQuoteRubric, DiscoveryPullQuoteHead, DiscoveryPullQuoteHeadDiv, DiscoveryPullQuoteHeadLink, DiscoveryPullQuoteDek, DiscoveryPullQuoteSource, DiscoveryPullQuoteSourceLink } = __webpack_require__(12611);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * DiscoveryPullQuote component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.dangerousDek] - Optional dek
 * @param {string} props.dangerousHed - required Hed
 * @param {string} props.hasUnderline - Optional hasunderline
 * @param {string} [props.rubric] - Optional rubric
 * @param {string} [props.source] - Optional source
 * @param {string} props.url - required url
 *
 */
const DiscoveryPullQuote = ({ className, dangerousDek, dangerousHed, rubric, source, url, hasUnderline = true }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'DiscoveryPullQuote'
        });
    }, []);
    return (React.createElement(DiscoveryPullQuoteContainer, { className: className, "data-testid": "discovery-pullquote-container" },
        rubric && (React.createElement(DiscoveryPullQuoteRubric, { dangerouslySetInnerHTML: { __html: rubric } })),
        React.createElement(DiscoveryPullQuoteHead, null, hasUnderline ? (React.createElement(DiscoveryPullQuoteHeadLink, { "data-testid": "discovery-pullquote-head-link", href: url, dangerouslySetInnerHTML: { __html: dangerousHed } })) : (React.createElement(DiscoveryPullQuoteHeadDiv, { "data-testid": "discovery-pullquote-head-div", href: url, dangerouslySetInnerHTML: { __html: dangerousHed } }))),
        dangerousDek && (React.createElement(DiscoveryPullQuoteDek, { dangerouslySetInnerHTML: { __html: dangerousDek } })),
        source && (React.createElement(DiscoveryPullQuoteSource, null,
            React.createElement(DiscoveryPullQuoteSourceLink, { "data-testid": "discovery-pullquote-source-link", href: url, dangerouslySetInnerHTML: { __html: source } })))));
};
DiscoveryPullQuote.propTypes = {
    className: PropTypes.string,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string.isRequired,
    hasUnderline: PropTypes.bool,
    rubric: PropTypes.string,
    source: PropTypes.string,
    url: PropTypes.string.isRequired
};
DiscoveryPullQuote.displayName = 'DiscoveryPullQuote';
module.exports = DiscoveryPullQuote;
//# sourceMappingURL=DiscoveryPullQuote.js.map

/***/ }),

/***/ 48985:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(65134);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 12611:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BaseLink } = __webpack_require__(76955);
const { BREAKPOINTS } = __webpack_require__(96472);
const { calculateSpacing, getColorStyles, getTypographyStyles } = __webpack_require__(26865);
const DiscoveryPullQuoteContainer = styled.div.withConfig({
    displayName: 'DiscoveryPullQuoteContainer'
}) `
  ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.discovery.body.white.background')};

  padding: ${calculateSpacing(6)} ${calculateSpacing(2)};

  @media (min-width: ${BREAKPOINTS.md}) {
    padding: ${calculateSpacing(7)} ${calculateSpacing(2)};
  }

  text-align: center;
`;
const DiscoveryPullQuoteRubric = styled.div.withConfig({
    displayName: 'DiscoveryPullQuoteRubric'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-primary')};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.lead.standard.context-signature')};
`;
const DiscoveryPullQuoteHead = styled.div.withConfig({
    displayName: 'DiscoveryPullQuoteHead'
}) `
  margin-top: ${calculateSpacing(2)};
`;
const DiscoveryPullQuoteHeadLink = styled(BaseLink).withConfig({
    displayName: 'DiscoveryPullQuoteHeadLink'
}) ``;
DiscoveryPullQuoteHeadLink.defaultProps = {
    colorStaticLinkToken: 'colors.consumption.body.standard.subhed',
    typeToken: 'typography.definitions.consumptionEditorial.display-medium'
};
const DiscoveryPullQuoteHeadDiv = styled(BaseLink).withConfig({
    displayName: 'DiscoveryPullQuoteHeadLink'
}) ``;
DiscoveryPullQuoteHeadDiv.defaultProps = {
    colorStaticLinkToken: 'colors.consumption.body.standard.subhed',
    hasUnderline: false,
    typeToken: 'typography.definitions.consumptionEditorial.display-medium'
};
const DiscoveryPullQuoteDek = styled.div.withConfig({
    displayName: 'DiscoveryPullQuoteDek'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.description-feature')};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body')};
  margin-top: ${calculateSpacing(4)};
  @media (min-width: ${BREAKPOINTS.md}) {
    margin-top: ${calculateSpacing(5)};
  }
`;
const DiscoveryPullQuoteSource = styled.div.withConfig({
    displayName: 'DiscoveryPullQuoteSource'
}) `
  margin-top: ${calculateSpacing(5)};
  @media (min-width: ${BREAKPOINTS.md}) {
    margin-top: ${calculateSpacing(6)};
  }
`;
const DiscoveryPullQuoteSourceLink = styled(BaseLink).withConfig({
    displayName: 'DiscoveryPullQuoteSourceLink'
}) ``;
DiscoveryPullQuoteSourceLink.defaultProps = {
    colorStaticLinkToken: 'colors.consumption.body.standard.subhed',
    typeToken: 'typography.definitions.globalEditorial.context-title'
};
module.exports = {
    DiscoveryPullQuoteContainer,
    DiscoveryPullQuoteRubric,
    DiscoveryPullQuoteHead,
    DiscoveryPullQuoteHeadDiv,
    DiscoveryPullQuoteHeadLink,
    DiscoveryPullQuoteDek,
    DiscoveryPullQuoteSource,
    DiscoveryPullQuoteSourceLink
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 73812:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useEffect, useState } = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const { components } = __webpack_require__(46005);
const { default: translations } = __webpack_require__(5943);
const { ControlsWrapper, ApplyButton, ClearAllButton } = __webpack_require__(89051);
const CustomMenuButtons = (props) => {
    const { formatMessage } = useIntl();
    const onTouchEnd = (e) => {
        e.stopPropagation();
    };
    const [isValueSelected, setIsValueSelected] = useState(false);
    const { selectedDropdownNames, options } = props.selectProps || {};
    useEffect(() => {
        if (selectedDropdownNames && options) {
            const optionsDropdownName = options[0]?.dropdownName || null;
            setIsValueSelected(optionsDropdownName &&
                selectedDropdownNames.includes(optionsDropdownName));
        }
        else {
            setIsValueSelected(false);
        }
    }, [selectedDropdownNames, options]);
    return (React.createElement(components.Menu, { ...props },
        props.children,
        React.createElement(ControlsWrapper, { onTouchEnd: onTouchEnd },
            isValueSelected && (React.createElement(ClearAllButton, { onClick: props.selectProps.handleReset }, props.clearAllButtonLabel ||
                formatMessage(translations.clearAllButtonLabel))),
            React.createElement(ApplyButton, { label: props.applyButtonLabel ||
                    formatMessage(translations.applyButtonLabel), inputKind: "button", isDisabled: props.isLoading, shouldShowLoadingState: true, onClickHandler: props.selectProps.handleApply }))));
};
CustomMenuButtons.propTypes = {
    applyButtonLabel: PropTypes.string,
    children: PropTypes.node,
    clearAllButtonLabel: PropTypes.string,
    isLoading: PropTypes.bool,
    selectProps: PropTypes.shape({
        handleApply: PropTypes.func,
        handleReset: PropTypes.func,
        options: PropTypes.array,
        selectedValue: PropTypes.array
    })
};
module.exports = CustomMenuButtons;
//# sourceMappingURL=CustomMenuButtons.js.map

/***/ }),

/***/ 89051:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { getTypographyStyles, getColorToken, calculateSpacing } = __webpack_require__(26865);
const Button = __webpack_require__(73730);
const ControlsWrapper = styled.div.withConfig({
    displayName: 'ControlsWrapper'
}) `
  display: flex;
  justify-content: space-between;
  border: solid 1px #ccc;
  border-top: solid 1px
    ${({ theme }) => getColorToken(theme, 'colors.interactive.base.light')};
`;
const ApplyButton = styled(Button.Primary).withConfig({
    displayName: 'ApplyButton'
}) `
  margin: ${calculateSpacing(2)} ${calculateSpacing(2)} ${calculateSpacing(2)}
    auto;
  background: #000;
  padding: ${calculateSpacing(1.25)};
  width: ${calculateSpacing(8.25)};
  min-width: auto;
  height: ${calculateSpacing(4)};
  color: ${getColorToken('colors.interactive.base.white')};
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.utility.button-core')};

  &,
  &:focus,
  &:hover {
    text-decoration: none;
  }
`;
const ClearAllButton = styled.button.withConfig({
    displayName: 'ClearAllButton'
}) `
  margin: ${calculateSpacing(2)};
  background: transparent;
  color: ${getColorToken('colors.interactive.base.black')};
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-secondary')};

  &,
  &:focus,
  &:hover {
    text-decoration: none;
  }
`;
module.exports = {
    ControlsWrapper,
    ApplyButton,
    ClearAllButton
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 11446:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState } = __webpack_require__(96540);
const { components } = __webpack_require__(46005);
const differenceWith = __webpack_require__(64889);
const isEqual = __webpack_require__(2404);
const omit = __webpack_require__(90179);
const MenuList = __webpack_require__(10740);
const LargeChevron = __webpack_require__(708);
const { SearchResultOption } = __webpack_require__(66510);
const UtilitySelectionControl = __webpack_require__(67685);
const CustomMenuButtons = __webpack_require__(73812);
const { AsyncDropdownSelect, DropdownWrapper, DropdownName, DropdownSelect } = __webpack_require__(58293);
const { matchBrandFilterOptions } = __webpack_require__(23273);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * Placeholder DropdownIndicator component, consumed by react-select
 *
 * @param {object} props - React props
 * @param {object} props.innerProps - internal props passed down by <Select>
 *
 * @returns {ReactElement} <span>
 */
const DropdownIndicator = ({ innerProps }) => (React.createElement("span", { ...innerProps, className: "dropdown__icon" },
    React.createElement(LargeChevron, null)));
DropdownIndicator.propTypes = {
    innerProps: PropTypes.any
};
/**
 * @param {object} [defaultValue] - Optional default value
 * @param {string} [placeholderText] - Optional text to show when no item is selected. Ignored if there is a defaultValue. Otherwise defaults to the first option's label, then empty string
 * @param {boolean} [shouldShowPlaceholderText] - Optional prop to control whether to show placeholder text. Defaults to true. Ignored if there is a defaultValue.
 *
 * @returns {string|undefined} placeholderText
 */
const getPlaceholder = (defaultValue, placeholderText, shouldShowPlaceholderText) => {
    const placeholder = (defaultValue && Object.keys(defaultValue).length > 0) ||
        !shouldShowPlaceholderText
        ? undefined
        : placeholderText;
    return placeholder;
};
/**
 * Handler passing into react-select the message shown when no options available
 *
 * @param {string} [noOptionsMessage] - Optional. Message to display when no options. Defaults to 'No Options'
 *
 * @returns {string} noOptionsMessage
 */
const handleNoOptionsMessage = (noOptionsMessage) => `${noOptionsMessage}`;
/**
 * Pass in no styles to react-select dropdown
 * Helps with styling the input placeholder when dropdown isSearchable
 *
 * @returns {object} empty object
 */
const handleStylesInputProp = () => ({});
const onChangeHandler = () => { };
const OptionWithCheckbox = (props) => {
    const { data, isSelected, label, options, value } = props;
    return (React.createElement("div", null,
        React.createElement(components.Option, { ...props },
            React.createElement(UtilitySelectionControl.Checkbox, { formName: "option-with-checkbox", index: options
                    .map((val, idx) => {
                    if (val === data)
                        return idx;
                    return 0;
                })
                    .filter(Number.isFinite)[0], isChecked: isSelected, label: label, name: value, onChangeHandler: onChangeHandler, value: value }))));
};
OptionWithCheckbox.propTypes = {
    data: PropTypes.shape({
        label: PropTypes.string,
        value: PropTypes.string
    }),
    isSelected: PropTypes.bool,
    label: PropTypes.string,
    options: PropTypes.array,
    value: PropTypes.string.isRequired
};
/**
 * Dropdown component
 * Wraps the react-select library: https://github.com/JedWatson/react-select
 *
 * @param {object} props - React props
 * @param {string} props.assistiveLabel - Assistive label to display above dropdown
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.customUnavailableFiltersLabel] - Unavailable filter label
 * @param {object} [props.defaultValue] - Optional default value
 * @param {object} [props.selectedValue] - Optional value to be set
 * @param {Function} [props.DropdownIcon] - Optional dropdown icon
 * @param {string} [props.dropdownInputName] - Name to generate a hidden <input> from which to get value of selected option
 * @param {Function} [props.onFilterApplyCallback] - Optional callback function to apply the selected filter on click of apply button
 * @param {Function} [props.onFilterResetCallback] - Optional callback function to reset the selected filter on click of reset button
 * @param {Function} [props.onMenuCloseCallback] - Optional callback function on menu close
 * @param {string} [props.hasCount] - Optional prop to display the number of options selected
 * @param {bool} [props.hasEnableGreyout] - Optional to grey out disabled dropdown
 * @param {string} [props.hasNoPadding] - Optional prop for disable the padding
 * @param {boolean} [props.hideBackgroundColor] - Optional prop to remove backgroundColor.
 * @param {object} [props.inputAttributes] - Optional attributes to add on element
 * @param {string} [props.instanceId] - Optional id of the search input
 * @param {boolean} [props.isAsyncSelect] - Optional flag to enable async dropdown
 * @param {boolean} [props.isClearable] - Optional flag to allow selected value to be cleared
 * @param {boolean} [props.blurInputOnSelect] - Optional flag to prevent the dropdown menu from closing when clicking the button
 * @param {boolean} [props.isDisabled] - Optional prop to control disabled state.
 * @param {boolean} [props.isDropdownMenuOpen] - Optional prop to control the dropdown menu
 * @param {boolean} [props.isInline] - Optional prop to change inline or block label and drop menu
 * @param {boolean} [props.isMenuOpen] - Optional prop to control show/hide menu
 * @param {boolean} [props.isLoading] - Optional prop to control loading state
 * @param {boolean} [props.isAsyncSelect] - Optional flag to enable async dropdown
 * @param {Function} [props.loadOptions] - Optional prop as a function that returns a promise to be passed when isAsyncSelect is true
 * @param {string} [props.noOptionsMessage] - Optional. Message to display when no options. Defaults to 'No Options'
 * @param {Function} [props.onInputChange] - Optional method to add functionality on input change. Takes in the selected value as a parameter.
 * @param {string} [props.onKeyUp] - Optional method to trigger on key up event.
 * @param {Function} [props.onMenuOpenCallback] - Optional callback function on menu open
 * @param {string} [props.configWidth] - Optional width of the dropdown.
 * @param {Array} props.options - List of options
 * @param {Array} props.unavailableOptions - all unavailable dropdown options
 * @param {object} [props.value] - Optional prop to set selected value of dropdown
 * @param {boolean} [props.isMultiSelect] -  Sets whether dropdown is a single or multi select
 * @param {boolean} [props.isSearchable] -  Sets whether dropdown can be searched with editable input. Defaults to false.
 * @param {boolean} [props.hasMenuControls] -  Sets dropdown to have apply and clear all button in the menu for the options controls. Defaults to false
 * @param {string} [props.placeholderText] - Optional text to show when no item is selected. Ignored if there is a defaultValue. Otherwise defaults to the first option's label, then empty string
 * @param {boolean} [props.shouldCloseMenuOnSelect] - Optional prop to control whether the menu should close on select. Default to true.
 * @param {boolean} [props.shouldControlShowValue] - Optional prop to show value in the control. Defaults to true.
 * @param {boolean} [props.shouldEnableVirtusoDropdown] - Optional prop to enable Virtuoso package to render dropdown data efficiently
 * @param {boolean} [props.shouldHideSelectedOptions] - Optional prop to hide selected value in menu. Defaults to false.
 * @param {boolean} [props.shouldRenderOptionWithCheckbox] - Optional prop to render menu options with checkbox. Defaults to false.
 * @param {boolean} [props.shouldShowPlaceholderText] - Optional prop to control whether to show placeholder text. Defaults to true. Ignored if there is a defaultValue.
 * @param {boolean} [props.shouldMatchStringsStartingWith] - Optional prop to filter the options in the dropdown based on the starting letter.Defaults to false.
 * @param {Array} [props.selectedDropdownNames] - Optional array of selected dropdown names for tracking purposes
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 *
 * @returns {ReactElement} <label>
 */
const Dropdown = ({ assistiveLabel, className, selectedValue, defaultValue, dropdownInputName, hasNoPadding, instanceId, inputAttributes, isAsyncSelect, isDisabled, isDropdownMenuOpen, isInline, loadOptions, onInputChange, onKeyUp, configWidth, options, placeholderText, DropdownIcon, isMenuOpen, variationName, onFilterApplyCallback, onFilterResetCallback, onMenuCloseCallback, isLoading, onMenuOpenCallback, hasCount = false, hasEnableGreyout = false, hasMenuControls = false, hideBackgroundColor = false, isClearable = false, isMultiSelect = false, isSearchable = false, noOptionsMessage = 'No options', shouldCloseMenuOnSelect = true, shouldControlShowValue = true, shouldEnableVirtusoDropdown = false, shouldHideSelectedOptions = false, shouldMatchStringsStartingWith = false, shouldRenderOptionWithCheckbox = false, shouldShowPlaceholderText = true, unavailableOptions = [], customUnavailableFiltersLabel, selectedDropdownNames }) => {
    const [menuIsOpen, setMenuIsOpen] = useState(false);
    const [inputValue, setInputValue] = useState('');
    const handleApply = () => {
        setInputValue('');
        setMenuIsOpen(false);
        onFilterApplyCallback && onFilterApplyCallback(selectedValue);
    };
    const handleReset = () => {
        // when we clear all options for a dropdown, removing the common objects between array selectedValue & options.
        // ignoring 'count' property of options when comparing, as this property value is dynamic due to filtering
        const remainingSelectedFilters = differenceWith(selectedValue, options, (selectedValues, optionsForDropdown) => {
            return isEqual(omit(selectedValues, ['count']), omit(optionsForDropdown, ['count']));
        });
        onFilterResetCallback && onFilterResetCallback(remainingSelectedFilters);
    };
    const onMenuClose = () => {
        setInputValue('');
        setMenuIsOpen(false);
        onMenuCloseCallback && onMenuCloseCallback();
    };
    const onMenuOpen = () => {
        setMenuIsOpen(true);
        onMenuOpenCallback && onMenuOpenCallback();
    };
    React.useEffect(() => {
        setMenuIsOpen(isDropdownMenuOpen);
    }, [isDropdownMenuOpen]);
    const handleInputChange = (newValue, actionMeta) => {
        if (actionMeta.action === 'input-change' && newValue !== inputValue) {
            setInputValue(newValue);
        }
    };
    const filter = (options) => {
        const filteredOptions = options.filter((option) => selectedValue?.some((select) => select.value === option.value));
        if (filteredOptions.length >= 100) {
            return '99+';
        }
        return filteredOptions.length;
    };
    const placeholder = hasCount && filter(options) !== 0 ? (React.createElement(React.Fragment, null,
        React.createElement("div", null, placeholderText),
        React.createElement("div", { className: "dropdown__placeholder--count" }, filter(options)))) : (getPlaceholder(defaultValue, placeholderText, shouldShowPlaceholderText));
    const sharedProps = {
        ...inputAttributes,
        ...(selectedValue ? { value: selectedValue } : {}),
        className: 'dropdown__field',
        classNamePrefix: 'dropdown',
        components: {
            ...(hasMenuControls && options && { Menu: CustomMenuButtons }),
            DropdownIndicator: DropdownIcon || DropdownIndicator,
            ...(shouldRenderOptionWithCheckbox && { Option: OptionWithCheckbox }),
            ...(isAsyncSelect && { Option: SearchResultOption }),
            ...(shouldEnableVirtusoDropdown && { MenuList })
        },
        closeMenuOnSelect: shouldCloseMenuOnSelect,
        controlShouldRenderValue: shouldControlShowValue,
        defaultValue,
        hasCount,
        hasEnableGreyout,
        hideSelectedOptions: shouldHideSelectedOptions,
        instanceId,
        isClearable,
        blurInputOnSelect: false,
        isDisabled,
        isSearchable,
        isAsyncSelect,
        isMenuOpen,
        isMulti: isMultiSelect,
        menuIsOpen,
        ...(hasMenuControls && {
            onMenuOpen,
            onMenuClose,
            handleApply,
            handleReset,
            isLoading,
            options,
            selectedDropdownNames
        }),
        name: dropdownInputName,
        noOptionsMessage: () => handleNoOptionsMessage(noOptionsMessage),
        onChange: onInputChange,
        ...(hasMenuControls
            ? {
                onInputChange: handleInputChange,
                inputValue
            }
            : {
                onInputChange: onKeyUp
            }),
        options,
        unavailableOptions,
        customUnavailableFiltersLabel,
        placeholder,
        styles: { input: handleStylesInputProp },
        hideBackgroundColor,
        isInline,
        ...(shouldMatchStringsStartingWith && {
            filterOption: matchBrandFilterOptions
        })
    };
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'Dropdown',
            variation: variationName
        });
    }, [variationName]);
    return (React.createElement(DropdownWrapper, { className: classnames('dropdown', className, isSearchable ? 'dropdown--async' : 'dropdown--static'), isInline: isInline, isDisabled: isDisabled, configWidth: configWidth, "data-testid": "dropdown-wrapper" },
        assistiveLabel && (React.createElement(DropdownName, { className: "dropdown__assistive-label", hasNoPadding: hasNoPadding, configWidth: configWidth }, assistiveLabel)),
        isAsyncSelect ? (React.createElement(AsyncDropdownSelect, { "data-testid": "async-dropdown-select", ...sharedProps, loadOptions: loadOptions })) : (React.createElement(DropdownSelect, { "data-testid": "dropdown-select", configWidth: configWidth, ...sharedProps }))));
};
Dropdown.propTypes = {
    assistiveLabel: PropTypes.string,
    className: PropTypes.string,
    configWidth: PropTypes.string,
    customUnavailableFiltersLabel: PropTypes.string,
    defaultValue: PropTypes.shape({
        label: PropTypes.string.isRequired,
        value: PropTypes.string
    }),
    DropdownIcon: PropTypes.func,
    dropdownInputName: PropTypes.string,
    hasCount: PropTypes.bool,
    hasEnableGreyout: PropTypes.bool,
    hasMenuControls: PropTypes.bool,
    hasMultipleValues: PropTypes.bool,
    hasNoPadding: PropTypes.bool,
    hideBackgroundColor: PropTypes.bool,
    inputAttributes: PropTypes.object,
    instanceId: PropTypes.string,
    isAsyncSelect: PropTypes.bool,
    isClearable: PropTypes.bool,
    isDisabled: PropTypes.bool,
    isDropdownMenuOpen: PropTypes.bool,
    isInline: PropTypes.bool,
    isLoading: PropTypes.bool,
    isMenuOpen: PropTypes.bool,
    isMultiSelect: PropTypes.bool,
    isSearchable: PropTypes.bool,
    loadOptions: PropTypes.func,
    noOptionsMessage: PropTypes.string,
    onFilterApplyCallback: PropTypes.func,
    onFilterResetCallback: PropTypes.func,
    onInputChange: PropTypes.func,
    onKeyUp: PropTypes.func,
    onMenuCloseCallback: PropTypes.func,
    onMenuOpenCallback: PropTypes.func,
    options: PropTypes.arrayOf(PropTypes.shape({
        label: PropTypes.string.isRequired,
        value: PropTypes.string
    })).isRequired,
    placeholderText: PropTypes.string,
    selectedDropdownNames: PropTypes.array,
    selectedValue: PropTypes.oneOfType([
        PropTypes.shape({
            label: PropTypes.string.isRequired,
            value: PropTypes.string
        }),
        PropTypes.arrayOf(PropTypes.shape({
            label: PropTypes.string.isRequired,
            value: PropTypes.string
        }))
    ]),
    shouldCloseMenuOnSelect: PropTypes.bool,
    shouldControlShowValue: PropTypes.bool,
    shouldEnableVirtusoDropdown: PropTypes.bool,
    shouldHideSelectedOptions: PropTypes.bool,
    shouldMatchStringsStartingWith: PropTypes.bool,
    shouldRenderOptionWithCheckbox: PropTypes.bool,
    shouldShowPlaceholderText: PropTypes.bool,
    unavailableOptions: PropTypes.array,
    value: PropTypes.string,
    variationName: PropTypes.string
};
Dropdown.DropdownIndicator = DropdownIndicator;
module.exports = Dropdown;
//# sourceMappingURL=Dropdown.js.map

/***/ }),

/***/ 66510:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.SearchResultOption = void 0;
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { components } = __webpack_require__(46005);
// as the Dropdown component scales the various Option components for each use case can be set here to lighten complexity
/**
 * SearchResultOption
 *
 * @param {object} props - React props
 * @param {object} [props.data] - Optional data passed in from user search
 * @param {string} [props.data.inputValue] - Optional search input term
 * @param {string} [props.label] - Optional text that is returned from search query
 *
 * @returns {ReactElement} React Select Option
 */
const SearchResultOption = (props) => {
    const { data, label } = props;
    const { inputValue } = data;
    const renderBoldText = (resultStr, searchedValue) => {
        return (React.createElement("span", null, resultStr
            .split(new RegExp(`(${searchedValue})`, 'i'))
            .map((strFragment, idx) => strFragment.toLowerCase() === searchedValue.toLowerCase() ? (React.createElement("b", { key: idx }, strFragment)) : (strFragment))));
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(components.Option, { ...props }, renderBoldText(label, inputValue))));
};
exports.SearchResultOption = SearchResultOption;
exports.SearchResultOption.propTypes = {
    data: PropTypes.shape({
        value: PropTypes.string,
        label: PropTypes.string,
        inputValue: PropTypes.string
    }),
    label: PropTypes.string
};
//# sourceMappingURL=DropdownOptions.js.map

/***/ }),

/***/ 10740:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { useIntl } = __webpack_require__(46984);
const { Virtuoso } = __webpack_require__(35778);
const { MenuListContainer, UnavailableFilters, UnavailableOption, UnavailableLabel } = __webpack_require__(53429);
const { default: translations } = __webpack_require__(5943);
const MenuList = React.memo(({ children, selectProps: { unavailableOptions, customUnavailableFiltersLabel } }) => {
    const { formatMessage } = useIntl();
    const hasNoOptions = !Array.isArray(children);
    if (hasNoOptions) {
        return React.createElement(MenuListContainer, null, children);
    }
    const unavailableChildren = unavailableOptions?.map((option) => (React.createElement(UnavailableOption, null,
        React.createElement(UnavailableLabel, null, option))));
    const unavailableFiltersLabel = customUnavailableFiltersLabel ||
        formatMessage(translations.unavailableFiltersDefaultLabel);
    const unavailableFilterMessage = (React.createElement(UnavailableFilters, null, unavailableFiltersLabel));
    const items = unavailableOptions?.length
        ? [...children, unavailableFilterMessage, ...unavailableChildren]
        : children;
    const itemContent = (index) => React.createElement("div", null, items[index]);
    return (React.createElement(MenuListContainer, null,
        React.createElement(Virtuoso, { data: items, itemContent: itemContent })));
});
MenuList.propTypes = {
    children: PropTypes.node.isRequired,
    selectProps: PropTypes.shape({
        unavailableOptions: PropTypes.array,
        customUnavailableFiltersLabel: PropTypes.array
    })
};
module.exports = MenuList;
//# sourceMappingURL=MenuList.js.map

/***/ }),

/***/ 53429:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { calculateSpacing, getColorStyles, getTypographyStyles, getColorToken } = __webpack_require__(26865);
const { BaseText, BaseWrap } = __webpack_require__(76955);
const MenuListContainer = styled.div.withConfig({
    displayName: 'MenuListContainer'
}) `
  border-right: 1px solid
    ${({ theme }) => getColorToken(theme, 'colors.interactive.base.light')};
  border-left: 1px solid
    ${({ theme }) => getColorToken(theme, 'colors.interactive.base.light')};
  height: ${calculateSpacing(20)};
  overflow: auto;
`;
const UnavailableFilters = styled(BaseText).withConfig({
    displayName: 'UnavailableFilters'
}) `
  align-content: end;
  border-top: solid 1px
    ${({ theme }) => getColorToken(theme, 'colors.interactive.base.light')};
  border-bottom: solid 1px
    ${({ theme }) => getColorToken(theme, 'colors.interactive.base.light')};
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.utility.input-core')};
  padding: 1rem;
`;
const UnavailableOption = styled(BaseWrap).withConfig({
    displayName: 'UnavailableOption'
}) `
  display: grid;
  position: relative;
  grid-row-gap: 0.25rem;
  border-top: none;
  border-bottom: none;
  padding: 0.5rem 1rem;
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.utility.input-core')};
`;
const UnavailableLabel = styled(BaseText).withConfig({
    displayName: 'UnavailableLabel'
}) `
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.deemphasized')};
  align-content: end;
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.utility.input-core')};
`;
module.exports = {
    MenuListContainer,
    UnavailableFilters,
    UnavailableOption,
    UnavailableLabel
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 79499:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(29421);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 58293:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const Select = (__webpack_require__(46005)["default"]);
const AsyncSelect = (__webpack_require__(11541)/* ["default"] */ .A);
const { calculateSpacing, getColorStyles, getTypographyStyles, getInputFieldStyles, getColorToken } = __webpack_require__(26865);
const { INTERACTIVE: { timingButtonDefault }, BREAKPOINTS } = __webpack_require__(96472);
const { BaseText } = __webpack_require__(18730);
const DropdownWrapper = styled.label.withConfig({
    displayName: 'DropdownWrapper'
}) `
  display: block;
  position: relative;
  ${({ configWidth }) => (configWidth ? `width: ${configWidth}%;` : '')}
  ${({ isDisabled }) => isDisabled
    ? `cursor: default;
        pointer-events: none;`
    : ''}

  ${({ isInline }) => isInline
    ? `display: flex;
      justify-content: space-between;
      margin-bottom: 0;
      width: 100%;
      @media (min-width: ${BREAKPOINTS.md}) {
        align-items: center;
        width: max-content;
      }
      .dropdown__assistive-label {
        margin-right: ${calculateSpacing(1)};
        padding-bottom: 0;
      }
      `
    : ''}
`;
const DropdownName = styled(BaseText).withConfig({
    displayName: 'DropdownName'
}) `
  ${({ theme, typeToken }) => getTypographyStyles(theme, typeToken)};
  display: block;
  ${({ hasNoPadding }) => !hasNoPadding && `padding-bottom: ${calculateSpacing(1)};`}
  ${({ theme, colorToken }) => getColorStyles(theme, 'color', colorToken)};
`;
DropdownName.defaultProps = {
    as: 'span',
    colorToken: 'colors.interactive.base.black',
    typeToken: 'typography.definitions.utility.label'
};
const dropdownControlIsFocusedStyle = css `
  .dropdown__value-container {
    ${({ theme }) => getInputFieldStyles(theme, 'active', 'border')}
    ${({ theme }) => getInputFieldStyles(theme, 'active', 'background')}
  }

  .dropdown__placeholder,
  .dropdown__single-value {
    ${({ theme }) => getInputFieldStyles(theme, 'active', 'text')}
  }

  .dropdown__icon {
    svg {
      ${({ theme }) => getInputFieldStyles(theme, 'active', 'icon')}
    }
  }
`;
const dropdownStyles = css `
  min-width: ${calculateSpacing(21)};

  .dropdown--disabled {
    cursor: default;
    pointer-events: none;
  }

  .dropdown__assistive-label {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.utility.label')};
    display: block;
    padding-bottom: ${calculateSpacing(1)};
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.black')};
  }

  .dropdown__control {
    position: relative;
    align-items: initial;
    border: none;
    border-radius: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    text-align: left;
  }

  ${({ hideBackgroundColor }) => hideBackgroundColor
    ? `
    .dropdown__control,
    .dropdown__value-container {
      background-color: unset;
    }`
    : ''}

  .dropdown__control--is-focused {
    ${dropdownControlIsFocusedStyle}
  }

  .dropdown__control--menu-is-open {
    box-shadow: none;
  }

  .dropdown__control--is-disabled {
    .dropdown__value-container {
      ${({ theme }) => getInputFieldStyles(theme, 'disabled', 'border')}
      ${({ hasEnableGreyout, theme }) => hasEnableGreyout
    ? `opacity:0.5`
    : getInputFieldStyles(theme, 'disabled', 'background')}
    }

    .dropdown__placeholder,
    .dropdown__single-value {
      ${({ theme }) => getInputFieldStyles(theme, 'disabled', 'text')}
    }

    .dropdown__icon {
      svg {
        ${({ theme }) => getInputFieldStyles(theme, 'disabled', 'icon')}
      }
    }
  }

  .dropdown__value-container {
    ${({ theme }) => getInputFieldStyles(theme, 'normal', 'border')}
    ${({ theme }) => getInputFieldStyles(theme, 'normal', 'background')}
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.utility.input-core')};
    display: flex;
    align-items: center;
    transition-property: background, border;
    transition-duration: ${timingButtonDefault};
    transition-timing-function: ease-in;
    box-shadow: none;
    padding: ${calculateSpacing(2)} ${calculateSpacing(6)}
      ${calculateSpacing(2)} ${calculateSpacing(1)};
    height: 50px;
    overflow: hidden;

    /* styles the searchable dropdown's input when typing  */
    > .css-0:first-child {
      ${({ theme }) => getInputFieldStyles(theme, 'active', 'text')}
      display: inline-block;
      position: relative;
      top: initial;
      transform: none;
      margin: 0;
      width: 100%;
      max-width: 100%;
    }
  }

  .dropdown__value-container--has-value {
    ${({ theme }) => getInputFieldStyles(theme, 'valid', 'border')}
    ${({ theme }) => getInputFieldStyles(theme, 'valid', 'background')}

    .dropdown__icon {
      svg {
        ${({ theme }) => getInputFieldStyles(theme, 'valid', 'icon')}
      }
    }

    .dropdown__input-container {
      position: absolute;
    }
  }

  /* prevent long searchable input string from running into icon container
    overrides react-select auto-generated width of input field  */
  .dropdown__input {
    input {
      && {
        padding-right: ${calculateSpacing(6)};
      }
    }
  }

  .dropdown__placeholder {
    position: absolute;
  }

  .dropdown__placeholder,
  .dropdown__single-value {
    ${({ theme }) => getInputFieldStyles(theme, 'normal', 'text')}
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.utility.input-core')};
    display: inline-block;
    top: initial;
    transform: none;
    transition: color ${timingButtonDefault} ease-in;
    margin: 0;
    max-width: initial;

    .dropdown__value-container--has-value & {
      ${({ theme }) => getInputFieldStyles(theme, 'valid', 'text')}
    }
  }

  .dropdown__indicators {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
  }

  .dropdown__indicator-separator {
    width: 0;
  }

  .dropdown__icon {
    top: 50%;
    margin-right: ${calculateSpacing(2)};

    svg {
      ${({ theme }) => getInputFieldStyles(theme, 'normal', 'icon')}
      width: 10px;
      height: 10px;
      stroke: black;
      stroke-width: 3px;
    }
  }

  .dropdown__menu {
    animation: dropdown-menu-fade-in ${timingButtonDefault} ease;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
  }

  @keyframes dropdown-menu-fade-in {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .dropdown__menu-list {
    ${({ theme }) => getInputFieldStyles(theme, 'normal', 'border')}
    border-top: none;
    border-right: none;
    border-left: none;
    padding: 0;
    max-height: ${calculateSpacing(20)};
  }

  .dropdown__menu-notice,
  .dropdown__option {
    ${({ theme }) => getInputFieldStyles(theme, 'normal', 'border')}
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.utility.input-core')};
    position: relative;
    border-top: none;
    background-color: transparent;
    padding: ${calculateSpacing(1)} ${calculateSpacing(2)};
    min-height: ${calculateSpacing(5)};
    text-align: left;
    text-decoration: none;
    line-height: unset;
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.black')};
    transition-duration: ${timingButtonDefault};
    transition-property: color, background;
    transition-timing-function: ease-in;

    &::before {
      ${({ theme }) => getInputFieldStyles(theme, 'normal', 'background')}
    }

    /* remove last list option border to avoid double border with bottom of menu list  */
    &:last-of-type {
      border-bottom: 0;
    }

    &:active,
    &:focus,
    &:hover {
      /* override color provided by react-select */
      background-color: transparent;
    }

    &:not(.dropdown__option--is-selected):not(
        .dropdown__menu-notice--no-options
      ) {
      &:active::after,
      &:focus::after,
      &:hover::after {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.4;
        z-index: -1;
        ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.interactive.base.light')};
        width: 100%;
        height: 100%;
        content: '';
      }
    }
  }

  .css-d7l1ni-option {
    /* stylelint-disable declaration-no-important */
    background-color: ${getColorToken('colors.interactive.base.hover')} !important;
    /* stylelint-enable declaration-no-important */
  }

  :not(.dropdown__option--is-selected) {
    &.dropdown__option--is-focused::after {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0.4;
      z-index: -1;
      ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.interactive.base.light')};
      width: 100%;
      height: 100%;
      content: '';
    }
  }

  .dropdown__option--is-selected::after {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: -1;
    ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.interactive.base.light')};
    width: 100%;
    height: 100%;
    content: '';
  }
`;
const DropdownSelect = styled(Select).withConfig({
    displayName: 'DropdownSelect'
}) `
  ${dropdownStyles}

  ${({ configWidth }) => (configWidth ? `width: 100%;` : '')}
`;
const AsyncDropdownSelect = styled(AsyncSelect).withConfig({
    displayName: 'AsyncDropdownSelect'
}) `
  ${dropdownStyles}
  .dropdown__value-container {
    font-weight: bold;
  }
`;
module.exports = {
    AsyncDropdownSelect,
    DropdownWrapper,
    DropdownName,
    DropdownSelect
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 5943:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
const react_intl_1 = __webpack_require__(46984);
exports["default"] = (0, react_intl_1.defineMessages)({
    applyButtonLabel: {
        id: 'CustomMenuButtons.Apply',
        defaultMessage: 'APPLY',
        description: 'Label for apply button on custom menu buttons for dropdown'
    },
    clearAllButtonLabel: {
        id: 'CustomMenuButtons.ClearAll',
        defaultMessage: 'Clear all',
        description: 'Label for clear all button on custom menu buttons for dropdown'
    },
    unavailableFiltersDefaultLabel: {
        id: 'MenuList.unavailableFilters',
        defaultMessage: 'Unavailable filters',
        description: 'Label for unavailable filters'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 29421:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const Dropdown = __webpack_require__(11446);
Dropdown.MultipleSelect = asVariation(Dropdown, 'Multiple Select', {}, {
    isMultiSelect: true,
    isSearchable: false
});
Dropdown.MultipleSelectSearchableWithMenuControls = asVariation(Dropdown, 'Multiple Select Searchable with Menu Controls', {}, {
    isMultiSelect: true,
    isSearchable: true,
    hasCount: true,
    hasMenuControls: true,
    shouldEnableVirtusoDropdown: true,
    shouldMatchStringsStartingWith: true
});
Dropdown.MultipleSelectWithMenuControls = asVariation(Dropdown, 'Multiple Select Searchable with Menu Controls', {}, {
    isMultiSelect: true,
    isSearchable: false,
    hasCount: true,
    hasMenuControls: true,
    shouldEnableVirtusoDropdown: true
});
Dropdown.Searchable = asVariation(Dropdown, 'Searchable', {}, {
    isSearchable: true
});
Dropdown.Static = asVariation(Dropdown, 'Static', {}, {
    isSearchable: false
});
module.exports = Dropdown;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 38:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { TrackComponentChannel } = __webpack_require__(78788);
const { EventWrapper, EventDetails, EventTitle, EventTitleLink, EventDates, EventLocation, EventLocationAddress, EventLocationName, EventLocationCity, EventLocationRegion, EventLocationCountry, EventBodyParagraph } = __webpack_require__(20162);
/**
 * Event component
 *
 * @param {object} props - React props
 * @param {string} [props.body] - Optional event description
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} props.dangerousHed - Event title
 * @param {string} [props.eventEndDate] - Optional End date for Event
 * @param {string} [props.eventStartDate] - Optional Start date for Event
 * @param {string} [props.showVenue] - Optional Boolean to display Venue Data based on EventsList variation
 * @param {string} [props.url] - Optional url for internal Event pages
 * @param {string} [props.venue] - Optional venue object that contains Event venue name and address
 *
 *
 * @returns {ReactElement} <div>
 */
const Event = ({ body, className, dangerousHed, eventEndDate, eventStartDate, showVenue = false, url, venue }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'Event'
        });
    }, []);
    return (React.createElement(EventWrapper, { className: classnames('event', className), "data-testid": "event-wrapper" },
        React.createElement(EventDetails, { className: "event-details" },
            url ? (React.createElement(EventTitle, { className: "event-title" },
                React.createElement(EventTitleLink, { dangerouslySetInnerHTML: { __html: dangerousHed }, href: url, rel: "noopener noreferrer" }))) : (React.createElement(EventTitle, { dangerouslySetInnerHTML: { __html: dangerousHed } })),
            eventStartDate && (React.createElement(EventDates, { "test-id": "event-date" },
                eventStartDate,
                eventEndDate && ` - ${eventEndDate}`)),
            showVenue && venue && (React.createElement(EventLocation, null,
                venue.name && React.createElement(EventLocationName, null, venue.name),
                venue.address && (React.createElement(EventLocationAddress, null,
                    venue.address.city && (React.createElement(EventLocationCity, null, venue.address.city)),
                    venue.address.region && (React.createElement(EventLocationRegion, null,
                        ", ",
                        venue.address.region)),
                    venue.address.country && (React.createElement(EventLocationCountry, null,
                        ' ',
                        venue.address.country))))))),
        body && (React.createElement(EventBodyParagraph, { dangerouslySetInnerHTML: { __html: body } }))));
};
Event.propTypes = {
    body: PropTypes.string,
    className: PropTypes.string,
    dangerousHed: PropTypes.string.isRequired,
    eventEndDate: PropTypes.string,
    eventStartDate: PropTypes.string,
    showVenue: PropTypes.bool,
    url: PropTypes.string,
    venue: PropTypes.object
};
module.exports = Event;
//# sourceMappingURL=Event.js.map

/***/ }),

/***/ 12398:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(38);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 20162:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { getColorStyles, calculateSpacing } = __webpack_require__(26865);
const { BaseText, BaseLink } = __webpack_require__(76955);
const { BREAKPOINTS } = __webpack_require__(96472);
const secondaryTokens = {
    as: 'span',
    colorToken: 'colors.discovery.body.white.context-tertiary',
    typeIdentity: 'typography.definitions.discovery.hed-bulletin-secondary'
};
const EventWrapper = styled.div.withConfig({
    displayName: 'EventWrapper'
}) `
  border-width: 1px 0 0;
  border-style: solid;
  ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.discovery.body.light.divider')};
  padding: ${calculateSpacing(2)} 0 ${calculateSpacing(3)} 0;

  @media (min-width: ${BREAKPOINTS.md}) {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
  }
`;
const EventDetails = styled.div.withConfig({
    displayName: 'EventDetails'
}) `
  @media (min-width: ${BREAKPOINTS.md}) {
    grid-column: 1 / span 4;
  }
`;
const EventTitle = styled(BaseText).withConfig({ displayName: 'EventTitle' }) `
  margin: 0;

  a:visited,
  a:active,
  a:link {
    color: inherit;
  }
`;
EventTitle.defaultProps = {
    as: 'h2',
    colorToken: 'colors.interactive.base.brand-primary',
    typeIdentity: 'typography.definitions.discovery.hed-bulletin-primary'
};
const EventTitleLink = styled(BaseLink).withConfig({
    displayName: 'EventTitleLink'
}) `
  margin: 0;
`;
EventTitleLink.defaultProps = {
    colorToken: 'colors.interactive.base.brand-primary',
    hasUnderline: false,
    typeIdentity: 'typography.definitions.discovery.hed-bulletin-primary'
};
const EventDates = styled(BaseText).withConfig({ displayName: 'EventDates' }) `
  margin: 0;
`;
EventDates.defaultProps = {
    colorToken: 'colors.discovery.body.white.context-tertiary',
    typeIdentity: 'typography.definitions.discovery.hed-bulletin-secondary'
};
const EventLocationAddress = styled(BaseText).withConfig({
    displayName: 'EventLocationAddress'
}) ``;
EventLocationAddress.defaultProps = {
    as: 'div',
    typeIdentity: 'typography.definitions.discovery.hed-bulletin-secondary'
};
const EventLocationName = styled(BaseText).withConfig({
    displayName: 'EventLocationName'
}) ``;
EventLocationName.defaultProps = { ...secondaryTokens, as: 'p' };
const EventLocationCity = styled(BaseText).withConfig({
    displayName: 'EventLocationCity'
}) ``;
EventLocationCity.defaultProps = secondaryTokens;
const EventLocationRegion = styled(BaseText).withConfig({
    displayName: 'EventLocationRegion'
}) ``;
EventLocationRegion.defaultProps = secondaryTokens;
const EventLocationCountry = styled(BaseText).withConfig({
    displayName: 'EventLocationCountry'
}) ``;
EventLocationCountry.defaultProps = secondaryTokens;
const EventLocation = styled.div.withConfig({
    displayName: 'EventLocation'
}) `
  margin: 0 0 ${calculateSpacing(2)};

  ${EventLocationName} {
    margin: 0;
  }
`;
const EventBodyParagraph = styled(BaseText).withConfig({
    displayName: 'EventBodyParagraph'
}) `
  margin: 0 0 ${calculateSpacing(2)} 0;

  @media (min-width: ${BREAKPOINTS.md}) {
    grid-column: 5 / span 4;
    margin: 0;
  }
`;
EventBodyParagraph.defaultProps = { ...secondaryTokens, as: 'p' };
module.exports = {
    EventWrapper,
    EventDetails,
    EventTitle,
    EventTitleLink,
    EventDates,
    EventLocation,
    EventLocationAddress,
    EventLocationName,
    EventLocationCity,
    EventLocationRegion,
    EventLocationCountry,
    EventBodyParagraph
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 53815:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const get = __webpack_require__(58156);
const { mergeRefs } = __webpack_require__(54370);
const useLazyLoadComponent = __webpack_require__(70920);
const { useContentLang } = __webpack_require__(76573);
const { ConsentContext } = __webpack_require__(85438);
const ConsentBanner = __webpack_require__(83561);
const translations = (__webpack_require__(73840)/* ["default"] */ .A);
const { FacebookEmbedContainer, FacebookPost } = __webpack_require__(13670);
const { TrackComponentChannel } = __webpack_require__(78788);
const { useContext, useEffect, useState, useRef } = React;
/**
 * Inject facebook embed script into browser
 *
 * @param {string} lang - lang for facebook content.
 * @returns {undefined} - undefined
 */
const injectScript = (lang = 'en-US') => {
    if (!document.getElementById('facebook-embed')) {
        const script = document.createElement('script');
        script.id = 'facebook-embed';
        script.className = 'facebook-embed';
        // zh-Hant-TW will fallback to zh_tw
        const fbLang = lang === 'zh-Hant-TW' ? 'zh_TW' : lang.replace('-', '_'); // fb uses underscore, not dash
        script.src = `https://connect.facebook.net/${fbLang}/sdk.js#xfbml=1&version=v20.0`;
        document.body.appendChild(script);
    }
    else {
        window?.FB?.XFBML?.parse();
    }
};
/**
 * FacebookEmbed
 *
 * @param {object} props - React props
 * @param {object} [props.attributes] - Optional attributes to add top level i.e. aria-*, role, etc.
 * @param {string} [props.className] - Optional top-level class to add
 * @param {boolean} [props.hideText] - Determines whether post text should be displayed or not
 * @param {string} props.url - Required url for facebook content.

 */
const FacebookEmbed = ({ attributes, className, url, hideText }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'FacebookEmbed'
        });
    }, []);
    const { formatMessage } = useIntl();
    const [containerWidth, setContainerWidth] = useState(null);
    const consentContext = useContext(ConsentContext);
    const [lazyLoadElementRef, shouldLoadComponent] = useLazyLoadComponent();
    const ref = useRef();
    const lang = useContentLang();
    const shouldDisplayComponent = consentContext.targeting && shouldLoadComponent;
    useEffect(() => {
        setContainerWidth(get(ref, 'current.offsetWidth', 500));
        if (shouldDisplayComponent) {
            injectScript(lang);
        }
    }, [lang, shouldDisplayComponent, ref]);
    return (React.createElement(FacebookEmbedContainer, { ...attributes, className: className, "data-type": "facebook", "aria-label": formatMessage(translations.facebookEmbedAriaLabelText), ref: mergeRefs(ref, lazyLoadElementRef) }, shouldDisplayComponent ? (React.createElement(FacebookPost, { className: "fb-post", "data-href": url, "data-show-text": hideText ? 'false' : 'true', "data-width": containerWidth })) : (React.createElement(ConsentBanner, { hasConsent: consentContext.targeting, url: url, consentBannerHeader: translations.consentBannerHeader }))));
};
FacebookEmbed.propTypes = {
    attributes: PropTypes.object,
    className: PropTypes.string,
    hideText: PropTypes.bool,
    url: PropTypes.string.isRequired
};
FacebookEmbed.displayName = 'FacebookEmbed';
module.exports = FacebookEmbed;
//# sourceMappingURL=FacebookEmbed.js.map

/***/ }),

/***/ 90346:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(53815);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 13670:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing } = __webpack_require__(26865);
const FacebookEmbedContainer = styled.div.withConfig({
    displayName: 'FacebookEmbedContainer'
}) `
  align-self: center;
  margin: ${calculateSpacing(5)} auto;
  text-align: center;
  justify-self: center;
`;
const FacebookPost = styled.div.withConfig({
    displayName: 'FacebookPost'
}) `
  align-self: center;
  justify-self: center;
  margin: 0 auto;
`;
module.exports = {
    FacebookEmbedContainer,
    FacebookPost
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 73840:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    facebookEmbedAriaLabelText: {
        id: 'FacebookEmbed.AriaLabelText',
        defaultMessage: 'social media post',
        description: 'ARIA label for the facebook embed container on Facebook Embed'
    },
    consentBannerHeader: {
        id: 'FacebookEmbed.ConsentBannerHeader',
        defaultMessage: 'Facebook content',
        description: 'Header for message banner'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 66609:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useContext, useEffect } = React;
const { ConsentContext } = __webpack_require__(85438);
const useLazyLoadComponent = __webpack_require__(70920);
const ConsentBanner = __webpack_require__(83561);
const { FireworkEmbedContainer, FireworkEmbedBlockquote, FireworkHed } = __webpack_require__(1633);
const translations = (__webpack_require__(68523)/* ["default"] */ .A);
/**
 * Inject firework embed script into browser
 *
 * @returns {undefined} - undefined
 */
const injectScript = () => {
    if (!document.getElementById('firework-embed')) {
        const script = document.createElement('script');
        script.id = 'firework-embed';
        script.src = 'https://asset.fwcdn3.com/js/embed-feed.js';
        script.async = true;
        document.body.appendChild(script);
    }
    // fix for Firefox bug.
    // without this script, fireworks embed will broke the page layout
    document.querySelectorAll('.grid-layout__content').forEach((col) => {
        if (col.style.width === '')
            col.style.width = 'inherit';
    });
};
/**
 * Inject firework tracking script into browser
 *
 * @returns {undefined} - undefined
 */
const injectTrackingScript = () => {
    if (!document.getElementById('firework-tracking')) {
        const script = document.createElement('script');
        script.id = 'firework-tracking';
        document.body.appendChild(script);
        const events = [
            'fw:video:impression',
            'fw:video:start',
            'fw:video:first-quartile',
            'fw:video:midpoint',
            'fw:video:third-quartile',
            'fw:video:complete',
            'fw:video:session',
            'fw:video:click-cta',
            'fw:video:click-share',
            'fw:video:share',
            'fw:player:quit',
            'fw:shopping:hydrate-products',
            'fw:shopping:cart-updated',
            'fw:shopping:request-checkout',
            'fw:shopping:product-clicked',
            'fw:embed-feed:impression',
            'fw:embed-feed:thumbnail-load',
            'fw:embed-feed:thumbnail-click',
            'fw:livestream:join',
            'fw:livestream:quit',
            'fw:livestream:send-chat',
            'fw:livestream:send-heart',
            'fw:player:transition'
        ];
        (function () {
            events.forEach((e) => {
                document.addEventListener(e, (event) => {
                    window.dataLayer.push({
                        event: e,
                        detail: event.detail || {}
                    });
                }, false);
            });
        })();
    }
};
/**
 * FireworkEmbed component
 *
 * @param {string} [channel] - Required channel for firework.
 * @param {string} [caption] - Optional caption used by title
 * @param {string} [className] - Optional top-level class to add
 * @param {boolean} [props.hasDividerAbove] - Optional, to show or hide the top divider
 * @param {boolean} [props.hasDividerBelow] - Optional, to show or hide the bottom divider
 * @param {string} url - Required url reference for firework.
 * @returns {ReactElement} <blockquote>
 */
const FireworkEmbed = ({ channel, caption, className, url, hasDividerAbove = true, hasDividerBelow = true }) => {
    const consentContext = useContext(ConsentContext);
    const [lazyLoadElementRef, shouldLoadComponent] = useLazyLoadComponent();
    const [legacyChannel, legacyPlaylistId] = url.indexOf('|') !== -1 ? url.split('|') : [null, null];
    const fwChannel = channel ?? legacyChannel ?? 'voguemagazine';
    const playlistId = legacyPlaylistId ?? url;
    const iframeUrl = `https://fw.tv/iframe/embed-feed?channel=${fwChannel}&playlist=${playlistId}`;
    const shouldDisplayComponent = consentContext.targeting && shouldLoadComponent;
    useEffect(() => {
        if (shouldDisplayComponent) {
            injectTrackingScript();
            injectScript();
        }
    }, [shouldDisplayComponent]);
    const stripHTML = (string) => string.replace(/<[^>]*>/g, '').trim();
    const dangerousHed = stripHTML(caption);
    return playlistId ? (React.createElement(FireworkEmbedContainer, { className: className, ref: lazyLoadElementRef },
        dangerousHed && (React.createElement(FireworkHed, { dangerousHed: dangerousHed, hasDividerAbove: hasDividerAbove, hasDividerBelow: hasDividerBelow, textAlign: "center", hedTag: "div", "data-testid": "section-title" })),
        shouldDisplayComponent ? (React.createElement(FireworkEmbedBlockquote, null,
            React.createElement("fw-embed-feed", { channel: fwChannel, playlist: playlistId, mode: "row", open_in: "_modal", max_videos: "0", placement: "middle", player_placement: "bottom-right", pip: "false", player_minimize: "false", branding: "false" }))) : (React.createElement(ConsentBanner, { hasConsent: consentContext.targeting, url: iframeUrl, consentBannerHeader: translations.consentBannerHeader })))) : null;
};
FireworkEmbed.propTypes = {
    caption: PropTypes.string,
    channel: PropTypes.string,
    className: PropTypes.string,
    hasDividerAbove: PropTypes.bool,
    hasDividerBelow: PropTypes.bool,
    url: PropTypes.string.isRequired
};
FireworkEmbed.displayName = 'FireworkEmbed';
module.exports = FireworkEmbed;
//# sourceMappingURL=FireworkEmbed.js.map

/***/ }),

/***/ 34943:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const { asThemedComponent } = __webpack_require__(20223);
const FireworkEmbed = __webpack_require__(66609);
module.exports = asThemedComponent(asConfiguredComponent(FireworkEmbed, 'FireworkEmbed'));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 1633:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing, getTypographyStyles, getColorStyles } = __webpack_require__(26865);
const SectionTitle = __webpack_require__(35864);
const FireworkEmbedContainer = styled.div.withConfig({
    displayName: 'FireworkEmbedContainer'
}) `
  margin: ${calculateSpacing(5)} auto;

  fw-embed-feed {
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.white')};

    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-secondary')}
  }
`;
const FireworkEmbedBlockquote = styled.blockquote.withConfig({
    displayName: 'FireworkEmbedBlockquote'
}) `
  margin-right: auto;
  margin-left: auto;
`;
const FireworkHed = styled(SectionTitle.TextCenter).withConfig({
    displayName: 'FireworkHed'
}) ``;
module.exports = {
    FireworkEmbedContainer,
    FireworkEmbedBlockquote,
    FireworkHed
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 68523:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    consentBannerHeader: {
        id: 'FireworkEmbed.ConsentBannerHeader',
        defaultMessage: 'Firework content',
        description: 'Header for message banner'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 65899:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { FootNoteEmbedWrapper } = __webpack_require__(10574);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * FootnoteEmbed component
 *
 * @param {object} props - React props
 * @param {string|ReactElement} props.children - The quote content to display.
 * @param {string} [props.className] - Optional top-level class to add.
 *
 * @returns {ReactElement} <aside>
 */
const FootnoteEmbed = ({ children }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'FootnoteEmbed'
        });
    }, []);
    return React.createElement(FootNoteEmbedWrapper, null, children);
};
FootnoteEmbed.propTypes = {
    children: PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.node),
        PropTypes.node
    ]).isRequired
};
module.exports = FootnoteEmbed;
//# sourceMappingURL=FootnoteEmbed.js.map

/***/ }),

/***/ 37202:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(65899);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 10574:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { calculateSpacing, getColorStyles } = __webpack_require__(26865);
const FootNoteEmbedWrapper = styled.div.withConfig({
    displayName: 'FootNoteEmbedWrapper'
}) `
  ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.consumption.lead.special.context-signature')};

  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.lead.special.context-signature')};

  margin: ${calculateSpacing(2)} 0;
  border-width: 1px;
  border-style: solid;
  padding: ${calculateSpacing(1)} ${calculateSpacing(2)} ${calculateSpacing(2)};
  width: 100%;
`;
module.exports = {
    FootNoteEmbedWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 78247:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const RelatedList = __webpack_require__(77666);
const { TrackComponentChannel } = __webpack_require__(78788);
const { enhanceChildrenForUpc } = __webpack_require__(54495);
const { getContentTypes, getNameStates, isAlignedSidebar, isArticleGroup, isRelatedList } = __webpack_require__(38147);
const { GenericCalloutWrapper } = __webpack_require__(64094);
const RelatedLinksContainer = __webpack_require__(74357);
/**
 * A generic callout component used simply for wrapping in a div.
 *
 * @param {object} props - React props
 * @param {ReactElement} props.children - The children of this element
 * @param {string} [props.className] - Optional top-level class to add.
 * @param {boolean} [props.isEmbedSizeEnabled] - Option switch to turn on size based product embed changes
 * @param {string} props.name - The callout name
 * @param {boolean} [props.hasTopBorder] - Option switch to turn on top border
 * @param {boolean} [props.hideSideBySide] - Option to hideSideBySide
 * @param {boolean} [props.isInsetItemOnMobile] - Option to inset item on mobile
 * @param {string} [props.smallWidth] - The name of feature-small rendering
 * @param {string} [props.mediumWidth] - The name of feature-medium rendering
 * @param {number} [props.topBorderPixelWidth] - Optional switch to make top border a certain thickness
 * @returns {ReactElement} - The element, wrapped in a div
 */
const GenericCallout = (props) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'GenericCallout'
        });
    }, []);
    const { className, children, childTypes, isEmbedSizeEnabled, name, hideSideBySide, smallWidth, mediumWidth, hasTopBorder = true, isInsetItemOnMobile = false, topBorderPixelWidth = 0 } = props;
    const nameStates = getNameStates(name);
    if (isArticleGroup(childTypes)) {
        return (React.createElement(GenericCalloutWrapper, { ...nameStates, className: classnames('callout', className), isRelatedList: true },
            React.createElement(RelatedList, { ...props })));
    }
    let borderTopWidth = 0;
    if (hasTopBorder &&
        topBorderPixelWidth > 0 &&
        !isAlignedSidebar(name, childTypes)) {
        borderTopWidth = topBorderPixelWidth;
    }
    // Clone children and pass hideLandscapeLayout prop only when UPC is enabled
    const { enhancedChildren } = enhanceChildrenForUpc(children);
    // assign the value of the name to the embedSize if usage of different
    // embed size is enabled for the brand
    let childrenWithEmbedSizeProp = enhancedChildren;
    if ((name.startsWith('feature-') && isEmbedSizeEnabled) || hideSideBySide) {
        const embedProps = {};
        if (name.startsWith('feature-') && isEmbedSizeEnabled) {
            embedProps.embedSize = name;
        }
        if (hideSideBySide) {
            embedProps.showSideBySide = false;
            embedProps.showHr = false;
        }
        childrenWithEmbedSizeProp = React.Children.map(enhancedChildren, (child) => {
            return React.cloneElement(child, embedProps);
        });
    }
    const isSmallWide = Boolean(smallWidth === 'wide' && nameStates.isFeatureSmall);
    const isMediumNarrow = Boolean(mediumWidth === 'narrow' && nameStates.isFeatureMedium);
    const useEmbedSize = Boolean(isEmbedSizeEnabled && name);
    const containsRelatedList = Array.isArray(enhancedChildren) && isRelatedList(enhancedChildren);
    const contentTypesStates = getContentTypes(enhancedChildren, childTypes);
    // These are classes that need to be deprecated at integration if possible
    const additionalClasses = [];
    // ArticlePage
    if (hasTopBorder)
        additionalClasses.push('callout--has-top-border');
    return (React.createElement(GenericCalloutWrapper, { ...nameStates, ...contentTypesStates, borderTopWidth: borderTopWidth, hasTopBorder: hasTopBorder, hasEmbedSizes: useEmbedSize, isSmallWide: isSmallWide, isMediumNarrow: isMediumNarrow, className: classnames(additionalClasses, className), "data-testid": "GenericCallout", isInsetItemOnMobile: isInsetItemOnMobile },
        containsRelatedList && (React.createElement(RelatedLinksContainer, null, enhancedChildren)),
        !containsRelatedList && childrenWithEmbedSizeProp));
};
GenericCallout.propTypes = {
    children: PropTypes.node.isRequired,
    childTypes: PropTypes.array,
    className: PropTypes.string,
    hasTopBorder: PropTypes.bool,
    hideSideBySide: PropTypes.bool,
    isEmbedSizeEnabled: PropTypes.bool,
    isInsetItemOnMobile: PropTypes.bool,
    mediumWidth: PropTypes.oneOf(['narrow']),
    name: PropTypes.oneOf([
        'feature-small',
        'feature-medium',
        'feature-xsmall',
        'portrait-justified',
        'intro',
        'inset-left',
        'inset-right'
    ]).isRequired,
    smallWidth: PropTypes.oneOf(['wide']),
    topBorderPixelWidth: PropTypes.number
};
GenericCallout.displayName = 'GenericCallout';
module.exports = GenericCallout;
//# sourceMappingURL=GenericCallout.js.map

/***/ }),

/***/ 74357:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const get = __webpack_require__(58156);
const { googleAnalytics } = __webpack_require__(90090);
const { useViewportObserver } = __webpack_require__(55030);
const { RelatedLinksContainerWrapper } = __webpack_require__(64094);
const TARGET_OBSERVER_SELECTOR = '.related-links-list';
const RelatedLinksContainer = ({ children }) => {
    const trackingStoryClickEvent = (url) => () => {
        const urlExists = !!url;
        const analyticsOptions = urlExists ? { 'gtm.elementUrl': url } : {};
        googleAnalytics.emitGoogleTrackingEvent('recirc-related_inline-click', analyticsOptions);
    };
    const trackingImpressionEvent = () => {
        googleAnalytics.emitUniqueGoogleTrackingEvent('recirc-related_inline-impression');
    };
    useViewportObserver(TARGET_OBSERVER_SELECTOR, undefined, (isInViewport) => {
        if (isInViewport) {
            trackingImpressionEvent();
        }
    });
    return (React.createElement(RelatedLinksContainerWrapper, { "data-testid": "related-links-list", className: "related-links-list" }, React.Children.map(children, (child) => {
        const url = get(child, 'props.children.props.href', '');
        return React.cloneElement(child, {
            onClick: trackingStoryClickEvent(url)
        });
    })));
};
RelatedLinksContainer.propTypes = {
    children: PropTypes.oneOfType([
        PropTypes.node,
        PropTypes.arrayOf(PropTypes.node)
    ])
};
RelatedLinksContainer.displayName = 'RelatedLinksContainer';
module.exports = RelatedLinksContainer;
//# sourceMappingURL=RelatedLinksContainer.js.map

/***/ }),

/***/ 37954:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const GenericCallout = __webpack_require__(78247);
module.exports = asConfiguredComponent(GenericCallout, 'GenericCallout');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 64094:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { css } = __webpack_require__(92168);
const { BREAKPOINTS } = __webpack_require__(96472);
const { calculateSpacing, getColorStyles, getTypographyStyles, minScreen, minMaxScreen } = __webpack_require__(26865);
const { ExternalLinkEmbedWrapper } = __webpack_require__(64010);
const { PullQuoteEmbedWrapper } = __webpack_require__(9865);
const { CaptionWrapper } = __webpack_require__(38860);
const { BodyWrapper } = __webpack_require__(29912);
const { AssetEmbedWrapper } = __webpack_require__(41108);
const { MixedMediaCarouselButtonWrapper } = __webpack_require__(31243);
const RelatedLinksContainerWrapper = styled.div.withConfig({
    displayName: 'RelatedLinksContainerWrapper'
}) ``;
const featureXSmallCSS = css `
  width: 100%;

  ${CaptionWrapper} {
    margin: ${calculateSpacing(1)} 0;
  }

  ${minScreen(BREAKPOINTS.md)} {
    margin-right: auto;
    margin-left: auto;
    width: 80%;
  }
`;
const featureSmallCSS = css `
  width: 100%;

  ${CaptionWrapper} {
    margin: ${calculateSpacing(1)} 0;
  }

  .asset-embed__asset-container {
    margin-right: auto;
    margin-left: auto;
    ${({ isSmallWide }) => isSmallWide
    ? 'width: 100%;'
    : `width: calc(50% + ${calculateSpacing(3)} * 1.5);`}
  }

  ${minScreen(BREAKPOINTS.lg)} {
    margin-right: auto;
    margin-left: auto;
    ${({ isSmallWide }) => (!isSmallWide ? 'width: 66.66%;' : '')}

    .asset-embed__asset-container {
      width: 100%;
    }
  }
`;
const featureMediumCSS = css `
  width: 100%;

  &&& {
    margin: 0 auto ${calculateSpacing(5)} auto;
  }

  ${CaptionWrapper} {
    margin: ${calculateSpacing(1)} ${calculateSpacing(3)};
  }

  ${MixedMediaCarouselButtonWrapper} {
    margin-right: ${calculateSpacing(3)};
  }

  ${minScreen(BREAKPOINTS.md)} {
    ${CaptionWrapper} {
      margin: ${calculateSpacing(1)};
    }
  }

  ${minScreen(BREAKPOINTS.lg)} {
    margin-right: auto;
    margin-left: auto;
    width: 83.33%;

    ${MixedMediaCarouselButtonWrapper} {
      margin-right: 0;
    }
  }

  ${({ isMediumNarrow }) => {
    if (isMediumNarrow) {
        return `
        ${minScreen(BREAKPOINTS.md)} {
          margin-right: auto;
          margin-left: auto;
          width: 75%;
        }
      `;
    }
    return '';
}}
`;
const portraitJustifiedCSS = css `
  float: none;
  margin: ${calculateSpacing(2)} ${calculateSpacing(5)} ${calculateSpacing(2)} 0;
  width: 100%;

  ${BodyWrapper} & {
    ${AssetEmbedWrapper} {
      margin: 0 auto;
    }
  }

  ${minScreen(BREAKPOINTS.md)} {
    float: left;
    margin: ${calculateSpacing(1)} ${calculateSpacing(2)} ${calculateSpacing(1)}
      0;
    width: 37.5%;
  }

  ${minMaxScreen(BREAKPOINTS.lg, BREAKPOINTS.xl)} {
    min-width: 220px;
  }
`;
const introCSS = css `
  ${getTypographyStyles('typography.definitions.consumptionEditorial.description-feature')}
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body')};
`;
const insetItemSpacing = ({ isInsetItemOnMobile }) => {
    let topMargin = 2;
    let rightMargin = 5;
    let bottomMargin = 2;
    let insetWidth = '100%';
    if (isInsetItemOnMobile) {
        topMargin = 1;
        rightMargin = 4;
        bottomMargin = 1;
        insetWidth = '37.5%';
    }
    return `
    margin: ${calculateSpacing(topMargin)} ${calculateSpacing(rightMargin)} ${calculateSpacing(bottomMargin)} 0;
    width: ${insetWidth};
  `;
};
const insetItemCSS = css `
  ${getTypographyStyles('typography.definitions.consumptionEditorial.citation')}
  ${insetItemSpacing}
  border-width: 0 0 1px;
  border-style: solid;
  padding: ${calculateSpacing(2)} 0;

  ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.consumption.body.standard.divider')};

  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body')};

  ${BodyWrapper} & {
    ${AssetEmbedWrapper} {
      margin: 0 auto;
    }

    h4 {
      line-height: 1.2;
    }

    h4,
    h5 {
      margin-top: ${calculateSpacing(2)};
      margin-bottom: ${calculateSpacing(2)};

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  > *:first-child {
    margin-top: 0;
    margin-bottom: 0;
  }

  > *:nth-child(2):not(.content-card-embed.callout--group-item) {
    margin: ${calculateSpacing(2)} 0;
  }

  > *:last-child {
    margin-bottom: 0;
  }

  .blockquote-embed {
    margin: 0;
    border: none;
    padding: 0;
    width: 100%;

    + p {
      ${getTypographyStyles('typography.definitions.globalEditorial.accreditation-core')}
      ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body')};
      margin: ${calculateSpacing(2)} 0 0;

      &::before {
        margin-right: ${calculateSpacing(1)};
        content: '—';
      }
    }

    .blockquote-embed__content {
      ${getTypographyStyles('typography.definitions.consumptionEditorial.display-small')}
      ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body')};
      margin: 0;

      p {
        margin: 0;
      }
    }

    /* there are cases when insets have blockquote-embed as the first child without any inset title
       the blockquote-embed sets padding-top for it's content which is redundant in this case  */
    &:first-child .blockquote-embed__content {
      padding-top: 0;
    }
  }

  .external-link-embed.external-link-embed--inline,
  .external-link-embed.external-link-embed--large {
    margin: 0;
    border-top: none;
    width: 100%;

    &:first-child {
      padding-top: 0;
    }

    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
  }

  .external-link-embed.external-link-embed--large {
    .external-link-embed__image-link,
    .external-link-embed__text {
      grid-column: 1 / -1;
    }
  }

  ${({ hasTopBorder }) => hasTopBorder
    ? css `
          border-top-width: 2px;
          border-style: solid;
          ${({ theme }) => getColorStyles(theme, 'border-top-color', 'colors.consumption.body.standard.display-texture')};
          ${RelatedLinksContainerWrapper} h2:first-child,
          div[class*='heading-'] {
            margin-top: 0;
          }
        `
    : ''}

  ${({ hasExternalLinkEmbed, hasTopBorder }) => hasTopBorder && hasExternalLinkEmbed
    ? css `
          ${({ theme }) => getColorStyles(theme, 'border-top-color', 'colors.consumption.body.standard.divider')};
        `
    : ''}

  ${({ hasSidebarEmbed, hasTopBorder }) => hasTopBorder && hasSidebarEmbed ? 'border-top: none;' : ''}

  ${({ hasAssetEmbed, hasSidebarEmbed }) => hasAssetEmbed || hasSidebarEmbed
    ? `
    border-top: none;
    border-bottom: none;
    padding: 0;
  `
    : ''}

  ${minScreen(BREAKPOINTS.md)} {
    margin: ${calculateSpacing(1)} ${calculateSpacing(4)} ${calculateSpacing(1)}
      0;
    width: 37.5%;
  }

  ${minScreen(BREAKPOINTS.lg, BREAKPOINTS.xl)} {
    min-width: 220px;
  }
`;
const insetSideCSS = (side) => `
  float: ${side};
  margin-${side === 'left' ? 'right' : 'left'}: ${calculateSpacing(4)};
`;
const reponsiveInsetSideCSS = (side) => ({ isInsetItemOnMobile }) => {
    if (isInsetItemOnMobile) {
        return insetSideCSS(side);
    }
    return `
    ${minScreen(BREAKPOINTS.md)} {
      ${insetSideCSS(side)}
    }
  `;
};
const insetLeftCSS = reponsiveInsetSideCSS('left');
const insetRightCSS = reponsiveInsetSideCSS('right');
const relatedListCSS = `
  border: 0;
  padding: 0;

  ${minScreen(BREAKPOINTS.md)}{
    min-width: 270px;
  }
`;
const embedSizesCSS = `
  margin: 0;
  width: 100%;

  ${minScreen(BREAKPOINTS.md)} {
    width: 100%;
  }

  ${minScreen(BREAKPOINTS.lg)} {
    width: 100%;
  }
`;
const hasQuoteEmbedCSS = css `
  border-width: 4px 0 0;
  border-style: solid;
  ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.consumption.body.standard.display-texture')};
`;
const hasPullquoteEmbedWithoutTopBorderCSS = css `
  ${PullQuoteEmbedWrapper} {
    margin-block: 0;
  }
`;
const hasSidebarEmbedCSS = `
  ${minScreen(BREAKPOINTS.md)} {
    min-width: 220px;
  }
`;
const hasCartoonCSS = `
  @media print {
    display: none;
  }
`;
const hasExternalLinkCSS = css `
  ${ExternalLinkEmbedWrapper} {
    border: 0;
    padding: 0;

    a {
      text-decoration: none;
    }

    p {
      line-height: 23.9999px;
    }
  }
`;
const borderTopOverride = css `
  border-top-width: ${({ borderTopWidth }) => borderTopWidth}px;
`;
const topBorderCSS = `
  && {
    ${AssetEmbedWrapper} {
      margin: 0px auto ${calculateSpacing(5)} auto;
    }
  }
`;
const GenericCalloutWrapper = styled.div.withConfig({
    displayName: 'GenericCalloutWrapper'
}) `
  .responsive-cartoon {
    &::before {
      ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.consumption.body.standard.divider')};

      display: inline-block;
      grid-column: 1/-1;
      border-width: 0 0 1px;
      border-style: solid;
      height: 0;
      content: '';
    }

    &::after {
      ${({ theme }) => getColorStyles(theme, 'border-top-color', 'colors.consumption.body.standard.divider')};

      display: inline-block;
      grid-column: 1/-1;
      border-width: 1px 0 0;
      border-style: solid;
      height: 0;
      content: '';
    }
  }

  .responsive-cartoon__caption {
    ${getTypographyStyles('typography.definitions.globalEditorial.context-secondary')}
    margin-top: 0;
  }

  ${({ hasTopBorder }) => hasTopBorder && topBorderCSS}
  ${({ isFeatureXSmall }) => (isFeatureXSmall ? featureXSmallCSS : '')}
  ${({ isFeatureSmall }) => (isFeatureSmall ? featureSmallCSS : '')}
  ${({ isFeatureMedium }) => (isFeatureMedium ? featureMediumCSS : '')}
  ${({ hasEmbedSizes }) => (hasEmbedSizes ? embedSizesCSS : '')}
  ${({ isPortraitJustified }) => isPortraitJustified ? portraitJustifiedCSS : ''}
  ${({ isInsetLeft, isInsetRight }) => isInsetLeft || isInsetRight ? insetItemCSS : ''}
  ${({ isInsetLeft }) => (isInsetLeft ? insetLeftCSS : '')}
  ${({ isInsetRight }) => (isInsetRight ? insetRightCSS : '')}
  ${({ isIntro }) => (isIntro ? introCSS : '')}
  ${({ isRelatedList }) => (isRelatedList ? relatedListCSS : '')}
  ${({ hasBlockquoteEmbed, hasPullquoteEmbed, hasTopBorder }) => (hasBlockquoteEmbed || hasPullquoteEmbed) && hasTopBorder
    ? hasQuoteEmbedCSS
    : ''}
  ${({ hasPullquoteEmbed, hasTopBorder }) => hasPullquoteEmbed && !hasTopBorder
    ? hasPullquoteEmbedWithoutTopBorderCSS
    : ''}
  ${({ hasSidebarEmbed }) => (hasSidebarEmbed ? hasSidebarEmbedCSS : '')}
  ${({ hasCartoon }) => (hasCartoon ? hasCartoonCSS : '')}
  ${({ hasExternalLinkEmbed }) => hasExternalLinkEmbed ? hasExternalLinkCSS : ''}
  ${({ borderTopWidth }) => (borderTopWidth > 0 ? borderTopOverride : '')}
`;
module.exports = { GenericCalloutWrapper, RelatedLinksContainerWrapper };
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 38147:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const get = __webpack_require__(58156);
const kebabCase = __webpack_require__(20249);
/**
 *
 * @param {object} reactEl - react element
 */
const isHeaderElement = (reactEl) => reactEl && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(reactEl.type);
/**
 *
 * @param {object} reactEl - react element
 */
const isParagraphWithLinkElement = (reactEl) => {
    if (!reactEl.type ||
        reactEl.type !== 'p' ||
        !get(reactEl, 'props.children.type') ||
        get(reactEl, 'props.children.type') !== 'a' ||
        !get(reactEl, 'props.children.props.href') ||
        !get(reactEl, 'props.children.props.href').startsWith('https://')) {
        return false;
    }
    return true;
};
/**
 * Check if a React node is of type Fragment
 *
 * @param {object} node - React element
 * @returns {boolean}
 */
const isReactFragment = (node) => {
    if (node.type)
        return node.type === React.Fragment;
    return node === React.Fragment;
};
/**
 * Determines if array of nodes represents a list of related links
 *
 * @param {Array} nodes - array of react elements
 */
const isRelatedList = (nodes) => {
    let isValid = true;
    if (!Array.isArray(nodes))
        return false;
    // If the component is fragment, we want to check its children
    if (isReactFragment(nodes[0])) {
        return isRelatedList(nodes[0]?.props?.children);
    }
    nodes.forEach((item, index) => {
        if (index === 0 &&
            !isHeaderElement(item) &&
            !isParagraphWithLinkElement(item)) {
            isValid = false;
        }
        if (index !== 0 && !isParagraphWithLinkElement(item)) {
            isValid = false;
        }
    });
    return isValid;
};
/**
 * Gets name from displayName and wrapper brackets
 * (e.g.: Connect(Component) => Component)
 *
 * @param {string} displayName - original displayName
 * @returns {string} display name
 */
const getCleanDisplayName = (displayName) => {
    const wrapRegEx = /\((\w+?)\)/;
    const match = displayName.match(wrapRegEx);
    return (match && match[1]) || displayName;
};
/**
 * Identify the component name of a React node
 *
 * @param {object} child - React element
 * @returns {string|undefined} Name of component
 */
const getComponentName = (child) => {
    if (child?.type?.displayName) {
        return getCleanDisplayName(child.type.displayName);
    }
    else if (child?.type?.name) {
        return child.type.name;
    }
    return undefined;
};
/**
 * Remove HoC ConfiguredComponent text and kebab-case the name
 *
 * @param {string} componentName - Name of the component
 * @returns {string} Sanitized component name
 */
const sanitizeComponentName = (componentName) => {
    return kebabCase(componentName.replace('ConfiguredComponent', ''));
};
/**
 * Identify the types of elements within the callout.
 *
 * @param {Array.<object>} children - An array of React elements
 * @param {Array.<string>} childTypes - An array of component types
 * @returns {object} Object containing children types
 */
const getContentTypes = (children, childTypes) => {
    const COMPONENT_NAME_MAP = {
        // santised component name: content type state
        article: 'hasArticleEmbed',
        'asset-embed': 'hasAssetEmbed',
        'blockquote-embed': 'hasBlockquoteEmbed',
        cartoon: 'isCartoon',
        'external-link-embed': 'hasExternalLinkEmbed',
        'pullquote-embed': 'hasPullquoteEmbed',
        'related-list': 'hasRelatedList',
        'sidebar-embed': 'hasSidebarEmbed',
        // childType: content type state
        'callout:sidebar': 'hasSidebarEmbed'
    };
    const contentTypes = {
        hasArticleEmbed: false,
        hasAssetEmbed: false,
        hasBlockquoteEmbed: false,
        hasCartoon: false,
        hasExternalLinkEmbed: false,
        hasPullquoteEmbed: false,
        hasRelatedList: false,
        hasSidebarEmbed: false
    };
    // We do two passes. We try to work out the content types from looking at the
    // children and then we do a pass over childTypes in case we've been given
    // something there.
    let componentName;
    let lookupKey;
    React.Children.forEach(children, (child) => {
        componentName = getComponentName(child);
        if (componentName !== undefined) {
            componentName = sanitizeComponentName(componentName);
            if (Object.hasOwnProperty.call(COMPONENT_NAME_MAP, componentName)) {
                lookupKey = COMPONENT_NAME_MAP[componentName];
                contentTypes[lookupKey] = true;
            }
        }
    });
    if (childTypes) {
        childTypes.forEach((childType) => {
            if (Object.hasOwnProperty.call(COMPONENT_NAME_MAP, childType)) {
                lookupKey = COMPONENT_NAME_MAP[childType];
                contentTypes[lookupKey] = true;
            }
        });
    }
    return contentTypes;
};
const isAlignedSidebar = (name, childTypes = []) => {
    return (name?.startsWith('inset-') &&
        childTypes?.length === 1 &&
        childTypes?.[0] === 'callout:sidebar');
};
const isArticleGroup = (childTypes = []) => {
    return (Array.isArray(childTypes) &&
        childTypes.filter((childType) => childType === 'article').length > 1);
};
const getNameStates = (name) => {
    return {
        isFeatureXSmall: name === 'feature-xsmall',
        isFeatureSmall: name === 'feature-small',
        isFeatureMedium: name === 'feature-medium',
        isPortraitJustified: name === 'portrait-justified',
        isIntro: name === 'intro',
        isInsetLeft: name === 'inset-left' || name === 'inset-image-left',
        isInsetRight: name === 'inset-right'
    };
};
module.exports = {
    getCleanDisplayName,
    getComponentName,
    getContentTypes,
    getNameStates,
    isAlignedSidebar,
    isArticleGroup,
    isHeaderElement,
    isParagraphWithLinkElement,
    isRelatedList,
    sanitizeComponentName
};
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 43222:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const classnames = __webpack_require__(32485);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(68766)["default"]);
const Arrow = (props) => {
    const { formatMessage } = useIntl();
    const { className, ...attrs } = props;
    return (React.createElement("svg", { className: classnames('icon icon-arrow', className), focusable: "false", viewBox: "0 0 8 8", width: "8", height: "8", xmlns: "http://www.w3.org/2000/svg", ...attrs },
        React.createElement("title", null, formatMessage(translations.arrow)),
        React.createElement("g", { opacity: ".8", clipPath: "url(#a)" },
            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.707 4 4.354.646l-.708.708L5.793 3.5H1v1h4.793L3.646 6.646l.708.708L7.707 4Z", fill: "#000" })),
        React.createElement("defs", null,
            React.createElement("clipPath", { id: "a" },
                React.createElement("path", { fill: "#fff", d: "M0 0h8v8H0z" })))));
};
Arrow.propTypes = {
    className: PropTypes.string
};
module.exports = Arrow;
//# sourceMappingURL=Arrow.js.map

/***/ }),

/***/ 81232:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const PropTypes = __webpack_require__(5556);
const classnames = __webpack_require__(32485);
const translations = (__webpack_require__(68766)["default"]);
const ChevronRight = (props) => {
    const { formatMessage } = useIntl();
    const { className, ...attrs } = props;
    return (React.createElement("svg", { className: classnames(className, 'icon icon-chevron'), focusable: "false", viewBox: "0 0 12 12", width: "12", height: "12", xmlns: "http://www.w3.org/2000/svg", ...attrs },
        React.createElement("title", null, formatMessage(translations.chevron)),
        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.53 3.53 6 9.06.47 3.53l1.06-1.06L6 6.94l4.47-4.47 1.06 1.06Z" })));
};
ChevronRight.propTypes = {
    className: PropTypes.string
};
module.exports = ChevronRight;
//# sourceMappingURL=ChevronDown.js.map

/***/ }),

/***/ 98247:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const Arrow = __webpack_require__(43222);
const ChevronDown = __webpack_require__(81232);
module.exports = {
    Arrow,
    ChevronDown
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 37584:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const StandardIcons = __webpack_require__(97504);
const ThinIcons = __webpack_require__(91470);
const ThinnerIcons = __webpack_require__(24695);
const ICON_TYPE_MAP = {
    standard: StandardIcons,
    thin: ThinIcons,
    thinner: ThinnerIcons
};
/**
 * Based on the icon properties, get the icon component
 *
 * @param  {string} name - the name of the icon
 * @param  {string} type - the type of the icon (standard/thin/thinner), defaults to standard
 * @returns {ReactElement|null} the icon component, returns null if icon not found
 */
const getIconComponent = (name, type = 'standard') => {
    if (!name) {
        return null;
    }
    const IconComponent = ICON_TYPE_MAP[type][name];
    if (IconComponent) {
        return IconComponent;
    }
    return null;
};
module.exports = { getIconComponent };
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 15571:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { InfoSliceValue, InfoSliceKey, InfoSliceItem, InfoSliceListItem, InfoSliceList, InfoSliceHed, InfoSliceWrapper } = __webpack_require__(52327);
const { TrackComponentChannel } = __webpack_require__(78788);
const InfoSlice = ({ className, items, isMusicReview = false, infoSliceHed, variations = {
    shouldContentWrap: false,
    hasCustomPadding: false,
    showHed: false
}, variationName }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'InfoSlice',
            variation: variationName
        });
    }, [variationName]);
    if (!items || items.length === 0) {
        return null;
    }
    const { shouldContentWrap, hasCustomPadding, showHed } = variations;
    return (React.createElement(InfoSliceWrapper, { className: className, "data-testid": "InfoSliceList" },
        showHed && infoSliceHed && (React.createElement(InfoSliceHed, { "data-testid": "InfoSliceHed" }, infoSliceHed)),
        React.createElement(InfoSliceList, { isMusicReview: isMusicReview, hasCustomPadding: hasCustomPadding }, items.map((item) => {
            const { key, value } = item;
            return key && value ? (React.createElement(InfoSliceListItem, { hasCustomPadding: hasCustomPadding, key: key.toString().toLowerCase() },
                React.createElement(InfoSliceItem, { hasCustomPadding: hasCustomPadding },
                    React.createElement(InfoSliceKey, { shouldContentWrap: shouldContentWrap }, key),
                    React.createElement(InfoSliceValue, null, value)))) : null;
        }))));
};
InfoSlice.propTypes = {
    className: PropTypes.string,
    infoSliceHed: PropTypes.string,
    isMusicReview: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape({
        key: PropTypes.string,
        value: PropTypes.string
    })),
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        shouldContentWrap: PropTypes.bool,
        hasCustomPadding: PropTypes.bool,
        showHed: PropTypes.bool
    })
};
module.exports = InfoSlice;
//# sourceMappingURL=InfoSlice.js.map

/***/ }),

/***/ 59525:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(13571);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 52327:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing, getColorStyles } = __webpack_require__(26865);
const { BaseText } = __webpack_require__(76955);
const { BREAKPOINTS } = __webpack_require__(96472);
const { maxThresholds } = __webpack_require__(99906);
const InfoSliceValue = styled(BaseText).withConfig({
    displayName: 'InfoSliceValue'
}) `
  display: table-cell;
  vertical-align: top;
`;
InfoSliceValue.defaultProps = {
    colorToken: 'colors.consumption.body.standard.body',
    typeIdentity: 'typography.definitions.globalEditorial.numerical-small'
};
const InfoSliceKey = styled(BaseText).withConfig({
    displayName: 'InfoSliceKey'
}) `
  display: table-cell;
  padding-right: ${calculateSpacing(1)};
  vertical-align: top;
  ${({ shouldContentWrap }) => shouldContentWrap && `white-space: nowrap;`}
`;
InfoSliceKey.defaultProps = {
    colorToken: 'colors.consumption.body.standard.subhed',
    typeIdentity: 'typography.definitions.globalEditorial.context-title'
};
const InfoSliceItem = styled.div.withConfig({ displayName: 'InfoSliceItem' }) `
  display: table;
  align-items: center;
  padding: ${calculateSpacing(0.5)} 0;
`;
const InfoSliceListItem = styled.li.withConfig({
    displayName: 'InfoSliceListItem'
}) `
  @media (max-width: ${maxThresholds.md}px) {
    ${({ hasCustomPadding }) => !hasCustomPadding && `margin: 0 auto;`}
  }
  @media (min-width: ${BREAKPOINTS.md}) {
    margin-right: ${calculateSpacing(3)};

    :last-child {
      margin-right: ${calculateSpacing(0)};
    }
  }
`;
const InfoSliceList = styled.ul.withConfig({ displayName: 'InfoSliceList' }) `
  display: flex;
  flex-direction: column;
  margin: 0;
  border-width: 2px 0 0;
  border-style: solid;
  padding: ${calculateSpacing(1.5)} 0;
  ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.consumption.body.standard.divider')};
  ${({ hasCustomPadding }) => hasCustomPadding &&
    `
    padding: ${calculateSpacing(2)} 0 ${calculateSpacing(1)} 0;
  `}
  list-style: none;

  @media (min-width: ${BREAKPOINTS.md}) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    ${({ isMusicReview }) => isMusicReview &&
    `
    justify-content: center;
    border-width: 0 0 0;`}
  }
  ${({ isMusicReview }) => isMusicReview &&
    `
  justify-content: center;
  border-width: 0 0 0;`}
`;
const InfoSliceHed = styled(BaseText).withConfig({
    displayName: 'InfoSliceHed'
}) `
  padding-bottom: ${calculateSpacing(2)};
  ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.consumption.body.standard.divider')};
`;
InfoSliceHed.defaultProps = {
    as: 'h2',
    colorToken: 'colors.consumption.body.standard.subhed',
    typeIdentity: 'typography.definitions.consumptionEditorial.subhed-aux-primary'
};
const InfoSliceWrapper = styled.div.withConfig({
    displayName: 'InfoSliceWrapper'
}) ``;
module.exports = {
    InfoSliceValue,
    InfoSliceKey,
    InfoSliceItem,
    InfoSliceListItem,
    InfoSliceList,
    InfoSliceHed,
    InfoSliceWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 13571:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const InfoSlice = __webpack_require__(15571);
InfoSlice.displayName = 'InfoSlice';
InfoSlice.Default = asVariation(InfoSlice, 'Default', {});
InfoSlice.WithHed = asVariation(InfoSlice, 'WithHed', {
    shouldContentWrap: true,
    hasCustomPadding: true,
    showHed: true
});
module.exports = InfoSlice;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 29501:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useContext, useEffect, useRef, useState } = React;
const { mergeRefs } = __webpack_require__(54370);
const { isIOSDevice } = __webpack_require__(72362);
const useLazyLoadComponent = __webpack_require__(70920);
const { ConsentContext } = __webpack_require__(85438);
const ConsentBanner = __webpack_require__(83561);
const translations = (__webpack_require__(26180)/* ["default"] */ .A);
const { TrackComponentChannel } = __webpack_require__(78788);
const { InstagramEmbedContainer, InstagramEmbedBlockQuote } = __webpack_require__(55858);
/**
 * Inject embed script into browser
 *
 * @returns {undefined} - undefined
 */
const injectScript = () => {
    if (!document.getElementById('instagram-embed')) {
        const script = document.createElement('script');
        script.id = 'instagram-embed';
        script.className = 'instagram-embed';
        script.src = 'https://www.instagram.com/embed.js';
        document.body.appendChild(script);
    }
    else {
        window?.instgrm?.Embeds?.process();
    }
};
/**
 * InstagramEmbed
 *
 * @param {object} props - React props
 * @param {object} [props.attributes] - Optional attributes to add top level i.e. aria-*, role, etc.
 * @param {string} [props.className] - Optional top-level class to add
 * @param {boolean} [props.hidePostCaption] - Determines whether InstagramEmbed Captions should be displayed or not
 * @param {string} props.url - Required url of the content to embed
 *
 */
const InstagramEmbed = ({ attributes, className, hidePostCaption, url }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'InstagramEmbed'
        });
    }, []);
    const elementRef = useRef();
    const [lazyLoadElementRef, shouldLoadComponent] = useLazyLoadComponent();
    const [isIosDevice] = useState(isIOSDevice());
    const consentContext = useContext(ConsentContext);
    const shouldDisplayComponent = consentContext.targeting && shouldLoadComponent;
    /**
     * Changes iframe minWidth on load to force height recalculation
     *
     * @param {object} event - The submit event
     * @returns {undefined} undefined
     */
    const modifyStyleOnLoad = (event) => {
        const iframe = event.target;
        iframe?.addEventListener('load', () => {
            iframe.style.minWidth = `${iframe.offsetWidth + 1}px`;
        });
    };
    useEffect(() => {
        if (shouldDisplayComponent) {
            injectScript();
        }
        const element = elementRef.current;
        if (isIosDevice) {
            element.addEventListener('DOMNodeInserted', (event) => modifyStyleOnLoad(event));
        }
        return () => {
            if (isIosDevice) {
                element.removeEventListener('DOMNodeInserted', (event) => modifyStyleOnLoad(event));
            }
        };
    }, [isIosDevice, elementRef, shouldDisplayComponent]);
    return (React.createElement(InstagramEmbedContainer, { ref: mergeRefs(elementRef, lazyLoadElementRef) }, shouldDisplayComponent ? (React.createElement(InstagramEmbedBlockQuote, { ...attributes, className: classnames('instagram-media', className), "data-instgrm-captioned": hidePostCaption ? undefined : true, "data-instgrm-permalink": url, "data-instgrm-version": "14" })) : (React.createElement(ConsentBanner, { hasConsent: consentContext.targeting, url: url, consentBannerHeader: translations.consentBannerHeader }))));
};
InstagramEmbed.propTypes = {
    attributes: PropTypes.object,
    className: PropTypes.string,
    hidePostCaption: PropTypes.bool,
    url: PropTypes.string.isRequired
};
module.exports = InstagramEmbed;
//# sourceMappingURL=InstagramEmbed.js.map

/***/ }),

/***/ 11518:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(29501);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 55858:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing } = __webpack_require__(26865);
const InstagramEmbedContainer = styled.div.withConfig({
    displayName: 'InstagramEmbedContainer'
}) `
  display: flex;
  align-self: center;
  justify-content: center;
  margin: ${calculateSpacing(3)} auto;
  justify-self: center;
`;
const InstagramEmbedBlockQuote = styled.blockquote.withConfig({
    displayName: 'InstagramEmbedBlockQuote'
}) `
  width: 100%;
`;
module.exports = {
    InstagramEmbedContainer,
    InstagramEmbedBlockQuote
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 26180:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    consentBannerHeader: {
        id: 'InstagramEmbed.ConsentBannerHeader',
        defaultMessage: 'Instagram content',
        description: 'Header for message banner'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 2524:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.InteractiveOverrideContainer = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const routeHandlerMap_1 = __webpack_require__(47196);
const getHandlerKey = (canonicalUrl) => {
    const cleanPath = /(?<=\.com\/).*$/.exec(canonicalUrl);
    const pathname = cleanPath?.length ? cleanPath[0] : '';
    const matchedHandlerKey = Object.keys(routeHandlerMap_1.ROUTE_HANDLER_MAP).find((key) => {
        return pathname.includes(key);
    });
    return matchedHandlerKey;
};
/**
 * Unified container component for interactive overrides
 * Chooses the optimal approach based on override type:
 * - Header overrides: createContextualFragment
 * - All overrides: dangerouslySetInnerHTML + executeScriptsInContainer (full pages)
 */
const InteractiveOverrideContainer = ({ markup, canonicalUrl, className }) => {
    const containerRef = (0, react_1.useRef)(null);
    (0, react_1.useEffect)(() => {
        const container = containerRef.current;
        if (!container || !markup)
            return;
        const handlerKey = getHandlerKey(canonicalUrl);
        if (handlerKey) {
            const handler = routeHandlerMap_1.ROUTE_HANDLER_MAP[handlerKey];
            handler({ container });
        }
    }, [canonicalUrl, markup]);
    return (react_1.default.createElement("div", { ref: containerRef, className: className, dangerouslySetInnerHTML: { __html: markup } }));
};
exports.InteractiveOverrideContainer = InteractiveOverrideContainer;
//# sourceMappingURL=InteractiveOverrideContainer.js.map

/***/ }),

/***/ 37759:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.InteractiveOverrideContainer = void 0;
var InteractiveOverrideContainer_1 = __webpack_require__(2524);
Object.defineProperty(exports, "InteractiveOverrideContainer", ({ enumerable: true, get: function () { return InteractiveOverrideContainer_1.InteractiveOverrideContainer; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 84600:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.executeScriptsInContainer = void 0;
/**
 * Executes script tags found within a container element
 * Replaces each script with a new one to trigger browser execution
 * @param {HTMLElement} container - Container element with script tags to execute
 */
const executeScriptsInContainer = ({ container }) => {
    const scripts = container.querySelectorAll('script');
    scripts.forEach((oldScript) => {
        const newScript = document.createElement('script');
        // Copy attributes (e.g. src, type)
        Array.from(oldScript.attributes).forEach((attr) => {
            newScript.setAttribute(attr.name, attr.value);
        });
        if (!oldScript.src) {
            newScript.textContent = oldScript.textContent;
        }
        // Replace the old script with new one (this executes it)
        oldScript.parentNode?.replaceChild(newScript, oldScript);
    });
};
exports.executeScriptsInContainer = executeScriptsInContainer;
//# sourceMappingURL=executeScriptsInContainer.js.map

/***/ }),

/***/ 633:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.executeScriptsInContainer = void 0;
var executeScriptsInContainer_1 = __webpack_require__(84600);
Object.defineProperty(exports, "executeScriptsInContainer", ({ enumerable: true, get: function () { return executeScriptsInContainer_1.executeScriptsInContainer; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 47196:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ROUTE_HANDLER_MAP = void 0;
const route_handlers_1 = __webpack_require__(633);
exports.ROUTE_HANDLER_MAP = {
    'magazine/2017/10/30/faces-of-an-epidemic': route_handlers_1.executeScriptsInContainer
};
//# sourceMappingURL=routeHandlerMap.js.map

/***/ }),

/***/ 10468:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { InternalLinkEmbedWrapper } = __webpack_require__(63486);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * InternalLinkEmbed component
 *
 * Renders inline copilot embeds (level attribute set to `inline`) with a published url ( article, gallery etc)
 * as normal anchor tags. Caption of the embed will be used as link text
 * and published url will be used as href value.
 *
 * @param {object} props - React props
 * @param {string} props.dangerousDek - link discription
 * @param {string} props.url - url to link to
 *
 * @returns {ReactElement} <div>
 */
const InternalLinkEmbed = function ({ url, dangerousDek }) {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'InternalLinkEmbed'
        });
    }, []);
    return (React.createElement(InternalLinkEmbedWrapper, { href: url, dangerouslySetInnerHTML: { __html: dangerousDek } }));
};
InternalLinkEmbed.propTypes = {
    dangerousDek: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired
};
InternalLinkEmbed.displayName = 'InternalLinkEmbed';
module.exports = InternalLinkEmbed;
//# sourceMappingURL=InternalLinkEmbed.js.map

/***/ }),

/***/ 41506:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(10468);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 63486:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { INTERACTIVE } = __webpack_require__(96472);
const { getLinkStyles } = __webpack_require__(26865);
const InternalLinkEmbedWrapper = styled.a.withConfig({
    displayName: 'InternalLinkEmbedWrapper'
}) `
  transition: color ${INTERACTIVE.timingLinkDefault} ease;
  ${({ theme }) => getLinkStyles(theme, 'colors.consumption.body.standard.link', 'colors.consumption.body.standard.link-hover')}
`;
module.exports = {
    InternalLinkEmbedWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 10881:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useCallback, useContext, useEffect, useMemo, useRef, useState } = React;
const { useIntl } = __webpack_require__(46984);
const { TrackComponentChannel } = __webpack_require__(78788);
const { ConsentContext } = __webpack_require__(85438);
const useLazyLoadComponent = __webpack_require__(70920);
const ConsentBanner = __webpack_require__(83561);
const { MastodonEmbedContainer, MastodonEmbedIframe } = __webpack_require__(75479);
const translations = (__webpack_require__(83713)/* ["default"] */ .A);
/**
 * MastodonEmbed
 *
 * @param {object} props - React props
 * @param {object} [props.attributes] - Optional attributes to add top level i.e. aria-*, role, etc.
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} props.url - Reruired, the URL link to the Mastodon post.
 * @param {React.Children} props.children - Post contents
 */
const MastodonEmbed = ({ attributes, className, url }) => {
    useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'MastodonEmbed'
        });
    }, []);
    const embedSrc = useMemo(() => {
        if (url.endsWith('/')) {
            return `${url}embed`;
        }
        return `${url}/embed`;
    }, [url]);
    const consentContext = useContext(ConsentContext);
    const [lazyLoadElementRef, shouldLoadComponent] = useLazyLoadComponent();
    const { formatMessage } = useIntl();
    const shouldDisplayComponent = consentContext.targeting && shouldLoadComponent;
    const [height, setHeight] = useState(200);
    const iframe = useRef();
    const onLoad = useCallback(() => {
        if (iframe.current) {
            iframe.current.contentWindow.postMessage({
                type: 'setHeight',
                id: url
            }, '*');
        }
    }, [url]);
    useEffect(() => {
        const onMessage = (evt) => {
            const data = evt.data || {};
            if (typeof data !== 'object' ||
                data.type !== 'setHeight' ||
                data.id !== url) {
                return;
            }
            setHeight(data.height);
        };
        setHeight(200);
        window.addEventListener('message', onMessage);
        return () => {
            window.removeEventListener('message', onMessage);
        };
    }, [url, setHeight]);
    useEffect(() => {
        window.addEventListener('resize', onLoad);
        return () => {
            window.removeEventListener('resize', onLoad);
        };
    }, [onLoad]);
    return (React.createElement(MastodonEmbedContainer, { "aria-label": formatMessage(translations.mastodonEmbedAriaLabelText), className: className, ref: lazyLoadElementRef }, shouldDisplayComponent ? (React.createElement(MastodonEmbedIframe, { className: "mastodon-embed", "data-testid": "mastodon-iframe", src: embedSrc, style: { height }, ref: iframe, onLoad: onLoad, ...attributes })) : (React.createElement(ConsentBanner, { hasConsent: consentContext.targeting, url: url, consentBannerHeader: translations.consentBannerHeader }))));
};
MastodonEmbed.propTypes = {
    attributes: PropTypes.object,
    className: PropTypes.string,
    url: PropTypes.string.isRequired
};
MastodonEmbed.displayName = 'MastodonEmbed';
module.exports = MastodonEmbed;
//# sourceMappingURL=MastodonEmbed.js.map

/***/ }),

/***/ 75479:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing } = __webpack_require__(26865);
const MastodonEmbedIframe = styled.iframe.withConfig({
    displayName: 'MastodonEmbedIframe'
}) `
  display: block;
  border: 0;
  border-radius: 8px;
  width: 600px;
  max-width: 100%;
  overflow: hidden;
`;
const MastodonEmbedContainer = styled.div.withConfig({
    displayName: 'MastodonEmbedContainer'
}) `
  margin: ${calculateSpacing(5)} auto;

  .mastodon-embed {
    margin-right: auto;
    margin-left: auto;
  }
`;
module.exports = {
    MastodonEmbedContainer,
    MastodonEmbedIframe
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 83713:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    mastodonEmbedAriaLabelText: {
        id: 'MastodonEmbed.AriaLabelText',
        defaultMessage: 'social media post',
        description: 'ARIA label for the mastodon embed container on Mastodon Embed'
    },
    consentBannerHeader: {
        id: 'MastodonEmbed.ConsentBannerHeader',
        defaultMessage: 'Mastodon content',
        description: 'Header for message banner'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 23616:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const { useState, useEffect } = __webpack_require__(96540);
const NativeShare = __webpack_require__(28828);
const NativeShareAlternate = __webpack_require__(69657);
const { TrackComponentChannel } = __webpack_require__(78788);
const { NativeShareIconWrapper } = __webpack_require__(66702);
const Button = __webpack_require__(73730);
const translations = (__webpack_require__(69179)/* ["default"] */ .A);
/**
 * Native share button.
 * Uses a device native sharing capabilities.
 *
 * @param {string} [buttonTitle] - title of the button
 * @param {boolean} [hasDarkBackground] - whether the button will be used on a dark background
 * @param {object} shareData - data to be shared
 * @param {string} shareData.url - url to be shared
 * @param {string} shareData.title - title to be displayed on the share card
 * @param {string} shareData.text - text to be displayed on the share card
 * @param {Function} [shareCallback] - function to be executed when an item has been shared, it receives an object
 * with two properties, the type of share and an error message.
 * @param {Function} [parentCallBack] - function to be executed when button or icon is clicked, it receives the boolean
 * @param {string}  [theme] - Optional theme name
 * @param {boolean}  [useAlternativeIconStyle] - use alternative icon
 * value
 *
 * @returns {ReactElement} child components
 */
const NativeShareButton = ({ buttonTitle, parentCallBack, shareData, shareCallback, hasDarkBackground, showOnlyIcon = false, shouldUseAlternativeIconStyle = false, theme }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'NativeShareButton'
        });
    }, []);
    const { formatMessage } = useIntl();
    const [toggle, setToggle] = useState(false);
    const NativeShareIcon = shouldUseAlternativeIconStyle
        ? NativeShareAlternate
        : NativeShare;
    const ButtonComponent = theme === 'inverted' ? Button.UtilityInverted : Button.Utility;
    useEffect(() => {
        parentCallBack && parentCallBack(toggle);
    }, [toggle, parentCallBack]);
    const sharePageData = async (pageData, shareCallbackData) => {
        if (!Object.keys(pageData || {}).length || !navigator?.share) {
            return false;
        }
        let errorMessage = null;
        try {
            await navigator.share(pageData);
        }
        catch (error) {
            errorMessage = error?.message;
        }
        if (typeof shareCallbackData === 'function') {
            shareCallbackData({
                type: 'native-sharing',
                error: errorMessage
            });
        }
        return true;
    };
    const onShareClickHandler = (parentCallBackData) => {
        if (parentCallBackData && !navigator?.share) {
            setToggle(!toggle);
        }
    };
    return !showOnlyIcon ? (React.createElement(ButtonComponent, { onClickHandler: () => {
            sharePageData(shareData, shareCallback);
            onShareClickHandler(parentCallBack);
        }, btnStyle: "outlined", label: buttonTitle || formatMessage(translations.buttonTitle), iconPosition: "before", hasEnableIcon: true, hasDarkBackground: hasDarkBackground, ButtonIcon: () => (React.createElement(NativeShareIconWrapper, { hasDarkBackground: hasDarkBackground, shouldUseAlternativeIconStyle: shouldUseAlternativeIconStyle },
            React.createElement(NativeShareIcon, null))) })) : (React.createElement(NativeShareIconWrapper, { hasDarkBackground: hasDarkBackground, shouldUseAlternativeIconStyle: shouldUseAlternativeIconStyle },
        React.createElement(NativeShareIcon, { onIconClick: () => {
                onShareClickHandler(parentCallBack);
                sharePageData(shareData, shareCallback);
            }, onKeyDown: (e) => {
                if (e.keyCode === 13) {
                    onShareClickHandler(parentCallBack);
                    sharePageData(shareData, shareCallback);
                }
            }, tabIndex: "0" })));
};
NativeShareButton.propTypes = {
    buttonTitle: PropTypes.string,
    hasDarkBackground: PropTypes.bool,
    parentCallBack: PropTypes.func,
    shareCallback: PropTypes.func,
    shareData: PropTypes.object.isRequired,
    shouldUseAlternativeIconStyle: PropTypes.bool,
    showOnlyIcon: PropTypes.bool,
    theme: PropTypes.oneOf(['standard', 'inverted', 'special'])
};
NativeShareButton.displayName = 'NativeShareButton';
module.exports = NativeShareButton;
//# sourceMappingURL=NativeShareButton.js.map

/***/ }),

/***/ 77554:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const NativeShareButton = __webpack_require__(23616);
module.exports = asConfiguredComponent(NativeShareButton, 'NativeShareButton');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 66702:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.NativeShareIconWrapper = void 0;
const styled_components_1 = __importDefault(__webpack_require__(92168));
const { INTERACTIVE } = __webpack_require__(96472);
const NativeShareIconWrapper = styled_components_1.default.div.withConfig({
    displayName: 'NativeShareIconWrapper'
}) `
  display: flex;

  ${({ shouldUseAlternativeIconStyle }) => shouldUseAlternativeIconStyle &&
    `
      width: 38px;
      height: 38px;
    `}
  path {
    transition: fill ${INTERACTIVE.timingButtonDefault} ease-in;
    fill: currentColor;
  }
`;
exports.NativeShareIconWrapper = NativeShareIconWrapper;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 69179:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    buttonTitle: {
        id: 'NativeShareButton.ButtonTitle',
        defaultMessage: 'Share',
        description: 'Native Share Button component button title text',
        isConfigurable: true
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 30633:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { useContext, useEffect } = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { ConsentContext } = __webpack_require__(85438);
const injectScript = () => {
    if (!document.getElementById('parsely-script')) {
        const script = document.createElement('script');
        script.id = 'parsely-script';
        script.src = 'https://d1z2jf7jlzjs58.cloudfront.net/p.js';
        document.body.appendChild(script);
    }
};
/**
 * The Parse.ly Tracker is a small piece of JavaScript code that monitors
 * user actions taken on your site and relays them to the Parse.ly analytics
 * server.
 *
 * @param {object} props - React props
 * @param {string} [props.apiKey] - Tenant specific api key
 * @see {@link https://www.parse.ly/help/integration/basic/}
 */
const ParselyScript = ({ apiKey }) => {
    const consentContext = useContext(ConsentContext);
    useEffect(() => {
        if (consentContext.performance)
            injectScript();
    }, [consentContext.performance]);
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { id: "parsely-root", style: { display: 'none' } },
            React.createElement("div", { id: "parsely-cfg", "data-parsely-site": apiKey })),
        React.createElement("script", { dangerouslySetInnerHTML: {
                __html: `
            window.PARSELY = {
              autotrack: false,
              onReady: () => { window.PARSELY.resolver(); }
            };
            window.PARSELY.ready = new Promise((resolver) => { window.PARSELY.resolver = resolver; });
          `
            } })));
};
ParselyScript.propTypes = {
    apiKey: PropTypes.string.isRequired
};
module.exports = ParselyScript;
//# sourceMappingURL=ParselyScript.js.map

/***/ }),

/***/ 66366:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const ParselyScript = __webpack_require__(30633);
module.exports = {
    ParselyScript
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 78981:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const flow = __webpack_require__(49870);
const ruleSets = __webpack_require__(9599);
const ruleEngine = __webpack_require__(45102);
const { TrackComponentChannel } = __webpack_require__(78788);
// Component Enhancements
const withAnalytics = __webpack_require__(17468);
const withLifecycleTiming = __webpack_require__(87006);
const { withPaywallSparrowClickTracking } = __webpack_require__(97211);
const enhancedComponents = {};
const enhance = flow([
    withLifecycleTiming,
    withAnalytics,
    withPaywallSparrowClickTracking
]);
/**
 * PaywallConductor component
 *
 * @param {object} props - React props
 * @param {ReactElement} props.component - the child component
 * @param {object} props.logo - logo image responsive asset object
 * @param {string} props.name - child component name
 * @param {object} props.payment - payment object
 * @param {object} props.paywall - paywall object
 * @param {string} props.strategy - Optional, it can override the strategy in the tenant config
 * @param {object} props.user - user object
 *
 * @returns {ReactElement} child components
 */
const PaywallConductor = (props) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'PaywallConductor'
        });
    }, []);
    const { component, name, payment, paywall } = props;
    // When payment negotiation is not enabled
    // do not render any paywall components
    if (payment.form === undefined)
        return null;
    // When the paywall is not configured
    // do not render any paywall components
    if (paywall.strategy === undefined)
        return null;
    // When the paywall strategy is not recognized
    // do not render any paywall components
    const ruleSet = ruleSets[props.strategy || paywall.strategy];
    if (ruleSet === undefined)
        return null;
    // When the paywall component is not recognized
    // do not render this component
    if (!ruleSet.names.includes(name))
        return null;
    const Component = enhancedComponents[name] || enhance(component);
    enhancedComponents[name] = Component;
    return React.createElement(Component, { ...ruleEngine.execute(ruleSet, props) });
};
PaywallConductor.propTypes = {
    component: PropTypes.func.isRequired,
    logo: PropTypes.object,
    name: PropTypes.string.isRequired,
    payment: PropTypes.object.isRequired,
    paywall: PropTypes.shape({
        strategy: PropTypes.string
    }),
    strategy: PropTypes.string,
    user: PropTypes.object.isRequired
};
PaywallConductor.displayName = 'PaywallConductor';
module.exports = PaywallConductor;
//# sourceMappingURL=PaywallConductor.js.map

/***/ }),

/***/ 46944:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const flow = __webpack_require__(49870);
const PaywallConductor = __webpack_require__(78981);
// Store helpers
const { connectDomain } = __webpack_require__(57744);
const withLogo = connectDomain('logo');
const withUser = connectDomain('user');
const withPaywall = connectDomain('paywall');
const withPayment = connectDomain('payment');
// Page State
const withScrollingState = __webpack_require__(49670);
const { withIncognitoDetection, withVisibilityState } = __webpack_require__(15356);
// Higher-order components
const { asConfiguredComponent } = __webpack_require__(12892);
const withFooterVisibility = withVisibilityState({
    name: 'footer',
    className: 'site-footer'
});
const enhance = flow([
    withIncognitoDetection,
    withPaywall,
    withUser,
    withPayment,
    withScrollingState,
    withFooterVisibility,
    withLogo
]);
module.exports = {
    PaywallConductor: enhance(asConfiguredComponent(PaywallConductor, 'PaywallConductor')),
    withScrollingState
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 60471:
/***/ ((module) => {

/*
 * Alpha paywall
 *
 * Article 5+: Chunked Article/Gallery Content
 *
 */
/*
 * This is the set of acceptable names
 */
const names = ['chunked-article-content', 'chunked-gallery-content'];
/*
 * These rules are a flat list. Please keep these rules
 * organized by name.
 */
const list = [
    /* Paywall Components */
    /* Rules for chunked-article-content */
    {
        conditions: {
            name: 'chunked-article-content',
            'payment.form': ''
        },
        properties: {
            shouldTruncate: true
        }
    },
    /* Rules for chunked-gallery-content */
    {
        conditions: {
            name: 'chunked-gallery-content',
            'payment.form': ''
        },
        properties: {
            shouldTruncate: true
        }
    }
];
module.exports = { list, names };
//# sourceMappingURL=alpha.js.map

/***/ }),

/***/ 78561:
/***/ ((module) => {

/*
 * Beta paywall - An Incognito Modal
 * is displayed when the payment form is sample and the ads library detects
 * an incognito window.
 *
 * Note: Some browsers use the term Private Window instead of incognito window.
 *
 * Article 5/5+: Cunked Gallery/Article Content
 * Incognito Mode: Chunked Gallery/Article Content + Incognito Modal
 *
 */
/*
 * These are the default properties for this rule set.
 * Properties in matching rules _override_ these defaults.
 */
const defaults = {
    isVisible: false
};
/*
 * This is the set of acceptable names
 */
const names = [
    'incognito-modal',
    'chunked-article-content',
    'chunked-gallery-content'
];
/*
 * These rules are a flat list. Please keep these rules
 * organized by name.
 */
const list = [
    /* Paywall Components */
    /* Rules for incognito-modal */
    {
        conditions: {
            name: 'incognito-modal',
            'payment.form': 'sample',
            'user.isAuthenticated': false,
            'browser.incognitoMode': true
        },
        properties: {
            position: 'incognito-modal-call-to-action'
        }
    },
    {
        conditions: {
            name: 'chunked-article-content',
            'payment.form': ''
        },
        properties: {
            shouldTruncate: true
        }
    },
    /* Rules for chunked-article-content */
    {
        conditions: {
            name: 'chunked-article-content',
            'payment.form': 'sample',
            'user.isAuthenticated': false,
            'browser.incognitoMode': true
        },
        properties: {
            shouldTruncate: true
        }
    },
    /* Rules for chunked-gallery-content */
    {
        conditions: {
            name: 'chunked-gallery-content',
            'payment.form': ''
        },
        properties: {
            shouldTruncate: true
        }
    },
    {
        conditions: {
            name: 'chunked-gallery-content',
            'payment.form': 'sample',
            'user.isAuthenticated': false,
            'browser.incognitoMode': true
        },
        properties: {
            shouldTruncate: true
        }
    }
];
module.exports = { defaults, list, names };
//# sourceMappingURL=beta.js.map

/***/ }),

/***/ 9599:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const alpha = __webpack_require__(60471);
const beta = __webpack_require__(78561);
module.exports = {
    alpha,
    beta
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 45102:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const reduce = __webpack_require__(40860);
const map = __webpack_require__(55378);
const filter = __webpack_require__(87612);
const get = __webpack_require__(58156);
/*
 *  ruleEngine.execute
 *
 *  This service object generates a set of properties that will be
 *  passed to initialize a paywall component. The properties depend
 *  on the state of the system and the business rules that govern
 *  the visibility and behavior of the paywall components.
 *
 * @param {object} ruleSet - the module
 * @param {Array<Object>} ruleSet.list - the list of business rules
 * @param {object} ruleSet.defaults - properties passed on by default
 * @param {object} state - data available to the business rules
 *
 * @returns {object} Set of properties selected by the rules
 */
function execute(ruleSet, state) {
    /*
     *  isMatchingRule will iterate through all the conditions associated
     *  with a rule and if all the conditions are true, true is returned.
     *  Otherwise, false is returned.
     *
     *  Each condition in the rule set contains a key and value. The key
     *  specifies a property on the state object which is tested for
     *  equality against the value. For example, the condition:
     *    {name: 'paywall-bar'}
     *  requires that state.name === 'paywall-bar'.
     *
     *  Condition keys can also specify a path to a value nested within
     *  the state object. For example:
     *    {'payment.form': 'sample'}
     *  requires that state.payment.form === 'sample'
     *
     * @param {object} rule - a rule
     * @param {object} rule.conditions - conditions required to trigger the rule
     * @param {object} rule.properties - properties passed when the rule is triggered
     *
     * @returns {boolean} does the rule match (i.e., are all the conditions true)
     */
    function isMatchingRule(rule) {
        return reduce(rule.conditions, (match, value, key) => match && get(state, key) === value, true);
    }
    const matchingRules = filter(ruleSet.list, isMatchingRule);
    const matchingProps = map(matchingRules, 'properties');
    return Object.assign({}, ruleSet.defaults, state, ...matchingProps);
}
module.exports = { execute };
//# sourceMappingURL=ruleEngine.js.map

/***/ }),

/***/ 17468:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { googleAnalytics } = __webpack_require__(90090);
const sparrow = 
// eslint-disable-next-line global-require
 true && __webpack_require__(31170);
/**
 * getUnitValues
 *
 * The returned object is required to carry out the two events in the withAnalytics function declared later
 * This extends withAnalytics function to support sample and asmp by making use of 'form' key in the payment object
 * Payment also contains a key which is the same as payment-form's value
 * Ex. payment = {
 *      asmp: {cnt: 1, max: 4}
 *      form: "asmp"
 *     }
 * This information is used to access the return values cnt and max
 *
 * @param {object} props - React props
 * @param {string} [props.name] - Optional Component name
 * @param {string} [props.position] - Optional CM position
 * @param {object} [props.payment] - Optional payment options
 * @param {string} [props.payment.form] - Optional payment form
 * @param {number} [props.payment[payment.form].cnt] - Optional paywall count
 * @param {number} [props.payment[payment.form].max] - Optional paywall max
 *
 * @returns {object} - Curated values
 */
function getUnitValues(props) {
    const { name, position } = props;
    const payment = props.payment || {};
    let cnt;
    let max;
    if (payment.form) {
        ({ max, cnt } = payment[payment.form] || {});
    }
    return { cnt, max, name, position };
}
/**
 * withAnalytics
 *
 * This function wraps a Component to create a new Component.
 * Extends the wrapped Component, adding behavior to track analytics
 * events, based on the component name.
 *
 * Two distinct analytics events are triggered when the Paywall Component's
 * isVisible property is true, upon the componentDidUpdate lifecycle event:
 *
 * Emits a unique Google Analytics event
 *
 * Utilizes Sparrow (https://github.com/CondeNast/sparrow-pixel) to emit a
 * Unique Sparrow Tracking Event
 *
 * Sparrow Events data is sent through with specific variables used by
 * the data teams, those variables and their meanings are as follows:
 *
 * dim2 = User's Monthly Visit Count
 * dim3 = User's Articles Left this Month
 * dim4 = Paywall Component Descriptor
 *
 * Finally, if `browser.incognitoMode` is true, withAnalytics will emit
 * a `privacy-mode-true` unique Google Analytics event. The flag
 * `incognitoMode` indicates that the user is visiting the page from
 * an Incognito window.
 *
 * const ComponentWithAnalytics = withAnalytics(Component);
 *
 * @param {ReactComponent} Component - The to-be-wrapped component
 *
 * @returns {ReactComponent} Wrapped component
 */
const withAnalytics = (Component) => {
    const componentName = Component.displayName || Component.name || 'Component';
    class Analytics extends React.Component {
        constructor() {
            super(...arguments);
            this.render = () => {
                return React.createElement(Component, { ...this.props });
            };
        }
        componentDidUpdate() {
            this.emit();
        }
        emitIncognitoDetectionEvent() {
            if ((this.props.browser || {}).incognitoMode) {
                googleAnalytics.emitUniqueGoogleTrackingEvent('privacy-mode-true');
            }
        }
        emitSparrowInViewPaywallTrackingEvent() {
            const { cnt, max, name, position } = getUnitValues(this.props);
            const dim2 = cnt;
            const dim3 = max && cnt && max - cnt;
            const dim4 = position || name;
            // if value is present include value within payload
            const sparrowTrackingPayload = {
                ...(dim2 && { dim2 }),
                ...(dim3 && { dim3 }),
                ...(dim4 && { dim4 })
            };
            sparrow.emitUniqueSparrowTrackingEvent('paywall', 'in-view', sparrowTrackingPayload);
        }
        emit() {
            const { isVisible } = this.props;
            if (!isVisible)
                return;
            this.emitSparrowInViewPaywallTrackingEvent();
            this.emitIncognitoDetectionEvent();
        }
    }
    Analytics.propTypes = {
        browser: PropTypes.shape({
            incognitoMode: PropTypes.bool
        }),
        isVisible: PropTypes.bool,
        name: PropTypes.string,
        payment: PropTypes.shape({
            sample: PropTypes.shape({
                cnt: PropTypes.number,
                max: PropTypes.number
            })
        }),
        position: PropTypes.string
    };
    Analytics.displayName = `withAnalytics(${componentName})`;
    return Analytics;
};
module.exports = withAnalytics;
//# sourceMappingURL=withAnalytics.js.map

/***/ }),

/***/ 87006:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { buildMarkName, buildMeasureName, perfMark, perfMeasure } = __webpack_require__(56822);
/**
 * withLifecycleTiming
 *
 * This function wraps a Component to create a new Component.
 * Extends the wrapped Component, adding behavior to track time from construction to mount
 * and time from construction to first update.
 *
 * const ComponentWithUserTiming = withLifecycleTiming(Component);
 *
 * @param {ReactComponent} Component - The to-be-wrapped component
 *
 * @returns {ReactComponent} Wrapped component
 */
const withLifecycleTiming = (Component) => {
    const componentName = Component.displayName || Component.name || 'Component';
    const page = componentName;
    const actionMountStart = 'initialize-start';
    const actionMountEnd = 'initialize-end';
    class LifecycleTiming extends React.Component {
        constructor(props) {
            super(props);
            this.render = () => React.createElement(Component, { ...this.props });
            if (true) {
                perfMark(buildMarkName(page, actionMountStart));
            }
        }
        componentDidMount() {
            perfMark(buildMarkName(page, actionMountEnd));
            perfMeasure(buildMeasureName(page, actionMountStart, actionMountEnd));
        }
    }
    LifecycleTiming.displayName = `withLifecycleTiming(${componentName})`;
    return LifecycleTiming;
};
module.exports = withLifecycleTiming;
//# sourceMappingURL=withLifecycleTiming.js.map

/***/ }),

/***/ 97211:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const kebabCase = __webpack_require__(20249);
const sparrow = 
// eslint-disable-next-line global-require
 true && __webpack_require__(31170);
const logSparrowClick = (event) => {
    let targetDescriptor = event.target.id || event.target.className || event.target.tagName;
    if (event.target.innerText) {
        targetDescriptor += `-${event.target.innerText}`;
    }
    targetDescriptor = kebabCase(targetDescriptor);
    sparrow.trackSparrowEvent('paywall', 'click', {
        dim7: targetDescriptor
    });
};
/**
 * withPaywallSparrowClickTracking
 *
 * This function wraps a Component to create a new Component extending
 * the wrapped children, adding behavior to track Sparrow analytics
 * click events, based on the interacted-with-element's classname and inner text.
 *
 * Utilizes Sparrow (https://github.com/CondeNast/sparrow-pixel) to emit a
 * Unique Sparrow Tracking Event
 *
 * As of the moment this sends through any and all click events that occur
 * within a component enhanced by the PaywallConductor. These click events
 * are tracked numerous times and for any element within the enhanced component.
 *
 * The information for what element was clicked on is sent through as part of
 * the Sparrow payload using the key `dim7`. The value for what element is
 * clicked on is collected as the event target element's class concatenated
 * with the event target element's inner text, modified to be `kebab-case`.
 * Doing so enables us to distinguish when two elements have the same class
 * but different inner text, which is the case for the call to action links
 * for "Sign In" and "Create an Account"
 *
 * Sparrow Events data is sent through with specific variables used by
 * the data teams, those variables and their meanings are as follows:
 *
 * dim7 = Paywall Element interacted with
 *
 * Of special note:
 *
 * 1. This code change will not work for DFP served Consumer Marketing ads.
 *  Those ads exist within iFrames and so the click events do not "bubble up"
 *  to be capture by the component enhanced by this higher order function.
 *
 * 2. This code change will work to capture SOME click events for failsafes
 *  depending on the Ad Blocker used. If your Ad blocker blocks Sparrow,
 *  uBlock Origin for example, this code will not work. If the Ad blocker
 *  does not block Sparrow, Ad Block Pro for example, this code will work.
 *
 *
 * const ComponentWithPaywallSparrowClickTracking =
 *             withPaywallSparrowClickTracking(Component);
 *
 * @param {ReactComponent} Component - The to-be-wrapped component
 *
 * @returns {ReactComponent} Wrapped component
 */
const withPaywallSparrowClickTracking = (Component) => {
    const componentName = Component.displayName || Component.name || 'Component';
    const PaywallSparrowClickTracking = (props) => (React.createElement("div", { onClick: logSparrowClick, role: "none" },
        React.createElement(Component, { ...props })));
    PaywallSparrowClickTracking.displayName = `withPaywallSparrowClickTracking(${componentName})`;
    return PaywallSparrowClickTracking;
};
module.exports = { withPaywallSparrowClickTracking, logSparrowClick };
//# sourceMappingURL=withPaywallSparrowClickTracking.js.map

/***/ }),

/***/ 49670:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const throttle = __webpack_require__(7350);
const React = __webpack_require__(96540);
const isEqual = __webpack_require__(2404);
function scrollDirection(current, previous) {
    const distance = current - previous;
    if (distance < 0)
        return 'up';
    if (distance > 0)
        return 'down';
    return '';
}
/**
 * withScrollingState
 *
 * This higher-order component wraps another and provides it with
 * information describing the scrolling behavior of the client via
 * a named prop.
 *
 * @param {ReactComponent} Component - the wrapped component
 * @param {string} name - the name of the property being passed to the wrapped component
 *
 * @returns {ReactElement} child components
 */
const withScrollingState = (Component, name = 'scrolling') => {
    const componentName = Component.displayName || Component.name;
    class ScrollingState extends React.Component {
        constructor() {
            super();
            this.setScrollState = (event) => {
                const { scrollTop } = event.target.scrollingElement;
                const direction = scrollDirection(scrollTop, this.state.scrollTop);
                const isNewDirection = direction && direction !== this.state.direction;
                this.setState({ scrollTop });
                if (isNewDirection)
                    this.setState({ direction });
            };
            this.render = () => {
                const additionalProps = { [name]: { direction: this.state.direction } };
                return React.createElement(Component, { ...this.props, ...additionalProps });
            };
            this.state = {
                scrollTop: 0
            };
            this.throttledSetScrollState = throttle(this.setScrollState, 150);
        }
        componentDidMount() {
            window.addEventListener('scroll', this.throttledSetScrollState);
        }
        shouldComponentUpdate(nextProps, nextState) {
            return (!isEqual(this.props, nextProps) ||
                this.state.direction !== nextState.direction);
        }
        componentWillUnmount() {
            window.removeEventListener('scroll', this.throttledSetScrollState);
        }
    }
    ScrollingState.displayName = `withScrollingState(${componentName})`;
    return ScrollingState;
};
module.exports = withScrollingState;
//# sourceMappingURL=withScrollingState.js.map

/***/ }),

/***/ 27797:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useContext, useEffect } = React;
const { useIntl } = __webpack_require__(46984);
const { TrackComponentChannel } = __webpack_require__(78788);
const { useContentLang } = __webpack_require__(76573);
const { ConsentContext } = __webpack_require__(85438);
const useLazyLoadComponent = __webpack_require__(70920);
const ConsentBanner = __webpack_require__(83561);
const { PinterestContainer, PinterestLink } = __webpack_require__(26428);
const translations = (__webpack_require__(50134)/* ["default"] */ .A);
/**
 * Inject pinterest embed script into browser
 *
 * @returns {undefined} - undefined
 */
const injectScript = () => {
    if (!document.getElementById('pinterest-embed')) {
        const script = document.createElement('script');
        script.id = 'pinterest-embed';
        script.className = 'pinterest-embed';
        script.src = 'https://assets.pinterest.com/js/pinit.js';
        document.body.appendChild(script);
    }
    else if (window.PinUtils) {
        window.PinUtils.build();
    }
};
/**
 * PinterestEmbed
 *
 * @param {object} props - React props
 * @param {object} [props.attributes] - Optional attributes to add top level i.e. aria-*, role, etc.
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} props.url - Required url for pinterest content.
 *
 */
const PinterestEmbed = ({ attributes, className, url }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'PinterestEmbed'
        });
    }, []);
    const consentContext = useContext(ConsentContext);
    const [lazyLoadElementRef, shouldLoadComponent] = useLazyLoadComponent();
    const { formatMessage } = useIntl();
    const lang = useContentLang();
    const shouldDisplayComponent = consentContext.targeting && shouldLoadComponent;
    useEffect(() => {
        if (shouldDisplayComponent) {
            injectScript();
        }
    }, [shouldDisplayComponent]);
    return (React.createElement(PinterestContainer, { ...attributes, className: className, "aria-label": formatMessage(translations.pinterestEmbedAriaLabelText), ref: lazyLoadElementRef }, shouldDisplayComponent ? (React.createElement(PinterestLink, { href: url, "data-pin-do": "embedPin", "data-pin-width": "large", "data-pin-lang": lang.split('-')[0] }, url)) : (React.createElement(ConsentBanner, { hasConsent: consentContext.targeting, url: url, consentBannerHeader: translations.consentBannerHeader }))));
};
PinterestEmbed.propTypes = {
    attributes: PropTypes.object,
    className: PropTypes.string,
    url: PropTypes.string.isRequired
};
PinterestEmbed.displayName = 'PinterestEmbed';
module.exports = PinterestEmbed;
//# sourceMappingURL=PinterestEmbed.js.map

/***/ }),

/***/ 61784:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(27797);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 26428:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BaseLink } = __webpack_require__(76955);
const { calculateSpacing } = __webpack_require__(26865);
const PinterestContainer = styled.div.withConfig({
    displayName: 'PinterestContainer'
}) `
  align-self: center;
  margin: ${calculateSpacing(5)} auto;
  text-align: center;
  justify-self: center;
`;
const PinterestLink = styled(BaseLink).withConfig({
    displayName: 'PinterestLink'
}) `
  overflow-wrap: break-word;
`;
PinterestLink.defaultProps = {
    colorSecondaryLinkToken: 'colors.interactive.base.light',
    colorStaticLinkToken: 'colors.interactive.base.light',
    hasUnderline: true
};
module.exports = {
    PinterestContainer,
    PinterestLink
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 50134:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    pinterestEmbedAriaLabelText: {
        id: 'PinterestEmbed.AriaLabelText',
        defaultMessage: 'social media post',
        description: 'ARIA label for the pinterest embed container on Pinterest Embed'
    },
    consentBannerHeader: {
        id: 'PinterestEmbed.ConsentBannerHeader',
        defaultMessage: 'Pinterest content',
        description: 'Header for message banner'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 97883:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useContext, useMemo } = React;
const { useIntl } = __webpack_require__(46984);
const { TrackComponentChannel } = __webpack_require__(78788);
const { ConsentContext } = __webpack_require__(85438);
const useLazyLoadComponent = __webpack_require__(70920);
const ConsentBanner = __webpack_require__(83561);
const { RedditEmbedIframe, RedditEmbedContainer } = __webpack_require__(47418);
const { useContentLang } = __webpack_require__(76573);
const translations = (__webpack_require__(12476)/* ["default"] */ .A);
/**
 * RedditEmbed
 *
 * @param {object} props - React props
 * @param {object} [props.attributes] - Optional attributes to add top level i.e. aria-*, role, etc.
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} props.height - Required, the height of the embed initialy
 * @param {boolean} [props.hidePostContent] - Option to hide post content in the embed
 * @param {string} [props.hidePostContentIfEditedAfter] - Option to hide post content if edited after the embed was done, as an ISO 8601 date string
 * @param {boolean} [props.hideUsername] - Option to mask the username of the post
 * @param {boolean} [props.showParentComment] - Option to show the parent comment.
 * @param {boolean} [props.showPostTitle] - Option to show the post's title if it is a comment.
 * @param {string} props.url - Required, the URL link to the Reddit post.
 */
const RedditEmbed = ({ attributes, className, height, hidePostContent, hidePostContentIfEditedAfter, hideUsername, showParentComment, showPostTitle, url }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'RedditEmbed'
        });
    }, []);
    const consentContext = useContext(ConsentContext);
    const [lazyLoadElementRef, shouldLoadComponent] = useLazyLoadComponent();
    const lang = useContentLang();
    const { formatMessage } = useIntl();
    const shouldDisplayComponent = consentContext.targeting && shouldLoadComponent;
    const embedSrc = useMemo(() => {
        const embedUrl = new URL(url);
        embedUrl.hostname = 'embed.reddit.com';
        embedUrl.searchParams.set('embed', 'true');
        embedUrl.searchParams.set('ref_source', 'embed');
        embedUrl.searchParams.set('ref', 'share');
        embedUrl.searchParams.set('utm_medium', 'widgets');
        embedUrl.searchParams.set('utm_source', 'embedv2');
        embedUrl.searchParams.set('utm_term', 23);
        if (embedUrl.pathname.match('/comment/')) {
            embedUrl.searchParams.set('utm_name', 'comment_embed');
        }
        else {
            embedUrl.searchParams.set('utm_name', 'post_embed');
        }
        // We can't set the embed_host_url server side.
        if (true) {
            embedUrl.searchParams.set('embed_host_url', window.location.toString());
        }
        if (hideUsername) {
            embedUrl.searchParams.set('showusername', 'false');
        }
        if (hidePostContentIfEditedAfter) {
            embedUrl.searchParams.set('showedits', 'false');
            embedUrl.searchParams.set('created', hidePostContentIfEditedAfter);
        }
        if (hidePostContent) {
            embedUrl.searchParams.set('showmedia', 'false');
        }
        if (showParentComment) {
            embedUrl.searchParams.set('context', '1');
            embedUrl.searchParams.set('depth', '2');
        }
        if (showPostTitle) {
            embedUrl.searchParams.set('showtitle', 'true');
        }
        embedUrl.searchParams.set('locale', lang);
        return embedUrl.toString();
    }, [
        hidePostContent,
        hidePostContentIfEditedAfter,
        hideUsername,
        lang,
        showParentComment,
        showPostTitle,
        url
    ]);
    return (React.createElement(RedditEmbedContainer, { "aria-label": formatMessage(translations.redditEmbedAriaLabelText), className: className, ref: lazyLoadElementRef }, shouldDisplayComponent ? (React.createElement(RedditEmbedIframe, { className: "reddit-embed", src: embedSrc, style: { height: `${height}px` }, ...attributes })) : (React.createElement(ConsentBanner, { hasConsent: consentContext.targeting, url: url, consentBannerHeader: translations.consentBannerHeader }))));
};
RedditEmbed.propTypes = {
    attributes: PropTypes.object,
    className: PropTypes.string,
    height: PropTypes.string.isRequired,
    hidePostContent: PropTypes.bool,
    hidePostContentIfEditedAfter: PropTypes.string,
    hideUsername: PropTypes.bool,
    showParentComment: PropTypes.bool,
    showPostTitle: PropTypes.bool,
    url: PropTypes.string.isRequired
};
RedditEmbed.displayName = 'RedditEmbed';
module.exports = RedditEmbed;
//# sourceMappingURL=RedditEmbed.js.map

/***/ }),

/***/ 47418:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing } = __webpack_require__(26865);
const RedditEmbedIframe = styled.iframe.withConfig({
    displayName: 'RedditEmbedIframe'
}) `
  display: block;
  border: 0;
  border-radius: 8px;
  width: 600px;
  max-width: 100%;
  overflow: hidden;
`;
const RedditEmbedContainer = styled.div.withConfig({
    displayName: 'RedditEmbedContainer'
}) `
  margin: ${calculateSpacing(5)} auto;

  .reddit-embed {
    margin-right: auto;
    margin-left: auto;
  }
`;
module.exports = {
    RedditEmbedIframe,
    RedditEmbedContainer
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 12476:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    redditEmbedAriaLabelText: {
        id: 'RedditEmbed.AriaLabelText',
        defaultMessage: 'social media post',
        description: 'ARIA label for the reddit embed container on Reddit Embed'
    },
    consentBannerHeader: {
        id: 'RedditEmbed.ConsentBannerHeader',
        defaultMessage: 'Reddit content',
        description: 'Header for message banner'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 37134:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const SectionTitle = __webpack_require__(24277);
const Clamp = __webpack_require__(94337);
const { TrackComponentChannel } = __webpack_require__(78788);
const { googleAnalytics, componentTracking } = __webpack_require__(90090);
const { CNCouponsWrapper, CNCouponsSectionTitle, CNCouponsGrid, CNCouponsGridItems, CNCouponsContent, CNCouponsAnchorText, CNCouponsOfferDek, CouponResponsiveImage, CouponGrid, CouponLogo } = __webpack_require__(28363);
const CoupoonGridItem = ({ items, shouldEnableBundleComponentAnalytics, trackingNamespace }) => {
    // TO-DO: Remove this slice when the backend API is ready to provide only 6 items
    return items.slice(0, 6).map((val, i) => {
        const onClickHandler = (url, name, position) => {
            googleAnalytics.emitGoogleTrackingEvent('SavingsUnitedCoupon-click', {
                'coupon.url': url,
                'coupon.name': name,
                'coupon.position': position
            });
        };
        const analyticsDataAttributeCNCoupons = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNamespace, i);
        return (React.createElement(CNCouponsGridItems, { "aria-label": val.anchor_text, href: val.url, name: val.name, key: i, title: val.anchor_text, onClick: () => onClickHandler(val.url, val.name, i + 1), ...analyticsDataAttributeCNCoupons },
            React.createElement(CouponResponsiveImage, { href: val.url, name: val.anchor_text },
                React.createElement(CouponLogo, { alt: val.logo, src: val.logo })),
            React.createElement(CNCouponsContent, null,
                React.createElement(CNCouponsAnchorText, { dangerouslySetInnerHTML: { __html: val.anchor_text } }),
                React.createElement(Clamp, { lines: 2 },
                    React.createElement(CNCouponsOfferDek, { dangerouslySetInnerHTML: { __html: val.best_offer_text }, "data-testid": "CouponItemDek" })))));
    });
};
/**
 * Savings United Coupons component
 *
 * @param {object} props - React props
 * @param {string} [props.heading] - Optional prop to display heading
 * @param {Array} [props.items] -  prop object savings united coupons data
 * @param {string} [props.sectionTitleVariation] - Optional variation of SectionTitle to use
 * @param {boolean} [props.shouldDisplaySectionTitle] - Optional to display sectionTitleVariation
 * @param {boolean} [props.isTitleLink] - Optional to have link to section title
 * @param {string} [props.linkToCoupon] - Optional coupon link to title
 * @param {boolean} props.shouldEnableBundleComponentAnalytics - feature flag to append data-section-title attribute for analytics
 * @param {string} [props.trackingNamespace] - Optional override the base namespace of data-section-title for component tracking
 * @param {string} [props.dividerColor] - Optional prop to get divider color for article page from copilot
 *
 * @returns {ReactElement} <div>
 */
const CNCoupons = ({ dividerColor, heading = 'Top Discounts', items, sectionTitleVariation = 'LineAboveLineBelowTextCenter', shouldDisplaySectionTitle = false, isTitleLink = false, linkToCoupon, shouldEnableBundleComponentAnalytics, trackingNamespace }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'CNCoupons'
        });
    }, []);
    const title = isTitleLink
        ? `<a href="${linkToCoupon}">${heading}</a>`
        : heading;
    return (React.createElement(CNCouponsWrapper, null,
        React.createElement(CouponGrid, null,
            shouldDisplaySectionTitle && (React.createElement(CNCouponsSectionTitle, { as: SectionTitle[sectionTitleVariation], dangerousHed: title, dividerColor: dividerColor })),
            items.length >= 1 && (React.createElement(CNCouponsGrid, null,
                React.createElement(CoupoonGridItem, { items: items, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, trackingNamespace: trackingNamespace }))))));
};
CNCoupons.propTypes = {
    dividerColor: PropTypes.string,
    heading: PropTypes.string,
    isTitleLink: PropTypes.bool,
    items: PropTypes.array,
    linkToCoupon: PropTypes.string,
    sectionTitleVariation: PropTypes.oneOf(['LineAboveLineBelowTextCenter']),
    shouldDisplaySectionTitle: PropTypes.bool,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    trackingNamespace: PropTypes.string
};
CNCoupons.displayName = 'CNCoupons';
module.exports = CNCoupons;
//# sourceMappingURL=SavingsUnitedCoupons.js.map

/***/ }),

/***/ 65153:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const CNCoupons = __webpack_require__(37134);
module.exports = asConfiguredComponent(CNCoupons, 'CNCoupons');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 28363:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { cssVariablesGrid, applyCustomDividerColor } = __webpack_require__(1123);
const { BREAKPOINTS } = __webpack_require__(96472);
const { calculateSpacing, getColorToken, getTypographyStyles, minScreen, maxScreen } = __webpack_require__(26865);
const CNCouponsWrapper = styled.div.withConfig({
    displayName: 'CNCouponsWrapper'
}) `
  ${cssVariablesGrid()}
  display: grid;
  column-gap: var(--grid-gap);
  margin: 0 auto;
  margin-bottom: ${calculateSpacing(3)};
  padding-right: var(--grid-margin);
  padding-left: var(--grid-margin);
  width: 100%;
  max-width: 1600px;
  row-gap: var(--grid-gap);
`;
const CouponGrid = styled.div.withConfig({
    displayName: 'CouponGrid'
}) `
  grid-column: 1 / -1;
`;
const CouponResponsiveImage = styled.div.withConfig({
    displayName: 'CouponResponsiveImage'
}) `
  display: flex;
  justify-content: center;
  padding: ${calculateSpacing(3)};
  width: 100%;
  text-align: center;
  ${maxScreen(`calc(${BREAKPOINTS.lg} - 1px)`)} {
    padding: ${calculateSpacing(1)};
  }
  ${minScreen(BREAKPOINTS.lg)} {
    background-color: ${getColorToken('colors.consumption.body.special.bg-card')};
    height: ${calculateSpacing(16)};
  }
`;
const CNCouponsGrid = styled.div.withConfig({
    displayName: 'CNCouponsGrid'
}) `
  display: grid;
  ${cssVariablesGrid()}
  ${maxScreen(`calc(${BREAKPOINTS.lg} - 1px)`)} {
    --grid-gap: ${calculateSpacing(1)};
  }
  row-gap: var(--grid-gap);
  column-gap: var(--grid-gap);
  ${minScreen(BREAKPOINTS.lg)} {
    grid-template-columns: repeat(6, 2fr);
  }
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-bulletin-secondary')}
`;
const CNCouponsSectionTitle = styled.div.withConfig({
    displayName: 'CNCouponsSectionTitle'
}) `
  ${({ dividerColor }) => dividerColor &&
    css `
      ${applyCustomDividerColor(dividerColor)};
    `}
  margin-bottom: ${calculateSpacing(4)};
  ${maxScreen(`calc(${BREAKPOINTS.lg} - 1px)`)} {
    margin-bottom: ${calculateSpacing(2)};
  }
`;
const CNCouponsGridItems = styled.a.withConfig({
    displayName: 'CNCouponsGridItems'
}) `
  display: grid;
  grid-template-rows: ${calculateSpacing(17)} auto;
  text-decoration: none;
  ${maxScreen(`calc(${BREAKPOINTS.lg} - 1px)`)} {
    grid-template-columns: ${calculateSpacing(14)} auto;
    grid-template-rows: ${calculateSpacing(10)} auto;

    &:not(:last-child) {
      border-bottom: 2px solid
        ${getColorToken('colors.discovery.body.white.divider')};
    }
  }
  ${maxScreen(`calc(${BREAKPOINTS.md} - 1px)`)} {
    grid-template-columns: ${calculateSpacing(12)} auto;
    grid-template-rows: ${calculateSpacing(12)} auto;
  }
`;
const CNCouponsContent = styled.div.withConfig({
    displayName: 'CNCouponsContent'
}) `
  ${maxScreen(`calc(${BREAKPOINTS.lg} - 1px)`)} {
    margin-top: auto;
    margin-bottom: auto;
  }
`;
const CNCouponsAnchorText = styled.span.withConfig({
    displayName: 'CNCouponsAnchorText'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-primary')}
  color: ${getColorToken('colors.discovery.body.white.context-signature')};
`;
const CNCouponsOfferDek = styled.p.withConfig({
    displayName: 'CNCouponsOfferDek'
}) `
  margin-top: ${calculateSpacing(1)};
  cursor: pointer;
  color: ${getColorToken('colors.discovery.body.white.heading')};
  ${maxScreen(`calc(${BREAKPOINTS.lg} - 1px)`)} {
    margin-bottom: 0;
  }
  ${minScreen(BREAKPOINTS.lg)} {
    display: box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
`;
const CouponLogo = styled.img.withConfig({
    displayName: 'CouponLogo'
}) ``;
module.exports = {
    CNCouponsSectionTitle,
    CNCouponsGrid,
    CNCouponsWrapper,
    CNCouponsGridItems,
    CNCouponsContent,
    CNCouponsAnchorText,
    CNCouponsOfferDek,
    CouponResponsiveImage,
    CouponGrid,
    CouponLogo
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 50295:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.BestNewMusicArrows = void 0;
const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { SvgWrapper, SvgStyle } = __webpack_require__(62096);
/**
 * BestNewMusicArrows component
 *
 * @param {object} props - React props
 * @param {string} [props.theme] - - To check theme is inverted or not.
 * @param {boolean} [props.isBestBoth] - - To check is both music release and reissue property is true then change color.
 * @param {boolean} [props.isBest] - - To check is both music release or reissue property is true then change color.
 *
 */
const BestNewMusicArrows = (props) => {
    return (React.createElement(SvgWrapper, { theme: props.theme, isBestBoth: props.isBestBoth, isBest: props.isBest },
        React.createElement(SvgStyle, { x: "0px", y: "0px", viewBox: "0 0 80 40" },
            React.createElement("g", null,
                React.createElement("polyline", { points: "25.4,14.7 33.9,14.7 33.9,39.8 46.3,39.8 46.3,14.7 54.8,14.7 40.1,0 25.4,14.7   " }),
                React.createElement("polyline", { points: "50.6,40 80,40 65.2,25.4 50.6,40    " }),
                React.createElement("polyline", { points: "0,40 29.4,40 14.7,25.4 0,40    " })))));
};
exports.BestNewMusicArrows = BestNewMusicArrows;
exports.BestNewMusicArrows.propTypes = {
    isBest: PropTypes.bool,
    isBestBoth: PropTypes.bool,
    theme: PropTypes.string
};
//# sourceMappingURL=BestNewMusicArrows.js.map

/***/ }),

/***/ 71145:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const PropTypes = __webpack_require__(5556);
const { BestNewMusicArrows } = __webpack_require__(50295);
const translations = (__webpack_require__(63314)/* ["default"] */ .A);
const PaletteProvider = __webpack_require__(49235);
const { TrackComponentChannel } = __webpack_require__(78788);
const { BestNewMusicText, Rating, ScoreBoxWrapper, ScoreCircle } = __webpack_require__(62096);
/**
 * ScoreBox component
 *
 * @param {number} [props.rating] - rating to display
 * @param {boolean} [props.isBestNewMusic] - optional  prop to check is Best New Music
 * @param {boolean} [props.isBestNewReissue] - optional  prop to check is Best New Reissue
 * @param {boolean} [props.isTrackReview] - to check review is Tracks or not
 * @param {string} [props.palette] - Standard or inverted, standard by default
 *
 * @returns {ReactElement} <div>
 */
const ScoreBox = ({ rating, isBestNewMusic = false, isBestNewReissue = false, palette = 'standard', isTrackReview }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ScoreBox'
        });
    }, []);
    const { formatMessage } = useIntl();
    const isTrack = isTrackReview && isBestNewMusic;
    if (isTrackReview && !isBestNewMusic) {
        return null;
    }
    const ratingDisplay = rating < 10 ? Number(rating).toFixed(1) : rating;
    const isBest = isBestNewMusic || isBestNewReissue;
    const isBestBoth = isBestNewMusic && isBestNewReissue;
    return (React.createElement(PaletteProvider, { palette: palette },
        React.createElement(ScoreBoxWrapper, null,
            isBest && (React.createElement(BestNewMusicArrows, { isBestBoth: isBestBoth, isBest: isBest })),
            !isTrack && (React.createElement(ScoreCircle, { isBest: isBest, isBestBoth: isBestBoth },
                React.createElement(Rating, { isBest: isBest, isBestBoth: isBestBoth }, ratingDisplay))),
            isBest && (React.createElement(BestNewMusicText, { isBestBoth: isBestBoth, isBest: isBest },
                !isTrack && isBestNewMusic && (React.createElement("div", null,
                    " ",
                    formatMessage(translations.BestNewMusic),
                    " ")),
                !isTrack && isBestNewReissue && (React.createElement("div", null,
                    " ",
                    formatMessage(translations.BestNewReissue))),
                isTrack && React.createElement("div", null,
                    " ",
                    formatMessage(translations.BestNewTrack)))))));
};
ScoreBox.propTypes = {
    isBestNewMusic: PropTypes.bool,
    isBestNewReissue: PropTypes.bool,
    isTrackReview: PropTypes.bool,
    palette: PropTypes.oneOf(['standard', 'inverted']),
    rating: PropTypes.number
};
module.exports = ScoreBox;
//# sourceMappingURL=ScoreBox.js.map

/***/ }),

/***/ 55252:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(71145);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 62096:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { BaseText } = __webpack_require__(76955);
const { calculateSpacing, getColorToken, getTypographyStyles } = __webpack_require__(26865);
const ScoreBoxWrapper = styled.div.withConfig({
    displayName: 'ScoreBoxWrapper'
}) `
  position: relative;
  width: 130px;
`;
const ScoreCircle = styled.div.withConfig({ displayName: 'ScoreCircle' }) `
  position: relative;
  margin-bottom: ${calculateSpacing(2)};
  border: 7px solid
    ${({ isBest }) => !isBest
    ? getColorToken('colors.consumption.lead.standard.context-signature')
    : ({ theme }) => theme.palette === 'inverted'
        ? getColorToken('colors.consumption.lead.inverted.accent')
        : getColorToken('colors.consumption.lead.standard.accent')};
  border-radius: 50%;
  padding-bottom: ${calculateSpacing(2)};
  width: 134px;
  height: 134px;
  text-align: center;
  color: ${({ isBest }) => !isBest
    ? getColorToken('colors.consumption.lead.standard.context-signature')
    : ({ theme }) => theme.palette === 'inverted'
        ? getColorToken('colors.consumption.lead.inverted.accent')
        : getColorToken('colors.consumption.lead.standard.accent')};
`;
const Rating = styled(BaseText).withConfig({ displayName: 'Rating' }) `
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  color: ${({ isBest }) => !isBest
    ? getColorToken('colors.consumption.lead.standard.context-signature')
    : ({ theme }) => theme.palette === 'inverted'
        ? getColorToken('colors.consumption.lead.inverted.accent')
        : getColorToken('colors.consumption.lead.standard.accent')};
  ${getTypographyStyles('typography.definitions.globalEditorial.numerical-large')};
`;
const BestNewMusicText = styled(BaseText).withConfig({
    displayName: 'BestNewMusicText'
}) `
  ${getTypographyStyles('typography.definitions.globalEditorial.context-primary')};
  width: 134px;
  text-align: center;
  color: ${({ isBest }) => !isBest
    ? getColorToken('colors.consumption.lead.standard.context-signature')
    : ({ theme }) => theme.palette === 'inverted'
        ? getColorToken('colors.consumption.lead.inverted.accent')
        : getColorToken('colors.consumption.lead.standard.accent')};
`;
const SvgStyle = styled.svg.withConfig({ displayName: 'SvgStyle' }) `
  margin-bottom: ${calculateSpacing(2, 'px')};
  margin-left: ${calculateSpacing(3, 'px')};
  width: 86px;
  height: 26px;
`;
const SvgWrapper = styled.div.withConfig({
    displayName: 'SvgWrapper'
}) `
  svg {
    fill: ${({ isBest }) => !isBest
    ? getColorToken('colors.consumption.lead.standard.context-signature')
    : ({ theme }) => theme.palette === 'inverted'
        ? getColorToken('colors.consumption.lead.inverted.accent')
        : getColorToken('colors.consumption.lead.standard.accent')};
  }
  line-height: 0em;
`;
module.exports = {
    BestNewMusicText,
    Rating,
    ScoreBoxWrapper,
    ScoreCircle,
    SvgStyle,
    SvgWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 63314:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    BestNewMusic: {
        id: 'ScoreBox.BestNewMusic',
        defaultMessage: 'Best New Music',
        description: 'Best New Music'
    },
    BestNewReissue: {
        id: 'ScoreBox.BestNewReissue',
        defaultMessage: 'Best New Reissue',
        description: 'Best New Reissue'
    },
    BestNewTrack: {
        id: 'ScoreBox.BestNewTrack',
        defaultMessage: 'Best New Track',
        description: 'Best New Track'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 24409:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * SectionEmbed component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {ReactElement|string} props.children - Required content for feature.
 * @param {boolean} [props.hasDropcap] - Optional flag whether section has dropcap
 *
 * @returns {ReactElement} <figure>
 */
const SectionEmbed = ({ className, children, hasDropcap }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SectionEmbed'
        });
    }, []);
    return (React.createElement("section", { className: classnames('section-embed', {
            'section-embed--with-dropcap': hasDropcap
        }, className) }, children));
};
SectionEmbed.propTypes = {
    children: PropTypes.node.isRequired,
    className: PropTypes.string,
    hasDropcap: PropTypes.bool
};
module.exports = SectionEmbed;
//# sourceMappingURL=SectionEmbed.js.map

/***/ }),

/***/ 96505:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(24409);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 39362:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useInView } = __webpack_require__(26855);
const { asConfiguredComponent } = __webpack_require__(12892);
const { googleAnalytics } = __webpack_require__(90090);
const Bylines = __webpack_require__(52540);
const ResponsiveAsset = __webpack_require__(73275);
const { RelatedListSummaryItem, RelatedListItem } = __webpack_require__(5662);
const trackingStoryClickEvent = (url) => () => {
    googleAnalytics.emitGoogleTrackingEvent('recirc-related_inline-click', {
        'gtm.elementUrl': url
    });
};
/**
 * SidebarEmbed component
 *
 * @param {object} props - React props
 * @param {object} [props.attributes] - Optional attributes to add top level i.e. aria-*, role, etc.
 * @param {string|ReactElement} props.children - The quote content to display.
 * @param {string} [props.className] - Optional top-level class to add.
 *
 * @returns {ReactElement} <aside>
 */
const SidebarArticle = (props) => {
    const [ref, inView] = useInView({
        rootMargin: '500px'
    });
    const [hasFiredImpression, setFiredImpression] = React.useState(false);
    const trackingImpressionEvent = () => {
        googleAnalytics.emitUniqueGoogleTrackingEvent('recirc-most_popular-impression');
    };
    React.useEffect(() => {
        if (inView && !hasFiredImpression) {
            trackingImpressionEvent();
            setFiredImpression(true);
        }
    }, [inView, hasFiredImpression]);
    const { bylineVariation, contributors, dangerousHed, image, rubric, shouldLinkByline, url } = props;
    return (React.createElement(RelatedListItem, { ref: ref, "data-testid": "SidebarArticleRelatedListItem" },
        React.createElement(RelatedListSummaryItem, { bylineVariation: bylineVariation, clickHandler: trackingStoryClickEvent(url), contentType: "article", contributors: contributors, dangerousHed: dangerousHed, hasRule: false, hedTag: "div", image: image, maxHedLines: 3, rubric: rubric, shouldLinkByline: shouldLinkByline, url: url })));
};
SidebarArticle.propTypes = {
    bylineVariation: PropTypes.string,
    contributors: PropTypes.shape(Bylines.propTypes.contributors),
    dangerousHed: PropTypes.string,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    rubric: PropTypes.shape({
        url: PropTypes.string,
        name: PropTypes.string
    }),
    shouldLinkByline: PropTypes.bool,
    url: PropTypes.string
};
SidebarArticle.displayName = 'SidebarArticle';
module.exports = asConfiguredComponent(SidebarArticle, 'SidebarArticle');
//# sourceMappingURL=SidebarArticle.js.map

/***/ }),

/***/ 38785:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { asConfiguredComponent } = __webpack_require__(12892);
const { Sidebar } = __webpack_require__(37022);
const { TrackComponentChannel } = __webpack_require__(78788);
const { enhanceChildrenForUpc } = __webpack_require__(54495);
/**
 * SidebarEmbed component
 *
 * @param {object} props - React props
 * @param {object} [props.attributes] - Optional attributes to add top level i.e. aria-*, role, etc.
 * @param {string|ReactElement} props.children - The quote content to display.
 * @param {string} [props.className] - Optional top-level class to add.
 * @param {boolean} [props.hasBorderBottom] - Optional to add borderBottom styles
 *
 * @returns {ReactElement} <aside>
 */
const SidebarEmbed = ({ attributes, children, className, hasBorderBottom }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SidebarEmbed'
        });
    }, []);
    const classes = classnames(className);
    // Clone children and pass hideLandscapeLayout prop only when UPC is enabled
    const { enhancedChildren, hasUnifiedProductCard } = enhanceChildrenForUpc(children);
    return (React.createElement(Sidebar, { as: "aside", ...attributes, className: classes, "data-testid": "SidebarEmbed", hasBorderBottom: hasBorderBottom, hasUnifiedProductCard: hasUnifiedProductCard }, enhancedChildren));
};
SidebarEmbed.propTypes = {
    attributes: PropTypes.object,
    children: PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.node),
        PropTypes.node
    ]).isRequired,
    className: PropTypes.string,
    hasBorderBottom: PropTypes.bool
};
SidebarEmbed.displayName = 'SidebarEmbed';
module.exports = asConfiguredComponent(SidebarEmbed, 'SidebarEmbed');
//# sourceMappingURL=SidebarEmbed.js.map

/***/ }),

/***/ 36382:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing, getColorToken, getDecoration } = __webpack_require__(26865);
const { BaseText } = __webpack_require__(76955);
const SidebarHeading = styled(BaseText)
    .withConfig({
    displayName: 'SidebarHeading'
})
    .attrs(({ 'aria-level': ariaLevel = '2', role = 'heading', typeIdentity = 'typography.definitions.discovery.subhed-section-tertiary' }) => ({
    'aria-level': ariaLevel,
    role,
    typeIdentity
})) `
  margin: 0;
  border-width: ${({ theme }) => getDecoration(theme, 'dividerWidth')} 0;
  border-style: solid;
  border-color: ${({ theme }) => getColorToken(theme, 'colors.consumption.body.standard.display-texture')};
  padding: ${calculateSpacing(2)} 0;
`;
SidebarHeading.displayName = 'SidebarHeading';
module.exports = SidebarHeading;
//# sourceMappingURL=SidebarHeading.js.map

/***/ }),

/***/ 37022:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing, getColorToken, getDecoration } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { BlockquoteEmbedWrapper } = __webpack_require__(35103);
const { ContributorEmbedWrapper } = __webpack_require__(16507);
const Sidebar = styled.div.withConfig({ displayName: 'Sidebar' }) `
  border-bottom: 1px solid
    ${({ theme }) => getColorToken(theme, 'colors.consumption.body.standard.divider')};

  ${({ hasBorderBottom, theme }) => hasBorderBottom &&
    `
    border-bottom: ${getDecoration(theme, 'sectionOrnamentWidth')} solid  ${getColorToken(theme, 'colors.consumption.body.standard.display-texture')};
  `}

  > :first-child:not([aria-level='2']) {
    border-width: ${({ theme }) => getDecoration(theme, 'sectionOrnamentWidth')}
      0 0;
    border-style: solid;
    border-color: ${({ theme }) => getColorToken(theme, 'colors.consumption.body.standard.display-texture')};
    padding-top: ${calculateSpacing(2)};
  }

  > .asset-embed:first-child {
    border-top: none;
    padding-top: 0;
  }

  > :last-child {
    border-bottom: none;

    > :last-child {
      border-bottom: none;
    }
  }

  .product-embed,
  .gallery-embed {
    margin: 0;
  }

  @media (min-width: ${BREAKPOINTS.lg}) {
    div.external-link-embed.external-link-embed--inline {
      float: none;
    }
  }

  span.pullquote-embed__content {
    display: block;
  }

  ${ContributorEmbedWrapper}:last-child,
  div.external-link-embed.external-link-embed--inline:last-child,
  span.pullquote-embed__content:last-child,
  ${BlockquoteEmbedWrapper}:last-child,
    ${BlockquoteEmbedWrapper}
    + p:last-child {
    padding-bottom: ${calculateSpacing(2)};
  }

  @media (min-width: ${BREAKPOINTS.md}) {
    ${({ hasUnifiedProductCard }) => !hasUnifiedProductCard &&
    `
      && {
        p:first-of-type:not(:first-child) {
          margin-top: revert;
        }
      }
    `}
  }
`;
module.exports = {
    Sidebar
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 81591:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BaseLink } = __webpack_require__(76955);
const SignOutButtonWrapper = styled(BaseLink).withConfig({
    displayName: 'SignOutButtonWrapper'
}) `
  display: block;
  background-color: initial;
  width: 100%;
  text-align: inherit;
`;
module.exports = {
    SignOutButtonWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 77967:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { useEffect } = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
function DelayedQueue() {
    const queue = window.snowplowQueue || [];
    this.push = function (fn) {
        fn();
    };
    window.snowplowQueue = this;
    while (queue.length) {
        queue.shift()();
    }
}
// window.snowplowInitQueue is available for priority events that must be called before others such as newTracker and addGlobalContexts
function DelayedInitQueue() {
    const queue = window.snowplowInitQueue || [];
    this.push = function (fn) {
        fn();
    };
    window.snowplowInitQueue = this;
    while (queue.length) {
        queue.shift()();
    }
}
const injectScript = (environment = 'production', brand = '', triggerBrands = [], useBrandLogic = false) => {
    const SNOWPLOW_NAMESPACE = 'snowplowCN';
    const getSnowplowScriptUrl = () => {
        let scriptName = 'p77xzrbz9z.js';
        if (useBrandLogic && triggerBrands.includes(brand.toLowerCase())) {
            scriptName = 'p77xzrbz9c.js';
        }
        const baseUrl = environment === 'staging'
            ? 'https://globalservices-stag.conde.digital/'
            : 'https://globalservices.conde.digital/';
        return `${baseUrl}${scriptName}`;
    };
    const scriptUrl = getSnowplowScriptUrl();
    (function (p, l, o, w, i, n, g) {
        if (!p[i]) {
            p.GlobalSnowplowNamespace = p.GlobalSnowplowNamespace || [];
            p.GlobalSnowplowNamespace.push(i);
            p[i] = function () {
                // eslint-disable-next-line prefer-rest-params
                (p[i].q = p[i].q || []).push(arguments);
            };
            // eslint-disable-next-line no-param-reassign
            p[i].q = p[i].q || [];
            // eslint-disable-next-line no-param-reassign
            n = l.createElement(o);
            // eslint-disable-next-line no-param-reassign
            g = l.getElementsByTagName(o)[0];
            n.async = 1;
            n.src = w;
            g.parentNode.insertBefore(n, g);
        }
    })(window, document, 'script', scriptUrl, SNOWPLOW_NAMESPACE);
    window.snowplowCN(() => {
        new DelayedInitQueue(); // queued functions that must be called first, if present
        new DelayedQueue();
    });
};
const SnowplowScript = ({ brand, testingBrand }) => {
    const canLoad =  true &&
        window.location.search.indexOf('no_snowplow') < 0;
    useEffect(() => {
        if (canLoad) {
            const dataLayer = window?.dataLayer.find((item) => item.event === 'data-layer-loaded');
            const env = dataLayer?.site?.env;
            injectScript(env, brand, testingBrand, env === 'staging');
        }
    }, [canLoad, brand, testingBrand]);
    return null;
};
SnowplowScript.propTypes = {
    brand: PropTypes.string.isRequired,
    testingBrand: PropTypes.any.isRequired
};
module.exports = SnowplowScript;
//# sourceMappingURL=SnowplowScript.js.map

/***/ }),

/***/ 1241:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(77967);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 84784:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { TrackComponentChannel } = __webpack_require__(78788);
const TOCAccordion = __webpack_require__(82516);
const { TableOfContentWrapper } = __webpack_require__(86316);
const { trackNavigationEvent } = __webpack_require__(14307);
const parseChildren = (children) => {
    if (!children || children.length < 2)
        return { label: null, content: null };
    const header = children[0]?.props.children;
    const content = children[1]?.props.children;
    return {
        label: header?.props?.children || null,
        content: content?.props?.children || null
    };
};
/**
 * A callout component that represents table of contents for the page for users
 * to easily navigate on the page
 *
 * @param {ReactElement} props.children - The children of this element
 * @returns {ReactElement} - The element, wrapped in a div
 */
const TableOfContent = ({ attrs = {}, children }) => {
    const [isCollapsible] = React.useState(attrs.isCollapsible === 'true');
    React.useEffect(() => {
        const removeTargetAttribute = (e) => {
            if (e.target.tagName === 'A' &&
                e.target.closest('.table-of-content') &&
                e.target.getAttribute('target') === '_blank') {
                e.target.removeAttribute('target');
            }
        };
        document.addEventListener('click', removeTargetAttribute);
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'TableOfContent'
        });
        return () => {
            document.removeEventListener('click', removeTargetAttribute);
        };
    }, []);
    const { label, content } = parseChildren(children);
    if (!content)
        return null;
    const hasDataLayer =  true && window.dataLayer;
    const contentData = hasDataLayer && window.dataLayer?.[0]?.content;
    const contentTitle = contentData?.contentTitle;
    const contentId = contentData?.contentId;
    const contentType = contentData?.contentType;
    const tocSnowplowEvent = {
        subject: 'wrapper_table_of_content',
        label,
        items: [
            {
                content_title: contentTitle,
                content_id: contentId,
                content_type: contentType,
                content_url:  true && window.location.href
            }
        ]
    };
    const handleAnchorClick = (e, index, totalLinks) => {
        const eventData = {
            type: 'click',
            subject: 'wrapper_table_of_content',
            label: e.target.innerText,
            items: [
                {
                    content_title: contentTitle,
                    content_id: contentId,
                    content_type: contentType,
                    content_url:  true && window.location.href
                }
            ],
            index,
            total_index: totalLinks
        };
        trackNavigationEvent(eventData);
    };
    /* eslint-disable react/no-children-prop */
    return (React.createElement(TableOfContentWrapper, { className: "table-of-content" },
        React.createElement(TOCAccordion, { isInitiallyOpen: true, isCollapsible: isCollapsible, data: [
                {
                    label,
                    content
                }
            ], snowplowEventData: tocSnowplowEvent, handleContentItemClick: handleAnchorClick })));
    /* eslint-enable react/no-children-prop */
};
TableOfContent.propTypes = {
    attrs: PropTypes.object,
    children: PropTypes.node.isRequired
};
module.exports = TableOfContent;
//# sourceMappingURL=TableOfContent.js.map

/***/ }),

/***/ 86316:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { getTypographyStyles, getColorToken, getLinkStyles, calculateSpacing } = __webpack_require__(26865);
const { AccordionItemContainerLabel, AccordionItemContainerContent, AccordionItemContainer, AccordionItemWrapper } = __webpack_require__(76080);
const TableOfContentWrapper = styled.div.withConfig({
    displayName: 'TableOfContentWrapper'
}) `
  ${AccordionItemWrapper} {
    border: none;
  }
  ${AccordionItemContainer} {
    border-top: 1px solid
      ${getColorToken('colors.consumption.body.standard.divider')};
    padding: ${calculateSpacing(2.5)} 0;

    .icon-large-chevron {
      stroke: ${getColorToken('colors.interactive.base.black')};
    }
  }
  ${AccordionItemContainerLabel} {
    color: ${getColorToken('colors.discovery.body.white.heading')};
  }
  ${AccordionItemContainerContent} {
    padding: 0;

    ${getTypographyStyles('typography.definitions.consumptionEditorial.body-core')}

    & > div {
      margin: ${calculateSpacing(1)} ${calculateSpacing(2)}
        ${calculateSpacing(3)} ${calculateSpacing(2)};
    }

    a:not(.button) {
      ${({ theme }) => getLinkStyles(theme, 'colors.consumption.body.standard.link', 'colors.consumption.body.standard.link-hover')}
    }
  }

  &&& {
    ${AccordionItemContainerContent}

    > :first-child {
      margin-block-start: 0;
    }
  }
`;
module.exports = {
    TableOfContentWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 95348:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { TrackComponentChannel } = __webpack_require__(78788);
const Navigation = __webpack_require__(54790);
const { TabsButtonPrimary, TabsPanel, TabsWrapper, TabsContentWrapper } = __webpack_require__(66042);
/**
 * Tabs component
 *
 * @param {object} props - React props
 * @param {string} [props.buttonLabel] - Optional label for a view more button link
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.defaultTab] - Optional default active tab
 * @param {boolean} [props.hasBorder] - Optional
 * @param {Element} [props.marquee] - Optional renders passed in component
 * @param {string} [props.shouldChangeTabFromHash] - Optional parameter to set the active tab on load and on URL hash change
 * @param {boolean} [props.shouldUseRoleForLabelWrapper] - Optional boolean for adding the role presentation to the label wrapper
 * @param {boolean} [props.shouldUseTabRoleForNavigation] - Optional boolean for adding the role tablist to the navigation instead of wrapper
 * @param {boolean} [props.showButton] - Optional boolean for showing button
 * @param {Array} props.tabContent - Content for each tab
 * @param {string} [props.tabContentTextAlignment] - Optional
 * @param {string} [props.tabLabelAlignment] - Optional
 * @param {string} [props.tabLabelActiveClassName] - Optional
 * @param {string} [props.tabLabelInactiveClassName] - Optional
 * @param {Array} props.tabLabels - Labels for each tab
 * @param {boolean} [props.isPreventDefault] - Optional passes the boolean value to preventDefault
 * @returns {ReactElement} <div>
 */
function Tabs({ className, marquee, tabContent, tabLabels, buttonLabel = 'View All', defaultTab = 0, hasBorder = true, isPreventDefault = true, shouldChangeTabFromHash = false, shouldUseRoleForLabelWrapper = false, shouldUseTabRoleForNavigation = false, showButton = true, tabContentTextAlignment = 'center', tabLabelActiveClassName = 'tab-link tab-link--active', tabLabelAlignment = 'center', tabLabelInactiveClassName = 'tab-link' }) {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'Tabs'
        });
    }, []);
    const [activeTab, setActiveTab] = React.useState(defaultTab);
    const firstTabLabel = tabLabels && tabLabels[defaultTab] ? tabLabels[defaultTab] : '';
    const [buttonLink, setButtonLink] = React.useState(firstTabLabel.url);
    const updateTabFromHash = React.useCallback(() => {
        if (!shouldChangeTabFromHash || !window.location.hash) {
            return;
        }
        const nextTabIndex = tabLabels.findIndex((tab) => tab.url?.includes(window.location.hash) ?? false);
        if (nextTabIndex >= 0) {
            const tabLabel = tabLabels[nextTabIndex];
            setActiveTab(nextTabIndex);
            setButtonLink(tabLabel.url || '');
        }
    }, [tabLabels, shouldChangeTabFromHash]);
    React.useEffect(() => {
        window.addEventListener('hashchange', updateTabFromHash);
        return () => window.removeEventListener('hashchange', updateTabFromHash);
    }, [updateTabFromHash, tabLabels]);
    React.useEffect(() => {
        updateTabFromHash();
    }, [updateTabFromHash, tabLabels]);
    /**
     * Map the tabLabels to account for onClick()
     */
    const navTabLabels = tabLabels.map((tabLabel, index) => {
        return {
            className: activeTab === index
                ? tabLabelActiveClassName
                : tabLabelInactiveClassName,
            attributes: {
                tabIndex: 0,
                role: 'tab',
                'aria-selected': activeTab === index
            },
            parentAttributes: shouldUseRoleForLabelWrapper
                ? { role: 'presentation' }
                : {},
            text: tabLabel.text,
            url: tabLabel && tabLabel.url ? tabLabel.url : '',
            onClick: (event) => {
                isPreventDefault && event.preventDefault();
                setActiveTab(index);
                setButtonLink(tabLabel && tabLabel.url ? tabLabel.url : '');
                if (typeof tabLabel.onClick === 'function') {
                    tabLabel.onClick();
                }
            },
            disableClickTracking: tabLabel?.disableClickTracking || false
        };
    });
    const wrapperAttribute = !shouldUseTabRoleForNavigation
        ? { role: 'tablist' }
        : {};
    return (React.createElement(TabsWrapper, { className: classnames('tabs-component', className), alignLeft: tabContentTextAlignment === 'left', ...wrapperAttribute },
        marquee,
        React.createElement(Navigation.Section, { attributes: { 'aria-label': 'Secondary', tabIndex: -1 }, links: navTabLabels, hasBorder: hasBorder, justify: tabLabelAlignment, listAttributes: shouldUseTabRoleForNavigation ? { role: 'tablist' } : {} }),
        React.createElement(TabsContentWrapper, null,
            tabContent.map((item, index) => {
                if (index + 1 > tabLabels.length) {
                    console.warn('Tabs: TabContent has more items than TabLabels, should be the same, Not building out extra tab content');
                    return null;
                }
                return (React.createElement(TabsPanel, { isActive: activeTab === index, key: index, role: "tabpanel", tabIndex: 0 }, item));
            }),
            buttonLink && showButton && (React.createElement(TabsButtonPrimary, { href: buttonLink, inputKind: "link", label: buttonLabel })))));
}
Tabs.propTypes = {
    buttonLabel: PropTypes.string,
    className: PropTypes.string,
    defaultTab: PropTypes.number,
    hasBorder: PropTypes.bool,
    isPreventDefault: PropTypes.bool,
    marquee: PropTypes.element,
    shouldChangeTabFromHash: PropTypes.bool,
    shouldUseRoleForLabelWrapper: PropTypes.bool,
    shouldUseTabRoleForNavigation: PropTypes.bool,
    showButton: PropTypes.bool,
    tabContent: PropTypes.array.isRequired,
    tabContentTextAlignment: PropTypes.oneOf(['center', 'left']),
    tabLabelActiveClassName: PropTypes.string,
    tabLabelAlignment: PropTypes.oneOf(['center', 'left']),
    tabLabelInactiveClassName: PropTypes.string,
    tabLabels: PropTypes.arrayOf(PropTypes.shape({
        onClick: PropTypes.function,
        text: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
        url: PropTypes.string,
        disableClickTracking: PropTypes.bool
    })).isRequired
};
module.exports = Tabs;
//# sourceMappingURL=Tabs.js.map

/***/ }),

/***/ 81318:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(95348);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 66042:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing, getColorStyles } = __webpack_require__(26865);
const Button = __webpack_require__(73730);
const TabsWrapper = styled.div.withConfig({ displayName: 'TabsWrapper' }) `
  grid-column: 1 / span 12;
  text-align: center;
  ${({ alignLeft }) => (alignLeft ? `text-align: left;` : ``)}

  .tab-link.tab-link--active {
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.discovery.lead.primary.link-hover')};
  }
`;
const TabsContentWrapper = styled.div.withConfig({
    displayName: 'TabsContentWrapper'
}) ``;
const TabsPanel = styled.div.withConfig({ displayName: 'TabsPanel' }) `
  display: ${({ isActive }) => (isActive ? `block` : `none`)};
`;
const TabsButtonPrimary = styled(Button.Primary).withConfig({
    displayName: 'TabsButtonPrimary'
}) `
  margin-top: ${calculateSpacing(5)};
`;
module.exports = {
    TabsButtonPrimary,
    TabsPanel,
    TabsWrapper,
    TabsContentWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 74970:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { TrackComponentChannel } = __webpack_require__(78788);
const { TextBlockHed, TextBlockText, TextBlockWrapper } = __webpack_require__(45730);
/**
 * Textblock component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} props.dangerousText - block of text to be dangerously set
 * @param {string} [props.hed] - header for textblock
 * @param {string} [props.hasTopRule] - if top border should be displayed
 * @param {boolean} [props.hasProductDisclaimerAlternativeStyle] - if product disclaimer to apply alternative type token (discovery.description-core)
 *
 * @returns {ReactElement} <div>
 */
const Textblock = ({ className, dangerousText, hed, hasTopRule = true, hasProductDisclaimerAlternativeStyle }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'Textblock'
        });
    }, []);
    return (React.createElement(TextBlockWrapper, { className: className, hasTopRule: hasTopRule },
        hed && React.createElement(TextBlockHed, null, hed),
        React.createElement(TextBlockText, { dangerouslySetInnerHTML: { __html: dangerousText }, hasProductDisclaimerAlternativeStyle: hasProductDisclaimerAlternativeStyle })));
};
Textblock.propTypes = {
    className: PropTypes.string,
    dangerousText: PropTypes.string.isRequired,
    hasProductDisclaimerAlternativeStyle: PropTypes.bool,
    hasTopRule: PropTypes.bool,
    hed: PropTypes.string
};
module.exports = Textblock;
//# sourceMappingURL=Textblock.js.map

/***/ }),

/***/ 37326:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(74970);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 45730:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing, getColorStyles } = __webpack_require__(26865);
const { BaseText } = __webpack_require__(18730);
const TextBlockWrapper = styled.div.withConfig({
    displayName: 'TextBlockWrapper'
}) `
  ${({ theme, hasTopRule }) => hasTopRule
    ? `
        border-width: 1px 0 0;
        border-style: solid;
        ${getColorStyles(theme, 'border-color', 'colors.consumption.body.standard.divider')}
        ;`
    : ''}

  padding: ${calculateSpacing(4)} 0;

  &.disclaimer {
    padding: ${calculateSpacing(2)} 0;
    width: 100%;
  }
`;
const TextBlockHed = styled(BaseText).withConfig({
    displayName: 'TextBlockHed'
}) ``;
TextBlockHed.defaultProps = {
    bottomSpacing: 2,
    colorToken: 'colors.consumption.body.standard.body',
    typeIdentity: 'typography.definitions.consumptionEditorial.subhed-break-secondary'
};
const TextBlockText = styled(BaseText).withConfig({
    displayName: 'TextBlockText'
}) ``;
TextBlockText.defaultProps = {
    colorToken: 'colors.consumption.body.standard.body',
    typeIdentity: 'typography.definitions.utility.legal-text'
};
module.exports = {
    TextBlockWrapper,
    TextBlockHed,
    TextBlockText
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 63845:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { useContext, useEffect, useMemo } = React;
const PropTypes = __webpack_require__(5556);
const { TrackComponentChannel } = __webpack_require__(78788);
const useLazyLoadComponent = __webpack_require__(70920);
const { ConsentContext } = __webpack_require__(85438);
const ConsentBanner = __webpack_require__(83561);
const translations = (__webpack_require__(61631)/* ["default"] */ .A);
const { ThreadsEmbedBlockquote, ThreadsEmbedContainer } = __webpack_require__(6381);
/**
 * Inject Threads embed script into browser
 *
 * @returns {undefined} - undefined
 */
const injectScript = () => {
    if (!document.getElementById('threads-embed')) {
        const script = document.createElement('script');
        script.id = 'threads-embed';
        script.src = 'https://www.threads.net/embed.js';
        document.body.appendChild(script);
    }
    else {
        window?.instgrm?.Embeds?.process();
    }
};
// Global counter to ensure that each blockquote embed
// has a unique id
let counter = 0;
/**
 * Threads Embed
 *
 * @param {object} props - React props
 * @param {object} [props.attributes] - Optional attributes to add top level i.e. aria-*, role, etc.
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} props.url - Required url for Threads post.
 */
const ThreadsEmbed = ({ attributes, className, url }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ThreadsEmbed'
        });
    }, []);
    const consentContext = useContext(ConsentContext);
    const [lazyLoadElementRef, shouldLoadComponent] = useLazyLoadComponent();
    const shouldDisplayComponent = consentContext.targeting && shouldLoadComponent;
    const id = useMemo(() => {
        const parts = url.split('/');
        return `threads-${parts[parts.length - 1]}-${counter++}`;
    }, [url]);
    useEffect(() => {
        if (shouldDisplayComponent) {
            injectScript();
        }
    }, [shouldDisplayComponent]);
    return (React.createElement(ThreadsEmbedContainer, { className: className, ref: lazyLoadElementRef }, shouldDisplayComponent ? (React.createElement(ThreadsEmbedBlockquote, { ...attributes, className: "text-post-media", "data-text-post-permalink": url, "data-text-post-version": "0", id: id },
        React.createElement(ConsentBanner, { hasConsent: consentContext.targeting, url: url, consentBannerHeader: translations.consentBannerHeader }))) : (React.createElement(ConsentBanner, { hasConsent: consentContext.targeting, url: url, consentBannerHeader: translations.consentBannerHeader }))));
};
ThreadsEmbed.propTypes = {
    attributes: PropTypes.object,
    className: PropTypes.string,
    url: PropTypes.string.isRequired
};
ThreadsEmbed.displayName = 'ThreadsEmbed';
module.exports = ThreadsEmbed;
//# sourceMappingURL=ThreadsEmbed.js.map

/***/ }),

/***/ 6381:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing } = __webpack_require__(26865);
const ThreadsEmbedContainer = styled.div.withConfig({
    displayName: 'ThreadsEmbedContainer'
}) `
  align-self: center;
  margin: ${calculateSpacing(5)} auto;
  text-align: center;
  justify-self: center;
`;
const ThreadsEmbedBlockquote = styled.blockquote.withConfig({
    displayName: 'ThreadsEmbedBlockquote'
}) `
  width: 100%;
  min-width: 270px;
  max-width: 540px;
`;
module.exports = {
    ThreadsEmbedBlockquote,
    ThreadsEmbedContainer
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 61631:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    consentBannerHeader: {
        id: 'ThreadsEmbed.ConsentBannerHeader',
        defaultMessage: 'Threads content',
        description: 'Header for message banner'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 21735:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { useContext, useEffect, useRef, useState } = React;
const PropTypes = __webpack_require__(5556);
const { mergeRefs } = __webpack_require__(54370);
const { TrackComponentChannel } = __webpack_require__(78788);
const useLazyLoadComponent = __webpack_require__(70920);
const { ConsentContext } = __webpack_require__(85438);
const ConsentBanner = __webpack_require__(83561);
const { isIOSDevice } = __webpack_require__(72362);
const translations = (__webpack_require__(37978)/* ["default"] */ .A);
const { TiktokEmbedContainer, TiktokEmbedBlockQuote } = __webpack_require__(58120);
/**
 * Inject Tiktok embed script into browser
 *
 * @returns {undefined} - undefined
 */
const injectScript = () => {
    if (!document.getElementById('tiktok-embed')) {
        const script = document.createElement('script');
        script.id = 'tiktok-embed';
        script.src = 'https://www.tiktok.com/embed.js';
        document.body.appendChild(script);
    }
};
/**
 * Get the TikTok video ID from a URL
 *
 * @param {string} tiktokUrl -  TikTok URL e.g https://www.tiktok.com/@wetsneakers/video/6681671049802697990
 *
 * @returns {string} - TikTok video ID e.g 6681671049802697990
 */
const getVideoIdFromURL = (tiktokUrl) => {
    const postUrl = new URL(tiktokUrl);
    const urlPathParts = postUrl.pathname
        .split('/')
        .filter((part) => part.length > 0); // filter out empty items
    const videoId = urlPathParts.pop();
    return videoId;
};
/**
 * Tiktok Embed
 *
 * @param {object} props - React props
 * @param {object} [props.attributes] - Optional attributes to add top level i.e. aria-*, role, etc.
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} props.tiktokUrl - Required url for Tiktok content.
 */
const TiktokEmbed = ({ attributes, className, tiktokUrl }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'TiktokEmbed'
        });
    }, []);
    const elementRef = useRef();
    const consentContext = useContext(ConsentContext);
    const [lazyLoadElementRef] = useLazyLoadComponent();
    const [shouldDisplayComponent, setShouldDisplayComponent] = useState(false);
    const videoId = getVideoIdFromURL(tiktokUrl);
    const [isIosDevice] = useState(isIOSDevice());
    const modifyStyleOnLoad = (event) => {
        let iframe = event.target;
        iframe?.addEventListener('load', () => {
            setTimeout(() => {
                iframe = event.target;
                iframe.style.minHeight = `${iframe.offsetHeight + 1}px`;
            }, 1000);
        });
    };
    useEffect(() => {
        setShouldDisplayComponent(consentContext.targeting);
    }, [consentContext.targeting]);
    useEffect(() => {
        const element = elementRef.current;
        const blockquote = element.querySelector('blockquote');
        // when iframe embed is missing id attribute it fails to render
        // inject script when id is missing forcing a rerender of the component
        if (blockquote && !blockquote.hasAttribute('id')) {
            injectScript();
        }
        if (isIosDevice) {
            element.addEventListener('DOMNodeInserted', (event) => modifyStyleOnLoad(event));
        }
        if (shouldDisplayComponent) {
            injectScript();
        }
        return () => {
            if (isIosDevice) {
                element.removeEventListener('DOMNodeInserted', (event) => modifyStyleOnLoad(event));
            }
        };
    }, [isIosDevice, elementRef, shouldDisplayComponent, videoId]);
    return (React.createElement(TiktokEmbedContainer, { className: className, ref: mergeRefs(elementRef, lazyLoadElementRef) }, shouldDisplayComponent ? (React.createElement(TiktokEmbedBlockQuote, { ...attributes, className: "tiktok-embed", "data-video-id": videoId, cite: tiktokUrl },
        React.createElement("section", null))) : (React.createElement(ConsentBanner, { hasConsent: consentContext.targeting, url: tiktokUrl, consentBannerHeader: translations.consentBannerHeader }))));
};
TiktokEmbed.propTypes = {
    attributes: PropTypes.object,
    className: PropTypes.string,
    tiktokUrl: PropTypes.string.isRequired
};
TiktokEmbed.displayName = 'TiktokEmbed';
module.exports = TiktokEmbed;
//# sourceMappingURL=TiktokEmbed.js.map

/***/ }),

/***/ 79244:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(21735);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 58120:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { maxScreen, calculateSpacing } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const TiktokEmbedContainer = styled.div.withConfig({
    displayName: 'TiktokEmbedContainer'
}) `
  align-self: center;
  margin: ${calculateSpacing(5)} auto;
  text-align: center;
  justify-self: center;
`;
const TiktokEmbedBlockQuote = styled.blockquote.withConfig({
    displayName: 'TiktokEmbedBlockQuote'
}) `
  width: 100%;
  min-width: 325px;

  /*
    these styles are supplied by oEmbed endpoint
    https://developers.tiktok.com/doc/embed-videos
  */
  max-width: 605px;

  ${maxScreen(0, BREAKPOINTS.md)} {
    /* prevents iframe being cutoff on mobile */
    iframe {
      min-height: 850px;
    }
  }
`;
module.exports = {
    TiktokEmbedContainer,
    TiktokEmbedBlockQuote
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 37978:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    consentBannerHeader: {
        id: 'TiktokEmbed.ConsentBannerHeader',
        defaultMessage: 'TikTok content ',
        description: 'Header for message banner'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 27517:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useEffect, useRef, useState } = __webpack_require__(96540);
const { TrackComponentChannel } = __webpack_require__(78788);
const { asThemedComponent } = __webpack_require__(20223);
const CloseIcon = __webpack_require__(76399);
const { trackSearchFilterEvent } = __webpack_require__(14307);
const { ToggleButton } = __webpack_require__(18161);
const { componentTracking } = __webpack_require__(90090);
/**
 * ToggleChip component
 *
 * This component allows a user to control the state from a parent component
 * or let the ToggleChip decide itself. This is handled through the `isChecked`
 * prop. If you are specifying either a `true` of `false` value, the component
 * will assume that you are wanting to control the state from a parent. If you
 * would like to change the checked state of the component but still let the
 * component control the state, you can use `shouldDefaultChecked`.
 *
 * @param {object} props - React Props
 * @param {object} [props.analyticsDataAttribute] - Optional data-section-title attribute for component level tracking
 * @param {node} [props.children] - String value to specify content inside Toggle Chip
 * @param {node} [props.chipShouldGetUncheckedIn] - Flag to uncheck chip after clicking in certain seconds
 * @param {string} [props.fullPageTheme] - Optional prop to apply an inverted (dark) theme to the button
 * @param {bool} [props.isAnchorUrl] - to add childrend text as href hash
 * @param {bool} [props.isChecked] - Whether or not the component is checked but
 *        also controlled outside of this component.
 * @param {Function} [props.onChange] - Optional onChange event handler
 * @param {string} [props.redirectUrl] - Optional props to set the tag as anchor and redirect to passed url
 * @param {string} [props.role] - Optional props to set the role of toggle chip
 * @param {string} [props.sectionTitle] - Optional prop to track the section title on toggle chip
 * @param {bool} [props.shouldDefaultChecked] - Whether or not the component
 *        should be defaulting to be checked or not.
 * @param {bool} [props.shouldDisplaySingleChip] - Optional toggle functionality when only one chip is to be displayed
 * @param {bool} [props.shouldUrlRedirect] - Optional prop to redirect when toggle chip is clicked
 * @param {bool} [props.shouldEnableBundleComponentAnalytics] - Optional feature flag to append data-section-title attribute for analytics
 * @param {bool} [props.shouldTrackSnowplowEvent] - Optional prop to enable snowplowtracking on toggle chip
 * @param {number} [props.totalCount] - prop which has count of total number of items returned from the toggle chip list
 * @param {bool} [props.index] - index's item
 * @param {bool} [props.isDisabled] - prop to disable chip
 * @returns {ReactElement} <div>
 */
const ToggleChip = ({ children, chipShouldGetUncheckedIn, fullPageTheme, isAnchorUrl = false, isChecked = undefined, onChange = () => { }, redirectUrl, role, sectionTitle, shouldDefaultChecked = false, shouldDisplaySingleChip = false, shouldUrlRedirect = true, shouldEnableBundleComponentAnalytics = false, shouldTrackSnowplowEvent, totalCount, index, isDisabled = false }) => {
    useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ToggleChip'
        });
    }, []);
    const { current: isControlled } = useRef(isChecked !== undefined);
    const [checkState, setChecked] = useState(shouldDefaultChecked);
    const checkedValue = isControlled ? isChecked : checkState;
    const [singleChipChecked, setSingleChipChecked] = useState(checkedValue);
    const onClick = (e) => {
        let modifiedState;
        let singleChipToggleState;
        if (shouldDisplaySingleChip) {
            setSingleChipChecked((prevState) => {
                singleChipToggleState = !prevState;
                return !prevState;
            });
        }
        else {
            modifiedState = !checkedValue;
        }
        if (!isControlled) {
            setChecked(modifiedState);
        }
        shouldTrackSnowplowEvent &&
            trackSearchFilterEvent({
                type: 'select',
                label: sectionTitle,
                subject: 'filter_summary_list',
                platform: 'verso',
                results_content: [
                    {
                        result_type: 'recipe',
                        no_of_results_returned: totalCount
                    }
                ],
                items: [
                    {
                        content_title: children,
                        content_id: null,
                        content_type: null,
                        content_url: null
                    }
                ],
                index,
                criteria: {
                    filter: [
                        {
                            label: null,
                            name: children
                        }
                    ]
                }
            });
        if (onChange) {
            const checked = singleChipToggleState || modifiedState;
            const changeEvent = new CustomEvent('change', {
                detail: { checked }
            });
            onChange(changeEvent);
        }
        if (chipShouldGetUncheckedIn) {
            setTimeout(() => setChecked(false), chipShouldGetUncheckedIn * 1000);
        }
        if (isAnchorUrl && "object" !== 'undefined') {
            // Feature not supported in iOS Safari 9.3
            // eslint-disable-next-line compat/compat
            const href = `#${children.toString().toLowerCase()}`;
            window.history.replaceState(undefined, undefined, href);
        }
        if (!shouldUrlRedirect)
            e.preventDefault();
    };
    let analyticsDataAttribute = {};
    if (shouldEnableBundleComponentAnalytics) {
        analyticsDataAttribute = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, `filterable toggle`, index);
    }
    return (React.createElement(ToggleButton, { ...analyticsDataAttribute, as: redirectUrl ? 'a' : 'button', href: redirectUrl || undefined, role: role || 'switch', "aria-checked": shouldDisplaySingleChip ? singleChipChecked : checkedValue, onClick: (e) => onClick(e), fullPageTheme: fullPageTheme, disabled: isDisabled },
        shouldDisplaySingleChip && singleChipChecked && (React.createElement(CloseIcon, { "data-testid": "close-icon" })),
        children));
};
ToggleChip.propTypes = {
    analyticsDataAttribute: PropTypes.object,
    children: PropTypes.node.isRequired,
    chipShouldGetUncheckedIn: PropTypes.number,
    fullPageTheme: PropTypes.oneOf(['standard', 'inverted']),
    index: PropTypes.number,
    isAnchorUrl: PropTypes.bool,
    isChecked: PropTypes.bool,
    isDisabled: PropTypes.bool,
    onChange: PropTypes.func,
    redirectUrl: PropTypes.string,
    role: PropTypes.string,
    sectionTitle: PropTypes.string,
    shouldDefaultChecked: PropTypes.bool,
    shouldDisplaySingleChip: PropTypes.bool,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldTrackSnowplowEvent: PropTypes.bool,
    shouldUrlRedirect: PropTypes.bool,
    totalCount: PropTypes.number
};
module.exports = asThemedComponent(ToggleChip);
//# sourceMappingURL=ToggleChip.js.map

/***/ }),

/***/ 15343:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const ToggleChip = __webpack_require__(27517);
module.exports = asConfiguredComponent(ToggleChip, 'ToggleChip');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 18161:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing, getColorStyles, getColorToken, getTypographyStyles } = __webpack_require__(26865);
const applyInvertedTheme = ({ fullPageTheme, theme }) => {
    if (fullPageTheme === 'inverted') {
        return `

      border: 1px solid;
      ${getColorStyles(theme, 'border-color', 'colors.discovery.body.white.border')};

      &[aria-checked='false'] {
        &:hover{
          ${getColorStyles(theme, 'background-color', 'colors.interactive.base.white')};
          ${getColorStyles(theme, 'color', 'colors.interactive.base.black')};
        }
        ${getColorStyles(theme, 'background-color', 'colors.interactive.base.black')};
        ${getColorStyles(theme, 'color', 'colors.interactive.base.white')};
      }

      &[aria-checked='true'] {
        ${getColorStyles(theme, 'background-color', 'colors.interactive.base.white')};
        ${getColorStyles(theme, 'color', 'colors.interactive.base.black')};
      }

      &:hover,
      &:focus {
        box-shadow: none;
      }
    `;
    }
    return ``;
};
const ToggleButton = styled.button.withConfig({ displayName: 'ToggleButton' }) `
  display: inline-block;
  border-radius: ${calculateSpacing(3)};
  cursor: pointer;
  padding: ${calculateSpacing(1)} ${calculateSpacing(3)};
  text-decoration: none;
  white-space: nowrap;

  .icon {
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.black')};
    fill: ${getColorToken('colors.interactive.base.white')};
    margin-left: ${calculateSpacing(-2)};
    width: ${calculateSpacing(4)};
    height: ${calculateSpacing(2)};
    vertical-align: middle;

    &:hover {
      fill: ${getColorToken('colors.interactive.base.black')};
    }
  }

  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.tags')};

  &[aria-checked='false'] {
    /* TODO support rgba in getColorStyles  */
    transition: background-color 0.25s, color 0.25s;
    background-color: rgba(
      ${getColorToken('colors.interactive.base.black', { rgbOnly: true })},
      0.1
    );
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.black')};
  }

  &[aria-checked='true'] {
    transition: background-color 0.25s, color 0.25s;
    text-decoration: none;
    ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.interactive.base.black')};
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.white')};

    .icon {
      fill: ${getColorToken('colors.interactive.base.black')};
    }
  }

  .icon-close {
    padding: 2px;

    g {
      stroke: #fff;
    }
  }

  &:hover,
  &:focus {
    outline: 0;
    /* TODO support this in getColorStyles  */
    box-shadow: 0 0 0 1px ${getColorToken('colors.interactive.base.black')}
      inset;
    text-decoration: none;

    .icon {
      fill: ${getColorToken('colors.interactive.base.black')};
    }
  }

  ${applyInvertedTheme}
`;
module.exports = {
    ToggleButton
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 99828:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const TriangleIcon = __webpack_require__(91583);
const ChevronIcon = __webpack_require__(39733);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * Toggle component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Classname
 * @param {string} [props.variations] - Optional variation properties used in rendering the component
 * @param {string} [props.variations.style] - Optional value determining the toggle style
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 *
 * @returns {ReactElement} <div>
 */
const Toggle = ({ className, variations = { style: 'chevron' }, variationName }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'Toggle',
            variation: variationName
        });
    }, [variationName]);
    return (React.createElement("i", { className: className }, variations.style === 'triangle' ? (React.createElement(TriangleIcon, { style: { transform: 'scale(0.7)' } })) : (React.createElement(ChevronIcon, null))));
};
Toggle.propTypes = {
    className: PropTypes.string,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        style: PropTypes.oneOf(['chevron', 'triangle'])
    })
};
Toggle.displayName = 'Toggle';
module.exports = Toggle;
//# sourceMappingURL=Toggle.js.map

/***/ }),

/***/ 1778:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const VariedToggle = __webpack_require__(7786);
module.exports = asConfiguredComponent(VariedToggle, 'Toggle');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 7786:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const Toggle = __webpack_require__(99828);
Toggle.Triangle = asVariation(Toggle, 'Triangle', {
    style: 'triangle'
});
module.exports = Toggle;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 36657:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const { useContext, useEffect } = React;
const { useContentLang } = __webpack_require__(76573);
const { ConsentContext } = __webpack_require__(85438);
const useLazyLoadComponent = __webpack_require__(70920);
const ConsentBanner = __webpack_require__(83561);
const { TrackComponentChannel } = __webpack_require__(78788);
const { TwitterEmbedContainer, TwitterEmbedBlockquote, TwitterEmbedLink } = __webpack_require__(91307);
const translations = (__webpack_require__(509)/* ["default"] */ .A);
/**
 * Inject twitter embed script into browser
 *
 * @returns {undefined} - undefined
 */
const injectScript = () => {
    if (!document.getElementById('twitter-embed')) {
        const script = document.createElement('script');
        script.id = 'twitter-embed';
        script.className = 'twitter-embed';
        script.src = 'https://platform.twitter.com/widgets.js';
        document.body.appendChild(script);
    }
    else {
        window?.twttr?.widgets?.load();
    }
};
/**
 * TwitterEmbed component
 *
 * @param {object} [attributes] - Optional attributes to add top level i.e. aria-*, role, etc.
 * @param {string} [className] - Optional top-level class to add
 * @param {boolean} [shouldHideMedia] - optional Property for hiding media associated
 * @param {boolean} [shouldHideThread] - optional Property for hiding conversation portion of tweet
 * @param {string} url - Required url reference for tweet.
 * @returns {ReactElement} <blockquote>
 */
const TwitterEmbed = ({ attributes, className, url, shouldHideMedia, shouldHideThread }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'TwitterEmbed'
        });
    }, []);
    const consentContext = useContext(ConsentContext);
    const [lazyLoadElementRef, shouldLoadComponent] = useLazyLoadComponent();
    const { formatMessage } = useIntl();
    const lang = useContentLang();
    const shouldDisplayComponent = consentContext.targeting && shouldLoadComponent;
    useEffect(() => {
        if (shouldDisplayComponent) {
            injectScript();
        }
    }, [shouldDisplayComponent]);
    const generateTwitterOptions = () => {
        // zh-Hant-TW will fallback to zh-tw
        const twitterLang = lang === 'zh-Hant-TW' ? 'zh-tw' : lang;
        const twitterOptions = {
            'data-lang': twitterLang,
            'data-url': url,
            'data-type': 'twitter'
        };
        if (shouldHideMedia) {
            twitterOptions['data-cards'] = 'hidden';
        }
        if (shouldHideThread) {
            twitterOptions['data-conversation'] = 'none';
        }
        return twitterOptions;
    };
    return (React.createElement(TwitterEmbedContainer, { "aria-label": formatMessage(translations.twitterEmbedMessage), className: className, ref: lazyLoadElementRef }, shouldDisplayComponent ? (React.createElement(TwitterEmbedBlockquote, { ...attributes, ...generateTwitterOptions(), className: "twitter-tweet" },
        React.createElement(TwitterEmbedLink, { href: url }, url))) : (React.createElement(ConsentBanner, { hasConsent: consentContext.targeting, url: url, consentBannerHeader: translations.consentBannerHeader }))));
};
TwitterEmbed.propTypes = {
    attributes: PropTypes.object,
    className: PropTypes.string,
    shouldHideMedia: PropTypes.bool,
    shouldHideThread: PropTypes.bool,
    url: PropTypes.string.isRequired
};
module.exports = TwitterEmbed;
//# sourceMappingURL=TwitterEmbed.js.map

/***/ }),

/***/ 97089:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(36657);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 91307:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing } = __webpack_require__(26865);
const TwitterEmbedContainer = styled.div.withConfig({
    displayName: 'TwitterEmbedContainer'
}) `
  margin: ${calculateSpacing(5)} auto;

  .twitter-tweet {
    margin-right: auto;
    margin-left: auto;
  }
`;
const TwitterEmbedBlockquote = styled.blockquote.withConfig({
    displayName: 'TwitterEmbedBlockquote'
}) ``;
const TwitterEmbedLink = styled.a.withConfig({
    displayName: 'TwitterEmbedLink'
}) `
  overflow-wrap: break-word;
`;
module.exports = {
    TwitterEmbedContainer,
    TwitterEmbedBlockquote,
    TwitterEmbedLink
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 509:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    twitterEmbedMessage: {
        id: 'TwitterEmbed.EmbedContainer',
        defaultMessage: 'social media post',
        description: 'ARIA label for XEmbedContainer'
    },
    consentBannerHeader: {
        id: 'TwitterEmbed.ConsentBannerHeader',
        defaultMessage: 'X content',
        description: 'Header for message banner'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 36466:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { useContext, useEffect, useRef, useState } = __webpack_require__(96540);
const { ConsentContext } = __webpack_require__(85438);
const { getCookie } = __webpack_require__(56892);
const injectScript = __webpack_require__(22445);
const { XidChannel } = __webpack_require__(78724);
const UserContextScript = () => {
    const hasScriptBeenInjected = useRef(false);
    const consentContext = useContext(ConsentContext);
    const [xid, setXid] = useState('');
    useEffect(() => {
        const value = getCookie('CN_xid');
        if (value)
            setXid(value);
        const listener = window.Kendra.XID.on(XidChannel.SET, setXid);
        return () => listener.off();
    }, []);
    useEffect(() => {
        if (!hasScriptBeenInjected.current && consentContext.performance && xid) {
            const encodedReferrer = encodeURIComponent(window?.document?.referrer);
            const encodedLocation = encodeURIComponent(window?.location?.href);
            injectScript(`/user-context?referrer=${encodedReferrer}&verso=true&location=${encodedLocation}`, document?.body, { async: true });
            hasScriptBeenInjected.current = true;
        }
    }, [consentContext.performance, xid, hasScriptBeenInjected]);
    return null;
};
module.exports = UserContextScript;
//# sourceMappingURL=UserContextScript.js.map

/***/ }),

/***/ 68787:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(36466);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 51558:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.onMouseMoveZoom = void 0;
const onMouseMoveZoom = (e) => {
    const mediaQueryString = `(any-pointer: fine)`;
    const isDesktop = window.matchMedia(mediaQueryString).matches;
    if (isDesktop) {
        const zoomer = e.currentTarget;
        const positionOfXCordinateClick = e.nativeEvent.offsetX;
        const positionOfYCordinateClick = e.nativeEvent.offsetY;
        const x = (positionOfXCordinateClick / zoomer.offsetWidth) * 100;
        const y = (positionOfYCordinateClick / zoomer.offsetHeight) * 100;
        let backgroundPositionImage = 0;
        backgroundPositionImage = `${x}% ${y}%`;
        zoomer.style.backgroundPosition = backgroundPositionImage;
    }
};
exports.onMouseMoveZoom = onMouseMoveZoom;
//# sourceMappingURL=ImageMagnifier.js.map

/***/ }),

/***/ 49974:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
    if (kind === "m") throw new TypeError("Private method is not writable");
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _IdentityMapper_instances, _a, _IdentityMapper_publicKey, _IdentityMapper_url, _IdentityMapper_isEnabled, _IdentityMapper_sessionData, _IdentityMapper_xid, _IdentityMapper_writeIDMSession, _IdentityMapper_setSession;
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.IdentityMapper = exports.IDM_RESULTS_EVENT = exports.Id = exports.IdType = exports.IdSet = exports.AssociationsResponse = exports.AssociationsRequest = void 0;
const id_mapper_protobuf_js_1 = __webpack_require__(14961);
exports.AssociationsRequest = id_mapper_protobuf_js_1.id_mapper.AssociationsRequest, exports.AssociationsResponse = id_mapper_protobuf_js_1.id_mapper.AssociationsResponse, exports.IdSet = id_mapper_protobuf_js_1.id_mapper.IdSet, exports.IdType = id_mapper_protobuf_js_1.id_mapper.IdType, exports.Id = id_mapper_protobuf_js_1.id_mapper.Id;
exports.IDM_RESULTS_EVENT = 'idm.results';
/*
Uses the [Id Mapper Service](https://github.com/CondeNast/id-mapper-service) to fetch all IDs it knows are related to a user. These IDs can be fed into DMPs and segmentation services.

This is primarily used to fetch IDs that are related to an XID, which are then fed into [Permutive](./infinityid/link.js)
*/
class IdentityMapper {
    constructor({ publicKey, url, isEnabled, xid }) {
        _IdentityMapper_instances.add(this);
        _IdentityMapper_publicKey.set(this, void 0);
        _IdentityMapper_url.set(this, void 0);
        _IdentityMapper_isEnabled.set(this, void 0);
        _IdentityMapper_sessionData.set(this, void 0);
        _IdentityMapper_xid.set(this, void 0);
        __classPrivateFieldSet(this, _IdentityMapper_publicKey, publicKey, "f");
        __classPrivateFieldSet(this, _IdentityMapper_url, url, "f");
        __classPrivateFieldSet(this, _IdentityMapper_isEnabled, isEnabled, "f");
        __classPrivateFieldSet(this, _IdentityMapper_xid, xid, "f");
    }
    async init() {
        if (__classPrivateFieldGet(this, _IdentityMapper_isEnabled, "f")) {
            __classPrivateFieldSet(this, _IdentityMapper_sessionData, IdentityMapper.readIDMSession(), "f");
            if (__classPrivateFieldGet(this, _IdentityMapper_sessionData, "f")) {
                window?.cnBus.emit(exports.IDM_RESULTS_EVENT, __classPrivateFieldGet(this, _IdentityMapper_sessionData, "f"));
            }
            else {
                const res = await this.fetchProfilesByXid();
                __classPrivateFieldGet(this, _IdentityMapper_instances, "m", _IdentityMapper_setSession).call(this, res);
            }
        }
    }
    static readIDMSession() {
        let res = null;
        if (window.sessionStorage) {
            const idmSession = window.sessionStorage.getItem(IdentityMapper.sessionName);
            if (idmSession) {
                try {
                    // ideally we'd use toBase64/fromBase64 for this but it is not currently well-supported:
                    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array/toBase64
                    res = exports.AssociationsResponse.decode(new Uint8Array(idmSession.split(',')));
                }
                catch (e) {
                    console.error('IDM', e);
                }
            }
        }
        return res;
    }
    async fetchProfilesByXid() {
        if (__classPrivateFieldGet(this, _IdentityMapper_xid, "f") && !this.fetchByXid) {
            const id = exports.Id.create({ value: __classPrivateFieldGet(this, _IdentityMapper_xid, "f"), type: exports.IdType.XID });
            this.fetchByXid = this.fetchProfiles([id]);
        }
        return this.fetchByXid;
    }
    async fetchProfiles(ids) {
        const idSet = exports.IdSet.create({ ids });
        const assocReq = exports.AssociationsRequest.create({ idSets: [idSet] });
        const bufReq = exports.AssociationsRequest.encode(assocReq).finish();
        try {
            const res = await fetch(`${__classPrivateFieldGet(this, _IdentityMapper_url, "f")}/associations`, {
                body: new Blob([bufReq]),
                method: 'POST',
                headers: {
                    'Content-Type': 'application/octet-stream',
                    Authorization: `Bearer ${__classPrivateFieldGet(this, _IdentityMapper_publicKey, "f")}`
                }
            });
            const bytes = await res.arrayBuffer();
            const byteArray = new Uint8Array(bytes);
            return exports.AssociationsResponse.decode(byteArray);
        }
        catch (e) {
            console.error('IDM', e);
        }
        return null;
    }
}
_a = IdentityMapper, _IdentityMapper_publicKey = new WeakMap(), _IdentityMapper_url = new WeakMap(), _IdentityMapper_isEnabled = new WeakMap(), _IdentityMapper_sessionData = new WeakMap(), _IdentityMapper_xid = new WeakMap(), _IdentityMapper_instances = new WeakSet(), _IdentityMapper_writeIDMSession = function _IdentityMapper_writeIDMSession(data) {
    if (data && window.sessionStorage) {
        window.sessionStorage.setItem(IdentityMapper.sessionName, 
        // use Uint8Array.toBase64() once it becomes well-supported:
        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array/toBase64
        exports.AssociationsResponse.encode(data).finish().toString());
    }
}, _IdentityMapper_setSession = function _IdentityMapper_setSession(sessionData) {
    if (sessionData) {
        __classPrivateFieldSet(this, _IdentityMapper_sessionData, sessionData, "f");
        window?.cnBus.emit(exports.IDM_RESULTS_EVENT, __classPrivateFieldGet(this, _IdentityMapper_sessionData, "f"));
        __classPrivateFieldGet(IdentityMapper, _a, "m", _IdentityMapper_writeIDMSession).call(IdentityMapper, __classPrivateFieldGet(this, _IdentityMapper_sessionData, "f"));
    }
};
IdentityMapper.sessionName = 'idm_session';
exports.IdentityMapper = IdentityMapper;
//# sourceMappingURL=identity-mapper.js.map

/***/ }),

/***/ 42515:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const cookie = __webpack_require__(56892);
const { XidChannel } = __webpack_require__(78724);
const COOKIE_NAME = 'CN_xid';
const COOKIE_LIFETIME = 1000 * 60 * 60 * 24 * 18; // 18 Days from sparrow
const set = (value) => {
    document.cookie = cookie.createCookie(COOKIE_NAME, value, {
        path: '/',
        expirationInMs: COOKIE_LIFETIME,
        domain: cookie.getCookieDomainFromHostname()
    });
    window.Kendra.XID.broadcast(XidChannel.SET, value);
};
const get = () => {
    return cookie.getCookie(COOKIE_NAME);
};
module.exports = {
    set,
    get
};
//# sourceMappingURL=cache-cookie.js.map

/***/ }),

/***/ 31601:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const service = __webpack_require__(46497);
const cache = __webpack_require__(42515);
const getXid = async () => {
    try {
        const cachedId = cache.get();
        if (cachedId)
            return cachedId;
        // Get the remote ID and immediatly cache it.
        const id = await service.getId();
        if (id) {
            cache.set(id);
            // Don't await because we don't actually need the result of the local id
            service.setRefreshId();
            return id;
        }
        // If we couldn't get id from infinityid service let's just use the localally generated id
        const localId = await service.setRefreshId();
        cache.set(localId);
        return localId;
    }
    catch (e) {
        console.error('xid failed to initialize', e);
        return null;
    }
};
module.exports = {
    getXid
};
//# sourceMappingURL=infinityid.js.map

/***/ }),

/***/ 73732:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.linkSparrow = exports.linkPermutive = exports.ID_PRIORITIES = void 0;
const identity_mapper_1 = __webpack_require__(49974);
const IDM_TIMEOUT = 1000;
const PERMUTIVE_IDENT_SESSION = 'cn_permutive_ident';
// Priorities and their IDs are enumerated here: https://cnissues.atlassian.net/wiki/spaces/CO/pages/15690728280/Identity#Collection
const COLLECTION_PRIORITIES = {
    PUBLISHER: 0,
    ANONYMOUS: 3,
    PARTNER: 8,
    ADTECH: 9
};
exports.ID_PRIORITIES = {
    [identity_mapper_1.IdType.amg]: COLLECTION_PRIORITIES.PUBLISHER,
    [identity_mapper_1.IdType.email_sha256]: COLLECTION_PRIORITIES.PUBLISHER,
    [identity_mapper_1.IdType.xid]: COLLECTION_PRIORITIES.ANONYMOUS
};
const linkPermutive = async (xid, IDMEnabled) => {
    try {
        if (window.permutive &&
            window.permutive.identify &&
            !window.sessionStorage.getItem(PERMUTIVE_IDENT_SESSION)) {
            let ids = [{ id: xid, tag: 'xid', priority: exports.ID_PRIORITIES[identity_mapper_1.IdType.xid] }];
            let sessionData;
            if (IDMEnabled) {
                sessionData = await Promise.race([
                    // read existing IDM session data
                    new Promise((resolve) => {
                        const data = identity_mapper_1.IdentityMapper.readIDMSession();
                        if (data) {
                            resolve(data);
                        }
                    }),
                    // listen if IDM session data becomes available
                    new Promise((resolve) => {
                        const off = window.cnBus?.on(identity_mapper_1.IDM_RESULTS_EVENT, (data) => {
                            off();
                            resolve(data);
                        });
                    }),
                    // wait for IDM session data, then continue if timed out
                    new Promise((resolve) => {
                        setTimeout(() => {
                            resolve(identity_mapper_1.IdentityMapper.readIDMSession());
                        }, IDM_TIMEOUT);
                    })
                ]);
            }
            if (sessionData) {
                const idmIds = sessionData.result
                    .map((assocResults) => assocResults.idSets.map((idSet) => idSet.ids
                    .filter((id) => Object.hasOwn(exports.ID_PRIORITIES, id.type) &&
                    id.type !== identity_mapper_1.IdType.PERMUTIVE)
                    .map((id) => ({
                    id: id.value,
                    tag: identity_mapper_1.IdType[id.type],
                    priority: exports.ID_PRIORITIES[id.type]
                }))))
                    // or nested flatmaps
                    .flat(3);
                if (idmIds.length) {
                    ids = idmIds;
                }
            }
            window.permutive.identify(ids);
            window.sessionStorage.setItem(PERMUTIVE_IDENT_SESSION, '1');
        }
    }
    catch (e) {
        console.error('Error linking xid to permutive', e);
    }
};
exports.linkPermutive = linkPermutive;
const linkSparrow = (xid) => {
    window.SparrowCache = window.SparrowCache || {};
    window.SparrowCache.xid = xid;
};
exports.linkSparrow = linkSparrow;
//# sourceMappingURL=link.js.map

/***/ }),

/***/ 46497:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { fetchWithTimeout } = __webpack_require__(57743);
const getId = async () => {
    const response = await fetchWithTimeout(`//infinityid.condenastdigital.com/?rand=${Date.now()}`, {
        credentials: 'include',
        headers: { Accept: 'text/plain' }
    }, 2000);
    if (response.ok) {
        const id = await response.text();
        return id;
    }
    return null;
};
/*

  When we fetch an xid from condenastdigital.com, we have to store it in a cookie on
  our current domain, client side. Client-side cookies are accessible by the browser,
  and some browsers automatically delete these cookies after 7 days. To maintain
  continuity, we can make a request to a relative URL to set an "HttpOnly" cookie.
  These cookies can not be accessed by the browser, but also can only be set server-side

  So, the act of calling this function will set a cookie called "CN_xid_refresh" that is
  used to maintain continuity if the xid cookie gets deleted


*/
const setRefreshId = async () => {
    const response = await fetchWithTimeout('/infinityid', {
        credentials: 'include',
        headers: { Accept: 'text/plain' }
    }, 2000);
    if (response.ok) {
        const id = await response.text();
        return id;
    }
    return null;
};
module.exports = {
    getId,
    setRefreshId
};
//# sourceMappingURL=service.js.map

/***/ }),

/***/ 79133:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.trackingProducts = void 0;
function generateProductIdFromUrlString(urlString) {
    const splitPaths = urlString.split('/');
    // trim empty strings
    if (splitPaths[0] === '') {
        splitPaths.shift();
    }
    if (splitPaths[splitPaths.length - 1] === '') {
        splitPaths.pop();
    }
    const slug = splitPaths[splitPaths.length - 1];
    const productTypes = ['article', 'gallery', 'series', 'membership'];
    let finalProductID;
    if (productTypes.includes(splitPaths[0])) {
        finalProductID = `${splitPaths[0]}-${slug}`;
    }
    else if (splitPaths[0] === 'special') {
        finalProductID = `rich-${slug}`;
    }
    else {
        finalProductID = `post-${slug}`;
    }
    return finalProductID;
}
// this function intakes articles on a tag/contributor/channel pages and sets the top 3 articles on those pages in CriteoProductIDList insdie dataLayer.
function trackingProducts(urlStringObject) {
    const articles = [];
    for (let i = 0; i < 3; i++) {
        if (urlStringObject && urlStringObject[i]) {
            articles.push(generateProductIdFromUrlString(urlStringObject[i].url));
        }
    }
    if ( true &&
        window.dataLayer &&
        window.location.href.search('/video') < 0) {
        window.dataLayer.push({ CriteoProductIDList: articles });
    }
}
exports.trackingProducts = trackingProducts;
//# sourceMappingURL=productIdTracking.js.map

/***/ }),

/***/ 84122:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.withCustomTheme = void 0;
const prop_types_1 = __importDefault(__webpack_require__(5556));
const React = __webpack_require__(96540);
const { ThemeProvider } = __webpack_require__(92168);
/**
 * HOC for bundle container components that passes it a custom brand identity, overriding that of the page.
 *
 * To inject a custom brand identity into a component, do the following:
 * 1. At transformer level, augment the returned object with the property componentBI which is an object
 * that contains e.g. { [connect(SpotlightSummary)]: spotlightTheme }
 * 2. Wrap the component with this HOC
 *
 * @param {object} Component - Component to wrap
 * @returns {object} React Component
 */
function withCustomTheme(Component) {
    const ComponentWithBI = (props) => {
        const { componentBI } = props;
        const { displayName } = Component;
        if (!componentBI || !displayName) {
            return React.createElement(Component, { ...props });
        }
        const theme = componentBI[displayName] || null;
        if (theme) {
            return (React.createElement(ThemeProvider, { "data-testid": "ComponentBIProvider", theme: theme },
                React.createElement(Component, { ...props })));
        }
        return React.createElement(Component, { ...props });
    };
    ComponentWithBI.propTypes = {
        componentBI: prop_types_1.default.object
    };
    return ComponentWithBI;
}
exports.withCustomTheme = withCustomTheme;
//# sourceMappingURL=component-with-custom-theme.js.map

/***/ }),

/***/ 15236:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const withCustomTheme = __webpack_require__(84122);
module.exports = withCustomTheme;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 57541:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.setupTrackingSync = exports.pushTrackingHistoryToDataLayer = void 0;
const checkComponentAvailability = (name) => {
    let isAvailable = false;
    let components = [];
    components = document.querySelectorAll(`[class*=${name}]`);
    if (components && !components.length)
        components = document.querySelectorAll(`[data-event-click*=${name}]`);
    if (components && !components.length)
        components = document.querySelectorAll(`[data-in-view*=${name}]`);
    if (components && !components.length)
        components = document.querySelectorAll(`[data-testid=${name}]`);
    if (name === 'CoreIcons')
        isAvailable = true;
    else if (components && components.length) {
        isAvailable = Object.keys(components).some((componentIndex) => components[componentIndex].clientWidth !== 0 &&
            components[componentIndex].clientHeight !== 0);
    }
    return isAvailable;
};
// Track pushed component entries to avoid duplicates based on name and variation
const pushedEntries = new Set();
/**
 * New tracking function that uses Kendra TRACK_COMPONENT history and pushes to dataLayer
 * Filters duplicate entries before pushing to prevent redundant data
 */
const pushTrackingHistoryToDataLayer = () => {
    if (!window.Kendra || !window.Kendra.TRACK_COMPONENT) {
        console.warn('Kendra TRACK_COMPONENT not available');
        return;
    }
    if (!window.dataLayer) {
        console.warn('window.dataLayer not available');
        return;
    }
    try {
        const history = window.Kendra.TRACK_COMPONENT.history();
        if (history && history.length > 0) {
            // Filter out entries that were already pushed based on name and variation only
            const newEntries = history.filter((entry) => {
                // Create a unique key based on name and variation only
                const entryKey = `${entry.value.name}-${entry.value.variation || 'Default'}`;
                // Check if this component (name + variation) was already pushed
                if (pushedEntries.has(entryKey)) {
                    return false;
                }
                // Check if component is actually available/visible on the page
                if (!checkComponentAvailability(entry.value.name)) {
                    return false;
                }
                // Mark this component as pushed only if it passes all checks
                pushedEntries.add(entryKey);
                return true;
            });
            if (newEntries.length === 0) {
                return; // No new entries to push
            }
            // Transform the new entries to match the expected format
            const components = newEntries.map((entry) => ({
                name: entry.value.name,
                variationName: entry.value.variation || 'Default'
            }));
            // Push only new components to dataLayer
            window.dataLayer.push({
                event: 'components-loaded',
                components
            });
        }
    }
    catch (error) {
        console.error('Error pushing Kendra tracking to dataLayer:', error);
    }
};
exports.pushTrackingHistoryToDataLayer = pushTrackingHistoryToDataLayer;
const setupTrackingSync = () => {
    // Wait for page to be fully rendered and all components mounted
    const syncTracking = () => {
        (0, exports.pushTrackingHistoryToDataLayer)();
    };
    // Multiple strategies to ensure page is completely ready
    if (document.readyState === 'complete') {
        // Page already fully loaded
        setTimeout(syncTracking, 2000);
    }
    else if (document.readyState === 'interactive') {
        // DOM ready but resources may still be loading
        window.addEventListener('load', () => {
            setTimeout(syncTracking, 2000);
        });
    }
    else {
        // Document still loading
        document.addEventListener('DOMContentLoaded', () => {
            window.addEventListener('load', () => {
                setTimeout(syncTracking, 2000);
            });
        });
    }
};
exports.setupTrackingSync = setupTrackingSync;
//# sourceMappingURL=track-component.js.map

/***/ }),

/***/ 22445:
/***/ ((module) => {

/**
 * injectScript
 *
 * appends a script with source `src` at attributes `attrs` to node `parent`
 *
 * @param {string} src - for script tag to be injected
 * @param {string} parent - node to which script should be appended
 * @param {object} map - of arbitrary optional attributes to be added to script tag ('async' etc)
 * @param {Function} callback - a function to call when the script finishes loading

 * @returns {HTMLElement} Node representing script tag that has been injected
 */
module.exports = function injectScript(src, parent, attrs, callback) {
    if (!src || !parent) {
        return null;
    }
    const script = window.document.createElement('script');
    script.src = src;
    if (attrs) {
        Object.keys(attrs).forEach((attr) => {
            script[attr] = attrs[attr];
        });
    }
    parent.appendChild(script);
    if (callback) {
        script.onload = () => callback();
    }
    return script;
};
//# sourceMappingURL=inject-script.js.map

/***/ }),

/***/ 51009:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const isEqual = __webpack_require__(2404);
const AnchorCallout = __webpack_require__(51114);
const AssetEmbed = __webpack_require__(67120);
const BizzaboEmbed = __webpack_require__(99933);
const ButtonGroupCallout = __webpack_require__(62839);
const CNEEventRegistrationEmbed = __webpack_require__(90609);
const CNEInterludeEmbed = __webpack_require__(96303);
const CNEVideoEmbed = __webpack_require__(64930);
const CNEAudioEmbed = __webpack_require__(4819);
const ContentCardEmbed = __webpack_require__(78942);
const ContributorEmbed = __webpack_require__(92561);
const CrosswordEmbed = __webpack_require__(87608);
const EventEmbed = __webpack_require__(45888);
const ExternalLinkEmbed = __webpack_require__(55990);
const FacebookEmbed = __webpack_require__(90346);
const FireworkEmbed = __webpack_require__(34943);
const FeatureLargeCallout = __webpack_require__(85617);
const FootnoteEmbed = __webpack_require__(37202);
const GalleryEmbed = __webpack_require__(75966);
const GenericCallout = __webpack_require__(37954);
const GroupCallout = __webpack_require__(31830);
const IframeEmbed = __webpack_require__(22816);
const InstagramEmbed = __webpack_require__(11518);
const JustWatchEmbed = __webpack_require__(38973);
const PymInteractiveIframeEmbed = __webpack_require__(39122);
const PinterestEmbed = __webpack_require__(61784);
const ProductEmbed = __webpack_require__(75871);
const UnifiedProductCard = __webpack_require__(51125);
const PullquoteEmbed = __webpack_require__(40007);
const ProductSummaryGrid = __webpack_require__(25646);
const ProductSummaryGridItem = __webpack_require__(19163);
const { PullQuoteEmbedContent, PullQuoteEmbedCredit } = __webpack_require__(9865);
const ReviewEmbed = __webpack_require__(66268);
const SectionEmbed = __webpack_require__(96505);
const TwitterEmbed = __webpack_require__(97089);
const SidebarArticle = __webpack_require__(39362);
const SidebarEmbed = __webpack_require__(38785);
const SidebarHeading = __webpack_require__(36382);
const ShoppableAssetEmbed = __webpack_require__(82077);
const ContentsList = __webpack_require__(96921);
const ResponsiveClip = __webpack_require__(17637);
const MastodonEmbed = __webpack_require__(10881);
const ThreadsEmbed = __webpack_require__(63845);
const { checkImageCreditText } = __webpack_require__(5344);
const Accordion = __webpack_require__(8470);
const { AccordionWrapper } = __webpack_require__(76080);
const TableOfContent = __webpack_require__(84784);
const { inlineEmbedPosition, inlineInterludePosition } = __webpack_require__(62327);
const CoolTabsEmbed = __webpack_require__(63938);
const VisualStorySingleCard = __webpack_require__(47660);
// empty react component, does not render
const Empty = () => null;
// embed types that we don't render but are present in legacy
// or is a deprecated type from legacy that maps to a verso type
// note: if deprecated type, should be fixed in atJSON
const unsupportedEmbeds = {
    'callout:inline-ad': Empty,
    'callout:inline-recirc': Empty,
    'callout:inset-image-left': GenericCallout // same as inset-left
};
function areEqual(prevProps, nextProps) {
    return isEqual(prevProps, nextProps);
}
// We use a memo here to avoid multiple re-renders if the override
// props haven't changed. Some embeds might break if rendered
// multiple times.
// Ex: the crosswords override injects a javascript file that relies
// on jquery ready event in order to load the game iframe. If we have
// renders that run after the jquery script has loaded the game frame, the
// frame restores its initial location again - a blank page - and does
// not display the game anymore
const InteractiveOverrideEmbed = React.memo(({ markup }) => (React.createElement("div", { className: "interactive-override-container interactive-override-container--body", dangerouslySetInnerHTML: { __html: markup } })), areEqual);
// Added to make Linter happy
InteractiveOverrideEmbed.propTypes = {
    markup: PropTypes.string
};
InteractiveOverrideEmbed.displayName = 'InteractiveOverrideEmbed';
const embeds = {
    ...unsupportedEmbeds,
    article: ContentCardEmbed,
    bodyInteractiveOverride: InteractiveOverrideEmbed,
    pullquoteContent: PullQuoteEmbedContent,
    pullquoteCredit: PullQuoteEmbedCredit,
    'callout:anchor': AnchorCallout,
    'callout:dropcap': (props) => props.children,
    'callout:intro': GenericCallout,
    'callout:feature-xsmall': GenericCallout,
    'callout:feature-small': GenericCallout,
    'callout:feature-medium': GenericCallout,
    'callout:feature-large': FeatureLargeCallout,
    'callout:footnote': FootnoteEmbed,
    'callout:group-2': GroupCallout,
    'callout:group-3': GroupCallout,
    'callout:group-4': GroupCallout,
    'callout:inset-left': GenericCallout,
    'callout:portrait-justified': GenericCallout,
    'callout:inset-right': GenericCallout,
    'callout:pullquote': PullquoteEmbed,
    'callout:sidebar': SidebarEmbed,
    'callout:slideshow': GalleryEmbed,
    'callout:button-group': ButtonGroupCallout,
    'callout:accordion': AccordionWrapper,
    'callout:accordion-item': Accordion,
    'callout:table-of-contents': TableOfContent,
    'callout:product-summary': ProductSummaryGrid,
    'callout:product-summary-item': ProductSummaryGridItem,
    bizzabo: BizzaboEmbed,
    cartoon: AssetEmbed,
    clip: AssetEmbed,
    cneaudio: CNEAudioEmbed,
    cneembed: CNEVideoEmbed,
    cneeventregistration: CNEEventRegistrationEmbed,
    cneinterlude: CNEInterludeEmbed,
    contributor: ContributorEmbed,
    cooltabs: CoolTabsEmbed,
    crossword: CrosswordEmbed,
    curatedlist: ContentsList,
    event: EventEmbed,
    externallink: ExternalLinkEmbed,
    facebook: FacebookEmbed,
    firework: FireworkEmbed,
    gallery: GalleryEmbed,
    iframe: IframeEmbed,
    image: AssetEmbed,
    interactive: PymInteractiveIframeEmbed,
    instagram: InstagramEmbed,
    justwatch: JustWatchEmbed,
    livestory: ExternalLinkEmbed,
    mastodon: MastodonEmbed,
    nativearticle: ContentCardEmbed,
    nativegallery: GalleryEmbed,
    pinterest: PinterestEmbed,
    product: ProductEmbed,
    unifiedProductCard: UnifiedProductCard,
    contentreference: ProductEmbed,
    recipe: ContentCardEmbed,
    review: ReviewEmbed,
    section: SectionEmbed,
    'sidebar:article': SidebarArticle,
    'sidebar:heading': SidebarHeading,
    shoppableImage: ShoppableAssetEmbed,
    threads: ThreadsEmbed,
    twitter: TwitterEmbed,
    venue: ProductEmbed,
    video: IframeEmbed,
    visualstory: VisualStorySingleCard,
    clipVideo: ResponsiveClip
};
/**
 * Return object used by `jsonmltoreact` to render inline embeds. Result includes
 * a ReactComponent (type) and the properties it should be rendered with (props)
 *
 * @param {object} jsonMLAttributes - the attributes object associated with the `inline-embed` element
 * @returns {object} - Component to be rendered and properties to give it
 */
module.exports = function mapInlineEmbeds(jsonMLAttributes = {}) {
    const { props, type } = jsonMLAttributes;
    // added contentType in props to distinguish b/w a product and a venue in ProductEmbed
    if (props) {
        props.contentType = type;
    }
    if (props && type === 'cneembed') {
        props.videoEmbedPosition = inlineEmbedPosition;
    }
    if (props && type === 'cneinterlude') {
        props.videoEmbedPosition = inlineInterludePosition;
    }
    if (props &&
        props.shouldConsiderArticleEmbedForGallery &&
        type === 'gallery') {
        return {
            type: embeds.article,
            props
        };
    }
    if (props &&
        props.isUpcEnabled &&
        ['contentreference', 'product'].includes(type)) {
        const product = {
            ...props,
            id: props.productId,
            brand: {
                name: props.productBrand
            },
            offers: props.multipleOffers
        };
        return {
            type: embeds.unifiedProductCard,
            props: {
                ...props,
                offers: props.multipleOffers,
                brand: props.productBrand,
                type: 'embed',
                layout: 'ProductEmbed',
                data_item: { ...product },
                isLazy: true,
                hasImageCreditText: checkImageCreditText(props.image)
            }
        };
    }
    return {
        type: embeds[type],
        props
    };
};
//# sourceMappingURL=map-inline-embeds.js.map

/***/ }),

/***/ 74804:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.processSidebarHeadings = exports.processTiktok = exports.processCeros = exports.processInternalLink = exports.processLinks = void 0;
const internalLinkEmbed = __webpack_require__(41506);
const ExternalLink = __webpack_require__(39832);
const Ceros = __webpack_require__(52818);
const Tiktok = __webpack_require__(79244);
const SidebarHeading = __webpack_require__(36382);
/**
 * Return object used by `jsonmltoreact` to render links. Result includes
 * a ReactComponent (type) and the properties it should be rendered with (props)
 *
 * @param {object} props - props set on the link node
 * @returns {object} - Component to be rendered and properties to give it
 */
function processLinks(props) {
    const { isExternal, ...linkProps } = props;
    return {
        type: isExternal ? ExternalLink : 'a',
        props: linkProps
    };
}
exports.processLinks = processLinks;
function processInternalLink({ props }) {
    return {
        type: internalLinkEmbed,
        props
    };
}
exports.processInternalLink = processInternalLink;
function processCeros(jsonMLAttributes = {}) {
    let width = 1;
    let height = 1;
    let mobileWidth = 1;
    let mobileHeight = 1;
    try {
        width = parseInt(jsonMLAttributes.width, 10);
        height = parseInt(jsonMLAttributes.height, 10);
        mobileWidth = parseInt(jsonMLAttributes.mobilewidth, 10);
        mobileHeight = parseInt(jsonMLAttributes.mobileheight, 10);
    }
    catch (e) {
        console.error('Failed to process ceros embed', jsonMLAttributes);
    }
    return {
        type: Ceros,
        props: {
            width,
            height,
            mobileWidth,
            mobileHeight,
            url: jsonMLAttributes.url
        }
    };
}
exports.processCeros = processCeros;
function processTiktok(jsonMLAttributes = {}) {
    return {
        type: Tiktok,
        props: {
            tiktokUrl: jsonMLAttributes.url
        }
    };
}
exports.processTiktok = processTiktok;
/**
 * Check h2 nodes for whether they belong to a sidebar, and use the SidebarHeading element for those
 *
 * @param {object} jsonMLAttributes - the attributes on the h2 node
 * @returns {object} - Component to be rendered and properties to give it
 */
function processSidebarHeadings(jsonMLAttributes = {}) {
    if (jsonMLAttributes.type === 'sidebar:heading') {
        return { type: SidebarHeading, props: jsonMLAttributes.props };
    }
    return jsonMLAttributes;
}
exports.processSidebarHeadings = processSidebarHeadings;
//# sourceMappingURL=process-embeds.js.map

/***/ }),

/***/ 7258:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { proxyApiRoutes } = __webpack_require__(15822);
const { fetchWithTimeout } = __webpack_require__(91250);
const MAX_TIMEOUT = 5000;
/**
 * Attempt to autolink a user's account to a CDS account using the user platform proxy endpoint
 * Or local user platform gateway server url
 *
 * @param {object} opts - request opts
 * @param {string} opts.amgUUID - the user's amgUUID
 * @param {string} opts.body - JSON serialized object containing brand's siteCode (ex. '{"siteCode": "AD"}')
 * @param {string} opts.userPlatformProxy - user platform proxy base route from tenant config, ex. https://stag2.wired.com/api/up
 * @param {string} opts.xClientID - brand sdk client to pass as request header x-client value (e.g. Verso-Wired)
 * @returns Promise<object> returns response object with completed set to true upon success or false upon failure
 */
const autolinkAccount = async ({ amgUUID, body, userPlatformProxy, xClientID }) => {
    const response = await fetchWithTimeout(`${userPlatformProxy}${proxyApiRoutes.userDetails}/${amgUUID}/subscriptions/autolink`, {
        body,
        credentials: 'include',
        headers: {
            'Content-Type': 'application/json',
            'x-client': xClientID
        },
        method: 'POST'
    }, MAX_TIMEOUT);
    const { data: { authToken } = {} } = await response.json();
    if (authToken) {
        return {
            completed: true
        };
    }
    return {
        completed: false
    };
};
module.exports = {
    autolinkAccount
};
//# sourceMappingURL=autolink.js.map

/***/ }),

/***/ 17009:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

const { proxyApiRoutes } = __webpack_require__(15822);
const { fetchWithTimeout } = __webpack_require__(91250);
const MAX_TIMEOUT = 5000;
/**
 * Fetch user entitlements from UPG using either brand upg proxy server or local upg app server
 *
 * @param {object} opts - request options object
 * @param {string} opts.amgUUID - user amguuid
 * @param {string} opts.userPlatformProxy - brand upg proxy server
 * @param {string} opts.xClientID - brand x-client
 *
 * @returns {Promise<object>} response object with user entitlements data
 */
exports.getEntitlements = async ({ amgUUID, userPlatformProxy, xClientID }) => {
    const apiURL = `${userPlatformProxy}${proxyApiRoutes.userDetails}/${amgUUID}/entitlements`;
    try {
        return await fetchWithTimeout(apiURL, {
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json',
                'x-client': xClientID
            },
            method: 'GET'
        }, MAX_TIMEOUT);
    }
    catch (error) {
        const errorStatus = error.status || 400;
        throw new Error(`${errorStatus} - Error fetching user entitlements: ${error.message}`);
    }
};
exports.getAccessCondeEntitlements = async ({ xClientID, accessCondeBaseUrl }) => {
    const apiURL = `${accessCondeBaseUrl}v1/public/entitlements?active=true`;
    try {
        const res = await fetchWithTimeout(apiURL, {
            credentials: 'include',
            headers: {
                'Content-Type': 'application/json',
                'user-agent': `verso-${xClientID}`
            },
            method: 'GET'
        }, MAX_TIMEOUT);
        if (res.status !== 200) {
            const msg = await res.text();
            const err = new Error(msg);
            err.status = res.status;
            throw err;
        }
        return res;
    }
    catch (error) {
        const errorStatus = error.status || 500;
        console.error(`Error fetching user entitlements from access.conde reason: ${error.message}, http status: ${errorStatus}`);
        // silently fail as this is not a critical call
        return null;
    }
};
//# sourceMappingURL=getEntitlements.js.map

/***/ }),

/***/ 79577:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const autolink = __webpack_require__(7258);
const { getEntitlements, getAccessCondeEntitlements } = __webpack_require__(17009);
const subscriptionLink = __webpack_require__(41289);
const transformEntitlements = __webpack_require__(76341);
const validateEntitlement = __webpack_require__(67128);
module.exports = {
    autolink,
    getEntitlements,
    getAccessCondeEntitlements,
    subscriptionLink,
    ...transformEntitlements,
    validateEntitlement
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 41289:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { proxyApiRoutes } = __webpack_require__(15822);
const { fetchWithTimeout } = __webpack_require__(91250);
const cookieHelper = __webpack_require__(56892);
const cookies = (__webpack_require__(53788)["default"]);
const { oidcCookies } = cookies;
const MAX_TIMEOUT = 5000;
/**
 * Manually link a user's subscription using the user platform proxy endpoint
 *
 * @param {object} opts - request opts
 * @param {string} opts.amgUUID - the user's amgUUID
 * @param {object} opts.body - object containing either a number form payload or an address form payload
 * @param {string} opts.userPlatformProxy - user platform proxy base route from tenant config, ex. https://stag2.wired.com/api/up
 * @param {string} opts.xClientID - brand sdk client to pass as request header x-client value (e.g. Verso-Wired)
 * @returns {Promise<object>} returns the response body from the fetch route
 */
const subscriptionLink = ({ amgUUID, body: payload, xClientID, userPlatformProxy }) => {
    return fetchWithTimeout(`${userPlatformProxy}${proxyApiRoutes.userDetails}/${amgUUID}/subscriptions/link`, {
        body: JSON.stringify(payload),
        credentials: 'include',
        headers: {
            'Content-Type': 'application/json',
            'x-client': xClientID
        },
        method: 'POST'
    }, MAX_TIMEOUT);
};
/**
 * contract linking to access their digital profile.
 *
 * @param {string} accessDomain - The domain for accessing entitlement token
 * @param {string} martechDomain - The domain of link contract api
 * @param {string} body - It contains contract number
 */
const dpvContractLink = async (accessDomain, martechDomain, body) => {
    const token = cookieHelper.getCookie(oidcCookies.access);
    // Make the first API request to link the contract
    const response = await fetchWithTimeout(`https://${martechDomain}/epep/api/dpv/link-contract`, {
        body: JSON.stringify(body),
        credentials: 'include',
        mode: 'cors',
        headers: {
            'Content-Type': 'application/json',
            Authorization: `Bearer ${token}`
        },
        method: 'POST'
    }, MAX_TIMEOUT);
    const cookieDomain = cookieHelper.getCookieDomainFromHostname();
    // delete CN_access cookie if already present
    cookieHelper.deleteCookie('CN_access', cookieDomain);
    // Make a fetch call to access code to get entitlement token
    await fetchWithTimeout(`${accessDomain}v2/public/fetch`, {
        credentials: 'include',
        headers: {
            'Content-Type': 'application/json',
            Authorization: `Bearer ${token}`
        }
    }, MAX_TIMEOUT);
    // Handling the different response statuses
    if (response.status === 409) {
        const responseBody = await response.json();
        return { status: 'conflict', errorMessage: responseBody?.errorMessage };
    }
    if (response.status === 400) {
        return { status: 'not found' };
    }
    if (response.ok) {
        return { status: 'success' };
    }
    // If no return has happened in the above conditions, ensure to return a default value
    return { status: 'error', errorMessage: 'Unknown error' };
};
module.exports = {
    subscriptionLink,
    dpvContractLink
};
//# sourceMappingURL=subscription-link.js.map

/***/ }),

/***/ 76341:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const filter = __webpack_require__(87612);
const find = __webpack_require__(7309);
const get = __webpack_require__(58156);
const groupBy = __webpack_require__(94394);
const isEmpty = __webpack_require__(62193);
const orderBy = __webpack_require__(42877);
const transform = __webpack_require__(69752);
const findKey = __webpack_require__(20826);
const omit = __webpack_require__(90179);
const shiroTrie = __webpack_require__(79469);
const GOOGLE_ACTIVE_ENTITLEMENT_STATUSES = ['ACTIVE', 'PURCHASED'];
const CDS_ACTIVE_ENTITLEMENT_STATUSES = ['active'];
const internals = {};
internals.ORG_ACCESS_PRODUCT_TYPE = {
    buttonHref: null,
    buttonLabel: null,
    dangerousDek: 'You have complimentary digital access to [BRAND] as a Condé Nast employee. If you have questions please visit the #employee-digital-access Slack channel.',
    providerId: 'org-access'
};
/**
 * Product object type definition returned from entitlement service.
 *
 * @typedef {object} Product - product object
 * @property {string} product - product identifier
 * @property {string} providerId - provider id
 * @property {string} name - product name
 * @property {string} status - entitlement status
 * @property {string} starts - start date
 * @property {string} expires - expires date
 */
/**
 * Receipt object type definition include a key for viewProfile of entitled products
 *
 * @typedef {object} Receipt - receipt object
 * @property {string} providerId - entitlement provider id
 * @property {Array<Product>} viewProfile - array of products containing name, providerId and status keys
 * @property {object} data - entitlement data
 * @property {string|number} expires - expiration date
 */
/**
 * ProductType object type definition include product key value to match a receipt viewProfile product.
 * It also include key values to map later to props in <AccountSubscriptionBox/> component for the matched product.
 *
 * @typedef {object} ProductType - productType object
 * @property {string} buttonHref - CTA button url
 * @property {string} buttonLabel - button label
 * @property {string} dangerousDek - subscription box description copy
 * @property {string} dangerousHed - hed copy
 * @property {string} product - product identifier
 * @property {string} providerId - product provider id } date
 */
/**
 * ProductType object type definition include product key value to match a receipt viewProfile product.
 * It also include key values to map later to props in <AccountSubscriptionBox/> component for the matched product.
 *
 * @typedef {object} stackingOrder - productStackingOrder object
 * @property {string} product - Product bought by the customer (in shiro format)
 * @property {string} source - Entitlement source
 */
internals.formatDate = function (date) {
    return date.toLocaleDateString('en', {
        year: 'numeric',
        month: 'numeric',
        day: 'numeric'
    });
};
/**
 * Retrieve all active receipts matching this brand's list of products.
 *
 * @param {Array<Receipt>} receipts - all user's receipts
 * @param {Array<ProductType>} productTypes - all the brand's product types (comes from tenant config)
 * @returns {Array<Product>} array of active receipts that match the products
 */
internals.getAllActiveReceiptsForBrand = (productTypes, receipts = []) => {
    /**
     * All the product names for a brand. For example, for the-new-yorker, this
     * would be `{ 'newyorker.com:basic' }`
     */
    const products = new Set(productTypes.map(({ product }) => product));
    return filter(receipts, (profile) => {
        const receiptProduct = get(profile, 'product', '');
        const receiptProviderId = get(profile, 'providerId', '');
        const entitlementExp = new Date(get(profile, 'expires', 0));
        const entitlementStatus = get(profile, 'status', '');
        // Special case for CN org access
        if (receiptProviderId.startsWith('org-access')) {
            return products.has(receiptProduct);
        }
        // Special case for Google
        // We'll match not only the providerId but also if the entitlement status is in the active list.
        // This is done, because not all receipts will have a 'status' field, but google-swg should.
        if (receiptProviderId.includes('google-swg')) {
            return (GOOGLE_ACTIVE_ENTITLEMENT_STATUSES.includes(entitlementStatus) &&
                products.has(receiptProduct) &&
                entitlementExp.getTime() >= Date.now());
        }
        // Special case for CDS, because they also have a status field that requires checking
        if (receiptProviderId.includes('cds') &&
            !receiptProviderId.includes('cdsuk')) {
            return (CDS_ACTIVE_ENTITLEMENT_STATUSES.includes(entitlementStatus.toLowerCase()) &&
                products.has(receiptProduct) &&
                entitlementExp.getTime() >= Date.now());
        }
        return (products.has(receiptProduct) && entitlementExp.getTime() >= Date.now());
    });
};
/**
 * Retrieve the product with the expiration date from the latest active receipt matching that product.
 * In the case that there are multiple active receipts for a particular product,
 * select the latest expiration date from all the currently active receipts.
 *
 * @param {Array<Receipt>} activeReceipts - all the user's active receipts for this brand
 * @param {Array<ProductType>} productTypes - all the brand's product types (comes from tenant config)
 * @param {object} userEntitlements - userEntitlement data
 * @param {string} brandName - used to display brand name if entitled via org access
 * @returns {object|null} an object whose keys consists of the product identifier `${product}${providerId}`
 * and maps to ProductType values from tenant config and will become props for the <AccountSubscriptionBox/> component
 */
internals.getLatestActiveProducts = (activeReceipts, productTypes, brandName, userEntitlements = {}) => {
    if (isEmpty(activeReceipts) || isEmpty(productTypes)) {
        return null;
    }
    const receiptsByProductAndProviderId = groupBy(activeReceipts, (receiptProfile) => {
        return (get(receiptProfile, 'product', '') +
            get(receiptProfile, 'providerId', ''));
    });
    // If a receipt with no expiration date (expires: null) exists, it will be
    // considered the "latest" receipt
    const latestReceiptByProductAndProviderId = transform(Object.keys(receiptsByProductAndProviderId), (result, productAndProviderId) => {
        const transformed = result;
        const sortedReceipts = orderBy(receiptsByProductAndProviderId[productAndProviderId], ['expires'], ['desc']);
        transformed[productAndProviderId] = sortedReceipts[0] || {};
        return transformed;
    }, {});
    const mutableLatestReceipts = { ...latestReceiptByProductAndProviderId };
    return transform([...productTypes], (result, productType) => {
        const transformedResult = result;
        const productAndProviderId = `${productType.product}${productType.providerId}`;
        // If a receipt exists for this product and providerId
        if (mutableLatestReceipts[productAndProviderId]) {
            const expirationDate = internals.formatDate(new Date(get(mutableLatestReceipts[productAndProviderId], `expires`, 0)));
            transformedResult[productAndProviderId] = {
                ...productType,
                dangerousDek: productType.dangerousDek.replace(
                // eslint-disable-next-line no-template-curly-in-string
                '${expirationDate}', expirationDate)
            };
            // Remove this receipt from list of viable receipts
            // so that the catch-all can just find the remaining active receipts
            delete mutableLatestReceipts[productAndProviderId];
            // This should be the last productType and a catch-all
        }
        else if (!result[productType.product]) {
            const matchingReceipt = find(mutableLatestReceipts, (receipt) => get(receipt, 'product', '').includes(productType.product));
            if (matchingReceipt) {
                let activeProductType;
                const expirationDate = internals.formatDate(new Date(get(matchingReceipt, `expires`, 0)));
                const isEntitledViaOrgAccess = get(matchingReceipt, 'providerId', '').startsWith('org-access');
                if (isEntitledViaOrgAccess) {
                    activeProductType = { ...productType };
                    Object.assign(activeProductType, internals.ORG_ACCESS_PRODUCT_TYPE);
                }
                else if (productType.source === 'CNEE' &&
                    productType.providerId === '') {
                    // Set button label and text based on type of account if brand supports
                    const cdsEntitlements = get(userEntitlements, 'CDSEntitlements', {});
                    const cdsUKEntitlements = get(userEntitlements, 'CDSUKEntitlements', {});
                    activeProductType = { ...productType };
                    if (get(matchingReceipt, 'providerId', '').startsWith('cdsuk') &&
                        cdsUKEntitlements) {
                        Object.assign(activeProductType, cdsUKEntitlements);
                    }
                    else if (get(matchingReceipt, 'providerId', '').startsWith('cds') &&
                        cdsEntitlements) {
                        Object.assign(activeProductType, cdsEntitlements);
                    }
                }
                else {
                    return transformedResult;
                }
                transformedResult[productAndProviderId] = {
                    ...activeProductType,
                    dangerousDek: isEntitledViaOrgAccess
                        ? activeProductType.dangerousDek.replace('[BRAND]', `<i>${brandName}</i>`)
                        : productType.dangerousDek.replace(
                        // eslint-disable-next-line no-template-curly-in-string
                        '${expirationDate}', expirationDate)
                };
            }
        }
        return transformedResult;
    }, {});
};
/**
 *
 * Maps a PortalLink to a User Entitlement Data object that can then be
 * used for ex: to display a subscription card in the account profile
 *
 * @typedef {object} PortalLink
 * @property {string} productId - Product bought by the customer (in shiro format)
 * @property {string} provider - Payment provider on which the portal lives
 * @property {string} link - Link to the customer portal
 *
 * @param {Array<ProductType>} productTypes - All product types, from the tenant config
 *
 * @returns {object} - User Entitlement Data | null
 */
const portalLinkToUserEntitlement = ({ productId, provider, link }, productTypes) => {
    const match = productTypes.find((type) => {
        if (type.product) {
            /* to differentiate between vogue:web:basic and vogue:web:basic:uk by shiro */
            // const shiro = shiroTrie.newTrie().add(type.product);
            return type.source === 'martech' && type.product === productId;
        }
        return false;
    });
    return match
        ? {
            [`${productId}.${provider}.${link}`]: {
                ...match,
                buttonHref: link
            }
        }
        : null;
};
/**
 *
 * Filter active products list using order stacking validation
 *
 * @param {Array<stackingOrder>} productStackingOrder - product order stacking config from tenant config
 * @param latestActiveProducts - an array whose keys consists of the product identifier `${product}${providerId}`
 *
 * @returns {object} - an filtered object whose keys consists of the product identifier `${product}${providerId}`
 */
const checkProductsStackOrder = (productStackingOrder, latestActiveProducts) => {
    let hasProductMatched = false;
    productStackingOrder.forEach((element) => {
        const matchedKey = findKey(latestActiveProducts, (type) => {
            /* commenting the shiro check to address vogue:web:basic:uk reqirment. we need to consider vogue:web:basic and vogue:web:basic:uk as two different product groups */
            // const shiro = shiroTrie.newTrie().add(type.product);
            return type.source === element.source && element.product === type.product;
        });
        if (matchedKey && !hasProductMatched) {
            hasProductMatched = true;
        }
        else if (matchedKey && hasProductMatched) {
            // eslint-disable-next-line no-param-reassign
            latestActiveProducts = omit(latestActiveProducts, matchedKey);
        }
    });
    return latestActiveProducts;
};
/**
 *
 * Maps a Provider subscription management link to Mobile Entitlement Data object that can then be
 * used for ex: to display a subscription card in the account profile
 *
 * @typedef {object} epepEntitlements
 * @property {string} productId - Product bought by the customer (in shiro format)
 * @property {string} provider - Payment provider on which the portal lives
 * @property {string} link - Link to the customer portal
 * @property {string} source - source of the entitlement
 *
 * @param {Array<ProductType>} productTypes - All product types, from the tenant config
 *
 * @returns {object} - User Entitlement Data | null
 */
const epepEntitlementsToUserEntitlements = ({ productId, provider, link }, productTypes) => {
    const match = productTypes.find((type) => {
        if (type.product) {
            const shiro = shiroTrie.newTrie().add(type.product);
            return (type.source === 'EPEP' &&
                shiro.check(productId) &&
                type.providerId === provider);
        }
        return false;
    });
    return match
        ? {
            [`${productId}.${provider}.${link}`]: {
                ...match,
                buttonHref: link
            }
        }
        : null;
};
/**
 * Get the receipts from the fetched entitlements data and update the user entitlements object values
 * to later map to props in <AccountSubscriptionBox/> component
 *
 * @typedef {object} UserEntitlements - UserEntitlements object
 * @property {string} buttonHref - button CTA url, from the tenant config
 * @property {string} buttonLabel - button label, from the tenant config
 * @property {string} dangerousDek - dek copy, from the tenant config
 * @property {string} dangerousHed - hed copy, from the tenant config
 * @property {Array<ProductType>} productTypes - all product types, from the tenant config
 * @property {false} isUserEntitled - initial value for whether user is entitled, literally false
 *
 * @typedef {UserEntitlements & object} TransformedUserEntitlements - Transformered userEntitlements object
 * @property {object} latestActiveProducts - an object whose keys consists of the product identifier
 *   `${product}${providerId}`
 * @property {bool} isUserEntitled - whether user is entitled
 *
 * @param {object} fetchedCneeEntitlements - receipts fetched from entitlement service
 * @param {object} martechCustomerPortalLinks - customer portal links fetched through Martech's library
 * @param {object} accessCondeEntitlements - active entitlements fetched from EPEP by using access-conde API
 * @param {UserEntitlements} userEntitlements - user entitlements object
 * @param {string} brandName - used to display brand name if entitled via org access
 *
 * @returns {TransformedUserEntitlements} - transformed userEntitlements object
 */
const transformEntitlementsData = (fetchedCneeEntitlements, martechCustomerPortalLinks, accessCondeEntitlements, userEntitlements, brandName) => {
    const receipts = get(fetchedCneeEntitlements, 'data.fetchProfile.profile.viewProfile', []);
    const { productTypes = [], productStackingOrder = [], ...userEntitlementsProps } = userEntitlements;
    // Retrieve all currently active receipts for only this brand
    // (keyed off brand products, e.g. 'wired.com:basic'). Comes from tenant configs.
    const activeReceiptsForBrand = internals.getAllActiveReceiptsForBrand(productTypes, receipts);
    const cneeActiveProducts = internals.getLatestActiveProducts(activeReceiptsForBrand, productTypes, brandName, userEntitlements);
    const martechActiveProducts = martechCustomerPortalLinks
        ?.map((link) => portalLinkToUserEntitlement(link, productTypes))
        .reduce((acc, cur) => ({ ...acc, ...cur }), null);
    // further filtering down to only EPEP
    const activeEpepProducts = accessCondeEntitlements
        ?.map((entitlement) => epepEntitlementsToUserEntitlements(entitlement, productTypes))
        .reduce((acc, cur) => ({ ...acc, ...cur }), null);
    const hasCneeEntitlements = !!cneeActiveProducts;
    const hasMartechEntitlements = !!martechActiveProducts;
    const hasEPEPEntitlements = !!activeEpepProducts;
    let latestActiveProducts = (cneeActiveProducts ||
        martechActiveProducts ||
        activeEpepProducts) && {
        ...martechActiveProducts,
        ...cneeActiveProducts,
        ...activeEpepProducts
    };
    latestActiveProducts = checkProductsStackOrder(productStackingOrder, latestActiveProducts);
    // ordering latest active products, showing martech ones first
    return {
        latestActiveProducts,
        ...userEntitlementsProps,
        isUserEntitled: hasCneeEntitlements || hasMartechEntitlements || hasEPEPEntitlements,
        hasCneeEntitlements,
        hasMartechEntitlements,
        hasEPEPEntitlements
    };
};
module.exports = {
    __internals__: internals,
    transformEntitlementsData
};
//# sourceMappingURL=transformEntitlements.js.map

/***/ }),

/***/ 67128:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const autopilotPayment = __webpack_require__(78768);
/**
 * Helper to validate entitlement.
 * Proxies a validate request to the payment server via '/api/payment/validate'.
 *
 * As a response from the payment server, if the user's authentication token (CN_userAuth)
 * is validated, entitlement tokens will be created as cookies in the browser via 'Set-Cookie'
 * response headers, then on a further page load, these tokens will be added to the payment store,
 * as they are necessary for the paywall to operate.
 *
 * @param {object} payment - the payment object
 * @param {object} payment.entitlement - the entitlement object
 * @param {Array} payment.acceptableForms - list of acceptable forms of payment
 * @param {Array} payment.acceptableScopes - list of acceptable scopes of payment
 * @returns {undefined}
 */
const validatePayment = ({ entitlement, acceptableForms, acceptableScopes }) => {
    const { domain, server, enabled } = entitlement;
    if (!enabled) {
        return Promise.resolve();
    }
    return autopilotPayment
        .validator({
        document,
        domain,
        server,
        acceptableForms,
        acceptableScopes,
        storage: window.localStorage
    })
        .execute();
};
module.exports = {
    validatePayment
};
//# sourceMappingURL=validateEntitlement.js.map

/***/ }),

/***/ 55918:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { fetchWithTimeout } = __webpack_require__(57743);
const { loadData } = __webpack_require__(39836);
module.exports = {
    fetchWithTimeout,
    loadData
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 39836:
/***/ ((module) => {

/**
 * Wraps fetch call with the ability to timeout a request
 *
 * @param {string} url - fetch request URL
 * @returns {Promise} a promise for the fetched data. Rejects with an Error if fetch was not successful.
 */
async function loadData({ url, gtmEvent = null }) {
    if (window.dataLayer && gtmEvent) {
        window.dataLayer.push({ event: gtmEvent });
    }
    const response = await fetch(url);
    if (response.ok) {
        return response.json();
    }
    throw new Error(response.statusText);
}
module.exports = {
    loadData
};
//# sourceMappingURL=loadData.js.map

/***/ }),

/***/ 99167:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getGoogleApi = void 0;
const windowGapi = __webpack_require__(60783);
const getGoogleApiAsync = (resolve, reject) => {
    try {
        const gapi = windowGapi.getWindowGapi();
        if (!gapi) {
            setTimeout(() => getGoogleApiAsync(resolve, reject), 100);
        }
        else {
            resolve(gapi);
        }
    }
    catch (err) {
        reject(err);
    }
};
const getGoogleApi = () => new Promise((resolve, reject) => {
    getGoogleApiAsync(resolve, reject);
});
exports.getGoogleApi = getGoogleApi;
//# sourceMappingURL=GoogleApi.js.map

/***/ }),

/***/ 60783:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getWindowGapi = void 0;
const getWindowGapi = () => window.gapi;
exports.getWindowGapi = getWindowGapi;
//# sourceMappingURL=WindowGapi.js.map

/***/ }),

/***/ 69827:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.googleSignIn = void 0;
const { googleAuthenticate } = __webpack_require__(86969);
const googleSignInTracking = __webpack_require__(26830);
/**
 * Google sign in success handler
 *
 * @param {gapi.auth2.GoogleUser} googleUser - signed in user
 * @param {object} platformData - object of args for googleAuthenticate helper
 * @param {object} analyticsPayload - object containing appSource and any other analytics information for dataLayer
 *
 * @returns {object} - object containing loginResult of either 'login' or 'registration' if login was successful
 * otherwise, loginResult of 'failure'
 */
const googleSignIn = async (googleUser, platformData, analyticsPayload = {}) => {
    const { id_token: googleIdToken, access_token: googleAccessToken } = googleUser.getAuthResponse(true);
    const response = await googleAuthenticate({
        googleIdToken,
        googleAccessToken,
        ...platformData
    });
    const result = await response.json();
    const { data: { id: amguuid } = {} } = result;
    if (response.ok) {
        const loginResult = response.status === 200 ? 'login' : 'registration';
        return { loginResult, amguuid };
    }
    const analyticsPayloadWithError = {
        user: {
            account: {
                loginFailureMessage: 'auth_service_error'
            }
        },
        ...analyticsPayload
    };
    googleSignInTracking.trackGoogleSignInFailure(analyticsPayloadWithError);
    return { loginResult: 'failure' };
};
exports.googleSignIn = googleSignIn;
//# sourceMappingURL=GoogleSignIn.js.map

/***/ }),

/***/ 26830:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { googleAnalytics } = __webpack_require__(90090);
/**
 * Emits a google sign in attempt event
 *
 * @param {object} analyticsPayload - event payload
 * @returns {undefined} undefined
 */
const trackGoogleSignInAttempt = (analyticsPayload) => {
    googleAnalytics.emitGoogleTrackingEvent('login-attempt', {
        ...analyticsPayload,
        user: {
            account: {
                authProvider: 'google'
            }
        }
    });
};
/**
 * Emits a google sign in failure event
 *
 * @param {object} analyticsPayload - event payload
 * @returns {undefined} undefined
 */
const trackGoogleSignInFailure = (analyticsPayload) => {
    googleAnalytics.emitGoogleTrackingEvent('login-fail', {
        ...analyticsPayload,
        user: {
            account: {
                authProvider: 'google'
            }
        }
    });
};
module.exports = {
    trackGoogleSignInAttempt,
    trackGoogleSignInFailure
};
//# sourceMappingURL=GoogleSignInTracking.js.map

/***/ }),

/***/ 71482:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.signOut = void 0;
const googleApi = __webpack_require__(99167);
/**
 * Terminates the current website session in Google
 *
 * @returns {Promise<undefined>} - a Promise that is fulfilled when the user has been signed out
 */
const signOut = () => {
    return new Promise((resolve, reject) => {
        googleApi
            .getGoogleApi()
            .then((gapi) => {
            gapi.load('client:auth2', () => {
                gapi.auth2
                    .init({})
                    .then(() => {
                    gapi.auth2
                        .getAuthInstance()
                        .signOut()
                        .then((result) => resolve(result))
                        .catch((err01) => reject(err01));
                })
                    .catch((err02) => reject(err02));
            }, (err) => {
                throw err;
            });
        })
            .catch((err04) => reject(err04));
    });
};
exports.signOut = signOut;
//# sourceMappingURL=GoogleSignOut.js.map

/***/ }),

/***/ 26820:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { signOut } = __webpack_require__(71482);
const { googleSignIn } = __webpack_require__(69827);
module.exports = {
    googleSignIn,
    signOut
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 68089:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getOverrideBehaviour = void 0;
const getOverrideBehaviour = (interactiveOverride) => interactiveOverride?.markup && interactiveOverride?.behavior;
exports.getOverrideBehaviour = getOverrideBehaviour;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 72550:
/***/ ((module) => {

/**
 * Home for all interlude positioning strategies for gallery pages
 * These all take an optional options parameter
 */
module.exports = {
    default: ({ index }) => index,
    disable: () => null,
    end: ({ length }) => length - 1
};
//# sourceMappingURL=gallery-strategies.js.map

/***/ }),

/***/ 15316:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const galleryStrategies = __webpack_require__(72550);
const recipeStrategies = __webpack_require__(85480);
const reviewStrategies = __webpack_require__(17130);
// by default, insert interlude in first chunk
const DEFAULT_TARGET_INDEX = 0;
const DEFAULT_TARGET_METHOD = 'default';
const DEFAULT_TARGET_OPTIONS = { index: DEFAULT_TARGET_INDEX };
const noop = () => { };
/**
 * Determines where the interlude should go on the page
 *
 * @param {object} contentTypeConfig - interlude config object for a particular content type
 * @param {object} insertionStrategies - interlude insertion strategies for a given content type
 * @param {object} [contentTypeConfig.strategy] - insertion strategy object
 * @param {boolean} [contentTypeConfig.strategy.enabled] - is interlude enabled for the given content type?
 * @param {string} [contentTypeConfig.strategy.method] - body targeting method for the given content type
 * @param {object} [contentTypeConfig.strategy.options] - body targeting options for the content type
 * @param {number} length - the number of chunks on the page
 * @param {number} offsetInterludePosition - interlude position offset that accounts for body chunk variations
 * @returns {Array} array of chunk ReactElements
 */
const getInterludePosition = (contentTypeConfig, insertionStrategies, length, offsetInterludePosition) => {
    const { strategy: { enabled, method = DEFAULT_TARGET_METHOD, options = offsetInterludePosition
        ? { index: offsetInterludePosition }
        : DEFAULT_TARGET_OPTIONS } = {} } = contentTypeConfig;
    const insertInterlude = insertionStrategies[method] || noop;
    return enabled && insertInterlude({ length, ...options });
};
module.exports = {
    getInterludePosition,
    galleryStrategies,
    recipeStrategies,
    reviewStrategies
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 85480:
/***/ ((module) => {

/**
 * Home for all interlude positioning strategies for recipe pages
 * These all take an optional options parameter
 */
module.exports = {
    default: () => 'default',
    disable: () => null,
    start: () => 'start'
};
//# sourceMappingURL=recipe-strategies.js.map

/***/ }),

/***/ 17130:
/***/ ((module) => {

/**
 * Home for all interlude positioning strategies for gallery pages
 * These all take an optional options parameter
 */
module.exports = {
    default: ({ index }) => index,
    disable: () => null,
    end: ({ length }) => length - 1
};
//# sourceMappingURL=review-strategies.js.map

/***/ }),

/***/ 54370:
/***/ ((module) => {

/**
 * function which merges React refs into one.
 * Supports both functions and ref objects created using createRef() and useRef().
 *
 * @param {Array} inputRefs - Input Ref Array
 * @returns {any}  Merged refs
 */
function mergeRefs(...inputRefs) {
    const filteredInputRefs = inputRefs.filter(Boolean);
    if (filteredInputRefs.length <= 1) {
        const firstRef = filteredInputRefs[0];
        return firstRef || null;
    }
    return function mergedRefs(ref) {
        filteredInputRefs.forEach((inputRef) => {
            if (typeof inputRef === 'function') {
                inputRef(ref);
            }
            else if (inputRef) {
                inputRef.current = ref;
            }
        });
    };
}
module.exports = {
    mergeRefs
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 26890:
/***/ ((module) => {

/**
 * Determines if the stacked navigation primary links scroll state should
 * be updated based on the current state and actual scrolling information.
 *
 * If the scrolling strategy is 'delta' the scrolling state is updated whenever
 * the current scrolling position distance from the last scrolling position is
 * greater than the delta, or if the current scroll position is 0 (top of the screen).
 *
 * If the scrolling strategy is not 'delta' then the default strategy is used, which
 * determines that the scrolling state must be updated whenever the current scroll position
 * is 0 (top of the screen) or when the current scroll position is greater than 0 and the
 * state was not already scrolled.
 *
 * @param {boolean} isScrolled - whether the navigation bar is currently scrolled
 * @param {number} scrollTop - current scroll position
 * @param {number} lastScrollPosition - last scroll position
 * @param {string} strategy - strategy used to show/hide the navigation bar
 *
 * @returns {boolean} if the scroll state should be updated
 */
const shouldUpdateScroll = (isScrolled, scrollTop, lastScrollPosition, strategy) => {
    return (scrollTop === 0 ||
        (strategy === 'delta'
            ? Math.abs(scrollTop - lastScrollPosition) > 100
            : !isScrolled));
};
module.exports = {
    shouldUpdateScroll
};
//# sourceMappingURL=scrollHelper.js.map

/***/ }),

/***/ 12782:
/***/ ((module) => {

module.exports = function fetchRecommendations(queryParamsString, recommendationsApiUrl) {
    const requestUrl = `${recommendationsApiUrl}?${queryParamsString}`;
    return fetch(requestUrl)
        .then((res) => res.json())
        .then((res) => res.data)
        .catch((error) => {
        console.warn(`Fetching of Recommendations API fails: ${error}`);
    });
};
//# sourceMappingURL=fetch.js.map

/***/ }),

/***/ 86399:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

/* eslint-disable import/no-extraneous-dependencies */
const { stringify } = __webpack_require__(47186);
/* eslint-enable import/no-extraneous-dependencies */
const get = __webpack_require__(58156);
const fetch = __webpack_require__(12782);
const transform = __webpack_require__(85366);
const { getCookie } = __webpack_require__(56892);
const { basicMarkdownToHtml } = __webpack_require__(55866);
const sparrow = 
// eslint-disable-next-line global-require
 true && __webpack_require__(31170);
const XID_COOKIE_KEY = 'CN_xid';
/**
 * A custom hook for client-side fetching from the recommendations API
 *
 * @param {object} props - React props
 * @param {string} props.applicationID - applicationID (request param specified in tenant componentConfig settings)
 * @param {string} props.contentTypes - comma separated list of contentTypes (request param specified in tenant componentConfig settings)
 * @param {string} props.language - the expected language to see the recommendations
 * @param {number} props.numberOfDays - number of days to go back (request param specified in tenant componentConfig settings)
 * @param {number} props.pageSize - number of results to fetch (request param specified in tenant componentConfig settings)
 * @param {object} props.renditions - entire renditions config
 * @param {string} props.strategy - recommendations strategy to use (e.g. "popular", "related") (request param specified in tenant componentConfig settings)
 * @param {string} props.variationName - variationName for the Recirc
 * @param {string} recommended - Recommended Items to add in the list
 * @param {string} categoriesMap - Categories of the item.
 * @param {boolean} shouldPersonalize - whether to fetch personalized results or not
 * @param {string} renditionsPath - renditions key for transforming media results
 * @param {object} featureFlags - tenant featureFlags
 * @param {object} signageConfig - Optional tenant signageConfig to display signages
 * @param {boolean} useTrailingSlash - if tenant requires trailing slash for URLs
 * @param {object} recommendations - recommendations config set
 *
 * @returns {Promise} transformed recommendation results
 */
module.exports = async function getRecommendations(props, shouldPersonalize, renditionsPath, featureFlags = {}, signageConfig = {}, useTrailingSlash = false, recommendations = {}) {
    const { applicationID, categories, contentTypes, excludeCategories, language, numberOfDays, pageSize, renditions, strategy, variationName } = props;
    const { content, page } = get(window, 'dataLayer[0]', {});
    const params = {
        applicationID,
        brand: content && content.brandSlug,
        url: page && page.canonical,
        copilotId: content.contentId,
        ...(categories ? { 'filter[category]': categories } : {}),
        ...(excludeCategories ? { 'exclude[category]': excludeCategories } : {}),
        ...(numberOfDays ? { 'filter[numberOfDays]': numberOfDays } : {}),
        ...(strategy ? { 'filter[strategy]': strategy.toUpperCase() } : {}),
        ...(language ? { 'filter[language]': language } : {}),
        'page[size]': pageSize
    };
    if (!params.applicationID || !params.brand || !params.url) {
        return [];
    }
    if (shouldPersonalize) {
        const xid = getCookie(XID_COOKIE_KEY);
        if (xid) {
            params.xid = xid;
        }
    }
    const queryString = stringify(params);
    const contentTypesList = contentTypes?.toUpperCase().split(',');
    const queryStringWithContent = contentTypes
        ? contentTypesList.reduce((currentString, contentType) => `${currentString}&filter%5BcontentType%5D=${contentType}`, queryString)
        : queryString;
    if (!recommendations.recommendationsApiUrl) {
        return [];
    }
    try {
        const response = await fetch(queryStringWithContent, recommendations.recommendationsApiUrl);
        const items = await response.json();
        if (!items || !items.length) {
            sparrow.emitUniqueSparrowTrackingEvent('variations_recommendation', 'failed-fallback', {
                _v: pageSize,
                dim1: `${applicationID}_${strategy}`,
                dim2: params,
                dim3: strategy,
                dim6: variationName
            });
            return [];
        }
        return items.map((item) => {
            const mappedItem = {
                ...item,
                title: basicMarkdownToHtml(item.title),
                dek: basicMarkdownToHtml(item.dek),
                variationName,
                signageConfig
            };
            return transform()(mappedItem, renditions, renditionsPath, featureFlags, item.channels, useTrailingSlash);
        });
    }
    catch (error) {
        // Handle fetch error here if necessary
        console.error('Error fetching recommendations:', error);
        return [];
    }
};
//# sourceMappingURL=get-recommendations.js.map

/***/ }),

/***/ 85366:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const get = __webpack_require__(58156);
const pick = __webpack_require__(44383);
const startCase = __webpack_require__(90128);
const vulcan = __webpack_require__(25888);
const { mapSourcesToSegmentedSources } = __webpack_require__(52009);
const { convertToCNErenditions, categoryToFunctionalTags } = __webpack_require__(55866);
const { default: createCloudinarySources } = __webpack_require__(81478);
const { convertRubric } = __webpack_require__(14920);
const { namesToAuthors } = __webpack_require__(55866);
const { getRubricRepresentation } = __webpack_require__(33186);
const { getSignage } = __webpack_require__(60595);
const { default: getImageWidths } = __webpack_require__(97906);
const { addTrailingSlashToUrl } = __webpack_require__(44860);
/**
 * Transforms a copilot media URL using a given media processor
 *
 * Attempts to maintain parity with the logic in the createVulcanSources() function:
 * https://github.com/CondeNast/verso/blob/main/src/transformer-helpers/create-vulcan-sources.ts#L46-L57
 *
 * @param {object} photoConfig - a renditions config object
 * @param {string} mediaUrl - a URL to a media asset
 *
 * @returns {object} - sources object with transformed URLs
 */
function getSources(photoConfig, mediaUrl) {
    return Object.keys(photoConfig).reduce((acc, breakpoint) => {
        const valuesToKeep = pick(photoConfig[breakpoint], [
            'aspectRatio',
            'height',
            'width'
        ]);
        // generating the srcset
        const imageWidths = getImageWidths(valuesToKeep.width);
        const srcset = imageWidths
            .map((imageWidth) => {
            const imageUrl = vulcan.modify(mediaUrl, {
                ...photoConfig[breakpoint],
                width: imageWidth
            });
            return `${imageUrl} ${imageWidth}w`;
        })
            .join(', ');
        acc[breakpoint] = {
            ...valuesToKeep,
            url: vulcan.modify(mediaUrl, photoConfig[breakpoint]),
            srcset
        };
        return acc;
    }, {});
}
/**
 * First class function that can wrap transformer with parser
 *
 * @param {Function} parseFunc - optional parsing function
 * @param {object} scope - optional scope
 *
 * @returns {Function} - function that transforms the data from an item from recommendations into the shape
 * that a SummaryItem is expecting
 */
module.exports = function transformRecommendationsItem(parseFunc = (text) => text, scope = null) {
    /**
     * Transforms the data from an item from recommendations into the shape
     * that a SummaryItem is expecting
     *
     * @param {object} item - recommendations response item
     * @param {object} renditions - all renditions
     * @param {string} renditionsPath - renditions path name
     * @param {object} featureFlags - tenant featureFlags
     * @param {boolean} shouldUseImageWithoutAnchorLink -  should use span for image at place of anchor link
     * @param {Array} channels - the full channels information from the recs API, for use if the above FF is true
     * @param {boolean} shouldUseTrailingSlashInRecirc - if should add trailing slashes
     *
     * @returns {object} - transformed recommendations item
     */
    return (item, renditions, shouldUseImageWithoutAnchorLink, shouldUseTrailingSlashInRecirc, renditionsPath = 'recircList', featureFlags = {}, channels = []) => {
        const { awards, authors, brand, copilotID, categories = [], dek, // Note: the recs API only returns one dek (promoDek || socialDek || socialDek) from copilot atm. see #3772 for details
        image_url: toutImageURL, ledeImageURL, section, title, url, variationName, signageConfig = {} } = item;
        const { shouldUsePromoImageInRecommendations, shouldExtractRecircRubricFromCategories } = featureFlags;
        const contentType = item.contentType
            ? item.contentType.toLowerCase()
            : item.metadata.contentType.toLowerCase();
        const mediaUrl = !shouldUsePromoImageInRecommendations && ledeImageURL
            ? ledeImageURL
            : toutImageURL;
        const CNE_IMG_PATH = 'image/upload';
        const isCNEVideo = (contentType === 'video' || contentType === 'cnevideo') &&
            mediaUrl?.includes(CNE_IMG_PATH);
        const photoRenditions = variationName
            ? get(renditions, `${renditionsPath}.${variationName}`)
            : get(renditions, renditionsPath);
        const photoConfig = isCNEVideo
            ? convertToCNErenditions(photoRenditions)
            : photoRenditions;
        let image;
        if (mediaUrl && photoConfig) {
            const sources = isCNEVideo
                ? createCloudinarySources(photoConfig, mediaUrl)
                : getSources(photoConfig, mediaUrl.replace(',h_85', '') // hack: removing the height param here for better quality
                );
            image = {
                altText: get(item, 'thumbnailImage.altText', ''),
                segmentedSources: mapSourcesToSegmentedSources(sources),
                sources
            };
            if (shouldUseImageWithoutAnchorLink && image) {
                image.showImageWithoutLink = true;
            }
        }
        let rubricFromCategories = {};
        if (shouldExtractRecircRubricFromCategories) {
            const { name, url: rubricUrl } = // url is already a prop referring to href of the article itself, not the rubric url
             getRubricRepresentation({
                channels,
                featureFlags
            }) || {};
            rubricFromCategories = {
                name,
                url: rubricUrl
            };
        }
        const functionalTagCategory = Array.isArray(categories)
            ? categories.filter((category) => category.indexOf('functional-tags') > -1)
            : [];
        const functionalTag = categoryToFunctionalTags(functionalTagCategory);
        const { signageBy, signageMapper } = signageConfig;
        let signageOption;
        if (signageBy === 'FunctionalTags') {
            signageOption = functionalTag;
        }
        const signage = getSignage(signageBy, signageMapper, signageOption);
        return {
            awards,
            brand,
            contributors: {
                author: {
                    items: namesToAuthors(authors, contentType, startCase(brand))
                }
            },
            contentType,
            copilotID,
            dangerousHed: parseFunc.call(scope, title),
            dangerousDek: parseFunc.call(scope, dek),
            image,
            rubric: convertRubric(contentType, {
                name: rubricFromCategories.name || section,
                ...(rubricFromCategories.url && { url: rubricFromCategories.url })
            }),
            signage,
            url: shouldUseTrailingSlashInRecirc ? addTrailingSlashToUrl(url) : url
        };
    };
};
//# sourceMappingURL=transform.js.map

/***/ }),

/***/ 96918:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

const parseQueryParams = __webpack_require__(10604);
const BLACKLIST_URLS = [
    '/account/request-password-reset',
    '/account/reset-password',
    '/account/sign-in',
    '/account/sign-up'
];
/**
 * Parse full URI for query params and returns them in a key/value object map
 *
 * @param {string} searchString - the full URI
 * @returns {object} mapping of query param names to values
 * @private
 */
function _parseQueryParams(searchString) {
    try {
        decodeURIComponent(searchString);
    }
    catch (err) {
        return {};
    }
    if (!searchString ||
        typeof searchString !== 'string' ||
        !searchString.length) {
        return {};
    }
    return searchString
        .substr(searchString.lastIndexOf('?') + 1) // remove everything before '?'
        .split('&') // split on param separator
        .reduce((acc, pair) => {
        const [name, val] = pair.split('=');
        if (val) {
            acc[decodeURIComponent(name)] = decodeURIComponent(val);
        }
        return acc;
    }, {}); // aggregate into param map
}
/**
 * Tests to see if referring url contains partial url in blacklist.
 *
 * @param {string} referrer - the document.referrer
 * @returns {boolean} whether the referring url is blacklisted
 * @private
 */
function _inBlackList(referrer) {
    let isInList = false;
    BLACKLIST_URLS.forEach((URL) => {
        if (referrer.indexOf(URL) >= 0) {
            isInList = true;
        }
    });
    return isInList;
}
/**
 * Check a redirectURL to see if it's an allowed redirect.
 * The rules are:
 * - Allow relative urls
 * - Allow urls from a different subdomain
 * - Do not allow urls from a different domain than what is in the tenant config
 *
 * @param {string} redirectURL - the redirectURL to test
 * @returns {boolean} true if redirectURL is an allowed redirect
 */
function _isRedirectURLAllowed(redirectURL = '') {
    try {
        decodeURIComponent(redirectURL);
    }
    catch (err) {
        return false;
    }
    if (redirectURL.startsWith('/')) {
        // Allow relative urls
        return true;
    }
    try {
        const domainRegex = /\w+.\w+$/;
        const fullDomain = window.location.hostname;
        const redirectFullURL = new URL(redirectURL);
        const [domainWithoutSub] = domainRegex.exec(fullDomain) || [];
        // Allow different subdomains
        if (new RegExp(domainWithoutSub).exec(redirectFullURL.hostname)) {
            return true;
        }
    }
    catch (err) {
        return false;
    }
    return false;
}
/**
 * This is the default redirect helper for account sign-in and sign-up.
 * This should automatically redirect after successful sign-in or sign-up.
 *
 * @param {object} options - the redirect options
 * @param {string} options.defaultRedirectURL - the default tenant configurable redirect URL
 * @param {string} options.overridingRedirectUrl - this URL trumps everything else
 * @returns {undefined}
 */
exports.detour = function ({ defaultRedirectURL = '/', overridingRedirectUrl = '' }) {
    let { redirectURL: queryParamRedirectURL = '' } = parseQueryParams(window.location.search);
    queryParamRedirectURL = _isRedirectURLAllowed(queryParamRedirectURL)
        ? queryParamRedirectURL
        : '';
    let { redirectURL: documentReferrerRedirectURL } = _parseQueryParams(`${document.referrer}`);
    documentReferrerRedirectURL = _isRedirectURLAllowed(documentReferrerRedirectURL)
        ? documentReferrerRedirectURL
        : '';
    let referringURL = _inBlackList(document.referrer) || !_isRedirectURLAllowed(document.referrer)
        ? ''
        : document.referrer;
    referringURL = referringURL || documentReferrerRedirectURL;
    const defaultRedirect = _inBlackList(defaultRedirectURL) ||
        !_isRedirectURLAllowed(defaultRedirectURL)
        ? '/'
        : defaultRedirectURL;
    const allowedOverridingRedirectUrl = _isRedirectURLAllowed(overridingRedirectUrl)
        ? overridingRedirectUrl
        : '';
    const redirectURL = allowedOverridingRedirectUrl ||
        queryParamRedirectURL ||
        referringURL ||
        defaultRedirect;
    window.location.assign(redirectURL);
};
//# sourceMappingURL=defaultRedirect.js.map

/***/ }),

/***/ 89143:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const defaultRedirect = __webpack_require__(96918);
const { isInternalRedirect, getRedirectSource } = __webpack_require__(15466);
const isRedirectedInternallyForFirstTime = __webpack_require__(46186);
module.exports = {
    defaultRedirect,
    isInternalRedirect,
    getRedirectSource,
    isRedirectedInternallyForFirstTime
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 15466:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { parseQueryParams } = __webpack_require__(12311);
/**
 * Indicates if redirect has happened from local sites.
 *
 * @returns {boolean} true if it is redirected from local sites
 */
const isInternalRedirect = () => {
    const queryParams = parseQueryParams(window.location.search);
    return ((queryParams.utm_source && queryParams.utm_medium === 'internal') || false);
};
const getRedirectSource = () => {
    const queryParams = parseQueryParams(window.location.search);
    return queryParams.utm_source;
};
module.exports = {
    isInternalRedirect,
    getRedirectSource
};
//# sourceMappingURL=isInternalRedirect.js.map

/***/ }),

/***/ 46186:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { isInternalRedirect, getRedirectSource } = __webpack_require__(15466);
/**
 * Indicates if it has been redirected for the first time from local sites.
 *
 * @returns {boolean} true if it is redirected for the first time from local sites
 */
const isRedirectedInternallyForFirstTime = () => {
    if (!isInternalRedirect()) {
        return false;
    }
    const localSiteName = getRedirectSource();
    const internallyRedirectedForFirstTime = `redirectedForFirstTimeFrom-${localSiteName}`;
    if (window.localStorage &&
        !window.localStorage.getItem(internallyRedirectedForFirstTime)) {
        window.localStorage.setItem(internallyRedirectedForFirstTime, true);
        return true;
    }
    return false;
};
module.exports = isRedirectedInternallyForFirstTime;
//# sourceMappingURL=isRedirectedInternallyForFirstTime.js.map

/***/ }),

/***/ 96693:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ReduxKeyTypes = exports.ReduxActionTypes = void 0;
var ReduxActionTypes;
(function (ReduxActionTypes) {
    ReduxActionTypes["MERGE_KEY"] = "MERGE_KEY";
})(ReduxActionTypes = exports.ReduxActionTypes || (exports.ReduxActionTypes = {}));
var ReduxKeyTypes;
(function (ReduxKeyTypes) {
    ReduxKeyTypes["EXPERIMENT_DATA"] = "experimentData";
    ReduxKeyTypes["COMPONENT_CONFIG"] = "componentConfig";
})(ReduxKeyTypes = exports.ReduxKeyTypes || (exports.ReduxKeyTypes = {}));
//# sourceMappingURL=types.js.map

/***/ }),

/***/ 30604:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { proxyApiRoutes } = __webpack_require__(15822);
/**
 * Authenticate user with email, password, using the user platform proxy endpoint.
 * This should not be used for SSO w/Google.
 * Payload can optionally include persistSession, registrationSourceCode.
 *
 * @param {object} opts - request payload with email, password, persistSession, googleIdToken, googleAccessToken, registrationSourceCode
 * @param {string} opts.apiURL - the authentication endpoint URL
 * @param {object} opts.payload - the authentication payload
 * @param {string} opts.payload.email - user email
 * @param {string} opts.payload.password - user password
 * @param {string} [opts.payload.persistSession] - optional flag to set user auth cookie expiration
 * @param {boolean} [opts.payload.registrationSourceCode] - the source of the registration
 * @param {string} opts.xClientID - brand sdk client to pass as request header x-client value
 *
 * @returns {Promise<object>} - promise response object
 */
const proxyAuthenticate = (opts) => {
    const { apiURL, payload, xClientID } = opts;
    return fetch(apiURL, {
        body: JSON.stringify(payload),
        credentials: 'include',
        headers: {
            'Content-Type': 'application/json',
            'x-client': xClientID
        },
        method: 'POST'
    });
};
const internals = { proxyAuthenticate };
/**
 * Make authentication request using verso api route OR brand proxy UPG route when a logged-in ggogle
 * user visit an article page. If the user has any google subscription entitlements, a authentication request
 * is made to /v2/swg/authenticate route to authenticate the user with entitlementsToken or condeSubscriptionToken
 *
 * @param {object} request - request object
 * @param {object} request.payload -  payload includes entitlementsToken or condeSubscriptionToken and persistSession flag
 * @param {string} request.payload.entitlementsToken - swg entitlementsToken
 * @param {string} request.payload.condeSubscriptionToken - swg condeSubscriptionToken
 * @param {boolean} request.payload.persistSession - whether to set maxAge for userAuth cookie
 * @param {string} request.userPlatformProxy - user platform proxy base route from tenant config, ex. https://stag2.wired.com/api/up
 * @param {string} request.xClientID - brand sdk client to pass as request header x-client value
 *
 * @returns {Promise<object>} - promise response object
 */
const swgAuthenticate = ({ payload, userPlatformProxy, xClientID }) => {
    try {
        return internals.proxyAuthenticate({
            apiURL: `${userPlatformProxy}${proxyApiRoutes.swgAuthenticate}`,
            payload,
            xClientID
        });
    }
    catch (error) {
        throw new Error(`Error authenticating with swg entitlements brand proxy: ${error.message}`);
    }
};
/**
 * Make google auth request to either user platform gateway proxy endpoint
 * OR verso api utility route based on userPlatformProxy server url
 *
 * @param {object} request - object with apiURL, googleIdToken, googleAccessToken, registrationSourceCode, siteCode, userPlatformProxy, xClientID
 * @param {string} request.googleIdToken - a valid google Id Token
 * @param {string} request.googleAccessToken - a valid google Access Token
 * @param {boolean} request.registrationSourceCode - the source of the registration
 * @param {string} request.siteCode - brand siteCode
 * @param {string} request.source - source from whence the request is being made (for ex. reg-gate, sign-in-page)
 * @param {string} request.userPlatformProxy - user platform proxy base route from tenant config, ex. https://stag2.wired.com/api/up
 * @param {string} request.xClientID - brand x-client
 *
 * @returns {string} - response
 */
const googleAuthenticate = async ({ googleIdToken, googleAccessToken, registrationSourceCode, siteCode, source, userPlatformProxy, xClientID }) => {
    const AUTH_FAILURE = 'error';
    const payload = {
        googleIdToken,
        googleAccessToken,
        registrationSourceCode,
        siteCode,
        source
    };
    try {
        const response = await internals.proxyAuthenticate({
            apiURL: `${userPlatformProxy}${proxyApiRoutes.googleAuthenticate}`,
            payload,
            xClientID
        });
        if (response.ok) {
            return response;
        }
        return AUTH_FAILURE;
    }
    catch (error) {
        return AUTH_FAILURE;
    }
};
/**
 * Make api auth request to user platform gateway proxy endpoint
 * OR local user platform gateway server url
 *
 * @param {object} request - object with payload and userPlatformProxy
 * @param {object} request.payload - request payload object
 * @param {string} request.payload.email - email address to authenticate
 * @param {string} request.payload.password - password to used to authenticate
 * @param {string} request.userPlatformProxy - user platform proxy base route from tenant config, ex. https://stag2.wired.com/api/up
 * @param {string} request.xClientID - brand x-client
 *
 * @returns {Promise<object>} - promise response object
 */
const emailAuthenticate = ({ payload, userPlatformProxy, xClientID }) => {
    try {
        return internals.proxyAuthenticate({
            apiURL: `${userPlatformProxy}${proxyApiRoutes.authenticate}`,
            payload,
            xClientID
        });
    }
    catch (error) {
        throw new Error(`Error authenticating with email on brand upg proxy: ${error.message}`);
    }
};
/**
 * resetEntitlementSampleMax - helper used to normalize the sample meter
 * max count upon authentication as part of the Reg Gate test
 *
 * All this code might be deleted when the test is done.
 *
 * @param {object} config - configurable entitlement options
 * @param {string} config.iss - payment.sample token issuer
 *
 * @returns {Promise<Response>|undefined} - response
 */
const resetEntitlementSampleMax = ({ iss }) => {
    const validClients = [
        'tny_high_prop',
        'tny_reg_gate',
        'vf_high_prop',
        'vf_reg_gate',
        'wir_high_prop',
        'wir_reg_gate'
    ];
    if (!validClients.includes(iss)) {
        return undefined;
    }
    const apiURL = '/api/payment/entitlement';
    return fetch(apiURL, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            client: iss,
            form: 'sample',
            max: 4
        }),
        credentials: 'include'
    });
};
module.exports = {
    _internals: internals,
    emailAuthenticate,
    googleAuthenticate,
    resetEntitlementSampleMax,
    swgAuthenticate
};
//# sourceMappingURL=authenticate.js.map

/***/ }),

/***/ 1915:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

/**
 * Generates user bucket number for a given ID
 *
 * https://www.npmjs.com/package/crc-32
 */
const crc32 = __webpack_require__(52566);
/**
 * For a given xid, a bucket number is generated
 * defaults to DEFAULT_BUCKET
 *
 * @param {string} xid - CN_xid
 * @returns {number} - bucket number
 */
const getBucketNumber = (xid) => {
    const DEFAULT_BUCKET = 100;
    if (!xid) {
        return DEFAULT_BUCKET;
    }
    try {
        const hash = crc32.str(xid);
        return Math.abs(hash % 100) + 1;
    }
    catch (err) {
        console.error('getBucket', err);
        return DEFAULT_BUCKET;
    }
};
module.exports = {
    getBucketNumber
};
//# sourceMappingURL=bucket.js.map

/***/ }),

/***/ 86969:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const authenticate = __webpack_require__(30604);
const { googleAuthenticate, emailAuthenticate, signUpRequest, swgAuthenticate, resetEntitlementSampleMax } = __webpack_require__(30604);
const bookmark = __webpack_require__(48373);
const userDetails = __webpack_require__(74870);
const { updateUser } = __webpack_require__(48414);
const userLookupHelper = __webpack_require__(21393);
const FORCE_ORG_ACCESS_DOMAINS = [
    'condenast.com',
    'condenast.co.uk',
    'pitchfork.com',
    'newyorker.com',
    'wired.com'
];
module.exports = {
    bookmark,
    ...userDetails,
    authenticate,
    emailAuthenticate,
    googleAuthenticate,
    resetEntitlementSampleMax,
    signUpRequest,
    swgAuthenticate,
    userLookupHelper,
    updateUser,
    FORCE_ORG_ACCESS_DOMAINS
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 73506:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

const { proxyApiRoutes } = __webpack_require__(15822);
const { fetchWithTimeout } = __webpack_require__(57743);
const MAX_TIMEOUT = 5000;
/**
 * Calls the user-platform-gateway proxy to retrieve the entitlement auth_token.
 *
 * @param {object} opts - the args object
 * @param {string} opts.amguuid - the user's amguuid
 * @param {string} opts.siteCode - the site code (ex. WIR)
 * @param {string} opts.clientId - the clientId is the OAuth partner's ID. It has to be valid in order.
 * @param {string} opts.xClientID - the x-client to pass into the header of the proxy call (ex. Verso-Wired)
 * @param {string} opts.userPlatformProxy - user platform proxy base route from tenant config, ex. https://stag2.wired.com/api/up
 *
 * @returns {Promise<T | never>} the promise of a response
 */
exports.proxyGetOAuthToken = (opts) => {
    const { amguuid, siteCode, clientId, xClientID, userPlatformProxy } = opts;
    const apiURL = `${userPlatformProxy}${proxyApiRoutes.userDetails}/${amguuid}/oauth2/token?clientId=${clientId}&siteCode=${siteCode}`;
    return fetch(apiURL, {
        headers: {
            'Content-Type': 'application/json',
            'x-client': xClientID
        },
        method: 'GET'
    }).then((response) => {
        return response.json();
    });
};
/**
 * Update or create a user consent for oauth2 consent using the user platform proxy endpoint
 *
 * @param {object} opts - request opts
 * @param {string} opts.amgUUID - the user's amguuid
 * @param {Array<object>} opts.body - an array of objects, each of which contains a clientID, consentScopeName, consentStatus and siteCode
 * @param {string} opts.siteCode - the site code (ex. WIR)
 * @param {string} opts.userPlatformProxy - user platform proxy base route from tenant config, ex. https://stag2.wired.com/api/up
 * @param {string} opts.xClientID - the x-client to pass into the header of the proxy call (ex. Verso-Wired)
 * @returns {Promise<object>} returns the response body from the fetch route
 */
exports.updateUserConsent = ({ amgUUID, body: consentUpdates, userPlatformProxy, xClientID }) => {
    return fetchWithTimeout(`${userPlatformProxy}${proxyApiRoutes.userDetails}/${amgUUID}/oauth2/consent`, {
        body: JSON.stringify(consentUpdates),
        credentials: 'include',
        headers: {
            'Content-Type': 'application/json',
            'x-client': xClientID
        },
        method: 'PUT'
    }, MAX_TIMEOUT);
};
/**
 * Retrieve a user's consent for oauth2 using the user platform proxy endpoint
 *
 * @param {object} opts - request opts
 * @param {string} opts.amgUUID - the user's amguuid
 * @param {string} opts.clientId - the OAuth partner's ID. It has to be valid in order.
 * @param {string} opts.siteCode - the site code (ex. WIR)
 * @param {string} opts.userPlatformProxy - user platform proxy base route from tenant config, ex. https://stag2.wired.com/api/up
 * @param {string} opts.xClientID - the x-client to pass into the header of the proxy call (ex. Verso-Wired)
 * @returns {Promise<object>} returns the response body from the fetch route
 */
exports.getUserConsent = ({ amgUUID, clientId, siteCode, xClientID, userPlatformProxy }) => {
    return fetchWithTimeout(`${userPlatformProxy}${proxyApiRoutes.userDetails}/${amgUUID}/oauth2/consent?clientId=${clientId}&siteCode=${siteCode}`, {
        credentials: 'include',
        headers: {
            'Content-Type': 'application/json',
            'x-client': xClientID
        },
        method: 'GET'
    }, MAX_TIMEOUT);
};
//# sourceMappingURL=oauth.js.map

/***/ }),

/***/ 48414:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { proxyApiRoutes } = __webpack_require__(15822);
const { fetchWithTimeout } = __webpack_require__(91250);
const MAX_TIMEOUT = 5000;
/**
 * Updating the user details using the user platform proxy endpoint
 *
 * Request payload
 *
 * @typedef {object} Payload - update user request payload
 * @property {string} [email] - the user’s email
 * @property {string} [firstName] - the user’s firstName
 * @property {string} [lastName] - the user’s lastName
 * @property {string} [gender] - the user’s gender as enum "M" or "F"
 * @property {string} [birthday] - the user’s birthday
 * @property {number} [income] - the user’s income level
 * @property {string} [phoneNumber] - the user’s phone number
 * @property {string} [address1] - the user’s address1
 * @property {string} [address2] - the user’s address2
 * @property {string} [city] - the user’s city
 * @property {string} [state] - the user’s state
 * @property {string} [zip] - the user’s zip code
 * @property {string} [country] - the user’s country
 * @property {string} [site] - the siteCode the user registered with


 *
 * @param {object} opts - request opts
 * @param {string} opts.amgUUID - user's amgUUID
 * @param {Payload} opts.payload - request payload
 * @param {string} opts.userPlatformProxy - user platform proxy base route from tenant config, ex. https://stag2.wired.com/api/up
 * @param {string} opts.xClientID - brand sdk client to pass as request header x-client value (e.g. Verso-Wired)
 * @returns {Promise<object>} returns the response body from the fetch route
 */
const updateUser = ({ amgUUID, payload, xClientID, userPlatformProxy }) => {
    return fetchWithTimeout(`${userPlatformProxy}${proxyApiRoutes.userDetails}/${amgUUID}`, {
        body: JSON.stringify(payload),
        credentials: 'include',
        headers: {
            'Content-Type': 'application/json',
            'x-client': xClientID
        },
        method: 'PATCH'
    }, MAX_TIMEOUT);
};
module.exports = {
    updateUser
};
//# sourceMappingURL=update-user.js.map

/***/ }),

/***/ 74870:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getUserDetails = void 0;
const { proxyApiRoutes } = __webpack_require__(15822);
const { fetchWithTimeout } = __webpack_require__(91250);
const MAX_TIMEOUT = 5000;
/**
 * Retrieve user details using the user platform proxy endpoint
 * Or local user platform gateway server url
 *
 * @param {object} opts - request opts
 * @param {string} opts.amgUUID - user's amgUUID
 * @param {string} opts.userPlatformProxy - user platform proxy base route from tenant config, ex. https://stag2.wired.com/api/up
 * @param {string} opts.xClientID - brand sdk client to pass as request header x-client value (e.g. Verso-Wired)
 * @returns {Promise<object>} returns the response body from the fetch route
 */
const getUserDetails = ({ amgUUID, xClientID, userPlatformProxy }) => {
    return fetchWithTimeout(`${userPlatformProxy}${proxyApiRoutes.userDetails}/${amgUUID}`, {
        credentials: 'include',
        headers: {
            'Content-Type': 'application/json',
            'x-client': xClientID
        },
        method: 'GET'
    }, MAX_TIMEOUT);
};
exports.getUserDetails = getUserDetails;
//# sourceMappingURL=user-details.js.map

/***/ }),

/***/ 21393:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { proxyApiRoutes } = __webpack_require__(15822);
const { fetchWithTimeout } = __webpack_require__(57743);
const MAX_TIMEOUT = 5000;
/**
 * Lookup a user with a supplied email or amgUUID or xid query string to
 * the user platform proxy /v2/users/lookup endpoint. Examples of query string:
 * email=<uri encoded email address> || amgUUID=<uuid> || xid=<uuid>
 *
 * @param {object} opts - request opts
 * @param {string} opts.queryString - opts queryString
 * @param {string} opts.xClientID - brand sdk client to pass as request header x-client value (e.g. Verso-Wired)
 * @param {string} opts.userPlatformProxy - user platform proxy base route from tenant config, ex. https://stag2.wired.com/api/up
 * @returns {Promise<object>} returns the response body from the fetch route
 */
const userLookup = ({ queryString, xClientID, userPlatformProxy }) => {
    return fetchWithTimeout(`${userPlatformProxy}${proxyApiRoutes.userLookup}?${queryString}`, {
        headers: {
            'x-client': xClientID
        },
        method: 'GET'
    }, MAX_TIMEOUT);
};
module.exports = {
    userLookup
};
//# sourceMappingURL=user-lookup.js.map

/***/ }),

/***/ 37583:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(4159)/* ["default"] */ .A);
const Navigation = __webpack_require__(54790);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * Render a list of account links and sign out button link.
 *
 * @param {object} props - React props
 * @param {Array<object>} props.accountLinks - A list of `{ url, text }` objects
 * @param {string} [props.className] - Optional top-level class to add.
 * @param {string} [props.hasSignOutSeparator] - Optional flag that tells whether to include the sign out separator
 * @param {string} [props.linkClassName] - Optional link class to add.
 *
 * @returns {ReactElement} <p>
 */
const AccountLinks = ({ accountLinks, className, hasSignOutSeparator = true, linkClassName }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'AccountLinks'
        });
    }, []);
    const { formatMessage } = useIntl();
    return (React.createElement("div", { className: classnames('account-links', `account-links__sign-out-separator--${hasSignOutSeparator ? 'show' : 'hide'}`, className), "data-testid": "account-links-wrapper" }, accountLinks && accountLinks.length > 0 && (React.createElement(Navigation.Vertical, { attributes: {
            'aria-label': formatMessage(translations.navigationAriaLabel)
        }, className: "account-links__navigation", linkClassName: linkClassName, links: accountLinks, "data-testid": "account-navigation" }))));
};
AccountLinks.propTypes = {
    accountLinks: PropTypes.array,
    className: PropTypes.string,
    hasSignOutSeparator: PropTypes.bool,
    linkClassName: PropTypes.string
};
AccountLinks.displayName = 'AccountLinks';
module.exports = AccountLinks;
//# sourceMappingURL=AccountLinks.js.map

/***/ }),

/***/ 33795:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const AccountLinks = __webpack_require__(37583);
module.exports = asConfiguredComponent(AccountLinks, 'AccountLinks');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 4159:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    navigationAriaLabel: {
        id: 'AccountLinks.NavigationAriaLabel',
        defaultMessage: 'Account',
        description: 'AccountLinks component Navigation aria label'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 95556:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const ActionBar = __webpack_require__(72014);
const { ActionBarWrapperContent, ActionBarWrapperComponent } = __webpack_require__(97024);
const { getVariationNames } = __webpack_require__(81372);
const { sizesFullName } = __webpack_require__(99906);
/**
 *
 * @param {object} props - React props
 * @param {string} [props.actionBarLargeScreenVariation] - Desktop variation for the ActionBar component
 * @param {string} [props.actionBarMobileScreenVariation] - Mobile variation for the ActionBar component
 * @param {string} [props.className] - Optional variable to apply styles
 * @param {Array} props.actionBarButtons - List of buttons/actions for the ActionBar component
 * @param {boolean} [props.isActionBarStickyLargeScreen] - To make ActionBar sticky in large screen
 * @param {boolean} [props.image] - image object for collection drawer
 * @param {boolean} [props.articleLength] - defines the wrapper length for desktop view
 * @param {boolean} [props.showActionBar] - Optional Config value to show/hide actionbar
 * @param {Function} [props.showOverlayActionBar] - Optional to show the overlay action bar
 * @param {boolean} [props.isFirstActionBar] - Optional to identify if it is first actionbar or not used to show the overlay action bar
 *
 * @returns {ReactElement} <div>
 */
const ActionBarWrapper = ({ actionBarLargeScreenVariation, actionBarMobileScreenVariation, className, isActionBarStickyLargeScreen = false, image, actionBarButtons, articleLength, showActionBar = false, isFirstActionBar, showOverlayActionBar }) => {
    if (!actionBarButtons || !actionBarButtons?.length || !showActionBar) {
        return null;
    }
    const ActionBarDesktop = actionBarLargeScreenVariation
        ? ActionBar[actionBarLargeScreenVariation]
        : ActionBar;
    const ActionBarMobile = actionBarMobileScreenVariation
        ? ActionBar[actionBarMobileScreenVariation]
        : ActionBar;
    // When variations are provided
    if (actionBarLargeScreenVariation || actionBarMobileScreenVariation) {
        return (React.createElement(ActionBarWrapperContent, { "data-testid": "action-bar-wrapper", className: className, isActionBarStickyLargeScreen: isActionBarStickyLargeScreen, actionBarHeight: articleLength, isFirstActionBar: isFirstActionBar, showOverlayActionBar: showOverlayActionBar },
            React.createElement(ActionBarWrapperComponent, null,
                React.createElement(ActionBarDesktop, { minScreenThreshold: sizesFullName.xLarge, actionButtons: actionBarButtons, className: "large-screen", image: image }),
                React.createElement(ActionBarMobile, { maxScreenThreshold: sizesFullName.large, actionButtons: actionBarButtons, className: "mobile", image: image }))));
    }
    return (
    // default when no screen variation is provided
    React.createElement(ActionBarWrapperContent, { "data-testid": "action-bar-wrapper", className: className, isActionBarStickyLargeScreen: isActionBarStickyLargeScreen, actionBarHeight: articleLength, isFirstActionBar: isFirstActionBar, showOverlayActionBar: showOverlayActionBar },
        React.createElement(ActionBarWrapperComponent, null,
            React.createElement(ActionBar, { actionButtons: actionBarButtons, className: "default", image: image }))));
};
ActionBarWrapper.propTypes = {
    actionBarButtons: PropTypes.arrayOf(PropTypes.oneOf(['audio', 'bookmark', 'print', 'jumpToSection', 'comments'])).isRequired,
    actionBarLargeScreenVariation: PropTypes.oneOf(getVariationNames(ActionBar)),
    actionBarMobileScreenVariation: PropTypes.oneOf(getVariationNames(ActionBar)),
    articleLength: PropTypes.number,
    className: PropTypes.string,
    image: PropTypes.object,
    isActionBarStickyLargeScreen: PropTypes.bool,
    isFirstActionBar: PropTypes.bool,
    showActionBar: PropTypes.bool,
    showOverlayActionBar: PropTypes.bool
};
module.exports = ActionBarWrapper;
//# sourceMappingURL=ActionBarWrapper.js.map

/***/ }),

/***/ 90532:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const ActionBarWrapper = __webpack_require__(95556);
module.exports = ActionBarWrapper;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 97024:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { calculateSpacing, minScreen } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { applyGridSpacing } = __webpack_require__(1123);
const ActionBarWrapperComponent = styled.div.withConfig({
    displayName: 'ActionBarWrapperComponent'
}) ``;
const ActionBarWrapperContent = styled.div.withConfig({
    displayName: 'ActionBarWrapperContent'
}) `
  display: flex;
  justify-content: center;
  padding-bottom: ${calculateSpacing(4)};
  ${({ isActionBarStickyLargeScreen, actionBarHeight }) => isActionBarStickyLargeScreen &&
    css `
      ${minScreen(BREAKPOINTS.lg)} {
        position: absolute;
        left: ${calculateSpacing(4)};
        z-index: 80;
        padding: 0;
        width: fit-content;
        height: ${actionBarHeight ? `${actionBarHeight}px` : '100%'};
        ${applyGridSpacing('padding')}
        ${ActionBarWrapperComponent} {
          position: sticky;
          top: 50%;
          transition: all 300ms ease-in-out;
          height: fit-content;
          ${applyGridSpacing('padding')}
        }
      }
    `}
  ${({ showOverlayActionBar, isFirstActionBar }) => showOverlayActionBar &&
    isFirstActionBar &&
    css `
      position: fixed;
      bottom: -100px;
      animation: slideUpDown 0.5s ease-in-out both;
      z-index: 2;
      border-radius: ${calculateSpacing(6)};
      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
      padding-bottom: 0;
      @keyframes slideUpDown {
        0% {
          bottom: -100px;
        }

        100% {
          bottom: 40px;
        }
      }
    `}
`;
module.exports = {
    ActionBarWrapperContent,
    ActionBarWrapperComponent
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 35267:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { TrackComponentChannel } = __webpack_require__(78788);
const ResponsiveAsset = __webpack_require__(73275);
const { AssetEmbedWrapper, AssetEmbedResponsiveAsset, AssetEmbedCaption, AssetEmbedAssetContainer } = __webpack_require__(41108);
/**
 * AssetEmbed component
 *
 * @param {object} props - React props
 * @param {object} [props.attributes] - Optional attributes to add top level i.e. aria-*, role, etc.
 * @param {string} [props.className] - Optional top-level class to add.
 * @param {string} [props.dangerousCaption] - Optional caption to place under asset.
 * @param {string} [props.dangerousCredit] - Optional credit to place under asset.
 * @param {ResponsiveAsset.propTypes} props.image - Object containing asset sources for a ResponsiveAsset.
 * @param {string} [props.contentAlign] - Where to align the asset within the surrounding composition.
 *
 * @returns {ReactElement} <figure>
 */
const AssetEmbed = ({ attributes, className, dangerousCaption, dangerousCredit, image, contentAlign }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'AssetEmbed'
        });
    }, []);
    if (!image) {
        return null;
    }
    const shouldRenderCaption = dangerousCaption || dangerousCredit;
    return (React.createElement(AssetEmbedWrapper, { ...attributes, isAlignedLeft: contentAlign === 'left', isAlignedRight: contentAlign === 'right', className: classnames('asset-embed', className) },
        React.createElement(AssetEmbedAssetContainer, { className: "asset-embed__asset-container" },
            React.createElement(AssetEmbedResponsiveAsset, { ...image, className: "asset-embed__responsive-asset", isLazy: true })),
        shouldRenderCaption && (React.createElement(AssetEmbedCaption, { dangerousCaptionText: dangerousCaption, dangerousCredit: dangerousCredit, className: "asset-embed__caption" }))));
};
AssetEmbed.propTypes = {
    attributes: PropTypes.object,
    className: PropTypes.string,
    contentAlign: PropTypes.oneOf(['left', 'right']),
    dangerousCaption: PropTypes.string,
    dangerousCredit: PropTypes.string,
    image: PropTypes.shape(ResponsiveAsset.propTypes)
};
AssetEmbed.displayName = 'AssetEmbed';
module.exports = AssetEmbed;
//# sourceMappingURL=AssetEmbed.js.map

/***/ }),

/***/ 67120:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(35267);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 41108:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing, getColorStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const ResponsiveAsset = __webpack_require__(73275);
const Caption = __webpack_require__(14760);
const { CaptionText } = __webpack_require__(38860);
const { ResponsiveClipVideoContainer } = __webpack_require__(91783);
const AssetEmbedWrapper = styled.figure.withConfig({
    displayName: 'AssetEmbedWrapper'
}) `
  ${({ isAlignedLeft, isAlignedRight }) => (isAlignedLeft || isAlignedRight) &&
    `
      margin: ${calculateSpacing(4)} 0;
      width: 100%;

      @media (min-width: ${BREAKPOINTS.md}) {
          margin-top: 0;
          width: 37.5%;
      }
    `}

  ${({ isAlignedLeft }) => isAlignedLeft &&
    `
      float: left;
      margin-right: ${calculateSpacing(2)};
    `}

  ${({ isAlignedRight }) => isAlignedRight &&
    `
      float: right;
      margin-left: ${calculateSpacing(2)};
    `}
`;
const AssetEmbedResponsiveAsset = styled(ResponsiveAsset).withConfig({
    displayName: 'AssetEmbedResponsiveAsset'
}) `
  picture {
    width: 100%;
    height: auto;
  }
  ${ResponsiveClipVideoContainer} {
    height: auto;

    video {
      height: auto;
    }
  }
`;
const AssetEmbedCaption = styled(Caption).withConfig({
    displayName: 'AssetEmbedCaption'
}) `
  ${CaptionText} {
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body')};
  }
`;
const AssetEmbedAssetContainer = styled.div.withConfig({
    displayName: 'AssetEmbedAssetContainer'
}) ``;
module.exports = {
    AssetEmbedWrapper,
    AssetEmbedResponsiveAsset,
    AssetEmbedCaption,
    AssetEmbedAssetContainer
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 56342:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { connect } = __webpack_require__(67851);
const { ButtonCalloutWrapper } = __webpack_require__(65881);
const Button = __webpack_require__(73730);
const { TrackComponentChannel } = __webpack_require__(78788);
const { handleAffiliateLinkClick } = __webpack_require__(14307);
const { handleLinkClick } = __webpack_require__(43428);
const { extractTrackingParameters, encodeAffiliateLink, decodeAffiliateLink } = __webpack_require__(25203);
const { getAmazonAffiliateAttributes } = __webpack_require__(82063);
/**
 * Button Group component
 *
 * @param {string} [props.className] - Optional top-level class to add
 * @param {Array} props.children - Children items to render
 * @param {Function} [props.onClickHandler] - Optional click handler
 * @param {object} [props.actionIdFlags] - Optional flags to enable actionId encoding on click
 * @returns {ReactElement} <div>
 */
const ButtonGroupCallout = ({ className, children, onClickHandler, actionIdFlags = {}, amazonAffiliateTag }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ButtonGroupCallout'
        });
    }, []);
    const handleAffiliateLinkClickHandler = (linkProps, event, actionId) => {
        handleAffiliateLinkClick(event, {
            actionId,
            label: linkProps?.title || '',
            link: linkProps?.href || '',
            component: 'affiliate_button_callout'
        });
    };
    const handleClick = (event, linkProps, index, enableActionIdMapping) => {
        const hrefValue = event?.currentTarget?.getAttribute('href');
        const queryParams = extractTrackingParameters();
        if (enableActionIdMapping && hrefValue) {
            event.preventDefault();
            handleLinkClick({
                event,
                onClickHandler,
                gtmTrackOnClick: handleAffiliateLinkClickHandler,
                linkProps: hrefValue,
                setLinkProps: (newHref) => {
                    window.open(newHref, '_blank', 'noopener, noreferrer');
                },
                type: 'ButtonGroupCallout',
                index,
                component: 'affiliate_button_callout',
                queryParams
            });
        }
        else {
            // Encode affiliate link with query params if it's a cna.st link
            const isCnastLink = hrefValue?.includes('cna.st');
            if (isCnastLink && queryParams) {
                const encodedHref = encodeAffiliateLink(hrefValue, {
                    component: 'affiliate_button_callout',
                    extractedParams: queryParams
                });
                event.currentTarget.setAttribute('href', encodedHref);
            }
            onClickHandler();
            handleAffiliateLinkClickHandler(linkProps, event);
        }
    };
    const buttons = React.Children.map(children, ({ props: parentTagProps }, index) => {
        const linkProps = parentTagProps.children?.props;
        const isActionIdEnabledForComponent = actionIdFlags?.enableActionIdForButtonCallOut;
        const enableActionIdMapping = linkProps?.href?.includes('cna.st') && isActionIdEnabledForComponent;
        // Get Amazon affiliate attributes for the actual offer URL (not the affiliate link)
        const offerUrl = decodeAffiliateLink(linkProps?.href) || linkProps?.href;
        const amazonAffiliateAttributes = getAmazonAffiliateAttributes(offerUrl, amazonAffiliateTag);
        return (React.createElement(Button.Primary, { btnStyle: "outlined", key: index, inputKind: "link", label: linkProps?.children || linkProps?.title, ...linkProps, href: linkProps?.href, onClickHandler: (event) => handleClick(event, linkProps, index, enableActionIdMapping), dataAttrs: {
                'data-buy-button': true,
                'data-offer-url': offerUrl,
                ...amazonAffiliateAttributes
            } }));
    });
    return (React.createElement(ButtonCalloutWrapper, { className: className, "data-testid": "ButtonCalloutWrapper" }, buttons));
};
ButtonGroupCallout.propTypes = {
    actionIdFlags: PropTypes.object,
    amazonAffiliateTag: PropTypes.string,
    children: PropTypes.node.isRequired,
    className: PropTypes.string,
    onClickHandler: PropTypes.func
};
ButtonGroupCallout.displayName = 'ButtonGroupCallout';
const mapStateToProps = (state) => ({
    amazonAffiliateTag: state.commercePlatform?.amazonAffiliateTag
});
module.exports = connect(mapStateToProps)(ButtonGroupCallout);
//# sourceMappingURL=ButtonGroupCallout.js.map

/***/ }),

/***/ 62839:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const withAnalytics = __webpack_require__(68339);
const { asConfiguredComponent } = __webpack_require__(12892);
const ButtonGroupCallout = __webpack_require__(56342);
const ButtonGroupCalloutWithAnalytics = withAnalytics(ButtonGroupCallout);
module.exports = asConfiguredComponent(ButtonGroupCalloutWithAnalytics, 'ButtonGroupCallout');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 65881:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing } = __webpack_require__(26865);
const ButtonCalloutWrapper = styled.div.withConfig({
    displayName: 'ButtonCalloutWrapper'
}) `
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: flex-start;
  margin: ${calculateSpacing(2)} 0 ${calculateSpacing(4.5)};
  gap: ${calculateSpacing(2)};
`;
module.exports = { ButtonCalloutWrapper };
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 68339:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const withAnalytics = (Component) => {
    const ComponentWithAnalytics = ({ ...props }) => {
        const onClickHandler = () => {
            if (props.onClickHandler) {
                props.onClickHandler();
            }
            if ( true && window.dataLayer) {
                window.dataLayer.push({
                    event: 'in-body-button-click'
                });
            }
        };
        return React.createElement(Component, { ...props, onClickHandler: onClickHandler });
    };
    ComponentWithAnalytics.propTypes = {
        onClickHandler: PropTypes.func
    };
    return ComponentWithAnalytics;
};
module.exports = withAnalytics;
//# sourceMappingURL=withAnalytics.js.map

/***/ }),

/***/ 76492:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const ResponsiveAsset = __webpack_require__(73275);
const Rubric = __webpack_require__(51330);
const { CelebratedEntrypointButton, CelebratedEntrypointContent, CelebratedEntrypointColumn, CelebratedEntrypointRow, CelebratedEntrypointText, CelebratedEntrypointTitle, CelebratedEntrypointResponsiveAsset, CelebratedEntrypointSponsor, CelebratedEntrypointWrapper } = __webpack_require__(61443);
const LiveIndicator = __webpack_require__(46997);
/**
 * CelebratedEntryPoint component
 *
 * @param {object} props - React props
 * @param {string} props.alignContent - Optional content alignment ['left', 'right']
 * @param {object} props.asset - Object containing ResponsiveClip or ResponsiveImage properties
 * @param {string} props.borders - Optional border to display
 * @param {string} props.className - Optional top-level class to add
 * @param {string} props.ctaButtonvariations - Optional variations for button
 * @param {string} props.ctaCode - Optional cta code for tracking purpose
 * @param {string} props.dangerousButtonText - A string (possibly HTML) to use as the button text
 * @param {string} props.dangerousText - Additional promo text to display
 * @param {string} props.dangerousTitle - A string (possibly HTML) to use as the title
 * @param {boolean} props.hasDekDescriptionTextStyle - Optional text style for dek
 * @param {boolean} props.hasBackground - Flag for background transperancy for Live Indicator
 * @param {boolean} props.isFullBleed - flag to add margins on left and right to entry point component
 * @param {boolean} props.hasDeemphasizedColorStyle - Optional color style for dek
 * @param {boolean} props.hasHedLowerCaseText - Optional to capitalize the hed
 * @param {boolean} props.hasTextAlignLeft - Optional to align text to left
 * @param {string} props.hedTextStyle - Optional text style for title
 * @param {string} props.href - A destination for the celebrated entrypoint when clicked
 * @param {boolean} props.isDiscovery - Flag for is discovery component
 * @param {boolean} props.isLiveStory - Flag to check for a story is live
 * @param {string} props.liveIndicatorHeight - Height of live indicator
 * @param {string} props.rubric - A rubric text to display
 * @param {boolean} props.shouldDisplayRubric - Flag for displaying rubric
 * @param {boolean} props.shouldDisplaySponsorName - Flag for displaying sponsor name
 * @param {boolean} props.shouldEnableAnimation -  Optional to set animation true false for indicator
 * @param {boolean} props.shouldHighlightDekText -  Optional to change the color of strong
 * @param {boolean} props.shouldUseCutomColorLiveIndicator - Optional to use custom background color
 * @param {string} props.sponsorByline - Optional sponsor byline to display
 * @param {string} props.sponsorName - Optional sponsor name to display
 * @param {object} props.color - Optional variations for backgroud color
 *
 * @returns {ReactElement} <a>
 */
const CelebratedEntryPoint = ({ alignContent = 'right', asset, borders = 'off', className, color = 'black', ctaButtonvariations = 'primary', ctaCode, dangerousButtonText, dangerousText, dangerousTitle, hasDekDescriptionTextStyle = false, hasBackground, isFullBleed = false, hasDeemphasizedColorStyle = false, hasHedLowerCaseText = true, hasTextAlignLeft = false, hedTextStyle = 'hedStyle', href, isDiscovery, isLiveStory = false, liveIndicatorHeight, rubric, shouldDisplayRubric = true, shouldDisplaySponsorName = false, shouldEnableAnimation, shouldHighlightDekText = false, shouldUseCutomColorLiveIndicator, sponsorByline = 'Sponsored By', sponsorName }) => {
    if (!asset || !dangerousButtonText || !dangerousTitle || !dangerousText) {
        return null;
    }
    const hrefWithCTAcode = ctaCode
        ? `${href}${ctaCode}`
        : `${href}?itm_content=homepage&itm_campaign=${dangerousTitle
            .toLowerCase()
            .replace(/\s+/g, '-')}-homepage-module`;
    const buttonProps = {
        label: dangerousButtonText,
        inputKind: 'link',
        target: '_self',
        rel: 'noopener noreferrer',
        href: hrefWithCTAcode,
        variations: {
            typeStyle: ctaButtonvariations
        }
    };
    const getRubricOrLiveIndicator = () => {
        if (isLiveStory) {
            return (React.createElement(LiveIndicator, { hasBackground: hasBackground, isDiscovery: isDiscovery, shouldEnableAnimation: shouldEnableAnimation, liveIndicatorHeight: liveIndicatorHeight, shouldUseCutomColorLiveIndicator: shouldUseCutomColorLiveIndicator }));
        }
        if (shouldDisplayRubric && rubric) {
            return ['dark', 'black'].includes(color) ? (React.createElement(Rubric.Inverted, { name: rubric })) : (React.createElement(Rubric, { name: rubric }));
        }
        return null;
    };
    const highlighteddangerousText = shouldHighlightDekText
        ? dangerousText.replace('<strong>', '<strong style="color: white; font-weight: 500;">')
        : dangerousText;
    return (React.createElement(CelebratedEntrypointWrapper, { className: classnames('celebrated-entrypoint', className), isFullBleed: isFullBleed },
        React.createElement(CelebratedEntrypointRow, { isFullBleed: isFullBleed, alignContent: alignContent, borders: borders, color: color },
            React.createElement(CelebratedEntrypointColumn, { color: color },
                React.createElement(CelebratedEntrypointResponsiveAsset, { ...asset })),
            React.createElement(CelebratedEntrypointColumn, { color: color, className: "celebrated-entrypoint-column", shouldReducePadding: true },
                React.createElement(CelebratedEntrypointContent, { hasTextAlignLeft: hasTextAlignLeft },
                    getRubricOrLiveIndicator(),
                    React.createElement(CelebratedEntrypointTitle, { dangerouslySetInnerHTML: { __html: dangerousTitle }, color: color, hedTextStyle: hedTextStyle, isLiveStory: isLiveStory, hasHedLowerCaseText: hasHedLowerCaseText }),
                    React.createElement(CelebratedEntrypointText, { dangerouslySetInnerHTML: { __html: highlighteddangerousText }, color: color, hasDekDescriptionTextStyle: hasDekDescriptionTextStyle, hasDeemphasizedColorStyle: hasDeemphasizedColorStyle }),
                    buttonProps.label ? (React.createElement(CelebratedEntrypointButton, { ...buttonProps })) : null,
                    shouldDisplaySponsorName && sponsorByline && sponsorName ? (React.createElement(CelebratedEntrypointSponsor, { color: color }, `${sponsorByline}  ${sponsorName}`)) : null)))));
};
CelebratedEntryPoint.propTypes = {
    alignContent: PropTypes.oneOf(['right', 'left']),
    asset: PropTypes.shape(ResponsiveAsset.propTypes).isRequired,
    borders: PropTypes.oneOf(['on', 'off', 'bottom-only', 'top-only']),
    className: PropTypes.string,
    color: PropTypes.oneOf(['black', 'brand', 'dark', 'light', 'white']),
    ctaButtonvariations: PropTypes.oneOf([
        'primary',
        'secondary',
        'utility',
        'utility-inverted',
        'utility-pair-inverted',
        'inverted-text',
        'utility-pair-secondary'
    ]),
    ctaCode: PropTypes.string,
    dangerousButtonText: PropTypes.string.isRequired,
    dangerousText: PropTypes.string.isRequired,
    dangerousTitle: PropTypes.string.isRequired,
    hasBackground: PropTypes.bool,
    hasDeemphasizedColorStyle: PropTypes.bool,
    hasDekDescriptionTextStyle: PropTypes.bool,
    hasHedLowerCaseText: PropTypes.bool,
    hasTextAlignLeft: PropTypes.bool,
    hedTextStyle: PropTypes.oneOf(['hedStyle', 'subHedStyle']),
    href: PropTypes.string.isRequired,
    isDiscovery: PropTypes.bool,
    isFullBleed: PropTypes.bool,
    isLiveStory: PropTypes.bool,
    liveIndicatorHeight: PropTypes.string,
    rubric: PropTypes.string,
    shouldDisplayRubric: PropTypes.bool,
    shouldDisplaySponsorName: PropTypes.bool,
    shouldEnableAnimation: PropTypes.bool,
    shouldHighlightDekText: PropTypes.bool,
    shouldUseCutomColorLiveIndicator: PropTypes.bool,
    sponsorByline: PropTypes.string,
    sponsorName: PropTypes.string
};
CelebratedEntryPoint.displayName = 'CelebratedEntryPoint';
module.exports = CelebratedEntryPoint;
//# sourceMappingURL=CelebratedEntryPoint.js.map

/***/ }),

/***/ 42630:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
module.exports = asConfiguredComponent(__webpack_require__(76492), 'CelebratedEntryPoint');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 61443:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { BaseText } = __webpack_require__(76955);
const { calculateSpacing, getColorStyles, getTypographyStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { applyGridSpacing, cssVariablesGrid } = __webpack_require__(1123);
const Button = __webpack_require__(88456);
const ResponsiveAsset = __webpack_require__(73275);
const handleColorVariation = (color, prop) => `colors.discovery.body.${color}.${prop}`;
const CelebratedEntrypointWrapper = styled.div.withConfig({
    displayName: 'CelebratedEntrypointWrapper'
}) `
  ${({ isFullBleed }) => isFullBleed
    ? `
      --grid-margin: 0;
      max-width: fix-content;
    `
    : `
      ${cssVariablesGrid()}
      ${applyGridSpacing('padding')}
    
      margin: 0 auto;
      width: 100%;
      max-width: ${BREAKPOINTS.xxl};
     
    `}
`;
const CelebratedEntrypointRow = styled.div.withConfig({
    displayName: 'CelebratedEntrypointRow'
}) `
  display: flex;
  flex-direction: ${({ alignContent }) => alignContent === 'right' ? 'row' : 'row-reverse'};
  padding-top: ${calculateSpacing(2.5, 'px')};
  padding-bottom: ${calculateSpacing(2.5, 'px')};
  width: 100%;
  height: 100%;

  ${({ isFullBleed }) => isFullBleed
    ? `
        margin-bottom: ${calculateSpacing(5, 'px')};
        margin-top: ${calculateSpacing(5, 'px')};
        @media (max-width: ${BREAKPOINTS.md}) {
            margin-bottom: ${calculateSpacing(2.5, 'px')};
            margin-top: ${calculateSpacing(2.5, 'px')};
        }
    `
    : `
        margin-bottom: ${calculateSpacing(0, 'px')};
        margin-top: ${calculateSpacing(0, 'px')};
    `}

  ${({ theme, borders, color }) => borders
    ? `
        border-bottom: ${borders === 'on' || borders === 'bottom-only' ? '1px solid' : ''}; 
        border-top: ${borders === 'on' || borders === 'top-only' ? '1px solid' : ''};
        ${getColorStyles(theme, 'border-color', handleColorVariation(color, 'border'))} 
    `
    : ``}

    &::after {
    display: table;
    clear: both;
    content: '';
  }

  @media only screen and (max-width: ${BREAKPOINTS.lg}) {
    flex-direction: ${({ alignContent }) => alignContent === 'right' ? 'column' : 'column-reverse'};
  }
`;
const CelebratedEntrypointColumn = styled.div.withConfig({
    displayName: 'CelebratedEntrypointColumn'
}) `
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  width: 50%;
  height: auto;

  &.celebrated-entrypoint-column {
    padding: ${calculateSpacing(2.5, 'px')} ${calculateSpacing(5, 'px')};
    @media (max-width: ${BREAKPOINTS.md}) {
      padding-top: ${calculateSpacing(5, 'px')};
      padding-bottom: ${calculateSpacing(5, 'px')};
      width: 100%;
      height: 100%;
    }
  }

  &&.celebrated-entrypoint-column {
    @media (max-width: ${BREAKPOINTS.md}) {
      ${({ shouldReducePadding }) => shouldReducePadding &&
    `
          padding: ${calculateSpacing(2.5, 'px')};`}
    }
  }

  @media only screen and (max-width: ${BREAKPOINTS.lg}) {
    width: 100%;
    height: 100%;
  }

  ${({ theme, color }) => color
    ? `
        ${getColorStyles(theme, 'background-color', handleColorVariation(color, 'background'))} 
    `
    : ``}
`;
const CelebratedEntrypointContent = styled.div.withConfig({
    displayName: 'CelebratedEntrypointContent'
}) `
  ${({ hasTextAlignLeft }) => hasTextAlignLeft
    ? `
       text-align: left; 
      `
    : `text-align: center;`}
  && {
    @media (max-width: ${BREAKPOINTS.md}) {
      text-align: center;
    }
  }
`;
const CelebratedEntrypointText = styled(BaseText).withConfig({
    displayName: 'CelebratedEntrypointText'
}) `
  margin-top: ${calculateSpacing(1, 'px')};
  margin-bottom: ${calculateSpacing(3, 'px')};
  ${({ color, theme }) => color
    ? `
        ${getTypographyStyles(theme, 'typography.definitions.discovery.description-core')}
        ${getColorStyles(theme, 'color', handleColorVariation(color, 'description'))};
    `
    : ``}
  && {
    ${({ hasDekDescriptionTextStyle, theme }) => hasDekDescriptionTextStyle &&
    `
        ${getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.description-core')}
    `}

    ${({ hasDeemphasizedColorStyle, theme }) => hasDeemphasizedColorStyle &&
    `
        ${getColorStyles(theme, 'color', 'colors.consumption.body.inverted.body-deemphasized')}
    `}
  }
`;
const CelebratedEntrypointTitle = styled(BaseText).withConfig({
    displayName: 'CelebratedEntrypointTitle'
}) `
  margin-top: ${({ isLiveStory }) => isLiveStory ? calculateSpacing(3, 'px') : calculateSpacing(2, 'px')};
  margin-bottom: ${calculateSpacing(0, 'px')};
  ${({ color, theme }) => color
    ? `
        ${getColorStyles(theme, 'color', handleColorVariation(color, 'heading'))};
    `
    : ``}

  ${({ hedTextStyle, theme }) => hedTextStyle === 'hedStyle'
    ? `
        ${getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-primary')}
    `
    : `
        ${getTypographyStyles(theme, 'typography.definitions.discovery.subhed-section-primary')}
    `}
    && {
    ${({ hasHedLowerCaseText }) => !hasHedLowerCaseText && `text-transform: uppercase;`}
  }
`;
const CelebratedEntrypointButton = styled(Button).withConfig({
    displayName: 'CelebratedEntrypointButton'
}) `
  margin-bottom: ${calculateSpacing(3, 'px')};
`;
const CelebratedEntrypointSponsor = styled.div.withConfig({
    displayName: 'CelebratedEntrypointSponsor'
}) `
  ${({ color, theme }) => color
    ? `
        ${getTypographyStyles(theme, 'typography.definitions.globalEditorial.syndication')};
        ${getColorStyles(theme, 'color', handleColorVariation(color, 'syndication'))};
    `
    : ``}
`;
const CelebratedEntrypointResponsiveAsset = styled(ResponsiveAsset).withConfig({
    displayName: 'CelebratedEntrypointResponsiveAsset'
}) `
  max-width: 100%;
  height: auto;
  object-fit: cover;
`;
module.exports = {
    CelebratedEntrypointWrapper,
    CelebratedEntrypointContent,
    CelebratedEntrypointColumn,
    CelebratedEntrypointRow,
    CelebratedEntrypointText,
    CelebratedEntrypointTitle,
    CelebratedEntrypointResponsiveAsset,
    CelebratedEntrypointSponsor,
    CelebratedEntrypointButton
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 62484:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { TrackComponentChannel } = __webpack_require__(78788);
const { CneAudioEmbedFigure } = __webpack_require__(56317);
/**
 * CNEAudioEmbed component
 *
 * @param {object} props - React props
 * @param {string} props.scriptUrl - full URL for a script composition (environment+type+id)
 * @param {string} props.skin - brand skin
 * @param {string} props.target - target container id
 *
 * @returns {ReactElement} <CneAudioEmbedFigure>
 */
const CNEAudioEmbed = ({ scriptUrl = '', skin = '', target = '' }) => {
    const containerRef = React.useRef(null);
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'CNEAudioEmbed'
        });
    }, []);
    const extractInformation = (url) => {
        try {
            const urlObj = new URL(url);
            const [, , audioType, audioId] = urlObj.pathname.split('/');
            return {
                audioHostname: urlObj.hostname,
                audioType,
                audioId
            };
        }
        catch {
            return {};
        }
    };
    let params = extractInformation(scriptUrl);
    params = {
        ...params,
        skin,
        target
    };
    React.useEffect(() => {
        if (!containerRef.current) {
            return;
        }
        if (document.getElementById(`cneaudio-embed-${params.target}`)) {
            return;
        }
        const script = document.createElement('script');
        script.id = `cneaudio-embed-${params.target}`;
        script.src = `https://${params.audioHostname}/script/${params.audioType}/${params.audioId}?skin=${params.skin}&target=${params.target}`;
        script.defer = true;
        containerRef.current.insertBefore(script, containerRef.current.firstChild);
    }, [
        params.audioHostname,
        params.audioType,
        params.audioId,
        params.skin,
        params.target
    ]);
    return (React.createElement(CneAudioEmbedFigure, { "data-testid": "cne-audio-embed-figure" },
        React.createElement("div", { ref: containerRef, "data-testid": "cne-audio-embed-container" },
            React.createElement("div", { id: params.target, "data-testid": "cne-audio-embed-target" }))));
};
CNEAudioEmbed.propTypes = {
    scriptUrl: PropTypes.string,
    skin: PropTypes.string,
    target: PropTypes.string
};
CNEAudioEmbed.displayName = 'CNEAudioEmbed';
module.exports = CNEAudioEmbed;
//# sourceMappingURL=CNEAudioEmbed.js.map

/***/ }),

/***/ 4819:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const CNEAudioEmbed = __webpack_require__(62484);
module.exports = asConfiguredComponent(CNEAudioEmbed, 'CNEAudioEmbed');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 56317:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const CneAudioEmbedFigure = styled.figure.withConfig({
    displayName: 'CneAudioEmbedFigure'
}) `
  margin: 0;
`;
module.exports = {
    CneAudioEmbedFigure
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 259:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useContext, useEffect, useState, useRef } = React;
const { connectDomain } = __webpack_require__(57744);
const withUser = connectDomain('user');
const { ConsentContext } = __webpack_require__(85438);
const useLazyLoadComponent = __webpack_require__(70920);
const ConsentBanner = __webpack_require__(83561);
const translations = (__webpack_require__(41357)/* ["default"] */ .A);
const { TrackComponentChannel } = __webpack_require__(78788);
const { CNEEventRegistrationEmbedWrapper, CNEEventRegistrationEmbedContainer, CNEEventRegistrationEmbedContent } = __webpack_require__(32443);
/**
 * CNEEventRegistrationEmbed component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {number} [props.offsetHeight] - Optional height to add
 * @param {string} props.title - Required by iframe
 * @param {string} props.url - The iframe url
 * @param {object} [props.user] - Optional
 *
 * @returns {ReactElement} <figure>
 */
const CNEEventRegistrationEmbed = ({ className, offsetHeight = 0, title = 'CNE Event Registration Embed', url, user }) => {
    useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'CNEEventRegistrationEmbed'
        });
    }, []);
    const urlEmbed = new URL(url);
    const loggedOut = urlEmbed.searchParams.get('loggedout');
    const loggedIn = urlEmbed.searchParams.get('loggedin');
    const privacy = urlEmbed.searchParams.get('privacy');
    const iframeUrlLoggedOut = urlEmbed.origin + urlEmbed.pathname + (loggedOut || '');
    const iframeUrlLoggedIn = urlEmbed.origin + urlEmbed.pathname + (loggedIn || '');
    const [iframeUrl, setIframeUrl] = useState(iframeUrlLoggedOut);
    const doubleIframeUrl = !!loggedIn;
    const { isAuthenticated } = user;
    const consentContext = useContext(ConsentContext);
    const [lazyLoadElementRef, shouldLoadComponent] = useLazyLoadComponent();
    const shouldDisplayComponent = (consentContext.targeting || privacy === 'false') && shouldLoadComponent;
    const iframeElementRef = useRef();
    const figureElementRef = useRef();
    const receiveMessage = ({ source, origin, data }) => {
        const { type: dataType, height: newHeight } = data;
        // Ensure DOM node exists and origin matches
        const isSameDomain = figureElementRef.current &&
            iframeElementRef.current &&
            iframeElementRef.current.src.startsWith(origin) &&
            iframeElementRef.current.contentWindow === source;
        let height;
        // exit if message coming from the wrong source
        if (!isSameDomain)
            return;
        // check if pym
        if (typeof data === 'string' && data.indexOf('apym') !== -1) {
            height = data.replace('apym', '');
            // check if resizer
        }
        else if (dataType === 'embed-size') {
            height = newHeight;
        }
        // if we have a height
        if (height) {
            iframeElementRef.current.style.height = `${Number(height) + offsetHeight}px`;
        }
    };
    useEffect(() => {
        window.addEventListener('message', receiveMessage);
        return () => {
            window.removeEventListener('message', receiveMessage);
        };
    });
    useEffect(() => {
        if (isAuthenticated) {
            if (doubleIframeUrl) {
                setIframeUrl(iframeUrlLoggedIn);
            }
        }
        else {
            setIframeUrl(iframeUrlLoggedOut);
        }
    }, [isAuthenticated, doubleIframeUrl, iframeUrlLoggedIn, iframeUrlLoggedOut]);
    return (React.createElement(CNEEventRegistrationEmbedWrapper, { "data-testid": "CNEEventRegistrationEmbedWrapper", className: className, ref: lazyLoadElementRef },
        React.createElement(CNEEventRegistrationEmbedContainer, { ref: figureElementRef }, shouldDisplayComponent ? (React.createElement(CNEEventRegistrationEmbedContent, { title: title, src: iframeUrl, ref: iframeElementRef, scrolling: "no" })) : (React.createElement(ConsentBanner, { hasConsent: consentContext.targeting, url: iframeUrl, consentBannerHeader: translations.consentBannerHeader })))));
};
CNEEventRegistrationEmbed.propTypes = {
    className: PropTypes.string,
    offsetHeight: PropTypes.number,
    title: PropTypes.string,
    url: PropTypes.string.isRequired,
    user: PropTypes.object
};
CNEEventRegistrationEmbed.displayName = 'CNEEventRegistrationEmbed';
module.exports = withUser(CNEEventRegistrationEmbed);
//# sourceMappingURL=CNEEventRegistrationEmbed.js.map

/***/ }),

/***/ 90609:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const CNEEventRegistrationEmbed = __webpack_require__(259);
module.exports = asConfiguredComponent(CNEEventRegistrationEmbed, 'CNEEventRegistrationEmbed');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 32443:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing } = __webpack_require__(26865);
const CNEEventRegistrationEmbedWrapper = styled.figure.withConfig({
    displayName: 'CNEEventRegistrationEmbedWrapper'
}) `
  margin: ${calculateSpacing(5, 'px')} auto;
  height: 100%;
  text-align: center;
`;
const CNEEventRegistrationEmbedContainer = styled.div.withConfig({
    displayName: 'CNEEventRegistrationEmbedContainer'
}) `
  width: 100%;
  height: 100%;
`;
const CNEEventRegistrationEmbedContent = styled.iframe.withConfig({
    displayName: 'CNEEventRegistrationEmbedContent'
}) `
  border: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
`;
module.exports = {
    CNEEventRegistrationEmbedWrapper,
    CNEEventRegistrationEmbedContainer,
    CNEEventRegistrationEmbedContent
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 41357:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    consentBannerHeader: {
        id: 'IframeEmbed.ConsentBannerHeader',
        defaultMessage: 'Content',
        description: 'Header for message banner'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 37512:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { connect: connectToStore } = __webpack_require__(67851);
const VideoWrapper = __webpack_require__(50433);
const CNEVideoEmbed = __webpack_require__(59098);
const { shouldExcludeInterlude, extractLedeContentType } = __webpack_require__(2013);
const appendQueryToURI = __webpack_require__(70978);
const injectScript = __webpack_require__(22445);
const breakpoints = __webpack_require__(99906);
const { Container } = __webpack_require__(13489);
const { TrackComponentChannel } = __webpack_require__(78788);
const { inlineInterludePosition } = __webpack_require__(62327);
let counter = 0;
const bigEnoughForRail = () => {
    const query = `(min-width: ${breakpoints.maxThresholds.lg}px)`;
    return window.matchMedia(query).matches;
};
/**
 * CNEInterludeEmbed component
 *
 * @param {object} props - React prop
 * @param {string} [props.brand] - brand associated with page
 * @param {string} [props.embeddedVideos] - a string of commma separated CNE video ids
 * @param {string} [props.playerBase] - base url from which to request the embed code
 * @param {boolean} [props.hasExcludedEmbed] - should interlude be disabled based on an existing embed?
 * @param {boolean} [props.isTitleLeftAligned] - indicates if header and video title should be left aligned
 * @param {boolean} [props.isTitleBelowVideo] - indicates if video title should below the video
 * @param {boolean} [props.isRightRail] - is this interlude player in the right rail?
 * @param {boolean} [props.isRailEligible] - can interlude be placed on right rail?
 * @param {object} [props.relatedVideo] - related video object for override reference
 * @param {object} [props.isTitleLinkDisabled] - bool that determines if the title should link out to video watch pages
 * @param {boolean} [props.shouldApplyMarginForInterlude] - should apply margin style for this video player?
 * @param {boolean} [props.shouldSkipAdPrefetch_variation] - Optional flag to disable vast video ad prefetch. Defaults to false.
 * @param {boolean} [props.shouldSkipAdPrebid_variation] - Optional flag to disable prebid ad request. Defaults to false.
 * @param {boolean} [props.shouldUseInterludeHeaderForRightRail] - if true, we will use interlude header text for right rail
 * @param {boolean} [props.shouldOverrideHeaderTextForInterludeId] - if true, we will use related video override header text for videos having interludeOverrideId
 * @param {string} [props.variationName] - Component variation name used for Component Tracking

 * @returns {ReactElement} <div>
 */
class CNEInterludeEmbed extends React.Component {
    constructor(props) {
        super(props);
        /**
         * Updates component state when a video is present
         *
         * @param {object} video - the new video
         * @returns {undefined} undefined
         */
        this.onVideoChange = (video) => {
            this.setState({ video });
        };
        this.onVideoLoad = () => {
            this.setState({ loading: false });
        };
        /**
         * Receives the CNÉ-specific tracking method from `CNEVideoEmbed`
         *   for tracking clicks to the title element
         *
         * @param {Function} tracker - the tracking function from CNÉ player object
         * @returns {undefined} undefined
         */
        this.registerTracker = (tracker) => {
            this.setState({ tracker });
        };
        this.attemptInterludeActivation = () => {
            /*
              in cases where a rightRail may appear, we are creating interludes in both the body of a page
              and in the right rail. We will then check here to see if we're on a viewport that
              is big enough to display the right rail, and disable the body or the right rail player as necessary.
              Decision was made not to use a <Viewport> because
                1) the Viewport component would need to be injected into article bodies during the transform process
                   to deal with article interlude injection logic, which I don't think is supported
                2) we don't want to re-render players when viewports resize after page load
            */
            if (this.props.isRailEligible) {
                const railVisible = bigEnoughForRail();
                if ((railVisible && !this.props.isRightRail) ||
                    (!railVisible && this.props.isRightRail)) {
                    return;
                }
            }
            // we can simplify this if we decide we don't need to support a hardcoded callback name for testing
            this.callbackName = this.props.playerBase.match('test')
                ? 'CNE_TEST_CALLBACK'
                : `CNE_onReady_${Date.now()}${counter++}`;
            // register window callback to be called once Interlude embed code is complete
            // and has a scriptSrc to pass us, which we can then pass to the CNEVideoEmbed
            // if we pass an error, disable the player
            window[this.callbackName] = ({ headerText, scriptSrc, video }, error) => {
                if (error) {
                    this.setState({
                        disabled: true
                    });
                    return;
                }
                this.setState({
                    disabled: false,
                    headerText,
                    scriptSrc,
                    video
                });
            };
            // add interlude embed script to the head
            this.script = injectScript(this.getInterludeSrc(), document.head, {
                async: true
            });
        };
        this.state = {
            disabled: true,
            headerText: '',
            scriptSrc: '',
            video: {},
            loading: true,
            tracker: () => { }
        };
    }
    async componentDidMount() {
        this.attemptInterludeActivation();
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'CNEInterludeEmbed',
            variation: this.props.variationName
        });
    }
    componentDidUpdate(prevProps) {
        // if rail eligibility is removed (via experiment), re-attempt to enable player
        if (prevProps.isRailEligible && !this.props.isRailEligible) {
            this.attemptInterludeActivation();
        }
    }
    componentWillUnmount() {
        if (this.script) {
            // 'cancelled' is a signal to the player-frontend interlude code
            //  to bail on this interlude insertion attempt without throwing
            this.script.classList.add('cancelled');
        }
        if (this.callbackName) {
            delete window[this.callbackName];
        }
    }
    getInterludeSrc() {
        const { ledeContentType, hasExcludedEmbed } = this.props;
        const hasExcludedEmbedInHeader = ledeContentType === 'cneembed' || ledeContentType === 'cnevideo';
        const queryParams = {
            verso: true,
            onReady: this.callbackName,
            hasExcludedEmbed: shouldExcludeInterlude({
                hasExcludedEmbedInHeader,
                hasExcludedEmbedInBody: hasExcludedEmbed
            }),
            embeddedVideos: this.props.embeddedVideos.join(','),
            rightRail: this.props.isRightRail
        };
        if (this.props.interludeOverrideId) {
            // Conditionally added to queryParams to avoid stringifying falsy value in appendQueryToURI
            queryParams.interludeOverrideId = this.props.interludeOverrideId;
        }
        else if (this.props.relatedVideo?.related?.cneId) {
            queryParams.interludeOverrideId = this.props.relatedVideo.related.cneId;
        }
        return appendQueryToURI(`${this.props.playerBase}/interlude/${this.props.brand}.js`, queryParams);
    }
    render() {
        return (React.createElement(Container, { applyMarginForInterlude: this.props.shouldApplyMarginForInterlude }, this.state.disabled ? null : (React.createElement(VideoWrapper, { brandName: this.props.humanName, isRightRail: this.props.isRightRail, brand: this.props.brand, headerText: this.state.headerText, isTitleLeftAligned: this.props.isTitleLeftAligned, isTitleBelowVideo: this.props.isTitleBelowVideo, isTitleLinkDisabled: this.props.isTitleLinkDisabled, 
            // shouldOverrideHeaderText_variation is used as part of an A/B test variation
            // that injects the related video as the interlude video source
            shouldOverrideHeaderText_variation: this.props.shouldOverrideHeaderTextForInterludeId
                ? !!this.props.interludeOverrideId
                : !!this.props.relatedVideo?.related?.cneId, isLoading: this.state.loading, video: this.state.video, tracker: this.state.tracker, shouldUseInterludeHeaderForRightRail: this.props.shouldUseInterludeHeaderForRightRail },
            React.createElement(CNEVideoEmbed, { shouldAutoplay: true, shouldMute: false, scriptUrl: this.state.scriptSrc, onVideoChange: this.onVideoChange, registerTracker: this.registerTracker, isRightRail: this.props.isRightRail, isTitleLeftAligned: this.props.isTitleLeftAligned, isTitleBelowVideo: this.props.isTitleBelowVideo, onVideoLoad: this.onVideoLoad, videoEmbedPosition: this.props.videoEmbedPosition || inlineInterludePosition, 
                /* TODO: This is a prop titled "variation" in componentConfig
                settings. We should utilize the asVariation wrapper
                on CNEInterludeEmbed for continuity with the CNEVideoEmbed variation */
                isStickyType: !!this.props.variation, variationName: { stickyVariation: this.props.variation }, shouldSkipAdPrefetch_variation: this.props.shouldSkipAdPrefetch_variation, shouldSkipAdPrebid_variation: this.props.shouldSkipAdPrebid_variation, positionInstance: this.props.positionInstance })))));
    }
}
CNEInterludeEmbed.propTypes = {
    brand: PropTypes.string,
    embeddedVideos: PropTypes.arrayOf(PropTypes.string),
    hasExcludedEmbed: PropTypes.bool,
    humanName: PropTypes.string,
    interludeOverrideId: PropTypes.string,
    isRailEligible: PropTypes.bool,
    isRightRail: PropTypes.bool,
    isTitleBelowVideo: PropTypes.bool,
    isTitleLeftAligned: PropTypes.bool,
    isTitleLinkDisabled: PropTypes.bool,
    ledeContentType: PropTypes.string,
    playerBase: PropTypes.string,
    positionInstance: PropTypes.number,
    relatedVideo: PropTypes.object,
    shouldApplyMarginForInterlude: PropTypes.bool,
    shouldOverrideHeaderTextForInterludeId: PropTypes.bool,
    shouldSkipAdPrebid_variation: PropTypes.bool,
    shouldSkipAdPrefetch_variation: PropTypes.bool,
    shouldUseInterludeHeaderForRightRail: PropTypes.bool,
    variation: PropTypes.string,
    variationName: PropTypes.string,
    videoEmbedPosition: PropTypes.string
};
CNEInterludeEmbed.defaultProps = {
    brand: '',
    embeddedVideos: [],
    hasExcludedEmbed: false,
    humanName: '',
    isRailEligible: false,
    isRightRail: false,
    isTitleBelowVideo: false,
    isTitleLeftAligned: false,
    // default to production
    playerBase: 'https://player.cnevids.com',
    positionInstance: 0,
    shouldOverrideHeaderTextForInterludeId: false,
    shouldSkipAdPrebid_variation: false,
    shouldSkipAdPrefetch_variation: false,
    shouldUseInterludeHeaderForRightRail: false
};
CNEInterludeEmbed.displayName = 'CNEInterludeEmbed';
module.exports = connectToStore((store) => {
    return {
        ledeContentType: extractLedeContentType(store)
    };
})(CNEInterludeEmbed);
//# sourceMappingURL=CNEInterludeEmbed.js.map

/***/ }),

/***/ 50433:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(78011)/* ["default"] */ .A);
const { VideoFigure, InterludeHeader, InterludeTitle, InterludeRightRailTitle, InterludeTitleLink } = __webpack_require__(13489);
/**
 * VideoWrapper component
 *
 * Wraps the Video embed within the CNEInterludeEmbed component, and performs all conditional
 * logic for display of titling and styling. As written, not meant to be used on non-Interlude
 * video embeds.
 *
 * @param {object} props - React props
 * @param {string} [props.children] - React children, namely the video embed component itself
 * @param {string} [props.headerText] - header text to use for the video display
 * @param {boolean} [props.isLoading] - is the player in the proces of loading?
 * @param {boolean} [props.isRightRail] - is this interlude player in the right rail?
 * @param {boolean} [props.isTitleBelowVideo] - indicates if video title should below the video
 * @param {boolean} [props.isTitleLeftAligned] - indicates if header and video title should be left aligned
 * @param {boolean} [props.tracker] - player tracker function
 * @param {boolean} [props.shouldOverrideHeaderText_variation] - if true, we will use related video override header text
 * @param {boolean} [props.shouldUseInterludeHeaderForRightRail] - if true, we will use interlude header text for right rail
 * @param {boolean} [props.video] - video object with title and url

 * @returns {ReactElement} <div>
 */
const VideoWrapper = ({ children, headerText, isLoading, isTitleBelowVideo = false, isTitleLeftAligned = false, isRightRail, isTitleLinkDisabled, tracker, shouldOverrideHeaderText_variation = false, shouldUseInterludeHeaderForRightRail = false, video = {} }) => {
    /**
     * Calls the CNÉ player's tracking method when the title is clicked
     *
     * @param {Function} tracker - tracker function to call
     * @returns {Function} handler function that will call tracker
     */
    const intl = useIntl();
    const trackTitleClick = (tracker) => () => {
        tracker('Interlude Verso Title Click', 'Player Event');
    };
    const renderVideoTitle = ({ tracker, video, isTitleLeftAligned, isTitleBelowVideo, isRightRail }) => {
        const titleDiv = isRightRail ? (React.createElement(InterludeRightRailTitle, { isTitleLeftAligned: isTitleLeftAligned, isTitleBelowVideo: isTitleBelowVideo }, video.title_text_override || video.title)) : (React.createElement(InterludeTitle, { isTitleLeftAligned: isTitleLeftAligned }, video.title_text_override || video.title));
        if (video.live_metadata || isTitleLinkDisabled) {
            return titleDiv;
        }
        return (React.createElement(InterludeTitleLink, { rel: "noopener noreferrer", target: "_blank", "aria-label": "Opens in a new window", href: video.title_url_override || video.url, onClick: trackTitleClick(tracker) }, titleDiv));
    };
    const getHeaderText = (isRightRail, shouldOverrideHeaderText_variation, shouldUseInterludeHeaderForRightRail) => {
        if (isRightRail && !shouldUseInterludeHeaderForRightRail) {
            return shouldOverrideHeaderText_variation
                ? intl.formatMessage(translations.headerTextRelatedOverride)
                : intl.formatMessage(translations.headerText);
        }
        return shouldOverrideHeaderText_variation
            ? intl.formatMessage(translations.headerTextRelatedOverride)
            : headerText;
    };
    const header = isLoading ? null : (React.createElement(React.Fragment, null,
        React.createElement(InterludeHeader, { isRightRail: isRightRail, isTitleLeftAligned: isTitleLeftAligned, isTitleBelowVideo: isTitleBelowVideo }, getHeaderText(isRightRail, shouldOverrideHeaderText_variation, shouldUseInterludeHeaderForRightRail)),
        !isRightRail &&
            !isTitleBelowVideo &&
            renderVideoTitle({
                tracker,
                video,
                isTitleLeftAligned,
                isTitleBelowVideo,
                isRightRail
            })));
    const footer = !isLoading && (isRightRail || isTitleBelowVideo)
        ? renderVideoTitle({
            tracker,
            video,
            isTitleLeftAligned,
            isTitleBelowVideo,
            isRightRail
        })
        : null;
    return (React.createElement(VideoFigure, { isRightRail: isRightRail, "data-testid": `cne-interlude-container${isRightRail ? '-right-rail' : ''}`, isTitleLeftAligned: isTitleLeftAligned, isTitleBelowVideo: isTitleBelowVideo },
        header,
        children,
        footer));
};
VideoWrapper.propTypes = {
    children: PropTypes.node,
    headerText: PropTypes.string,
    isLoading: PropTypes.bool,
    isRightRail: PropTypes.bool,
    isTitleBelowVideo: PropTypes.bool,
    isTitleLeftAligned: PropTypes.bool,
    isTitleLinkDisabled: PropTypes.bool,
    shouldOverrideHeaderText_variation: PropTypes.bool,
    shouldUseInterludeHeaderForRightRail: PropTypes.bool,
    tracker: PropTypes.func,
    video: PropTypes.shape({
        title: PropTypes.string,
        url: PropTypes.string,
        live_metadata: PropTypes.object,
        title_text_override: PropTypes.string,
        title_url_override: PropTypes.string
    })
};
module.exports = VideoWrapper;
//# sourceMappingURL=VideoWrapper.js.map

/***/ }),

/***/ 96303:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const CNEInterludeEmbed = __webpack_require__(37512);
module.exports = asConfiguredComponent(CNEInterludeEmbed, 'CNEInterludeEmbed');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 13489:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BREAKPOINTS } = __webpack_require__(96472);
const { BaseText, BaseLink } = __webpack_require__(76955);
const { calculateSpacing, getColorStyles } = __webpack_require__(26865);
const VideoFigure = styled.figure.withConfig({ displayName: 'VideoFigure' }) `
  clear: both;
  margin: ${calculateSpacing(2)} 0;
  ${({ isTitleLeftAligned }) => `text-align: ${isTitleLeftAligned ? 'left' : 'center'};`}

  div[data-testid="cnevideoembed"] {
    text-align: -webkit-center;
  }

  border-width: 1px 0;
  border-style: solid;
  ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.consumption.body.standard.divider')};
  padding: ${calculateSpacing(2)} 0 0;

  ${({ isRightRail, theme, isTitleBelowVideo }) => isRightRail &&
    `
    margin: ${calculateSpacing(4)} 0;
    width: 300px;
    border-width: 2px 0;
    ${getColorStyles(theme, 'border-top-color', 'colors.discovery.body.white.heading')};
    ${getColorStyles(theme, 'border-bottom-color', 'colors.discovery.body.white.heading')};
    padding: ${isTitleBelowVideo ? `0;` : `0 0 ${calculateSpacing(1)} 0;`}

    @media (min-width: ${BREAKPOINTS.xl}) {
      width: 370px;
    }

    iframe {
      height: auto;
    }
  `}

  ${({ isRightRail }) => !isRightRail &&
    `
    @media (max-width: ${BREAKPOINTS.md}) {
      background-color: #000000;
      border-top-color: #000000;
      border-bottom-color: #000000;
      margin-right: calc(-1 * var(--grid-margin));
      margin-left: calc(-1 * var(--grid-margin));
    }
  `}
`;
const Container = styled.div.withConfig({ displayName: 'Container' }) `
  @media print {
    display: none;
  }

  &:first-child {
    > figure.${VideoFigure.styledComponentId} {
      ${({ applyMarginForInterlude }) => `
      margin-top: ${applyMarginForInterlude ? `2.5rem;` : `0;`} 
    `}
    }
  }
`;
const InterludeTitleLink = styled(BaseLink).withConfig({
    displayName: 'InterludeTitleLink'
}) `
  display: block;
  @media (max-width: ${BREAKPOINTS.md}) {
    padding: 0 ${calculateSpacing(3)};
  }
`;
InterludeTitleLink.defaultProps = {
    colorToken: 'colors.discovery.body.white.heading',
    displayName: 'InterludeTitleLink'
};
const InterludeHeader = styled(BaseText).withConfig({
    displayName: 'InterludeHeader'
}) `
  margin: 0 0 ${calculateSpacing(1)} 0;
  @media (max-width: ${BREAKPOINTS.md}) {
    padding: 0 ${calculateSpacing(3)};
  }
  text-transform: uppercase;
  font-style: normal;
  ${({ isRightRail, theme, isTitleLeftAligned }) => isRightRail
    ? `
    ${getColorStyles(theme, 'color', 'colors.consumption.lead.standard.context-tertiary')};
    margin: ${isTitleLeftAligned ? `${calculateSpacing(2)} 0` : `${calculateSpacing(2)}`};
  `
    : `
      ${getColorStyles(theme, 'color', 'colors.consumption.lead.standard.context-tertiary')};
    &::after {
      display: block;
      ${getColorStyles(theme, 'background-color', 'colors.consumption.body.standard.divider')};
      width: 50px;
      height: 1px;
      content: '';
    }
  `}
  ${({ isTitleLeftAligned }) => `
    &::after {
      margin: ${calculateSpacing(1)} ${isTitleLeftAligned ? '0 0;' : 'auto 0 auto;'}
    }`}

  ${({ isRightRail, theme }) => !isRightRail &&
    `
      @media (max-width: ${BREAKPOINTS.md}) {
        ${getColorStyles(theme, 'color', 'colors.consumption.lead.inverted.accreditation')};
        &::after {
          width: 100%;
          ${getColorStyles(theme, 'background-color', 'colors.foundation.menu.dividers')};  
        }
      }
  `}
`;
InterludeHeader.defaultProps = {
    colorToken: 'colors.discovery.body.white.heading',
    displayName: 'InterludeHeader',
    isTitleBelowVideo: false,
    isTitleLeftAligned: false,
    typeIdentity: 'typography.definitions.globalEditorial.context-primary'
};
const InterludeTitle = styled(BaseText).withConfig({
    displayName: 'InterludeTitle'
}) `
  ${({ isTitleLeftAligned, theme }) => `${getColorStyles(theme, 'color', 'colors.consumption.lead.standard.context-tertiary')};    
        ${isTitleLeftAligned
    ? `margin: 0 0 ${calculateSpacing(2)};`
    : `margin: 0 ${calculateSpacing(2)} ${calculateSpacing(2)};`}
      `}

  ${({ isRightRail, theme }) => !isRightRail &&
    `
        @media (max-width: ${BREAKPOINTS.md}) {
          ${getColorStyles(theme, 'color', 'colors.consumption.lead.inverted.context-tertiary')};
        }
    `}
`;
InterludeTitle.defaultProps = {
    displayName: 'InterludeTitle',
    typeIdentity: 'typography.definitions.consumptionEditorial.subhed-aux-secondary'
};
const InterludeRightRailTitle = styled(BaseText).withConfig({
    displayName: 'InterludeRightRailTitle'
}) `
  margin: ${calculateSpacing(2)};
  ${({ isTitleLeftAligned }) => `
    padding: 0 ${calculateSpacing(2)} ${isTitleLeftAligned ? `0 0` : ''};
    ${isTitleLeftAligned ? `margin-left: 0` : ''}
  `}
`;
InterludeRightRailTitle.defaultProps = {
    displayName: 'InterludeRightRailTitle',
    typeIdentity: 'typography.definitions.discovery.hed-bulletin-primary'
};
module.exports = {
    Container,
    VideoFigure,
    InterludeTitleLink,
    InterludeHeader,
    InterludeTitle,
    InterludeRightRailTitle
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 78011:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    headerText: {
        id: 'VideoWrapper.headerText',
        defaultMessage: 'WATCH',
        description: 'VideoWrapper component header text'
    },
    headerTextRelatedOverride: {
        id: 'VideoWrapper.headerTextRelatedOverride',
        defaultMessage: 'Featured Video',
        description: 'VideoWrapper component header text with related video override'
    },
    moreLink: {
        id: 'VideoWrapper.moreLink',
        defaultMessage: 'More {brandName} Videos',
        description: 'VideoWrapper component "more" link'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 2013:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.shouldExcludeInterlude = exports.extractLedeContentType = void 0;
const extractLedeContentType = (store = {}) => {
    const pageType = store['head.pageType'];
    const page = store[pageType];
    const ledeContentType = 
    // articles
    page?.headerProps?.lede?.metadata?.contentType ||
        // galleries, recipes, and reviews
        page?.header?.lede?.contentType;
    return ledeContentType;
};
exports.extractLedeContentType = extractLedeContentType;
const shouldExcludeInterlude = ({ hasExcludedEmbedInBody, hasExcludedEmbedInHeader } = {}) => {
    // Right rail interlude should be prevented if any of the following are true
    const policies = [hasExcludedEmbedInHeader, hasExcludedEmbedInBody];
    return policies.some((policy) => policy);
};
exports.shouldExcludeInterlude = shouldExcludeInterlude;
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 73362:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const classnames = __webpack_require__(32485);
const { TrackComponentChannel } = __webpack_require__(78788);
const { CollageVideoItemInlineVideoItem, CollageVideoItemResponsiveAsset, CollageVideoItemWrapper, CollageVideoItemRubric, CollageVideoItemHed, CollageVideoItemHeadingLink } = __webpack_require__(1483);
const { inlineEmbedPosition } = __webpack_require__(62327);
/**
 * CollageVideoItem Component
 *
 * A simple wrapper that returns a ResponsiveAsset for the 'featured' video item of a list (typically index 0) allowing
 * it to be embedded, and an InlinveVideoItem (essentially a SummaryItem with just a hed) otherwise.
 *
 * @param {object} [props.analyticsDataAttribute] - Optional data-section-title attribute for component level tracking
 * @param {string} [className] - should be passed the same className as other collage items to maintain grid spacing (until SummaryCollages are converted to styled components)
 * @param {boolean} [hasNoUnderline] - Optional flag to remove underline from link
 * @param {boolean} [isFeatured] - optional prop indicating that this item is featured and should be embedded (default: false)
 * @param {object} item - the summary item. requires item.image.scriptUrl to be embedded
 * @param {object} [nonFeaturedItemConfig] - props to pass to non featured Collage Item
 * @param {string} [nonFeaturedItemConfig.playIconStyle] - optional setting to use either 'dark' or 'cne' play icons
 * @param {object} [nonFeaturedItemConfig.shouldHideIcon] - hide the 'play' icon that appears over the video item image (default: false)
 * @param {object} [nonFeaturedItemConfig.shouldPlayInline] - also embed the non featured items. note that this requires a 'scriptUrl' (default: false)
 * @param {string} scriptUrl - required string provided from CNE so videos can be embedded.
 * @param {object} [shouldAutoplay] - should autoplay featured video (default: false)
 * @param {string} [props.hedTag] - Option to override the default header html tag when nested whithin a higher level header
 */
const CollageVideoItem = ({ analyticsDataAttribute = {}, className, hasNoUnderline = false, hedTag = 'h2', isFeatured = false, item = {}, nonFeaturedItemConfig = {
    shouldHideIcon: false,
    shouldPlayInline: false
}, scriptUrl, shouldAutoplay = false, isDenseSummaryCollageThree }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'CollageVideoItem'
        });
    }, []);
    if (!scriptUrl) {
        return null;
    }
    const { dangerousHed } = item;
    const CollageVideoHeading = (React.createElement(CollageVideoItemHed, { dangerouslySetInnerHTML: { __html: dangerousHed }, as: hedTag }));
    const ItemComponent = isFeatured ? (React.createElement(CollageVideoItemResponsiveAsset, { ...item, shouldAutoplay: shouldAutoplay, scriptUrl: scriptUrl, hasNoUnderline: hasNoUnderline, videoEmbedPosition: inlineEmbedPosition })) : (React.createElement(CollageVideoItemInlineVideoItem, { ...item, scriptUrl: scriptUrl, ...nonFeaturedItemConfig, hedTag: hedTag, isDenseSummaryCollageThree: isDenseSummaryCollageThree, hasNoUnderline: hasNoUnderline, videoEmbedPosition: inlineEmbedPosition }));
    return (React.createElement(CollageVideoItemWrapper, { className: classnames('CollageVideoItemWrapper', className), ...analyticsDataAttribute, isDenseSummaryCollageThree: isDenseSummaryCollageThree },
        ItemComponent,
        isDenseSummaryCollageThree && isFeatured && (React.createElement(CollageVideoItemRubric, { name: item.rubric.name })),
        isDenseSummaryCollageThree && isFeatured && (React.createElement(CollageVideoItemHeadingLink, { href: item.url }, CollageVideoHeading))));
};
CollageVideoItem.propTypes = {
    analyticsDataAttribute: PropTypes.object,
    className: PropTypes.string,
    hasNoUnderline: PropTypes.bool,
    hedTag: PropTypes.string,
    isDenseSummaryCollageThree: PropTypes.bool,
    isFeatured: PropTypes.bool,
    item: PropTypes.object.isRequired,
    nonFeaturedItemConfig: PropTypes.shape({
        playIconStyle: PropTypes.oneOf(['dark', 'white', 'cne']),
        shouldHideIcon: PropTypes.bool,
        shouldPlayInline: PropTypes.bool
    }),
    scriptUrl: PropTypes.string.isRequired,
    shouldAutoplay: PropTypes.bool
};
CollageVideoItem.displayName = 'CollageVideoItem';
module.exports = CollageVideoItem;
//# sourceMappingURL=CollageVideoItem.js.map

/***/ }),

/***/ 97857:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const CollageVideoItem = __webpack_require__(73362);
module.exports = asConfiguredComponent(CollageVideoItem, 'CollageVideoItem');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 1483:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BaseLink, BaseText } = __webpack_require__(76955);
const { BREAKPOINTS } = __webpack_require__(96472);
const { calculateSpacing, getTypographyStyles, getColorStyles } = __webpack_require__(26865);
const ResponsiveAsset = __webpack_require__(73275);
const InlineVideoItem = __webpack_require__(29697);
const { InlineVideoItemHeadingLink } = __webpack_require__(41803);
const { GridItem } = __webpack_require__(40653);
const Rubric = __webpack_require__(34187);
const { SummaryCollageThreeItemWrapper } = __webpack_require__(85095);
const CollageVideoItemResponsiveAsset = styled(ResponsiveAsset).withConfig({
    displayName: 'CollageVideoItemResponsiveAsset'
}) `
  ${InlineVideoItemHeadingLink} {
    ${({ hasNoUnderline }) => hasNoUnderline &&
    `
  &:link {
    text-decoration: none;
  }
  &:hover {
    text-decoration: underline;
  }
  `}
  }
  ${({ theme }) => getColorStyles(theme, 'background', 'colors.discovery.body.light.background')};

  @media (max-width: ${BREAKPOINTS.lg}) {
    margin-bottom: ${calculateSpacing(2)};
  }
`;
const CollageVideoItemRubric = styled(Rubric).withConfig({
    displayName: 'CollageVideoItemRubric'
}) `
  display: block;
  margin-top: ${calculateSpacing(2)};
  margin-bottom: ${calculateSpacing(1)};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.discovery.body.white.context-signature')};
`;
const CollageVideoItemInlineVideoItem = styled(InlineVideoItem).withConfig({
    displayName: 'CollageVideoItemInlineVideoItem'
}) `
  ${InlineVideoItemHeadingLink} {
    ${({ hasNoUnderline }) => hasNoUnderline &&
    `
    &:link {
      text-decoration: none;
    }
    &:hover {
      text-decoration: underline;
    }
    `}
  }

  &.inline-video-item {
    padding-bottom: 0;
    @media (min-width: ${BREAKPOINTS.lg}) {
      border-width: 1px;
      border-bottom-style: solid;
    }
  }

  h2,
  h3 {
    ${({ theme, isDenseSummaryCollageThree }) => isDenseSummaryCollageThree
    ? getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-primary')
    : getTypographyStyles(theme, 'typography.definitions.discovery.hed-bulletin-primary')};
    @media (max-width: ${BREAKPOINTS.lg}) {
      margin-bottom: ${calculateSpacing(2)};
    }
    @media (min-width: ${BREAKPOINTS.lg}) {
    }
  }
`;
const CollageVideoItemHed = styled(BaseText).withConfig({
    displayName: 'CollageVideoItemHed'
}) `
  ${getTypographyStyles('typography.definitions.discovery.hed-core-primary')}
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.discovery.body.white.heading')};
  @media (min-width: ${BREAKPOINTS.md}) {
    margin-bottom: ${calculateSpacing(3)};
  }
`;
CollageVideoItemHed.defaultProps = {
    bottomSpacing: 2,
    topSpacing: 0
};
const CollageVideoItemHeadingLink = styled(BaseLink).withConfig({
    displayName: 'CollageVideoItemHeadingLink'
}) ``;
CollageVideoItemHeadingLink.defaultProps = {
    colorStaticLinkToken: 'colors.discovery.body.white.heading',
    getLinkStyles: 'global'
};
const CollageVideoItemWrapper = styled('div').withConfig({
    displayName: 'CollageVideoItemWrapper'
}) `
  && {
    @media (min-width: ${BREAKPOINTS.lg}) {
      ${GridItem}:nth-child(4) &${SummaryCollageThreeItemWrapper} {
        padding-top: 0;
      }
    }
  }
  ${CollageVideoItemRubric} {
    @media (min-width: ${BREAKPOINTS.lg}) {
      display: none;
    }
  }
  ${CollageVideoItemHed} {
    @media (min-width: ${BREAKPOINTS.lg}) {
      display: none;
    }
    @media (max-width: ${BREAKPOINTS.md}) {
      display: block;
    }
  }
`;
module.exports = {
    CollageVideoItemInlineVideoItem,
    CollageVideoItemResponsiveAsset,
    CollageVideoItemWrapper,
    CollageVideoItemRubric,
    CollageVideoItemHed,
    CollageVideoItemHeadingLink
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 82582:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CollectionItem = void 0;
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState } = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(43393)["default"]);
const { CollectionsItemWrapper, CollectionsDrawerCollectionItem, CollectionsItemAddedIcon, CollectionsItemDefaultIcon } = __webpack_require__(42775);
const ResponsiveAsset = __webpack_require__(86157);
/**
 * CollectionItem component
 *
 * @param {object} props - React props
 * @param {string} [props.collectionId] - id of the collection
 * @param {string} [props.collectionName] - name of the collection
 * @param {object} [props.image] - image object to represent collection
 * @param {number} [props.totalBookmarkCount] - the number of bookmarks in the collection
 * @param {func} [props.onSave] - function to be called after successfully saving to a collection
 * @param {boolean} [props.isBookmarkDrawersEnabled] -  flag to enable bookmark drawer functionality
 *
 * @returns {ReactElement} <Drawer>
 */
const CollectionItem = ({ collectionId, collectionName, image, totalBookmarkCount, onSave, isBookmarkDrawersEnabled }) => {
    const { formatMessage } = useIntl();
    const [isBookmarkAdded, setIsBookmarkAdded] = useState(false);
    const metadataPrimaryText = isBookmarkDrawersEnabled
        ? formatMessage(translations.bookmarkCountDefaultText, {
            count: totalBookmarkCount
        })
        : formatMessage(translations.bookmarkCountType, {
            count: totalBookmarkCount
        });
    return (
    // SummaryItem can't handle clicks in the way needed so overriding here
    // Making SummaryItemHedLink optional may make this redundant
    React.createElement(CollectionsItemWrapper, { onClick: () => {
            onSave({ collectionName, collectionId });
            setIsBookmarkAdded(true);
        }, onKeyDown: (event) => {
            if (event.key === 'Enter' || event.key === ' ') {
                onSave({ collectionName, collectionId });
            }
        }, style: { cursor: 'pointer' }, tabIndex: 0, role: "button" },
        React.createElement(CollectionsDrawerCollectionItem, { hasWrapperButtonRole: false, dangerousHed: collectionName, hasBorder: false, hasRule: false, image: image, metadataPrimary: metadataPrimaryText, shouldVerticallyAlignHed: true, url: "", emptyBoard: totalBookmarkCount === 0, isBookmarkDrawersEnabled: isBookmarkDrawersEnabled }),
        isBookmarkDrawersEnabled && !isBookmarkAdded && (React.createElement(CollectionsItemDefaultIcon, null)),
        isBookmarkDrawersEnabled && isBookmarkAdded && (React.createElement(CollectionsItemAddedIcon, null))));
};
exports.CollectionItem = CollectionItem;
exports.CollectionItem.propTypes = {
    collectionId: PropTypes.number.isRequired,
    collectionName: PropTypes.string.isRequired,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    isBookmarkDrawersEnabled: PropTypes.bool,
    onSave: PropTypes.func.isRequired,
    totalBookmarkCount: PropTypes.number.isRequired
};
//# sourceMappingURL=CollectionItem.js.map

/***/ }),

/***/ 7105:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const get = __webpack_require__(58156);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useEffect, useState } = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const { TrackComponentChannel } = __webpack_require__(78788);
const translations = (__webpack_require__(43393)["default"]);
const photoBookmarkTranslations = (__webpack_require__(77463)["default"]);
const Drawer = __webpack_require__(91180);
const PhotoBookmark = __webpack_require__(43211);
const { CollectionItem } = __webpack_require__(82582);
const { CollectionsDrawerBookmarkItem, CollectionsDrawerBookmarkItemWrapper, CollectionsDrawerErrorMessage, CollectionsDrawerHeadingWrapper, CollectionsDrawerList, CollectionsDrawerListHeading, CollectionsDrawerListItem, CollectionsDrawerNewCollectionButton, CollectionsDrawerScrollableArea, CollectionsDrawerWrapper, CollectionsDrawerCreateListButton, CollectionsDrawerCreateListDek } = __webpack_require__(42775);
const { useCollections } = __webpack_require__(91637);
const { Circle } = __webpack_require__(62930);
const ResponsiveAsset = __webpack_require__(86157);
const { trackDrawerClose, trackDrawerMoveCollection, trackDrawerSelectCollection, trackCreateCollectionDrawerOpen, trackDrawerCollectionError } = __webpack_require__(60880);
const { connector } = __webpack_require__(57744);
const { usePhotoBookmarkingContext } = __webpack_require__(50624);
const { addExistingBookmarksToACollection, moveBookmarkBetweenCollections } = __webpack_require__(74139);
const DrawerMessageBanner = __webpack_require__(11501);
const isAutoSavedToCollection = (shouldAutoSave, lastCollection) => shouldAutoSave && lastCollection?.id;
const isMovingBetweenCollections = (shouldAutoSave, lastCollection, targetCollectionId) => isAutoSavedToCollection(shouldAutoSave, lastCollection) &&
    lastCollection?.id !== targetCollectionId;
/**
 * CollectionsDrawer component
 *
 * @param {object} props - React props
 * @param {string} [props.copilotID] - ID of the copilotID entity
 * @param {string} [props.contentType] - content type of the last bookmarked photo
 * @param {string} [props.coreDataLayer] - prop containing content type
 * @param {object} [props.image] - object containing the latest saved item to display at the top of the drawer
 * @param {boolean} [props.isLargeDevice] - required boolean, set to true if the user's device is large
 * @param {boolean} [props.isOpen] - boolean value to open/close the collections drawer
 * @param {object} [props.config] - configuration needed to access the flag
 * @param {string} [props.contentTitle] - title of the Summary Item
 * @param {object} [props.componentConfig] - param specified in tenant componentConfig settings
 * @param {object} [props.config.account] - object containing the bookmark feature flag
 * @returns {ReactElement} <Drawer>
 */
const CollectionsDrawer = ({ contentTitle, copilotID, contentType: lastBookmarkedContentType, config: { account }, componentConfig, coreDataLayer, image, isLargeDevice, isOpen = false }) => {
    useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'CollectionsDrawer'
        });
    }, []);
    const [showMessageBanner, setShowMessageBanner] = useState(false);
    const { formatMessage } = useIntl();
    const enableBookmarkDrawers = account?.bookmark?.enableBookmarkDrawers || false;
    const drawerDelay = enableBookmarkDrawers ? 500 : 0;
    const { content: { contentType = 'article' } } = coreDataLayer;
    const { channel, closeAll, federatedGraphqlUrl, lastCollectionSavedTo, openCreateCollectionDrawer, openSaveAlertWithBoardName, openSaveAlertWithBoardNameAfterMove, openSaveAlertError, organizationId, setLastCollectionSaved, shouldAutoSaveToCollection } = usePhotoBookmarkingContext();
    const { collections, hasError, isLoading } = useCollections({
        makeCall: isOpen,
        federatedGraphqlUrl,
        organizationId
    });
    const handleCloseDrawer = () => {
        setShowMessageBanner(false);
        trackDrawerClose();
        closeAll();
        setTimeout(() => {
            setShowMessageBanner(true);
        }, 1000);
    };
    const shouldMoveExistingBookmark = isAutoSavedToCollection(shouldAutoSaveToCollection, lastCollectionSavedTo);
    const performBookmarkSave = async (collectionId) => {
        if (shouldMoveExistingBookmark) {
            return moveBookmarkBetweenCollections({
                toCollectionId: collectionId,
                federatedGraphqlUrl,
                fromCollectionId: lastCollectionSavedTo.id,
                copilotId: copilotID
            });
        }
        return addExistingBookmarksToACollection({
            organizationId,
            federatedGraphqlUrl,
            updateCollectionId: collectionId,
            copilotIds: [copilotID]
        });
    };
    const showSuccessAlert = (collectionName, collectionId) => {
        const isMovingToNewCollection = isMovingBetweenCollections(shouldAutoSaveToCollection, lastCollectionSavedTo, collectionId);
        if (isMovingToNewCollection) {
            return openSaveAlertWithBoardNameAfterMove({ collectionName });
        }
        return openSaveAlertWithBoardName({ collectionName });
    };
    const trackSuccessfulSave = ({ collectionId, collectionName }) => {
        if (shouldMoveExistingBookmark) {
            trackDrawerMoveCollection({
                collectionId,
                collectionName,
                sourceId: lastCollectionSavedTo.id,
                sourceName: lastCollectionSavedTo.name,
                channel,
                contentId: copilotID,
                contentType: lastBookmarkedContentType
            });
        }
        else {
            trackDrawerSelectCollection({
                collectionId,
                collectionName,
                channel,
                contentId: copilotID,
                contentType: lastBookmarkedContentType,
                shouldAutoSaveToCollection
            });
        }
    };
    const onSaveToCollection = async ({ collectionName, collectionId }) => {
        const saveResult = await performBookmarkSave(collectionId, collectionName);
        if (saveResult.success) {
            trackSuccessfulSave({ collectionId, collectionName });
            setLastCollectionSaved({ collectionName, collectionId });
            setTimeout(() => {
                showSuccessAlert(collectionName, collectionId);
            }, drawerDelay);
        }
        else {
            trackDrawerCollectionError({
                errorType: shouldMoveExistingBookmark ? 'move' : 'select',
                errorMessage: formatMessage(photoBookmarkTranslations.SaveBookmarkErrorText, {
                    collectionName
                })
            });
            openSaveAlertError({ collectionName });
        }
    };
    const onNewBoardButtonClickHandler = () => {
        openCreateCollectionDrawer();
        trackCreateCollectionDrawerOpen('New Board');
    };
    const configSettings = get(componentConfig, 'CollectionDrawer.settings', {});
    return (React.createElement(React.Fragment, null,
        React.createElement(CollectionsDrawerWrapper, { as: isLargeDevice ? Drawer.Right : Drawer.Bottom, hideChannelNavigation: true, hideDrawerScroll: true, isLargeDevice: isLargeDevice, isOpen: isOpen, onClose: handleCloseDrawer, showCloseButton: true, isBookmarkDrawersEnabled: enableBookmarkDrawers },
            React.createElement(CollectionsDrawerBookmarkItemWrapper, { isBookmarkDrawersEnabled: enableBookmarkDrawers },
                React.createElement(CollectionsDrawerBookmarkItem, { dangerousHed: enableBookmarkDrawers
                        ? contentTitle
                        : formatMessage(translations.bookmarkSavedText), dangerousDek: enableBookmarkDrawers
                        ? formatMessage(translations.bookmarkSavedDefaultText)
                        : '', hasBorder: false, hasRule: false, image: image, shouldVerticallyAlignHed: true, hasWrapperButtonRole: false, url: "", isBookmarkDrawersEnabled: enableBookmarkDrawers }),
                enableBookmarkDrawers && (React.createElement(PhotoBookmark, { copilotID: copilotID, contentType: contentType, onBookmarkToggle: () => {
                        closeAll();
                    } }))),
            React.createElement(CollectionsDrawerScrollableArea, null,
                collections.length > 0 && (React.createElement(CollectionsDrawerHeadingWrapper, null,
                    React.createElement(CollectionsDrawerListHeading, null, configSettings.collectionsFolderHeading ||
                        formatMessage(translations.collectionsFolderHeading)),
                    React.createElement(CollectionsDrawerNewCollectionButton, { label: configSettings.collectionsNewCollectionButtonLabel ||
                            formatMessage(translations.collectionsNewCollectionButtonLabel), btnStyle: "text", onClickHandler: onNewBoardButtonClickHandler, isBookmarkDrawersEnabled: enableBookmarkDrawers }))),
                !enableBookmarkDrawers && collections.length === 0 && isLoading && (React.createElement(Circle, { "aria-label": "Loading", margin: "0", width: "100%" })),
                !enableBookmarkDrawers && hasError && (React.createElement(CollectionsDrawerErrorMessage, null, formatMessage(translations.collectionsErrorMessage))),
                enableBookmarkDrawers && collections.length === 0 && !isLoading && (React.createElement(React.Fragment, null,
                    React.createElement(CollectionsDrawerCreateListDek, { isBookmarkDrawersEnabled: enableBookmarkDrawers }, configSettings.createFolderPaneDek ||
                        formatMessage(translations.collectionsCreateNewFolderDek)),
                    React.createElement(CollectionsDrawerCreateListButton, { label: configSettings.collectionsNewCollectionButtonLabel ||
                            formatMessage(translations.collectionsNewCollectionButtonLabel), onClickHandler: onNewBoardButtonClickHandler }))),
                React.createElement(CollectionsDrawerList, null, collections.map(({ collectionId, collectionName, totalBookmarkCount, coverImage }) => (React.createElement(CollectionsDrawerListItem, { key: collectionId },
                    React.createElement(CollectionItem, { collectionId: collectionId, collectionName: collectionName, image: coverImage, onSave: onSaveToCollection, totalBookmarkCount: totalBookmarkCount, isBookmarkDrawersEnabled: enableBookmarkDrawers }))))))),
        enableBookmarkDrawers && showMessageBanner && (React.createElement(DrawerMessageBanner, { bannerType: "savedWithoutAddingToList" }))));
};
CollectionsDrawer.propTypes = {
    componentConfig: PropTypes.object,
    config: PropTypes.object,
    contentTitle: PropTypes.string,
    contentType: PropTypes.string,
    copilotID: PropTypes.string,
    coreDataLayer: PropTypes.shape({
        content: PropTypes.object
    }),
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    isLargeDevice: PropTypes.bool.isRequired,
    isOpen: PropTypes.bool
};
module.exports = connector(CollectionsDrawer, {
    keysToPluck: ['config', 'coreDataLayer', 'componentConfig'],
    keysToSpread: ['lastBookmarkedPhoto', 'featureFlags']
});
//# sourceMappingURL=CollectionsDrawer.js.map

/***/ }),

/***/ 71648:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const prop_types_1 = __importDefault(__webpack_require__(5556));
const react_1 = __importStar(__webpack_require__(96540));
const react_intl_1 = __webpack_require__(46984);
const translations_1 = __importDefault(__webpack_require__(43393));
const collectionsUtils_1 = __webpack_require__(74139);
const redux_1 = __webpack_require__(57744);
const context_1 = __webpack_require__(50624);
const reducer_1 = __webpack_require__(39403);
const drawer_with_form_1 = __webpack_require__(48165);
const constants_1 = __webpack_require__(11660);
const photoBookmarkDispatchActions_1 = __webpack_require__(86902);
const tracking_1 = __webpack_require__(60880);
const get = __webpack_require__(58156);
const hasNoTextAfterRemovingSpaces = (collectionName) => collectionName.trim().length < 1;
const getErrorMessage = (error) => {
    if (error === collectionsUtils_1.errorType.DUPLICATE_NAME) {
        return translations_1.default.createCollectionDuplicateNameError;
    }
    return translations_1.default.createCollectionNotMadeError;
};
/**
 * CreateCollectionDrawer component
 *
 * @param {object} props - React props
 * @param {string} [props.copilotID] - image id
 * @param {boolean} [props.isLargeDevice] - required boolean, set to true if the user's device is large
 * @param {boolean} [props.shouldDisableSubmitButtonOnEmptyInput] - if submit button should be disabled when no text has been entered
 * @param {object} [props.config] - Feature flag to enable styles and variations
 * @param {object} [props.componentConfig] - param specified in tenant componentConfig settings
 *
 * @returns {ReactElement} <div>
 */
const CreateCollectionDrawer = ({ copilotID, componentConfig, contentType, config: { account }, isLargeDevice, shouldDisableSubmitButtonOnEmptyInput = true }) => {
    const { formatMessage } = (0, react_intl_1.useIntl)();
    const [errorText, setErrorText] = (0, react_1.useState)('');
    const enableBookmarkDrawers = account?.bookmark?.enableBookmarkDrawers || false;
    const { channel, closeAll, federatedGraphqlUrl, openCollectionsDrawer, openSaveAlertWithBoardName, organizationId, showComponent, setHasCollections, hasCollections } = (0, context_1.usePhotoBookmarkingContext)();
    const isOpen = showComponent === reducer_1.showComponentType.CREATE_COLLECTION_DRAWER;
    const onSubmitHandler = async (collectionName) => {
        if (hasNoTextAfterRemovingSpaces(collectionName)) {
            setErrorText(formatMessage(translations_1.default.createCollectionNoTextError));
            return;
        }
        const { errorType, id: collectionId } = await (0, collectionsUtils_1.createCollection)({
            copilotIds: copilotID ? [copilotID] : [],
            collectionName,
            federatedGraphqlUrl,
            organizationId
        });
        setHasCollections(true);
        if (errorType) {
            setErrorText(formatMessage(getErrorMessage(errorType)));
            return;
        }
        (0, tracking_1.trackCreateCollectionDrawerSave)({
            channel,
            collectionName,
            collectionId,
            copilotID,
            contentType
        });
        if (copilotID) {
            openSaveAlertWithBoardName({ collectionName });
        }
        else {
            closeAll();
        }
    };
    const onInputHandler = () => {
        setErrorText('');
    };
    const customInvalidityMessages = {
        [constants_1.CREATE_COLLECTION_INPUT_NAME]: {
            valueMissing: formatMessage(translations_1.default.createCollectionValueMissingError)
        }
    };
    const onCloseHandler = async () => {
        setErrorText('');
        await closeAll();
        if (hasCollections) {
            openCollectionsDrawer();
        }
    };
    const configSettings = get(componentConfig, 'CollectionDrawer.settings', {});
    return (react_1.default.createElement(drawer_with_form_1.DrawerWithForm, { customInvalidityMessages: customInvalidityMessages, errorText: errorText, formName: constants_1.CREATE_COLLECTION_FORM_NAME, hedText: configSettings.createCollectionHeading ||
            formatMessage(translations_1.default.createCollectionHeading), inputLabel: configSettings.createCollectionInputLabel ||
            formatMessage(translations_1.default.createCollectionInputLabel), inputName: constants_1.CREATE_COLLECTION_INPUT_NAME, inputPlaceholder: configSettings.placeHolderText ||
            formatMessage(translations_1.default.createCollectionPlaceholderText), isOpen: isOpen, isRequired: true, onClose: onCloseHandler, onInput: onInputHandler, onReset: () => setErrorText(''), onSubmit: onSubmitHandler, position: isLargeDevice ? constants_1.drawerPosition.RIGHT : constants_1.drawerPosition.BOTTOM, resetButtonLabel: configSettings.createCollectionResetButtonLabel ||
            formatMessage(translations_1.default.createCollectionResetButtonLabel), shouldDisableSubmitButtonOnEmptyInput: shouldDisableSubmitButtonOnEmptyInput, shouldHideValidationErrorText: true, submitButtonLabel: configSettings.createCollectionSubmitButtonLabel ||
            formatMessage(translations_1.default.createCollectionSubmitButtonLabel), isBookmarkDrawersEnabled: enableBookmarkDrawers }));
};
CreateCollectionDrawer.propTypes = {
    componentConfig: prop_types_1.default.object,
    config: prop_types_1.default.object,
    contentType: prop_types_1.default.string,
    copilotID: prop_types_1.default.string,
    isLargeDevice: prop_types_1.default.bool.isRequired,
    shouldDisableSubmitButtonOnEmptyInput: prop_types_1.default.bool
};
exports["default"] = (0, redux_1.connector)(CreateCollectionDrawer, {
    keysToPluck: ['config', 'componentConfig'],
    keysToSpread: [photoBookmarkDispatchActions_1.photoBookmarkStateKey.LAST_BOOKMARKED_PHOTO]
});
//# sourceMappingURL=CreateCollectionDrawer.js.map

/***/ }),

/***/ 11660:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.drawerPosition = exports.CREATE_COLLECTION_INPUT_NAME = exports.CREATE_COLLECTION_FORM_NAME = void 0;
exports.CREATE_COLLECTION_FORM_NAME = 'createCollection';
exports.CREATE_COLLECTION_INPUT_NAME = 'collectionName';
exports.drawerPosition = { RIGHT: 'Right', BOTTOM: 'Bottom' };
//# sourceMappingURL=constants.js.map

/***/ }),

/***/ 40416:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getCollections = void 0;
const collectionsUtils_1 = __webpack_require__(74139);
/**
 * Extracts alt text from content object with fallback chain
 * @param {object} [content] - Content object containing image data
 * @returns {string|undefined} Alt text or undefined if not found
 */
const getAltText = (content) => content?.altText || content?.tout?.altText;
/**
 * Extracts image URL from content object with fallback chain
 * @param {object} [content] - Content object containing image data
 * @returns {string} Image URL or empty string if not found
 */
const getImageUrl = (content) => content?.bookMarkedUrl ||
    content?.tout?.url ||
    content?.tout?.edges?.[0]?.node?.url ||
    '';
/**
 * Creates cover image object from bookmark data
 * @param {object} lastBookmark - The last bookmark object
 * @param {string} collectionName - The name of the collection for fallback alt text
 * @returns {object} Cover image object with alt text and sources
 */
const createCoverImage = (lastBookmark, collectionName) => {
    const { content } = lastBookmark;
    return {
        altText: getAltText(content) || `an image from collection ${collectionName}`,
        sources: {
            lg: {
                url: getImageUrl(content)
            }
        }
    };
};
/**
 * Transforms raw collection data into the format expected by the collections drawer
 * @param {object} collection - The raw collection object from the API
 * @returns {object} Transformed collection object with consistent structure
 */
const transformCollectionData = (collection) => {
    const { id, collectionName, lastBookmark, totalBookmarkCount } = collection;
    const hasCoverImage = Boolean(lastBookmark);
    return {
        collectionId: id,
        collectionName,
        totalBookmarkCount,
        coverImage: hasCoverImage
            ? createCoverImage(lastBookmark, collectionName)
            : undefined
    };
};
/**
 * Fetches and transforms collections data for the collections drawer
 * @param {object} params - The parameters object
 * @param {string} params.federatedGraphqlUrl - The federated GraphQL URL
 * @param {string} params.organizationId - The organization ID
 * @returns {Promise<Array<object>>} Promise resolving to array of transformed collection objects
 */
const getCollections = async ({ federatedGraphqlUrl, organizationId }) => {
    const collectionsData = await (0, collectionsUtils_1.getCollectionsWithoutBookmarks)({
        federatedGraphqlUrl,
        organizationId
    });
    if (!collectionsData) {
        return [];
    }
    return collectionsData.map(transformCollectionData);
};
exports.getCollections = getCollections;
//# sourceMappingURL=getCollections.js.map

/***/ }),

/***/ 51285:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(7105);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 42775:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, createGlobalStyle } = __webpack_require__(92168);
const { BaseText } = __webpack_require__(76955);
const { calculateSpacing, getColorStyles, getColorToken, getTypographyStyles, minScreen, isInverted } = __webpack_require__(26865);
const Button = __webpack_require__(88456);
const { ButtonIconWrapper } = __webpack_require__(18974);
const Drawer = __webpack_require__(91180);
const { DrawerButton } = __webpack_require__(63967);
const SummaryItem = __webpack_require__(74992);
const { SummaryItemHedBase } = __webpack_require__(36211);
const { SummaryItemMetadataPrimary, SummaryItemContent, SummaryItemWrapper, SummaryItemDek } = __webpack_require__(68116);
const { SummaryItemAssetContainer } = __webpack_require__(68116);
const { BREAKPOINTS } = __webpack_require__(96472);
const { SummaryItemImageLink } = __webpack_require__(14207);
const { CircleWrapper } = __webpack_require__(86286);
const { ButtonLabel } = __webpack_require__(18974);
const { ChannelNavigationWrapper, ChannelNavigationLinksWrapper } = __webpack_require__(63500);
const { SpanWrapper } = __webpack_require__(18117);
const Icons = __webpack_require__(97504);
const { PhotoBookmarkWrapper } = __webpack_require__(62389);
const CollectionsDrawerGlobalStyles = createGlobalStyle `
  html.html__drawer--open {
    overflow: unset;

    ${ChannelNavigationWrapper} {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
    }

    ${ChannelNavigationLinksWrapper} {
      display: none;
    }
  }
`;
const CollectionsDrawerSummaryItem = styled(SummaryItem.SideBySideThirds).withConfig({
    displayName: 'CollectionsDrawerSummaryItem'
}) `
  && {
    grid-template-columns: ${calculateSpacing(7)} 1fr;
    --grid-gap: ${calculateSpacing(2)};

    ${SummaryItemContent}, ${SummaryItemContent} * {
      margin: 0;
      padding: 0;
    }
  }

  ${SummaryItemAssetContainer} {
    aspect-ratio: 2 / 3;

    ${SummaryItemImageLink}, img, picture {
      height: 100%;
    }

    img {
      object-fit: cover;
    }
  }
`;
const CollectionsDrawerBookmarkItemWrapper = styled.div.withConfig({
    displayName: 'CollectionsDrawerBookmarkItemWrapper'
}) `
  display: grid;
  border-bottom: 1px solid;

  ${SummaryItemWrapper} {
    grid-column: 1;
  }

  ${PhotoBookmarkWrapper} {
    position: fixed;
    right: ${calculateSpacing(1.5)};
    align-self: center;

    ${minScreen(BREAKPOINTS.lg)} {
      align-self: center;
      justify-items: center;
    }

    svg path {
      stroke: ${({ theme }) => getColorToken(theme, 'colors.interactive.base.brand-primary')};
    }
    ${ButtonIconWrapper} {
      svg path {
        fill: ${({ theme }) => getColorToken(theme, 'colors.interactive.base.brand-primary')};
      }
    }
  }

  ${({ isBookmarkDrawersEnabled }) => isBookmarkDrawersEnabled &&
    `
      grid-template-columns: 90% auto;
    `}
`;
const CollectionsDrawerBookmarkItem = styled(CollectionsDrawerSummaryItem).withConfig({
    displayName: 'CollectionsDrawerBookmarkItem'
}) `
  padding: ${calculateSpacing(3)} ${calculateSpacing(3)} ${calculateSpacing(2)};
  pointer-events: none;

  ${SummaryItemHedBase} {
    ${({ theme, isBookmarkDrawersEnabled }) => isBookmarkDrawersEnabled
    ? getTypographyStyles(theme, 'typography.definitions.discovery.hed-bulletin-secondary')
    : getTypographyStyles(theme, 'typography.definitions.utility.assistive-text')};
  }

  ${SummaryItemDek} {
    ${({ theme, isBookmarkDrawersEnabled }) => isBookmarkDrawersEnabled &&
    getTypographyStyles(theme, 'typography.definitions.utility.button-utility')};
    ${({ theme, isBookmarkDrawersEnabled }) => isBookmarkDrawersEnabled &&
    getColorStyles(theme, 'color', 'colors.interactive.base.brand-primary')};
  }
`;
const CollectionsDrawerScrollableArea = styled.div.withConfig({
    displayName: 'CollectionsDrawerScrollableArea'
}) `
  overflow-y: auto;
`;
const CollectionsDrawerHeadingWrapper = styled.div.withConfig({
    displayName: 'CollectionsDrawerHeadingWrapper'
}) `
  display: flex;
  padding: ${calculateSpacing(2)} ${calculateSpacing(3)};
`;
const CollectionsDrawerListHeading = styled(BaseText).withConfig({
    displayName: 'CollectionsDrawerListHeading'
}) `
  flex: 1;
  text-align: start;
  ${getTypographyStyles('typography.definitions.foundation.title-secondary')};
`;
const CollectionsDrawerCreateListDek = styled(BaseText).withConfig({
    displayName: 'CollectionsDrawerCreateListDek'
}) `
  flex: 1;
  margin-top: ${calculateSpacing(5)};
  margin-right: ${calculateSpacing(3)};
  margin-bottom: ${calculateSpacing(3)};
  margin-left: ${calculateSpacing(3)};
  text-align: center;
  ${getTypographyStyles('typography.definitions.utility.body')};
`;
const CollectionsDrawerCreateListButton = styled(Button.Utility).withConfig({
    displayName: 'CollectionsDrawerCreateListButton'
}) `
  border: none;
  justify-self: center;
  width: 88%;
`;
const CollectionsDrawerNewCollectionButton = styled(Button.Utility).withConfig({
    displayName: 'CollectionsDrawerNewCollectionButton'
}) `
  padding: 0;
  min-width: unset;
  height: unset;

  ${getTypographyStyles('typography.definitions.foundation.link-secondary')};

  ${({ theme, isBookmarkDrawersEnabled }) => isBookmarkDrawersEnabled &&
    getTypographyStyles(theme, 'typography.definitions.utility.label')};

  ${({ theme, isBookmarkDrawersEnabled }) => isBookmarkDrawersEnabled &&
    getColorStyles(theme, 'color', 'colors.interactive.base.brand-primary')};

  ${ButtonLabel} {
    padding: 0;
  }
`;
const CollectionsDrawerList = styled.ul.withConfig({
    displayName: 'CollectionsDrawerList'
}) `
  margin: 0;
  padding: 0;
  list-style: none;
`;
const CollectionsDrawerListItem = styled.li.withConfig({
    displayName: 'CollectionsDrawerListItem'
}) `
  padding: ${calculateSpacing(1)} ${calculateSpacing(4)};

  ${minScreen(BREAKPOINTS.lg)} {
    padding: ${calculateSpacing(1)} ${calculateSpacing(3)};
  }
`;
const CollectionsDrawerCollectionItem = styled(CollectionsDrawerSummaryItem).withConfig({
    displayName: 'CollectionsDrawerCollectionItem'
}) `
  pointer-events: none;
`;
const CollectionsDrawerWrapper = styled(Drawer).withConfig({
    displayName: 'CollectionsDrawerWrapper'
}) `
  display: flex;
  flex-direction: column;

  ${({ theme, isBookmarkDrawersEnabled }) => isBookmarkDrawersEnabled
    ? getColorStyles(theme, 'background-color', !isInverted(theme)
        ? 'colors.discovery.body.brand.background'
        : 'colors.discovery.body.dark.background')
    : getColorStyles(theme, 'background-color', !isInverted(theme)
        ? 'colors.foundation.menu-bg.expanded'
        : 'colors.discovery.lead.primary.background')};

  &&& {
    padding-top: ${calculateSpacing(3)};
    width: ${({ isLargeDevice }) => isLargeDevice ? calculateSpacing(49) : `100vw`};
    height: ${({ isLargeDevice }) => isLargeDevice ? `100vh` : calculateSpacing(65)};

    ${({ theme }) => isInverted(theme) &&
    getColorStyles('background-color', 'colors.background.black')};

    * {
      ${({ isBookmarkDrawersEnabled, theme }) => !isBookmarkDrawersEnabled &&
    getColorStyles(theme, 'color', isInverted(theme)
        ? 'colors.discovery.body.black.heading'
        : 'colors.discovery.body.light.heading')};
    }

    ${CollectionsDrawerCreateListButton} {
      ${({ theme }) => isInverted(theme)
    ? getColorStyles('background-color', 'colors.interactive.base.white')
    : getColorStyles('background-color', 'colors.interactive.base.black')};
      ${({ theme }) => isInverted(theme)
    ? getColorStyles('color', 'colors.interactive.base.black')
    : getColorStyles('color', 'colors.interactive.base.white')};
    }

    ${CollectionsDrawerCollectionItem} {
      ${SummaryItemHedBase} {
        ${({ isBookmarkDrawersEnabled }) => isBookmarkDrawersEnabled
    ? getTypographyStyles('typography.definitions.foundation.title-primary')
    : getTypographyStyles('typography.definitions.discovery.hed-bulletin-primary')};
        ${({ theme, isBookmarkDrawersEnabled }) => isBookmarkDrawersEnabled &&
    getColorStyles(theme, 'color', isInverted(theme)
        ? 'colors.interactive.base.white'
        : 'colors.interactive.base.black')};
      }
    }

    ${CollectionsDrawerListHeading} {
      ${({ theme, isBookmarkDrawersEnabled }) => isBookmarkDrawersEnabled &&
    getColorStyles(theme, 'color', isInverted(theme)
        ? 'colors.interactive.base.white'
        : 'colors.interactive.base.black')};
    }

    ${DrawerButton} {
      g,
      g:hover,
      g:focus {
        ${({ theme }) => isInverted(theme)
    ? getColorStyles('stroke', 'colors.interactive.base.white')
    : getColorStyles('stroke', 'colors.interactive.base.black')};
      }
      ${({ isBookmarkDrawersEnabled }) => isBookmarkDrawersEnabled &&
    `
        right: 1.5rem;
        ${minScreen(BREAKPOINTS.lg)} {
          right: 1rem;
        }
      `}
    }

    ${CircleWrapper} {
      ${({ theme }) => isInverted(theme) &&
    `path {
          fill: #FFF;
        }`}
    }

    ${CollectionsDrawerSummaryItem} {
      ${SpanWrapper} {
        ${({ isBookmarkDrawersEnabled }) => isBookmarkDrawersEnabled &&
    `
            height: 100%;
          `};
      }

      ${SummaryItemMetadataPrimary} {
        ${({ theme, isBookmarkDrawersEnabled }) => isBookmarkDrawersEnabled &&
    getTypographyStyles(theme, 'typography.definitions.foundation.meta-secondary')};

        ${({ theme, isBookmarkDrawersEnabled }) => isBookmarkDrawersEnabled
    ? getColorStyles(theme, 'color', isInverted(theme)
        ? 'colors.discovery.body.dark.syndication'
        : 'colors.discovery.body.light.syndication')
    : getColorStyles(theme, 'color', isInverted(theme)
        ? 'colors.discovery.body.black.context-tertiary'
        : 'colors.discovery.body.light.context-tertiary')};
      }

      ${SummaryItemAssetContainer} {
        ${({ theme }) => isInverted(theme)
    ? getColorStyles('background-color', 'colors.interactive.base.deemphasized')
    : getColorStyles('background-color', 'colors.interactive.base.light')};
      }
    }

    ${CollectionsDrawerBookmarkItem} {
      ${({ isBookmarkDrawersEnabled }) => isBookmarkDrawersEnabled &&
    `
          grid-template-columns: 5.2rem 1fr;
          ${SummaryItemAssetContainer} {
            aspect-ratio: 1 / 1;
          };
          ${SummaryItemHedBase} {
            margin-bottom: ${calculateSpacing(1)};
          }
        `};
      ${SummaryItemHedBase} {
        ${({ theme, isBookmarkDrawersEnabled }) => isBookmarkDrawersEnabled &&
    getColorStyles(theme, 'color', isInverted(theme)
        ? 'colors.interactive.base.white'
        : 'colors.interactive.base.black')};
      }
    }

    ${CollectionsDrawerBookmarkItemWrapper} {
      ${({ theme }) => isInverted(theme)
    ? getColorStyles('border-bottom-color', 'colors.discovery.body.dark.divider')
    : getColorStyles('border-bottom-color', 'colors.discovery.body.white.divider')};
    }

    ${minScreen(BREAKPOINTS.md)} {
      ${CollectionsDrawerListItem}:hover {
        ${({ theme }) => isInverted(theme)
    ? getColorStyles('background-color', 'colors.interactive.base.brand-secondary')
    : getColorStyles('background-color', 'colors.interactive.base.hover')};
      }
    }
  }
`;
const CollectionsItemDefaultIcon = styled(Icons.Expand).withConfig({
    displayName: 'CollectionsItemDefaultIcon'
}) `
  border-width: 2px;
  border-style: solid;
  border-radius: 50%;
  padding: ${calculateSpacing(0.4)};
  width: ${calculateSpacing(3)};
  height: ${calculateSpacing(3)};

  ${({ theme }) => `
      ${getColorStyles(theme, 'background-color', `colors.interactive.base.white`)};

      ${getColorStyles(theme, 'border-color', 'colors.interactive.base.brand-secondary')};

      path {
        ${getColorStyles(theme, 'stroke', 'colors.interactive.base.brand-secondary')};

        ${getColorStyles(theme, 'fill', 'colors.interactive.base.brand-secondary')};
      }   
    `}
`;
const CollectionsItemAddedIcon = styled(Icons.Check).withConfig({
    displayName: 'CollectionsItemAddedIcon'
}) `
  border-width: 2px;
  border-style: solid;
  border-radius: 50%;
  width: ${calculateSpacing(3)};
  height: ${calculateSpacing(3)};

  ${({ theme }) => `
    ${getColorStyles(theme, 'background-color', `colors.interactive.base.white`)};

    ${getColorStyles(theme, 'border-color', 'colors.interactive.base.brand-secondary')};

    path {
      ${getColorStyles(theme, 'stroke', 'colors.interactive.base.brand-secondary')};

      ${getColorStyles(theme, 'fill', 'colors.interactive.base.brand-secondary')};
    }   
  `}
`;
const CollectionsItemWrapper = styled.div.withConfig({
    displayName: 'CollectionItemWrapper'
}) `
  display: flex;
  align-items: center;
  justify-content: space-between;
`;
const CollectionsDrawerErrorMessage = styled(BaseText).withConfig({
    displayName: 'CollectionsDrawerErrorMessage'
}) `
  &&& {
    margin: ${calculateSpacing(4)} 0;
    width: 100%;
    text-align: center;
    ${({ theme }) => isInverted(theme) &&
    getColorStyles('color', 'colors.interactive.base.white')};

    ${getTypographyStyles('typography.definitions.utility.assistive-text')};
  }
`;
module.exports = {
    CollectionsDrawerBookmarkItem,
    CollectionsDrawerBookmarkItemWrapper,
    CollectionsDrawerCollectionItem,
    CollectionsDrawerCreateListButton,
    CollectionsDrawerCreateListDek,
    CollectionsDrawerErrorMessage,
    CollectionsDrawerGlobalStyles,
    CollectionsDrawerHeadingWrapper,
    CollectionsDrawerList,
    CollectionsDrawerListHeading,
    CollectionsDrawerListItem,
    CollectionsDrawerNewCollectionButton,
    CollectionsDrawerScrollableArea,
    CollectionsDrawerWrapper,
    CollectionsItemAddedIcon,
    CollectionsItemWrapper,
    CollectionsItemDefaultIcon
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 60880:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.trackCreateCollectionDrawerSave = exports.trackDrawerMoveCollection = exports.trackDrawerSelectCollection = exports.trackDrawerCollectionError = exports.trackDrawerClose = exports.trackDrawerLinkClick = void 0;
const { trackSaveEventWithContext } = __webpack_require__(14307);
const { channel } = __webpack_require__(73806);
const subjects = {
    CREATE: 'board_create',
    VIEW: 'board',
    DRAWER: 'board_drawer',
    PHOTO_RUNWAY: 'photo_runway'
};
const types = {
    CLICK: 'click',
    CLOSE: 'close',
    CREATE: 'create',
    ERROR: 'error',
    GO_TO: 'go_to',
    MOVE: 'move',
    SELECT: 'select'
};
const getSubject = (channelValue) => {
    switch (channelValue) {
        case channel.IMAGE_SEARCH:
            return 'account_saved_images';
        case channel.STREET_STYLE:
            return 'account_saved_images';
        case channel.RUNWAY:
            return 'account_saved_images';
        default:
            return '';
    }
};
const trackEvent = ({ contentId, contentType, isDefault, isFromBookmark, isAutoSelected, label, saveContextSubject, saveEventSubject, sourceId, sourceName, subjectId, subjectName, type, errorMessage, errorType, code }) => {
    const eventData = {
        type,
        label,
        subject: saveEventSubject,
        ...(contentId && {
            items: [
                {
                    content_id: contentId,
                    content_type: contentType
                }
            ]
        })
    };
    const saveContext = {
        isDefault,
        isFromBookmark,
        isAutoSelected,
        sourceId: sourceId?.toString(),
        sourceName,
        subject: saveContextSubject,
        subjectId: subjectId?.toString(),
        subjectName
    };
    const hasError = code || (errorType && errorMessage);
    const subject = hasError && saveEventSubject;
    const errorContext = {
        ...(code && { code }),
        ...(errorType && { type: errorType }),
        ...(errorMessage && { message: errorMessage }),
        ...(subject && { subject })
    };
    trackSaveEventWithContext({ eventData, saveContext, errorContext });
};
// drawer with collection list tracking
const trackDrawerLinkClick = ({ channel, contentId, label, subjectId, subjectName, contentType }) => trackEvent({
    contentId,
    contentType,
    label,
    saveContextSubject: getSubject(channel),
    saveEventSubject: subjects.VIEW,
    subjectId,
    subjectName,
    type: types.GO_TO
});
exports.trackDrawerLinkClick = trackDrawerLinkClick;
const trackDrawerClose = () => trackEvent({
    saveEventSubject: subjects.DRAWER,
    type: types.CLOSE
});
exports.trackDrawerClose = trackDrawerClose;
const trackDrawerCollectionError = ({ errorMessage, errorType }) => trackEvent({
    saveEventSubject: subjects.DRAWER,
    type: types.ERROR,
    errorMessage,
    errorType
});
exports.trackDrawerCollectionError = trackDrawerCollectionError;
const trackDrawerSelectCollection = ({ channel, collectionId, collectionName, contentId, contentType, shouldAutoSaveToCollection }) => {
    trackEvent({
        contentId,
        contentType,
        isFromBookmark: true,
        isAutoSelected: shouldAutoSaveToCollection,
        label: collectionName,
        saveContextSubject: getSubject(channel),
        saveEventSubject: subjects.VIEW,
        subjectId: collectionId,
        subjectName: collectionName,
        type: types.SELECT
    });
};
exports.trackDrawerSelectCollection = trackDrawerSelectCollection;
const trackDrawerMoveCollection = ({ channel, collectionId, collectionName, contentId, contentType, shouldAutoSaveToCollection, sourceId, sourceName }) => {
    trackEvent({
        contentId,
        contentType,
        isFromBookmark: true,
        isAutoSelected: shouldAutoSaveToCollection,
        label: collectionName,
        saveContextSubject: getSubject(channel),
        saveEventSubject: contentType === 'photo' && subjects.PHOTO_RUNWAY,
        sourceId,
        sourceName,
        subjectId: collectionId,
        subjectName: collectionName,
        type: types.MOVE
    });
};
exports.trackDrawerMoveCollection = trackDrawerMoveCollection;
// create collection drawer tracking
const trackCreateCollectionDrawerSave = ({ channel, contentType, collectionName, copilotID, collectionId }) => {
    trackEvent({
        contentId: copilotID,
        contentType,
        saveContextSubject: getSubject(channel),
        saveEventSubject: subjects.VIEW,
        subjectId: collectionId,
        subjectName: collectionName,
        type: types.CREATE
    });
};
exports.trackCreateCollectionDrawerSave = trackCreateCollectionDrawerSave;
//# sourceMappingURL=tracking.js.map

/***/ }),

/***/ 43393:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
const react_intl_1 = __webpack_require__(46984);
exports["default"] = (0, react_intl_1.defineMessages)({
    bookmarkCountType: {
        id: 'CollectionsDrawer.bookmarkCountType',
        defaultMessage: '{count, plural, one {# image} other {# images}}',
        description: 'The bookmark count for a collection'
    },
    bookmarkSavedText: {
        id: 'CollectionsDrawer.bookmarkSavedText',
        defaultMessage: 'Image saved',
        description: 'Bookmark saved alert text'
    },
    bookmarkCountDefaultText: {
        id: 'CollectionsDrawer.bookmarkCountDefaultText',
        defaultMessage: '{count} saved',
        description: 'The bookmark count and the text for a collection'
    },
    bookmarkSavedDefaultText: {
        id: 'CollectionsDrawer.bookmarkSavedDefaultText',
        defaultMessage: 'Saved',
        description: 'Bookmark saved alert - default text'
    },
    createCollectionDuplicateNameError: {
        id: 'CollectionsDrawer.createCollectionDuplicateNameError',
        defaultMessage: 'You have already used this name',
        description: 'Error message when a duplicate collection name is entered'
    },
    createCollectionNotMadeError: {
        id: 'CollectionsDrawer.createCollectionNotMadeError',
        defaultMessage: 'Collection not made, please try again',
        description: 'Generic error message when a collection can not be made'
    },
    createCollectionValueMissingError: {
        id: 'CreateCollectionDrawer.createCollectionValueMissingError',
        defaultMessage: 'Please enter a collection name',
        description: 'Error message when a collection name is not entered'
    },
    createCollectionNoTextError: {
        id: 'CreateCollectionDrawer.createCollectionNoTextError',
        defaultMessage: 'Please enter some text',
        description: 'Error message when a collection name only has spaces'
    },
    collectionsFolderHeading: {
        id: 'CollectionsDrawer.collectionsFolderHeading',
        defaultMessage: 'Folders',
        description: 'Collections drawer folders heading'
    },
    collectionsNewCollectionButtonLabel: {
        id: 'CollectionsDrawer.collectionsNewCollectionButtonLabel',
        defaultMessage: 'Create Folder',
        description: 'Label to create a new collection'
    },
    createCollectionHeading: {
        id: 'CreateCollectionDrawer.createCollectionHeading',
        defaultMessage: 'Create A New Fodler',
        description: 'Create collection form heading'
    },
    createCollectionInputLabel: {
        id: 'CreateCollectionDrawer.createCollectionInputLabel',
        defaultMessage: 'Folder Name',
        description: 'Create collection text input label'
    },
    createCollectionPlaceholderText: {
        id: 'CreateCollectionDrawer.createCollectionPlaceholderText',
        defaultMessage: '“Reading list” or “Inspo”',
        description: 'Create collection placeholder text'
    },
    createCollectionResetButtonLabel: {
        id: 'CreateCollectionDrawer.createCollectionResetButtonLabel',
        defaultMessage: 'Reset Folder Name',
        description: 'Reset button label'
    },
    createCollectionSubmitButtonLabel: {
        id: 'CreateCollectionDrawer.createCollectionSubmitButtonLabel',
        defaultMessage: 'Create and save to folder',
        description: 'Create collection button label'
    },
    collectionsCreateNewFolderDek: {
        id: 'CollectionsDrawer.collectionsCreateNewFolderDek',
        defaultMessage: 'Organize reading lists, group your favourite topics and collect inspirations in folders.',
        description: 'Collections drawer create new folder heading'
    },
    collectionsErrorMessage: {
        id: 'CollectionsDrawer.collectionsErrorMessage',
        defaultMessage: 'Something went wrong. Please try again.',
        description: 'Error message when collections fail to load'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 91637:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.useCollections = void 0;
const react_1 = __webpack_require__(96540);
const react_intl_1 = __webpack_require__(46984);
const getCollections_1 = __webpack_require__(40416);
const tracking_1 = __webpack_require__(60880);
const translations = (__webpack_require__(43393)["default"]);
const useCollections = ({ makeCall, federatedGraphqlUrl, organizationId }) => {
    const [collections, setCollections] = (0, react_1.useState)([]);
    const [error, setError] = (0, react_1.useState)(null);
    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
    const { formatMessage } = (0, react_intl_1.useIntl)();
    (0, react_1.useEffect)(() => {
        const fetchCollections = async () => {
            try {
                setError(null);
                setIsLoading(true);
                const collectionData = await (0, getCollections_1.getCollections)({
                    federatedGraphqlUrl,
                    organizationId
                });
                setCollections(collectionData);
            }
            catch (err) {
                console.error('Please try again after some time.', err);
                setError(err);
                (0, tracking_1.trackDrawerCollectionError)({
                    errorType: 'select',
                    errorMessage: formatMessage(translations.collectionsErrorMessage)
                });
            }
            finally {
                setIsLoading(false);
            }
        };
        if (makeCall) {
            fetchCollections();
        }
    }, [makeCall, federatedGraphqlUrl, organizationId, formatMessage]);
    return {
        collections,
        error,
        isLoading,
        hasError: !!error
    };
};
exports.useCollections = useCollections;
//# sourceMappingURL=useCollections.js.map

/***/ }),

/***/ 69712:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(33412)/* ["default"] */ .A);
const Rating = __webpack_require__(21093);
const ResponsiveAsset = __webpack_require__(73275);
const Bylines = __webpack_require__(52540);
const { TrackComponentChannel } = __webpack_require__(78788);
const { ContentCardEmbedWrapper, ContentCardEmbedImage, ContentCardEmbedInfo, ContentCardEmbedRubric, ContentCardEmbedRubricLink, ContentCardEmbedHed, ContentCardEmbedHedLink, ContentCardEmbedDek, ContentCardEmbedCta, ContentCardEmbedImageLink } = __webpack_require__(8914);
const CTA_MAP = {
    article: translations.articleButtonCta,
    recipe: translations.recipeButtonCta
};
/**
 * ContentCardEmbed component
 *
 * @param {object} props - React props.
 * @param {string} [props.artistName] - Optional artist name
 * @param {string} [props.aspectRatioOverride] - Optional aspect ratio
 * @param {object} [props.buttonTextContent] - Optional button text
 * @param {object} [props.buttonTextMap] - Optional map object with content types as keys and text for button as values
 * @param {string} [props.className] - Optional top-level class to add.
 * @param {object} [props.contentType] - The content type for the item represented by the card
 * @param {object} [props.contributors] - Optional object containing data to create bylines.
 * @param {string} [props.dangerousDek] - Optional HTML Dek.
 * @param {string} [props.dangerousHed] - Optional HTML Hed.
 * @param {boolean} [props.hasAlternateStyling] - Inverts the colors of hed and rubric
 * @param {boolean} [props.hasBorder] - If true, show borders
 * @param {boolean} [props.hasWhiteBg] - If true, show white background
 * @param {object} [props.image] - Image.
 * @param {object} [props.isClickableImage] - Optional boolean to make image clickable.
 * @param {number} [props.rating] - Optional numeric rating.
 * @param {object} [props.rubric] - Optional rubric.
 * @param {boolean} [props.shouldEnableGlobalStyling] - If true, takes 'global' for link styles
 * @param {boolean} [props.showButton] - If true, button will show.
 * @param {boolean} [props.showByline] - If true, byline will show.
 * @param {boolean} [props.showDek] - If true, dek will show.
 * @param {boolean} [props.showImage] - If true, image will show.
 * @param {boolean} [props.showRubric] - If true, button will show.
 * @param {boolean} [props.showSideBySide] - If true, shows side by side variation.
 * @param {string} props.target - Optional open link in a new tab
 * @param {string} [props.url] - URL to content.
 * @param {object} [props.variations] - Optional. Variation properties used in rendering the component.
 * @param {object} [props.variations.layout] - Optional. Layout of component. Either the default "stacked" or "side-by-side."
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 *
 * @returns {ReactElement} <div>
 */
const ContentCardEmbed = ({ artistName = '', aspectRatioOverride = '', buttonTextContent = '', buttonTextMap = {}, className, contentType, contributors, dangerousDek, dangerousHed, image, isClickableImage = false, rating, rubric, showButton = true, showByline = false, hasBorder = false, hasAlternateStyling = false, hasWhiteBg = false, showSideBySide = true, shouldEnableGlobalStyling = false, showDek = true, showImage = true, showRubric = false, target, url, variations = { layout: 'stacked' }, variationName }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ContentCardEmbed',
            variation: variationName
        });
    }, [variationName]);
    const { formatMessage } = useIntl();
    const translationFallback = CTA_MAP[contentType] || CTA_MAP.article;
    const buttonText = buttonTextContent ||
        buttonTextMap[contentType] ||
        formatMessage(translationFallback);
    const shouldDisplayRating = rating > 0;
    const isSideBySide = showSideBySide && variations.layout === 'side-by-side';
    const isStacked = variations.layout === 'stacked';
    const getContentCardEmbed = () => {
        const ContentCardEmbedImageComponent = url && isClickableImage
            ? ContentCardEmbedImageLink
            : ContentCardEmbedImage;
        const contentCardEmbedImageProps = {
            className: 'content-card-embed__image',
            isSideBySide,
            isClickableImage,
            'data-testid': 'ContentCardEmbedImage'
        };
        if (url && isClickableImage) {
            contentCardEmbedImageProps.href = url;
            contentCardEmbedImageProps.target = '_blank';
        }
        if (aspectRatioOverride) {
            image.aspectRatioOverride = aspectRatioOverride;
        }
        return (React.createElement(ContentCardEmbedImageComponent, { ...contentCardEmbedImageProps },
            React.createElement(ResponsiveAsset, { ...image })));
    };
    return (React.createElement(ContentCardEmbedWrapper, { hasWhiteBg: hasWhiteBg, className: classnames('content-card-embed', `content-card-embed--${variations.layout}`, className), hasBorder: hasBorder, isSideBySide: isSideBySide, isStacked: isStacked, "data-testid": "ContentCardEmbedWrapper" },
        showImage && image && getContentCardEmbed(),
        React.createElement(ContentCardEmbedInfo, null,
            showRubric && rubric && (React.createElement(ContentCardEmbedRubric, { className: "content-card-embed__rubric", "data-testid": "ContentCardEmbedRubric", hasAlternateStyling: hasAlternateStyling }, typeof rubric.url === 'string' ? (React.createElement(ContentCardEmbedRubricLink, { href: rubric.url, "data-testid": "ContentCardEmbedRubricLink" }, rubric.name)) : (rubric.name))),
            React.createElement(ContentCardEmbedHed, { className: "content-card-embed__hed", isSideBySide: isSideBySide, "data-testid": "ContentCardEmbedHed" },
                React.createElement(ContentCardEmbedHedLink, { className: "content-card-embed__hed-link", isSideBySide: isSideBySide, hasAlternateStyling: hasAlternateStyling, href: url, dangerouslySetInnerHTML: { __html: dangerousHed }, "data-testid": "ContentCardEmbedHedLink", shouldEnableGlobalStyling: shouldEnableGlobalStyling })),
            shouldDisplayRating && React.createElement(Rating, { averageRatingCount: rating }),
            showDek && dangerousDek && isStacked && (React.createElement(ContentCardEmbedDek, { dangerouslySetInnerHTML: { __html: dangerousDek }, "data-testid": "ContentCardEmbedDek" })),
            showByline && contributors && (React.createElement(Bylines, { contributors: contributors, contentAlign: "left" })),
            artistName && (React.createElement("div", { className: "content-card-embed__artist" }, artistName)),
            showButton && (React.createElement(ContentCardEmbedCta, { target: target, ariaLabel: buttonText, href: url, label: buttonText, inputKind: "link", isStacked: isStacked, "data-testid": "ContentCardEmbedCta" })))));
};
ContentCardEmbed.propTypes = {
    artistName: PropTypes.string,
    aspectRatioOverride: PropTypes.string,
    buttonTextContent: PropTypes.string,
    buttonTextMap: PropTypes.object,
    className: PropTypes.string,
    contentType: PropTypes.string,
    contributors: PropTypes.shape(Bylines.propTypes.contributors),
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    hasAlternateStyling: PropTypes.bool,
    hasBorder: PropTypes.bool,
    hasWhiteBg: PropTypes.bool,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    isClickableImage: PropTypes.bool,
    rating: PropTypes.number,
    rubric: PropTypes.shape({
        url: PropTypes.string,
        name: PropTypes.string
    }),
    shouldEnableGlobalStyling: PropTypes.bool,
    showButton: PropTypes.bool,
    showByline: PropTypes.bool,
    showDek: PropTypes.bool,
    showImage: PropTypes.bool,
    showRubric: PropTypes.bool,
    showSideBySide: PropTypes.bool,
    target: PropTypes.string,
    url: PropTypes.string,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        layout: PropTypes.oneOf(['stacked', 'side-by-side']).isRequired
    })
};
ContentCardEmbed.displayName = 'ContentCardEmbed';
module.exports = ContentCardEmbed;
//# sourceMappingURL=ContentCardEmbed.js.map

/***/ }),

/***/ 78942:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const VariedContentCardEmbed = __webpack_require__(90854);
module.exports = asConfiguredComponent(VariedContentCardEmbed, 'ContentCardEmbed');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 8914:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { BaseLink, BaseText } = __webpack_require__(76955);
const Button = __webpack_require__(73730);
const { styledProperty, getColorStyles, getTypographyStyles, calculateSpacing, minScreen, getColorToken, getLinkStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const contentCardEmbedImageStyle = css `
  margin-bottom: ${calculateSpacing(2)};
  ${styledProperty('isSideBySide', true, `
    ${minScreen(BREAKPOINTS.md)}{
      margin-bottom: 0;
    }
  `)}
`;
const defaultContentCardImageProps = {
    bottomSpacing: calculateSpacing(2)
};
const ContentCardEmbedWrapper = styled.div.withConfig({
    displayName: 'ContentCardEmbedWrapper'
}) `
  /* Side By Side */
  ${styledProperty('isSideBySide', true, css `
      ${({ theme, hasBorder, hasWhiteBg }) => getColorStyles(theme, 'background-color', hasBorder || hasWhiteBg
    ? 'colors.interactive.base.white'
    : 'colors.consumption.body.standard.bg-card')};
      padding: ${calculateSpacing(3)};

      ${minScreen(BREAKPOINTS.md)} {
        display: grid;
        grid-column-gap: ${calculateSpacing(5)};
        grid-template-columns: 1fr 2fr;
      }
    `)}

  /* Stacked */
  ${styledProperty('isStacked', true, `
    margin-bottom: ${calculateSpacing(4)};
  `)}

  ${({ hasBorder }) => hasBorder === true &&
    css `
      border: 1px solid ${getColorToken('colors.interactive.base.light')};
    `}
`;
const ContentCardEmbedImage = styled.div.withConfig({
    displayName: 'ContentCardEmbedImage'
}) `
  ${contentCardEmbedImageStyle}
`;
ContentCardEmbedImage.defaultProps = defaultContentCardImageProps;
const ContentCardEmbedImageLink = styled(BaseLink).withConfig({
    displayName: 'ContentCardEmbedImageLink'
}) `
  ${contentCardEmbedImageStyle}
`;
ContentCardEmbedImageLink.defaultProps = defaultContentCardImageProps;
const ContentCardEmbedInfo = styled.div.withConfig({
    displayName: 'ContentCardEmbedInfo'
}) ``;
const ContentCardEmbedRubric = styled.div.withConfig({
    displayName: 'ContentCardEmbedRubric'
}) `
  ${getTypographyStyles('typography.definitions.globalEditorial.context-primary')}
  padding-bottom: ${calculateSpacing(1)};
  color: ${getColorToken('colors.consumption.lead.standard.context-signature')};
`;
const ContentCardEmbedRubricLink = styled(BaseLink).withConfig({
    displayName: 'ContentCardEmbedRubricLink'
}) `
  ${getTypographyStyles('typography.definitions.globalEditorial.context-primary')}

  &:visited {
    text-decoration: underline;
  }
`;
ContentCardEmbedRubricLink.defaultProps = {
    colorToken: 'colors.consumption.body.standard.display-signature'
};
const ContentCardEmbedHed = styled(BaseText).withConfig({
    displayName: 'ContentCardEmbedHed'
}) `
  ${ContentCardEmbedWrapper} & {
    margin-top: 0;
    margin-bottom: ${calculateSpacing(2)};

    ${styledProperty('isSideBySide', true, css `
        ${getTypographyStyles('typography.definitions.discovery.hed-core-primary')}
      `)}
  }
`;
ContentCardEmbedHed.defaultProps = {
    as: 'div',
    colorToken: 'colors.consumption.body.standard.subhed',
    typeIdentity: 'typography.definitions.consumptionEditorial.subhed-aux-primary'
};
const ContentCardEmbedHedLink = styled(BaseLink).withConfig({
    displayName: 'ContentCardEmbedHedLink'
}) `
  ${ContentCardEmbedWrapper} ${ContentCardEmbedHed} & {
    :link {
      text-decoration: none;
    }

    :hover,
    :focus,
    :visited {
      text-decoration: underline;
    }

    ${styledProperty('isSideBySide', true, css `
        ${getTypographyStyles('typography.definitions.discovery.hed-core-primary')}
      `)}

    ${styledProperty('hasAlternateStyling', true, css `
        ${({ theme, shouldEnableGlobalStyling }) => getLinkStyles(theme, 'colors.consumption.body.standard.subhed', 'colors.consumption.body.standard.subhed', shouldEnableGlobalStyling ? 'global' : 'default')};
      `)}
  }
`;
ContentCardEmbedHedLink.defaultProps = {
    colorSecondaryLinkToken: 'colors.consumption.body.standard.subhed',
    colorStaticLinkToken: 'colors.consumption.body.standard.subhed',
    colorToken: 'colors.consumption.body.standard.subhed',
    typeIdentity: 'typography.definitions.consumptionEditorial.subhed-aux-primary'
};
const ContentCardEmbedDek = styled.div.withConfig({
    displayName: 'ContentCardEmbedDek'
}) `
  ${getTypographyStyles('typography.definitions.consumptionEditorial.description-embed')}
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body')};
  margin-bottom: ${calculateSpacing(2)};
`;
const ContentCardEmbedCta = styled(Button.Utility).withConfig({
    displayName: 'ContentCardEmbedCta'
}) `
  margin-top: ${calculateSpacing(2)};
  text-align: center;

  ${styledProperty('isStacked', true, `
    width: auto;
  `)}
`;
module.exports = {
    ContentCardEmbedWrapper,
    ContentCardEmbedImage,
    ContentCardEmbedImageLink,
    ContentCardEmbedInfo,
    ContentCardEmbedRubric,
    ContentCardEmbedRubricLink,
    ContentCardEmbedHed,
    ContentCardEmbedHedLink,
    ContentCardEmbedDek,
    ContentCardEmbedCta
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 33412:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    articleButtonCta: {
        id: 'ContentCardEmbed.articleButtonCta',
        defaultMessage: 'View Story',
        description: 'Call to action for article embeds',
        isConfigurable: true
    },
    recipeButtonCta: {
        id: 'ContentCardEmbed.recipeButtonCta',
        defaultMessage: 'View Recipe',
        description: 'Call to action for recipe embeds',
        isConfigurable: true
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 90854:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const ContentCardEmbed = __webpack_require__(69712);
const ExternalLinkEmbed = __webpack_require__(55990);
ContentCardEmbed.Stacked = asVariation(ContentCardEmbed, 'Stacked', {
    layout: 'stacked'
});
ContentCardEmbed.SideBySide = asVariation(ContentCardEmbed, 'SideBySide', {
    layout: 'side-by-side'
});
ContentCardEmbed.ExternalLink = asVariation(ExternalLinkEmbed, 'ExternalLink', { layout: 'inline' }, { isExternal: false });
ContentCardEmbed.ExternalLinkLarge = asVariation(ExternalLinkEmbed, 'ExternalLinkLarge', { layout: 'large' }, { isExternal: false });
module.exports = ContentCardEmbed;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 16890:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(49339)/* ["default"] */ .A);
const { googleAnalytics } = __webpack_require__(90090);
const Button = __webpack_require__(73730);
const Clamp = __webpack_require__(48286);
const { TrackComponentChannel } = __webpack_require__(78788);
const { ContentPromoEmbedWrapper, ContentPromoEmbedResponsiveAsset, ContentPromoEmbedTextContainerWrapper, ContentPromoEmbedTextWrapper, ContentPromoEmbedHedWrapper, ContentPromoEmbedItemsCount, ContentPromoEmbedBylines, ContentPromoEmbedCtaWrapper } = __webpack_require__(63665);
/**
 * ContentPromoEmbed component
 *
 * @param {object} props - React props
 * @param {string} [props.analyticsEvent] - google analytics event name to be triggered
 * @param {string} [props.buttonVariation] - optional variation of button to display
 * @param {string} [props.btnStyle] - props used to assign styling to a button variation.
 * @param {string} [props.contentType] - optional type of content being promoted
 * @param {object} [props.contributors] - optional contributor(s) of promoted content
 * @param {string} [props.dangerousHed] - promoted content hed
 * @param {string} [props.defaultButtonText] - text to be displayed on the button
 * @param {string} [props.galleryButtonText] - optional text to be displayed on the button if the item promoted is a gallery
 * @param {string} [props.hasMobilePadding] - optional text to set the item type for the count
 * @param {string} [props.itemType] - optional text to set the item type for the count
 * @param {number} [props.maxHedLines] - Optional maximum number of visual lines for the hed to occupy
 * @param {Array} [props.slides] - optional slides of promoted gallery (used for count only)
 * @param {string} props.target - Optional open link in a new tab
 * @param {object} props.tout - information for tout image or clip
 * @param {string} props.url - for link to promoted content
 *
 * @returns {ReactElement} <a>
 */
const ContentPromoEmbed = ({ analyticsEvent, btnStyle = 'filled', buttonVariation = 'UtilityInverted', contentType, contributors, dangerousHed, defaultButtonText, galleryButtonText, hasMobilePadding = false, itemType = 'slide', maxHedLines = 3, slides, target, tout, url }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ContentPromoEmbed'
        });
    }, []);
    const { formatMessage } = useIntl();
    const ButtonComponent = Button[buttonVariation];
    const buttonText = contentType === 'gallery'
        ? galleryButtonText || formatMessage(translations.galleryButtonText)
        : defaultButtonText || formatMessage(translations.defaultButtonText);
    return (React.createElement(ContentPromoEmbedWrapper, { "data-testid": "contentPromoEmbedWrapper", target: target, hasMobilePadding: hasMobilePadding, href: url, onClick: () => {
            analyticsEvent &&
                googleAnalytics.emitGoogleTrackingEvent(analyticsEvent, {
                    'gtm.elementUrl': url
                });
        } },
        React.createElement(ContentPromoEmbedResponsiveAsset, { "data-testid": "contentPromoEmbedResponsiveAsset", altText: tout.altText, contentType: tout.contentType, segmentedSources: tout.segmentedSources, sources: tout.sources }),
        React.createElement(ContentPromoEmbedTextContainerWrapper, { className: "content-promo-embed__text-container grid grid-margins" },
            React.createElement(ContentPromoEmbedTextWrapper, null,
                dangerousHed && (React.createElement(Clamp, { lines: maxHedLines },
                    React.createElement(ContentPromoEmbedHedWrapper, { dangerouslySetInnerHTML: { __html: dangerousHed } }))),
                contentType === 'gallery' && !!slides?.length && (React.createElement(ContentPromoEmbedItemsCount, { count: slides.length, itemType: itemType })),
                contributors && (React.createElement(ContentPromoEmbedBylines, { "data-testid": "contentPromoEmbedByline", bylineVariation: "Inverted", contributors: contributors, shouldLink: false })),
                React.createElement(ContentPromoEmbedCtaWrapper, null,
                    React.createElement(ButtonComponent, { inputKind: "text", label: buttonText, btnStyle: btnStyle }))))));
};
ContentPromoEmbed.displayName = 'ContentPromoEmbed';
const sourcePropType = PropTypes.shape({
    height: PropTypes.number,
    width: PropTypes.number,
    url: PropTypes.string.isRequired
});
ContentPromoEmbed.propTypes = {
    analyticsEvent: PropTypes.string,
    btnStyle: PropTypes.string,
    buttonVariation: PropTypes.string,
    contentType: PropTypes.string,
    contributors: PropTypes.object,
    dangerousHed: PropTypes.string,
    defaultButtonText: PropTypes.string,
    galleryButtonText: PropTypes.string,
    hasMobilePadding: PropTypes.bool,
    itemType: PropTypes.string,
    maxHedLines: PropTypes.number,
    slides: PropTypes.array,
    target: PropTypes.string,
    tout: PropTypes.shape({
        altText: PropTypes.string,
        contentType: PropTypes.string,
        segmentedSources: PropTypes.shape({
            sm: PropTypes.arrayOf(sourcePropType),
            lg: PropTypes.arrayOf(sourcePropType)
        }),
        sources: PropTypes.object
    }).isRequired,
    url: PropTypes.string.isRequired
};
module.exports = ContentPromoEmbed;
//# sourceMappingURL=ContentPromoEmbed.js.map

/***/ }),

/***/ 86447:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const ContentPromoEmbed = __webpack_require__(16890);
module.exports = asConfiguredComponent(ContentPromoEmbed, 'ContentPromoEmbed');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 63665:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const Bylines = __webpack_require__(52540);
const ItemsCount = __webpack_require__(78372);
const ResponsiveAsset = __webpack_require__(73275);
const { ResponsiveClipPlayPauseButton } = __webpack_require__(91783);
const { ItemsCountIcon, ItemsCountContent } = __webpack_require__(8544);
const { universalGridCore } = __webpack_require__(89085);
const { applyGridSpacing } = __webpack_require__(1123);
const { BaseLink, BaseText } = __webpack_require__(76955);
const { calculateSpacing, getColorStyles, getTypographyStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const ContentPromoEmbedResponsiveClip = styled(ResponsiveClipPlayPauseButton).withConfig({ displayName: 'ContentPromoEmbedResponsiveClip' }) `
  z-index: 10;
  border-width: 1px;
  border-style: solid;
  ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.interactive.base.white')};
  background-color: transparent;
`;
const ContentPromoEmbedResponsiveAsset = styled(ResponsiveAsset).withConfig({
    displayName: 'ContentPromoEmbedResponsiveAsset'
}) `
  &::after {
    position: absolute;
    bottom: 0;
    left: 0;
    transition: opacity 0.3s;
    opacity: 1;
    background: linear-gradient(to top, #000, transparent 65%);
    width: 100%;
    height: 100%;
    content: '';
  }

  picture,
  img {
    width: 100%;
  }
`;
const ContentPromoEmbedWrapper = styled(BaseLink).withConfig({
    displayName: 'ContentPromoEmbedWrapper'
}) `
  display: block;
  position: relative;

  &:hover {
    ${ContentPromoEmbedResponsiveAsset}::after {
      opacity: 0.7;
    }
  }

  @media (min-width: ${BREAKPOINTS.md}) {
    margin-bottom: ${calculateSpacing(2)};
  }
  ${({ hasMobilePadding }) => {
    return (hasMobilePadding &&
        css `
        @media (min-width: ${BREAKPOINTS.sm}) {
          margin-bottom: ${calculateSpacing(2)};
        }
      `);
}}

  ${ContentPromoEmbedResponsiveClip}
`;
const ContentPromoEmbedTextContainerWrapper = styled.div.withConfig({
    displayName: 'ContentPromoEmbedTextContainerWrapper'
}) `
  &.grid {
    ${universalGridCore()}
  }

  &.grid.grid-margins {
    ${applyGridSpacing('padding')}
  }
  position: absolute;
  bottom: ${calculateSpacing(4)};
  left: 0;
  align-items: flex-end;
  width: 100%;
  height: auto;

  @media (min-width: ${BREAKPOINTS.md}) {
    bottom: ${calculateSpacing(6)};
  }
`;
const ContentPromoEmbedTextWrapper = styled.div.withConfig({
    displayName: 'ContentPromoEmbedTextWrapper'
}) `
  display: flex;
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: auto;

  @media (min-width: ${BREAKPOINTS.md}) {
    grid-column: 3 / span 8;
  }
`;
const ContentPromoEmbedHedWrapper = styled(BaseText).withConfig({
    displayName: 'ContentPromoEmbedHedWrapper'
}) `
  && {
    margin: 0;

    text-align: center;
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.white')};
  }
`;
ContentPromoEmbedHedWrapper.defaultProps = {
    as: 'div',
    typeIdentity: 'typography.definitions.discovery.hed-core-primary'
};
const ContentPromoEmbedBylines = styled(Bylines).withConfig({
    displayName: 'ContentPromoEmbedBylines'
}) `
  margin-top: ${calculateSpacing(1)};
`;
const ContentPromoEmbedItemsCount = styled(ItemsCount).withConfig({
    displayName: 'ContentPromoEmbedItemsCount'
}) `
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: ${calculateSpacing(1)};
  height: 35px;
  & + ${ContentPromoEmbedBylines} {
    margin-top: 0;
  }

  ${ItemsCountIcon} {
    margin-right: 0;
    height: auto;
  }

  .icon-gallery {
    path {
      ${({ theme }) => getColorStyles(theme, 'fill', 'colors.interactive.base.white')};
    }
  }

  ${ItemsCountContent} {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.accreditation-core')}
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.white')};

    &:hover {
      text-decoration: none;
      ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.white')};
    }
  }
`;
ContentPromoEmbedItemsCount.defaultProps = {
    colorToken: 'colors.interactive.base.white',
    typeIdentity: 'typography.definitions.globalEditorial.accreditation-core'
};
const ContentPromoEmbedCtaWrapper = styled.div.withConfig({
    displayName: 'ContentPromoEmbedCtaWrapper'
}) `
  margin-top: ${calculateSpacing(3)};
`;
module.exports = {
    ContentPromoEmbedWrapper,
    ContentPromoEmbedResponsiveAsset,
    ContentPromoEmbedTextContainerWrapper,
    ContentPromoEmbedTextWrapper,
    ContentPromoEmbedItemsCount,
    ContentPromoEmbedBylines,
    ContentPromoEmbedHedWrapper,
    ContentPromoEmbedCtaWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 49339:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    defaultButtonText: {
        id: 'ContentPromoEmbed.DefaultButtonText',
        defaultMessage: 'Read More',
        description: 'ContentPromoEmbed component default button text',
        isConfigurable: true
    },
    galleryButtonText: {
        id: 'ContentPromoEmbed.GalleryButtonText',
        defaultMessage: 'View Slideshow',
        description: 'ContentPromoEmbed component gallery button text',
        isConfigurable: true
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 10807:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const classnames = __webpack_require__(32485);
const React = __webpack_require__(96540);
const { useState } = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const { googleAnalytics } = __webpack_require__(90090);
const translations = (__webpack_require__(60549)/* ["default"] */ .A);
const AddIcon = __webpack_require__(84050);
const MinusIcon = __webpack_require__(87241);
const { ContentsListWrapper, ContentWrapper, ContentsListHeading, ContentListHed, ContentsListRubric, ContentsListItems, ContentsListDek, ButtonUtility } = __webpack_require__(97091);
const trackGoogleEvent = (name) => {
    googleAnalytics.emitGoogleTrackingEvent(name);
};
/**
 * ContentsList component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {Array}  [props.items] - list of items to display
 * @param {string} [props.contentsListTitle] - optional contents list title
 * @param {Function} [props.onClickHandler] - optional click event
 * @param {string}  [props.theme] - component theme
 */
const ContentsList = ({ className, items = [], contentsListTitle = 'Table of contents', onClickHandler, theme }) => {
    const [toggle, setToggle] = useState(false);
    const isFeatured = theme === 'featured';
    if ( true && window.dataLayer) {
        window.dataLayer.push({
            event: 'table-of-content-events'
        });
    }
    const onContentListClickHandler = (hed) => {
        onClickHandler && onClickHandler();
        trackGoogleEvent(`table-of-contents-${hed}`);
    };
    const contentsList = items &&
        items.map((item) => {
            const { rubric, dangerousHed, dangerousDek, id, url } = item;
            return (React.createElement(ContentWrapper, { "data-testid": "ContentWrapper", visible: toggle, key: id, href: url, isFeatured: isFeatured, onClick: () => {
                    onContentListClickHandler(dangerousHed);
                } },
                rubric && (React.createElement(ContentsListRubric, { "data-testid": "ContentsListRubric", isFeatured: isFeatured }, rubric)),
                dangerousHed && (React.createElement(ContentListHed, { "data-testid": "ContentListHed", isFeatured: isFeatured, dangerouslySetInnerHTML: { __html: dangerousHed } })),
                dangerousDek && (React.createElement(ContentsListDek, { "data-testid": "ContentsListDek", isFeatured: isFeatured, dangerouslySetInnerHTML: { __html: dangerousDek } }))));
        });
    const { formatMessage } = useIntl();
    const title = contentsListTitle || formatMessage(translations.contentsListTitle);
    const toggleIcon = () => {
        setToggle(!toggle);
        toggle
            ? trackGoogleEvent('table-of-contents-collapse')
            : trackGoogleEvent('table-of-contents-expanded');
    };
    if (!Array.isArray(items) || !items.length) {
        return null;
    }
    return (React.createElement(ContentsListWrapper, { "data-testid": "ContentsListWrapper" },
        React.createElement(ContentsListHeading, { "data-testid": "ContentsListHeading", isFeatured: isFeatured, visible: toggle, onClick: toggleIcon },
            title,
            React.createElement(ButtonUtility, { role: "button", ButtonIcon: toggle ? MinusIcon : AddIcon, isIconButton: true, label: "ExpandCollapseIcon" })),
        React.createElement(ContentsListItems, { visible: toggle, className: classnames({ 'contents-list-items--is-not-visible': !toggle }, { 'contents-list-items--is-visible': toggle }, className) }, contentsList)));
};
ContentsList.displayName = 'ContentsList';
ContentsList.propTypes = {
    className: PropTypes.string,
    contentsListTitle: PropTypes.string,
    items: PropTypes.arrayOf(PropTypes.shape({
        rubric: PropTypes.string.isRequired,
        dangerousHed: PropTypes.string.isRequired,
        dangerousDek: PropTypes.string
    })),
    onClickHandler: PropTypes.func,
    theme: PropTypes.string
};
module.exports = ContentsList;
//# sourceMappingURL=ContentsList.js.map

/***/ }),

/***/ 96921:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const ContentsList = __webpack_require__(10807);
module.exports = asConfiguredComponent(ContentsList, 'ContentsList');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 97091:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { BREAKPOINTS } = __webpack_require__(96472);
const { getTypographyStyles, calculateSpacing, getColorToken, maxScreen, minScreen } = __webpack_require__(26865);
const Button = __webpack_require__(73730);
const { ButtonIcon } = __webpack_require__(18974);
const ContentsListWrapper = styled.div.withConfig({
    displayName: 'ContentsListWrapper'
}) `
  margin: auto;
  margin-bottom: ${calculateSpacing(4)};
  width: 100%;
  ${maxScreen(BREAKPOINTS.md)} {
    margin-bottom: ${calculateSpacing(4)};
    border-bottom: 1px solid
      ${getColorToken('colors.discovery.body.white.divider')};
  }

  a:not(.button):link,
  a:not(.button):visited {
    text-decoration: none;

    &:focus {
      text-decoration: underline;
    }
  }
`;
const ContentWrapper = styled.a.withConfig({
    displayName: 'ContentsWrapper'
}) `
  display: inline-block;
  transition: opacity 0.3s linear, all 0.3s linear;
  visibility: ${(props) => (props.visible ? 'visible' : 'hidden')};
  opacity: ${(props) => (props.visible ? 1 : 0)};
  border-bottom: 1px solid;
  cursor: pointer;
  width: 100%;
  text-decoration: none;
  ${maxScreen(BREAKPOINTS.md)} {
    &:last-child {
      border: none;
      padding-bottom: ${calculateSpacing(4)};
    }
  }
  ${({ isFeatured, theme }) => isFeatured &&
    `
      border-bottom: 1px solid ${getColorToken(theme, 'colors.discovery.body.white.divider')};;
    `};
`;
const ContentsListItems = styled.div.withConfig({
    displayName: 'ContentsListItems'
}) `
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.5s ease;

  &.contents-list-items--is-visible {
    transform: scaleY(1);
    overflow: hidden;
  }

  &.contents-list-items--is-not-visible {
    && {
      max-height: 0;
    }
  }
`;
const ContentsListHeading = styled.div.withConfig({
    displayName: 'ContentsListHeading'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.subhed-aux-secondary')};
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid;
  cursor: pointer;
  padding: ${calculateSpacing(1.5)} 0;

  ${maxScreen(BREAKPOINTS.md)} {
    margin: 0;
    border-bottom: 0 solid;
    padding: ${calculateSpacing(1.5)} 0;
    ${(props) => props.visible &&
    `padding-bottom: ${calculateSpacing(4)};
      `};
  }
  ${(props) => props.visible &&
    `border-bottom: ${calculateSpacing(0)}; 
     padding-bottom: ${calculateSpacing(4)};
    `};

  user-select: none;
  ${({ isFeatured, theme }) => isFeatured &&
    ` 
      border-bottom: 1px solid
      ${getColorToken(theme, 'colors.discovery.body.white.divider')};
      text-transform: uppercase;
      line-height: 22px;
      letter-spacing: 1.8px;
      font-size: 12px;
      font-weight: 600;
    `};
`;
const ContentsListRubric = styled.div.withConfig({
    displayName: 'ContentsListRubric'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-primary')};
  margin-top: ${calculateSpacing(2)};
  margin-bottom: ${calculateSpacing(0.5)};

  ${({ isFeatured }) => isFeatured &&
    `
      font-weight: 600;
      letter-spacing: 1.8px;
    `};
`;
const ContentListHed = styled.div.withConfig({
    displayName: 'ContentsListHed'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-primary')};
  margin-bottom: ${calculateSpacing(0.5)};

  ${({ isFeatured, theme }) => isFeatured &&
    `
      ${getTypographyStyles(theme, 'typography.definitions.discovery.page-hed-section')}
      line-height: ${calculateSpacing(4)};
      letter-spacing: 0;
      font-size: 22px;
      font-weight: 300;
      ${minScreen(BREAKPOINTS.md)} {
        line-height: ${calculateSpacing(4)};
        font-size: 22px;
      }
    `};
`;
const ContentsListDek = styled.div.withConfig({
    displayName: 'ContentsListDek'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.subhed-aux-secondary')};
  margin-bottom: ${calculateSpacing(2)};

  ${(isFeatured) => isFeatured &&
    `
      line-height: 18px;
      font-size: 14px;
      font-weight: 550;
    `};
`;
const ButtonUtility = styled(Button.Utility).withConfig({
    displayName: 'ButtonUtility'
}) `
  ${({ theme }) => getColorToken(theme, 'colors.interactive.base.black')};
  margin-right: 8px;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  padding: 0;
  width: 16px;
  min-width: 16px;
  height: 2px;

  ${ButtonIcon} {
    transform: scale(0.5);
    stroke: black;
    stroke-width: 2;
  }

  &:hover,
  &:focus {
    border-width: 0;
    background-color: transparent;
  }
`;
module.exports = {
    ContentsListWrapper,
    ContentWrapper,
    ContentsListItems,
    ContentsListHeading,
    ContentsListRubric,
    ContentListHed,
    ContentsListDek,
    ButtonUtility
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 60549:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    contentsListTitle: {
        id: 'ContentsList.contentsListTitle',
        defaultMessage: 'Table of Contents',
        description: 'Heading for contents list',
        isConfigurable: true
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 24539:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const ResponsiveAsset = __webpack_require__(73275);
const { TrackComponentChannel } = __webpack_require__(78788);
const { ContributorEmbedWrapper, ContributorEmbedResponsiveAsset, ContributorEmbedName, ContributorEmbedSocialLine, ContributorEmbedTitle, ContributorEmbedSocialIcons } = __webpack_require__(16507);
/**
 * ContributorEmbed component
 *
 * @param {object} props - React props
 * @param {string} [props.dangerousBio] - Optional caption to place under asset.
 * @param {string} [props.name] - Optional contributor name.
 * @param {ResponsiveAsset.propTypes} props.photo - Object containing asset sources for a ResponsiveAsset.
 * @param {SocialMedia.propTypes} [props.socialMedia] - Optional SocialIcons props
 * @param {string} [props.title] - Optional title text.
 *
 * @returns {ReactElement} <div>
 */
const ContributorEmbed = ({ dangerousBio, name, photo, socialMedia, title }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ContributorEmbed'
        });
    }, []);
    if (!dangerousBio) {
        return null;
    }
    const socialIconsProps = {
        links: socialMedia
    };
    return (React.createElement(ContributorEmbedWrapper, { "data-testid": "contributor-embed-wrapper" },
        photo && React.createElement(ContributorEmbedResponsiveAsset, { ...photo }),
        React.createElement(ContributorEmbedName, null, name),
        React.createElement(ContributorEmbedSocialLine, null,
            title && React.createElement(ContributorEmbedTitle, null, title),
            socialMedia && React.createElement(ContributorEmbedSocialIcons, { ...socialIconsProps })),
        React.createElement("div", { dangerouslySetInnerHTML: { __html: dangerousBio }, "data-testid": "contributor-bio" })));
};
ContributorEmbed.propTypes = {
    dangerousBio: PropTypes.string,
    name: PropTypes.string,
    photo: PropTypes.shape(ResponsiveAsset.propTypes),
    socialMedia: PropTypes.arrayOf(PropTypes.shape({
        label: PropTypes.string,
        network: PropTypes.string
    })),
    title: PropTypes.string
};
module.exports = ContributorEmbed;
//# sourceMappingURL=ContributorEmbed.js.map

/***/ }),

/***/ 92561:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(24539);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 16507:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { BaseText } = __webpack_require__(76955);
const { calculateSpacing, getTypographyStyles } = __webpack_require__(26865);
const { roundImageBase } = __webpack_require__(52027);
const { BREAKPOINTS } = __webpack_require__(96472);
const ResponsiveAsset = __webpack_require__(73275);
const SocialIcons = __webpack_require__(35676);
const { SocialIconExternalLink, SocialIconsListItem, SocialIconsList } = __webpack_require__(51000);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const ContributorEmbedWrapper = styled.div.withConfig({
    displayName: 'ContributorEmbedWrapper'
}) ``;
const ContributorEmbedResponsiveAsset = styled(ResponsiveAsset).withConfig({
    displayName: 'ContributorEmbedResponsiveAsset'
}) `
  display: block;
  max-width: 70px;

  @media (min-width: ${BREAKPOINTS.lg}) {
    max-width: 80px;
  }

  ${ResponsiveImageContainer} {
    ${roundImageBase('100%', '70px', '70px')}
  }

  @media (min-width: ${BREAKPOINTS.lg}) {
    ${ResponsiveImageContainer} {
      ${roundImageBase('100%', '80px', '80px')}
    }
  }
`;
const ContributorEmbedName = styled.h3.withConfig({
    displayName: 'ContributorEmbedName'
}) `
  && {
    margin: ${calculateSpacing(2)} 0 ${calculateSpacing(1)};
    padding: 0;
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.subhed-section-tertiary')}
  }
`;
const ContributorEmbedSocialLine = styled.div.withConfig({
    displayName: 'ContributorEmbedSocialLine'
}) `
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: ${calculateSpacing(1)};

  &:empty {
    display: none; /* 1 */
  }
`;
const ContributorEmbedTitle = styled(BaseText).withConfig({
    displayName: 'ContributorEmbedTitle'
}) ``;
ContributorEmbedTitle.defaultProps = {
    colorToken: 'colors.consumption.body.standard.body-deemphasized',
    typeIdentity: 'typography.definitions.globalEditorial.context-tertiary'
};
const ContributorEmbedSocialIcons = styled(SocialIcons.Standard).withConfig({
    displayName: 'ContributorEmbedSocialIcons'
}) `
  ${ContributorEmbedTitle} + & {
    margin-left: ${calculateSpacing(2)};
  }

  ${SocialIconExternalLink} {
    width: ${calculateSpacing(4)};
    height: ${calculateSpacing(4)};
  }

  ${SocialIconsListItem} {
    margin: 0;
    padding: 0;
  }

  ${SocialIconsList} {
    margin: 0;
  }
`;
module.exports = {
    ContributorEmbedWrapper,
    ContributorEmbedResponsiveAsset,
    ContributorEmbedName,
    ContributorEmbedSocialLine,
    ContributorEmbedTitle,
    ContributorEmbedSocialIcons
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 13314:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { useIntl } = __webpack_require__(46984);
const { connector } = __webpack_require__(57744);
const { ContributorsWrapper, ContributorsStaff } = __webpack_require__(63750);
const ContributorBio = __webpack_require__(65920);
const translations = (__webpack_require__(46704)/* ["default"] */ .A);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * Contributors component
 *
 * @param {object} props - React props
 * @param {string} [props.brandName] - Tenant brand name
 * @param {string} [props.className] - Optional top-level class to add
 * @param {Array} [props.contributors] - Contributor bios
 * @param {boolean} [props.shouldHideBottomLine] - If true, the component won't have bottom border
 * @param {number} [props.maxContributors] - Max number of contributor bios to render
 * @param {string} [props.dividerColor] - Optional prop to get divider color for article page from copilot
 * @returns {ReactElement} <div>
 */
const Contributors = ({ brandName, className, contributors, maxContributors = 2, dividerColor, shouldHideBottomLine = false }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'Contributors'
        });
    }, []);
    const { formatMessage } = useIntl();
    if (!contributors || !contributors.length) {
        return null;
    }
    return (React.createElement(ContributorsWrapper, { className: classnames('contributors', className), dividerColor: dividerColor, shouldHideBottomLine: shouldHideBottomLine, "data-testid": "Contributors" }, contributors.length > maxContributors ? (React.createElement(ContributorsStaff, null, formatMessage(translations.authorPreamble, { brandName }))) : (contributors.map((contributor, index) => (React.createElement(ContributorBio, { ...contributor, key: index, dividerColor: dividerColor }))))));
};
Contributors.propTypes = {
    brandName: PropTypes.string,
    className: PropTypes.string,
    contributors: PropTypes.arrayOf(PropTypes.shape(ContributorBio.propTypes)),
    dividerColor: PropTypes.string,
    maxContributors: PropTypes.number,
    shouldHideBottomLine: PropTypes.bool
};
Contributors.displayName = 'Contributors';
module.exports = connector(Contributors, {
    keysToPluck: ['brandName']
});
//# sourceMappingURL=Contributors.js.map

/***/ }),

/***/ 1802:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const Contributors = __webpack_require__(13314);
module.exports = asConfiguredComponent(Contributors, 'Contributors');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 63750:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { getTypographyStyles, getColorStyles, calculateSpacing } = __webpack_require__(26865);
const { applyCustomDividerColor } = __webpack_require__(1123);
const ContributorsWrapper = styled.div.withConfig({
    displayName: 'ContributorsWrapper'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.description-embed')}
  border-width: 1px 0;
  border-style: solid;
  ${({ dividerColor, theme }) => `${dividerColor
    ? `${applyCustomDividerColor(dividerColor)};`
    : `${getColorStyles(theme, 'border-color', 'colors.consumption.body.standard.divider')};`}`}

  &:empty {
    border: none;
  }

  ${({ shouldHideBottomLine }) => shouldHideBottomLine && `border-bottom: none;`}
`;
const ContributorsStaff = styled.div.withConfig({
    displayName: 'ContributorsStaff'
}) `
  padding: ${calculateSpacing(4)} 0;
`;
module.exports = {
    ContributorsWrapper,
    ContributorsStaff
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 46704:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    authorPreamble: {
        id: 'Contributors.AuthorPreamble',
        defaultMessage: 'Written by {brandName} Staff',
        description: 'Contributors component author preamble'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 32276:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const signInModalActions = __webpack_require__(22509);
const { connectDomain } = __webpack_require__(57744);
const withUser = connectDomain('user');
const { sizesFullName } = __webpack_require__(99906);
const { TrackComponentChannel } = __webpack_require__(78788);
const { CrosswordEmbedWrapper, CrosswordEmbedInfoWrapper, CrosswordEmbedInvisibleDivWrapper, CrosswordEmbedContentIframe } = __webpack_require__(72892);
const translations = (__webpack_require__(78966)/* ["default"] */ .A);
/**
 * CrosswordEmbed component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {boolean} [props.hasUnsafeReferrer] - Optional use 'unsafe-url' Referrer policy in embedded iframe
 * @param {string} [props.signInMessage] - Optional
 * @param {string} props.title - Required by iframe
 * @param {string} props.url - The crossword url
 * @param {object} [props.user] - Optional
 *
 * @returns {ReactElement} <div>
 */
const CrosswordEmbed = ({ className, hasUnsafeReferrer, signInMessage, title, url, user }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'CrosswordEmbed'
        });
    }, []);
    const { formatMessage } = useIntl();
    const iframeElementRef = React.useRef();
    const [iframeSrc, setIframeSrc] = React.useState(null);
    const { large } = sizesFullName;
    // We need a separate tracker for iOS iframe because that value cannot be null from the start
    const [iOSAppiframeSrc, setiOSAppiframeSrc] = React.useState(url);
    const loginMessage = signInMessage ||
        formatMessage(translations.signInMessage, {
            portal: 'New&nbspYorker',
            emTag: (chunks) => {
                return `<em>${chunks.join('')}</em>`;
            }
        });
    const [shouldDisplayInvisibleDiv, setShouldDisplayInvisibleDiv] = React.useState(true);
    const { isAuthenticated } = user;
    React.useEffect(() => {
        if (isAuthenticated) {
            setShouldDisplayInvisibleDiv(false);
        }
    }, [isAuthenticated]);
    React.useEffect(() => {
        const receiveMessage = (msg) => {
            const origin = /(http(s?)):\/\/cdn3.amuselabs.com/;
            if ((origin.test(msg.origin) || url.startsWith(msg.origin)) &&
                typeof msg.data === 'string') {
                const jsonData = JSON.parse(msg.data);
                const { frameHeight, playId, gridOffset } = jsonData;
                if (playId) {
                    const newurl = `${window.location.protocol}//${window.location.host}${window.location.pathname}?playId=${playId}`;
                    window.history.replaceState({ path: newurl }, window.title, newurl);
                }
                if (frameHeight) {
                    iframeElementRef.current.style.height = `${frameHeight}px`;
                }
                if (gridOffset !== undefined) {
                    window.scrollTo(0, iframeElementRef.current.getBoundingClientRect().top +
                        window.pageYOffset -
                        70);
                }
            }
        };
        const playIdParam = window.location.search
            .substr(1)
            .split('&')
            .find((e) => e.startsWith('playId'));
        const playId = playIdParam && playIdParam.split('=')[1];
        setIframeSrc(url);
        // Note: the order of the following conditionals is very important.  playID is set when the user is in crossplay mode, we need that parameter to be set more so than the user amguuid (we don't need to share the link with amguuid when we enter crossplay).  Please keep this order when you make changes.
        if (user.amguuid) {
            setIframeSrc(`${url}&uid=${user.amguuid}`);
            setiOSAppiframeSrc(`${url}&uid=${user.amguuid}`);
        }
        if (playId) {
            setIframeSrc(`${url}&playId=${playId}`);
            setiOSAppiframeSrc(`${url}&playId=${playId}`);
        }
        window.addEventListener('message', receiveMessage);
        return () => {
            window.removeEventListener('message', receiveMessage);
        };
    }, [url, user]);
    const displayModalHandler = React.useCallback(() => {
        signInModalActions.doDisplayModal({
            closeButtonCallback: () => {
                setShouldDisplayInvisibleDiv(false);
            },
            dangerousDek: loginMessage,
            redirectURL: document.location.href,
            type: 'crosswords',
            analyticsType: 'crossword'
        });
    }, [loginMessage]);
    /**
     * Generates an empty iframe with the data-src property set to the crossword URL
     * this is needed for the Today app to be able to get the crosswords.
     *
     * @returns {object} The iframe html
     */
    const iframeData = () => {
        return {
            __html: `<iframe id="crossword" title="Blank iframe" ${hasUnsafeReferrer ? 'referrerpolicy="unsafe-url"' : ''} src="about:blank" data-src="${iOSAppiframeSrc}"></iframe>`
        };
    };
    return (React.createElement(CrosswordEmbedWrapper, { "data-testid": "CrosswordEmbedWrapper", breakpoint: large, className: className },
        React.createElement(CrosswordEmbedInfoWrapper, { dangerouslySetInnerHTML: iframeData(), "data-testid": "CrosswordEmbedInfoWrapper" }),
        shouldDisplayInvisibleDiv && (React.createElement(CrosswordEmbedInvisibleDivWrapper, { "data-testid": "CrosswordEmbedInvisibleDivWrapper", "aria-hidden": "true", onClick: displayModalHandler, onKeyPress: displayModalHandler })),
        React.createElement(CrosswordEmbedContentIframe, { "data-testid": "CrosswordEmbedContentIframe", breakpoint: large, ref: iframeElementRef, title: title || formatMessage(translations.title), src: iframeSrc, ...(hasUnsafeReferrer && {
                referrerPolicy: 'unsafe-url'
            }) })));
};
CrosswordEmbed.propTypes = {
    className: PropTypes.string,
    hasUnsafeReferrer: PropTypes.bool,
    signInMessage: PropTypes.string,
    title: PropTypes.string,
    url: PropTypes.string.isRequired,
    user: PropTypes.object
};
CrosswordEmbed.displayName = 'CrosswordEmbed';
module.exports = withUser(CrosswordEmbed);
//# sourceMappingURL=CrosswordEmbed.js.map

/***/ }),

/***/ 87608:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const CrosswordEmbed = __webpack_require__(32276);
const { asConfiguredComponent } = __webpack_require__(12892);
module.exports = asConfiguredComponent(CrosswordEmbed, 'CrosswordEmbed');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 72892:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { maxThresholds } = __webpack_require__(99906);
const CrosswordEmbedWrapper = styled.div.withConfig({
    displayName: 'CrosswordEmbedWrapper'
}) `
  transform: translateX(-50%);
  margin-left: 50%;
  width: 100vw;
  -webkit-overflow-scrolling: touch;

  @media (min-width: ${({ breakpoint }) => maxThresholds[breakpoint]}px) {
    transform: none;
    margin-left: 0;
    width: 100%;
  }
`;
const CrosswordEmbedInfoWrapper = styled.div.withConfig({
    displayName: 'CrosswordEmbedInfoWrapper'
}) `
  display: none;
`;
const CrosswordEmbedInvisibleDivWrapper = styled.div.withConfig({
    displayName: 'CrosswordEmbedInvisibleDivWrapper'
}) `
  position: absolute;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100vh;
`;
const CrosswordEmbedContentIframe = styled.iframe.withConfig({
    displayName: 'CrosswordEmbedContentIframe'
}) `
  border: none;
  width: 100%;
  height: 520px;
  overflow: hidden;

  @media (min-width: ${({ breakpoint }) => maxThresholds[breakpoint]}px) {
    height: 730px;
  }

  @media print {
    display: inline;
  }
`;
CrosswordEmbedWrapper.displayName = 'CrosswordEmbedWrapper';
CrosswordEmbedInfoWrapper.displayName = 'CrosswordEmbedInfoWrapper';
CrosswordEmbedInvisibleDivWrapper.displayName =
    'CrosswordEmbedInvisibleDivWrapper';
CrosswordEmbedContentIframe.displayName = 'CrosswordEmbedContentIframe';
module.exports = {
    CrosswordEmbedWrapper,
    CrosswordEmbedInfoWrapper,
    CrosswordEmbedInvisibleDivWrapper,
    CrosswordEmbedContentIframe
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 78966:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    title: {
        id: 'CrosswordEmbed.Title',
        defaultMessage: 'Embedded Crossword',
        description: 'Title for crossword embed',
        isConfigurable: true
    },
    signInMessage: {
        id: 'CrosswordEmbed.SignInMessage',
        defaultMessage: 'To save your progress, sign in to your <emTag>{portal}</emTag> account.',
        description: 'Sign in message',
        isConfigurable: true
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 65262:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.DrawerWithForm = void 0;
const prop_types_1 = __importDefault(__webpack_require__(5556));
const react_1 = __importStar(__webpack_require__(96540));
const drawer_1 = __importDefault(__webpack_require__(98653));
const text_field_1 = __webpack_require__(89662);
const Close_1 = __importDefault(__webpack_require__(76399));
const Button_1 = __importDefault(__webpack_require__(88456));
const styles_1 = __webpack_require__(39207);
const form_with_validation_1 = __importDefault(__webpack_require__(72983));
const resetButton = (label) => {
    const ButtonWithLabel = ({ className }) => (react_1.default.createElement(Button_1.default, { label: label, btnStyle: "text", ButtonIcon: Close_1.default, className: className, inputKind: "reset", isIconButton: true, size: "small" }));
    ButtonWithLabel.propTypes = { className: prop_types_1.default.string };
    return ButtonWithLabel;
};
/**
 * DrawerWithForm component
 *
 * @param {object} props - React props
 * @param {object} [props.customInvalidityMessages] - Optional custom invalidity messages, which must be nested under form element names.
 * @param {string} [props.errorText] - Text to display on error
 * @param {string} [props.formName] - a name for the form
 * @param {string} [props.hedText] - hedText text
 * @param {boolean} [props.hideChannelNavigation] - if true increase the z index of the drawer to allow the navbar to be hidden by the overlay
 * @param {string} [props.inputLabel] - label text for input field
 * @param {string} [props.inputName] - name for input field
 * @param {string} [props.inputPlaceholder] - placeholder text for input
 * @param {boolean} [props.isOpen] - if the drawer should be opened
 * @param {boolean} [props.isRequired] - Whether input is required
 * @param {Function} [props.onClose] - function to call when drawer is closed
 * @param {Function} [props.onInput] - function to call whenever the user input changes
 * @param {Function} [props.onReset] - Optional handler for resetting inputs
 * @param {Function} [props.onSubmit] - function to call on submit
 * @param {string} [props.position] - where the drawer is positioned
 * @param {string} [props.resetButtonLabel] - label text for the reset button
 * @param {boolean} [props.shouldDisableSubmitButtonOnEmptyInput] - if submit button should be disabled when no text has been entered
 * @param {boolean} [props.shouldHideValidationErrorText] - Optional hide validation error text just displaying the message
 * @param {string} [props.submitButtonLabel] - submit button label
 * @param {boolean} [props.isBookmarkDrawersEnabled] - Flag to apply the new drawer design tokens for Collection Drawers
 *
 * @returns {ReactElement} <div>
 */
const DrawerWithForm = ({ customInvalidityMessages, errorText, hedText, formName, hideChannelNavigation = true, inputLabel, inputName, inputPlaceholder, isOpen, isRequired, onClose, onInput, onReset, onSubmit, position = 'Bottom', resetButtonLabel, shouldDisableSubmitButtonOnEmptyInput, shouldHideValidationErrorText, submitButtonLabel, isBookmarkDrawersEnabled = false }) => {
    const [userInput, setUserInput] = (0, react_1.useState)('');
    const onInputHandler = (_, value) => {
        setUserInput(value);
        onInput?.();
    };
    const onResetHandler = () => {
        onReset?.();
        // Disables the submit button, removes reset icon
        setUserInput('');
    };
    const drawerPosition = drawer_1.default[position];
    return (react_1.default.createElement(styles_1.DrawerWithFormWrapper, { as: drawerPosition, position: position, hideChannelNavigation: hideChannelNavigation, isOpen: isOpen, onClose: onClose, showCloseButton: true, isBookmarkDrawersEnabled: isBookmarkDrawersEnabled },
        react_1.default.createElement(styles_1.DrawerWithFormHed, null, hedText),
        react_1.default.createElement(form_with_validation_1.default, { customInvalidityMessages: customInvalidityMessages, name: formName, onSubmitHandler: () => onSubmit(userInput), onResetHandler: onResetHandler, shouldHideValidationErrorText: shouldHideValidationErrorText },
            react_1.default.createElement(text_field_1.SingleLine, { formName: formName, errorText: errorText, label: inputLabel, name: inputName, onInputChange: onInputHandler, placeholder: inputPlaceholder, isRequired: isRequired, TrailingIcon: userInput ? resetButton(resetButtonLabel) : null }),
            react_1.default.createElement(styles_1.DrawerWithFormSubmitButton, { label: submitButtonLabel, inputKind: "submit", isDisabled: shouldDisableSubmitButtonOnEmptyInput && !userInput.length }))));
};
exports.DrawerWithForm = DrawerWithForm;
exports.DrawerWithForm.propTypes = {
    customInvalidityMessages: prop_types_1.default.object,
    errorText: prop_types_1.default.string,
    formName: prop_types_1.default.string,
    hedText: prop_types_1.default.string,
    hideChannelNavigation: prop_types_1.default.bool,
    inputLabel: prop_types_1.default.string,
    inputName: prop_types_1.default.string,
    inputPlaceholder: prop_types_1.default.string,
    isBookmarkDrawersEnabled: prop_types_1.default.bool,
    isOpen: prop_types_1.default.bool,
    isRequired: prop_types_1.default.bool,
    onClose: prop_types_1.default.func,
    onInput: prop_types_1.default.func,
    onReset: prop_types_1.default.func,
    onSubmit: prop_types_1.default.func,
    position: prop_types_1.default.oneOf(Object.keys(drawer_1.default)),
    resetButtonLabel: prop_types_1.default.string,
    shouldDisableSubmitButtonOnEmptyInput: prop_types_1.default.bool,
    shouldHideValidationErrorText: prop_types_1.default.bool,
    submitButtonLabel: prop_types_1.default.string
};
//# sourceMappingURL=DrawerWithForm.js.map

/***/ }),

/***/ 48165:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.DrawerWithForm = void 0;
var DrawerWithForm_1 = __webpack_require__(65262);
Object.defineProperty(exports, "DrawerWithForm", ({ enumerable: true, get: function () { return DrawerWithForm_1.DrawerWithForm; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 39207:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.DrawerWithFormWrapper = exports.DrawerWithFormSubmitButton = exports.DrawerWithFormHed = void 0;
const styled_components_1 = __importDefault(__webpack_require__(92168));
const Drawer_1 = __importDefault(__webpack_require__(91180));
const base_1 = __webpack_require__(76955);
const Button_1 = __importDefault(__webpack_require__(88456));
const utils_1 = __webpack_require__(26865);
const styles_1 = __webpack_require__(60434);
const styles_2 = __webpack_require__(63967);
exports.DrawerWithFormHed = (0, styled_components_1.default)(base_1.BaseText).withConfig({
    displayName: 'DrawerWithFormHed'
}) `
  display: flex;
  justify-content: center;
  padding-bottom: ${(0, utils_1.calculateSpacing)(3)};

  ${(0, utils_1.getTypographyStyles)('typography.definitions.foundation.title-secondary')};
`;
exports.DrawerWithFormSubmitButton = (0, styled_components_1.default)(Button_1.default.Utility).withConfig({
    displayName: 'DrawerWithFormSubmitButton'
}) `
  && {
    border: none;
    width: 100%;
  }
`;
exports.DrawerWithFormWrapper = (0, styled_components_1.default)(Drawer_1.default).withConfig({
    displayName: 'DrawerWithFormWrapper'
}) `
  ${({ theme, isBookmarkDrawersEnabled }) => isBookmarkDrawersEnabled
    ? (0, utils_1.getColorStyles)(theme, 'background-color', !(0, utils_1.isInverted)(theme)
        ? 'colors.discovery.body.brand.background'
        : 'colors.discovery.body.dark.background')
    : (0, utils_1.getColorStyles)(theme, 'background-color', !(0, utils_1.isInverted)(theme)
        ? 'colors.foundation.menu-bg.expanded'
        : 'colors.discovery.lead.primary.background')};

  &&& {
    padding: ${(0, utils_1.calculateSpacing)(3)};
    width: ${({ position }) => position === 'Right' && (0, utils_1.calculateSpacing)(49)};
    height: ${({ position }) => position !== 'Bottom' && `100vh`};

    ${({ theme }) => (0, utils_1.isInverted)(theme) &&
    (0, utils_1.getColorStyles)('background-color', 'colors.background.black')};

    ${styles_2.DrawerButton}, ${styles_1.TextFieldIcon} {
      border: none;
      background-color: transparent;

      g,
      g:hover,
      g:focus {
        ${({ theme }) => (0, utils_1.isInverted)(theme)
    ? (0, utils_1.getColorStyles)('stroke', 'colors.interactive.base.white')
    : (0, utils_1.getColorStyles)('stroke', 'colors.interactive.base.black')};
      }

      .icon-close {
        padding: ${(0, utils_1.calculateSpacing)(0.75)};
      }
    }
  }

  ${exports.DrawerWithFormHed} {
    ${({ theme }) => (0, utils_1.isInverted)(theme)
    ? (0, utils_1.getColorStyles)('color', 'colors.interactive.base.white')
    : (0, utils_1.getColorStyles)('color', 'colors.interactive.base.black')};
  }

  ${styles_1.TextFieldWrapper} {
    margin: 0;
    padding-bottom: ${(0, utils_1.calculateSpacing)(3)};
  }

  ${styles_1.TextFieldLabelText} {
    ${({ theme }) => (0, utils_1.isInverted)(theme)
    ? (0, utils_1.getColorStyles)('color', 'colors.interactive.base.light')
    : (0, utils_1.getColorStyles)('color', 'colors.interactive.base.dark')};
  }

  ${styles_1.TextFieldInputContainer} input {
    border: 1px solid;
    background-color: transparent;

    ${({ theme }) => (0, utils_1.isInverted)(theme)
    ? (0, utils_1.getColorStyles)('border-color', 'colors.interactive.base.light')
    : (0, utils_1.getColorStyles)('border-color', 'colors.interactive.base.dark')};

    ${({ theme }) => (0, utils_1.isInverted)(theme)
    ? (0, utils_1.getColorStyles)('color', 'colors.interactive.base.white')
    : (0, utils_1.getColorStyles)('color', 'colors.interactive.base.black')};
  }

  ${exports.DrawerWithFormSubmitButton} {
    &[aria-disabled='false'] {
      ${({ theme }) => (0, utils_1.isInverted)(theme)
    ? (0, utils_1.getColorStyles)('background-color', 'colors.interactive.base.white')
    : (0, utils_1.getColorStyles)('background-color', 'colors.interactive.base.black')};
      ${({ theme }) => (0, utils_1.isInverted)(theme)
    ? (0, utils_1.getColorStyles)('color', 'colors.interactive.base.black')
    : (0, utils_1.getColorStyles)('color', 'colors.interactive.base.white')};
    }
  }
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 36061:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const prop_types_1 = __importDefault(__webpack_require__(5556));
const react_1 = __importStar(__webpack_require__(96540));
const throttle_1 = __importDefault(__webpack_require__(7350));
const styles_1 = __webpack_require__(72662);
const DynamicCarouselHeader_1 = __importDefault(__webpack_require__(12816));
const DynamicCarouselBody_1 = __importDefault(__webpack_require__(2057));
const DynamicCarouselFooter_1 = __importDefault(__webpack_require__(46870));
const DynamicCarouselItem_1 = __importDefault(__webpack_require__(54354));
const utils_1 = __webpack_require__(55659);
const track_component_1 = __webpack_require__(78788);
const useViewport_1 = __importDefault(__webpack_require__(70632));
const tracking_1 = __webpack_require__(99785);
const screen_1 = __webpack_require__(55030);
/**
 * Carousel component ** DO NOT USE/IMPORT THIS COMPONENT IN ANY OTHER COMPONENT AND PUT LIVE IN PROD,
 * THIS COMPONENT DEVELOPMENT IS WORK IN PROGRESS **
 *
 * @param {object} props - React props.
 * @param {node} props.children - The children elements to be rendered inside the carousel.
 * @param {Array} props.groups - The groups of items in the carousel. Each group contains a list of items and a label.
 * @param {object} props.ctaProps - The properties for the CTA (Call-To-Action) button.
 * @param {string} [props.ctaProps.style] - The style of the CTA button. Possible values: 'text', 'outlined', 'filled'.
 * @param {Function} [props.ctaProps.clickHandler] - The function to be called when the CTA button is clicked.
 * @param {string} [props.ctaProps.text] - The text displayed on the CTA button.
 * @param {string} [props.ctaProps.position] - The position of the CTA button. Possible values: 'header', 'footer'.
 * @param {object} props.headerProps - The properties for the title section of the carousel.
 * @param {boolean} [props.headerProps.hasDividerBelowHeader] - Whether the title has a bottom divider.
 * @param {string} [props.headerProps.dangerousHed] - The title text, which can include dangerous HTML.
 * @param {string} [props.headerProps.dangerousDek] - The description text, which can include dangerous HTML.
 * @param {string} [props.headerProps.shouldDisplayDangerousDek] - The description text, to toggle its display.
 * @param {string} [props.headerProps.contentAlign] - The alignment of the title. Possible values: 'left', 'center'.
 * @param {object} props.carouselSettings - The settings for the carousel's behavior and appearance.
 * @param {string} [props.carouselSettings.fullPageTheme] - Optional theme prop - standard or inverted, standard by default
 * @param {string} [props.carouselSettings.scrollType] - The type of scrolling. Possible values: 'set-by-set', 'one-by-one'.
 * @param {boolean} [props.carouselSettings.hasPaginationDots] - Whether to show pagination dots.
 * @param {boolean} [props.carouselSettings.isPaginationClickable] - Dtermines if the pagination dots are clickable or not. Default is `true`
 * @param {boolean} [props.carouselSettings.hideDesktopPagination] - Whether to hide pagination dots on desktop viewport only. Default is `false`
 * @param {boolean} [props.carouselSettings.showControls] - Whether to show navigation controls.
 * @param {boolean} [props.carouselSettings.shouldCenterAlignIfItemsAreLess] - Whether to align items at center when count is less
 * @param {string} [props.carouselSettings.controlsPosition] - The position of the controls. Possible values: 'header', 'footer'.
 * @param {boolean} [props.carouselSettings.showLabels] - Whether to show labels.
 * @param {boolean} [props.carouselSettings.hideScrollbar] - Whether to hide the scrollbar.
 * @param {string} [props.carouselSettings.itemsDensity] - Defines the spacing and layout density of items in the carousel. Possible values: 'default', 'compact', 'spacious'.
 * @param {boolean} [props.carouselSettings.showSlideshow] - Whether to show a slideshow.
 */
const Carousel = ({ children, groups, ctaProps = {}, headerProps = {}, carouselSettings = {}, trackingEventData = {} }) => {
    const [listWidth, setListWidth] = (0, react_1.useState)(0);
    const [visibleItems, setVisibleItems] = (0, react_1.useState)(0);
    const [filterSelectedValue, setFilterSelectedValue] = (0, react_1.useState)('');
    const [totalChildren, setTotalChildren] = (0, react_1.useState)();
    const [hasFilters, setHasFilters] = (0, react_1.useState)();
    const [isScrollable, setIsScrollable] = (0, react_1.useState)(false);
    const [scrollState, setScrollState] = (0, react_1.useState)({
        isScrollStart: true,
        listScrollLeft: 0,
        isScrollEnd: false
    });
    const listRef = (0, react_1.useRef)(null);
    const resolvedHeaderProps = {
        hasDividerBelowHeader: false,
        dangerousHed: undefined,
        dangerousDek: undefined,
        shouldDisplayDangerousDek: false,
        contentAlign: 'left',
        sectionTitleVariation: undefined,
        hasBorderTop: false,
        hasBorderBottom: false,
        ...headerProps
    };
    const resolvedCTAProps = {
        style: 'text',
        clickHandler: () => { },
        text: undefined,
        position: 'footer',
        ...ctaProps
    };
    const resolvedCarouselSettings = {
        scrollType: 'set-by-set',
        hasPaginationDots: false,
        isPaginationClickable: true,
        showControls: true,
        controlsPosition: 'header',
        shouldRightAlignFooterControls: false,
        showLabels: true,
        hideScrollbar: true,
        itemsDensity: 'default',
        showSlideshow: false,
        shouldCenterAlignIfItemsAreLess: false,
        fullPageTheme: 'standard',
        hideDesktopPagination: false,
        ...carouselSettings
    };
    const resolvedTrackingEventData = {
        snowplowNavEventSubject: undefined,
        ...trackingEventData
    };
    const { style: ctaStyle, clickHandler: ctaClickHandler, text: ctaText, position: ctaPosition } = resolvedCTAProps;
    const { hasDividerBelowHeader, dangerousHed, dangerousDek, shouldDisplayDangerousDek, contentAlign, sectionTitleVariation, hasBorderTop, hasBorderBottom } = resolvedHeaderProps;
    const { scrollType: carouselScrollType, hasPaginationDots, isPaginationClickable, showControls, controlsPosition: position, shouldRightAlignFooterControls, showLabels, hideScrollbar, itemsDensity, shouldCenterAlignIfItemsAreLess, showSlideshow, fullPageTheme, hideDesktopPagination } = resolvedCarouselSettings;
    const { snowplowNavEventSubject } = resolvedTrackingEventData;
    (0, react_1.useEffect)(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(track_component_1.TrackComponentChannel.RENDER, {
            name: 'dynamic-carousel'
        });
    }, []);
    (0, react_1.useEffect)(() => {
        if (groups && groups.length > 1) {
            setHasFilters(true);
            setFilterSelectedValue(groups[0].label);
        }
    }, [groups]);
    const checkIfScrollable = (0, react_1.useCallback)(() => {
        const listEl = listRef?.current;
        if (listEl) {
            setIsScrollable(listEl.scrollWidth > listEl.clientWidth);
        }
    }, []);
    const updateDimensions = (0, react_1.useCallback)(() => {
        checkIfScrollable();
        const listEl = listRef?.current;
        if (listEl) {
            const visibleWidth = listEl.offsetWidth;
            setListWidth(visibleWidth);
        }
    }, [checkIfScrollable]);
    const viewportType = (0, useViewport_1.default)(updateDimensions);
    const isMobile = viewportType === utils_1.VIEWPORT_TYPE_MOBILE;
    const isTablet = viewportType === utils_1.VIEWPORT_TYPE_TABLET;
    const isDesktop = !isMobile && !isTablet;
    const itemsPerSlot = (0, react_1.useMemo)(() => (0, utils_1.getItemsPerSlot)(isMobile, isTablet, itemsDensity), [isMobile, isTablet, itemsDensity]);
    const totalDotCount = (0, react_1.useMemo)(() => {
        setVisibleItems(itemsPerSlot);
        if (showSlideshow)
            return totalChildren;
        return Math.ceil(totalChildren / itemsPerSlot) || null;
    }, [showSlideshow, totalChildren, itemsPerSlot]);
    const activeDotIndex = (0, react_1.useMemo)(() => {
        const listEl = listRef?.current;
        if (listEl) {
            if (scrollState.isScrollStart)
                return 0;
            if (scrollState.isScrollEnd)
                return totalDotCount - 1;
            const scrollPosition = scrollState.listScrollLeft / listWidth;
            return isMobile ? Math.ceil(scrollPosition) : (0, utils_1.scrollRound)(scrollPosition);
        }
        return 0;
    }, [
        scrollState.isScrollStart,
        scrollState.isScrollEnd,
        totalDotCount,
        scrollState.listScrollLeft,
        listWidth,
        isMobile
    ]);
    const throttledUpdateScrollState = (0, react_1.useMemo)(() => (0, throttle_1.default)(() => {
        const listEl = listRef?.current;
        if (listEl) {
            const newScrollState = {
                isScrollStart: (0, utils_1.isScrollAtStart)(listEl),
                listScrollLeft: listEl.scrollLeft,
                isScrollEnd: (0, utils_1.isScrollAtEnd)(listEl)
            };
            // Only update state if it has changed
            setScrollState((prevScrollState) => {
                if (prevScrollState.isScrollStart !== newScrollState.isScrollStart ||
                    prevScrollState.listScrollLeft !==
                        newScrollState.listScrollLeft ||
                    prevScrollState.isScrollEnd !== newScrollState.isScrollEnd) {
                    return newScrollState;
                }
                return prevScrollState;
            });
            (0, tracking_1.trackCarouselSwipe)();
        }
    }, 500), [listRef]);
    (0, react_1.useEffect)(() => {
        const listEl = listRef.current;
        if (listEl) {
            listEl.addEventListener('scroll', throttledUpdateScrollState);
            return () => {
                listEl.removeEventListener('scroll', throttledUpdateScrollState);
            };
        }
        return undefined;
    }, [throttledUpdateScrollState]);
    const filteredItems = (0, react_1.useMemo)(() => {
        if (hasFilters && groups?.length > 0) {
            const group = groups.find((group) => group.label === filterSelectedValue);
            return group?.items || [];
        }
        return children || groups?.[0]?.items || [];
    }, [hasFilters, groups, filterSelectedValue, children]);
    const filteredItemsCount = (0, react_1.useMemo)(() => react_1.Children.count(filteredItems), [filteredItems]);
    (0, react_1.useEffect)(() => {
        setTotalChildren(filteredItemsCount);
    }, [filteredItemsCount]);
    // Below is used for tracking carousel impression on webpage
    (0, screen_1.useViewportObserver)(`.dynamic-carousel-container`, undefined, (isInViewport) => {
        if (isInViewport) {
            (0, tracking_1.trackingCarouselImpressionEvent)({ dangerousHed });
        }
    });
    if (totalChildren === 0) {
        return null;
    }
    const handleBackClick = () => {
        (0, tracking_1.trackControlClickEvent)({
            direction: 'back',
            dangerousHed,
            snowplowNavEventSubject,
            totalChildren
        });
        (0, tracking_1.trackLeftControlClick)();
        return (0, utils_1.handleScrollClick)(listRef, carouselScrollType, totalChildren, visibleItems, scrollState.isScrollEnd, 'back', showSlideshow);
    };
    const handleForwardClick = () => {
        (0, tracking_1.trackControlClickEvent)({
            direction: 'forward',
            dangerousHed,
            snowplowNavEventSubject,
            totalChildren
        });
        (0, tracking_1.trackRightControlClick)();
        return (0, utils_1.handleScrollClick)(listRef, carouselScrollType, totalChildren, visibleItems, scrollState.isScrollEnd, 'forward', showSlideshow);
    };
    const handlePaginationDotClick = (dotIndex) => {
        (0, utils_1.handleScrollClick)(listRef, carouselScrollType, totalChildren, visibleItems, false, null, showSlideshow, dotIndex);
    };
    const { showNavControlsAtTop, showNavControlsAtBottom } = (0, utils_1.getNavigationPlacement)({
        isMobile,
        isTablet,
        position,
        showControls
    });
    const renderCarouselList = () => {
        return (react_1.default.createElement(styles_1.CarouselList, { "data-testid": "carousel-list", ref: listRef, hideScrollbar: hideScrollbar, isScrollEnd: scrollState.isScrollEnd, isScrollStart: scrollState.isScrollStart, shouldAlignItemsAtCenter: shouldCenterAlignIfItemsAreLess && !isScrollable, fullPageTheme: fullPageTheme }, !hasFilters
            ? react_1.Children.toArray(children)
            : filteredItems.map((item) => (react_1.default.createElement(DynamicCarouselItem_1.default, { itemsDensity: itemsDensity, key: item.key }, react_1.default.cloneElement(item))))));
    };
    return (react_1.default.createElement(styles_1.CarouselContainer, { "data-testid": "carousel-container", className: "dynamic-carousel-container" },
        react_1.default.createElement(DynamicCarouselHeader_1.default, { "data-testid": "carousel-header", showControls: showNavControlsAtTop && isScrollable, dangerousHed: dangerousHed, contentAlign: contentAlign, totalSlots: totalDotCount, currentSlot: activeDotIndex + 1, hasDividerBelowHeader: hasDividerBelowHeader, hasFilters: hasFilters, sectionTitleVariation: sectionTitleVariation, ctaClickHandler: ctaClickHandler, ctaStyle: ctaStyle, showLabels: carouselScrollType !== 'one-by-one' &&
                showLabels &&
                (!hasPaginationDots || (hideDesktopPagination && isDesktop)), groups: groups, filterSelectedValue: filterSelectedValue, headerCTALabel: ctaPosition === 'header' ? ctaText : undefined, onBackClick: handleBackClick, onForwardClick: handleForwardClick, isScrollEnd: scrollState.isScrollEnd, isScrollStart: scrollState.isScrollStart, setFilterSelectedValue: setFilterSelectedValue, dangerousDek: dangerousDek, shouldDisplayDangerousDek: shouldDisplayDangerousDek, fullPageTheme: fullPageTheme, hasBorderTop: hasBorderTop, hasBorderBottom: hasBorderBottom }),
        react_1.default.createElement(DynamicCarouselBody_1.default, { "data-testid": "carousel-body" }, renderCarouselList()),
        react_1.default.createElement(DynamicCarouselFooter_1.default, { "data-testid": "carousel-footer", showControlsInBottom: showNavControlsAtBottom &&
                isScrollable &&
                (!isMobile || !hasPaginationDots), totalSlots: totalDotCount, currentSlot: activeDotIndex + 1, totalDotCount: totalDotCount, ctaStyle: ctaStyle, activeDotIndex: activeDotIndex + 1, ctaClickHandler: ctaClickHandler, onDotClick: isPaginationClickable ? handlePaginationDotClick : null, onBackClick: handleBackClick, onForwardClick: handleForwardClick, footerCTALabel: ctaPosition === 'footer' && ctaText, showLabels: carouselScrollType !== 'one-by-one' &&
                showLabels &&
                (!hasPaginationDots || (hideDesktopPagination && isDesktop)), hasPagination: hasPaginationDots &&
                isScrollable &&
                !(hideDesktopPagination && isDesktop), isScrollEnd: scrollState.isScrollEnd, isScrollStart: scrollState.isScrollStart, shouldRightAlignFooterControls: shouldRightAlignFooterControls, isPaginationClickable: isPaginationClickable, fullPageTheme: fullPageTheme })));
};
Carousel.propTypes = {
    carouselSettings: prop_types_1.default.shape({
        scrollType: prop_types_1.default.oneOf(['set-by-set', 'one-by-one']),
        hasPaginationDots: prop_types_1.default.bool,
        isPaginationClickable: prop_types_1.default.bool,
        showControls: prop_types_1.default.bool,
        controlsPosition: prop_types_1.default.oneOf(['header', 'footer']),
        shouldRightAlignFooterControls: prop_types_1.default.bool,
        showLabels: prop_types_1.default.bool,
        hideScrollbar: prop_types_1.default.bool,
        itemsDensity: prop_types_1.default.oneOf(['default', 'min']),
        shouldCenterAlignIfItemsAreLess: prop_types_1.default.bool,
        showSlideshow: prop_types_1.default.bool,
        fullPageTheme: prop_types_1.default.string,
        hideDesktopPagination: prop_types_1.default.bool
    }),
    children: prop_types_1.default.node,
    ctaProps: prop_types_1.default.shape({
        style: prop_types_1.default.oneOf(['text', 'outlined', 'filled']),
        clickHandler: prop_types_1.default.func,
        text: prop_types_1.default.string,
        position: prop_types_1.default.oneOf(['header', 'footer'])
    }),
    groups: prop_types_1.default.arrayOf(prop_types_1.default.shape({
        items: prop_types_1.default.arrayOf(prop_types_1.default.node),
        label: prop_types_1.default.string
    })),
    headerProps: prop_types_1.default.shape({
        hasDividerBelowHeader: prop_types_1.default.bool,
        dangerousHed: prop_types_1.default.string,
        dangerousDek: prop_types_1.default.string,
        shouldDisplayDangerousDek: prop_types_1.default.bool,
        contentAlign: prop_types_1.default.oneOf(['left', 'center']),
        sectionTitleVariation: prop_types_1.default.string
    }),
    trackingEventData: prop_types_1.default.shape({
        snowplowNavEventSubject: prop_types_1.default.string
    })
};
Carousel.CarouselItem = DynamicCarouselItem_1.default;
exports["default"] = Carousel;
//# sourceMappingURL=DynamicCarousel.js.map

/***/ }),

/***/ 2057:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const react_1 = __importDefault(__webpack_require__(96540));
const prop_types_1 = __importDefault(__webpack_require__(5556));
const styles_1 = __webpack_require__(72662);
/**
 * Carousel Body component
 *
 * @param {object} props - React props.
 * @param {import('react').ReactNode} props.children - The content to display in the carousel. Typically an array of React elements or components.
 *
 */
const CarouselBodySlot = ({ children }) => {
    if (!children)
        return null;
    return react_1.default.createElement(styles_1.CarouselListWrapper, null, children);
};
CarouselBodySlot.propTypes = {
    children: prop_types_1.default.node.isRequired
};
exports["default"] = CarouselBodySlot;
//# sourceMappingURL=DynamicCarouselBody.js.map

/***/ }),

/***/ 24163:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ControlDots = exports.NavigationForwardButton = exports.NavigationBackButton = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const prop_types_1 = __importDefault(__webpack_require__(5556));
const styles_1 = __webpack_require__(72662);
const thin_1 = __webpack_require__(91470);
const NavigationBackButton = ({ isDisabled, onBackClick, fullPageTheme }) => {
    return (react_1.default.createElement(styles_1.BackButton, { onClick: !isDisabled ? onBackClick : undefined, "aria-label": "Previous Slide", inputKind: "button", isDisabled: isDisabled, fullPageTheme: fullPageTheme },
        react_1.default.createElement(thin_1.LeftChevron, { as: "button" })));
};
exports.NavigationBackButton = NavigationBackButton;
NavigationBackButton.propTypes = {
    fullPageTheme: prop_types_1.default.string,
    isDisabled: prop_types_1.default.bool,
    onBackClick: prop_types_1.default.func
};
const ControlDots = ({ length = 0, selectedIndex = 1, onDotClick, isPaginationClickable, fullPageTheme }) => {
    if (length === 0)
        return null;
    const carouselDots = [];
    for (let i = 1; i < length + 1; i += 1) {
        carouselDots.push(react_1.default.createElement(styles_1.CarouselDot, { key: `dot-${i}`, isSelected: i === selectedIndex, onClick: () => onDotClick(i), isPaginationClickable: isPaginationClickable, fullPageTheme: fullPageTheme }));
    }
    return carouselDots;
};
exports.ControlDots = ControlDots;
ControlDots.propTypes = {
    fullPageTheme: prop_types_1.default.string,
    isPaginationClickable: prop_types_1.default.bool,
    length: prop_types_1.default.number,
    onDotClick: prop_types_1.default.func,
    selectedIndex: prop_types_1.default.number
};
const NavigationForwardButton = ({ isDisabled, onForwardClick, fullPageTheme }) => {
    return (react_1.default.createElement(styles_1.ForwardButton, { inputKind: "button", "aria-label": "Next Slide", isDisabled: isDisabled, onClick: !isDisabled ? onForwardClick : undefined, fullPageTheme: fullPageTheme },
        react_1.default.createElement(thin_1.ChevronRight, { as: "button" })));
};
exports.NavigationForwardButton = NavigationForwardButton;
NavigationForwardButton.propTypes = {
    fullPageTheme: prop_types_1.default.string,
    isDisabled: prop_types_1.default.bool,
    onForwardClick: prop_types_1.default.func
};
//# sourceMappingURL=DynamicCarouselControls.js.map

/***/ }),

/***/ 46870:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const react_1 = __importDefault(__webpack_require__(96540));
const prop_types_1 = __importDefault(__webpack_require__(5556));
const styles_1 = __webpack_require__(72662);
const DynamicCarouselControls_1 = __webpack_require__(24163);
const CarouselFooterSlot = ({ showControlsInBottom, totalSlots, footerCTALabel, ctaStyle, ctaClickHandler, onBackClick, onForwardClick, onDotClick, activeDotIndex, showLabels, currentSlot, isScrollEnd, isScrollStart, totalDotCount = 0, hasPagination, shouldRightAlignFooterControls, isPaginationClickable, fullPageTheme }) => {
    if (!showControlsInBottom && !footerCTALabel && !hasPagination)
        return null;
    const shouldRenderNavPagination = showLabels && currentSlot > 0 && totalSlots > 0;
    const renderFooterPagination = () => hasPagination && (react_1.default.createElement(styles_1.PaginationDotsWrapper, { "data-testid": "pagination-dots-wrapper", fullPageTheme: fullPageTheme },
        react_1.default.createElement(DynamicCarouselControls_1.ControlDots, { length: totalDotCount, selectedIndex: activeDotIndex, onDotClick: onDotClick, isPaginationClickable: isPaginationClickable, fullPageTheme: fullPageTheme })));
    const renderFooterNavigation = () => showControlsInBottom && (react_1.default.createElement(styles_1.FooterNavigationWrapper, { showLabels: showLabels, hasPagination: hasPagination, shouldRightAlignFooterControls: shouldRightAlignFooterControls, fullPageTheme: fullPageTheme },
        react_1.default.createElement(DynamicCarouselControls_1.NavigationBackButton, { onBackClick: onBackClick, isDisabled: isScrollStart, fullPageTheme: fullPageTheme }),
        shouldRenderNavPagination && (react_1.default.createElement(styles_1.NavPaginationWrapper, null,
            react_1.default.createElement("p", null,
                react_1.default.createElement("span", null, currentSlot),
                " / ",
                react_1.default.createElement("span", null, totalSlots)))),
        react_1.default.createElement(DynamicCarouselControls_1.NavigationForwardButton, { onForwardClick: onForwardClick, isDisabled: isScrollEnd, fullPageTheme: fullPageTheme })));
    const renderFooterCTA = () => footerCTALabel && (react_1.default.createElement(styles_1.FooterCTAButton, { href: "#", label: footerCTALabel, target: "blank", inputKind: "link", btnStyle: ctaStyle, onClickHandler: ctaClickHandler }));
    return (react_1.default.createElement(styles_1.CarouselFooterWrapper, { hasPagination: hasPagination, footerCTALabel: footerCTALabel },
        renderFooterPagination(),
        renderFooterNavigation(),
        renderFooterCTA()));
};
CarouselFooterSlot.propTypes = {
    activeDotIndex: prop_types_1.default.number,
    ctaClickHandler: prop_types_1.default.func,
    ctaStyle: prop_types_1.default.oneOf(['filled', 'outlined', 'text']),
    currentSlot: prop_types_1.default.number,
    footerCTALabel: prop_types_1.default.string,
    fullPageTheme: prop_types_1.default.string,
    hasPagination: prop_types_1.default.bool,
    isPaginationClickable: prop_types_1.default.bool,
    isScrollEnd: prop_types_1.default.bool,
    isScrollStart: prop_types_1.default.bool,
    onBackClick: prop_types_1.default.func,
    onDotClick: prop_types_1.default.func,
    onForwardClick: prop_types_1.default.func,
    shouldRightAlignFooterControls: prop_types_1.default.bool,
    showControlsInBottom: prop_types_1.default.bool,
    showLabels: prop_types_1.default.bool,
    totalDotCount: prop_types_1.default.number,
    totalSlots: prop_types_1.default.number
};
exports["default"] = CarouselFooterSlot;
//# sourceMappingURL=DynamicCarouselFooter.js.map

/***/ }),

/***/ 12816:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const react_1 = __importDefault(__webpack_require__(96540));
const prop_types_1 = __importDefault(__webpack_require__(5556));
const DynamicCarouselControls_1 = __webpack_require__(24163);
const SectionTitle_1 = __importDefault(__webpack_require__(24277));
const styles_1 = __webpack_require__(72662);
const toggle_chip_list_1 = __importDefault(__webpack_require__(99244));
const toggle_chip_1 = __importDefault(__webpack_require__(15343));
/**
 * Renders navigation controls (back, forward, and pagination).
 *
 * @param {object} props - Component props.
 * @param {Function} props.onBackClick - Callback for back button click.
 * @param {Function} props.onForwardClick - Callback for forward button click.
 * @param {boolean} props.showLabels - Whether to show slot labels in pagination.
 * @param {boolean} props.isScrollStart - Whether the scroll is at the start.
 * @param {boolean} props.isScrollEnd - Whether the scroll is at the end.
 * @param {number} props.currentSlot - The current slot number.
 * @param {boolean} props.hasOnlyTitle - Represents if carousel has only title
 * @param {number} props.totalSlots - The total number of slots.
 * @param {string} props.fullPageTheme - Determines the complete theme of the page
 * @param {boolean} props.hasFilters - Whether filters are enabled.
 * @returns {JSX.Element|null} The navigation controls or null if not needed.
 */
const NavigationControls = ({ onBackClick, onForwardClick, showLabels, isScrollStart, isScrollEnd, currentSlot, totalSlots, hasFilters, hasOnlyTitle, fullPageTheme }) => {
    return (react_1.default.createElement(styles_1.CarouselNavigationWrapper, { hasFilters: hasFilters, showLabels: showLabels, hasOnlyTitle: hasOnlyTitle, fullPageTheme: fullPageTheme },
        react_1.default.createElement(DynamicCarouselControls_1.NavigationBackButton, { onBackClick: onBackClick, isDisabled: isScrollStart, fullPageTheme: fullPageTheme }),
        showLabels && currentSlot > 0 && totalSlots > 0 && (react_1.default.createElement(styles_1.NavPaginationWrapper, null,
            react_1.default.createElement("p", null,
                react_1.default.createElement("span", null, currentSlot),
                " / ",
                react_1.default.createElement("span", null, totalSlots)))),
        react_1.default.createElement(DynamicCarouselControls_1.NavigationForwardButton, { onForwardClick: onForwardClick, isDisabled: isScrollEnd, fullPageTheme: fullPageTheme })));
};
NavigationControls.propTypes = {
    currentSlot: prop_types_1.default.number,
    fullPageTheme: prop_types_1.default.string,
    hasFilters: prop_types_1.default.bool,
    hasOnlyTitle: prop_types_1.default.bool,
    isScrollEnd: prop_types_1.default.bool,
    isScrollStart: prop_types_1.default.bool,
    onBackClick: prop_types_1.default.func,
    onForwardClick: prop_types_1.default.func,
    showLabels: prop_types_1.default.bool,
    totalSlots: prop_types_1.default.number
};
/**
 * Renders a header call-to-action (CTA) button with optional navigation controls.
 *
 * @param {object} props - Component props.
 * @param {string} props.label - The text label for the CTA button.
 * @param {string} props.ctaStyle - The style applied to the CTA button.
 * @param {Function} props.onClickHandler - Callback for button click.
 * @param {object} props.dekProps - Has all the props associated with dek.
 * @returns {JSX.Element|null} The rendered CTA with navigation controls or null if no label is provided.
 */
const HeaderCTA = ({ label, ctaStyle, onClickHandler, dekProps }) => {
    if (!label && !dekProps.shouldDisplayDangerousDek)
        return null;
    const { dangerousDek, shouldDisplayDangerousDek, contentAlign } = dekProps;
    return (react_1.default.createElement(styles_1.NavCTAWrapper, { contentAlign: contentAlign },
        shouldDisplayDangerousDek && (react_1.default.createElement(styles_1.CarouselDek, { dangerousDek: dangerousDek, shouldDisplayDangerousDek: shouldDisplayDangerousDek, hasCustomTypeToken: true, hasMarginBottom: true, contentAlign: contentAlign })),
        label && (react_1.default.createElement(styles_1.HeaderCTAButton, { href: "#", label: label, target: "_blank", btnStyle: ctaStyle, inputKind: "link", onClickHandler: onClickHandler }))));
};
HeaderCTA.propTypes = {
    ctaStyle: prop_types_1.default.string,
    dekProps: prop_types_1.default.shape({
        contentAlign: prop_types_1.default.string,
        dangerousDek: prop_types_1.default.string,
        shouldDisplayDangerousDek: prop_types_1.default.bool
    }),
    label: prop_types_1.default.string,
    onClickHandler: prop_types_1.default.func
};
/**
 * Renders a filter navigation component with optional navigation controls.
 *
 * @param {object} props - Component props.
 * @param {string} props.contentAlign - sets the alignment of filters
 * @param {Array} props.groups - List of filter group objects.
 * @param {Array} props.fullPageTheme - for determining the theme of the page
 * @param {string} props.filterSelectedValue - The currently selected filter label.
 * @param {Function} props.setFilterSelectedValue - Callback to set the selected filter label.
 * @returns {JSX.Element|null} The rendered filter navigation or null if no groups are provided.
 */
const Filters = ({ groups, filterSelectedValue, setFilterSelectedValue, contentAlign, fullPageTheme }) => {
    if (!groups || groups.length === 0)
        return null;
    return (react_1.default.createElement(styles_1.FilterNavWrapper, { contentAlign: contentAlign, fullPageTheme: fullPageTheme },
        react_1.default.createElement(toggle_chip_list_1.default, { contentAlign: "center", layout: "nowrap", hasNoHorizontalScroll: true }, groups.map((item, index) => (react_1.default.createElement(toggle_chip_1.default, { key: index, isChecked: item.label === filterSelectedValue, onChange: () => setFilterSelectedValue(item.label) }, item.label))))));
};
Filters.propTypes = {
    contentAlign: prop_types_1.default.string,
    filterSelectedValue: prop_types_1.default.string,
    fullPageTheme: prop_types_1.default.string,
    groups: prop_types_1.default.arrayOf(prop_types_1.default.shape({
        label: prop_types_1.default.string
    })),
    setFilterSelectedValue: prop_types_1.default.func
};
/**
 * CarouselHeaderSlot component
 *
 * @param {object} props - React props.
 * @param {boolean} props.showControls - Determines whether navigation controls are displayed in the header.
 * @param {boolean} [props.showLabels] - If true, displays labels for navigation or slots.
 * @param {string} props.dangerousHed - The title of the carousel header.
 * @param {string} props.ctaStyle - Specifies the style of the Call-To-Action (CTA). Possible values: 'text', 'button', etc.
 * @param {Function} props.ctaClickHandler - Callback function triggered when the header CTA is clicked.
 * @param {string} props.contentAlign - Specifies the alignment of the header title. Possible values: 'left', 'center', 'right'.
 * @param {boolean} props.hasDividerBelowHeader - If true, displays a bottom divider below the header.
 * @param {string} [props.headerCTALabel] - Label for the header Call-To-Action (CTA), if present.
 * @param {number} props.currentSlot - The current slot or page index being displayed in the carousel.
 * @param {Array} props.groups - Array of filter groups available in the carousel.
 * @param {string} props.filterSelectedValue - The currently selected filter value.
 * @param {number} props.totalSlots - The total number of slots or pages in the carousel.
 * @param {Function} props.onBackClick - Callback function triggered when the back navigation control is clicked.
 * @param {Function} props.onForwardClick - Callback function triggered when the forward navigation control is clicked.
 * @param {boolean} props.isScrollEnd - If true, indicates that the carousel is scrolled to the end.
 * @param {boolean} props.isScrollStart - If true, indicates that the carousel is scrolled to the beginning.
 * @param {boolean} [props.hasFilters] - If true, enables filter functionality and displays filters in the header.
 * @param {Function} props.setFilterSelectedValue - Callback function to update the selected filter value.
 */
const CarouselHeaderSlot = ({ showControls, showLabels = true, dangerousHed, ctaStyle, ctaClickHandler, contentAlign, hasDividerBelowHeader, headerCTALabel, currentSlot, groups, filterSelectedValue, sectionTitleVariation, totalSlots, onBackClick, onForwardClick, isScrollEnd, isScrollStart, hasFilters = false, setFilterSelectedValue, dangerousDek, shouldDisplayDangerousDek, fullPageTheme, hasBorderTop, hasBorderBottom }) => {
    // if no contents in header it will not render header slot component
    if (!showControls &&
        !dangerousHed &&
        !headerCTALabel &&
        !shouldDisplayDangerousDek &&
        !hasFilters)
        return null;
    const hasOnlyTitle = !headerCTALabel &&
        !hasFilters &&
        !(shouldDisplayDangerousDek && dangerousDek?.trim());
    // Navigation control props
    const navControlProps = {
        onBackClick,
        onForwardClick,
        showLabels,
        isScrollStart,
        isScrollEnd,
        currentSlot,
        totalSlots,
        hasFilters,
        hasOnlyTitle,
        fullPageTheme
    };
    const renderNavigationControls = () => showControls && react_1.default.createElement(NavigationControls, { ...navControlProps });
    const SectionTitleComponent = SectionTitle_1.default[sectionTitleVariation] || SectionTitle_1.default;
    return (react_1.default.createElement(styles_1.CarouselHeaderWrapper, { hasTitle: !!dangerousHed, headerCTALabel: headerCTALabel, hasFilters: hasFilters, hasDividerBelowHeader: hasDividerBelowHeader, contentAlign: contentAlign },
        dangerousHed && (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement(styles_1.HeaderSectionTitleWrapper, null,
                react_1.default.createElement(styles_1.HeaderSectionTitle, { contentAlign: contentAlign },
                    react_1.default.createElement(SectionTitleComponent, { dangerousHed: dangerousHed, textAlign: contentAlign, fullPageTheme: fullPageTheme, hasDividerAbove: hasBorderTop, hasDividerBelow: hasBorderBottom }))),
            hasDividerBelowHeader && dangerousHed && (react_1.default.createElement(styles_1.CarouselHeaderDivider, { shouldUseCustomColorToken: true, hasDek: dangerousDek })))),
        (headerCTALabel || dangerousDek) && (react_1.default.createElement(HeaderCTA, { label: headerCTALabel, ctaStyle: ctaStyle, onClickHandler: ctaClickHandler, showControls: showControls === true ? true : undefined, navControlProps: navControlProps, dekProps: {
                dangerousDek,
                shouldDisplayDangerousDek,
                contentAlign
            } })),
        hasFilters && (react_1.default.createElement(Filters, { groups: groups, filterSelectedValue: filterSelectedValue, setFilterSelectedValue: setFilterSelectedValue, showControls: showControls === true ? true : undefined, navControlProps: navControlProps, contentAlign: contentAlign, fullPageTheme: fullPageTheme })),
        renderNavigationControls()));
};
CarouselHeaderSlot.propTypes = {
    contentAlign: prop_types_1.default.oneOf(['left', 'center']),
    ctaClickHandler: prop_types_1.default.func,
    ctaStyle: prop_types_1.default.string,
    currentSlot: prop_types_1.default.number,
    dangerousDek: prop_types_1.default.string,
    dangerousHed: prop_types_1.default.string,
    filterSelectedValue: prop_types_1.default.string,
    fullPageTheme: prop_types_1.default.string,
    groups: prop_types_1.default.array,
    hasBorderBottom: prop_types_1.default.bool,
    hasBorderTop: prop_types_1.default.bool,
    hasDividerBelowHeader: prop_types_1.default.bool,
    hasFilters: prop_types_1.default.bool,
    headerCTALabel: prop_types_1.default.string,
    isScrollEnd: prop_types_1.default.bool,
    isScrollStart: prop_types_1.default.bool,
    onBackClick: prop_types_1.default.func,
    onForwardClick: prop_types_1.default.func,
    sectionTitleVariation: prop_types_1.default.string,
    setFilterSelectedValue: prop_types_1.default.func,
    shouldDisplayDangerousDek: prop_types_1.default.bool,
    showControls: prop_types_1.default.bool,
    showLabels: prop_types_1.default.bool,
    totalSlots: prop_types_1.default.number
};
exports["default"] = CarouselHeaderSlot;
//# sourceMappingURL=DynamicCarouselHeader.js.map

/***/ }),

/***/ 54354:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const prop_types_1 = __importDefault(__webpack_require__(5556));
const react_1 = __importStar(__webpack_require__(96540));
const styles_1 = __webpack_require__(72662);
const screen_1 = __webpack_require__(55030);
const tracking_1 = __webpack_require__(99785);
/**
 * CarouselItem component
 *
 * @param {object} props - React props.
 * @param {ReactNode} props.children - The content to be displayed inside the carousel item.
 * @param {string} [props.itemsDensity] - Specifies the density of items in the carousel. Possible values: 'default', 'min', etc.
 * @param {boolean} [props.showSlideshow] - If true, the carousel operates in slideshow mode, affecting item rendering and behavior.
 */
const CarouselItem = ({ children, itemsDensity = 'default', showSlideshow = false, trackingEventData = {} }) => {
    const resolvedTrackingEventData = {
        snowplowNavEventSubject: undefined,
        itemIndex: 0,
        placement: 'mid-content',
        totalItems: undefined,
        carouselName: undefined,
        subject_version: 'default',
        ...trackingEventData
    };
    const { snowplowNavEventSubject, itemIndex, placement, totalItems, carouselName, label, subject_version } = resolvedTrackingEventData;
    // Below is used for tracking carousel impression of a carousel item
    (0, screen_1.useViewportObserver)(`.carousel_item-${children?.props?.copilotID || children?.props?.contentId}`, undefined, (isInViewport) => {
        if (isInViewport) {
            (0, tracking_1.trackCarouselItemImpressionEvent)({
                itemIndex,
                snowplowNavEventSubject,
                content: children?.props,
                placement,
                totalItems,
                carouselName,
                label,
                subject_version
            });
        }
    });
    if (react_1.Children.count(children) === 0)
        return null;
    const handleClick = () => {
        (0, tracking_1.trackCarouselItemClickEvent)({
            itemIndex,
            snowplowNavEventSubject,
            content: children?.props,
            placement,
            totalItems,
            carouselName,
            label,
            subject_version
        });
    };
    return (react_1.default.createElement(styles_1.CarouselListItem, { itemsDensity: itemsDensity, showSlideshow: showSlideshow, "data-testid": "carousel-list-item", onClickCapture: handleClick, className: `carousel_item-${children?.props?.copilotID || children?.props?.contentId}` }, children));
};
CarouselItem.displayName = 'CarouselItem';
CarouselItem.propTypes = {
    children: prop_types_1.default.node.isRequired,
    itemsDensity: prop_types_1.default.oneOf(['default', 'min']),
    showSlideshow: prop_types_1.default.bool,
    trackingEventData: prop_types_1.default.object
};
exports["default"] = CarouselItem;
//# sourceMappingURL=DynamicCarouselItem.js.map

/***/ }),

/***/ 70632:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const react_1 = __webpack_require__(96540);
const debounce_1 = __importDefault(__webpack_require__(38221));
const utils_1 = __webpack_require__(55659);
const useViewport = (updateDimensions) => {
    const [viewportType, setViewportType] = (0, react_1.useState)(() => {
        if ((0, utils_1.isMobileViewport)())
            return utils_1.VIEWPORT_TYPE_MOBILE;
        if ((0, utils_1.isTabletViewport)())
            return utils_1.VIEWPORT_TYPE_TABLET;
        return utils_1.VIEWPORT_TYPE_DESKTOP;
    });
    const getViewportType = (0, react_1.useCallback)(() => {
        if ((0, utils_1.isMobileViewport)())
            return utils_1.VIEWPORT_TYPE_MOBILE;
        if ((0, utils_1.isTabletViewport)())
            return utils_1.VIEWPORT_TYPE_TABLET;
        return utils_1.VIEWPORT_TYPE_DESKTOP;
    }, []);
    const updateViewportType = (0, react_1.useCallback)(() => {
        const newViewportType = getViewportType();
        setViewportType((prevType) => prevType !== newViewportType ? newViewportType : prevType);
        updateDimensions();
    }, [getViewportType, updateDimensions]);
    (0, react_1.useEffect)(() => {
        const debouncedUpdateViewportType = (0, debounce_1.default)(updateViewportType, 200);
        updateViewportType();
        window.addEventListener('resize', debouncedUpdateViewportType);
        return () => {
            window.removeEventListener('resize', debouncedUpdateViewportType);
            debouncedUpdateViewportType.cancel();
        };
    }, [updateViewportType]);
    return viewportType;
};
exports["default"] = useViewport;
//# sourceMappingURL=useViewport.js.map

/***/ }),

/***/ 72662:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CarouselHeaderDivider = exports.HeaderSectionTitle = exports.CarouselListWrapper = exports.CarouselListItem = exports.FooterCTAButton = exports.HeaderCTAButton = exports.NavCTAWrapper = exports.ForwardButton = exports.BackButton = exports.FilterNavWrapper = exports.CarouselDot = exports.CarouselList = exports.NavPaginationWrapper = exports.CarouselDek = exports.PaginationDotsWrapper = exports.FooterNavigationWrapper = exports.CarouselFooterWrapper = exports.CarouselNavigationWrapper = exports.HeaderSectionTitleWrapper = exports.CarouselHeaderWrapper = exports.CarouselContainer = void 0;
const styled_components_1 = __importDefault(__webpack_require__(92168));
const base_1 = __webpack_require__(76955);
const utils_1 = __webpack_require__(26865);
const button_1 = __importDefault(__webpack_require__(73730));
const Dot_1 = __importDefault(__webpack_require__(60261));
const constants_1 = __webpack_require__(96472);
const styles_1 = __webpack_require__(14952);
const utils_2 = __webpack_require__(55659);
const breakpoints_1 = __webpack_require__(99906);
const summary_dek_1 = __importDefault(__webpack_require__(49989));
const styles_2 = __webpack_require__(95015);
const styles_3 = __webpack_require__(18161);
const styles_4 = __webpack_require__(33500);
const applyInvertedTheme = ({ fullPageTheme, theme }) => {
    if (fullPageTheme === 'inverted') {
        return `
      &[aria-checked='false'] {
        &:hover{
          ${(0, utils_1.getColorStyles)(theme, 'background-color', 'colors.interactive.base.white')};
          ${(0, utils_1.getColorStyles)(theme, 'color', 'colors.interactive.base.black')};
        };
        background-color: rgba(256, 256, 256, 0.2);
        ${(0, utils_1.getColorStyles)(theme, 'color', 'colors.interactive.base.white')};
      }

      &[aria-checked='true'] {
        ${(0, utils_1.getColorStyles)(theme, 'background-color', 'colors.interactive.base.white')};
        ${(0, utils_1.getColorStyles)(theme, 'color', 'colors.interactive.base.black')};
      }

      &:hover,
      &:focus {
        box-shadow: none;
      }
    `;
    }
    return ``;
};
const CarouselContainer = styled_components_1.default.section.withConfig({
    displayName: 'CarouselContainer'
}) `
  position: relative;
  margin: ${(0, utils_1.calculateSpacing)(4)} 0;

  .carousel_dek {
    margin: ${(0, utils_1.calculateSpacing)(3)} 0;
  }
`;
exports.CarouselContainer = CarouselContainer;
const CarouselDek = (0, styled_components_1.default)(summary_dek_1.default).withConfig({
    displayName: 'CarouselDek'
}) ``;
exports.CarouselDek = CarouselDek;
const CarouselHeaderWrapper = styled_components_1.default.header.withConfig({
    displayName: 'CarouselHeaderWrapper'
}) `
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  margin-bottom: ${(0, utils_1.calculateSpacing)(3)};
  gap: ${(0, utils_1.calculateSpacing)(3)};
  width: 100%;
  ${({ headerCTALabel, hasFilters }) => (headerCTALabel || hasFilters) &&
    `flex-direction: column;
  `}
  ${styles_4.SectionTitleDivider} {
    margin-bottom: 0;
  }
`;
exports.CarouselHeaderWrapper = CarouselHeaderWrapper;
const CarouselNavigationWrapper = styled_components_1.default.div.withConfig({
    displayName: 'CarouselNavigationWrapper'
}) `
  display: flex;
  position: absolute;
  right: 0;
  bottom: 0;
  align-items: center;
  margin-left: auto;
  padding: 0;

  ${({ hasOnlyTitle }) => hasOnlyTitle &&
    `
     top: 50%;
    transform: translateY(-50%);
  `}

  & span {
    color: ${({ theme, fullPageTheme }) => {
    if (fullPageTheme === 'inverted') {
        return `
            ${(0, utils_1.getColorToken)(theme, 'colors.consumption.body.inverted.body-deemphasized')}
          `;
    }
    return `
          ${(0, utils_1.getColorToken)(theme, 'colors.consumption.body.standard.body-deemphasized')}
        `;
}};
    font-size: 14px;
  }

  ${({ showLabels }) => (!showLabels ? `gap: 16px;` : `gap: 8px;`)}

  @media (max-width: 480px) {
    display: none;
  }
`;
exports.CarouselNavigationWrapper = CarouselNavigationWrapper;
const FilterNavWrapper = styled_components_1.default.div.withConfig({
    displayName: 'FilterNavWrapper'
}) `
  display: flex;
  align-items: start;
  justify-content: space-between;
  width: 100%;
  ${styles_1.ToggleChipListWrapper} {
    overflow-x: auto;
    align-items: start;
    width: 100%;

    ${styles_1.ListWrapper} {
      flex-wrap: wrap;
      padding: 0;
      gap: 12px;
      max-width: 75%;

      ${({ contentAlign }) => contentAlign === 'center' &&
    `align-self: center;
      justify-content: center;`}

      @media (max-width: ${breakpoints_1.maxThresholds.md}px) {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: fit-content;
        max-width: 100%;
      }
    }

    ${styles_1.ListItemWrapper} {
      margin: 0;
      @media (max-width: ${breakpoints_1.maxThresholds.md}px) {
        :first-child {
          margin-left: calc(2 * var(--grid-margin));
        }

        :last-child {
          margin-right: calc(2 * var(--grid-margin));
        }
      }
    }

    &::after {
      margin-top: 0;
      width: 1.5rem;
      height: fill-available;
      ${({ fullPageTheme }) => fullPageTheme === 'inverted' &&
    `
      background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 75%);`}
    }
    ${styles_3.ToggleButton} {
      ${applyInvertedTheme}
    }
  }
`;
exports.FilterNavWrapper = FilterNavWrapper;
const NavCTAWrapper = styled_components_1.default.div.withConfig({
    displayName: 'NavCTAWrapper'
}) `
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: ${(0, utils_1.calculateSpacing)(3)};
  width: 100%;

  ${({ hasFilters }) => hasFilters && `justify-content: center;`}
  ${(0, utils_1.maxScreen)(constants_1.BREAKPOINTS.md)} {
    justify-content: center;
  }

  && {
    ${styles_2.SummaryDekDefault} {
      margin: 0;
      padding: 0;
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
        max-width: 900px;
      }
      @media only screen and (min-width: 1025px) {
        max-width: 1100px;
      }
      @media only screen and (min-width: 1280px) {
        max-width: 1400px;
      }
      ${({ contentAlign }) => contentAlign === 'left'
    ? `align-self: self-start;`
    : `align-self: center;`}

      ${({ contentAlign }) => contentAlign === 'center' &&
    `
        max-width: 900px;
        ${(0, utils_1.maxScreen)(constants_1.BREAKPOINTS.lg)} {
          max-width: 700px;
        } 
        ${(0, utils_1.maxScreen)(constants_1.BREAKPOINTS.md)} {
          max-width: 500px;
        } 
      `}
    }
  }
`;
exports.NavCTAWrapper = NavCTAWrapper;
const HeaderSectionTitleWrapper = styled_components_1.default.div.withConfig({
    displayName: 'HeaderSectionTitleWrapper'
}) `
  position: relative;
  width: 100%;
`;
exports.HeaderSectionTitleWrapper = HeaderSectionTitleWrapper;
const CarouselFooterWrapper = styled_components_1.default.footer.withConfig({
    displayName: 'CarouselFooterWrapper'
}) `
  display: flex;
  ${({ hasPagination, footerCTALabel }) => hasPagination && !footerCTALabel
    ? `flex-direction: row;`
    : `flex-direction: column;`}
  align-items: center;
  justify-content: flex-end;
  margin: ${(0, utils_1.calculateSpacing)(3)} 0;
  gap: ${(0, utils_1.calculateSpacing)(3)};
`;
exports.CarouselFooterWrapper = CarouselFooterWrapper;
const PaginationDotsWrapper = styled_components_1.default.div.withConfig({
    displayName: 'PaginationDotsWrapper'
}) `
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
`;
exports.PaginationDotsWrapper = PaginationDotsWrapper;
const FooterNavigationWrapper = styled_components_1.default.div.withConfig({
    displayName: 'FooterNavigationWrapper'
}) `
  display: flex;
  align-items: center;
  ${({ showLabels }) => (!showLabels ? `gap: 16px;` : `gap: 8px;`)}
  ${({ hasPagination }) => hasPagination &&
    `
    position: absolute;
    margin-right: ${(0, utils_1.calculateSpacing)(3)};
  `}
   ${({ shouldRightAlignFooterControls }) => shouldRightAlignFooterControls && `align-self: self-end;`}

  & span {
    color: ${({ theme, fullPageTheme }) => {
    if (fullPageTheme === 'inverted') {
        return `
            ${(0, utils_1.getColorToken)(theme, 'colors.consumption.body.inverted.body-deemphasized')};
          `;
    }
    return `
          ${(0, utils_1.getColorToken)(theme, 'colors.consumption.body.standard.body-deemphasized')}
        `;
}};
    font-size: 14px;
  }
`;
exports.FooterNavigationWrapper = FooterNavigationWrapper;
const BackButton = styled_components_1.default.button.withConfig({
    displayName: 'BackButton'
}) `
  border: none;
  background: none;
  padding: 0;
  width: 24px;
  height: 24px;

  svg {
    path {
      stroke: ${({ theme, fullPageTheme }) => {
    if (fullPageTheme === 'inverted') {
        return `
            ${(0, utils_1.getColorToken)(theme, 'colors.interactive.base.white')};
          `;
    }
    return `
          ${(0, utils_1.getColorToken)(theme, 'colors.interactive.base.black')}
        `;
}};
    }
    opacity: ${({ isDisabled }) => (isDisabled ? '0.2' : '1')};
    width: initial;
    height: initial;
  }

  ${({ isDisabled }) => isDisabled ? 'pointer-events: none;' : 'cursor: pointer;'};
`;
exports.BackButton = BackButton;
const ForwardButton = styled_components_1.default.button.withConfig({
    displayName: 'ForwardButton'
}) `
  border: none;
  background: none;
  padding: 0;
  width: 24px;
  height: 24px;

  svg {
    path {
      fill: ${({ theme, fullPageTheme }) => {
    if (fullPageTheme === 'inverted') {
        return `
            ${(0, utils_1.getColorToken)(theme, 'colors.interactive.base.white')};
          `;
    }
    return `
          ${(0, utils_1.getColorToken)(theme, 'colors.interactive.base.black')}
        `;
}};
    }
    opacity: ${({ isDisabled }) => (isDisabled ? '0.2' : '1')};
    width: initial;
    height: initial;
  }
  ${({ isDisabled }) => isDisabled ? 'pointer-events: none;' : 'cursor: pointer;'};
`;
exports.ForwardButton = ForwardButton;
const NavPaginationWrapper = (0, styled_components_1.default)(base_1.BaseText).withConfig({
    displayName: 'NavPaginationWrapper'
}) `
  display: inline-block;
  text-align: center;

  p {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;

    span {
      display: inline-block;
      width: 20px;
      text-align: center;
    }
  }

  p,
  span {
    color: ${({ theme, fullPageTheme }) => {
    if (fullPageTheme === 'inverted') {
        return `
            ${(0, utils_1.getColorToken)(theme, 'colors.consumption.body.inverted.body-deemphasized')};
          `;
    }
    return `
          ${(0, utils_1.getColorToken)(theme, 'colors.consumption.body.standard.body-deemphasized')}
        `;
}};
  }
`;
exports.NavPaginationWrapper = NavPaginationWrapper;
NavPaginationWrapper.defaultProps = {
    as: 'span',
    colorToken: 'colors.consumption.body.standard.body-deemphasized',
    typeIdentity: 'typography.definitions.globalEditorial.numerical-small'
};
const FooterCTAButton = (0, styled_components_1.default)(button_1.default.Primary).withConfig({
    displayName: 'FooterCTAButton'
}) ``;
exports.FooterCTAButton = FooterCTAButton;
const CarouselListWrapper = styled_components_1.default.div.withConfig({
    displayName: 'CarouselListWrapper'
}) `
  position: relative;
  padding: 0;
  width: 100%;
`;
exports.CarouselListWrapper = CarouselListWrapper;
const HeaderCTAButton = (0, styled_components_1.default)(button_1.default.Primary).withConfig({
    displayName: 'HeaderCTAButton'
}) ``;
exports.HeaderCTAButton = HeaderCTAButton;
const CarouselList = styled_components_1.default.ul.withConfig({ displayName: 'CarouselList' }) `
  display: flex;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;

  gap: ${(0, utils_1.calculateSpacing)(2)};
  @media only screen and (max-width: 767px) {
    gap: ${(0, utils_1.calculateSpacing)(1)};
  }

  scroll-padding-left: ${(0, utils_1.calculateSpacing)(2)};
  scroll-padding-right: ${(0, utils_1.calculateSpacing)(2)};
  @media only screen and (max-width: 767px) {
    scroll-padding-left: ${(0, utils_1.calculateSpacing)(1)};
    scroll-padding-right: ${(0, utils_1.calculateSpacing)(1)};
  }

  @media (min-width: ${constants_1.BREAKPOINTS.md}) {
    ${({ shouldAlignItemsAtCenter }) => shouldAlignItemsAtCenter && `justify-content: center;`}
  }

  ${({ hideScrollbar }) => hideScrollbar &&
    `
  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none;
  scrollbar-width: none; 
  `}

  ::-webkit-scrollbar {
    background: ${(0, utils_1.getColorToken)('colors.interactive.base.light')};
    height: 4px;
  }

  ::-webkit-scrollbar-thumb:horizontal {
    border-radius: 10px;
    background: ${({ theme, fullPageTheme }) => {
    if (fullPageTheme === 'inverted') {
        return `
            ${(0, utils_1.getColorToken)(theme, 'colors.interactive.base.white')};
          `;
    }
    return `
         ${(0, utils_1.getColorToken)(theme, 'colors.interactive.base.black')};
        `;
}};
  }

  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;

  & > div {
    display: flex;
    min-width: 100vw;
    scroll-snap-align: start;
  }
`;
exports.CarouselList = CarouselList;
const CarouselListItem = styled_components_1.default.li.withConfig({
    displayName: 'CarouselListItem'
}) `
  flex-shrink: 0;
  align-self: stretch;

  /* Mobile */
  @media only screen and (max-width: 767px) {
    width: 90%;
    ${({ itemsDensity }) => itemsDensity === 'min' && `width: 42%;`}
  }

  /* Tablet */
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    width: 45%;
    ${({ itemsDensity }) => itemsDensity === 'min' && `width: 30%;`}
  }

  /* Laptop and Desktop */
  @media only screen and (min-width: 1025px) {
    width: 30%;
    ${({ itemsDensity }) => itemsDensity === 'min' && `width: 22%;`}
  }

  ${({ showSlideshow }) => showSlideshow &&
    `
    &&{
      @media only screen and (max-width: 767px){
        width: 90%;
      }
      @media only screen and (min-width: 768px) and (max-width: 1024px) {
         width: 95%;
      }
      @media only screen and (min-width: 1025px){
        width: 95%;
      }
    }
  `}
  scroll-snap-align: start;
`;
exports.CarouselListItem = CarouselListItem;
const CarouselDot = (0, styled_components_1.default)(Dot_1.default).withConfig({ displayName: 'CarouselDot' }) `
  ${utils_2.getDotFill};
  ${({ isPaginationClickable }) => isPaginationClickable && `cursor: pointer;`}
`;
exports.CarouselDot = CarouselDot;
const HeaderSectionTitle = styled_components_1.default.div.withConfig({
    displayName: 'HeaderSectionTitle'
}) `
  ${styles_4.SectionTitleRoot} {
    @media (min-width: 768px) {
      ${({ contentAlign }) => contentAlign === 'center'
    ? `
        padding-left: 68px;
        padding-right: 68px;
      `
    : `padding-right: 68px;`}
    }

    @media (min-width: 1024px) {
      ${({ contentAlign }) => contentAlign === 'center'
    ? `
        padding-left: 120px;
        padding-right: 120px;
      `
    : `padding-right: 120px;`}
    }
  }

  ${styles_4.SectionTitleHed} {
    ${({ textAlign }) => textAlign === 'center' &&
    `
    width: 80%;
     @media only screen and (min-width: 768px) and (max-width: 1024px) {
      width: 75%;
     }
    `}
  }
`;
exports.HeaderSectionTitle = HeaderSectionTitle;
const CarouselHeaderDivider = styled_components_1.default.div.withConfig({
    displayName: 'CarouselHeaderDivider'
}) `
  grid-column: 1 / -1;
  border-bottom-width: ${(0, utils_1.calculateSpacing)(0.25, 'px')};
  border-bottom-style: solid;
  ${({ shouldUseCustomColorToken, theme }) => shouldUseCustomColorToken
    ? `border-bottom-color: ${(0, utils_1.getColorToken)(theme, 'colors.discovery.body.white.context-signature')};`
    : `border-bottom-color: ${(0, utils_1.getColorToken)(theme, 'colors.consumption.lead.standard.accent')};`};
  width: ${(0, utils_1.calculateSpacing)(12.5, 'px')};
`;
exports.CarouselHeaderDivider = CarouselHeaderDivider;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 99785:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.trackCarouselItemClickEvent = exports.trackCarouselItemImpressionEvent = exports.trackControlClickEvent = exports.trackingCarouselImpressionEvent = exports.trackRightControlClick = exports.trackLeftControlClick = exports.trackCarouselSwipe = void 0;
const snowplow_tracking_1 = __webpack_require__(14307);
const hasDataLayer =  true && window.dataLayer;
const trackCarouselSwipe = () => {
    if (hasDataLayer) {
        window.dataLayer.push({ event: 'carousel-swipe' });
    }
};
exports.trackCarouselSwipe = trackCarouselSwipe;
const trackLeftControlClick = () => {
    if (hasDataLayer) {
        window.dataLayer.push({
            event: 'carousel-left-arrow-click'
        });
    }
};
exports.trackLeftControlClick = trackLeftControlClick;
const trackRightControlClick = () => {
    if (hasDataLayer) {
        window.dataLayer.push({
            event: 'carousel-right-arrow-click'
        });
    }
};
exports.trackRightControlClick = trackRightControlClick;
const trackingCarouselImpressionEvent = (props) => {
    const { dangerousHed } = props;
    if (hasDataLayer) {
        window.dataLayer.push({
            event: 'carousel-impression',
            'carousel-name': dangerousHed
        });
    }
};
exports.trackingCarouselImpressionEvent = trackingCarouselImpressionEvent;
const trackControlClickEvent = (props) => {
    const { direction, dangerousHed, snowplowNavEventSubject, totalChildren } = props;
    const eventData = {
        type: direction,
        label: dangerousHed,
        subject: snowplowNavEventSubject || 'carousel',
        items: [],
        placement: 'mid-content',
        total_index: totalChildren
    };
    (0, snowplow_tracking_1.trackNavigationEvent)(eventData);
};
exports.trackControlClickEvent = trackControlClickEvent;
const removeHtmlTags = (inputString) => {
    return inputString.replace(/<\/?[^>]+(>|$)/g, '');
};
const trackCarouselItemImpressionEvent = (props) => {
    const { itemIndex, snowplowNavEventSubject, content, placement, totalItems, label, subject_version } = props;
    const eventData = {
        type: 'impression',
        index: itemIndex,
        label: removeHtmlTags(label) || removeHtmlTags(content?.dangerousHed),
        subject: snowplowNavEventSubject || 'carousel',
        items: [
            {
                content_id: content?.copilotID || content?.contentId,
                content_title: removeHtmlTags(content?.dangerousHed),
                content_type: content?.contentType,
                content_url: content?.url?.startsWith('/')
                    ? `${window.location.origin}${content.url}`
                    : content?.url
            }
        ],
        ...((0, snowplow_tracking_1.extractStrategyFromURL)(content?.url) && {
            strategy: (0, snowplow_tracking_1.extractStrategyFromURL)(content?.url)
        }),
        placement: placement || 'mid-content',
        total_index: totalItems,
        subject_version: subject_version || 'default'
    };
    if (label === 'Visual Story') {
        delete eventData.strategy;
    }
    (0, snowplow_tracking_1.trackNavigationEvent)(eventData);
};
exports.trackCarouselItemImpressionEvent = trackCarouselItemImpressionEvent;
const trackCarouselItemClickEvent = (props) => {
    const { itemIndex, snowplowNavEventSubject, content, placement, totalItems, carouselName, label, subject_version } = props;
    const eventData = {
        type: 'click',
        index: itemIndex,
        label: removeHtmlTags(label) || removeHtmlTags(content?.dangerousHed),
        subject: snowplowNavEventSubject || 'carousel',
        items: [
            {
                content_id: content?.copilotID || content?.contentId,
                content_title: removeHtmlTags(content?.dangerousHed),
                content_type: content?.contentType,
                content_url: content?.url?.startsWith('/')
                    ? `${window.location.origin}${content.url}`
                    : content?.url
            }
        ],
        ...((0, snowplow_tracking_1.extractStrategyFromURL)(content?.url) && {
            strategy: (0, snowplow_tracking_1.extractStrategyFromURL)(content?.url)
        }),
        placement: placement || 'mid-content',
        total_index: totalItems,
        subject_version: subject_version || 'default'
    };
    (0, snowplow_tracking_1.trackNavigationEvent)(eventData);
    if (hasDataLayer) {
        window.dataLayer.push({
            event: 'carousel-click',
            'carousel-name': carouselName,
            'carousel-click-position': itemIndex,
            'carousel-click-text': content?.dangerousHed
        });
    }
};
exports.trackCarouselItemClickEvent = trackCarouselItemClickEvent;
//# sourceMappingURL=tracking.js.map

/***/ }),

/***/ 55659:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.VIEWPORT_TYPE_TABLET = exports.VIEWPORT_TYPE_DESKTOP = exports.VIEWPORT_TYPE_MOBILE = exports.getItemsPerSlot = exports.handleScrollClick = exports.getNavigationPlacement = exports.getDotFill = exports.scrollRound = exports.isTabletViewport = exports.isMobileViewport = exports.isScrollAtStart = exports.isScrollAtEnd = exports.getItemWidth = void 0;
const utils_1 = __webpack_require__(26865);
const constants_1 = __webpack_require__(96472);
const mapBreakpoints = (breakpointObj, callback) => {
    return Object.keys(breakpointObj)
        .filter((key) => {
        return Object.hasOwnProperty.call(constants_1.BREAKPOINTS_RANGE, key);
    })
        .map((key, index) => {
        const cssValue = callback(key, breakpointObj[key], index);
        return `
      @media (min-width: ${constants_1.BREAKPOINTS_RANGE[key][0]}) {
        ${cssValue}
      }
     `;
    });
};
const getItemWidth = ({ itemWidth }) => {
    if (typeof itemWidth === 'string')
        return `width: ${itemWidth};`;
    return mapBreakpoints(itemWidth, (_, value) => {
        return getItemWidth({ itemWidth: value });
    }).join('\n');
};
exports.getItemWidth = getItemWidth;
const isScrollAtEnd = (element) => {
    const tolerance = 1;
    return (Math.ceil(element.scrollLeft + element.offsetWidth + tolerance) >=
        element.scrollWidth);
};
exports.isScrollAtEnd = isScrollAtEnd;
const isScrollAtStart = (element) => {
    return element.scrollLeft === 0;
};
exports.isScrollAtStart = isScrollAtStart;
const isViewportMatching = (query) => {
    if ( true && window.matchMedia) {
        return window.matchMedia(query).matches;
    }
    return false; // Default for server-side or non-browser environments
};
const isMobileViewport = () => isViewportMatching('(max-width: 767px)');
exports.isMobileViewport = isMobileViewport;
const isTabletViewport = () => isViewportMatching('(min-width: 768px) and (max-width: 1024px)');
exports.isTabletViewport = isTabletViewport;
const getNavigationPlacement = ({ isMobile, position, showControls }) => {
    let controlPosition;
    if (isMobile) {
        controlPosition = 'bottom';
    }
    else if (position === 'header') {
        controlPosition = 'top';
    }
    else {
        controlPosition = 'bottom';
    }
    return {
        showNavControlsAtTop: showControls && controlPosition === 'top',
        showNavControlsAtBottom: showControls && controlPosition === 'bottom'
    };
};
exports.getNavigationPlacement = getNavigationPlacement;
const scrollRound = (scrollvalue) => {
    if (scrollvalue % 1 < 0.5) {
        return Math.trunc(scrollvalue);
    }
    return Math.ceil(scrollvalue);
};
exports.scrollRound = scrollRound;
const getDotFill = ({ isSelected, theme, fullPageTheme }) => {
    const hasInvertedTheme = theme.palette === 'inverted' || fullPageTheme === 'inverted';
    if (isSelected) {
        return hasInvertedTheme
            ? (0, utils_1.getColorStyles)(theme, 'fill', 'colors.interactive.base.white')
            : (0, utils_1.getColorStyles)(theme, 'fill', 'colors.interactive.base.black');
    }
    return hasInvertedTheme
        ? (0, utils_1.getColorStyles)(theme, 'fill', 'colors.interactive.base.dark')
        : (0, utils_1.getColorStyles)(theme, 'fill', 'colors.interactive.base.light');
};
exports.getDotFill = getDotFill;
const VIEWPORT_TYPE_MOBILE = 'mobile';
exports.VIEWPORT_TYPE_MOBILE = VIEWPORT_TYPE_MOBILE;
const VIEWPORT_TYPE_TABLET = 'tablet';
exports.VIEWPORT_TYPE_TABLET = VIEWPORT_TYPE_TABLET;
const VIEWPORT_TYPE_DESKTOP = 'desktop';
exports.VIEWPORT_TYPE_DESKTOP = VIEWPORT_TYPE_DESKTOP;
const handleScrollClick = (listRef, carouselScrollType, totalChildren, visibleItems, isScrollEnd, direction, showSlideshow, dotIndex = null) => {
    const listEl = listRef?.current;
    if (!listEl)
        return;
    const itemWidth = listRef.current?.children[0]?.offsetWidth || 0;
    const currentScrollLeft = listEl.scrollLeft;
    // If a dotIndex is provided, calculate direct scroll position
    if (dotIndex !== null) {
        const slotWidth = !showSlideshow ? itemWidth * visibleItems : itemWidth;
        const scrollAmount = slotWidth * (dotIndex - 1);
        listEl.scrollTo({
            left: scrollAmount,
            behavior: 'smooth'
        });
        return;
    }
    const lastRemChildren = totalChildren % visibleItems;
    let scrollAmount = carouselScrollType === 'one-by-one' || showSlideshow
        ? itemWidth
        : itemWidth * visibleItems;
    if (direction === 'back' &&
        isScrollEnd &&
        carouselScrollType !== 'one-by-one' &&
        lastRemChildren > 0) {
        scrollAmount = itemWidth * lastRemChildren;
    }
    const newScrollLeft = direction === 'back'
        ? currentScrollLeft - scrollAmount
        : currentScrollLeft + scrollAmount;
    listEl.scrollTo({
        left: newScrollLeft,
        behavior: 'smooth'
    });
};
exports.handleScrollClick = handleScrollClick;
const getItemsPerSlot = (isMobile, isTablet, itemsDensity) => {
    if (isMobile) {
        return itemsDensity !== 'min' ? 1 : 2;
    }
    else if (isTablet) {
        return itemsDensity !== 'min' ? 2 : 3;
    }
    return itemsDensity !== 'min' ? 3 : 4;
};
exports.getItemsPerSlot = getItemsPerSlot;
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 73723:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState, useEffect, useCallback } = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const { connector } = __webpack_require__(57744);
const ResponsiveAsset = __webpack_require__(73275);
const CloseIcon = __webpack_require__(76399);
const { getformatedDate, isOutdated, calculateTime } = __webpack_require__(29228);
const EventCountdown = (__webpack_require__(72422)/* ["default"] */ .A);
const translations = (__webpack_require__(73725)/* ["default"] */ .A);
const { componentTracking } = __webpack_require__(90090);
const { TrackComponentChannel } = __webpack_require__(78788);
const PostCountdownComponent = __webpack_require__(43892);
const SponsoredComponent = __webpack_require__(42170);
const { EventBannerWrapper, EventBannerGrid, EventBannerDek, Logo, EventBannerLogoWrapper, EventBannerLogoContainer, EventBannerCloseButton } = __webpack_require__(23211);
const { isDesktopBrowser } = __webpack_require__(72362);
/**
 * EventBanner
 *
 * @param {object} props - React props
 * @param {number} props.bannerExpiryTimeStamp - Expiry date of banner
 * @param {number} props.bannerStartTimeStamp - timestamp when the banner should be online
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.cls] - Optional cls config to reduce cls score
 * @param {Array<string>} props.eventBannerTags - Array of tags for the EventBanner
 * @param {number} props.eventTimeStamp - Countdown time
 * @param {boolean} props.hasHiddenEventTimestamp - optional prop for hiding timestamp
 * @param {boolean} props.hasLowerCaseText - optional prop for lowercase text
 * @param {string} props.locale - locale
 * @param {string} props.logo - Logo of the Banner
 * @param {string} props.logoBaseUrl - URI for the Logo
 * @param {string} props.notifyButton - Properties of Notify Button
 * @param {boolean} props.shouldEnableBundleComponentAnalytics - feature flag to append data-section-title attribute for analytics
 * @param {boolean} props.shouldHideCloseButtonDuringEvent - Flag to hide close Icon
 * @param {boolean} props.shouldShowCloseButton - Flag to show close Icon
 * @param {boolean} props.showButtonAndLogoOnTimeUp - To show button on time up
 * @param {string} props.sponsorBaseUrl - Optional url for the sponsor logo
 * @param {string} props.sponsorLogo - Sponsor logo
 * @param {string} props.timeFormat - Localises time format
 * @param {string} props.timeUpMessage - Message to show when timer
 * @param {object} props.timeUpUrl - More content url after countdown
 * @param {string} props.timeZone - Time Zone
 * @param {string} props.trackingNamespace - Tracking namespace
 * @param {object} props.url - More content url
 */
const EventBanner = ({ bannerExpiryTimeStamp, bannerStartTimeStamp, className, cls, eventBannerTags = [], eventTimeStamp, logo, logoBaseUrl = '/', pageTags, timeZone, timeFormat, hasHiddenEventTimestamp = false, hasLowerCaseText = true, showButtonAndLogoOnTimeUp = false, shouldEnableBundleComponentAnalytics, shouldShowCloseButton = false, shouldHideCloseButtonDuringEvent = false, timeUpMessage, sponsorLogo, sponsorBaseUrl, notifyButton, trackingNamespace, url, timeUpUrl, locale, hasConsistentSpacing }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'EventBanner'
        });
    }, []);
    const { formatMessage } = useIntl();
    const [eventTimeAndDateString, setEventTimeAndDateString] = useState();
    const [isEventHappening, setIsEventHappening] = useState(false);
    const [hideCountdown, setHideCountdown] = useState(false);
    const [days, setDays] = useState('00');
    const [hours, setHours] = useState('00');
    const [minutes, setMinutes] = useState('00');
    const [seconds, setSeconds] = useState('00');
    const interval = 1000;
    const startTimer = useCallback((duration) => {
        if (duration > 0) {
            setIsEventHappening(false);
            const { days: d, hours: h, mins: m, secs: s } = calculateTime(duration);
            setDays(d);
            setHours(h);
            setMinutes(m);
            setSeconds(s);
        }
        else {
            setIsEventHappening(true);
        }
        return { days, hours, minutes, seconds };
    }, 
    // eslint-disable-next-line react-hooks/exhaustive-deps  -- needs these deps for the timer to run properly
    [days, hours, minutes, seconds]);
    useEffect(() => {
        const { duration, time } = getformatedDate(eventTimeStamp, locale, timeZone, timeFormat);
        setEventTimeAndDateString(time);
        const countdownInterval = setTimeout(() => {
            startTimer(duration);
        }, interval);
        return () => clearTimeout(countdownInterval);
    }, [
        eventTimeStamp,
        locale,
        timeFormat,
        timeZone,
        startTimer,
        eventTimeAndDateString
    ]);
    const hasRequiredTags = () => {
        if (!eventBannerTags?.length) {
            // no event banner tags to check, allow banner
            return true;
        }
        const hasEventBannerTags = pageTags
            .split('|')
            .some((tag) => eventBannerTags.includes(tag));
        return !!hasEventBannerTags;
    };
    if (
    // query just one required prop 'cause otherwise if the config is missing the page will break
    !bannerExpiryTimeStamp ||
        isEventHappening === undefined ||
        hideCountdown ||
        !hasRequiredTags() ||
        isOutdated(bannerStartTimeStamp, bannerExpiryTimeStamp)) {
        return null;
    }
    const urlData = isEventHappening && timeUpUrl ? timeUpUrl : url;
    const hasCloseButton = isEventHappening && shouldHideCloseButtonDuringEvent
        ? false
        : shouldShowCloseButton;
    const handleCloseButton = () => {
        setHideCountdown(true);
    };
    const getTrackingAttributes = (msg) => {
        if (!msg || !shouldEnableBundleComponentAnalytics)
            return {};
        const analyticsDataAttribute = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, msg);
        return analyticsDataAttribute;
    };
    const analyticsDataAttribute = getTrackingAttributes(trackingNamespace);
    const trackEvent = (eventTracking) => {
        if ( true && window.dataLayer && eventTracking) {
            window.dataLayer.push({
                event: eventTracking.action,
                eventCategory: 'click tracking',
                eventAction: eventTracking.action,
                eventLabel: eventTracking.label
            });
        }
    };
    let style = {};
    if (cls && cls.isEnabled && isEventHappening) {
        style = {
            style: {
                minHeight: isDesktopBrowser()
                    ? `${cls.desktop.minHeightDuringEvent}px`
                    : `${cls.mobile.minHeightDuringEvent}px`
            }
        };
    }
    else if (cls && cls.isEnabled && !isEventHappening) {
        style = {
            style: {
                minHeight: isDesktopBrowser()
                    ? `${cls.desktop.minHeightBeforeEvent}px`
                    : `${cls.mobile.minHeightBeforeEvent}px`
            }
        };
    }
    return (React.createElement(EventBannerWrapper, { hasConsistentSpacing: hasConsistentSpacing, ...style },
        React.createElement(EventBannerCloseButton, { ButtonIcon: CloseIcon, onClickHandler: handleCloseButton, role: "button", label: formatMessage(translations.closeBanner), "aria-expanded": CloseIcon, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, trackingNamespace: `${trackingNamespace} close`, shouldShowCloseButton: hasCloseButton, isIconButton: true }),
        React.createElement(EventBannerGrid, { className: className, isEventHappening: isEventHappening, showButtonAndLogoOnTimeUp: showButtonAndLogoOnTimeUp },
            React.createElement(EventBannerLogoContainer, { ...analyticsDataAttribute },
                React.createElement(EventBannerLogoWrapper, { "data-testid": "EventBannerLogoWrapper", isNotClickable: !logoBaseUrl?.length, href: logoBaseUrl, isEventHappening: isEventHappening, showButtonAndLogoOnTimeUp: showButtonAndLogoOnTimeUp, onClick: () => trackEvent({ action: trackingNamespace, label: '' }) },
                    React.createElement(Logo, { ...logo })),
                !isEventHappening && !hasHiddenEventTimestamp && (React.createElement(EventBannerDek, { "data-testid": "EventBannerDek" }, eventTimeAndDateString))),
            isEventHappening ? (React.createElement(PostCountdownComponent, { "data-testid": "PostCountdownComponent", getTrackingAttributes: getTrackingAttributes, hasLowerCaseText: hasLowerCaseText, isEventHappening: isEventHappening, showButtonAndLogoOnTimeUp: showButtonAndLogoOnTimeUp, timeUpMessage: timeUpMessage, trackingNamespace: trackingNamespace, urlData: urlData })) : (React.createElement(EventCountdown, { "data-testid": "EventCountdown", eventDate: eventTimeStamp, hasLowerCaseText: hasLowerCaseText, days: days, hours: hours, minutes: minutes, seconds: seconds })),
            React.createElement(React.Fragment, null,
                React.createElement(SponsoredComponent, { formatMessage: formatMessage, getTrackingAttributes: getTrackingAttributes, hasLowerCaseText: hasLowerCaseText, hasHiddenEventTimestamp: hasHiddenEventTimestamp, isEventHappening: isEventHappening, notifyButton: notifyButton, showButtonAndLogoOnTimeUp: showButtonAndLogoOnTimeUp, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, sponsorLogo: sponsorLogo, sponsorBaseUrl: sponsorBaseUrl, trackingNamespace: trackingNamespace, urlData: urlData })))));
};
EventBanner.propTypes = {
    bannerExpiryTimeStamp: PropTypes.number.isRequired,
    bannerStartTimeStamp: PropTypes.number,
    className: PropTypes.string,
    cls: PropTypes.object,
    eventBannerTags: PropTypes.array,
    eventTimeStamp: PropTypes.number.isRequired,
    hasConsistentSpacing: PropTypes.bool,
    hasHiddenEventTimestamp: PropTypes.bool,
    hasLowerCaseText: PropTypes.bool,
    locale: PropTypes.string.isRequired,
    logo: PropTypes.shape(ResponsiveAsset.propTypes).isRequired,
    logoBaseUrl: PropTypes.string,
    notifyButton: PropTypes.shape({
        href: PropTypes.string,
        label: PropTypes.string
    }),
    pageTags: PropTypes.string,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldHideCloseButtonDuringEvent: PropTypes.bool,
    shouldShowCloseButton: PropTypes.bool,
    showButtonAndLogoOnTimeUp: PropTypes.bool,
    sponsorBaseUrl: PropTypes.string,
    sponsorLogo: PropTypes.shape(ResponsiveAsset.propTypes),
    timeFormat: PropTypes.string,
    timeUpMessage: PropTypes.string.isRequired,
    timeUpUrl: PropTypes.object,
    timeZone: PropTypes.string.isRequired,
    trackingNamespace: PropTypes.string,
    url: PropTypes.object.isRequired
};
EventBanner.displayName = 'EventBanner';
module.exports = connector(EventBanner, {
    keysToPluck: ['hasConsistentSpacing']
});
//# sourceMappingURL=EventBanner.js.map

/***/ }),

/***/ 72422:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(73725)/* ["default"] */ .A);
const { TimerContainer, TimerColon, UnitContainer, TimerValueContainer, EventCountdownTime } = __webpack_require__(23211);
const EventCountdown = ({ eventDate, hasLowerCaseText, days, hours, minutes, seconds }) => {
    const { formatMessage } = useIntl();
    if (!eventDate) {
        return null;
    }
    return (React.createElement(EventCountdownTime, null,
        React.createElement(TimerContainer, null,
            React.createElement(TimerValueContainer, null,
                React.createElement("span", { className: "notranslate" }, days)),
            React.createElement(UnitContainer, { hasLowerCaseText: hasLowerCaseText }, formatMessage(translations.eventDays))),
        React.createElement(TimerColon, null,
            React.createElement("span", { className: "notranslate" }, ":")),
        React.createElement(TimerContainer, null,
            React.createElement(TimerValueContainer, null,
                React.createElement("span", { className: "notranslate" }, hours)),
            React.createElement(UnitContainer, { hasLowerCaseText: hasLowerCaseText }, formatMessage(translations.eventHours))),
        React.createElement(TimerColon, null,
            React.createElement("span", { className: "notranslate" }, ":")),
        React.createElement(TimerContainer, null,
            React.createElement(TimerValueContainer, null,
                React.createElement("span", { className: "notranslate" }, minutes)),
            React.createElement(UnitContainer, { hasLowerCaseText: hasLowerCaseText }, formatMessage(translations.eventMinutes))),
        React.createElement(TimerColon, null,
            React.createElement("span", { className: "notranslate" }, ":")),
        React.createElement(TimerContainer, null,
            React.createElement(TimerValueContainer, null,
                React.createElement("span", { className: "notranslate" }, seconds)),
            React.createElement(UnitContainer, { hasLowerCaseText: hasLowerCaseText }, formatMessage(translations.eventSeconds)))));
};
EventCountdown.propTypes = {
    days: PropTypes.string,
    eventDate: PropTypes.number.isRequired,
    hasLowerCaseText: PropTypes.bool,
    hours: PropTypes.string,
    minutes: PropTypes.string,
    seconds: PropTypes.string
};
exports.A = EventCountdown;
//# sourceMappingURL=EventCountdown.js.map

/***/ }),

/***/ 8999:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { EventBannerNotifyButton } = __webpack_require__(23211);
/**
 * NotifyCTA
 *
 * @param {object} props - React props
 * @param {boolean} props.isEventHappening - State of event time stamp
 * @param {string} props.notifyButton - Properties of Notify Button
 * @param {Function} props.onClickHandler - Onclick callback
 * @param {bool} props.showButtonAndLogoOnTimeUp - To show button on time up
 * @param {bool} props.shouldEnableBundleComponentAnalytics - feature flag to append data-section-title attribute for analytics
 * @param {string} props.trackingNamespace - Tracking namespace
 * @returns
 */
const NotifyCTA = ({ isEventHappening, notifyButton, onClickHandler, showButtonAndLogoOnTimeUp, shouldEnableBundleComponentAnalytics, trackingNamespace }) => {
    if (isEventHappening && !showButtonAndLogoOnTimeUp) {
        return null;
    }
    return (React.createElement(EventBannerNotifyButton, { shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, trackingNamespace: `${trackingNamespace} Notify`, inputKind: "link", btnStyle: "filled", target: "_blank", "aria-label": "Opens in a new window", isEventHappening: isEventHappening, showButtonAndLogoOnTimeUp: showButtonAndLogoOnTimeUp, ...notifyButton, onClickHandler: onClickHandler }));
};
NotifyCTA.propTypes = {
    isEventHappening: PropTypes.bool,
    notifyButton: PropTypes.shape({
        href: PropTypes.string,
        label: PropTypes.string
    }),
    onClickHandler: PropTypes.func,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    showButtonAndLogoOnTimeUp: PropTypes.bool,
    trackingNamespace: PropTypes.string
};
NotifyCTA.displayName = 'NotifyCTA';
module.exports = NotifyCTA;
//# sourceMappingURL=NotifyCTA.js.map

/***/ }),

/***/ 43892:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { PostTimerWrapper, PostTimerMessage, EventLink } = __webpack_require__(23211);
/**
 * PostCountdownComponent
 *
 * @param {object} props - React props
 * @param {Function} props.getTrackingAttributes - Tracking attributes
 * @param {bool} props.hasLowerCaseText - optional prop for lowercase text
 * @param {bool} props.isEventHappening - React props
 * @param {bool} props.showButtonAndLogoOnTimeUp - to show button on time up
 * @param {string} props.timeUpMessage - Post countdown message e.g. Happening Now
 * @param {string} props.trackingNamespace - Tracking namespace
 * @param {object} props.urlData - Brand url data from config
 * @param {Function} props.watchLiveOnLabel - Watch live on text
 * @returns
 */
const PostCountdownComponent = ({ getTrackingAttributes, hasLowerCaseText, isEventHappening, showButtonAndLogoOnTimeUp, timeUpMessage, trackingNamespace, urlData }) => {
    const analyticsDataAttribute = getTrackingAttributes(`${trackingNamespace} post Timer Message`);
    return (React.createElement(PostTimerWrapper, { "data-testid": "PostCountdownComponent", isEventHappening: isEventHappening, showButtonAndLogoOnTimeUp: showButtonAndLogoOnTimeUp },
        React.createElement(PostTimerMessage, { "data-testid": "PostTimerMessage", dangerouslySetInnerHTML: { __html: timeUpMessage }, isEventHappening: isEventHappening, showButtonAndLogoOnTimeUp: showButtonAndLogoOnTimeUp }),
        React.createElement(EventLink, { "data-testid": "EventLink", hasLowerCaseText: hasLowerCaseText, href: urlData.href, ...analyticsDataAttribute, isEventHappening: isEventHappening }, urlData.text)));
};
PostCountdownComponent.propTypes = {
    getTrackingAttributes: PropTypes.func,
    hasLowerCaseText: PropTypes.bool,
    isEventHappening: PropTypes.bool,
    showButtonAndLogoOnTimeUp: PropTypes.bool,
    timeUpMessage: PropTypes.string,
    trackingNamespace: PropTypes.string,
    urlData: PropTypes.object,
    watchLiveOnLabel: PropTypes.func
};
PostCountdownComponent.displayName = 'PostCountdownComponent';
module.exports = PostCountdownComponent;
//# sourceMappingURL=PostCountdownComponent.js.map

/***/ }),

/***/ 78907:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const ResponsiveAsset = __webpack_require__(86157);
const translations = (__webpack_require__(73725)/* ["default"] */ .A);
const { EventSponsoredLogoWrapper, Logo } = __webpack_require__(23211);
/**
 * SponsorLogo
 *
 * @param {object} props - React props
 * @param {string} props.sponsorLogo - Sponsor Logo
 * @param {string} props.sponsorBaseUrl - Sponsor Logo url
 * @param {Function} props.formatMessage - Sponsor countdown message
 * @returns
 */
const SponsorLogo = ({ sponsorLogo, sponsorBaseUrl, formatMessage }) => {
    if (!sponsorLogo) {
        return null;
    }
    const sponsorBaseUrlProps = {};
    if (sponsorBaseUrl) {
        sponsorBaseUrlProps.href = sponsorBaseUrl;
        sponsorBaseUrlProps.as = 'a';
    }
    return (React.createElement(React.Fragment, null,
        formatMessage(translations.sponsorPreamble),
        React.createElement(EventSponsoredLogoWrapper, { "data-testid": "EventSponsoredLogoWrapper", ...sponsorBaseUrlProps },
            React.createElement(Logo, { ...sponsorLogo }))));
};
SponsorLogo.propTypes = {
    formatMessage: PropTypes.func,
    sponsorBaseUrl: PropTypes.string,
    sponsorLogo: PropTypes.shape(ResponsiveAsset.propTypes)
};
SponsorLogo.displayName = 'SponsorLogo';
module.exports = SponsorLogo;
//# sourceMappingURL=SponsorLogo.js.map

/***/ }),

/***/ 42170:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const NotifyCTA = __webpack_require__(8999);
const SponsorLogo = __webpack_require__(78907);
const { EventLink, EventSponsor } = __webpack_require__(23211);
/**
 * SponsoredComponent
 *
 * @param {object} props - React props
 * @param {string} props.formatMessage - Sponsor countdown message
 * @param {Function} props.getTrackingAttributes - Tracking attributes
 * @param {bool} props.hasLowerCaseText - optional prop for lowercase text
 * @param {bool} props.hasHiddenEventTimestamp - optional prop for hiding timestamp
 * @param {bool} props.isEventHappening - React props
 * @param {string} props.notifyButton - - Properties of Notify Button
 * @param {bool} props.showButtonAndLogoOnTimeUp - to show button on time up
 * @param {bool} props.shouldEnableBundleComponentAnalytics - feature flag to append data-section-title attribute for analytics
 * @param {object} props.sponsorLogo - Sponsor Logo
 * @param {string} props.sponsorBaseUrl - Sponsor url
 * @param {string} props.trackingNamespace - Tracking namespace
 * @param {object} props.urlData - Brand url data from config
 * @param {Function} props.watchLiveOnLabel - Watch live on text
 * @returns
 */
const SponsoredComponent = ({ formatMessage, getTrackingAttributes, hasLowerCaseText, hasHiddenEventTimestamp, isEventHappening, notifyButton, showButtonAndLogoOnTimeUp, shouldEnableBundleComponentAnalytics, sponsorLogo, sponsorBaseUrl, trackingNamespace, urlData }) => {
    const analyticsDataAttribute = getTrackingAttributes(`${trackingNamespace} Sponsored`);
    const trackEvent = (eventTracking) => {
        if ( true && window.dataLayer && eventTracking) {
            window.dataLayer.push({
                event: eventTracking.action,
                eventCategory: 'click tracking',
                eventAction: eventTracking.action,
                eventLabel: eventTracking.label
            });
        }
    };
    const trackNotifyButton = () => {
        trackEvent({
            action: `${trackingNamespace} Notify`,
            label: 'Notify Me'
        });
    };
    return (React.createElement(EventSponsor, { isEventHappening: isEventHappening, showButtonAndLogoOnTimeUp: showButtonAndLogoOnTimeUp },
        (!isEventHappening || (isEventHappening && showButtonAndLogoOnTimeUp)) &&
            notifyButton ? (React.createElement(NotifyCTA, { "data-testid": "EventBannerNotifyCTA", isEventHappening: isEventHappening, notifyButton: notifyButton, showButtonAndLogoOnTimeUp: showButtonAndLogoOnTimeUp, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, trackingNamespace: trackingNamespace, onClickHandler: trackNotifyButton })) : (React.createElement(SponsorLogo, { sponsorLogo: sponsorLogo, sponsorBaseUrl: sponsorBaseUrl, formatMessage: formatMessage })),
        ((!isEventHappening && !hasHiddenEventTimestamp) ||
            (isEventHappening && !showButtonAndLogoOnTimeUp)) && (React.createElement(EventLink, { hasLowerCaseText: hasLowerCaseText, href: urlData.href, ...analyticsDataAttribute, showButtonAndLogoOnTimeUp: showButtonAndLogoOnTimeUp, isEventHappening: isEventHappening, onClick: () => trackEvent({
                action: `${trackingNamespace} Sponsored`,
                label: urlData.text
            }) }, urlData.text))));
};
SponsoredComponent.propTypes = {
    formatMessage: PropTypes.func,
    getTrackingAttributes: PropTypes.func,
    hasHiddenEventTimestamp: PropTypes.bool,
    hasLowerCaseText: PropTypes.bool,
    isEventHappening: PropTypes.bool,
    notifyButton: PropTypes.shape({
        href: PropTypes.string,
        label: PropTypes.string
    }),
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    showButtonAndLogoOnTimeUp: PropTypes.bool,
    sponsorBaseUrl: PropTypes.string,
    sponsorLogo: PropTypes.object,
    trackingNamespace: PropTypes.string,
    urlData: PropTypes.object,
    watchLiveOnLabel: PropTypes.func
};
SponsoredComponent.displayName = 'SponsoredComponent';
module.exports = SponsoredComponent;
//# sourceMappingURL=SponsoredComponent.js.map

/***/ }),

/***/ 36897:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const EventBanner = __webpack_require__(73723);
module.exports = asConfiguredComponent(EventBanner, 'EventBanner');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 23211:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { getSectionSpacingStyling } = __webpack_require__(16800);
const Grid = __webpack_require__(86659);
const { GridItem } = __webpack_require__(40653);
const { BaseText, BaseWrap } = __webpack_require__(76955);
const ResponsiveAsset = __webpack_require__(73275);
const Button = __webpack_require__(73730);
const { getColorStyles, calculateSpacing, getTypographyStyles, getColorToken } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const EventBannerNotifyButton = styled(Button.Primary).withConfig({
    displayName: 'EventBannerNotifyButton'
}) `
  margin: 0 auto ${calculateSpacing(2)};
  border: 0.125rem solid;
  ${({ theme }) => getColorToken(theme, 'colors.interactive.base.white')};
  ${({ isEventHappening, showButtonAndLogoOnTimeUp }) => isEventHappening && showButtonAndLogoOnTimeUp && `margin: auto;`};
  max-width: 185px;
  max-height: 3rem;
  text-transform: uppercase;
  @media (max-width: ${BREAKPOINTS.md}) {
    margin-bottom: ${({ isEventHappening, showButtonAndLogoOnTimeUp }) => isEventHappening && showButtonAndLogoOnTimeUp
    ? `margin-bottom: 0;`
    : `${calculateSpacing(1)};`};
    width: 100%;
  }

  &&:hover,
  &&:active {
    border-color: ${({ theme }) => getColorToken(theme, 'colors.interactive.base.white')};
  }
`;
EventBannerNotifyButton.defaultProps = {
    colorToken: 'colors.interactive.base.white',
    typeIdentity: 'typography.definitions.utility.button-core'
};
const EventBannerWrapper = styled.div.withConfig({
    displayName: 'EventBannerWrapper'
}) `
  ${({ theme, hasConsistentSpacing }) => {
    if (hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
        return `
        margin-bottom: ${getSectionSpacingStyling(theme, 'gap-md')};
        @media (max-width: ${BREAKPOINTS.md}) {
          margin-bottom: ${getSectionSpacingStyling(theme, 'gap-sm')};
        }
      `;
    }
    return null;
}};
  ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.consumption.lead.inverted.background')};
`;
const Logo = styled(ResponsiveAsset).withConfig({ displayName: 'Logo' }) `
  margin: 0 auto;
  height: ${calculateSpacing(5)};

  picture {
    margin: 0;
    height: 100%;

    img {
      width: 156px;
      height: 40px;
    }
  }
`;
const EventBannerLogoContainer = styled.div.withConfig({
    displayName: 'EventBannerLogoContainer'
}) `
  display: flex;
  flex-direction: column;
  align-items: center;
`;
const EventBannerLogoWrapper = styled.a.withConfig({
    displayName: 'EventBannerLogoWrapper'
}) `
  margin-bottom: ${calculateSpacing(2)};
  padding: 0;
  width: 9.75rem;
  height: 3rem;
  ${({ isEventHappening }) => !isEventHappening &&
    `
    display: flex;
    align-items: center;
    @media (max-width: ${BREAKPOINTS.md}) {
      margin-bottom: ${calculateSpacing(1)};
    }
  `}
  @media (min-width: ${BREAKPOINTS.md}) {
    ${({ isEventHappening }) => isEventHappening &&
    `
      margin-bottom: 0;   
      display: block;
      align-self: center;
    `}

    ${({ isEventHappening, showButtonAndLogoOnTimeUp }) => isEventHappening &&
    showButtonAndLogoOnTimeUp &&
    `width:${calculateSpacing(28)};`}
  }
  ${({ isNotClickable }) => isNotClickable && `cursor: auto`}
`;
const EventCountdownTime = styled(Grid.NoMargins).withConfig({
    displayName: 'EventCountdownTime'
}) `
  && {
    @media (max-width: ${BREAKPOINTS.lg}) {
      grid-template-columns: repeat(3, 3.45rem 1.5rem) 3.45rem;
    }
    @media (max-width: ${BREAKPOINTS.md}) {
      grid-template-columns: repeat(3, 2fr 1rem) 2fr;
    }
    @media (max-width: ${BREAKPOINTS.sm}) {
      grid-template-columns: repeat(3, 3.5rem 1rem) 3.5rem;
    }
    grid-template-columns: repeat(3, 2fr 2rem) 2fr;
    align-items: center;
    text-align: center;
    --grid-gap: 0;
  }
  ${GridItem} {
    height: 100%;
  }
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.display-medium')}
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.lead.standard.context-texture')};
`;
const EventLink = styled(BaseText).withConfig({
    displayName: 'EventLink'
}) `
  && {
    ${({ hasLowerCaseText }) => !hasLowerCaseText && `text-transform: uppercase;`}
    line-height: 1rem;
  }
  align-self: center;
  text-decoration: none;
`;
EventLink.defaultProps = {
    as: 'a',
    colorToken: 'colors.consumption.lead.inverted.context-tertiary',
    typeIdentity: 'typography.definitions.globalEditorial.context-secondary'
};
const PostTimerMessage = styled(BaseText).withConfig({
    displayName: 'PostTimerMessage'
}) `
  text-align: start;
  ${({ isEventHappening, showButtonAndLogoOnTimeUp }) => isEventHappening && showButtonAndLogoOnTimeUp && `display: block;`};
  ${({ isEventHappening, showButtonAndLogoOnTimeUp }) => isEventHappening && !showButtonAndLogoOnTimeUp && `display: none;`};

  @media (min-width: ${BREAKPOINTS.md}) {
    text-align: center;

    && {
      ${({ isEventHappening }) => isEventHappening && `display: block;`};
    }
  }

  && {
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.lead.inverted.heading')};
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-bulletin-primary')}
  }
`;
const PostTimerWrapper = styled.div.withConfig({
    displayName: 'PostTimerWrapper'
}) `
  ${EventLink} {
    display: ${({ isEventHappening }) => isEventHappening ? 'inline' : 'none'};
    ${({ isEventHappening }) => isEventHappening ? `padding-top:${calculateSpacing(0.5)}` : ''};
  }

  @media (min-width: ${BREAKPOINTS.md}) {
    ${EventLink} {
      display: none;
    }
  }
  ${EventLink} {
    ${({ showButtonAndLogoOnTimeUp, isEventHappening }) => showButtonAndLogoOnTimeUp && isEventHappening ? `display:none` : ''}
  }
`;
const EventBannerGrid = styled(Grid.ThreeUp).withConfig({
    displayName: 'EventBannerGrid'
}) `
  && {
    row-gap: 0;
    padding-top: ${calculateSpacing(2)};
    padding-bottom: ${calculateSpacing(2)};

    @media (min-width: ${BREAKPOINTS.md}) {
      padding: 1.5rem 1rem 1.25rem;
    }
  }
  > ${GridItem}:first-child {
    grid-column: 1 / span 4;
    margin-bottom: ${calculateSpacing(2)};
    text-align: center;
    justify-self: center;
  }
  ${({ isEventHappening }) => !isEventHappening &&
    `
      ${EventCountdownTime}{
        justify-content: center;
        padding-bottom: ${calculateSpacing(2)};
        @media (min-width: ${BREAKPOINTS.md}) {
          padding: 0;
        }
      }
      ${EventBannerLogoContainer}{
        ${Logo}{
          display: flex;
          width:100%;
          max-width: 11.5rem;
          height: 48px;
        }
      }
    `}
  ${({ isEventHappening }) => isEventHappening &&
    `
    && {
      padding: ${calculateSpacing(1)} ${calculateSpacing(3)};
      @media (min-width: ${BREAKPOINTS.md}) {
        padding: ${calculateSpacing(1)} 0;
      }
    }
    ${Logo}{
      max-width: 9.75rem;
      height: 100%;
      display: flex;
    }
    @media (max-width: ${BREAKPOINTS.md}) {
      ${Logo}{
        margin:0;
      }
      ${EventBannerLogoWrapper}{
        padding:0;
        margin-bottom: 0;
      }
      ${PostTimerWrapper}{
        padding: ${calculateSpacing(1.5)} 0;
      }
      &&{
        gap: 0;
        column-gap: var(--grid-gap);
      }
      > ${GridItem}:first-child {
        grid-column: 1 / span 2;
        text-align: center;
        align-self: center;
        margin-bottom: 0;
        justify-self: flex-start;
      }
      > ${GridItem}:nth-child(2) {
        grid-column: 3 / span 2;
        align-self: center;

      }
      ${GridItem}{
        grid-column: auto;
      }
      ${EventBannerLogoContainer}{
        display: block;
      }
    }
    ${GridItem}:nth-child(3){
      align-self: center;
    }
  `}

  ${({ isEventHappening, showButtonAndLogoOnTimeUp }) => isEventHappening &&
    showButtonAndLogoOnTimeUp &&
    `
    @media (max-width: ${BREAKPOINTS.md}) {
      && {
       padding-right: ${calculateSpacing(3)};
      }
      ${EventBannerLogoContainer}{
        display: none;
      }
      > ${GridItem}:first-child {
        display: none;
      }
      > ${GridItem}:nth-child(2) {
        grid-column: 1 / span 2;
        align-self: center;
      }
      > ${GridItem}:nth-child(3) {
        grid-column: 3 / span 2;
        align-self: center;
      }
    }
   `}
  @media (min-width: ${BREAKPOINTS.md}) {
    > ${GridItem}:first-child {
      grid-column: 1 / span 3;
      justify-self: center;
      align-self: center;
      margin: 0;
    }
    > ${GridItem}:nth-child(2) {
      grid-column: 5 / span 4;
      align-self: center;
    }
    > ${GridItem}:last-child {
      grid-column: 10 / span 3;
    }

    ${({ isEventHappening }) => isEventHappening
    ? `
      padding: ${calculateSpacing(1)} 0;
    `
    : `
      padding: ${calculateSpacing(3)} 0 ${calculateSpacing(2.5)} 0;
    `}
  }
`;
const EventSponsor = styled(BaseWrap).withConfig({
    displayName: 'EventSponsor'
}) `
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  height: auto;
  text-align: center;

  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.syndication')};

  ${({ isEventHappening }) => isEventHappening
    ? `
    align-self: center;
    padding: ${calculateSpacing(1.5)} 0;
  `
    : `
  @media (min-width: ${BREAKPOINTS.md}) {
    padding-top: 0;   
    height: 100%;
  } 
  `};

  ${({ isEventHappening, showButtonAndLogoOnTimeUp }) => isEventHappening && showButtonAndLogoOnTimeUp && `padding: 0;`};

  @media (max-width: ${BREAKPOINTS.md}) {
    display: ${({ isEventHappening, showButtonAndLogoOnTimeUp }) => isEventHappening && !showButtonAndLogoOnTimeUp ? 'none' : `flex`};
  }

  @media (min-width: ${BREAKPOINTS.md}) {
    ${({ isEventHappening, showButtonAndLogoOnTimeUp }) => isEventHappening && !showButtonAndLogoOnTimeUp && `display:flex;`};

    ${EventLink} {
      display: ${({ isEventHappening, showButtonAndLogoOnTimeUp }) => isEventHappening && showButtonAndLogoOnTimeUp ? `none` : `flex`};
      align-self: center;
      justify-content: center;
    }
  }
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.lead.inverted.syndication')};

  ${Logo} {
    margin: 0 auto;
    width: 100%;
    max-width: 10.313rem;
  }
`;
const EventBannerDek = styled(BaseText).withConfig({
    displayName: 'EventBannerDek'
}) `
  vertical-align: middle;
  @media (min-width: ${BREAKPOINTS.md}) {
    margin-right: unset;
  }
`;
EventBannerDek.defaultProps = {
    as: 'span',
    colorToken: 'colors.consumption.lead.inverted.context-tertiary',
    typeIdentity: 'typography.definitions.globalEditorial.context-secondary'
};
const TimerContainer = styled(BaseWrap).withConfig({
    displayName: 'TimerContainer'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.display-small')}
  color: ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.lead.standard.context-texture')};
`;
const UnitContainer = styled(BaseWrap).withConfig({
    displayName: 'UnitContainer'
}) `
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.lead.inverted.link')};
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-tertiary')}
  padding-top: ${calculateSpacing(1)};
  text-align: center;
  text-transform: ${({ hasLowerCaseText }) => !hasLowerCaseText ? 'uppercase;' : 'capitalise;'};
  line-height: 1rem;
  @media (min-width: ${BREAKPOINTS.md}) {
    padding-top: ${calculateSpacing(2)};
  }
`;
const TimerValueContainer = styled(BaseText).withConfig({
    displayName: 'TimerValueContainer'
}) `
  @media (min-width: ${BREAKPOINTS.md}) {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    text-align: center;
  }
`;
TimerValueContainer.defaultProps = {
    as: 'div',
    colorToken: 'colors.interactive.base.white',
    typeIdentity: 'typography.definitions.globalEditorial.numerical-large'
};
const TimerColon = styled(BaseWrap).withConfig({
    displayName: 'TimerColon'
}) `
  line-height: 1.5rem;
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.white')};
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.numerical-large')}

  @media (min-width: ${BREAKPOINTS.md}) {
    position: relative;
    top: 0.2rem;
  }
`;
const EventBannerCloseButton = styled(Button.Utility).withConfig({
    displayName: 'EventBannerCloseButton'
}) `
  position: absolute;
  right: 0;
  margin: ${calculateSpacing(2)} ${calculateSpacing(2)} 0 ${calculateSpacing(2)};
  border-width: 0;
  width: 0;
  min-width: 0;
  height: 0;

  ${({ shouldShowCloseButton }) => !shouldShowCloseButton && `display: none`};
  @media (min-width: ${BREAKPOINTS.md}) {
    margin: ${calculateSpacing(2)} ${calculateSpacing(2)} 0
      ${calculateSpacing(2)};
  }

  &:hover,
  &:active {
    border-width: 0;
    ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.consumption.lead.inverted.background')};
    ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.consumption.lead.inverted.background')};
  }

  .icon-close {
    padding: 8px;

    g {
      stroke: white;
    }
  }
`;
const EventSponsoredLogoWrapper = styled(BaseText).withConfig({
    displayName: 'EventSponsoredLogoWrapper'
}) `
  margin: 0 auto;
  padding: ${calculateSpacing(1)} 0 ${calculateSpacing(2)} 0;
  @media (min-width: ${BREAKPOINTS.md}) {
    padding: ${calculateSpacing(1)} 0;
  }
`;
const EventDetails = styled(Grid.WithMargins).withConfig({
    displayName: 'EventDetails'
}) `
  && {
    grid-template-columns: 1fr;
    gap: 0;
    line-height: ${calculateSpacing(1)};
    @media (min-width: ${BREAKPOINTS.md}) {
      grid-template-columns: repeat(1, 1fr);
      padding: 0;
    }
    @media (max-width: ${BREAKPOINTS.md}) {
      padding-right: 0;
      padding-left: 0;
    }
  }
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.lead.inverted.context-tertiary')};

  ${GridItem}:nth-of-type(2) {
    display: block;
  }
  ${EventLink} {
    display: block;
    width: 100%;
    text-align: center;
  }

  @media (min-width: ${BREAKPOINTS.md}) {
    ${GridItem}:nth-of-type(2) {
      display: none;
    }
  }
  margin: ${calculateSpacing(2)} 0;
`;
module.exports = {
    EventBannerWrapper,
    EventBannerGrid,
    EventCountdownTime,
    EventLink,
    EventBannerDek,
    EventSponsor,
    TimerContainer,
    TimerColon,
    UnitContainer,
    TimerValueContainer,
    PostTimerMessage,
    EventBannerCloseButton,
    Logo,
    EventBannerLogoWrapper,
    EventSponsoredLogoWrapper,
    EventDetails,
    EventBannerLogoContainer,
    PostTimerWrapper,
    EventBannerNotifyButton
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 73725:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    watchLiveOn: {
        id: 'EventBanner.WatchLiveOn',
        defaultMessage: 'Watch live on',
        description: 'url where user can watch an event live'
    },
    liveOn: {
        id: 'EventBanner.LiveOn',
        defaultMessage: 'Live on',
        description: 'Live event'
    },
    sponsorPreamble: {
        id: 'EventBanner.SponsorPreamble',
        defaultMessage: 'Countdown Presented By',
        description: 'Event banner component sponsor preamble'
    },
    eventDays: {
        id: 'EventBanner.eventDays',
        defaultMessage: 'Days',
        description: 'Event banner component days'
    },
    eventHours: {
        id: 'EventBanner.eventHours',
        defaultMessage: 'Hours',
        description: 'Event banner component hours'
    },
    eventMinutes: {
        id: 'EventBanner.eventMinutes',
        defaultMessage: 'Minutes',
        description: 'Event banner component minutes'
    },
    eventSeconds: {
        id: 'EventBanner.eventSeconds',
        defaultMessage: 'Seconds',
        description: 'Event banner component seconds'
    },
    closeBanner: {
        id: 'EventBanner.CloseBanner',
        defaultMessage: 'Close Banner',
        description: 'Close event banner'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 29228:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.isOutdated = exports.calculateTime = exports.getformatedDate = exports.isInFuture = exports.getDuration = void 0;
const momentTz = __webpack_require__(84743);
const padStart = __webpack_require__(52037);
const DEFAULT_LOCALE = 'en-US';
const DEFAULT_TIMEZONE = 'America/New_York';
const getLocalTimeStamp = (targetDate = '') => {
    if (targetDate === '') {
        return new Date();
    }
    return new Date(targetDate);
};
const getDuration = (timeStamp) => {
    return new Date(timeStamp) - new Date();
};
exports.getDuration = getDuration;
const isInFuture = (timeStamp) => {
    return new Date(timeStamp).valueOf() > new Date().valueOf();
};
exports.isInFuture = isInFuture;
const getformatedDate = (targetDate, locale = DEFAULT_LOCALE, timeZone = DEFAULT_TIMEZONE, timeFormat = 'MMMM DD [at] hh:mmA z') => {
    const eventdate = getLocalTimeStamp(targetDate);
    const duration = (0, exports.getDuration)(targetDate);
    let formatedTime = '';
    if (timeZone && locale && eventdate) {
        formatedTime = momentTz
            .tz(targetDate, timeZone)
            .locale(locale)
            .format(timeFormat);
    }
    return {
        duration,
        time: formatedTime
    };
};
exports.getformatedDate = getformatedDate;
const getFormatedNumber = (number) => padStart(number, 2, '0');
const calculateTime = (duration) => {
    let secs = Math.floor((duration / 1000) % 60);
    let mins = Math.floor((duration / (1000 * 60)) % 60);
    let hours = Math.floor((duration / (1000 * 60 * 60)) % 24);
    let days = Math.floor(duration / (1000 * 60 * 60 * 24));
    hours = getFormatedNumber(hours);
    mins = getFormatedNumber(mins);
    secs = getFormatedNumber(secs);
    days = getFormatedNumber(days);
    return { days, hours, mins, secs };
};
exports.calculateTime = calculateTime;
const isOutdated = (bannerStartTimeStamp, bannerExpiryTimeStamp) => {
    const now = new Date().valueOf();
    if ((bannerExpiryTimeStamp &&
        new Date(bannerExpiryTimeStamp).valueOf() < now) ||
        (bannerStartTimeStamp && new Date(bannerStartTimeStamp).valueOf() > now)) {
        return true;
    }
    return false;
};
exports.isOutdated = isOutdated;
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 37807:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useMemo } = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const { TrackComponentChannel } = __webpack_require__(78788);
const SummaryItem = __webpack_require__(74992);
const ResponsiveAsset = __webpack_require__(86157);
/**
 * EventEmbed component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} props.event - Props to render Event component
 *
 * @returns {ReactElement} <div>
 */
const EventEmbed = ({ className, event }) => {
    const { formatDateTimeRange } = useIntl();
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'EventEmbed'
        });
    }, []);
    // Ensure start & end dates are finite when
    // formatting the date range. If both
    // values are invalid, then do not show
    // the event date.
    const eventDate = useMemo(() => {
        if (event.eventDetails) {
            return event.eventDetails;
        }
        let startDate = new Date(event.startDate);
        let endDate = new Date(event.endDate);
        if (isFinite(startDate) && !isFinite(endDate)) {
            endDate = startDate;
        }
        else if (!isFinite(startDate) && isFinite(endDate)) {
            startDate = endDate;
        }
        else if (!isFinite(startDate) && !isFinite(endDate)) {
            return '';
        }
        return formatDateTimeRange(startDate, endDate, {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            timeZone: 'UTC'
        });
    }, [event, formatDateTimeRange]);
    return (React.createElement(SummaryItem.EventEmbed, { className: className, contentType: "event", copilotID: event.id, dangerousHed: event.dangerousHed, dangerousDek: event.dangerousDek, image: event.image, hasAsset: !!event.image, shouldHideEventDate: false, eventDate: eventDate, venueName: event.venue && event.venue.name, rubric: { name: event.rubric }, isCtaButtonClickable: true, isDense: true, primaryCta: event.ctaLink, primaryCTALabel: event.ctaLabel, url: event.url }));
};
EventEmbed.propTypes = {
    className: PropTypes.string,
    event: PropTypes.shape({
        id: PropTypes.string,
        dangerousHed: PropTypes.string,
        dangerousDek: PropTypes.string,
        startDate: PropTypes.string,
        endDate: PropTypes.string,
        eventDetails: PropTypes.string,
        rubric: PropTypes.string,
        image: PropTypes.shape(ResponsiveAsset.propTypes),
        ctaLabel: PropTypes.string,
        ctaLink: PropTypes.string,
        url: PropTypes.string,
        venue: PropTypes.shape({
            name: PropTypes.string
        })
    }).isRequired
};
module.exports = EventEmbed;
//# sourceMappingURL=EventEmbed.js.map

/***/ }),

/***/ 45888:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(37807);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 5823:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(40442)/* ["default"] */ .A);
const Event = __webpack_require__(12398);
const RecircList = __webpack_require__(10281);
const Tabs = __webpack_require__(81318);
const { TrackComponentChannel } = __webpack_require__(78788);
const { EventsListWrapper, EventsListContainer, EventsListItem, EventsListItems, EventsListMonth, EventsListTitle } = __webpack_require__(66472);
function sortEvents(events) {
    return events
        .sort((a, b) => {
        return new Date(a.startDate) - new Date(b.startDate);
    })
        .reduce((acc, val) => {
        const eventMonth = val.startDate
            ? new Date(val.startDate).toLocaleString('en-US', {
                month: 'long'
            })
            : '';
        if (!acc[eventMonth]) {
            acc[eventMonth] = [val];
        }
        else {
            acc[eventMonth].push(val);
        }
        return acc;
    }, {});
}
/**
 * EventsList component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {Array} props.events - Required list of `<Events/>`
 * @param {Array<object>} [props.links] - Optional list of `{ text, url, isExternal}` for tabs used for navigation links
 * @param {object} [props.marquee] - Optional component to pass into <Tabs />
 * @param {boolean} [props.shouldUseTabs] - Optional boolean to flag the use of Tabs
 * @param {string} [props.title] - Optional header for Events List
 * @param {object} [props.variations] - Optional. Variation properties used in rendering the component.
 * @param {boolean} [props.variations.sortByMonth] - [`bool`] Optional. Set to `true` if Events List should be sorted by Month
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 *
 *
 * @returns {ReactElement} <div>
 */
const EventsList = ({ className, events, links, marquee, shouldUseTabs = false, title, variations = {
    sortByMonth: false
}, variationName }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'EventsList',
            variation: variationName
        });
    }, [variationName]);
    let sortedEvents = {};
    const { formatMessage } = useIntl();
    const eventListMarkup = events.map((eventList, index) => {
        if (variations.sortByMonth) {
            sortedEvents = sortEvents(eventList);
        }
        return (React.createElement(EventsListContainer, { key: index }, variations.sortByMonth && eventList.length > 0 ? (React.createElement(React.Fragment, null, Object.keys(sortedEvents).map((month, i) => (React.createElement(EventsListMonth, { key: i, className: "events-list__month" },
            React.createElement(EventsListTitle, null, month),
            React.createElement(EventsListItems, null,
                React.createElement(EventsListItem, { key: i }, sortedEvents[month].map((eventsList, key) => (React.createElement(Event, { ...eventsList, key: key, showVenue: true })))))))))) : (React.createElement(React.Fragment, null,
            React.createElement(EventsListTitle, null, title || formatMessage(translations.title)),
            eventList.length > 0 && (React.createElement(EventsListItems, null, eventList.map((item, i) => (React.createElement(EventsListItem, { key: i },
                React.createElement(Event, { ...item, showVenue: true }))))))))));
    });
    const marqueeProps = marquee && marquee.items ? React.createElement(RecircList, { ...marquee, heading: "" }) : null;
    const content = shouldUseTabs ? (React.createElement(Tabs, { marquee: marqueeProps, showButton: false, tabContent: eventListMarkup, tabLabels: links })) : (React.createElement(React.Fragment, null, eventListMarkup));
    return (React.createElement(EventsListWrapper, { className: classnames('events-list', className), isSortByMonth: variations.sortByMonth }, content));
};
EventsList.propTypes = {
    className: PropTypes.string,
    events: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.object)).isRequired,
    links: PropTypes.arrayOf(PropTypes.object),
    marquee: PropTypes.object,
    shouldUseTabs: PropTypes.bool,
    title: PropTypes.string,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        sortByMonth: PropTypes.bool.isRequired
    })
};
module.exports = EventsList;
//# sourceMappingURL=EventsList.js.map

/***/ }),

/***/ 67020:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(39008);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 66472:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BaseText } = __webpack_require__(76955);
const { calculateSpacing, getColorStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { TabsContentWrapper } = __webpack_require__(66042);
const EventsListItems = styled.ul.withConfig({
    displayName: 'EventsListItems'
}) `
  padding: 0;
  list-style-type: none;
`;
const EventsListItem = styled(BaseText).withConfig({
    displayName: 'EventsListItem'
}) ``;
EventsListItem.defaultProps = {
    as: 'li'
};
const EventsListTitle = styled(BaseText).withConfig({
    displayName: 'EventsListTitle'
}) `
  margin: 0 0 ${calculateSpacing(4)} 0;
  padding: 0;
  @media (min-width: ${BREAKPOINTS.md}) {
    margin: 0 0 ${calculateSpacing(4)} 0;
  }
`;
EventsListTitle.defaultProps = {
    as: 'h1',
    colorToken: 'colors.discovery.body.light.heading',
    typeIdentity: 'typography.definitions.discovery.subhed-section-secondary'
};
const EventsListContainer = styled.div.withConfig({
    displayName: 'EventsListContainer'
}) ``;
const EventsListMonth = styled.div.withConfig({
    displayName: 'EventsListMonth'
}) ``;
const eventsListSortedStyles = () => `
  ${EventsListMonth} {
    margin: 0 0 ${calculateSpacing(6)} 0;

    @media (min-width: ${BREAKPOINTS.md}) {
      margin: 0 0 ${calculateSpacing(7)} 0;
    }

    &:last-of-type {
      margin: 0;
    }
  }
  ${EventsListTitle} {
    margin: 0 0 ${calculateSpacing(2)} 0;
  }
`;
const EventsListWrapper = styled.div.withConfig({
    displayName: 'EventsListWrapper'
}) `
  ${({ theme, isSortByMonth }) => isSortByMonth
    ? getColorStyles(theme, 'background-color', 'colors.discovery.body.white.background')
    : getColorStyles(theme, 'background-color', 'colors.discovery.body.light.background')};

  padding: ${calculateSpacing(4)} ${calculateSpacing(2)};

  @media (min-width: ${BREAKPOINTS.md}) {
    padding: ${calculateSpacing(6)} ${calculateSpacing(3)};
  }

  ${TabsContentWrapper} {
    ${EventsListTitle} {
      margin-top: ${calculateSpacing(4)};
    }
    ${EventsListContainer} {
      text-align: left;
    }
  }

  ${({ isSortByMonth }) => isSortByMonth && eventsListSortedStyles()};
`;
module.exports = {
    EventsListWrapper,
    EventsListContainer,
    EventsListItem,
    EventsListItems,
    EventsListMonth,
    EventsListTitle
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 40442:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    title: {
        id: 'EventsList.Title',
        defaultMessage: 'Featured Events',
        description: 'EventsList component title'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 39008:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const EventsList = __webpack_require__(5823);
EventsList.SortByMonth = asVariation(EventsList, 'SortByMonth', {
    sortByMonth: true
});
module.exports = EventsList;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 86418:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const { useInView } = __webpack_require__(26855);
const Bylines = __webpack_require__(52540);
const ExternalLink = __webpack_require__(39832);
const Rubric = __webpack_require__(34187);
const translations = __webpack_require__(98188);
const { TrackComponentChannel } = __webpack_require__(78788);
const { googleAnalytics } = __webpack_require__(90090);
const ResponsiveImage = __webpack_require__(43608);
const COMMERCE_PROMOTION_CLICK_EVENT = 'promotion-click';
const COMMERCE_PROMOTION_IMPRESSION_EVENT = 'promotion-impression';
const COMMERCE_PROMOTION_EVENT_ID = 'PLPPromotion';
const COMMERCE_PROMOTION_EVENT_NAME = 'ArticleToPLP';
// Click tracking
const promotionBannerTracking = ({ url, position }) => {
    if (true) {
        window.dataLayer.push({ ecommerce: null });
        window.dataLayer.push({
            event: COMMERCE_PROMOTION_CLICK_EVENT,
            ecommerce: {
                promoClick: {
                    promotions: [
                        {
                            id: COMMERCE_PROMOTION_EVENT_ID,
                            name: COMMERCE_PROMOTION_EVENT_NAME,
                            creative: url,
                            position
                        }
                    ]
                }
            }
        });
    }
};
// Impression tracking
const trackingImpressionEvent = ({ url, position }) => {
    return googleAnalytics.emitUniqueGoogleTrackingEvent('', {
        event: COMMERCE_PROMOTION_IMPRESSION_EVENT,
        ecommerce: {
            promoView: {
                promotions: [
                    {
                        id: COMMERCE_PROMOTION_EVENT_ID,
                        name: COMMERCE_PROMOTION_EVENT_NAME,
                        creative: url,
                        position
                    }
                ]
            }
        }
    });
};
const { ExternalLinkEmbedArrowIcon, ExternalLinkEmbedResponsiveImage, ExternalLinkEmbedBylines, ExternalLinkEmbedWrapper, ExternalLinkEmbedText, ExternalLinkEmbedHed, ExternalLinkEmbedDek, ExternalLinkEmbedRubric, ExternalLinkEmbedButton, ExternalLinkEmbedButtonWrapper } = __webpack_require__(64010);
const renderEmbedText = ({ hasByline, url, contributors, dangerousHed, dangerousDek, LinkComponent, hasArrowIcon, rubric, textColumnSize, layout, intl, isLiveStory, source, position }) => {
    return (React.createElement(ExternalLinkEmbedText, { textColumnSize: isLiveStory ? 'medium' : textColumnSize, layout: layout },
        layout === 'inline' && rubric && (React.createElement(ExternalLinkEmbedRubric, null, typeof rubric === 'string'
            ? intl.formatMessage(translations.rubric)
            : rubric.name)),
        React.createElement(LinkComponent, { attributes: { 'aria-label': dangerousHed }, className: "external-link-embed__hed-link button", href: url, onClick: () => layout === 'inlineWithButton' &&
                promotionBannerTracking({ url, position }) },
            React.createElement(ExternalLinkEmbedHed, { hasMeta: dangerousDek || hasByline, layout: layout, dangerouslySetInnerHTML: { __html: dangerousHed }, isLiveStory: isLiveStory })),
        dangerousDek && (React.createElement(ExternalLinkEmbedDek, { hasMeta: dangerousDek || hasByline, layout: layout, dangerouslySetInnerHTML: { __html: dangerousDek } })),
        hasArrowIcon && React.createElement(ExternalLinkEmbedArrowIcon, null),
        hasByline && (React.createElement(ExternalLinkEmbedBylines, { contributors: contributors, contentAlign: "left" })),
        layout === 'inlineWithButton' && source && (React.createElement(ExternalLinkEmbedButtonWrapper, null,
            React.createElement(ExternalLinkEmbedButton, { btnStyle: "outlined", label: source, href: url, inputKind: "link", onClickHandler: () => layout === 'inlineWithButton' &&
                    promotionBannerTracking({ url, position }), target: "_blank" })))));
};
/**
 * ExternalLinkEmbed component
 *
 * @param {object} props - props set on the link node
 * @param {string} [props.className] - Optional top-level class to add
 * @param {object} [props.contributors] - Optional object containing data to create contributor bylines.
 * @param {string} [props.dangerousDek] - Optional description of link
 * @param {string} props.dangerousHed - title of link
 * @param {string} [props.isLiveStory] - prop to identify if it is a Live Story or not
 * @param {string} [props.image] - Optional prop for image data
 * @param {string} [props.image.altText] - alt text for image; not needed if there is no image
 * @param {object} [props.image.sources] - Optional set of vulcan urls for an image
 * @param {string} [props.image.modelName] - Optional prop for modelName
 * @param {string} [props.hasArrowIcon] - Optional whether the link should display the arrow icon
 * @param {boolean} [props.isExternal] - Optional. Whether links within the embed open a new window. Defaults to true
 * @param {boolean} [props.isFullWidth] - Optional. Whether the embed is full-width at large breakpoints
 * @param {string} [props.rubric] - Optional rubric
 * @param {boolean} [props.showByline] - If true, byline will show.
 * @param {string} props.textColumnSize - Sets the size of the text grid column
 * @param {string} props.url - The site that the link will send the user to when clicked
 * @param {object} props.variations - Types of variations
 * @param {string} props.variations.layout - type of layout variation
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 * @param {string} [props.source] - prop to set the button text
 * @param {number} [props.position] - position of the external link in the page for tracking
 * @param { string } [props.id] - id
 *
 * @returns {ReactElement} <a>
 */
const ExternalLinkEmbed = ({ className, contributors, dangerousDek, dangerousHed, hasArrowIcon = true, image, isExternal = true, isFullWidth = false, rubric, showByline = false, textColumnSize = 'medium', url, variations = {
    layout: 'inline'
}, variationName, isLiveStory = false, source, position, id }) => {
    const { layout } = variations;
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ExternalLinkEmbed',
            variation: variationName
        });
    }, []); /* eslint-disable-line react-hooks/exhaustive-deps */
    const [ref, isInView] = useInView({
        threshold: 0.5,
        trackVisibility: true,
        delay: 100,
        triggerOnce: true
    });
    if (isInView && layout === 'inlineWithButton') {
        trackingImpressionEvent({ url, position });
    }
    const intl = useIntl();
    const LinkComponent = isExternal ? ExternalLink : 'a';
    const MediaAsset = ResponsiveImage;
    const hasByline = showByline && contributors;
    const embedText = renderEmbedText({
        hasByline,
        url,
        contributors,
        dangerousHed,
        dangerousDek,
        LinkComponent,
        hasArrowIcon,
        rubric,
        textColumnSize,
        layout,
        intl,
        isLiveStory,
        source,
        position,
        id
    });
    return (React.createElement(ExternalLinkEmbedWrapper, { layout: layout, hasMeta: dangerousDek || hasByline, isFullWidth: isFullWidth, className: className, "data-testid": `external-link-embed--${layout}`, isLiveStory: isLiveStory, ref: ref },
        layout === 'inline' && embedText,
        layout === 'inlineWithButton' && embedText,
        image?.sources && (React.createElement(LinkComponent, { attributes: { 'aria-label': dangerousHed }, className: "external-link-embed__image-link", href: url, onClick: () => layout === 'inlineWithButton' &&
                promotionBannerTracking({ url, position }) },
            React.createElement(ExternalLinkEmbedResponsiveImage, { altText: image.altText, sources: image.sources, as: MediaAsset, layout: layout }))),
        layout === 'large' && embedText));
};
ExternalLinkEmbed.displayName = 'ExternalLinkEmbed';
ExternalLinkEmbed.propTypes = {
    className: PropTypes.string,
    contributors: PropTypes.shape(Bylines.propTypes.contributors),
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string.isRequired,
    hasArrowIcon: PropTypes.bool,
    id: PropTypes.string,
    image: PropTypes.object,
    isExternal: PropTypes.bool,
    isFullWidth: PropTypes.bool,
    isLiveStory: PropTypes.bool,
    position: PropTypes.number,
    rubric: PropTypes.oneOfType([
        PropTypes.shape(Rubric.propTypes),
        PropTypes.string
    ]),
    showByline: PropTypes.bool,
    source: PropTypes.string,
    textColumnSize: PropTypes.oneOf(['medium', 'large']),
    url: PropTypes.string.isRequired,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        layout: PropTypes.string
    })
};
module.exports = ExternalLinkEmbed;
//# sourceMappingURL=ExternalLinkEmbed.js.map

/***/ }),

/***/ 55990:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const VariedExternalLinkEmbed = __webpack_require__(18206);
module.exports = asConfiguredComponent(VariedExternalLinkEmbed, 'ExternalLinkEmbed');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 64010:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const Button = __webpack_require__(73730);
const Arrow = __webpack_require__(4262);
const Bylines = __webpack_require__(52540);
const { calculateSpacing, getColorStyles, getColorToken, getTypographyStyles } = __webpack_require__(26865);
const { BaseText } = __webpack_require__(76955);
const { BREAKPOINTS } = __webpack_require__(96472);
const ExternalLinkEmbedWrapper = styled.div.withConfig({
    displayName: 'ExternalLinkEmbedWrapper'
}) `
  display: grid;
  width: 100%;

  ${({ layout }) => layout !== 'inlineWithButton' &&
    `
    border-width: 1px 0;
    border-style: solid;
   `}

  ${({ layout }) => layout === 'inlineWithButton' &&
    `
      .external-link-embed__image-link {
        @media (min-width: ${BREAKPOINTS.md}) {
          margin-left: ${calculateSpacing(2)};
          width: ${calculateSpacing(27)};
        }
        margin-left: ${calculateSpacing(1)};
        width: ${calculateSpacing(16)};
      }
   `}

  ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.consumption.body.standard.divider')};

  ${({ layout, isFullWidth }) => layout === 'inline' || layout === 'inlineWithButton'
    ? `
    grid-gap: ${calculateSpacing(3)};
    grid-template-columns: repeat(3, 1fr);
    margin: ${calculateSpacing(4)} 0;
    padding: ${calculateSpacing(2)} 0;

    .external-link-embed__image-link {
      align-self: center;
      justify-self: end;
    }

    ${isFullWidth &&
        `
      float: none;
      margin-left: 0;
      width: 100%;
    `}
  `
    : ``}

  ${({ layout, theme }) => layout === 'large'
    ? `
    grid-template-columns: repeat(8, 1fr);
    grid-row-gap: ${calculateSpacing(2)};
    margin: ${calculateSpacing(4)} 0;
    padding: ${calculateSpacing(2)} 0;

    .external-link-embed__image-link {
      grid-column: 2 / span 6;
      ${getColorStyles(theme, 'background-color', 'colors.discovery.body.light.background')};
    }
  `
    : ``}
`;
const ExternalLinkEmbedResponsiveImage = styled('div').withConfig({
    displayName: 'ExternalLinkEmbedResponsiveImage'
}) `
  ${({ layout }) => layout === 'inline' &&
    `
      min-width: 75px;

      img {
        width: 75px;
        object-fit: cover;
      }
    `}
  ${({ layout }) => layout === 'inlineWithButton' &&
    `
      img {
        object-fit: contain;
      }
    `}
`;
const ExternalLinkEmbedText = styled.div.withConfig({
    displayName: 'ExternalLinkEmbedText'
}) `
  position: relative;

  ${({ layout, textColumnSize }) => layout === 'large'
    ? `
    grid-column: 2 / span 6;
  `
    : `
    align-self: center;
    width: 100%;
    line-height: 1;

    ${textColumnSize === 'medium'
        ? `
      grid-column: 1 / 3;
    `
        : `
      grid-column: 1 / 4;
    `}
  `}

  a:link,
  a:visited {
    text-decoration: none;
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.subhed')};
  }

  a:active,
  a:focus,
  a:hover {
    text-decoration: underline;
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.subhed')};
  }

  .icon-arrow {
    margin-top: 2px;
    margin-left: 3px;
  }

  a + .icon-arrow {
    margin-top: 7px;
    margin-left: 3px;
  }
`;
const ExternalLinkEmbedBylines = styled(Bylines).withConfig({
    displayName: 'ExternalLinkEmbedBylines'
}) ``;
const ExternalLinkEmbedHed = styled(BaseText).withConfig({
    displayName: 'ExternalLinkEmbedHed'
}) `
  display: inline;

  ${({ isLiveStory }) => isLiveStory &&
    `
    font-weight: unset;
    `}

  ${({ hasMeta }) => hasMeta
    ? `
    display: block;
    margin: 0 0 ${calculateSpacing(1)};
  `
    : ``}

  ${({ theme, layout }) => layout === 'inlineWithButton' &&
    `
      @media(min-width: ${BREAKPOINTS.md}){
        ${getTypographyStyles(theme, 'typography.definitions.discovery.hed-feature')}
      }
    `};
`;
ExternalLinkEmbedHed.defaultProps = {
    as: 'span',
    colorToken: 'colors.consumption.body.standard.subhed',
    typeIdentity: 'typography.definitions.discovery.hed-bulletin-primary'
};
const ExternalLinkEmbedDek = styled(BaseText).withConfig({
    displayName: 'ExternalLinkEmbedDek'
}) `
  ${({ layout }) => layout === 'large' || layout === 'inline'
    ? `
    margin: 0;
  `
    : ``}

  ${({ hasMeta }) => (hasMeta ? `display: inline;` : ``)}
`;
ExternalLinkEmbedDek.defaultProps = {
    as: 'p',
    colorToken: 'colors.consumption.body.standard.subhed',
    typeIdentity: 'typography.definitions.discovery.description-core'
};
const ExternalLinkEmbedRubric = styled(BaseText).withConfig({
    displayName: 'ExternalLinkEmbedRubric'
}) ``;
ExternalLinkEmbedRubric.defaultProps = {
    as: 'div',
    bottomSpacing: 2,
    colorToken: 'colors.consumption.body.standard.display-signature',
    typeIdentity: 'typography.definitions.globalEditorial.context-primary'
};
const ExternalLinkEmbedArrowIcon = styled(Arrow).withConfig({
    displayName: 'ExternalLinkEmbedArrowIcon'
}) `
  position: absolute;

  path {
    ${({ theme }) => getColorStyles(theme, 'fill', 'colors.discovery.body.white.accent')};
  }
`;
const ExternalLinkEmbedButton = styled(Button).withConfig({
    displayName: 'ExternalLinkEmbedButton'
}) `
  margin-top: ${calculateSpacing(3)};
  border: 2px solid ${getColorToken('colors.interactive.base.black')};

  @media (min-width: ${BREAKPOINTS.md}) {
    margin-top: ${calculateSpacing(2)};
  }

  ${({ theme }) => `
      ${getTypographyStyles(theme, 'typography.definitions.utility.button-utility')}};
    `};
`;
const ExternalLinkEmbedButtonWrapper = styled.div.withConfig({
    displayName: 'ExternalLinkEmbedButtonWrapper'
}) `
  a:link,
  a:visited {
    text-decoration: none;
    ${({ theme }) => `
          
            ${getColorStyles(theme, 'color', 'colors.interactive.base.black')};
        `};
  }

  a:active,
  a:focus,
  a:hover {
    text-decoration: none;
    ${({ theme }) => `
          ${getColorStyles(theme, 'background-color', 'colors.interactive.base.black')}
          
            ${getColorStyles(theme, 'color', 'colors.interactive.base.white')};
          
        `};
  }
`;
module.exports = {
    ExternalLinkEmbedArrowIcon,
    ExternalLinkEmbedResponsiveImage,
    ExternalLinkEmbedBylines,
    ExternalLinkEmbedWrapper,
    ExternalLinkEmbedText,
    ExternalLinkEmbedHed,
    ExternalLinkEmbedDek,
    ExternalLinkEmbedRubric,
    ExternalLinkEmbedButton,
    ExternalLinkEmbedButtonWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 98188:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { defineMessages } = __webpack_require__(46984);
module.exports = defineMessages({
    rubric: {
        id: 'ExternalLinkEmbed.Rubric',
        defaultMessage: 'Read More',
        description: 'External Link Embed Rubric default text'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 18206:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const ExternalLinkEmbed = __webpack_require__(86418);
ExternalLinkEmbed.Inline = asVariation(ExternalLinkEmbed, 'Inline', {
    layout: 'inline'
});
ExternalLinkEmbed.Large = asVariation(ExternalLinkEmbed, 'Large', {
    layout: 'large'
});
ExternalLinkEmbed.InlineWithButton = asVariation(ExternalLinkEmbed, 'InlineWithButton', {
    layout: 'inlineWithButton'
});
module.exports = ExternalLinkEmbed;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 84214:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { TrackComponentChannel } = __webpack_require__(78788);
const { CalloutFeatureLargeContentPromoEmbed, CalloutFeatureLargeWrapper } = __webpack_require__(77819);
/**
 * FeatureLargeCallout component
 *
 * @param {string} [className] - Optional top-level class to add
 * @param {string} name - The callout name
 *
 * @returns {ReactElement} <div>
 */
const FeatureLargeCallout = ({ children, name }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'FeatureLargeCallout'
        });
    }, []);
    const getChildwithEmbedSize = (child) => React.cloneElement(child, { embedSize: name });
    return (React.createElement(CalloutFeatureLargeWrapper, { "data-testid": "feature-large-callout", calloutFeatureLargeNested: children.length === 2 }, React.Children.map(children, (child) => {
        if (child.props.contentType === 'gallery') {
            return React.createElement(CalloutFeatureLargeContentPromoEmbed, { ...child.props });
        }
        // by checking for the key "embedSize" in the object child.props,
        // we confirm whether the component is <ProductEmbed> and assign
        // the name value.
        else if ('embedSize' in child.props && name === 'feature-large') {
            return getChildwithEmbedSize(child);
        }
        return child;
    })));
};
FeatureLargeCallout.propTypes = {
    children: PropTypes.node.isRequired,
    className: PropTypes.string,
    name: PropTypes.string
};
module.exports = FeatureLargeCallout;
//# sourceMappingURL=FeatureLargeCallout.js.map

/***/ }),

/***/ 85617:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(84214);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 77819:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing, getColorStyles, getTypographyStyles, minScreen, maxScreen, styledProperty } = __webpack_require__(26865);
const { applyGridSpacing } = __webpack_require__(1123);
const { BREAKPOINTS } = __webpack_require__(96472);
const { CaptionWrapper, CaptionText, CaptionCredit } = __webpack_require__(38860);
const ContentPromoEmbed = __webpack_require__(86447);
const { AssetEmbedWrapper } = __webpack_require__(41108);
const { MixedMediaCarouselButtonWrapper } = __webpack_require__(31243);
const CalloutFeatureLargeWrapper = styled.div.withConfig({
    displayName: 'CalloutFeatureLargeWrapper'
}) `
  margin: 0;

  &&& {
    ${AssetEmbedWrapper} {
      margin: 0 auto ${calculateSpacing(5)} auto;
    }
  }
  ${CaptionWrapper} {
    margin: ${calculateSpacing(1, 'px')} 0 0;
  }

  .body__grid-container & {
    ${CaptionWrapper} {
      margin-right: ${calculateSpacing(3)};
      margin-left: ${calculateSpacing(3)};

      ${minScreen(BREAKPOINTS.md)} {
        margin-right: ${calculateSpacing(1)};
        margin-left: ${calculateSpacing(1)};
      }
    }

    ${MixedMediaCarouselButtonWrapper} {
      margin-right: ${calculateSpacing(3)};
    }

    figure:only-of-type ${CaptionWrapper} {
      ${applyGridSpacing('margin')};
      display: grid;
      grid-gap: 0 ${calculateSpacing(3)};
      grid-template-columns: repeat(12, 1fr);
      max-width: ${BREAKPOINTS.xxl};

      ${maxScreen(BREAKPOINTS.md)} {
        margin-right: ${calculateSpacing(3)};
        margin-left: ${calculateSpacing(3)};
      }

      ${CaptionText},
      ${CaptionCredit} {
        grid-column: 1 / -1;

        ${minScreen(BREAKPOINTS.md)} {
          grid-column: 2 / -2;
        }
      }
    }
  }

  .asset-embed__responsive-asset {
    width: 100%;
  }

  .responsive-cartoon {
    &::before {
      display: inline-block;
      grid-column: 1/-1;
      border-width: 0 0 1px;
      border-style: solid;
      height: 0;
      content: '';

      ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.consumption.body.standard.divider')};
    }

    &::after {
      ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.consumption.body.standard.divider')};

      display: inline-block;
      grid-column: 1/-1;
      border-width: 1px 0 0;
      border-style: solid;
      height: 0;
      content: '';
    }
  }

  .responsive-cartoon__caption {
    ${getTypographyStyles('typography.definitions.globalEditorial.context-secondary')}
    margin-top: 0;
  }

  ${styledProperty('calloutFeatureLargeNested', true, `
    display: flex;
    flex-direction: column;
    margin-bottom: ${calculateSpacing(1, 'px')};

    @media (min-width: ${BREAKPOINTS.md}) {
      flex-direction: row;
      margin: 0;

      .asset-embed {
        margin: 0;
        padding: 0 0 0 ${calculateSpacing(1)};
        width: 50%;

        &:first-child {
          padding: 0 ${calculateSpacing(1)} 0 0;
        }
      }
    }
  `)}
`;
const CalloutFeatureLargeContentPromoEmbed = styled(ContentPromoEmbed).withConfig({ displayName: 'CalloutFeatureLargeContentPromoEmbed' }) ``;
module.exports = {
    CalloutFeatureLargeContentPromoEmbed,
    CalloutFeatureLargeWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 47082:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const Star = __webpack_require__(68642);
const ResponsiveAsset = __webpack_require__(86157);
const { TrackComponentChannel } = __webpack_require__(78788);
const Rubric = __webpack_require__(34187);
const { FeatureRatingsCardWrapper, ImageWrapper, Image, Label, Link, ContentWrapper, Content, Body, Hed, Dek, MetaData, Rating, SourceTagNameWrapper } = __webpack_require__(19118);
/**
 * FeatureRatingsCard component
 *
 * @param {object} [analyticsDataAttribute] - Optional data-section-title attribute for component level tracking
 * @param {string} dangerousHed - Required string value to display hed
 * @param {string} [dangerousDek] - Required value to show the ingredients or dek
 * @param {string} [hedTag] - Option to override the default header html tag when nested within a higher level header
 * @param {boolean} [hideRubricItemSummary] - Optional. Set `true` for hide rubrics, set `false` for show rubrics.
 * @param {boolean} [props.hideSourceTagName] - Optional Set `true` to hide sourceTagName
 * @param {ResponsiveAsset.propTypes} [image] - Object containing sources for a ResponsiveAsset
 * @param {Array} [imageLabels] - String values to specify imageLabels
 * @param {number} [rating] - Optional one used to showing ratings
 * @param {number} [reviewsCount] - Optional one used to displaying number of reviewers
 * @param {object} rubric - The rubric for the piece of content
 * @param {string} sourceTagName - The source of the content
 * @param {bool} [shouldHoldImageSpace] - Option to hold image space
 * @param {string} url - Required url to direct to content

 * @returns {ReactElement} <div>
 */
const FeatureRatingsCard = ({ analyticsDataAttribute, dangerousHed, dangerousDek, hedTag = 'h3', hideRubricItemSummary = false, hideSourceTagName, image, imageLabels, rating, reviewsCount, rubric, shouldHoldImageSpace = true, sourceTagName, url }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'FeatureRatingsCard'
        });
    }, []);
    const showImageWithoutLink = image && image.showImageWithoutLink;
    const goToLink = () => {
        if (showImageWithoutLink)
            window.location = url;
    };
    const featureRatingsCardImage = (React.createElement(React.Fragment, null,
        React.createElement(Image, { ...image, shouldHoldImageSpace: shouldHoldImageSpace }),
        imageLabels && imageLabels.length
            ? imageLabels.map((imageLabel, i) => (React.createElement(Label, { key: i.toString() }, imageLabel)))
            : null));
    if (!url || !dangerousHed)
        return null;
    return (React.createElement(FeatureRatingsCardWrapper, { ...analyticsDataAttribute },
        image && (React.createElement(ImageWrapper, { onClick: goToLink }, showImageWithoutLink ? (featureRatingsCardImage) : (React.createElement(Link, { href: url }, featureRatingsCardImage)))),
        React.createElement(ContentWrapper, null,
            React.createElement(Content, null,
                React.createElement(Body, null,
                    !hideRubricItemSummary && rubric && React.createElement(Rubric, { name: rubric.name }),
                    !hideSourceTagName && sourceTagName && (React.createElement(SourceTagNameWrapper, null,
                        "\u00A0",
                        `| From ${sourceTagName}`)),
                    React.createElement(Link, { href: url },
                        React.createElement(Hed, { as: hedTag, dangerouslySetInnerHTML: { __html: dangerousHed } })),
                    React.createElement(Dek, { dangerouslySetInnerHTML: { __html: dangerousDek } }))),
            rating && reviewsCount ? (React.createElement(MetaData, null,
                React.createElement(Star, null),
                React.createElement(Rating, null,
                    rating,
                    " (",
                    reviewsCount,
                    ")"))) : null)));
};
FeatureRatingsCard.propTypes = {
    analyticsDataAttribute: PropTypes.object,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string.isRequired,
    hedTag: PropTypes.string,
    hideRubricItemSummary: PropTypes.bool,
    hideSourceTagName: PropTypes.bool,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    imageLabels: PropTypes.arrayOf(PropTypes.string),
    rating: PropTypes.number,
    reviewsCount: PropTypes.number,
    rubric: PropTypes.shape(Rubric.propTypes),
    shouldHoldImageSpace: PropTypes.bool,
    sourceTagName: PropTypes.string,
    url: PropTypes.string.isRequired
};
module.exports = FeatureRatingsCard;
//# sourceMappingURL=FeatureRatingsCard.js.map

/***/ }),

/***/ 94258:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(47082);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 19118:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BREAKPOINTS } = __webpack_require__(96472);
const { BaseText, BaseLink } = __webpack_require__(76955);
const { minScreen, calculateSpacing, getColorStyles, getDecoration } = __webpack_require__(26865);
const ResponsiveAsset = __webpack_require__(86157);
const FeatureRatingsCardWrapper = styled.div.withConfig({
    displayName: 'FeatureRatingsCardWrapper'
}) ``;
const Link = styled(BaseLink).withConfig({ displayName: 'Link' }) ``;
Link.defaultProps = {
    colorToken: 'colors.discovery.body.white.heading',
    linkStyle: 'global'
};
const ImageWrapper = styled.div.withConfig({ displayName: 'ImageWrapper' }) `
  position: relative;
`;
const Image = styled(ResponsiveAsset).withConfig({ displayName: 'Image' }) `
  img {
    border-radius: ${({ theme }) => getDecoration(theme, 'cardRadiusMd')};

    ${minScreen(BREAKPOINTS.md)} {
      border-radius: ${({ theme }) => getDecoration(theme, 'cardRadiusLg')};
    }
  }
  cursor: pointer;
`;
const Label = styled(BaseText).withConfig({ displayName: 'Label' }) `
  position: absolute;
  top: ${calculateSpacing(1)};
  left: ${calculateSpacing(1)};
  margin: 0 ${calculateSpacing(1)} 0 0;
  border-radius: ${calculateSpacing(3)};
  padding: ${calculateSpacing(0.5)} ${calculateSpacing(1)};

  ${({ theme }) => getColorStyles(theme, 'background', 'colors.discovery.body.brand.background')};

  ${minScreen(BREAKPOINTS.md)} {
    top: ${calculateSpacing(2)};
    left: ${calculateSpacing(2)};
    padding: ${calculateSpacing(1)} ${calculateSpacing(2)};
  }
`;
Label.defaultProps = {
    as: 'div',
    colorToken: 'colors.discovery.body.brand.heading',
    typeIdentity: 'typography.definitions.globalEditorial.tags'
};
const ContentWrapper = styled.div.withConfig({ displayName: 'ContentWrapper' }) `
  border-radius: ${({ theme }) => getDecoration(theme, 'cardRadiusMd')};
  padding: ${calculateSpacing(2)} ${calculateSpacing(1)} ${calculateSpacing(1)};

  ${minScreen(BREAKPOINTS.md)} {
    border-radius: ${({ theme }) => getDecoration(theme, 'cardRadiusLg')};
    padding: ${calculateSpacing(2)} ${calculateSpacing(1)}
      ${calculateSpacing(1)};
  }

  ${minScreen(BREAKPOINTS.lg)} {
    padding: ${calculateSpacing(3)} ${calculateSpacing(1)}
      ${calculateSpacing(1)};
  }
`;
const Content = styled.div.withConfig({ displayName: 'Content' }) `
  padding: 0 0 ${calculateSpacing(2)};
`;
const Body = styled.div.withConfig({ displayName: 'Body' }) ``;
const Hed = styled(BaseText).withConfig({ displayName: 'Hed' }) `
  margin: 0 0 ${calculateSpacing(1)};

  ${minScreen(BREAKPOINTS.md)} {
    margin: 0 0 ${calculateSpacing(2)};
  }
`;
Hed.defaultProps = {
    as: 'h3',
    colorToken: 'colors.discovery.body.white.heading',
    typeIdentity: 'typography.definitions.discovery.hed-feature'
};
const Dek = styled(BaseText).withConfig({ displayName: 'Dek' }) ``;
Dek.defaultProps = {
    as: 'div',
    colorToken: 'colors.discovery.body.white.description',
    typeIdentity: 'typography.definitions.discovery.description-core'
};
const MetaData = styled.div.withConfig({ displayName: 'MetaData' }) `
  display: flex;
  flex-direction: row;
  align-items: center;
  height: ${calculateSpacing(4)};
`;
const Rating = styled(BaseText).withConfig({ displayName: 'Rating' }) `
  margin: 0 ${calculateSpacing(1)};
`;
Rating.defaultProps = {
    as: 'div',
    colorToken: 'colors.discovery.body.white.accreditation',
    typeIdentity: 'typography.definitions.globalEditorial.numerical-small'
};
const SourceTagNameWrapper = styled(BaseText).withConfig({
    displayName: 'SourceTagNameWrapper'
}) `
  display: inline-block;
`;
SourceTagNameWrapper.defaultProps = {
    as: 'div',
    colorToken: 'colors.consumption.lead.standard.heading',
    typeIdentity: 'typography.definitions.globalEditorial.context-primary'
};
module.exports = {
    FeatureRatingsCardWrapper,
    Link,
    ImageWrapper,
    Image,
    Label,
    ContentWrapper,
    Content,
    Body,
    Hed,
    Dek,
    MetaData,
    Rating,
    SourceTagNameWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 83077:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { TrackComponentChannel } = __webpack_require__(78788);
const { FeedItemWrapper, FeedItemTime, FeedItemContent, FeedItemLink, FeedItemHead, FeedItemDek } = __webpack_require__(53712);
/**
 * FeedItem
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} props.dangerousDek - Article dek
 * @param {string} props.dangerousHed - Article hed
 * @param {string} props.href - Article href
 * @param {string} props.publishDate - Publish Date
 *
 */
const FeedItem = ({ className, dangerousDek, dangerousHed, href, publishDate }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'FeedItem'
        });
    }, []);
    return (React.createElement(FeedItemWrapper, { className: className },
        React.createElement(FeedItemTime, null, publishDate),
        React.createElement(FeedItemContent, null,
            React.createElement(FeedItemLink, { href: href },
                React.createElement(FeedItemHead, { dangerouslySetInnerHTML: { __html: dangerousHed } })),
            React.createElement(FeedItemDek, { dangerouslySetInnerHTML: { __html: dangerousDek } }))));
};
FeedItem.propTypes = {
    className: PropTypes.string,
    dangerousDek: PropTypes.string.isRequired,
    dangerousHed: PropTypes.string.isRequired,
    href: PropTypes.string.isRequired,
    publishDate: PropTypes.string.isRequired
};
FeedItem.displayName = 'FeedItem';
module.exports = FeedItem;
//# sourceMappingURL=FeedItem.js.map

/***/ }),

/***/ 35508:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(83077);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 53712:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BaseLink, BaseText } = __webpack_require__(76955);
const { getColorStyles, calculateSpacing, getTypographyStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const FeedItemWrapper = styled.div.withConfig({
    displayName: 'FeedItemWrapper'
}) `
  border-width: 0 0 1px;
  border-style: solid;
  ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.discovery.body.white.divider')};
  padding-top: ${calculateSpacing(2)};
  padding-bottom: ${calculateSpacing(2)};
  text-align: left;

  @media (min-width: ${BREAKPOINTS.md}) {
    display: grid;
    grid-column: 1 / span 12;
    grid-template-columns: repeat(12, 1fr);
  }

  &:first-of-type {
    border: 1px 0 0;
    border-style: solid;
    ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.discovery.body.white.divider')};
  }
`;
const FeedItemTime = styled.time.withConfig({ displayName: 'FeedItemTime' }) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-tertiary')};
  display: block;
  margin-bottom: ${calculateSpacing(2)};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.discovery.body.white.context-tertiary')};

  @media (min-width: ${BREAKPOINTS.md}) {
    grid-column: 1;
    margin-top: ${calculateSpacing(0.5)};
  }
`;
const FeedItemContent = styled.div.withConfig({
    displayName: 'FeedItemContent'
}) `
  @media (min-width: ${BREAKPOINTS.md}) {
    grid-column: 2 / span 8;
    margin-top: ${calculateSpacing(0.5)};
  }
`;
const FeedItemLink = styled(BaseLink).withConfig({
    displayName: 'FeedItemLink'
}) `
  margin-top: 0;
  margin-bottom: ${calculateSpacing(2)};
  text-decoration: none;

  &:hover,
  &:focus {
    text-decoration: underline;
  }
`;
FeedItemLink.defaultProps = {
    colorToken: 'colors.discovery.body.white.heading',
    typeToken: 'typography.definitions.discovery.hed-bulletin-primary'
};
const FeedItemHead = styled(BaseText).withConfig({
    displayName: 'FeedItemHead'
}) `
  margin-top: 0;
  margin-bottom: ${calculateSpacing(2)};
  text-decoration: none;

  &:hover,
  &:focus {
    text-decoration: underline;
  }
`;
FeedItemHead.defaultProps = {
    as: 'h2',
    colorToken: 'colors.discovery.body.white.heading',
    typeIdentity: 'typography.definitions.discovery.hed-bulletin-primary'
};
const FeedItemDek = styled.div.withConfig({ displayName: 'FeedItemDek' }) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.description-core')};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.discovery.body.white.description')};
`;
module.exports = {
    FeedItemWrapper,
    FeedItemTime,
    FeedItemContent,
    FeedItemLink,
    FeedItemHead,
    FeedItemDek
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 70713:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getLastIndexElement = exports.getNextIndexElement = exports.onScrollComplete = exports.isForwardArrowActive = exports.isBackwardArrowActive = exports.handleOnScrollStop = exports.getForcastImagesToScroll = exports.scrollElementToIndex = void 0;
const { isScrollAtEnd, isScrollAtStart } = __webpack_require__(30271);
let timeout;
const getListEl = (ref) => ref?.current?.querySelector('ul');
const isImageInViewport = (parentEl, childEl) => {
    const parentElRect = parentEl.getBoundingClientRect();
    const childElRect = childEl.getBoundingClientRect();
    return (parentElRect.left < childElRect.left &&
        parentElRect.right > childElRect.right);
};
const scrollElementToIndex = (index, ref) => {
    const el = getListEl(ref);
    const scrollToElementIndex = index || 1;
    const childEl = el?.querySelector(`li:nth-child(${scrollToElementIndex})`);
    const childElOffset = childEl?.offsetLeft;
    el.scrollTo({
        left: childElOffset,
        behavior: 'smooth'
    });
};
exports.scrollElementToIndex = scrollElementToIndex;
const getForcastImagesToScroll = (ref) => {
    const ulEl = getListEl(ref);
    if (ulEl) {
        const childWidth = ulEl?.querySelector('li');
        /**
         * -1 is to make the not fully visible image in the current viewport at end,
         * to be visible in the next scrolling window
         * */
        return (Math.floor((ulEl?.offsetWidth ?? 0) / (childWidth?.offsetWidth ?? 1)) - 3);
    }
    return 0;
};
exports.getForcastImagesToScroll = getForcastImagesToScroll;
const handleOnScrollStop = (ref) => {
    const ulEl = getListEl(ref);
    const liEls = ulEl?.querySelectorAll('li');
    let index;
    for (index = 0; index < liEls?.length; index++) {
        if (isImageInViewport(ulEl, liEls[index])) {
            break;
        }
    }
    return index;
};
exports.handleOnScrollStop = handleOnScrollStop;
const isBackwardArrowActive = (ref) => {
    const el = getListEl(ref);
    return el && !isScrollAtStart(el);
};
exports.isBackwardArrowActive = isBackwardArrowActive;
const isForwardArrowActive = (ref) => {
    const el = getListEl(ref);
    return el && !isScrollAtEnd(el);
};
exports.isForwardArrowActive = isForwardArrowActive;
const onScrollComplete = (callback) => {
    return () => {
        clearTimeout(timeout);
        timeout = setTimeout(() => callback(), 100);
    };
};
exports.onScrollComplete = onScrollComplete;
const getNextVisibleIndex = (currentIndex, ref, op, itemPerIteration) => {
    const el = getListEl(ref);
    let liIndex = currentIndex;
    if (op < 0) {
        liIndex += itemPerIteration;
    }
    const childEl = el?.querySelector(`li:nth-child(${liIndex})`);
    if (isImageInViewport(el, childEl)) {
        const newIndex = currentIndex + op;
        return getNextVisibleIndex(newIndex, ref, op);
    }
    return currentIndex;
};
const getLastIndexElement = (currentIndex, imagesPerIteration, ref) => {
    let index = currentIndex - imagesPerIteration;
    index = getNextVisibleIndex(index, ref, -1, imagesPerIteration);
    return index + 1 < 1 ? 1 : index + 1;
};
exports.getLastIndexElement = getLastIndexElement;
const getNextIndexElement = (currentIndex, imagesPerIteration, ref) => {
    let index = currentIndex + imagesPerIteration;
    const collection = getListEl(ref).querySelectorAll('li');
    index = index > collection?.length ? collection?.length : index;
    return getNextVisibleIndex(index, ref, 1);
};
exports.getNextIndexElement = getNextIndexElement;
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 84399:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const { connect: connectToStore } = __webpack_require__(67851);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(92039)/* ["default"] */ .A);
const ResponsiveAsset = __webpack_require__(73275);
const ResponsiveCartoon = __webpack_require__(44597);
const { getVariationNames } = __webpack_require__(81372);
const Ad = __webpack_require__(31850);
const { PaymentGateway } = __webpack_require__(92807);
const { maxThresholds } = __webpack_require__(99906);
const { useResizeObserver } = __webpack_require__(70251);
const { useAnalytics, analyticsTextConstant } = __webpack_require__(70746);
const { GalleryCarouselContainer, GalleryCarouselHeader, GalleryCarouselTitle, GalleryCarouselTitleText, GalleryCarouselHeaderRecirc, GalleryCarouselNextWrapper, GalleryCarouselPrevWrapper, GalleryCarouselNavigation, GalleryCarouselCountWrapper, GalleryCarouselCount, GalleryCarouselContent, GalleryCarouselSlider, GalleryCarouselSliderWrapper, GalleryCarouselSectionTitle } = __webpack_require__(99621);
const { MidRecirc, EndRecirc, NewsletterRecirc } = __webpack_require__(75895);
const SectionTitle = __webpack_require__(35864);
/**
 * GalleryCarousel component
 *
 * @param {object} props - Props to the GalleryCarousel
 * @param {string} [props.carouselPlacedIn] - Where the Gallery Carousel is placed.
 * @param {string} props.dangerousNavigationIcon - Optional, Icon for the slider navigation button
 * @param {boolean} [props.isModalOpen] - Flag to open/close Modal
 * @param {Array} props.items - List of gallery items to slide
 * @param {string} [props.responsiveCartoonVariation] - Variation for ResponsiveCartoon
 * @param {bool} [props.shouldDisableImageClick] - To disable the image click
 * @param {bool} [props.shouldHoldImageSpace] - To hold space for the image
 * @param {bool} [props.shouldImageLazyLoad] - To lazy load images
 * @param {bool} [props.shouldUseMediumBreakpoint] - Flag to define whether generate a medium breakpoint.
 * @param {bool} [props.shouldUseModalStyle] - To include style changes required to rendered inside the generic modal component
 * @param {bool} [props.showHeadRecirc] - To show the gallery head recirculation link
 * @param {bool} [props.showPublishedDate] - To show the published date
 * @param {string} [props.title] - Title of the gallery
 * @param {boolean} [props.titleLinkURL] - Optional URL of the gallery to enable link for title
 * @param {object} [props.user] - Optional user details from redux for newsletter module
 * @param {boolean} props.user.isAuthenticated - represents if the user is currently authenticated
 * @param {boolean} props.user.email - Optional user email if the user is currently authenticated
 * @param {object} props.variations - Optional variations for the GalleryCarousel
 * @param {boolean} props.variations.fullBleedSlide - variation prop for making each slide full bleed
 * @param {boolean} props.variations.mobileSlider - variation prop for using slider view for mobile
 * @param {boolean} props.variations.useSectionTitle - variation prop for using sectionTitle as header
 * @param {string} props.id - Gallery Id
 *
 * @returns {GalleryCarousel} <div>
 */
const GalleryCarousel = ({ carouselPlacedIn = 'modal', dangerousNavigationIcon = '<svg focusable="false" viewBox="0 0 32 32" width="32" height="32" xmlns="http://www.w3.org/2000/svg" > <path d="M22.33 15.5l-6.924-6.925.707-.707L24.245 16l-8.132 8.132-.707-.707 6.925-6.925H8v-1z" fillRule="nonzero"/> </svg>', id: galleryID, isModalOpen, items: slides, responsiveCartoonVariation = 'SliderCartoon', shouldDisableImageClick = true, shouldHoldImageSpace = false, shouldImageLazyLoad = true, shouldUseMediumBreakpoint = true, shouldUseModalStyle = false, showHeadRecirc = true, showPublishedDate = false, title = '', titleLinkURL = '', user, variations = {
    fullBleedSlide: false,
    useSectionTitle: false,
    mobileSlider: false
} }) => {
    const { fullBleedSlide, mobileSlider, useSectionTitle } = variations;
    const { formatMessage } = useIntl();
    const [headerHeight, setHeaderHeight] = React.useState(0);
    const [nextCurrent, setNextCurrent] = React.useState(0);
    const [currentSlide, setCurrentSlide] = React.useState(0);
    const [animate, setAnimate] = React.useState(false);
    const [isSmallDevice, setIsSmallDevice] = React.useState(false);
    // this is solution for newsletter not picking css on re-render (Case: logged-n user)
    const [isLoggedInUser, setIsLoggedInUser] = React.useState(false);
    const getIsSmallDevice = () => {
        if (window) {
            const media = window.matchMedia(`(max-width: ${maxThresholds.lg}px)`);
            return Boolean(media?.matches);
        }
        return false;
    };
    useResizeObserver(() => setIsSmallDevice(getIsSmallDevice()));
    const titleRef = React.useRef();
    const [sequence, setSequence] = React.useState({
        // two boolean array represent the [prev, next] buttons should be displayed or not
        action: new Array(2).fill(false),
        // two number/null array represent the [prev, next] slides should be displayed or not
        slide: new Array(2).fill(null)
    });
    const lastSlideIndex = slides.length - 1;
    const isLastSlide = currentSlide === lastSlideIndex;
    const shouldShowEndRecirc = slides.length > 0 &&
        slides[lastSlideIndex].hasEndRecirc &&
        slides[lastSlideIndex].recircGalleries[0] &&
        Boolean(slides[lastSlideIndex].recircGalleries[0].url) &&
        Boolean(slides[lastSlideIndex].recircGalleries[0].dangerousHed);
    const shouldShowHeadRecirc = showHeadRecirc && shouldShowEndRecirc && !isLastSlide;
    // should not render headRecirc at the last slide if shouldShowEndRecirc is true
    const headRecircGallery = shouldShowHeadRecirc
        ? slides[lastSlideIndex].recircGalleries[0]
        : {};
    const analyticsData = {
        carouselPlacedIn,
        currentSlideIndex: currentSlide,
        getIsSmallDevice,
        hasHeadRecirc: shouldShowHeadRecirc,
        headRecircGallery,
        isModalOpen,
        slides,
        titleRef,
        galleryID
    };
    const { triggerSlideAction, triggerMobileRecircImpression, triggerNewsletterInteraction, triggerRecircInteraction } = useAnalytics(analyticsData);
    React.useEffect(() => setIsSmallDevice(getIsSmallDevice()), []);
    React.useEffect(() => {
        const sequencing = {
            action: new Array(2).fill(false),
            slide: new Array(2).fill(null)
        };
        const nextIndex = currentSlide + 1;
        const prevIndex = currentSlide - 1;
        if (prevIndex >= 0) {
            sequencing.action[0] = true;
            if (!slides[prevIndex].hidePreview) {
                sequencing.slide[0] = prevIndex;
            }
        }
        if (nextIndex < slides.length) {
            sequencing.action[1] = true;
            if (!slides[nextIndex].hidePreview) {
                sequencing.slide[1] = nextIndex;
            }
        }
        setSequence(sequencing);
    }, [currentSlide, slides]);
    React.useEffect(() => {
        if (!shouldUseModalStyle) {
            const siteHeader = document.querySelector('[class^="StackedNavigationTop"]');
            setHeaderHeight(siteHeader?.offsetHeight || 0);
        }
    }, [shouldUseModalStyle]);
    React.useEffect(() => {
        if (user?.isAuthenticated && Boolean(user?.email) && !isLoggedInUser) {
            setIsLoggedInUser(true);
        }
    }, [user?.isAuthenticated, user?.email, isLoggedInUser]);
    const handleSlideAction = (index) => {
        if (index >= 0 && index < slides.length) {
            setAnimate(true);
            setNextCurrent(index);
            triggerSlideAction(index);
        }
    };
    const handleAnimationEnd = (index) => {
        // If animate state is true, this function is called on fadeOut animation end else on fadeIn animation end
        // compare index value to verify this function called after the current slide component animation end
        // set animate state as false to start the fadeIn animation
        if (animate && index === currentSlide) {
            setCurrentSlide(nextCurrent);
            setAnimate(false);
        }
    };
    if (!(Array.isArray(slides) && slides.length > 0)) {
        return null;
    }
    const handleHeadRecirc = (event, recircData) => {
        event.preventDefault();
        triggerRecircInteraction(analyticsTextConstant.headRecirc, recircData);
        window.open(recircData.url, '_blank', 'noopener,noreferrer');
    };
    const titleProps = titleLinkURL
        ? {
            href: titleLinkURL,
            target: '_blank'
        }
        : { as: 'span' };
    return (React.createElement(GalleryCarouselContainer, { shouldUseModalStyle: shouldUseModalStyle, headerHeight: headerHeight, key: isLoggedInUser, "data-testid": "gallery-carousel-container" },
        !useSectionTitle && (React.createElement(GalleryCarouselHeader, { shouldUseModalStyle: shouldUseModalStyle },
            React.createElement(GalleryCarouselTitle, { ref: titleRef, "data-testid": "gallery-carousel-title" },
                React.createElement(GalleryCarouselTitleText, { ...titleProps, dangerouslySetInnerHTML: {
                        __html: title
                    } })),
            shouldShowHeadRecirc && (React.createElement(GalleryCarouselHeaderRecirc, { onClick: (event) => handleHeadRecirc(event, headRecircGallery), href: headRecircGallery.url, dangerouslySetInnerHTML: {
                    __html: `${formatMessage(translations.nextGallery)}: ${headRecircGallery.source.hed} »`
                }, "data-testid": "gallery-carousel-header-recirc" })))),
        useSectionTitle && (React.createElement(GalleryCarouselSectionTitle, { as: SectionTitle, dangerousHed: title })),
        React.createElement(GalleryCarouselSliderWrapper, { "data-testid": "gallery-carousel-slider-wrapper" },
            React.createElement(GalleryCarouselSlider, { isEndGalleryRecircCardOnMobile: !shouldUseModalStyle, mobileSlider: mobileSlider, "data-testid": "gallery-carousel-slider" },
                React.createElement(GalleryCarouselPrevWrapper, { isHidden: !sequence.action[0], mobileSlider: mobileSlider, "data-testid": "gallery-carousel-prev-wrapper" },
                    React.createElement(GalleryCarouselNavigation, { "aria-hidden": !sequence.action[0], "aria-label": formatMessage(translations.previous), dangerouslySetInnerHTML: {
                            __html: dangerousNavigationIcon
                        }, onClick: () => handleSlideAction(currentSlide - 1), isRotated: true, role: "button", tabIndex: 0 })),
                React.createElement(GalleryCarouselNextWrapper, { isHidden: !sequence.action[1], mobileSlider: mobileSlider, "data-testid": "gallery-carousel-next-wrapper" },
                    React.createElement(GalleryCarouselNavigation, { "aria-hidden": !sequence.action[1], "aria-label": formatMessage(translations.next), dangerouslySetInnerHTML: {
                            __html: dangerousNavigationIcon
                        }, onClick: () => handleSlideAction(currentSlide + 1), role: "button", tabIndex: 0 })),
                React.createElement(GalleryCarouselCountWrapper, { "data-testid": "gallery-carousel-count-wrapper" },
                    React.createElement(GalleryCarouselCount, { "data-testid": "gallery-carousel-count" }, `${currentSlide + 1}/${slides.length}`)),
                slides.map((item, index) => (React.createElement(GalleryCarouselContent, { key: index, "data-testid": `GalleryCarouselContent__slide_${index + 1}`, ...(index === currentSlide && {
                        'data-testid': 'current-slide'
                    }), className: classnames(item.className, {
                        'fade-in': !animate && index === currentSlide,
                        'fade-out': animate && index === currentSlide,
                        'fade-in-sequence': !animate && sequence.slide.includes(index),
                        'fade-out-sequence': animate && sequence.slide.includes(index),
                        'has-end-recirc': Boolean(item?.hasEndRecirc),
                        'is-mid-recirc-slide': Boolean(item?.isMidRecirc),
                        'is-ad-slide': Boolean(item?.isAd),
                        'is-newsletter-slide': Boolean(item?.isNewsletter),
                        'is-content-slide': Boolean(item?.isContent),
                        'is-xl-recirc-slide': Boolean(item?.isXLGalleryRecirc),
                        'current-slide': index === currentSlide
                    }, !fullBleedSlide && {
                        'prev-slide': index === sequence.slide[0],
                        'next-slide': index === sequence.slide[1],
                        'last-slide': index === lastSlideIndex
                    }), onAnimationEnd: () => handleAnimationEnd(index), "aria-hidden": index !== currentSlide, fullBleedSlide: fullBleedSlide, mobileSlider: mobileSlider, ...(shouldDisableImageClick && { 'data-disable-click': 'true' }) },
                    item?.isNewsletter && (React.createElement(NewsletterRecirc, { index: index, isSmallDevice: isSmallDevice, newsletter: item.newsletter, onInteractionAnalytics: triggerNewsletterInteraction, onMobileImpressionAnalytics: triggerMobileRecircImpression, user: user })),
                    item?.isAd && (React.createElement(PaymentGateway, { group: "ads" },
                        React.createElement(Ad, { position: "mid-gallery" }))),
                    item?.isMidRecirc && (React.createElement(MidRecirc, { index: index, isSmallDevice: isSmallDevice, recircGalleries: item.recircGalleries, onInteractionAnalytics: triggerRecircInteraction, onMobileImpressionAnalytics: triggerMobileRecircImpression })),
                    ['cartoon', 'photo'].includes(item?.contentType || '') && (React.createElement(ResponsiveAsset, { key: item.id, ...(item.image || item), isLazy: shouldImageLazyLoad, responsiveCartoonVariation: responsiveCartoonVariation, shouldDisableImageClick: shouldDisableImageClick, shouldHoldImageSpace: shouldHoldImageSpace, shouldUseMediumBreakpoint: shouldUseMediumBreakpoint, showPublishedDate: showPublishedDate, analyticsData: {
                            currentSlide: item,
                            cartoonPlacement: carouselPlacedIn,
                            cartoonPosition: index + 1,
                            totalNumberOfCartoons: slides.length,
                            galleryTitle: titleRef.current?.innerText || '',
                            currentSlideIndex: index,
                            galleryID,
                            slides,
                            isSmallDevice
                        } })),
                    item?.hasEndRecirc && (React.createElement(EndRecirc, { index: index, isSmallDevice: isSmallDevice, recircGalleries: item.recircGalleries, onInteractionAnalytics: triggerRecircInteraction, onMobileImpressionAnalytics: triggerMobileRecircImpression, shouldUseModalStyle: shouldUseModalStyle })))))))));
};
GalleryCarousel.propTypes = {
    carouselPlacedIn: PropTypes.oneOf(['gallery', 'modal', 'bundle']),
    dangerousNavigationIcon: PropTypes.string,
    id: PropTypes.string,
    isModalOpen: PropTypes.bool,
    items: PropTypes.array.isRequired,
    responsiveCartoonVariation: PropTypes.oneOf(getVariationNames(ResponsiveCartoon)),
    shouldDisableImageClick: PropTypes.bool,
    shouldHoldImageSpace: PropTypes.bool,
    shouldImageLazyLoad: PropTypes.bool,
    shouldUseMediumBreakpoint: PropTypes.bool,
    shouldUseModalStyle: PropTypes.bool,
    showHeadRecirc: PropTypes.bool,
    showPublishedDate: PropTypes.bool,
    title: PropTypes.string,
    titleLinkURL: PropTypes.string,
    user: PropTypes.shape({
        isAuthenticated: PropTypes.bool.isRequired,
        email: PropTypes.string
    }),
    variations: PropTypes.shape({
        fullBleedSlide: PropTypes.boolean,
        mobileSlider: PropTypes.boolean,
        useSectionTitle: PropTypes.boolean
    })
};
const mapStateToProps = (state) => ({
    isModalOpen: state.isModalOpen || false,
    user: state.user
});
module.exports = connectToStore(mapStateToProps)(GalleryCarousel);
//# sourceMappingURL=GalleryCarousel.js.map

/***/ }),

/***/ 75895:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const GalleryRecircCards = __webpack_require__(91361);
const ConnectedNewsletterSubscribeForm = __webpack_require__(577);
const ViewportMonitor = __webpack_require__(3990);
const { analyticsTextConstant } = __webpack_require__(70746);
const { GalleryCarouselNewsletterWrapper, GalleryCarouselMidRecircWrapper, GalleryCarouselEndRecircWrapper } = __webpack_require__(99621);
const getViewportMonitorProps = (isSmallDevice, onIntersectionViewport, analyticsData) => {
    if (!isSmallDevice) {
        return {};
    }
    return {
        as: ViewportMonitor,
        onIntersectionViewport,
        analyticsData
    };
};
/**
 * NewsletterRecirc component
 *
 * @param {object} props - Props to the NewsletterRecirc
 * @param {number} props.index - Index where the item palaced in the Gallery Carousel component.
 * @param {boolean} [props.isSmallDevice] - Optional, flag to represent the is small device or not
 * @param {boolean} [props.isTextFieldAlwaysStacked] - Optional, Whether text field is always stacked at all breakpoints
 * @param {object} props.newsletter - Newsletter data to be used in the component
 * @param {object} [props.newsletterType] - Optional string identifying newsletter variations
 * @param {Function} [props.onInteractionAnalytics] - function called if the newsletter subscription is successful
 * @param {Function} [props.onMobileImpressionAnalytics] - function called on small device if the item is in viewport
 * @param {object} [props.user] - Optional user details from redux for newsletter module
 * @param {boolean} props.user.isAuthenticated - represents if the user is currently authenticated
 * @param {string} [props.user.email] - Optional user email if the user is currently authenticated
 *
 * @returns {NewsletterRecirc} <div>
 */
const NewsletterRecirc = ({ index, isSmallDevice = false, isTextFieldAlwaysStacked = true, newsletter, newsletterType = 'slim-newsletter', onInteractionAnalytics = () => { }, onMobileImpressionAnalytics = () => { }, user }) => {
    // Additional props to trigger mobile impression analytics
    const mobileImpressionProps = getViewportMonitorProps(isSmallDevice, onMobileImpressionAnalytics, {
        index,
        placement: analyticsTextConstant.newsletter,
        newsletter
    });
    return (React.createElement(GalleryCarouselNewsletterWrapper, { ...mobileImpressionProps, ...(mobileImpressionProps.analyticsData && { 'data-analytics': 'true' }), "data-as": mobileImpressionProps.as === ViewportMonitor ? 'ViewportMonitor' : 'div', ...(mobileImpressionProps.onIntersectionViewport && {
            'data-on-intersection-viewport': 'true'
        }), "data-testid": mobileImpressionProps.as === ViewportMonitor
            ? 'newsletter-wrapper-viewport'
            : 'newsletter-wrapper' },
        React.createElement(ConnectedNewsletterSubscribeForm, { newsletterType: newsletterType, isTextFieldAlwaysStacked: isTextFieldAlwaysStacked, enableSlimUnitToggle: Boolean(user?.isAuthenticated && user?.email), userEmail: user?.email, ...(newsletter || {}), onSuccessHandler: () => onInteractionAnalytics(newsletter), patternType: "utility", "data-testid": "newsletter-form" })));
};
NewsletterRecirc.propTypes = {
    index: PropTypes.number.isRequired,
    isSmallDevice: PropTypes.bool,
    isTextFieldAlwaysStacked: PropTypes.bool,
    newsletter: PropTypes.object.isRequired,
    newsletterType: PropTypes.string,
    onInteractionAnalytics: PropTypes.func,
    onMobileImpressionAnalytics: PropTypes.func,
    user: PropTypes.shape({
        isAuthenticated: PropTypes.bool.isRequired,
        email: PropTypes.string
    })
};
/**
 * MidRecirc component
 *
 * @param {object} props - Props to the MidRecirc
 * @param {number} props.index - Index where the item palaced in the Gallery Carousel component.
 * @param {boolean} [props.isSmallDevice] - Optional, flag to represent the is small device or not
 * @param {Function} [props.onInteractionAnalytics] - function called on user interaction with the component
 * @param {Function} [props.onMobileImpressionAnalytics] - function called on small device if the item is in viewport
 * @param {Array} props.recircGalleries - Array of recirc galleries used in the component
 *
 * @returns {MidRecirc} <div>
 */
const MidRecirc = ({ index, isSmallDevice = false, recircGalleries, onInteractionAnalytics = () => { }, onMobileImpressionAnalytics = () => { } }) => {
    // Additional props to trigger mobile impression analytics
    const mobileImpressionProps = getViewportMonitorProps(isSmallDevice, onMobileImpressionAnalytics, {
        index,
        placement: analyticsTextConstant.midRecirc,
        recircGalleries
    });
    return (React.createElement(GalleryCarouselMidRecircWrapper, { ...mobileImpressionProps, ...(mobileImpressionProps.analyticsData && { 'data-analytics': 'true' }), "data-as": mobileImpressionProps.as === ViewportMonitor ? 'ViewportMonitor' : 'div', ...(mobileImpressionProps.onIntersectionViewport && {
            'data-on-intersection-viewport': 'true'
        }), "data-testid": mobileImpressionProps.as === ViewportMonitor
            ? 'mid-recirc-wrapper-viewport'
            : 'mid-recirc-wrapper' },
        React.createElement(GalleryRecircCards, { items: recircGalleries, recircInteractionAnalytics: (gallery) => onInteractionAnalytics(analyticsTextConstant.midRecirc, gallery, index), "data-testid": "recirc-cards", "data-items": JSON.stringify(recircGalleries) })));
};
MidRecirc.propTypes = {
    index: PropTypes.number.isRequired,
    isSmallDevice: PropTypes.bool,
    onInteractionAnalytics: PropTypes.func,
    onMobileImpressionAnalytics: PropTypes.func,
    recircGalleries: PropTypes.array.isRequired
};
/**
 * EndRecirc component
 *
 * @param {object} props - Props to the EndRecirc
 * @param {number} props.index - Index where the item palaced in the Gallery Carousel component.
 * @param {boolean} [props.isSmallDevice] - Optional, flag to represent the is small device or not
 * @param {Function} [props.onInteractionAnalytics] - function called on user interaction with the component
 * @param {Function} [props.onMobileImpressionAnalytics] - function called on small device if the item is in viewport
 * @param {Array} props.recircGalleries - Array of recirc galleries used in the component
 * @param {boolean} [props.shouldUseModalStyle] - To include style changes required to rendered inside the generic modal component
 *
 * @returns {EndRecirc} <div>
 */
const EndRecirc = ({ index, isSmallDevice = false, recircGalleries, onInteractionAnalytics = () => { }, onMobileImpressionAnalytics = () => { }, shouldUseModalStyle = false }) => {
    // Additional props to trigger mobile impression analytics
    const mobileImpressionProps = getViewportMonitorProps(isSmallDevice, onMobileImpressionAnalytics, {
        index,
        placement: analyticsTextConstant.endRecirc,
        recircGalleries
    });
    return (React.createElement(GalleryCarouselEndRecircWrapper, { ...mobileImpressionProps, ...(mobileImpressionProps.analyticsData && { 'data-analytics': 'true' }), "data-as": mobileImpressionProps.as === ViewportMonitor ? 'ViewportMonitor' : 'div', ...(mobileImpressionProps.onIntersectionViewport && {
            'data-on-intersection-viewport': 'true'
        }), "data-testid": mobileImpressionProps.as === ViewportMonitor
            ? 'end-recirc-wrapper-viewport'
            : 'end-recirc-wrapper' },
        React.createElement(GalleryRecircCards, { isEndOfPageRecirc: true, items: recircGalleries, showCropViewOnMobile: shouldUseModalStyle, recircInteractionAnalytics: (gallery) => onInteractionAnalytics(analyticsTextConstant.endRecirc, gallery, index), "data-testid": "recirc-cards", "data-is-end-of-page": "true", "data-items": JSON.stringify(recircGalleries) })));
};
EndRecirc.propTypes = {
    index: PropTypes.number.isRequired,
    isSmallDevice: PropTypes.bool,
    onInteractionAnalytics: PropTypes.func,
    onMobileImpressionAnalytics: PropTypes.func,
    recircGalleries: PropTypes.array.isRequired,
    shouldUseModalStyle: PropTypes.bool
};
module.exports = {
    MidRecirc,
    EndRecirc,
    NewsletterRecirc
};
//# sourceMappingURL=SlideItems.js.map

/***/ }),

/***/ 87963:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const GalleryCarousel = __webpack_require__(4253);
module.exports = asConfiguredComponent(GalleryCarousel, 'GalleryCarousel');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 99621:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css, keyframes } = __webpack_require__(92168);
const { minScreen, maxScreen, calculateSpacing, getColorStyles } = __webpack_require__(26865);
const { maxThresholds, minThresholds } = __webpack_require__(99906);
const { BaseText, BaseWrap, BaseInput, BaseLink } = __webpack_require__(76955);
const { ResponsiveImageContainer, ResponsiveImagePicture } = __webpack_require__(7228);
const { SpanWrapper } = __webpack_require__(18117);
const { ResponsiveCartoonWrapper, ResponsiveCartoonCredit, ResponsiveCartoonCaption, ResponsiveCartoonCTAWrapper } = __webpack_require__(77527);
const { GalleryRecircGridWrapper, GalleryRecircViewGalleryCTA } = __webpack_require__(26891);
const { AdWrapper } = __webpack_require__(36185);
const { NewsletterSlimLoggedInWrapper, NewsletterSlimLoggedInDisclaimer } = __webpack_require__(75116);
const { NewsletterSubscribeFormWrapper, NewsletterSubscribeFormDisclaimer } = __webpack_require__(69817);
const { BREAKPOINTS } = __webpack_require__(96472);
const fadeIn = keyframes `
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
`;
const fadeOut = keyframes `
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
`;
const fadeInSequence = keyframes `
  from {
    opacity: 0;
  }

  to {
    opacity: .2;
  }
`;
const fadeOutSequence = keyframes `
  from {
    opacity: .2;
  }

  to {
    opacity: 0;
  }
`;
const GalleryCarouselContainer = styled(BaseWrap).withConfig({
    displayName: 'GalleryCarouselContainer'
}) `
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  ${({ shouldUseModalStyle, headerHeight }) => !shouldUseModalStyle &&
    css `
      ${minScreen(`${maxThresholds.lg + 1}px`)} {
        margin-top: ${calculateSpacing(2)};
        min-height: calc(100vh - ${headerHeight}px);
      }
    `}
`;
const GalleryCarouselHeader = styled(BaseWrap).withConfig({
    displayName: 'GalleryCarouselHeader'
}) `
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: ${calculateSpacing(2.5)} 0;
  text-align: center;

  ${maxScreen(`${maxThresholds.lg}px`)} {
    ${({ shouldUseModalStyle }) => shouldUseModalStyle
    ? css `
            margin-bottom: ${calculateSpacing(3)};
            padding: 0;
            min-height: ${calculateSpacing(10)};
          `
    : css `
            padding: ${calculateSpacing(5)} 0;
          `}
  }
`;
const GalleryCarouselSectionTitle = styled.div.withConfig({
    displayName: 'GalleryCarouselSectionTitle'
}) `
  margin-bottom: ${calculateSpacing(2)};
`;
const GalleryCarouselTitle = styled(BaseText).withConfig({
    displayName: 'GalleryCarouselTitle'
}) `
  span {
    cursor: unset;

    :hover {
      text-decoration: none;
    }
  }
  ${maxScreen(`${maxThresholds.lg}px`)} {
    width: ${calculateSpacing(24.75)};
  }
`;
GalleryCarouselTitle.defaultProps = {
    as: 'h1',
    typeIdentity: 'typography.definitions.globalEditorial.context-primary'
};
const GalleryCarouselTitleText = styled(BaseLink).withConfig({
    displayName: 'GalleryCarouselTitleText'
}) ``;
GalleryCarouselTitleText.defaultProps = {
    as: 'a',
    hasUnderline: false,
    typeIdentity: 'typography.definitions.globalEditorial.context-primary'
};
const GalleryCarouselHeaderRecirc = styled(BaseText).withConfig({
    displayName: 'GalleryCarouselHeaderRecirc'
}) `
  position: absolute;
  right: ${calculateSpacing(8)};
  text-decoration: none;

  :hover {
    text-decoration: underline;
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.dark')};
  }

  ${maxScreen(`${maxThresholds.lg}px`)} {
    display: none;
  }
`;
GalleryCarouselHeaderRecirc.defaultProps = {
    as: 'a',
    colorToken: 'colors.interactive.base.brand-primary',
    typeIdentity: 'typography.definitions.foundation.link-primary'
};
const galleryCarouselActionWrapper = css `
  display: flex;
  grid-row: 1;
  align-self: flex-start;
  height: ${calculateSpacing(64)};

  ${({ isHidden }) => isHidden &&
    css `
      visibility: hidden;
    `}

  ${({ mobileSlider }) => !mobileSlider &&
    css `
      ${maxScreen(`${maxThresholds.lg}px`)} {
        display: none;
      }
    `}
`;
const GalleryCarouselNextWrapper = styled(BaseWrap).withConfig({
    displayName: 'GalleryCarouselNextWrapper'
}) `
  ${galleryCarouselActionWrapper};
  grid-column: 11/12;
  justify-content: start;
`;
const GalleryCarouselPrevWrapper = styled(BaseWrap).withConfig({
    displayName: 'GalleryCarouselPrevWrapper'
}) `
  ${galleryCarouselActionWrapper};
  grid-column: 2/3;
  justify-content: end;
`;
const GalleryCarouselNavigation = styled.button.withConfig({
    displayName: 'GalleryCarouselNavigation'
}) `
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(0);
  transition: transform 0.3s ease;
  background: transparent;
  min-width: ${calculateSpacing(7.5)};

  svg {
    path {
      ${getColorStyles('fill', 'colors.interactive.base.black')};
    }
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      transform: translateX(${calculateSpacing(1)});
    }
  }

  ${({ isRotated }) => isRotated &&
    css `
      svg {
        transform: rotate(180deg);
      }

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          transform: translateX(${calculateSpacing(-1)});
        }
      }
    `}
`;
const GalleryCarouselCountWrapper = styled(BaseWrap).withConfig({
    displayName: 'GalleryCarouselCountWrapper'
}) `
  display: flex;
  grid-column: 10;
  grid-row: 1;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  border-radius: ${calculateSpacing(10)};
  width: ${calculateSpacing(6)};
  height: ${calculateSpacing(4)};
  ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.interactive.base.light')};

  ${maxScreen(`${maxThresholds.lg}px`)} {
    display: none;
  }
`;
const GalleryCarouselCount = styled(BaseText).withConfig({
    displayName: 'GalleryCarouselCount'
}) `
  text-align: center;
  line-break: normal;
`;
GalleryCarouselCount.defaultProps = {
    as: 'p',
    colorToken: 'colors.interactive.base.dark',
    typeIdentity: 'typography.definitions.globalEditorial.numerical-small'
};
const GalleryCarouselContent = styled.div.withConfig({
    displayName: 'GalleryCarouselContent'
}) `
  display: none;
  position: relative;
  flex-direction: row;
  align-items: start;
  justify-content: center;
  cursor: auto;
  width: 100%;
  min-height: ${calculateSpacing(64)};

  ${AdWrapper} {
    margin: auto;
  }

  ${ResponsiveCartoonWrapper} {
    border: none;
    padding: 0;
    justify-items: unset;
    max-width: ${calculateSpacing(70)};

    .responsive-cartoon__caption,
    .responsive-cartoon__credit {
      overflow: hidden;
    }

    ${ResponsiveImagePicture} {
      cursor: zoom-in;
      text-align: center;
    }

    ${ResponsiveImageContainer} {
      width: auto;
      max-width: 100%;
      height: auto;
      max-height: ${calculateSpacing(40.5)};
    }

    ${ResponsiveImagePicture}, ${ResponsiveCartoonCaption}, ${ResponsiveCartoonCredit} {
      cursor: auto;
      max-width: unset;
    }
  }

  ${maxScreen(`${maxThresholds.lg}px`)} {
    ${({ mobileSlider }) => !mobileSlider &&
    css `
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: ${calculateSpacing(31.25)};

        ${ResponsiveCartoonWrapper} {
          ${ResponsiveImageContainer} {
            width: ${calculateSpacing(40.5)};
            height: auto;
            max-height: none;
          }
        }
      `}
  }
`;
const galleryCarouselSlideSequence = css `
  display: flex;
  grid-row: 1;
  align-items: center;
  overflow: hidden;

  ${ResponsiveCartoonWrapper} {
    ${ResponsiveImagePicture} {
      height: 100%;
    }
  }

  ${SpanWrapper} {
    position: absolute;
    min-width: ${calculateSpacing(100)};
  }

  ${ResponsiveCartoonCTAWrapper} {
    display: none;
  }
`;
const GalleryCarouselSlider = styled(BaseWrap).withConfig({
    displayName: 'GalleryCarouselSlider'
}) `
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  margin: 0 auto;
  cursor: auto;
  width: 100%;
  max-width: none;
  gap: 0;

  ${({ mobileSlider }) => {
    const carouselView = css `
      height: ${calculateSpacing(64)};

      .fade-in {
        animation: ${fadeIn} ease-in-out 300ms forwards;
      }

      .fade-out {
        animation: ${fadeOut} ease-in-out 300ms forwards;
      }

      .fade-in-sequence {
        animation: ${fadeInSequence} ease-in-out 300ms forwards;
      }

      .fade-out-sequence {
        animation: ${fadeOutSequence} ease-in-out 300ms forwards;
      }

      .current-slide {
        display: flex;
        grid-column: 4/10;
        grid-row: 1;

        ${SpanWrapper} {
          align-self: center;
        }
      }

      .prev-slide {
        ${galleryCarouselSlideSequence};
        grid-column: 1/2;

        ${ResponsiveCartoonWrapper} {
          margin-right: 0;
          ${ResponsiveImagePicture} {
            text-align: right;
          }
        }

        ${SpanWrapper} {
          right: 0;
        }
      }

      .next-slide {
        ${galleryCarouselSlideSequence};
        grid-column: 12/-1;

        ${ResponsiveCartoonWrapper} {
          margin-left: 0;
          ${ResponsiveImagePicture} {
            text-align: left;
          }
        }

        ${SpanWrapper} {
          left: 0;
        }
      }

      .has-end-recirc {
        ${GalleryRecircGridWrapper} {
          display: none;
        }
      }

      .has-end-recirc.current-slide {
        position: unset;

        ${GalleryRecircGridWrapper} {
          display: grid;
          position: relative;
          right: 0;
          padding-top: ${calculateSpacing(7)};
          width: auto;
        }
      }
    `;
    const riverView = css `
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0;
      padding: 0 ${calculateSpacing(3)};
      gap: 0;

      ${GalleryCarouselContent} {
        border-bottom: 1px solid;
        padding-top: ${calculateSpacing(7)};
        padding-bottom: ${calculateSpacing(7)};

        ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.interactive.base.light')};

        ${ResponsiveCartoonWrapper} {
          border: none;
          padding: 0;
        }
      }

      .last-slide {
        border-bottom: none;
      }

      .has-end-recirc {
        padding-bottom: 0;

        ${GalleryRecircViewGalleryCTA} {
          grid-column: 1 / 8;
          grid-row: 1;
          text-align: center;
        }

        ${({ isEndGalleryRecircCardOnMobile }) => isEndGalleryRecircCardOnMobile &&
        `
        ${GalleryRecircGridWrapper} {
          padding-top: ${calculateSpacing(2)};
          padding-bottom: ${calculateSpacing(7)};
        }
      `}
      }

      .is-newsletter-slide {
        min-height: auto;
      }
    `;
    if (mobileSlider) {
        return css `
        ${carouselView};
        height: auto;
        ${maxScreen(`${maxThresholds.lg}px`)} {
          ${GalleryCarouselNextWrapper}, ${GalleryCarouselPrevWrapper} {
            flex-direction: column;
            justify-content: end;
            z-index: 1;
            height: 100%;

            button {
              padding: 0;
            }
          }
          grid-template-rows: min-content auto;
          grid-row-gap: ${calculateSpacing(1)};
          ${GalleryCarouselNextWrapper}, ${GalleryCarouselPrevWrapper}, .current-slide {
            grid-row: 2;
          }
          ${GalleryCarouselCountWrapper} {
            display: flex;
            grid-column: 12;
            justify-self: end;
          }

          ${GalleryCarouselNextWrapper} {
            grid-column: -2/-1;

            button {
              justify-content: end;
            }
          }
          ${GalleryCarouselPrevWrapper} {
            grid-column: 1/2;

            button {
              justify-content: start;
            }
          }

          .current-slide {
            grid-column: 1/-1;
          }
        }
        ${ResponsiveCartoonWrapper} {
          ${ResponsiveCartoonCaption}, ${ResponsiveCartoonCredit} {
            padding-bottom: 0;
          }
          ${ResponsiveCartoonCredit} {
            padding-top: ${calculateSpacing(1)};
          }
        }
      `;
    }
    return css `
      ${minScreen(`${minThresholds.xl}px`)} {
        ${carouselView}
      }

      ${maxScreen(`${maxThresholds.lg}px`)} {
        ${riverView}
      }
    `;
}}
`;
const GalleryCarouselSliderWrapper = styled(BaseWrap).withConfig({
    displayName: 'GalleryCarouselSliderWrapper'
}) `
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
`;
const GalleryCarouselNewsletterWrapper = styled(BaseWrap).withConfig({
    displayName: 'GalleryCarouselNewsletterWrapper'
}) `
  margin: auto;
  width: 100%;
  max-width: ${calculateSpacing(40.875)};

  ${NewsletterSlimLoggedInWrapper}, ${NewsletterSubscribeFormWrapper} {
    margin: 0;
  }

  ${NewsletterSlimLoggedInWrapper} {
    ${NewsletterSlimLoggedInDisclaimer} p {
      margin-bottom: 0;
    }
  }

  ${NewsletterSubscribeFormWrapper} {
    ${BaseInput} {
      padding: ${calculateSpacing(1)} ${calculateSpacing(1.5)};
    }

    ${NewsletterSubscribeFormDisclaimer} p {
      margin-bottom: 0;
    }
  }

  ${maxScreen(`${maxThresholds.lg}px`)} {
    max-width: unset;
  }
`;
GalleryCarouselNewsletterWrapper.defaultProps = {
    as: 'div'
};
const GalleryCarouselMidRecircWrapper = styled.div.withConfig({
    displayName: 'GalleryCarouselMidRecircWrapper'
}) `
  ${maxScreen(`${maxThresholds.lg}px`)} {
    width: 100%;
  }

  margin: auto;
`;
GalleryCarouselMidRecircWrapper.defaultProps = {
    as: 'div'
};
const GalleryCarouselEndRecircWrapper = styled.div.withConfig({
    displayName: 'GalleryCarouselEndRecircWrapper'
}) `
  ${minScreen(BREAKPOINTS.lg)} {
    position: absolute;
    right: 0;
  }

  ${maxScreen(`${maxThresholds.lg}px`)} {
    padding-top: ${calculateSpacing(5)};
    width: 100%;
  }
`;
GalleryCarouselEndRecircWrapper.defaultProps = {
    as: 'div'
};
module.exports = {
    GalleryCarouselContainer,
    GalleryCarouselEndRecircWrapper,
    GalleryCarouselHeader,
    GalleryCarouselTitle,
    GalleryCarouselTitleText,
    GalleryCarouselHeaderRecirc,
    GalleryCarouselNextWrapper,
    GalleryCarouselPrevWrapper,
    GalleryCarouselNavigation,
    GalleryCarouselCountWrapper,
    GalleryCarouselCount,
    GalleryCarouselContent,
    GalleryCarouselSlider,
    GalleryCarouselSliderWrapper,
    GalleryCarouselNewsletterWrapper,
    GalleryCarouselMidRecircWrapper,
    GalleryCarouselSectionTitle
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 92039:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    next: {
        id: 'GalleryCarousel.Next',
        defaultMessage: 'Next',
        description: 'Next icon title'
    },
    previous: {
        id: 'GalleryCarousel.Previous',
        defaultMessage: 'Previous',
        description: 'Previous icon title'
    },
    nextGallery: {
        id: 'GalleryCarousel.NextGallery',
        defaultMessage: 'Next gallery',
        description: 'Next gallery link prefix'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 70746:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const pick = __webpack_require__(44383);
const PropTypes = __webpack_require__(5556);
const { googleAnalytics } = __webpack_require__(90090);
const { trackNavigationEvent } = __webpack_require__(14307);
const analyticsTextConstant = {
    newsletter: 'newsletter',
    headRecirc: 'top_right_link',
    midRecirc: 'mid_content',
    endRecirc: 'end_content',
    backToArticle: 'back to article'
};
const removeProperties = (data, keys) => {
    keys.forEach((key) => {
        delete data[key];
    });
};
/**
 * useAnalytics hooks
 *
 * @param {object} props - Props to the useAnalytics
 * @param {string} props.carouselPlacedIn - Where the Gallery Carousel is placed.
 * @param {number} props.currentSlideIndex - Represents the current slide index
 * @param {Function} props.getIsSmallDevice - a function returns boolean true If it is a small device
 * @param {boolean} props.hasHeadRecirc - To show the gallery head recirculation link
 * @param {object} props.headRecircGallery - Galley data to use in the head recirculation unit
 * @param {boolean} props.isModalOpen - Flag to open/close Modal
 * @param {Array} props.slides - List of gallery items to slide
 * @param {object} props.titleRef - useRef instance of the title DOM element
 * @param {string} props.galleryID - Gallery Id
 *
 * @returns {useAnalytics} object
 */
const useAnalytics = ({ carouselPlacedIn, currentSlideIndex, getIsSmallDevice, hasHeadRecirc, headRecircGallery, isModalOpen, slides, titleRef, galleryID }) => {
    const cartoonSubject = carouselPlacedIn === 'inline' ? 'inline_cartoon' : 'cartoon_gallery';
    const recircSubject = carouselPlacedIn === 'inline'
        ? 'inline_cartoon_carousel_recirc_unit'
        : 'cartoon_gallery_recirc_unit';
    const [triggeredEvents, setTriggeredEvents] = React.useReducer((state, input) => {
        if (Array.isArray(input)) {
            input.forEach((item) => state.add(item));
            return state;
        }
        return state.add(input);
    }, new Set());
    /**
     *
     * @param {object} props - props to function
     * @param {string} props.type - type of the event
     * @param {string} [props.subject] - Where the item is placed
     * @param {Array} [props.items] - Array of items for the event
     * @param {string} [props.placement] - Where the recirculation content is placed
     * @param {string} [props.label] - Label of the content
     *
     * @returns {object} - Return object for snowplow
     */
    const generateSnowplowEventData = ({ type, subject, items = [], placement = '', label = '' }) => {
        const data = {
            type,
            label,
            subject,
            items,
            index: currentSlideIndex,
            placement,
            subject_id: galleryID,
            subject_version: carouselPlacedIn,
            total_index: slides.length
        };
        // Removing empty properties
        Object.keys(data).forEach((key) => {
            if (data[key] == null || data[key] === '' || data[key] === undefined) {
                delete data[key];
            }
        });
        return data;
    };
    const getNumbering = (index = null) => `${(index ?? currentSlideIndex) + 1}/${slides.length}`;
    const extractAnalyticsData = (pickIt = []) => {
        const dataLayer = {
            cartoon_placement: carouselPlacedIn,
            gallery_title: titleRef?.current?.innerText || '',
            cartoon_id: slides[currentSlideIndex]?.id || '',
            cartoon_numbering: getNumbering()
        };
        return pick(dataLayer, pickIt);
    };
    const triggerEvent = (eventName, pickIt = [], additional = {}) => {
        googleAnalytics.emitGoogleTrackingEvent(eventName, {
            ...extractAnalyticsData(pickIt),
            ...additional
        });
    };
    const triggerCartoonImpression = () => {
        triggerEvent('cartoon-impression', [
            'cartoon_placement',
            'gallery_title',
            'cartoon_id',
            'cartoon_numbering'
        ]);
        // Snowplow event
        const currentSlide = slides[currentSlideIndex];
        const contentUrl = currentSlide?.links?.find((item) => item.network === 'canonical').url;
        const items = [
            {
                content_title: currentSlide?.dangerousCaption,
                content_id: currentSlide?.id,
                content_type: currentSlide?.contentType || 'cartoon',
                content_url: contentUrl
            }
        ];
        const snowplowData = {
            type: 'impression',
            subject: cartoonSubject,
            items
        };
        const snowplowEventData = generateSnowplowEventData(snowplowData);
        trackNavigationEvent(snowplowEventData);
    };
    const triggerSlideAction = (index) => {
        triggerEvent('cartoon-interaction', ['cartoon_placement', 'gallery_title', 'cartoon_id'], {
            cartoon_interaction: index > currentSlideIndex ? 'next' : 'previous'
        });
        // Snowplow event
        const currentSlide = slides[currentSlideIndex];
        let snowplowData = {};
        if (currentSlide.isMidRecirc) {
            const items = currentSlide.recircGalleries.map((recircGallery) => ({
                content_title: recircGallery.dangerousHed,
                content_id: recircGallery.id,
                content_type: 'gallery',
                content_url: `${window.location.host}${recircGallery.url}`
            }));
            snowplowData = {
                type: index > currentSlideIndex ? 'forward' : 'back',
                subject: recircSubject,
                items,
                placement: 'mid_content'
            };
        }
        else {
            const contentUrl = currentSlide?.links?.find((item) => item.network === 'canonical').url;
            const items = [
                {
                    content_title: currentSlide.dangerousCaption || '',
                    content_id: currentSlide?.id,
                    content_type: currentSlide?.contentType || 'cartoon',
                    content_url: contentUrl
                }
            ];
            snowplowData = {
                type: index > currentSlideIndex ? 'forward' : 'back',
                subject: cartoonSubject,
                items
            };
        }
        const snowplowEventData = generateSnowplowEventData(snowplowData);
        trackNavigationEvent(snowplowEventData);
    };
    const triggerRecircImpression = (placement, recircGalleries = [], index = null) => {
        triggerEvent('cartoon-impression-recirculation', ['cartoon_placement', 'gallery_title'], {
            content_recirculation_placement: placement,
            cartoon_numbering: getNumbering(index),
            gallery_id: recircGalleries.map((each) => each.id).join(' | ')
        });
        // Snowplow event
        const items = recircGalleries.map((recircGallery) => ({
            content_title: recircGallery.dangerousHed,
            content_id: recircGallery.id,
            content_type: 'gallery',
            content_url: `${window.location.host}${recircGallery.url}`
        }));
        const snowplowData = {
            type: 'impression',
            subject: recircSubject,
            items,
            placement
        };
        const snowplowEventData = generateSnowplowEventData(snowplowData);
        // For top and end recirc, we don't need to send the total number and current index value
        if (placement === 'end_content' || placement === 'top_right_link') {
            removeProperties(snowplowEventData, ['total_index', 'index']);
        }
        trackNavigationEvent(snowplowEventData);
    };
    const triggerRecircInteraction = (placement, recircGallery = {}, index = null) => {
        triggerEvent('cartoon-interaction-recirculation', ['cartoon_placement', 'gallery_title', 'cartoon_id'], {
            content_recirculation_placement: placement,
            content_recirculation_title: recircGallery?.dangerousHed || '',
            cartoon_numbering: getNumbering(index)
        });
        // Snowplow event
        const items = [
            {
                content_title: recircGallery.dangerousHed,
                content_id: recircGallery.id,
                content_type: 'gallery',
                content_url: `${window.location.host}${recircGallery.url}`
            }
        ];
        const snowplowData = {
            type: 'click',
            subject: recircSubject,
            items,
            placement
        };
        const snowplowEventData = generateSnowplowEventData(snowplowData);
        // For top and end recirc, we don't need to send the total number and current index value
        if (placement === 'end_content' || placement === 'top_right_link') {
            removeProperties(snowplowEventData, ['total_index', 'index']);
        }
        trackNavigationEvent(snowplowEventData);
    };
    const triggerNewsletterImpression = (newsletter, index = null) => {
        triggerEvent('cartoon-impression-newsletter', ['cartoon_placement', 'gallery_title'], {
            cartoon_newsletter_id: newsletter?.newsletterId,
            cartoon_numbering: getNumbering(index)
        });
    };
    const triggerNewsletterInteraction = (newsletter) => {
        triggerEvent('cartoon-interaction-newsletter', ['cartoon_placement', 'gallery_title', 'cartoon_id'], {
            content_newsletter_placement: analyticsTextConstant.midRecirc,
            content_newsletter_title: newsletter?.dangerousHed || ''
        });
    };
    const triggerCloseModalInteraction = () => {
        if (!isModalOpen && carouselPlacedIn === 'modal') {
            triggerEvent('cartoon-interaction', ['cartoon_placement', 'gallery_title', 'cartoon_id'], {
                cartoon_interaction: analyticsTextConstant.backToArticle
            });
            // Snowplow event
            const currentSlide = slides[currentSlideIndex];
            const contentUrl = currentSlide?.links?.find((item) => item.network === 'canonical').url;
            const items = [
                {
                    content_title: currentSlide.dangerousCaption,
                    content_id: currentSlide?.id,
                    content_type: 'gallery',
                    content_url: contentUrl
                }
            ];
            const snowplowData = {
                type: 'close',
                subject: 'cartoon_gallery',
                items
            };
            const snowplowEventData = generateSnowplowEventData(snowplowData);
            trackNavigationEvent(snowplowEventData);
        }
    };
    // To trigger recirc impression on intersection viewport, for mobile view
    // Mid, End and Newsletter impressions
    const triggerMobileRecircImpression = (isInViewport, unsubscribeCallback, analyticsData = {}) => {
        const recircItems = [
            analyticsTextConstant.midRecirc,
            analyticsTextConstant.endRecirc,
            analyticsTextConstant.newsletter
        ];
        const isEventTriggeredByIndex = triggeredEvents.has(currentSlideIndex);
        const { index = null, recircGalleries, placement, newsletter } = analyticsData;
        if (isInViewport &&
            !isEventTriggeredByIndex &&
            recircItems.includes(placement)) {
            if (placement === analyticsTextConstant.newsletter) {
                setTriggeredEvents(index);
                triggerNewsletterImpression(newsletter, index);
            }
            else if (placement === analyticsTextConstant.midRecirc) {
                setTriggeredEvents(index);
                triggerRecircImpression(analyticsTextConstant.midRecirc, recircGalleries, index);
            }
            else {
                setTriggeredEvents(analyticsTextConstant.endRecirc);
                triggerRecircImpression(placement, recircGalleries, index);
            }
            unsubscribeCallback();
        }
    };
    // Impression for Head recirc
    React.useEffect(() => {
        if (hasHeadRecirc) {
            triggerRecircImpression(analyticsTextConstant.headRecirc, [
                headRecircGallery
            ]);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    React.useEffect(() => {
        triggerCloseModalInteraction();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [isModalOpen]);
    React.useEffect(() => {
        const isSmallDevice = getIsSmallDevice();
        const { recircGalleries, newsletter } = slides[currentSlideIndex];
        const isMidRecirc = Boolean(slides[currentSlideIndex]?.isMidRecirc);
        const hasEndRecirc = Boolean(slides[currentSlideIndex]?.hasEndRecirc);
        const isNewsletter = Boolean(slides[currentSlideIndex]?.isNewsletter);
        const isContent = Boolean(slides[currentSlideIndex]?.isContent);
        const isEventTriggeredByIndex = triggeredEvents.has(currentSlideIndex);
        const eventList = [];
        // Trigger events If not an small device
        if (!isSmallDevice) {
            if (!isEventTriggeredByIndex) {
                // Impression for Mid Recirc
                if (isMidRecirc) {
                    eventList.push(currentSlideIndex);
                    triggerRecircImpression(analyticsTextConstant.midRecirc, recircGalleries);
                }
                // Impression for Newsletter
                if (isNewsletter) {
                    eventList.push(currentSlideIndex);
                    triggerNewsletterImpression(newsletter);
                }
                // Impression for Content
                if (isContent) {
                    eventList.push(currentSlideIndex);
                    triggerCartoonImpression();
                }
            }
            // Impression for End Recirc
            if (hasEndRecirc &&
                !triggeredEvents.has(analyticsTextConstant.endRecirc)) {
                eventList.push(analyticsTextConstant.endRecirc);
                triggerRecircImpression(analyticsTextConstant.endRecirc, recircGalleries);
            }
            if (eventList.length) {
                setTriggeredEvents(eventList);
            }
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [currentSlideIndex]);
    return {
        extractAnalyticsData,
        triggerSlideAction,
        triggerMobileRecircImpression,
        triggerNewsletterInteraction,
        triggerRecircInteraction
    };
};
useAnalytics.propTypes = {
    carouselPlacedIn: PropTypes.oneOf(['gallery', 'modal']).isRequired,
    currentSlideIndex: PropTypes.number.isRequired,
    getIsSmallDevice: PropTypes.func.isRequired,
    hasHeadRecirc: PropTypes.bool.isRequired,
    headRecircData: PropTypes.object.isRequired,
    isModalOpen: PropTypes.bool.isRequired,
    slides: PropTypes.array.isRequired,
    titleRef: PropTypes.oneOfType([
        PropTypes.func,
        PropTypes.shape({ current: PropTypes.any })
    ]).isRequired
};
module.exports = { useAnalytics, analyticsTextConstant };
//# sourceMappingURL=useAnalytics.js.map

/***/ }),

/***/ 4253:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const GalleryCarousel = __webpack_require__(84399);
GalleryCarousel.MagazineCartoons = asVariation(GalleryCarousel, 'magazineCartoons', {
    fullBleedSlide: true,
    mobileSlider: true,
    useSectionTitle: true
}, {
    shouldUseModalStyle: true
});
module.exports = GalleryCarousel;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 47811:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const debounce = __webpack_require__(38221);
const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const ContentPromoEmbed = __webpack_require__(86447);
const GallerySlideComponent = __webpack_require__(93726);
const GalleryEmbedControls = __webpack_require__(83193);
const GalleryCaption = __webpack_require__(78873);
const { TrackComponentChannel } = __webpack_require__(78788);
const Ad = __webpack_require__(31850);
const { PaymentGateway } = __webpack_require__(92807);
const { googleAnalytics } = __webpack_require__(90090);
const { trackNavigationEvent } = __webpack_require__(14307);
const { GalleryEmbedWrapper, GalleryEmbedHr, GalleryEmbedSwipe, GalleryEmbedTitle, GalleryEmbedSlideList, GalleryEmbedSlideListItem, GalleryEmbedListWrapper } = __webpack_require__(56082);
const CarouselMixedAspectRatio = __webpack_require__(38337);
const { attemptAdInjection } = __webpack_require__(1184);
const stripHTML = (string) => string.replace(/<[^>]*>/g, '');
/**
 * injects the ad object into the slides at a specified cadence.
 *
 * @param {string} props.contentType - Required text description of the type of content to be rendered
 * @param {Array} [slides] - Collection of slides.
 * @param {number} midGalleryAdCadence - Cadence to inject ads.
 * @param {number} midGalleryAdsLimit - Maximum number of injected ads.
 * @param {bool} showAds - toggle that disables gallery ads
 * @param {bool} showNoAdsFromParent - optional toggle to disable gallery ads from parent component
 * @param {bool} isInLightbox - flag to indicate if the gallery is rendered inside a lightbox
 * @param {number} startAdCount - number of ads already rendered
 * Setting midGalleryAdCadence to 0 or false will disable ads
 * Setting midGalleryAdsLimit to 0 will disable ads
 *
 * @returns {Array} Collection of slides and ads.
 */
const injectAdsIntoSlides = (slides, midGalleryAdCadence, midGalleryAdsLimit, showAds, showNoAdsFromParent, isInLightbox, startAdCount) => {
    const injectAds = !showNoAdsFromParent &&
        showAds &&
        midGalleryAdCadence &&
        midGalleryAdsLimit;
    if (!injectAds) {
        return slides;
    }
    const shouldInjectAd = (index) => {
        const lastAdPosition = midGalleryAdCadence * midGalleryAdsLimit;
        const withinLimits = index <= lastAdPosition;
        const matchesCadence = index % midGalleryAdCadence === 0;
        return matchesCadence && withinLimits;
    };
    return slides.reduce((acc, slide, index) => {
        const { slidesAndAds, adCount } = acc;
        slidesAndAds.push(slide);
        if (shouldInjectAd(index + 1)) {
            slidesAndAds.push({
                isAd: true,
                ...(isInLightbox && {
                    isMidGalleryAd: true,
                    midGalleryAdIndex: adCount
                })
            });
            return { slidesAndAds, adCount: adCount + 1 };
        }
        return { slidesAndAds, adCount };
    }, { slidesAndAds: [], adCount: startAdCount }).slidesAndAds;
};
/**
 * Gets a valid index from array by cycling nextIndex if index is out of bounds
 *
 * @param {number} nextIndex - Next potential slide index, after navigation action.
 * @param {Array} slideArray - Collection of slides.
 *
 * @returns {number} Valid next array index
 */
const getCycledSlideIndex = (nextIndex, slideArray) => {
    let newIndex = nextIndex;
    if (nextIndex >= slideArray.length) {
        newIndex = 0;
    }
    else if (nextIndex < 0) {
        newIndex = slideArray.length - 1;
    }
    return newIndex;
};
/**
 * GalleryEmbed component
 *
 * @param {object} props - React Props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.controlsIcon] - Optional string to set the icon used for the GalleryEmbedControls, e.g. 'Arrow'
 * @param {string} [props.gallerySlideVariation] - The variation name for the GallerySlide component, defaults to ItemCenterNoCaption
 * @param {boolean} [props.hasPhotoBookmark] - Optional flag to enable bookmarking a photo
 * @param {number} [props.indexToStartOn] - Optional slide index to open the gallery
 * @param {bool} [props.isLazy] - Optional Flag to support lazy loading of images - defaults to false
 * @param {Array} [props.slides] - Collection of slides.
 * @param {bool} [props.isInLightbox] - Optional prop to set if the embed is rendered from the Lightbox
 * @param {boolean} [props.shouldHoldImageSpace] - Optional prop, set to true to hold image space using image aspect ratio
 * @param {boolean} [props.showGallerySlideCaptionOrTitle] - Optional prop, set to true to show the caption OR title within GallerySlideCaption instead of both.
 * @param {boolean} [props.showZoomedImage] - Optional boolean to add a wrapper around responsive image to zoom in on hover
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 *
 * @returns {ReactElement} <div>
 */
class GalleryEmbed extends React.Component {
    constructor(props, context) {
        super(props, context);
        /**
         * Handles the ref callback from the root DOM node.
         *
         * @param {DOMElement} el - element ref
         * @returns {undefined} undefined
         */
        this.getRef = (el) => {
            this.componentBounds = el;
        };
        /**
         * Update component stored size when window is resized
         *
         * @returns {undefined} undefined
         */
        this.handleResize = () => {
            this.measureComponent();
        };
        /**
         * measure components width and height from outer container
         *
         * @returns {undefined} undefined
         */
        this.measureComponent = () => {
            const width = this.componentBounds
                ? this.componentBounds.getBoundingClientRect().width
                : null;
            this.setState({ width });
        };
        /**
         * Emits tracking event for GA
         *
         * @param {number} slideIndex - next slide index
         *
         * @returns {undefined} undefined
         */
        this.emitTrackingEvent = (slideIndex) => {
            const { slides } = this.props;
            const currentSlide = slides[slideIndex];
            const { dangerousHed, filename } = currentSlide;
            const payload = {
                'gallery-item-number': `image-${slideIndex + 1 === this.galleryLength ? 'end' : slideIndex + 1}`,
                'gallery-item-name': dangerousHed ? stripHTML(dangerousHed) : '',
                'gallery-item-file': filename || '',
                'gallery-length': this.galleryLength
            };
            googleAnalytics.emitGoogleTrackingEvent('embedded-gallery-view', payload);
        };
        /**
         * updates slide index and displayed index based on slide navigation direction
         * checks if current slide is an ad
         *
         * @param {number} direction - increment slide index by
         * @returns {undefined} undefined
         */
        this.handleSlideChange = (direction) => {
            const { slideIndex } = this.state;
            const { shouldCycleSlides } = this.props;
            let nextSlideIndex = slideIndex + direction;
            if (shouldCycleSlides) {
                nextSlideIndex = getCycledSlideIndex(nextSlideIndex, this.slidesAndAds);
            }
            else if (nextSlideIndex < 0 ||
                nextSlideIndex > this.slidesAndAds.length - 1) {
                return;
            }
            const isNextSlideAd = this.slidesAndAds[nextSlideIndex].isAd;
            const adsOffset = this.slidesAndAds
                .slice(0, nextSlideIndex)
                .reduce((count, slide) => {
                return slide.isAd ? count + 1 : count;
            }, 0);
            const slideIndexForDisplay = nextSlideIndex - adsOffset;
            this.setState({
                hasAnimatedSwipe: true,
                isAdSlide: isNextSlideAd,
                slideIndex: nextSlideIndex,
                slideIndexForDisplay
            });
            // send ad event
            if (isNextSlideAd) {
                googleAnalytics.emitGoogleTrackingEvent('gallery-ad-view', {});
            }
            else {
                this.emitTrackingEvent(slideIndexForDisplay);
            }
            const { slides, isInLightbox } = this.props;
            const item = slides[slideIndexForDisplay];
            const { image, dangerousHed, id } = item;
            const lightboxEventTracking = isInLightbox;
            const trackImageUrl = image?.segmentedSources?.lg?.[0].url || '';
            const scrollEventData = {
                type: 'impression',
                subject: 'gallery_embed',
                items: [
                    {
                        content_id: id,
                        content_url: trackImageUrl,
                        content_title: dangerousHed,
                        content_type: 'photo'
                    }
                ],
                placement: 'horizontal',
                index: slideIndexForDisplay,
                total_index: slides.length
            };
            lightboxEventTracking &&
                trackNavigationEvent({
                    ...scrollEventData,
                    subject: 'lightbox_gallery_slide_image'
                });
        };
        /**
         * handleForward from button onClick.
         * calculates and sets state based on index
         *
         * @returns {undefined} undefined
         */
        this.handleForward = () => this.handleSlideChange(1);
        /**
         * handleBack from button onClick
         * calculates and sets state based on index
         *
         * @returns {undefined} undefined
         */
        this.handleBack = () => this.handleSlideChange(-1);
        const { slides = [], config = {
            adsConfig: {
                galleryEmbedMidGalleryAdCadence: 0
            }
        }, midGalleryAdsLimit = Infinity, showAds = true, showNoAdsFromParent = false, indexToStartOn = 0, isInLightbox = false } = this.props;
        const midGalleryAdCadence = config.adsConfig?.galleryEmbedMidGalleryAdCadence ?? 0;
        let startAdCount = 0;
        if (isInLightbox) {
            const elements = document.getElementsByClassName('ad__slot--mid-gallery');
            if (elements && elements.length) {
                startAdCount = elements.length;
            }
        }
        this.slidesAndAds = injectAdsIntoSlides(slides, midGalleryAdCadence, midGalleryAdsLimit, showAds, showNoAdsFromParent, isInLightbox, startAdCount);
        this.galleryLength = slides.length;
        let indexAfterAdsInjection = indexToStartOn;
        if (midGalleryAdCadence > 0 && indexToStartOn >= midGalleryAdCadence) {
            indexAfterAdsInjection += Math.floor(indexToStartOn / midGalleryAdCadence);
        }
        this.state = {
            hasAnimatedSwipe: false,
            isClient: false,
            slideIndex: indexAfterAdsInjection,
            slideIndexForDisplay: indexAfterAdsInjection,
            width: null
        };
    }
    /**
     * sets isClient state (for client side rendering)
     * also measures component bounds
     *
     * @returns {undefined} undefined
     */
    componentDidMount() {
        this.setState({
            isClient: true
        });
        this.measureComponent();
        window.addEventListener('resize', debounce(this.handleResize, 20));
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'GalleryEmbed',
            variation: this.props.variationName
        });
    }
    componentDidUpdate(prevProps) {
        const { isInLightbox, isModalClosed } = this.props;
        const { isClient } = this.state;
        if (isClient &&
            isInLightbox &&
            !isModalClosed &&
            (prevProps.isModalClosed || prevProps.isModalClosed === undefined)) {
            attemptAdInjection('gallery-embed');
        }
    }
    render() {
        const { children, className, contentType, controlsIcon, dangerousHed, display, gallerySlideVariation = 'ItemCenterNoCaption', hasPhotoBookmark, showHed = false, slides = [], isLazy = false, isModal = false, isModalClosed, textAlign, isListicleLayout = false, shouldCycleSlides = false, isInLightbox = false, shouldHoldImageSpace = false, showGalleryEmbedCaption = true, showGallerySlideCaptionOrTitle, showZoomedImage, variations = {
            display: 'slideshow'
        } } = this.props;
        const { hasAnimatedSwipe, isAdSlide, slideIndex, slideIndexForDisplay, isClient, width } = this.state;
        let newSlides;
        const isMixedMediaCarousel = contentType === 'callout:slideshow';
        const GallerySlide = GallerySlideComponent[gallerySlideVariation];
        if (children) {
            newSlides = React.Children.toArray(children)
                .filter((el) => el.props.children !== '�') // Filtering out blank slides
                .map((el) => el.props);
        }
        const displayType = display || variations?.display;
        if (displayType === 'promo' && !isMixedMediaCarousel)
            return React.createElement(ContentPromoEmbed, { ...this.props });
        // So web-crawlers only get the first 3 slides
        const slidesArr = isClient ? this.slidesAndAds : slides.slice(0, 3);
        const slidesCount = slides.length;
        const isNotAdSlide = slidesArr[slideIndex] && !isAdSlide;
        const lightboxSwipeStyle = hasAnimatedSwipe
            ? {
                left: `${slideIndex * width * -1}px`,
                transition: 'left 0.3s ease-in-out'
            }
            : {
                left: `${slideIndex * width * -1}px`
            };
        const leftDistanceStyle = isModal
            ? lightboxSwipeStyle
            : {
                transform: `translate(${slideIndex * width * -1}px, 0)`
            };
        return (React.createElement(GalleryEmbedWrapper, { isListicleLayout: isListicleLayout, ref: this.getRef, className: classnames('gallery-embed', className), isModalClosed: isModalClosed },
            React.createElement(GalleryEmbedHr, { className: "gallery-embed__hr", isListicleLayout: isListicleLayout, hasMixedMediaSlides: isMixedMediaCarousel, isModalClosed: isModalClosed }),
            showHed && dangerousHed && (React.createElement(GalleryEmbedTitle, { dangerouslySetInnerHTML: { __html: dangerousHed } })),
            !isListicleLayout ? (React.createElement(React.Fragment, null, isMixedMediaCarousel ? (React.createElement(CarouselMixedAspectRatio, { slides: newSlides, totalGalleryItems: slidesCount, textAlign: textAlign })) : (React.createElement(React.Fragment, null,
                React.createElement(GalleryEmbedSwipe, { noHed: !showHed, onSwipeRight: this.handleBack, onSwipeLeft: this.handleForward },
                    React.createElement(GalleryEmbedSlideList, { isListicleLayout: isListicleLayout, style: leftDistanceStyle }, slidesArr.map((slide, i) => (React.createElement(GalleryEmbedSlideListItem, { key: slide.id || i, isListicleLayout: isListicleLayout },
                        slide.isAd && (React.createElement(PaymentGateway, { group: "ads" },
                            React.createElement(Ad, { position: "mid-gallery", ...(slide.midGalleryAdIndex !== undefined && {
                                    index: slide.midGalleryAdIndex
                                }) }))),
                        !slide.isAd && (React.createElement(GallerySlide, { ...slide, isLazy: isLazy, showGallerySlideCaptionOrTitle: showGallerySlideCaptionOrTitle, showZoomedImage: showZoomedImage }))))))),
                React.createElement(GalleryEmbedControls, { iconType: controlsIcon, isAdSlide: isAdSlide, slideIndex: slideIndexForDisplay, slideCount: slidesCount, onBack: this.handleBack, onForward: this.handleForward, shouldCycleSlides: shouldCycleSlides }))))) : (React.createElement(React.Fragment, null,
                React.createElement(GalleryEmbedListWrapper, { chunk: this.slidesAndAds, getRef: this.getRef, hasPhotoBookmark: hasPhotoBookmark, isListicleLayout: isListicleLayout, index: slideIndex, isInLightbox: isInLightbox, shouldHoldImageSpace: shouldHoldImageSpace, showGallerySlideCaptionOrTitle: showGallerySlideCaptionOrTitle, showZoomedImage: showZoomedImage, isModalClosed: isModalClosed }))),
            showGalleryEmbedCaption && isNotAdSlide && (React.createElement(React.Fragment, null,
                React.createElement(GalleryCaption, { ...slidesArr[this.state.slideIndex] }),
                React.createElement(GalleryEmbedHr, { className: "gallery-embed__hr", isListicleLayout: isListicleLayout, hasMixedMediaSlides: isMixedMediaCarousel, isModalClosed: isModalClosed })))));
    }
}
GalleryEmbed.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    config: PropTypes.object,
    contentType: PropTypes.string,
    controlsIcon: PropTypes.oneOf(['Arrow', 'ChevronRight']),
    dangerousHed: PropTypes.string,
    display: PropTypes.string,
    gallerySlideVariation: PropTypes.oneOf(['ItemLeft', 'ItemCenterNoCaption']),
    hasPhotoBookmark: PropTypes.bool,
    indexToStartOn: PropTypes.number,
    isInLightbox: PropTypes.bool,
    isLazy: PropTypes.bool,
    isListicleLayout: PropTypes.bool,
    isModal: PropTypes.bool,
    isModalClosed: PropTypes.bool,
    midGalleryAdsLimit: PropTypes.number,
    shouldCycleSlides: PropTypes.bool,
    shouldHoldImageSpace: PropTypes.bool,
    showAds: PropTypes.bool,
    showGalleryEmbedCaption: PropTypes.bool,
    showGallerySlideCaptionOrTitle: PropTypes.bool,
    showHed: PropTypes.bool,
    showNoAdsFromParent: PropTypes.bool,
    showZoomedImage: PropTypes.bool,
    slides: PropTypes.array,
    textAlign: PropTypes.string,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        display: PropTypes.string
    })
};
GalleryEmbed.displayName = 'GalleryEmbed';
module.exports = GalleryEmbed;
//# sourceMappingURL=GalleryEmbed.js.map

/***/ }),

/***/ 78873:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const { googleAnalytics } = __webpack_require__(90090);
const { getCTAText } = __webpack_require__(38759);
const { asConfiguredComponent } = __webpack_require__(12892);
const { GalleryEmbedCredit, GalleryEmbedSlideTitle, GalleryEmbedCaptionButton, GalleryEmbedCaptionWrapper, GalleryEmbedCaptionMetaOneWrapper, GalleryEmbedCaptionMetaOne, GalleryEmbedCaptionSellerName, GalleryEmbedCaptionDetail, GalleryEmbedCaptionPrice, GalleryEmbedCaptionReducedPrice, GalleryEmbedCaptionSlideBody } = __webpack_require__(56082);
const { jsonmlToReact } = __webpack_require__(21159);
/**
 * GalleryEmbedCaption component
 *
 * @param {string} [className] - Optional top-level class to add.
 * @param {string} [ctaAnalyticsName] - Optional string to use for google analytics name
 * @param {string} [ctaHref] - Optional text url to link to CTA button
 * @param {string} [cta] - Optional cta object
 * @param {string} [contentType] - Optional content type
 * @param {string} [dangerousCredit] - Optional HTML text description of a credit for slide
 * @param {string | Array} [dangerousDek] - Optional HTML representation of a dek for a slide
 * @param {string} [dangerousDetail] - Optional HTML text description showing rating or price
 * @param {string} [dangerousHed] - Optional HTML text description of a title for slide. Falls back to dangerousDek if empty.
 * @param {string} [dangerousMetaOne] - Optional HTML used to display text preceding price
 * @param {string} [price] - Optional text used to display original price with a strikethrough
 * @param {string} [reducedPrice] - Optional text used to display final sale price, prefer this one, if not a sale
 * @param {string} [sellerName] - Optional text used to display Store name / credit
 *
 * @returns {ReactElement} <figcaption>
 */
const GalleryEmbedCaption = ({ className, ctaAnalyticsName, ctaHref, cta, contentType, dangerousCredit, dangerousDek, dangerousDetail, dangerousHed, dangerousMetaOne, price, reducedPrice, sellerName }) => {
    const { formatMessage } = useIntl();
    const ctaText = getCTAText(cta, contentType, formatMessage);
    const ctaOnClickHandler = ctaAnalyticsName
        ? () => {
            googleAnalytics.emitUniqueGoogleTrackingEvent(`${ctaAnalyticsName}-embed`, {});
        }
        : () => { };
    const dekContent = (dangDek) => {
        if (typeof dangDek === 'string') {
            return (React.createElement(GalleryEmbedCaptionSlideBody, { dangerouslySetInnerHTML: { __html: dangDek } }));
        }
        return (React.createElement(GalleryEmbedCaptionSlideBody, null, jsonmlToReact.convert(dangerousDek)));
    };
    return (React.createElement(GalleryEmbedCaptionWrapper, { className: className },
        dangerousCredit && (React.createElement(GalleryEmbedCredit, { dangerouslySetInnerHTML: { __html: dangerousCredit } })),
        dangerousHed && (React.createElement(GalleryEmbedSlideTitle, { dangerouslySetInnerHTML: { __html: dangerousHed } })),
        dangerousDek && dekContent(dangerousDek),
        (dangerousMetaOne || price) && (React.createElement(GalleryEmbedCaptionMetaOneWrapper, null,
            dangerousMetaOne && (React.createElement(GalleryEmbedCaptionMetaOne, { dangerouslySetInnerHTML: { __html: dangerousMetaOne } })),
            price && (React.createElement(GalleryEmbedCaptionPrice, null, reducedPrice ? React.createElement("del", null, price) : React.createElement("span", null, price))),
            reducedPrice && (React.createElement(GalleryEmbedCaptionReducedPrice, null, reducedPrice)))),
        dangerousDetail && (React.createElement(GalleryEmbedCaptionDetail, { dangerouslySetInnerHTML: { __html: dangerousDetail } })),
        sellerName && (React.createElement(GalleryEmbedCaptionSellerName, { dangerouslySetInnerHTML: { __html: sellerName } })),
        ctaText && ctaHref && (React.createElement(GalleryEmbedCaptionButton, { href: ctaHref, inputKind: "link", "aria-label": "Opens in a new window", label: ctaText, onClickHandler: ctaOnClickHandler, rel: "nofollow noopener noreferrer", target: "_blank" }))));
};
GalleryEmbedCaption.propTypes = {
    className: PropTypes.string,
    contentType: PropTypes.string,
    cta: PropTypes.shape({
        article: PropTypes.string,
        product: PropTypes.string,
        recipe: PropTypes.string,
        review: PropTypes.string
    }),
    ctaAnalyticsName: PropTypes.string,
    ctaHref: PropTypes.string,
    dangerousCredit: PropTypes.string,
    dangerousDek: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
    dangerousDetail: PropTypes.string,
    dangerousHed: PropTypes.string,
    dangerousMetaOne: PropTypes.string,
    price: PropTypes.string,
    reducedPrice: PropTypes.string,
    sellerName: PropTypes.string
};
GalleryEmbedCaption.displayName = 'GalleryEmbedCaption';
module.exports = asConfiguredComponent(GalleryEmbedCaption, 'GalleryEmbedCaption');
//# sourceMappingURL=GalleryEmbedCaption.js.map

/***/ }),

/***/ 83193:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(82116)/* ["default"] */ .A);
const { GalleryEmbedControlsStyles, GalleryEmbedControlsAdTitle, GalleryEmbedControlsCounter, GalleryEmbedControlsCounterIndex, GalleryEmbedControlsCounterCount, GalleryEmbedControlsController, GalleryEmbedControlsButton } = __webpack_require__(56082);
const Arrow = __webpack_require__(4262);
const ChevronRight = __webpack_require__(39733);
/**
 * GalleryEmbedControls component
 *
 * @param {string} [className] - Optional top-level class to add.
 * @param {Function} onBack -  Required function to call on forward button click
 * @param {Function} onForward - Required function to call on forward button click
 * @param {boolean} [shouldCycleSlides] - Should cycle slides boolean
 * @param {boolean} [isAdSlide] - Is ad slide boolean
 * @param {number} [slideCount] - Total slide count
 * @param {number} [slideIndex] - Slide index of active slide
 *
 * @returns {ReactElement} <figcaption>
 */
const GalleryEmbedControls = ({ className, iconType = 'ChevronRight', onBack, onForward, slideCount, slideIndex, isAdSlide, shouldCycleSlides }) => {
    const { formatMessage } = useIntl();
    const isBackArrowDisabled = !shouldCycleSlides && slideIndex === 0;
    const isForwardArrowDisabled = !shouldCycleSlides && slideIndex + 1 === slideCount && !isAdSlide;
    const handleKeys = (event) => {
        const navMap = {
            ArrowLeft: onBack,
            ArrowRight: onForward
        };
        if (navMap[event.key]) {
            navMap[event.key]();
        }
    };
    const icons = {
        ChevronRight,
        Arrow
    };
    return (React.createElement(GalleryEmbedControlsStyles, { className: className },
        isAdSlide ? (React.createElement(GalleryEmbedControlsAdTitle, null, formatMessage(translations.adSlideText))) : (React.createElement(GalleryEmbedControlsCounter, null,
            React.createElement(GalleryEmbedControlsCounterIndex, null, `${slideIndex + 1} `),
            React.createElement(GalleryEmbedControlsCounterCount, null, `/ ${slideCount}`))),
        React.createElement(GalleryEmbedControlsController, { role: "presentation", onKeyDown: handleKeys },
            React.createElement(GalleryEmbedControlsButton, { ariaLabel: formatMessage(translations.backArrowButtonAriaLabel), isBackArrow: true, onClickHandler: onBack, label: "", inputKind: "button", isIconButton: true, isDisabled: isBackArrowDisabled, isDisabledStyle: isBackArrowDisabled, ButtonIcon: icons[iconType] }),
            React.createElement(GalleryEmbedControlsButton, { ariaLabel: formatMessage(translations.forwardArrowButtonAriaLabel), onClickHandler: onForward, label: "", inputKind: "button", isIconButton: true, isDisabled: isForwardArrowDisabled, isDisabledStyle: isForwardArrowDisabled, ButtonIcon: icons[iconType] }))));
};
GalleryEmbedControls.propTypes = {
    className: PropTypes.string,
    iconType: PropTypes.oneOf(['Arrow', 'ChevronRight']),
    isAdSlide: PropTypes.bool,
    onBack: PropTypes.func.isRequired,
    onForward: PropTypes.func.isRequired,
    shouldCycleSlides: PropTypes.bool,
    slideCount: PropTypes.number,
    slideIndex: PropTypes.number
};
module.exports = GalleryEmbedControls;
//# sourceMappingURL=GalleryEmbedControls.js.map

/***/ }),

/***/ 75966:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const VariedGalleryEmbed = __webpack_require__(11046);
module.exports = asConfiguredComponent(VariedGalleryEmbed, 'GalleryEmbed');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 56082:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BaseText } = __webpack_require__(76955);
const { calculateSpacing, getColorStyles, styledProperty, getTypographyStyles } = __webpack_require__(26865);
const Swipe = __webpack_require__(39767);
const ListWrapper = __webpack_require__(70497);
const Button = __webpack_require__(73730);
const { GallerySlideFigure, GallerySlideWrapper, GallerySlideResponsiveAsset } = __webpack_require__(55082);
const { ContentHeaderLeadAsset } = __webpack_require__(5239);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const slideAnimationSpeed = '0.4s';
const getListStyles = (isListicleLayout = false) => `
  display: flex;
  position: relative;
  flex-direction: row;
  flex-wrap: nowrap;
  transition: transform ${slideAnimationSpeed} ease-in-out;
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  list-style: none;

  ${isListicleLayout ? `display: block;` : ``}
`;
const GalleryEmbedSlideList = styled.ul.withConfig({
    displayName: 'GalleryEmbedSlideList'
}) `
  && {
    ${({ isListicleLayout }) => getListStyles(isListicleLayout)}
  }
`;
const GalleryEmbedSlideListItem = styled.li.withConfig({
    displayName: 'GalleryEmbedSlideListItem'
}) `
  && {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;

    ${styledProperty('isListicleLayout', true, `
      display: block;
    `)}
  }
`;
const GalleryEmbedHr = styled.hr.withConfig({
    displayName: 'GalleryEmbedHr'
}) `
  && {
    display: block;
    margin: 0;
    border: 0;
    padding: 0;
    height: 1px;

    ${({ isListicleLayout, hasMixedMediaSlides }) => isListicleLayout ||
    (hasMixedMediaSlides &&
        `
      display: none;
    `)}
  }
`;
const GalleryEmbedSwipe = styled(Swipe).withConfig({
    displayName: 'GalleryEmbedSwipe'
}) `
  && {
    display: block;
    ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.consumption.body.standard.bg-photo')};

    ${styledProperty('noHed', true, `
      margin-top: ${calculateSpacing(5)};
    `)}
  }
`;
const GalleryEmbedWrapper = styled.div.withConfig({
    displayName: 'GalleryEmbedWrapper'
}) `
  position: relative;
  margin: 0 0 ${calculateSpacing(4)};
  overflow: hidden;

  /* Grid gap override */
  ${GallerySlideWrapper} ${GallerySlideFigure} {
    grid-gap: 0;
  }

  ${ContentHeaderLeadAsset} & {
    margin: 0;
  }

  &:first-child {
    ${GalleryEmbedHr}:first-child {
      display: none;
    }

    ${GalleryEmbedSwipe} {
      margin-top: 0;
    }
  }

  ${({ isListicleLayout }) => isListicleLayout &&
    `
    .gallery__slides__slide {
      margin-bottom: ${calculateSpacing(4)};
    }
    ${GallerySlideFigure} {
      display: block;
      grid-template-columns: inherit;
    }
    ${ResponsiveImageContainer} {
      margin: 0 auto;
    }
  `}

  ${GallerySlideWrapper}
  ${GallerySlideResponsiveAsset}
    .responsive-image__image {
    margin: auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    /* This is an arbitrary height
     so that the gallery doesn't
     take up too much vertical space  */
    max-height: 550px;
  }
`;
const GalleryEmbedCredit = styled(BaseText).withConfig({
    displayName: 'GalleryEmbedCredit'
}) `
  /* This is to override .body a:not(.button):link, .body a:not(.button):visited  */
  && {
    a {
      color: inherit;
    }
  }
`;
GalleryEmbedCredit.defaultProps = {
    as: 'div',
    colorToken: 'colors.consumption.body.standard.body-deemphasized',
    topSpacing: '3',
    typeIdentity: 'typography.definitions.globalEditorial.context-tertiary'
};
const GalleryEmbedSlideTitle = styled(BaseText).withConfig({
    displayName: 'GalleryEmbedSlideTitle'
}) ``;
GalleryEmbedSlideTitle.defaultProps = {
    as: 'div',
    colorToken: 'colors.consumption.body.standard.subhed',
    topSpacing: 2,
    typeIdentity: 'typography.definitions.consumptionEditorial.subhed-aux-primary'
};
const GalleryEmbedTitle = styled.h2.withConfig({
    displayName: 'GalleryEmbedTitle'
}) `
  &&& {
    ${getTypographyStyles('typography.definitions.consumptionEditorial.subhed-aux-primary')}
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.subhed')};

    margin: 0;
    padding: ${calculateSpacing(2)} 0;
  }
`;
const GalleryEmbedCaptionSlideBody = styled(BaseText).withConfig({
    displayName: 'GalleryEmbedCaptionSlideBody'
}) ``;
GalleryEmbedCaptionSlideBody.defaultProps = {
    as: 'div',
    colorToken: 'colors.consumption.body.standard.body',
    topSpacing: 2,
    typeIdentity: 'typography.definitions.consumptionEditorial.description-embed'
};
const GalleryEmbedListWrapper = styled(ListWrapper).withConfig({
    displayName: 'GalleryEmbedListWrapper'
}) `
  ${({ isListicleLayout }) => getListStyles(isListicleLayout)}

  .gallery__item__slide--mid-gallery-ad {
    margin-bottom: 1.5rem;
  }
`;
const GalleryEmbedCaptionButton = styled(Button.Utility).withConfig({
    displayName: 'GalleryEmbedCaptionButton'
}) `
  margin-top: ${calculateSpacing(3)};
`;
const GalleryEmbedCaptionWrapper = styled.figcaption.withConfig({
    displayName: 'GalleryEmbedCaptionWrapper'
}) `
  margin-bottom: ${calculateSpacing(4)};
`;
const GalleryEmbedCaptionMetaOneWrapper = styled(BaseText).withConfig({
    displayName: 'GalleryEmbedCaptionMetaOneWrapper'
}) `
  line-height: 0;
`;
GalleryEmbedCaptionMetaOneWrapper.defaultProps = {
    as: 'div',
    colorToken: 'colors.consumption.body.standard.subhed',
    topSpacing: 3
};
const GalleryEmbedCaptionMetaOne = styled(BaseText).withConfig({
    displayName: 'GalleryEmbedCaptionMetaOne'
}) ``;
GalleryEmbedCaptionMetaOne.defaultProps = {
    as: 'span',
    colorToken: 'colors.consumption.body.standard.subhed',
    typeIdentity: 'typography.definitions.globalEditorial.numerical-small'
};
const GalleryEmbedCaptionSellerName = styled(BaseText).withConfig({
    displayName: 'GalleryEmbedCaptionSellerName'
}) `
  display: block;
`;
GalleryEmbedCaptionSellerName.defaultProps = {
    as: 'span',
    colorToken: 'colors.consumption.body.standard.subhed',
    topSpacing: 2,
    typeIdentity: 'typography.definitions.globalEditorial.context-secondary'
};
const GalleryEmbedCaptionDetail = styled(BaseText).withConfig({
    displayName: 'GalleryEmbedCaptionDetail'
}) ``;
GalleryEmbedCaptionDetail.defaultProps = {
    as: 'div',
    colorToken: 'colors.consumption.body.standard.accent',
    topSpacing: 2,
    typeIdentity: 'typography.definitions.globalEditorial.context-secondary'
};
const GalleryEmbedCaptionPrice = styled(BaseText).withConfig({
    displayName: 'GalleryEmbedCaptionPrice'
}) ``;
GalleryEmbedCaptionPrice.defaultProps = {
    as: 'span',
    colorToken: 'colors.consumption.body.standard.body-deemphasized',
    typeIdentity: 'typography.definitions.globalEditorial.numerical-small'
};
const GalleryEmbedCaptionReducedPrice = styled(BaseText).withConfig({
    displayName: 'GalleryEmbedCaptionReducedPrice'
}) `
  margin-left: ${calculateSpacing(1)};
`;
GalleryEmbedCaptionReducedPrice.defaultProps = {
    as: 'span',
    colorToken: 'colors.consumption.body.standard.accent',
    typeIdentity: 'typography.definitions.globalEditorial.numerical-small'
};
const buttonDimensions = '32px';
const GalleryEmbedControlsStyles = styled.div.withConfig({
    displayName: 'GalleryEmbedControlsStyles'
}) `
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: ${calculateSpacing(3)} 0 0;
  width: 100%;
  line-height: 0;
`;
const GalleryEmbedControlsAdTitle = styled(BaseText).withConfig({
    displayName: 'GalleryEmbedControlsAdTitle'
}) ``;
GalleryEmbedControlsAdTitle.defaultProps = {
    as: 'div',
    typeIdentity: 'typography.definitions.globalEditorial.numerical-small'
};
const GalleryEmbedControlsCounter = styled(BaseText).withConfig({
    displayName: 'GalleryEmbedControlsCounter'
}) `
  display: inline-block;
`;
GalleryEmbedControlsCounter.defaultProps = {
    as: 'span',
    typeIdentity: 'typography.definitions.globalEditorial.numerical-small'
};
const GalleryEmbedControlsCounterIndex = styled(BaseText).withConfig({
    displayName: 'GalleryEmbedControlsCounterIndex'
}) ``;
GalleryEmbedControlsCounterIndex.defaultProps = {
    as: 'span',
    colorToken: 'colors.consumption.body.standard.subhed',
    typeIdentity: 'typography.definitions.globalEditorial.numerical-small'
};
const GalleryEmbedControlsCounterCount = styled(BaseText).withConfig({
    displayName: 'GalleryEmbedControlsCounterCount'
}) ``;
GalleryEmbedControlsCounterCount.defaultProps = {
    as: 'span',
    colorToken: 'colors.consumption.body.standard.body-deemphasized',
    typeIdentity: 'typography.definitions.globalEditorial.numerical-small'
};
const GalleryEmbedControlsController = styled.div.withConfig({
    displayName: 'GalleryEmbedControlsController'
}) `
  display: inline-block;
`;
const GalleryEmbedControlsButton = styled(Button.Utility).withConfig({
    displayName: 'GalleryEmbedControlsButton'
}) `
  display: inline-block;
  /* This +10 is to offset the lag that happens when transitioning a svg fill-color  */
  transition: transform ${slideAnimationSpeed + 10} ease-in-out;
  border: 1px solid;
  ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.interactive.base.black')};
  background-color: transparent;
  cursor: pointer;
  padding: 0;
  width: ${buttonDimensions};
  min-width: ${buttonDimensions};
  height: ${buttonDimensions};

  && {
    &:focus,
    &:hover,
    &:active {
      border-width: 1px;
      background-color: transparent;
    }

    ${({ isDisabled }) => isDisabled &&
    `
      opacity: 0.8;
      border: 1px solid;
      ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.interactive.base.light')};
      pointer-events: none;

      svg {
        ${({ theme }) => getColorStyles(theme, 'fill', 'colors.interactive.base.light')};
      }
    `}
  }

  &:focus,
  &:hover {
    border: 1px solid;
    background-color: none;

    ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.interactive.base.brand-primary')};

    svg {
      ${({ theme }) => getColorStyles(theme, 'fill', 'colors.interactive.base.brand-primary')};
    }
  }

  &&:active,
  &&:focus,
  &&:hover {
    background-color: none;
  }

  &&:disabled {
    opacity: 0.8;
    border-width: 1px;
    background-color: transparent;

    svg {
      ${({ theme }) => getColorStyles(theme, 'fill', 'colors.interactive.base.light')};
    }
  }

  svg {
    position: relative;
    right: -1px; /* Small offset from icon's center */
    transition: fill ${slideAnimationSpeed} ease-in-out;
    height: 20px;
    ${({ theme }) => getColorStyles(theme, 'fill', 'colors.interactive.base.black')};
  }

  ${({ isBackArrow }) => isBackArrow
    ? `transform: rotate(180deg)`
    : `margin-left: ${calculateSpacing(2)}`}
`;
module.exports = {
    GalleryEmbedWrapper,
    GalleryEmbedHr,
    GalleryEmbedSwipe,
    GalleryEmbedCredit,
    GalleryEmbedTitle,
    GalleryEmbedSlideList,
    GalleryEmbedSlideListItem,
    GalleryEmbedListWrapper,
    GalleryEmbedCaptionButton,
    GalleryEmbedCaptionWrapper,
    GalleryEmbedCaptionMetaOneWrapper,
    GalleryEmbedCaptionMetaOne,
    GalleryEmbedCaptionSellerName,
    GalleryEmbedCaptionDetail,
    GalleryEmbedCaptionPrice,
    GalleryEmbedCaptionReducedPrice,
    GalleryEmbedCaptionSlideBody,
    GalleryEmbedControlsStyles,
    GalleryEmbedControlsAdTitle,
    GalleryEmbedControlsCounter,
    GalleryEmbedControlsCounterIndex,
    GalleryEmbedControlsCounterCount,
    GalleryEmbedControlsController,
    GalleryEmbedControlsButton,
    GalleryEmbedSlideTitle
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 82116:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    adSlideText: {
        id: 'GalleryEmbedControls.AdSlideText',
        defaultMessage: 'Advertisement',
        description: 'GalleryEmbed component Ad slide text'
    },
    backArrowButtonAriaLabel: {
        id: 'GalleryEmbedControls.BackArrowButtonAriaLabel',
        defaultMessage: 'gallery-back',
        description: 'GalleryEmbed component Back Arrow Button Aria Label'
    },
    forwardArrowButtonAriaLabel: {
        id: 'GalleryEmbedControls.ForwardArrowButtonAriaLabel',
        defaultMessage: 'gallery-forward',
        description: 'GalleryEmbed component Forward Arrow Button Aria Label'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 11046:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const GalleryEmbed = __webpack_require__(47811);
const MixedMediaCarousel = __webpack_require__(38337);
GalleryEmbed.ContentPromo = asVariation(GalleryEmbed, 'ContentPromo', {
    display: 'promo'
});
GalleryEmbed.MixedMediaCarousel = asVariation(MixedMediaCarousel, 'MixedMediaCarousel', {});
module.exports = GalleryEmbed;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 27110:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const ResponsiveImage = __webpack_require__(43608);
const { GalleryRecircGridWrapper, GalleryRecircContentWrapper, GalleryRecircContent, GalleryMidRecircHeading, GalleryRecircTitle, GalleryRecircImage, GalleryEndRecircHeading, GalleryRecircTextWrapper, GalleryRecircViewGalleryCTA } = __webpack_require__(26891);
const translations = (__webpack_require__(91997)/* ["default"] */ .A);
/**
 * GalleryRecircCards
 *
 * @param {object} props - React props
 * @param {string} [props.hed] - Optional hed string to overwrite the default hed
 * @param {Bool} props.isEndOfPageRecirc - Identify if it's end of page recirc card
 * @param {Array} props.items - Array of Cartoon object
 * @param {Function} props.onBeforeRedirect - Optional function which will be called before redirect
 * @param {Function} props.recircInteractionAnalytics - Analytics for recirc card interaction events
 * @param {Bool} props.showCropViewOnMobile - Identify if modal style should be applied in mobile view
 * @param {object} [props.variations] - Optional variations for the GalleryRecircCard
 * @param {boolean} [props.variations.shouldOpenInSameTab] - Optional prop to open the link in the same tab
 * @param {boolean} [props.variations.shouldUseItemDangerousDek] - Optional prop to use item dangerousDek for the CTA text
 * @param {boolean} [props.variations.shouldUseItemDangerousHed] - Optional prop to use item dangerousHed for the item title

 * @returns {ReactElement} - Component tree
 */
const GalleryRecircCards = ({ hed = '', isEndOfPageRecirc = false, onBeforeRedirect, items, recircInteractionAnalytics, showCropViewOnMobile = false, variations = {
    shouldOpenInSameTab: false,
    shouldUseItemDangerousDek: false,
    shouldUseItemDangerousHed: false
} }) => {
    const { formatMessage } = useIntl();
    const { shouldOpenInSameTab, shouldUseItemDangerousDek, shouldUseItemDangerousHed } = variations;
    if (!items.length) {
        return null;
    }
    const CTA_TEXT = formatMessage(isEndOfPageRecirc
        ? translations.viewNextGalleryCTAText
        : translations.viewGalleryCTAText);
    const handleCardClick = (event, item) => {
        event.preventDefault();
        onBeforeRedirect && onBeforeRedirect(item);
        recircInteractionAnalytics && recircInteractionAnalytics(item);
        const target = shouldOpenInSameTab ? '_self' : '_blank';
        window.open(item.url, target, 'noopener,noreferrer');
    };
    return (React.createElement(GalleryRecircGridWrapper, { isEndOfPageRecirc: isEndOfPageRecirc },
        !isEndOfPageRecirc && (React.createElement(GalleryMidRecircHeading, null, hed || formatMessage(translations.midGalleryRecircHeading))),
        items.map((item, index) => (React.createElement(GalleryRecircContentWrapper, { isEndOfPageRecirc: isEndOfPageRecirc, key: item.id || index },
            React.createElement(GalleryRecircContent, { href: item.url, isEndOfPageRecirc: isEndOfPageRecirc, showCropViewOnMobile: showCropViewOnMobile, "data-testid": "GalleryRecircContent", onClick: (event) => handleCardClick(event, item) },
                React.createElement(GalleryRecircTextWrapper, { isEndOfPageRecirc: isEndOfPageRecirc },
                    isEndOfPageRecirc && (React.createElement(GalleryEndRecircHeading, { "data-testid": "GalleryEndRecircHeading" }, formatMessage(translations.keepOnLaughingText))),
                    React.createElement(GalleryRecircTitle, { "data-testid": "GalleryRecircTitle", isEndOfPageRecirc: isEndOfPageRecirc, dangerouslySetInnerHTML: {
                            __html: shouldUseItemDangerousHed && item.dangerousHed
                                ? item.dangerousHed
                                : item?.source?.hed || ''
                        } }),
                    React.createElement(GalleryRecircViewGalleryCTA, { "data-testid": "GalleryRecircViewGalleryCTA", dangerouslySetInnerHTML: {
                            __html: shouldUseItemDangerousDek && item.dangerousDek
                                ? item.dangerousDek
                                : CTA_TEXT
                        } })),
                React.createElement(GalleryRecircImage, { isEndOfPageRecirc: isEndOfPageRecirc, "data-testid": "GalleryRecircImage", ...item.items[0] }),
                isEndOfPageRecirc && (React.createElement(GalleryEndRecircHeading, { "data-testid": "GalleryEndRecircHeading" }, formatMessage(translations.keepOnLaughingText)))))))));
};
GalleryRecircCards.propTypes = {
    hed: PropTypes.string,
    isEndOfPageRecirc: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape({
        dangerousDek: PropTypes.string,
        dangerousHed: PropTypes.string,
        url: PropTypes.string,
        items: PropTypes.arrayOf(PropTypes.shape({
            altText: PropTypes.string,
            dangerousCaption: PropTypes.string,
            dangerousCredit: PropTypes.string,
            isDesktopPortrait: PropTypes.bool,
            segmentedSources: ResponsiveImage.propTypes.segmentedSources,
            sources: ResponsiveImage.propTypes.sources,
            links: PropTypes.arrayOf(PropTypes.shape({
                behavior: PropTypes.string,
                label: PropTypes.string.isRequired,
                url: PropTypes.string,
                network: PropTypes.string
            })),
            tagCloud: PropTypes.shape({
                tags: PropTypes.arrayOf(PropTypes.shape({
                    tag: PropTypes.string.isRequired,
                    url: PropTypes.string
                })),
                sectionHeader: PropTypes.string
            })
        }))
    }).isRequired).isRequired,
    onBeforeRedirect: PropTypes.func,
    recircInteractionAnalytics: PropTypes.func,
    showCropViewOnMobile: PropTypes.bool,
    variations: PropTypes.shape({
        shouldOpenInSameTab: PropTypes.bool,
        shouldUseItemDangerousDek: PropTypes.bool,
        shouldUseItemDangerousHed: PropTypes.bool
    })
};
GalleryRecircCards.displayName = 'GalleryRecircCards';
module.exports = GalleryRecircCards;
//# sourceMappingURL=GalleryRecircCards.js.map

/***/ }),

/***/ 91361:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const GalleryRecircCards = __webpack_require__(4335);
module.exports = asConfiguredComponent(GalleryRecircCards, 'GalleryRecircCards');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 26891:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.GalleryRecircViewGalleryCTA = exports.GalleryRecircTextWrapper = exports.GalleryRecircTitle = exports.GalleryRecircImage = exports.GalleryEndRecircHeading = exports.GalleryMidRecircHeading = exports.GalleryRecircGridWrapper = exports.GalleryRecircContent = exports.GalleryRecircContentWrapper = void 0;
const { css, default: styled } = __webpack_require__(92168);
const ResponsiveImage = __webpack_require__(43608);
const { calculateSpacing, getColorToken, minMaxScreen, maxScreen, minScreen } = __webpack_require__(26865);
const { maxThresholds } = __webpack_require__(99906);
const { BaseWrap, BaseText } = __webpack_require__(76955);
const { BREAKPOINTS } = __webpack_require__(96472);
const GalleryRecircGridWrapper = styled.div.withConfig({
    displayName: 'GalleryRecircGridWrapper'
}) `
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-row-gap: ${calculateSpacing(2)};
  margin: auto;
  max-width: ${calculateSpacing(54)};
  height: auto;

  ${maxScreen(`${maxThresholds.lg}px`)} {
    max-width: unset;
  }

  ${({ isEndOfPageRecirc }) => isEndOfPageRecirc &&
    css `
      grid-template-rows: repeat(1, 1fr);
      grid-row-gap: 0;
      justify-content: end;
      max-width: unset;

      ${maxScreen(`${maxThresholds.lg}px`)} {
        grid-template-columns: repeat(1, 1fr);
      }
    `}
`;
exports.GalleryRecircGridWrapper = GalleryRecircGridWrapper;
const GalleryRecircContentWrapper = styled.div.withConfig({
    displayName: 'GalleryRecircContentWrapper'
}) `
  ${({ isEndOfPageRecirc }) => isEndOfPageRecirc &&
    css `
      display: flex;
      justify-self: center;

      ${maxScreen(`${maxThresholds.lg}px`)} {
        width: 100%;
      }

      ${minScreen(`${maxThresholds.lg + 1}px`)} {
        transition: width 0.3s ease;
        border: 1px solid
          ${getColorToken('colors.consumption.body.standard.divider')};
        border-right: none;
        border-radius: ${calculateSpacing(2)};
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        width: ${calculateSpacing(29)};

        &:hover {
          width: ${calculateSpacing(33)};
        }
      }
    `}
`;
exports.GalleryRecircContentWrapper = GalleryRecircContentWrapper;
const GalleryRecircTitle = styled(BaseText).withConfig({
    displayName: 'GalleryRecircTitle'
}) `
  padding-right: ${calculateSpacing(2)};

  ${({ isEndOfPageRecirc }) => isEndOfPageRecirc &&
    css `
      margin-bottom: ${calculateSpacing(1)};

      ${maxScreen(`${maxThresholds.lg}px`)} {
        grid-column: 1/8;
        grid-row: 2;
        padding-right: 0;
        text-align: center;
      }
    `}
`;
exports.GalleryRecircTitle = GalleryRecircTitle;
GalleryRecircTitle.defaultProps = {
    as: 'h3',
    colorToken: 'colors.consumption.body.standard.subhed',
    typeIdentity: 'typography.definitions.globalEditorial.context-primary'
};
const GalleryRecircViewGalleryCTA = styled(BaseText).withConfig({
    displayName: 'GalleryRecircViewGalleryCTA'
}) `
  :hover {
    text-decoration: underline;
  }
`;
exports.GalleryRecircViewGalleryCTA = GalleryRecircViewGalleryCTA;
GalleryRecircViewGalleryCTA.defaultProps = {
    as: 'span',
    colorToken: 'colors.interactive.base.brand-primary',
    typeIdentity: 'typography.definitions.foundation.link-primary'
};
const GalleryRecircTextWrapper = styled(BaseWrap).withConfig({
    displayName: 'GalleryRecircTextWrapper'
}) `
  display: grid;
  grid-column: 1/9;
  grid-row: 1/-1;
  flex-direction: column;
  align-items: start;
  gap: ${calculateSpacing(1)};

  ${({ isEndOfPageRecirc }) => isEndOfPageRecirc &&
    css `
      gap: 0;
      display: flex;
      grid-column: 1/-1;
      grid-row: 3;
      justify-content: center;

      ${maxScreen(`${maxThresholds.lg}px`)} {
        grid-column: 1/8;
        grid-row: 2;
        align-items: center;
      }

      ${minMaxScreen(BREAKPOINTS.md, `${maxThresholds.lg}px`)} {
        align-items: start;
        width: 100%;
      }
    `}
`;
exports.GalleryRecircTextWrapper = GalleryRecircTextWrapper;
const GalleryRecircImage = styled(ResponsiveImage).withConfig({
    displayName: 'GalleryRecircImage'
}) `
  display: grid;
  grid-column: 9/-1;
  grid-row: 1/3;
  justify-content: flex-end;
  margin: auto;

  img {
    max-width: ${calculateSpacing(15.5)};
    overflow: hidden;

    ${maxScreen(`${maxThresholds.lg}px`)} {
      max-width: ${calculateSpacing(11.25)};
    }
  }

  ${({ isEndOfPageRecirc }) => isEndOfPageRecirc &&
    css `
      grid-column: 1/-1;
      grid-row: 2;
      justify-content: start;
      margin-bottom: ${calculateSpacing(2)};

      img {
        max-width: ${calculateSpacing(21)};
      }

      ${maxScreen(`${maxThresholds.lg}px`)} {
        display: grid;
        grid-column: 8/-1;
        grid-row: 1/-1;
        justify-content: end;
        margin: auto;
        margin-left: ${calculateSpacing(1)};
        overflow: hidden;
        justify-items: center;

        img {
          max-width: ${calculateSpacing(15.5)};
        }
      }
    `}
`;
exports.GalleryRecircImage = GalleryRecircImage;
const GalleryEndRecircHeading = styled(BaseText).withConfig({
    displayName: 'GalleryEndRecircHeading'
}) `
  grid-column: 1/-1;
  grid-row: 1;
  padding-bottom: ${calculateSpacing(2)};

  ${maxScreen(`${maxThresholds.lg}px`)} {
    padding-bottom: ${calculateSpacing(1)};
  }

  ${minMaxScreen(BREAKPOINTS.md, `${maxThresholds.lg}px`)} {
    width: 100%;
  }
`;
exports.GalleryEndRecircHeading = GalleryEndRecircHeading;
GalleryEndRecircHeading.defaultProps = {
    as: 'h4',
    colorToken: 'colors.consumption.body.standard.display-texture',
    typeIdentity: 'typography.definitions.globalEditorial.context-secondary'
};
const GalleryMidRecircHeading = styled(BaseText).withConfig({
    displayName: 'GalleryMidRecircHeading'
}) `
  grid-column: 1/-1;
  grid-row: 1;
  text-align: center;

  ${maxScreen(`${maxThresholds.lg}px`)} {
    padding: 0 ${calculateSpacing(6)};
  }
`;
exports.GalleryMidRecircHeading = GalleryMidRecircHeading;
GalleryMidRecircHeading.defaultProps = {
    as: 'h4',
    colorToken: 'colors.consumption.body.standard.display-texture',
    typeIdentity: 'typography.definitions.globalEditorial.context-secondary'
};
const getDesktopStyleForEndOfPageRecirc = `
  ${minScreen(`${maxThresholds.lg + 1}px`)} {
    border: none;

    & > ${GalleryRecircTextWrapper} > ${GalleryEndRecircHeading} {
      display: none;
    }
  }
`;
const getMobileStyleForEndOfPageRecirc = css `
  ${maxScreen(`${maxThresholds.lg}px`)} {
    grid-template-rows: repeat(3, auto);
    padding-right: ${calculateSpacing(2)};
    padding-left: ${calculateSpacing(2)};
    width: 100%;
    max-width: 100%;
    justify-items: center;

    & > ${GalleryEndRecircHeading} {
      display: none;
    }

    ${({ showCropViewOnMobile }) => !showCropViewOnMobile &&
    `
        grid-template-rows: repeat(3, auto);
      `};

    ${({ showCropViewOnMobile }) => showCropViewOnMobile &&
    css `
        border-right: 1px solid
          ${getColorToken('colors.consumption.body.standard.divider')};
        border-bottom: none;
        border-top-right-radius: ${calculateSpacing(2)};
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      `}
  }
`;
const getEndOfPageRecircStyle = css `
  grid-gap: 0;
  grid-template-rows: repeat(4, auto);
  padding: ${calculateSpacing(3)} ${calculateSpacing(4)};
  max-width: ${calculateSpacing(29)};
  height: auto;

  ${getDesktopStyleForEndOfPageRecirc}

  ${getMobileStyleForEndOfPageRecirc}
`;
const GalleryRecircContent = styled(BaseWrap).withConfig({
    displayName: 'GalleryRecircContent'
}) `
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-row-gap: ${calculateSpacing(1)};
  align-items: center;
  border: 1px solid ${getColorToken('colors.consumption.body.standard.divider')};
  border-radius: ${calculateSpacing(2)};
  cursor: pointer;
  padding: ${calculateSpacing(2)} ${calculateSpacing(3)};
  text-decoration: none;

  ${({ isEndOfPageRecirc }) => isEndOfPageRecirc && getEndOfPageRecircStyle}
`;
exports.GalleryRecircContent = GalleryRecircContent;
GalleryRecircContent.defaultProps = {
    as: 'a'
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 91997:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    viewGalleryCTAText: {
        id: 'GalleryRecircCards.ViewGalleryCTAText',
        defaultMessage: 'View gallery »',
        description: 'View gallery button text in End Of Page Recirculation.'
    },
    viewNextGalleryCTAText: {
        id: 'GalleryRecircCards.viewNextGalleryCTAText',
        defaultMessage: 'View next gallery »',
        description: 'View next gallery button text in End Of Page Recirculation.'
    },
    keepOnLaughingText: {
        id: 'GalleryRecircCards.keepOnLaughingText',
        defaultMessage: 'Keep on laughing',
        description: 'Keep on laughing text in End Of Page Recirculation.'
    },
    midGalleryRecircHeading: {
        id: 'GalleryRecircCards.midGalleryRecircHeading',
        defaultMessage: 'Want more laughs? Try another cartoon gallery.',
        description: 'Want more laughs? Try another cartoon gallery text for mid gallery recirc'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 4335:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const GalleryRecircCards = __webpack_require__(27110);
GalleryRecircCards.CaptionContestRecirc = asVariation(GalleryRecircCards, 'CaptionContestRecirc', {
    shouldOpenInSameTab: true,
    shouldUseItemDangerousDek: true,
    shouldUseItemDangerousHed: true
}, { isEndOfPageRecirc: false });
module.exports = GalleryRecircCards;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 96637:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const { getImageOrientation } = __webpack_require__(38759);
const ExternalLink = __webpack_require__(39832);
const ResponsiveAsset = __webpack_require__(73275);
const ProductOfferList = __webpack_require__(18059);
const translations = (__webpack_require__(20460)/* ["default"] */ .A);
const { googleAnalytics } = __webpack_require__(90090);
const { GallerySlideWrapper, GallerySlideFigure, GallerySlideAssetWrapper, GallerySlideAssetContainer, GallerySlideAssetContainerInner, GallerySlideCaptionHed, GallerySlideCaptionDek, GallerySlideRankingContainerWrapper, GallerySlideRankingContainerRank, GallerySlideRankingContainerScore, GallerySlideResponsiveAsset } = __webpack_require__(55082);
/**
 * AwardsListSlide component
 *
 * @param {object} props - props for the component
 * @param {string} props.contentType - Required text description of the type of content to be rendered
 * @param {string} [props.dangerousHed] - Optional HTML text description of a title for card
 * @param {string} [props.hedHref] - Optional text url for hed
 * @param {ResponsiveAsset.propTypes} props.image - Required image that contains altText, attributes, and source urls
 * @param {Bool} [props.isLazy] -
 * @param {object} [props.locationInfo] - Optional object which contains location information for each slide
 * @param {number} props.order - Number that determines slide order
 * @param {number} [props.overallRating] - Optional number that displays the rating for each slide

 * @returns {ReactElement} <div>
 */
const AwardsListSlide = ({ contentType, dangerousHed, hedHref, image, isLazy, locationInfo, offers, order, overallRating }) => {
    const { formatMessage } = useIntl();
    const analyticsData = JSON.stringify({
        pattern: 'AwardsListSlide'
    });
    const media = image && {
        ...image
    };
    const ranking = `#${order + 1}`;
    const { city, country } = locationInfo;
    const orientation = media && getImageOrientation(media);
    const renderHed = hedHref ? (React.createElement(ExternalLink, { href: hedHref, dangerouslySetInnerHTML: { __html: dangerousHed } })) : (React.createElement("span", { dangerouslySetInnerHTML: { __html: dangerousHed } }));
    const onClickHandler = () => {
        googleAnalytics.emitGoogleTrackingEvent('awards-list-slide-button-click');
    };
    return (React.createElement(GallerySlideWrapper, { "data-event-boundary": "click", "data-in-view": analyticsData, "data-event-click": analyticsData, shouldOrderedGallery: false, contentAlign: "left", awardList: true, hasBackground: false },
        React.createElement(GallerySlideFigure, null,
            overallRating && (React.createElement(GallerySlideRankingContainerWrapper, null,
                React.createElement(GallerySlideRankingContainerRank, null,
                    React.createElement("h2", null, "Ranking"),
                    React.createElement("div", null, ranking)),
                React.createElement(GallerySlideRankingContainerScore, null,
                    React.createElement("h2", null, "Score"),
                    React.createElement("div", null, overallRating)))),
            dangerousHed && (React.createElement(GallerySlideCaptionHed, null, renderHed)),
            city && country && (React.createElement(GallerySlideCaptionDek, null, `${city}, ${country}`)),
            media && (React.createElement(GallerySlideAssetWrapper, { orientation: orientation, contentType: contentType },
                React.createElement(GallerySlideAssetContainer, null,
                    React.createElement(GallerySlideAssetContainerInner, null,
                        React.createElement(GallerySlideResponsiveAsset, { ...media, isLazy: isLazy }))))),
            offers?.length ? (React.createElement(ProductOfferList, { buttonVariation: "Primary", btnStyle: "filled", className: "gallery-slide__aside-offers", dataAttrs: {
                    'data-component-position': 'awards-list-slide'
                }, defaultCTAText: formatMessage(translations.productOfferCTAText), offers: offers.slice(0, 1), onClickHandler: onClickHandler, showCount: 1, showOffersSeller: true, venueSellerPreviewText: formatMessage(translations.venueSellerPreviewText) })) : null)));
};
AwardsListSlide.propTypes = {
    contentType: PropTypes.string.isRequired,
    dangerousHed: PropTypes.string,
    hedHref: PropTypes.string,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    isLazy: PropTypes.bool,
    locationInfo: PropTypes.shape({
        city: PropTypes.string,
        country: PropTypes.string
    }),
    offers: PropTypes.array,
    order: PropTypes.number,
    overallRating: PropTypes.number
};
AwardsListSlide.displayName = 'AwardsListSlide';
module.exports = AwardsListSlide;
//# sourceMappingURL=AwardsListSlide.js.map

/***/ }),

/***/ 25939:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState } = __webpack_require__(96540);
const debounce = __webpack_require__(38221);
const classnames = __webpack_require__(32485);
const { useIntl } = __webpack_require__(46984);
const ResponsiveAsset = __webpack_require__(73275);
const SocialIcons = __webpack_require__(35676);
const { getImageOrientation, getCTAText } = __webpack_require__(38759);
const ExternalLink = __webpack_require__(39832);
const { ProductEmbedImageLink } = __webpack_require__(53985);
const GallerySlideCaption = __webpack_require__(14473);
const { handleLinkClick } = __webpack_require__(43428);
const { TrackComponentChannel } = __webpack_require__(78788);
const { productImpressionTracking, formatGtmData } = __webpack_require__(60162);
const { onMouseMoveZoom } = __webpack_require__(51558);
const { GallerySlideAssetWrapper, GallerySlideAssetContainer, GallerySlideAssetContainerInner, GallerySlideSocialIcons, GallerySlideResponsiveAsset, GallerySlideCaptionWrapper, GallerySlideFigure, GallerySlideWrapper, GallerySlideZoomWrapper } = __webpack_require__(55082);
const { CAN_USE_DOM, BREAKPOINTS } = __webpack_require__(96472);
const { extractTrackingParameters } = __webpack_require__(25203);
/**
 * Checks if a media query matches in browser environment
 * @param {string} query - Media query to check
 * @returns {boolean} Whether the media query matches
 */
const matchMediaQuery = (query) => CAN_USE_DOM ? window.matchMedia(query).matches : false;
/**
 * Checks if viewport is desktop size (≥ 768px)
 * @returns {boolean} Whether viewport is desktop size
 */
const isDesktop = () => matchMediaQuery(`screen and (min-width: ${BREAKPOINTS.md})`);
/**
 * Checks if viewport height is greater than or equal to a value
 * @param {number} value - Height to compare against viewport
 * @returns {boolean} Whether viewport height is ≥ value
 */
const isViewportHeightLargerThanValue = (value) => matchMediaQuery(`screen and (min-height: ${value}px)`);
/**
 * GallerySlide component
 *
 * @param {object} props - props for the component
 * @param {object} [props.bookmarkMeta] - Object containing the metadata (slug and title) for bookmarking a photo
 * @param {string} [props.brand] - Optional top-level brand name
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} props.contentType - Required text description of the type of content to be rendered
 * @param {string} [props.ctaAnalyticsName] - Optional string to use for google analytics name
 * @param {string} [props.ctaHref] - Optional text url to link to CTA button
 * @param {string} [props.ctaText] - Optional text displaying CTA button text
 * @param {string} props.dangerousCredit - Required HTML text description of a credit for card
 * @param {string} [props.dangerousDetail] - Optional HTML text description showing rating or price
 * @param {string} [props.dangerousHed] - Optional HTML text description of a title for card
 * @param {string} [props.dangerousMetaOne] - Optional HTML used to display text preceding price
 * @param {string} [props.dangerousMetaTwo] - Optional HTML used to display vendor, brand name, or product
 * @param {string} [props.dangerousPreHeaderTwo] - Optional text used to show rubric or venue name
 * @param {string} [props.dangerousPostCTA] - Optional text used to show who sponsored the slide
 * @param {string} [props.defaultVotingPrompt] - default question, also determines whether to enable voting
 * @param {Array} [dek] - Optional JsonML representation of a caption for card
 * @param {boolean} [props.hasPhotoBookmark] - Optional flag to enable bookmarking a photo
 * @param {Array} [functionalTags] - boolean value to determine to show social icons for the brand
 * @param {string} [props.hedHref] - Optional text url for hed if it should not use ctaHref
 * @param {boolean} [props.hidePriceComponentWhenNoPrice] - Optional flag to hide price when it is unavailable
 * @param {ResponsiveAsset.propTypes.media} props.image - Required image that contains altText, attributes, and source urls
 * @param {object} [props.itemSocialSharesProps] - Optional each gallery item social share link
 * @param {Bool} [props.isHedClickable] - Optional flag to show a clickable hed
 * @param {Bool} [props.hasGallerySlideBackground] - optional flag for gallery product background
 * @param {Bool} [props.hasGallerySlideTextPadding] - optional flag for gallery numeric text paading
 * @param {Bool} [props.hasPriceSection] - Optional flag to show a clickable hed
 * @param {Bool} [props.hasReadReviewCTA] - Optional flag to show a Read Review CTA with bookmark if no offer urls present
 * @param {string} [props.name] - Optional text used to display name
 * @param {Array} [props.offers] - Optional array of offers to display on a product slide
 * @param {string} [props.promotionHed] - Optional hed to display on a promotional slide
 * @param {string} [props.promotionText] - Optional text to display on a promotional slide
 * @param {boolean} [props.shouldHoldImageSpace] - Optional prop, set to true to hold image space based on image aspect ratio
 * @param {Bool} [props.shouldLimitLongPortraits] - Optional flag to limit vertical slide height to 150% of viewport
 * @param {boolean} [props.showGallerySlideCaptionOrTitle] - Optional prop, set to true to show the caption OR title within GallerySlideCaption instead of both.
 * @param {boolean} [props.showOrderedGallery] - Optional boolean to show slide count as a bigger font and without the total number of slides, defaults to false
 * @param {boolean} [props.showPriceOnButton] - Optional boolean to show product price inside the button
 * @param {boolean} props.showOfferUrl - Determines whether offerUrl should be displayed or not based on flag
 * @param {boolean} props.showSellerNameBelowButton - Optional falg to determine whether seller name is displayed below button
 * @param {string} props.preHeaderOne - Required text used to display slideCount or order number
 * @param {string} [props.price] - Optional text used to display original price with a strikethrough
 * @param {string} [props.reducedPrice] - Optional text used to display final sale price, prefer this one, if not a sale
 * @param {SocialIcons.propTypes} [props.socialIconsProps] - Optional pinterest component url provider
 * @param {string} [props.variationDisplayName] - Optional display name passed in by `asVariation` helper, used in pattern tracking
 * @param {object} [props.variations] - Optional variation properties used in rendering the component
 * @param {object} [props.variations.hasBackground] - Optional `cards` have background colors that differ from parent component and `items` don't
 * @param {boolean} [props.variations.hasMultipleLines] - Boolean value that helps in clamping text on button to two line and ellipsis when the sentences is more than two lines
 * @param {object} [props.variations.isOrdered] - Optional Ordered cards have a large number of them.
 * @param {object} [props.variations.contentAlign] - Optional text determining left or center alignment
 * @param {object} [props.variations.hasCaptionMargin] - Optional flag to enable/disable caption margin
 * @param {object} [props.variations.shouldDekBelowOffer] - Optional boolean determining should Dek be below offer(s)
 * @param {boolean} [props.showSlideCount] - Determines whether slideCount should be displayed or not based on flag
 * @param {boolean} [props.showLocalisedOffers] - Optional to show product localised offers
 * @param {boolean} [props.showZoomedImage] - Optional boolean to add a wrapper around responsive image to zoom in on hover
 * @param {string} [props.subtype] - describes the subtype under Venue types.
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 * @param {string} [props.ctaAtRetailerName] - Optional cta at text when price is not present
 * @param {string} [props.id] - Optional flag for copilot id
 * @param {boolean} [props.showClampedProductDescription] - optinal flag for for enabling product description accordion data
 * @param {boolean} [props.variations.shouldUseBookmarkV3] -  optional flag to use BookmarkV3 service
 * @param {boolean} [props.variations.showBookMarkIcon] - optional flag to enable bookmark on gallery
 * @param  {boolean} [props.variations.showCommentCount]  - optional flag to show comments count on gallery
 * @param {boolean} [props.commentsCount] - total primary comments count added for the story
 * @param {object} [props.actionIdFlags] - Optional flags to enable actionId encoding on click
 * @param {boolean} [props.shouldEnableBookmarkDrawers] - Feature flag to define whether enable bookmark drawers functionality
 *
 * @returns {ReactElement} <div>
 */
// eslint-disable-next-line complexity
const GallerySlide = ({ bookmarkMeta, brand, buttonVariation, btnStyle, className, commentsCount, contentType, ctaAnalyticsName, ctaHref, cta, ctaRel, id, subtype, ctaAtRetailerName, dangerousCredit, dangerousDetail, dangerousHed, dangerousMetaOne, dangerousMetaTwo, dangerousPostCTA, data_item, dangerousPreHeaderTwo, defaultVotingPrompt, dek, dropShipSellers, hasPhotoBookmark = false, functionalTags = [], hidePriceComponentWhenNoPrice = false, itemSocialSharesProps, image, index, hasSlideHedIcon = false, hedHref, isHedClickable, hasPriceSection, hasGallerySlideBackground, hasGallerySlideTextPadding, hasReadReviewCTA, isLazy, name, offers, promotionHed, productId, promotionText, preHeaderOne, shouldHoldImageSpace = false, shouldLimitLongPortraits = true, showGallerySlideCaptionOrTitle, showOrderedGallery, showMultipleBuyButtons, showPriceOnButton, showOfferUrl, showSellerNameBelowButton, socialIconsProps, variationDisplayName, showSlideCount = true, variations = {
    contentAlign: 'left',
    hasBackground: true,
    hasCaption: true,
    isOrdered: false,
    shouldBrandNameBelowHed: false,
    shouldDekBelowOffer: false,
    hasMultipleLines: false
}, showLocalisedOffers, variationName, showClampedProductDescription = false, productDescriptionLineLength, shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark, shouldEnableCommentsCount, showZoomedImage = false, hasReadMoreFeature = false, actionIdFlags = {} }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'GallerySlide',
            variation: variationName
        });
    }, [variationName]);
    const [showCaptionWhenAssetLoaded, setShowCaptionWhenAssetLoaded] = useState(false);
    const hasHotelOrProductType = contentType === 'product' ||
        contentType === 'commerce-product' ||
        contentType === 'hotel';
    const { formatMessage } = useIntl();
    const ctaText = getCTAText(cta, contentType, formatMessage);
    const analyticsData = JSON.stringify({
        pattern: 'GallerySlide',
        variation: variationDisplayName
    });
    const isSponsored = functionalTags
        ? functionalTags.some((tag) => tag.name === '_isSponsored')
        : false;
    const { contentAlign, hasBackground, hasCaption, isOrdered, shouldBrandNameBelowHed, hasMultipleLines, hasCaptionMargin, showBookMarkIcon, showCommentCount } = variations;
    const shouldOrderedGallery = isOrdered || (showOrderedGallery && !!preHeaderOne.length);
    // TODO: If we rename the property coming from state to `media`, we can forgo this step.
    const media = image && {
        ...image,
        // The LightBox component checks the id in responsive asset to know if it should be clickable
        id
    };
    const orientation = media && getImageOrientation(media);
    const isCtaInternal = contentType === 'recipe';
    const dataAttrs = contentType === 'product' ? { 'data-buy-button': true } : {};
    const credit = dangerousCredit || (image && image.credit) || '';
    const seasonName = image?.additionalMetaData?.seasonName || '';
    const collectionLink = image?.additionalMetaData?.link;
    // eslint-disable-next-line consistent-return
    const getUrl = (showOfferUri) => {
        if (offers && offers.length > 0) {
            return showOfferUri ? offers[0].offerUrl : offers[0].purchaseUri;
        }
    };
    const linkhref = getUrl(showOfferUrl);
    let isExternalProduct = true;
    if (dropShipSellers?.length > 0) {
        isExternalProduct = dropShipSellers?.some((seller) => !getUrl(showOfferUrl)?.toLowerCase().includes(seller));
    }
    const productData = {
        dangerousHed,
        brand: { name: brand },
        id: productId || id,
        index: data_item?.index || index,
        contentType,
        offers,
        component: 'gallery_slide_component',
        hotelLink: hedHref
    };
    const gtmClickHandler = (position, event, actionId) => {
        formatGtmData({
            window,
            product: { ...productData },
            index: position,
            actionId,
            layout: 'ProductEmbed',
            event,
            layoutTitle: dangerousHed
        });
    };
    React.useEffect(() => {
        if (contentType !== 'product') {
            return undefined; // explicitly return undefined to satisfy ESLint
        }
        const trackProductImpression = () => {
            const elements = document.getElementsByClassName('product-embed');
            productImpressionTracking('ProductEmbed', elements);
        };
        const debouncedScrollListener = debounce(trackProductImpression, 1000);
        window.addEventListener('load', trackProductImpression);
        window.addEventListener('scroll', debouncedScrollListener);
        return () => {
            window.removeEventListener('load', trackProductImpression);
            window.removeEventListener('scroll', debouncedScrollListener);
            debouncedScrollListener.cancel(); // cancel pending debounced calls
        };
    }, [contentType]);
    const showClampedDescription = showClampedProductDescription &&
        ['commerce-product', 'product'].includes(contentType);
    const captionProps = {
        bookmarkMeta,
        brand,
        buttonVariation,
        btnStyle,
        className,
        commentsCount,
        contentType,
        ctaAnalyticsName,
        ctaHref,
        ctaRel,
        ctaText,
        ctaAtRetailerName,
        dangerousCredit: credit,
        dangerousDetail,
        dangerousHed,
        dangerousMetaOne,
        dangerousMetaTwo,
        dangerousPostCTA,
        dangerousPreHeaderTwo,
        dataAttrs,
        defaultVotingPrompt,
        dek,
        dropShipSellers,
        hasPhotoBookmark,
        hasGallerySlideBackground,
        hasSlideHedIcon,
        hedHref,
        hidePriceComponentWhenNoPrice,
        itemSocialSharesProps,
        isCtaInternal,
        isExternalProduct,
        hasPriceSection,
        isHedClickable,
        name,
        offers,
        preHeaderOne,
        productId,
        promotionHed,
        promotionText,
        seasonName,
        showGallerySlideCaptionOrTitle,
        showMultipleBuyButtons,
        showPriceOnButton,
        showOfferUrl,
        showSellerNameBelowButton,
        showClampedProductDescription: showClampedDescription && hasReadMoreFeature,
        productDescriptionLineLength,
        shouldEnableBookmarkDrawers,
        shouldEnableCardLevelBookmark,
        shouldEnableCommentsCount,
        collectionLink,
        variations: {
            showSlideCount,
            ...variations,
            ...{
                isOrdered: shouldOrderedGallery,
                shouldBrandNameBelowHed: shouldBrandNameBelowHed || showOrderedGallery
            }
        }
    };
    const isActionIdEnabledForComponent = actionIdFlags?.enableActionIdForGallerySlide;
    const enableActionIdMapping = linkhref?.includes('cna.st') && isActionIdEnabledForComponent;
    const handleClick = (event, position) => {
        hasHotelOrProductType
            ? (() => {
                const hrefValue = event?.currentTarget?.getAttribute('href');
                const queryParams = extractTrackingParameters();
                if (enableActionIdMapping && hrefValue) {
                    event.preventDefault();
                    handleLinkClick({
                        event,
                        gtmTrackOnClick: gtmClickHandler,
                        linkProps: hrefValue,
                        setLinkProps: (newHref) => {
                            window.open(newHref, '_blank', 'noopener, noreferrer');
                        },
                        position,
                        type: 'GallerySlideImage',
                        component: 'gallery_slide_component',
                        queryParams
                    });
                }
                else {
                    gtmClickHandler(position, event);
                }
            })()
            : (() => { })();
    };
    const getProductOrImage = () => {
        if (contentType === 'product' && offers && offers.length > 0) {
            return (React.createElement(ProductEmbedImageLink, { as: ExternalLink, hasGallerySlideBackground: hasGallerySlideBackground, href: linkhref, target: isExternalProduct ? '_blank' : '_self', rel: "sponsored noopener", attributes: {
                    tabIndex: -1,
                    'aria-hidden': true,
                    'data-offer-retailer': offers[0].sellerName,
                    'data-offer-url': offers[0].offerUrl
                }, onClick: (event, position) => handleClick(event, position), component: "gallery_slide_component" },
                React.createElement(GallerySlideResponsiveAsset, { className: classnames('GallerySlideResponsiveAsset', className), ...media, isLazy: isLazy, onClick: (event, position) => handleClick(event, position) })));
        }
        if ((contentType || image?.contentType) === 'cnevideo') {
            return (React.createElement(GallerySlideResponsiveAsset, { className: classnames('GallerySlideResponsiveAsset', className), ...media, isLazy: isLazy, shouldAutoplay: false, shouldPlayContinuously: false }));
        }
        return (React.createElement(GallerySlideResponsiveAsset, { className: classnames('GallerySlideResponsiveAsset', className), ...media, isLazy: isLazy, shouldHoldImageSpace: shouldHoldImageSpace }));
    };
    const [hasMouseMoved, setHasMouseMoved] = useState(false);
    const getZoomedImage = () => {
        const source = media?.segmentedSources?.lg?.length;
        const url = media?.segmentedSources?.lg[source - 1]?.url;
        if (!url || !isDesktop()) {
            return getProductOrImage();
        }
        // Only images from ImageSearchPage have .height as they use a custom getPhotoFieldsFragment query
        // rather than the generic getPhotoFieldFragment. For other pages this will always return false.
        // For this to work for all pages height needs to be added to the query or the process rethought
        const useFixedZoomedImageSize = isViewportHeightLargerThanValue(media.height);
        return (React.createElement(GallerySlideZoomWrapper, { hasMouseMoved: hasMouseMoved, onMouseMove: (e) => {
                setHasMouseMoved(true);
                onMouseMoveZoom(e);
            }, url: url, useFixedZoomedImageSize: useFixedZoomedImageSize },
            React.createElement(GallerySlideResponsiveAsset, { className: classnames('GallerySlideResponsiveAsset', className), ...media, isLazy: isLazy, onAssetLoaded: () => setShowCaptionWhenAssetLoaded(true) })));
    };
    const shouldShowCaption = !showZoomedImage || !isDesktop() || showCaptionWhenAssetLoaded;
    return (React.createElement(GallerySlideWrapper, { className: hasHotelOrProductType
            ? classnames('product-embed', className)
            : className, "data-event-boundary": "click", "data-in-view": analyticsData, "data-event-click": analyticsData, defaultVotingPrompt: defaultVotingPrompt, hasBackground: hasBackground, hasCaptionMargin: hasCaptionMargin, hasMultipleLines: hasMultipleLines, shouldOrderedGallery: shouldOrderedGallery, contentAlign: contentAlign, showMultipleBuyButtons: showMultipleBuyButtons, orientation: orientation, image: image, hasReadReviewCTA: hasReadReviewCTA, contentType: contentType || image?.contentType, shouldLimitLongPortraits: shouldLimitLongPortraits, isSponsored: isSponsored, hasGallerySlideBackground: hasGallerySlideBackground, "data-item": JSON.stringify(productData), "data-testid": "GallerySlideWrapper", showBookMarkIcon: showBookMarkIcon },
        React.createElement(GallerySlideFigure, null,
            media && (React.createElement(GallerySlideAssetWrapper, { orientation: orientation, contentType: contentType },
                React.createElement(GallerySlideAssetContainer, null,
                    React.createElement(GallerySlideAssetContainerInner, null,
                        showZoomedImage && getZoomedImage(),
                        !showZoomedImage && getProductOrImage(),
                        socialIconsProps && socialIconsProps.links.length > 0 && (React.createElement(GallerySlideSocialIcons, { ...socialIconsProps })))))),
            hasCaption && shouldShowCaption && (React.createElement(GallerySlideCaptionWrapper, { as: GallerySlideCaption, ...captionProps, contentAlign: contentAlign, contentType: contentType, subtype: subtype, ctaAtRetailerName: ctaAtRetailerName, hasMultipleLines: hasMultipleLines, hasCaptionMargin: hasCaptionMargin, hasGallerySlideTextPadding: hasGallerySlideTextPadding, hasGallerySlideBackground: hasGallerySlideBackground, hasHotelOrProductType: hasHotelOrProductType, hasReadReviewCTA: hasReadReviewCTA, id: id, image: hasPhotoBookmark ? image : undefined, productData: productData, productId: productId, showBookMarkIcon: showBookMarkIcon, showCommentCount: showCommentCount, showLocalisedOffers: showLocalisedOffers, urlToBookmark: ctaHref, actionIdFlags: actionIdFlags })))));
};
GallerySlide.propTypes = {
    actionIdFlags: PropTypes.object,
    bookmarkMeta: PropTypes.shape({
        slug: PropTypes.string,
        title: PropTypes.string
    }),
    brand: PropTypes.string,
    btnStyle: PropTypes.oneOf(['filled', 'outlined', 'text']),
    buttonVariation: PropTypes.string,
    className: PropTypes.string,
    commentsCount: PropTypes.number,
    contentType: PropTypes.string.isRequired,
    cta: PropTypes.shape({
        article: PropTypes.string,
        product: PropTypes.string,
        recipe: PropTypes.string,
        review: PropTypes.string
    }),
    ctaAnalyticsName: PropTypes.string,
    ctaAtRetailerName: PropTypes.string,
    ctaHref: PropTypes.string,
    ctaRel: PropTypes.string,
    dangerousCredit: PropTypes.string.isRequired,
    dangerousDetail: PropTypes.string,
    dangerousHed: PropTypes.string,
    dangerousMetaOne: PropTypes.string,
    dangerousMetaTwo: PropTypes.string,
    dangerousPostCTA: PropTypes.string,
    dangerousPreHeaderTwo: PropTypes.string,
    data_item: PropTypes.object,
    defaultVotingPrompt: PropTypes.string,
    dek: PropTypes.array,
    dropShipSellers: PropTypes.array,
    functionalTags: PropTypes.arrayOf(PropTypes.shape({
        name: PropTypes.string
    })),
    hasGallerySlideBackground: PropTypes.bool,
    hasGallerySlideTextPadding: PropTypes.bool,
    hasPhotoBookmark: PropTypes.bool,
    hasPriceSection: PropTypes.bool,
    hasReadMoreFeature: PropTypes.bool,
    hasReadReviewCTA: PropTypes.bool,
    hasSlideHedIcon: PropTypes.bool,
    hedHref: PropTypes.string,
    hidePriceComponentWhenNoPrice: PropTypes.bool,
    id: PropTypes.string,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    index: PropTypes.number,
    isHedClickable: PropTypes.bool,
    isLazy: PropTypes.bool,
    itemSocialSharesProps: PropTypes.shape({
        showBookmark: PropTypes.bool,
        links: PropTypes.array
    }),
    name: PropTypes.string,
    offers: PropTypes.array,
    preHeaderOne: PropTypes.string,
    price: PropTypes.string,
    productDescriptionLineLength: PropTypes.number,
    productId: PropTypes.string,
    promotionHed: PropTypes.string,
    promotionText: PropTypes.string,
    reducedPrice: PropTypes.string,
    shouldEnableBookmarkDrawers: PropTypes.bool,
    shouldEnableCardLevelBookmark: PropTypes.bool,
    shouldEnableCommentsCount: PropTypes.bool,
    shouldHoldImageSpace: PropTypes.bool,
    shouldLimitLongPortraits: PropTypes.bool,
    showClampedProductDescription: PropTypes.bool,
    showGallerySlideCaptionOrTitle: PropTypes.bool,
    showLocalisedOffers: PropTypes.bool,
    showMultipleBuyButtons: PropTypes.bool,
    showOfferUrl: PropTypes.bool,
    showOrderedGallery: PropTypes.bool,
    showPriceOnButton: PropTypes.bool,
    showSellerNameBelowButton: PropTypes.bool,
    showSlideCount: PropTypes.bool,
    showZoomedImage: PropTypes.bool,
    socialIconsProps: PropTypes.shape(SocialIcons.propTypes),
    subtype: PropTypes.string,
    variationDisplayName: PropTypes.string,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        contentAlign: PropTypes.oneOf(['center', 'left']).isRequired,
        hasBackground: PropTypes.bool,
        hasCaption: PropTypes.bool,
        hasCaptionMargin: PropTypes.bool,
        hasMultipleLines: PropTypes.bool,
        isOrdered: PropTypes.bool,
        shouldBrandNameBelowHed: PropTypes.bool,
        shouldDekBelowOffer: PropTypes.bool,
        showBookMarkIcon: PropTypes.bool,
        showCommentCount: PropTypes.bool
    })
};
GallerySlide.displayName = 'GallerySlide';
module.exports = GallerySlide;
//# sourceMappingURL=GallerySlide.js.map

/***/ }),

/***/ 14473:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState } = __webpack_require__(96540);
const { connector } = __webpack_require__(57744);
const ExternalLink = __webpack_require__(39832);
const ArrowIcon = __webpack_require__(69571);
const ProductOfferList = __webpack_require__(18059);
const { googleAnalytics } = __webpack_require__(90090);
const { shouldRenderDek, jsonmlToReact } = __webpack_require__(38759);
const NativeShareButton = __webpack_require__(77554);
const SocialIcons = __webpack_require__(35676);
const { useNativeShare } = __webpack_require__(90072);
const { formatGtmData } = __webpack_require__(60162);
const ResponsiveAsset = __webpack_require__(86157);
const UtilityFeatures = __webpack_require__(23261);
const StoryCommentsCountDisplay = __webpack_require__(68606);
const GallerySlideCaptionBrandName = __webpack_require__(34983);
const { BookmarkWrapper, GallerySlideCaptionCtaBlock, GallerySlideCaptionMetaOneContainer, GallerySlideCaptionMetaOne, GallerySlideCaptionPromotionText, GallerySlideCaptionPostCta, GallerySlideCaptionMetaTwo, GallerySlideCaptionButton, GallerySlideCaptionHed, GallerySlideCaptionHedText, GallerySlideFigCaptionWrapper, GallerySlideFigCaption, GallerySlideCaptionCreditWrapper, GallerySlideCaptionPreHeaderOneWrapper, GallerySlideCaptionPreHeaderOne, GallerySlideCaptionPreHeaderTwo, GallerySlideCaptionPromotionHed, GallerySlideCaptionDekContainer, GallerySlideCaptionDetail, GallerySlideCaptionDek, GallerySlideCaptionOffers, GallerySlideCaptionSeasonName, GallerySlideNativeShareContainer, GallerySlideSocialShareIcon, GallerySlideCaptionClampedDek, ReadReviewCTA } = __webpack_require__(55082);
const PhotoBookmark = __webpack_require__(43211);
const { handleLinkClick } = __webpack_require__(43428);
const { extractTrackingParameters } = __webpack_require__(25203);
const CtaBlock = ({ ctaHref, ctaRel = 'nofollow noopener noreferrer', ctaText, dataAttrs, dangerousMetaOne, dangerousMetaTwo, dangerousPostCTA, hasReadReviewCTA, isCtaInternal, onClickHandler, promotionText, shouldUseBookmarkV3, contentType, copilotId, urlToBookmark, showCommentCount, contentAlign, showBookMarkIcon, shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark, subtype }) => {
    const hasBookmarkWithReadReviewCTA = (contentType === 'photo' && hasReadReviewCTA) || false;
    return (React.createElement(GallerySlideCaptionCtaBlock, { showCommentCount: showCommentCount, contentAlign: contentAlign, hasReadReviewCTA: hasReadReviewCTA },
        dangerousMetaOne && (React.createElement(GallerySlideCaptionMetaOneContainer, null, dangerousMetaOne && (React.createElement(GallerySlideCaptionMetaOne, { dangerouslySetInnerHTML: { __html: dangerousMetaOne } })))),
        promotionText && (React.createElement(GallerySlideCaptionPromotionText, { dangerouslySetInnerHTML: { __html: promotionText } })),
        dangerousMetaTwo && (React.createElement(GallerySlideCaptionMetaTwo, { dangerouslySetInnerHTML: { __html: dangerousMetaTwo } })),
        ctaText && ctaHref && (React.createElement(GallerySlideCaptionButton, { "aria-label": "Opens in a new window", dataAttrs: dataAttrs, href: ctaHref, inputKind: "link", label: ctaText, onClickHandler: onClickHandler, rel: isCtaInternal ? 'noopener noreferrer' : ctaRel, target: "_blank" })),
        dangerousPostCTA && (React.createElement(GallerySlideCaptionPostCta, { dangerouslySetInnerHTML: { __html: dangerousPostCTA } })),
        shouldEnableCardLevelBookmark &&
            showBookMarkIcon &&
            !hasBookmarkWithReadReviewCTA && (React.createElement(UtilityFeatures, { urlToBookmark: urlToBookmark, copilotID: copilotId, contentType: contentType, isPageScoped: false, shouldEnableBookmarkDrawers: shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark: shouldEnableCardLevelBookmark, shouldUseBookmarkV3: shouldUseBookmarkV3, subject: "gallery_slide", subtype: subtype }))));
};
CtaBlock.propTypes = {
    contentAlign: PropTypes.string,
    contentType: PropTypes.string,
    copilotId: PropTypes.string,
    ctaHref: PropTypes.string,
    ctaRel: PropTypes.string,
    ctaText: PropTypes.string,
    dangerousMetaOne: PropTypes.string,
    dangerousMetaTwo: PropTypes.string,
    dangerousPostCTA: PropTypes.string,
    dataAttrs: PropTypes.object,
    hasReadReviewCTA: PropTypes.bool,
    isCtaInternal: PropTypes.bool,
    onClickHandler: PropTypes.func,
    promotionText: PropTypes.string,
    shouldEnableBookmarkDrawers: PropTypes.bool,
    shouldEnableCardLevelBookmark: PropTypes.bool,
    shouldUseBookmarkV3: PropTypes.bool,
    showBookMarkIcon: PropTypes.bool,
    showCommentCount: PropTypes.bool,
    subtype: PropTypes.string,
    urlToBookmark: PropTypes.string
};
const GallerySlideHed = ({ ctaHref, dangerousHed, hasGallerySlideBackground, isClickable, hasIcon, productId, hasHotelOrProductType, gtmClickHandler, isActionIdEnabledForComponent }) => {
    if (!dangerousHed) {
        return null;
    }
    const addIdIfProductExist = (productId) => {
        if (productId) {
            return productId;
        }
        return undefined;
    };
    const headingElement = (React.createElement(GallerySlideCaptionHed, { hasGallerySlideBackground: hasGallerySlideBackground, id: addIdIfProductExist(productId) },
        React.createElement(GallerySlideCaptionHedText, { hasGallerySlideBackground: hasGallerySlideBackground, dangerouslySetInnerHTML: { __html: dangerousHed } }),
        hasIcon && React.createElement(ArrowIcon, null)));
    if (!isClickable || !ctaHref) {
        return headingElement;
    }
    const enableActionIdMapping = ctaHref?.includes('cna.st') && isActionIdEnabledForComponent;
    const handleClick = (event) => {
        hasHotelOrProductType
            ? (() => {
                const hrefValue = event?.currentTarget?.getAttribute('href');
                const queryParams = extractTrackingParameters();
                if (enableActionIdMapping && hrefValue) {
                    event.preventDefault();
                    handleLinkClick({
                        event,
                        gtmTrackOnClick: gtmClickHandler,
                        linkProps: hrefValue,
                        setLinkProps: (newHref) => {
                            window.open(newHref, '_blank', 'noopener, noreferrer');
                        },
                        type: 'GallerySlideCaption',
                        component: 'gallery_slide_component',
                        queryParams
                    });
                }
                else {
                    gtmClickHandler(event);
                }
            })()
            : (() => { })();
    };
    return (React.createElement(ExternalLink, { href: ctaHref, onClick: handleClick, component: "gallery_slide_component" }, headingElement));
};
GallerySlideHed.propTypes = {
    ctaHref: PropTypes.string,
    dangerousHed: PropTypes.string,
    gtmClickHandler: PropTypes.func,
    hasGallerySlideBackground: PropTypes.bool,
    hasHotelOrProductType: PropTypes.bool,
    hasIcon: PropTypes.bool,
    isActionIdEnabledForComponent: PropTypes.bool,
    isClickable: PropTypes.bool,
    productId: PropTypes.string
};
const getNativeShareURL = (itemSocialSharesProps, pageUrl) => {
    if (itemSocialSharesProps && itemSocialSharesProps.links) {
        const twitterPath = Object.keys(itemSocialSharesProps.links).find((key) => itemSocialSharesProps.links[key].network === 'twitter');
        if (twitterPath !== undefined) {
            const twitterURL = new URL(decodeURIComponent(itemSocialSharesProps.links[twitterPath].url));
            const nativeShareURL = twitterURL.searchParams.get('url');
            return nativeShareURL;
        }
    }
    return pageUrl;
};
/**
 * Caption component
 *
 * @param {object} [props.bookmarkMeta] - Object containing the metadata (slug and title) for bookmarking a photo
 * @param {string} [brand] - Optional top-level brand name
 * @param {string} [className] - Optional top-level class to add.
 * @param {Function} [ctaAnalyticsName] - Optional string to use for google analytics name
 * @param {string} [ctaText] - Optional text displaying CTA button text
 * @param {string} [ctaHref] - Optional text url to link to CTA button
 * @param {string} [ctaRel] - Optional rel to pass to CTA button
 * @param {string} [ctaText] - Optional text displaying CTA button text
 * @param {string} dangerousCredit - Required HTML text description of a credit for card
 * @param {string} [dangerousDetail] - Optional HTML text description showing rating or price
 * @param {string} [dangerousHed] - Optional HTML text description of a title for card. Falls back to dangerousDek if empty.
 * @param {string} [dangerousMetaOne] - Optional HTML used to display text preceding price
 * @param {string} [dataAttrs] - Optional data attributes for button
 * @param {Array} [dek] - Optional JsonML representation of a caption for card
 * @param {boolean} [props.hasPhotoBookmark] - Optional flag to enable bookmarking a photo
 * @param {object} [itemSocialSharesProps] - Optional each gallery item social share link
 * @param {Bool} [props.hasGallerySlideBackground] - optional flag for gallery product background
 * @param {Bool} [props.hasGallerySlideTextPadding] - optional flag for gallery numeric text paading
 * @param {Bool} [props.hasReadReviewCTA] - Optional flag to show a Read Review CTA with bookmark if no offer urls present
 * @param {boolean} [hasSlideHedIcon] - Optional boolean to show icon for slide hed
 * @param {string} [hedHref] - Optional text url to use when hed url should not use ctaHref
 * @param {boolean} [props.variations.hasMultipleLines] - Boolean value that helps in clamping text on button to two line and ellipsis when the sentences is more than two lines
 * @param {boolean} [props.hidePriceComponentWhenNoPrice] - Optional flag to hide price when it is unavailable
 * @param {string} [id] - Optional copilot id
 * @param {object} [image] - Optional image to pass when photo bookmarking
 * @param {boolean} [isCtaInternal] - Optional boolean to mark cta as no-follow
 * @param {boolean} [isHedClickable] - Optional boolean to determine a clickable hed HTML element
 * @param {string} [name] - Optional text used to display name
 * @param {string} [props.promotionHed] - Optional hed to display on a promotional slide
 * @param {string} [props.promotionText] - Optional text to display on a promotional slide
 * @param {boolean} [props.showGallerySlideCaptionOrTitle] - Optional prop, set to true to show the caption OR title instead of both.
 * @param {boolean} [props.showPriceOnButton] - Optional boolean to show product price inside the button
 * @param {boolean} props.showSellerNameBelowButton - Optional flag to detemine whether seller name is displayed is displayed below button
 * @param {string} [dangerousPreHeaderTwo] - Optional text used to show rubric or venue name
 * @param {string} [dangerousPostCTA] - Optional text used to show who sponsored the slide
 * @param {string} preHeaderOne - Optional string to display the slideCount or order number, showSlideCount also needs to be set to true
 * @param {object} [variations] - Optional variation properties used in rendering the component
 * @param {boolean} [props.showLocalisedOffers] - Optional param to localise links
 * @param {string} [props.ctaAtRetailerName] - Optional cta at text when price is not present
 * @param {string} [props.productData] - Optional data for tracking product click
 * @param {boolean} [props.hasHotelOrProductType] - optional flag for checking contentType
 * @param {boolean} [props.showClampedProductDescription] - optinal flag for for enabling product description accordion data
 * @param {number} [props.productDescriptionLineLength] - optioanl prop for adjusting line length for product description
 * @param {boolean} [props.contentType] - contenType of each item
 * @param {string} [props.subtype] - describes the subtype under Venue types.
 * @param {boolean} [props.commentsCount] - total primary comments count added for the story
 * @param {boolean} [props.enableCommentsCount] - optional flag to enable comments count
 * @param {boolean} [props.enableCardLevelBookmark] - optinal flag to enable bookmark for individual gallery Item
 * @param {object} [props.actionIdFlags] - Optional flags to enable actionId encoding on click
 * @returns {ReactElement} <figcaption>
 */
const GallerySlideCaption = ({ bookmarkMeta, brand, buttonVariation, btnStyle, className, collectionLink, commentsCount, contentType, ctaAnalyticsName, ctaHref, ctaRel, ctaText, ctaAtRetailerName, dangerousCredit, dangerousDetail, dangerousHed, dangerousMetaOne, dangerousMetaTwo, dataAttrs, defaultVotingPrompt, dek, dropShipSellers, hasPhotoBookmark, featureFlags = {}, itemSocialSharesProps, hasSlideHedIcon, hasMultipleLines, hasGallerySlideBackground, hasGallerySlideTextPadding, hasReadReviewCTA, hedHref, hidePriceComponentWhenNoPrice, id, image, isCtaInternal, isHedClickable, hasPriceSection, offers, productData, promotionHed, promotionText, showMultipleBuyButtons, showPriceOnButton, showSellerNameBelowButton, dangerousPostCTA, dangerousPreHeaderTwo, seasonName, showGallerySlideCaptionOrTitle = false, socialTitle, socialDescription, subtype, productId, preHeaderOne, variations, showOfferUrl, name, showLocalisedOffers, hasHotelOrProductType, showClampedProductDescription, productDescriptionLineLength, urlToBookmark, shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark, shouldEnableCommentsCount, actionIdFlags = {} }) => {
    const MAX_BUTTON_COUNT = showMultipleBuyButtons ? 4 : 1;
    const { contentAlign, isOrdered, shouldBrandNameBelowHed, shouldDekBelowOffer, showSlideCount, showCommentCount, showBookMarkIcon } = variations;
    const { hasNativeShareButton, hasSlideSharingIcon, enableBookmarking, shouldUseBookmarkV3 } = featureFlags;
    const component = 'gallery_slide_component';
    const [showSocialIcons, setShowSocialIcons] = useState(false);
    const [showLess, setShowLess] = useState(false);
    const { showNativeShareButton, pageUrl } = useNativeShare(hasNativeShareButton);
    const shareData = {
        url: getNativeShareURL(itemSocialSharesProps, pageUrl),
        title: socialTitle,
        text: socialDescription
    };
    const isActionIdEnabledForComponent = actionIdFlags?.enableActionIdForGallerySlide;
    const gtmClickHandler = (position, event, actionId) => {
        formatGtmData({
            window,
            product: { ...productData },
            index: position,
            actionId,
            layout: 'ProductEmbed',
            event,
            layoutTitle: dangerousHed
        });
    };
    const toggleShare = (toggle) => {
        setShowSocialIcons(toggle);
    };
    const shouldDisplayCaptionOffers = !defaultVotingPrompt;
    const getGalleryCaptionDek = () => {
        return (React.createElement(GallerySlideCaptionDek, { isClampingEnabled: showClampedProductDescription, showLess: showLess, productDescriptionLineLength: productDescriptionLineLength }, jsonmlToReact.convert(dek)));
    };
    const getGalleryCaptionClampedDek = () => {
        const type = showLess ? 'close' : 'open';
        const onTextClick = () => {
            setShowLess(!showLess);
            formatGtmData({
                window,
                product: {
                    ...productData
                },
                index: productData.index,
                layout: 'ProductEmbed',
                type
            });
        };
        return (React.createElement(GallerySlideCaptionClampedDek, { lines: productDescriptionLineLength, linesInExtraLargeDesktop: productDescriptionLineLength, isCollapsible: true, showLess: showLess, offset: 2, onTextClick: onTextClick, showClampedProductDescription: showClampedProductDescription }, getGalleryCaptionDek()));
    };
    const displayPhotoBookmarkIcon = () => {
        const displayPhotoBookmark = contentType === 'photo' && hasPhotoBookmark && enableBookmarking;
        if (!displayPhotoBookmark)
            return null;
        return (React.createElement(BookmarkWrapper, null,
            React.createElement(PhotoBookmark, { bookmarkMeta: bookmarkMeta, copilotID: id, image: image, contentType: contentType })));
    };
    const displayReadReviewCTA = () => hasReadReviewCTA &&
        contentType !== 'photo' &&
        offers?.length === 0 && (React.createElement(ReadReviewCTA, { label: "Read Review", href: hedHref, inputKind: "link", shouldUseFullWidth: false }));
    const displaySlideSharingIcon = () => hasSlideSharingIcon && (React.createElement(GallerySlideNativeShareContainer, null,
        React.createElement(NativeShareButton, { shareData: shareData, showOnlyIcon: true, parentCallBack: toggleShare }),
        itemSocialSharesProps && showSocialIcons && !showNativeShareButton && (React.createElement(GallerySlideSocialShareIcon, { "data-testid": "GallerySlideSocialShareIcon" },
            React.createElement(SocialIcons.Circular, { ...itemSocialSharesProps })))));
    const displaySlideCaptionPreHeader = () => showSlideCount &&
        preHeaderOne && (React.createElement(GallerySlideCaptionPreHeaderOneWrapper, { hasGallerySlideTextPadding: hasGallerySlideTextPadding },
        React.createElement(GallerySlideCaptionPreHeaderOne, { "data-testid": "GallerySlideCaptionPreHeaderOne" }, preHeaderOne)));
    const showGallerySlideTitle = () => showGallerySlideCaptionOrTitle ? !dek : true;
    const brandName = [brand, name].filter(Boolean).join(' ');
    const ctaOnClickHandler = ctaAnalyticsName
        ? ({ position, event, actionId }) => {
            googleAnalytics.emitGoogleTrackingEvent(ctaAnalyticsName);
            if (hasHotelOrProductType)
                gtmClickHandler(position, event, actionId);
        }
        : ({ position, event, actionId }) => {
            if (hasHotelOrProductType)
                gtmClickHandler(position, event, actionId);
        };
    const displaySeasonName = () => {
        if (!seasonName)
            return null;
        return (seasonName && (React.createElement(GallerySlideCaptionSeasonName, { href: collectionLink }, seasonName)));
    };
    return (React.createElement(GallerySlideFigCaptionWrapper, { className: className, contentAlign: contentAlign, shouldOrderedGallery: isOrdered, hasGallerySlideBackground: hasGallerySlideBackground },
        React.createElement(GallerySlideFigCaption, null,
            displayPhotoBookmarkIcon(),
            dangerousCredit && (React.createElement(GallerySlideCaptionCreditWrapper, { dangerouslySetInnerHTML: { __html: dangerousCredit } })),
            displaySlideCaptionPreHeader(),
            displaySlideSharingIcon(),
            dangerousPreHeaderTwo && (React.createElement(GallerySlideCaptionPreHeaderTwo, { dangerouslySetInnerHTML: { __html: dangerousPreHeaderTwo } })),
            promotionHed && (React.createElement(GallerySlideCaptionPromotionHed, { dangerouslySetInnerHTML: { __html: promotionHed } })),
            displaySeasonName(),
            !shouldBrandNameBelowHed && (React.createElement(GallerySlideCaptionBrandName, { brandName: brandName, collectionLink: collectionLink })),
            showGallerySlideTitle() && (React.createElement(GallerySlideHed, { ctaHref: hedHref || ctaHref, dangerousHed: dangerousHed, gtmClickHandler: gtmClickHandler, hasIcon: hasSlideHedIcon, hasGallerySlideBackground: hasGallerySlideBackground, hasHotelOrProductType: hasHotelOrProductType, isActionIdEnabledForComponent: isActionIdEnabledForComponent, isClickable: isHedClickable, productId: productId })),
            shouldBrandNameBelowHed && (React.createElement(GallerySlideCaptionBrandName, { brandName: brandName, collectionLink: collectionLink })),
            React.createElement(GallerySlideCaptionDekContainer, { "data-testid": "GallerySlideCaptionDekContainer" },
                dangerousDetail && (React.createElement(GallerySlideCaptionDetail, { dangerouslySetInnerHTML: { __html: dangerousDetail } })),
                !shouldDekBelowOffer &&
                    shouldRenderDek(dek) &&
                    (showClampedProductDescription
                        ? getGalleryCaptionClampedDek()
                        : getGalleryCaptionDek()),
                shouldEnableCommentsCount && showCommentCount && (React.createElement(StoryCommentsCountDisplay, { totalCommentsCount: commentsCount })),
                shouldDisplayCaptionOffers && (React.createElement(GallerySlideCaptionOffers, { hasGallerySlideBackground: hasGallerySlideBackground, showCommentCount: showCommentCount, hasReadReviewCTA: hasReadReviewCTA },
                    displayReadReviewCTA(),
                    offers && (React.createElement(ProductOfferList, { buttonVariation: buttonVariation, btnStyle: btnStyle, contentType: contentType, dataAttrs: dataAttrs, defaultCTAText: ctaText, ctaAtRetailerName: ctaAtRetailerName, isCtaInternal: isCtaInternal, hasPriceSection: hasPriceSection, hasMultipleLines: hasMultipleLines, offers: offers, onClickHandler: ctaOnClickHandler, hidePriceComponentWhenNoPrice: hidePriceComponentWhenNoPrice, productId: productId, showCount: MAX_BUTTON_COUNT, showLocalisedOffers: showLocalisedOffers, showPriceOnButton: showPriceOnButton, showOfferUrl: showOfferUrl, showSellerNameBelowButton: showSellerNameBelowButton, dropShipSellers: dropShipSellers, hasGallerySlideBackground: hasGallerySlideBackground, isActionIdEnabledForComponent: isActionIdEnabledForComponent, hasReadReviewCTA: hasReadReviewCTA, component: component })),
                    contentType !== 'product' && (React.createElement(CtaBlock, { ctaText: ctaText, ctaRel: ctaRel, ctaHref: ctaHref, dataAttrs: dataAttrs, isCtaInternal: isCtaInternal, dangerousPostCTA: dangerousPostCTA, dangerousMetaOne: dangerousMetaOne, dangerousMetaTwo: dangerousMetaTwo, onClickHandler: ctaOnClickHandler, promotionText: promotionText, contentType: contentType, copilotId: id, urlToBookmark: urlToBookmark, shouldEnableBookmarkDrawers: shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark: shouldEnableCardLevelBookmark, shouldUseBookmarkV3: shouldUseBookmarkV3, showCommentCount: showCommentCount, showBookMarkIcon: showBookMarkIcon, contentAlign: contentAlign, hasReadReviewCTA: hasReadReviewCTA, subtype: subtype })))),
                shouldDekBelowOffer &&
                    shouldRenderDek(dek) &&
                    getGalleryCaptionClampedDek()))));
};
GallerySlideCaption.propTypes = {
    actionIdFlags: PropTypes.object,
    bookmarkMeta: PropTypes.shape({
        slug: PropTypes.string,
        title: PropTypes.string
    }),
    brand: PropTypes.string,
    btnStyle: PropTypes.oneOf(['filled', 'outlined', 'text']),
    buttonVariation: PropTypes.string,
    className: PropTypes.string,
    collectionLink: PropTypes.string,
    commentsCount: PropTypes.number,
    contentType: PropTypes.string.isRequired,
    ctaAnalyticsName: PropTypes.string,
    ctaAtRetailerName: PropTypes.string,
    ctaHref: PropTypes.string,
    ctaRel: PropTypes.string,
    ctaText: PropTypes.string,
    dangerousCredit: PropTypes.string.isRequired,
    dangerousDetail: PropTypes.string,
    dangerousHed: PropTypes.string,
    dangerousMetaOne: PropTypes.string,
    dangerousMetaTwo: PropTypes.string,
    dangerousPostCTA: PropTypes.string,
    dangerousPreHeaderTwo: PropTypes.string,
    dataAttrs: PropTypes.object,
    defaultVotingPrompt: PropTypes.string,
    dek: PropTypes.array,
    dropShipSellers: PropTypes.array,
    featureFlags: PropTypes.object,
    hasGallerySlideBackground: PropTypes.bool,
    hasGallerySlideTextPadding: PropTypes.bool,
    hasHotelOrProductType: PropTypes.bool,
    hasMultipleLines: PropTypes.bool,
    hasPhotoBookmark: PropTypes.bool,
    hasPriceSection: PropTypes.bool,
    hasReadReviewCTA: PropTypes.bool,
    hasSlideHedIcon: PropTypes.bool,
    hedHref: PropTypes.string,
    hidePriceComponentWhenNoPrice: PropTypes.bool,
    id: PropTypes.string,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    isCtaInternal: PropTypes.bool,
    isExternalProduct: PropTypes.bool,
    isHedClickable: PropTypes.bool,
    itemSocialSharesProps: PropTypes.shape({
        showBookmark: PropTypes.bool,
        links: PropTypes.array
    }),
    name: PropTypes.string,
    offers: PropTypes.array,
    preHeaderOne: PropTypes.string,
    productData: PropTypes.object,
    productDescriptionLineLength: PropTypes.number,
    productId: PropTypes.string,
    promotionHed: PropTypes.string,
    promotionText: PropTypes.string,
    seasonName: PropTypes.string,
    shouldEnableBookmarkDrawers: PropTypes.bool,
    shouldEnableCardLevelBookmark: PropTypes.bool,
    shouldEnableCommentsCount: PropTypes.bool,
    showClampedProductDescription: PropTypes.bool,
    showGallerySlideCaptionOrTitle: PropTypes.bool,
    showLocalisedOffers: PropTypes.bool,
    showMultipleBuyButtons: PropTypes.bool,
    showOfferUrl: PropTypes.bool,
    showPriceOnButton: PropTypes.bool,
    showSellerNameBelowButton: PropTypes.bool,
    socialDescription: PropTypes.string,
    socialTitle: PropTypes.string,
    subtype: PropTypes.string,
    urlToBookmark: PropTypes.string,
    variations: PropTypes.shape({
        contentAlign: PropTypes.oneOf(['center', 'left']).isRequired,
        hasBackground: PropTypes.bool,
        isOrdered: PropTypes.bool,
        shouldBrandNameBelowHed: PropTypes.bool,
        shouldDekBelowOffer: PropTypes.bool,
        showSlideCount: PropTypes.bool,
        showBookMarkIcon: PropTypes.bool,
        showCommentCount: PropTypes.bool
    })
};
GallerySlideCaption.displayName = 'GallerySlideCaption';
module.exports = connector(GallerySlideCaption, {
    keysToPluck: ['featureFlags']
});
//# sourceMappingURL=GallerySlideCaption.js.map

/***/ }),

/***/ 34983:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { GallerySlideCaptionBrandNameClickable, GallerySlideCaptionBrandNameNotClickable } = __webpack_require__(55082);
const { jsonmlToReact } = __webpack_require__(38759);
const GallerySlideCaptionBrandName = ({ brandName, collectionLink }) => {
    if (!brandName)
        return null;
    return collectionLink ? (React.createElement(GallerySlideCaptionBrandNameClickable, { href: collectionLink }, jsonmlToReact.convert(brandName))) : (React.createElement(GallerySlideCaptionBrandNameNotClickable, null, jsonmlToReact.convert(brandName)));
};
GallerySlideCaptionBrandName.propTypes = {
    brandName: PropTypes.string,
    collectionLink: PropTypes.string
};
GallerySlideCaptionBrandName.displayName = 'GallerySlideCaptionBrandName';
module.exports = GallerySlideCaptionBrandName;
//# sourceMappingURL=GallerySlideCaptionBrandName.js.map

/***/ }),

/***/ 30723:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { jsonmlToReact, getImageOrientation, shouldRenderDek } = __webpack_require__(38759);
const ResponsiveAsset = __webpack_require__(73275);
const { GallerySlideCaptionHed, GallerySlideCaptionHedText, GallerySlideCaptionDek, GallerySlideCaptionCreditWrapper, GallerySlideWrapper, GallerySlideFigure, GallerySlideAssetWrapper, GallerySlideAssetContainer, GallerySlideAssetContainerInner, GallerySlideResponsiveAsset } = __webpack_require__(55082);
/**
 * GallerySlideHorizontal component
 *
 * @param {object} props - props for the component
 * @param {string} props.contentType - Required text description of the type of content to be rendered
 * @param {string} props.dangerousCredit - Required HTML text description of a credit for card
 * @param {string} [props.dangerousHed] - Optional HTML text description of a title for card
 * @param {Array} [props.dek] - Optional JsonML representation of a caption for card
 * @param {ResponsiveAsset.propTypes.media} props.image - Required image that contains altText, attributes, and source urls
 * @param {Bool} [props.isLazy] -
 * @param {string} [props.variationDisplayName] - Optional display name passed in by `asVariation` helper, used in pattern tracking
 * @param {object} [props.variations] - Optional variation properties used in rendering the component
 *
 * @returns {ReactElement} <div>
 */
const GallerySlideHorizontal = ({ contentType, dangerousCredit, dangerousHed, dek, image, isLazy, variationDisplayName }) => {
    const analyticsData = JSON.stringify({
        pattern: 'GallerySlideHorizontal',
        variation: variationDisplayName
    });
    const media = image && {
        ...image
    };
    const orientation = media && getImageOrientation(media);
    return (React.createElement(GallerySlideWrapper, { "data-event-boundary": "click", "data-in-view": analyticsData, "data-event-click": analyticsData, hasBackground: false, shouldOrderedGallery: false, contentAlign: "left", orientation: "horizontal", image: image, isHorizontal: true, "data-testid": "GallerySlideWrapper" },
        React.createElement(GallerySlideFigure, null,
            dangerousHed && (React.createElement(GallerySlideCaptionHed, null,
                React.createElement(GallerySlideCaptionHedText, { dangerouslySetInnerHTML: { __html: dangerousHed } }))),
            shouldRenderDek(dek) && (React.createElement(GallerySlideCaptionDek, null, jsonmlToReact.convert(dek))),
            media && (React.createElement(GallerySlideAssetWrapper, { orientation: orientation, contentType: contentType },
                React.createElement(GallerySlideAssetContainer, null,
                    React.createElement(GallerySlideAssetContainerInner, null,
                        React.createElement(GallerySlideResponsiveAsset, { ...media, isLazy: isLazy }),
                        dangerousCredit && (React.createElement(GallerySlideCaptionCreditWrapper, { dangerouslySetInnerHTML: { __html: dangerousCredit } })))))))));
};
GallerySlideHorizontal.propTypes = {
    contentType: PropTypes.string.isRequired,
    dangerousCredit: PropTypes.string.isRequired,
    dangerousHed: PropTypes.string,
    dek: PropTypes.array,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    isLazy: PropTypes.bool,
    variationDisplayName: PropTypes.string
};
GallerySlideHorizontal.displayName = 'GallerySlideHorizontal';
module.exports = GallerySlideHorizontal;
//# sourceMappingURL=GallerySlideHorizontal.js.map

/***/ }),

/***/ 38759:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getCTAText = exports.getImageOrientation = exports.shouldRenderDek = exports.jsonmlToReact = void 0;
const { default: JsonmlToReact } = __webpack_require__(1165);
const ButtonGroupCallout = __webpack_require__(62839);
const translations = (__webpack_require__(20460)/* ["default"] */ .A);
const ExternalLink = __webpack_require__(39832);
/**
 * Return object used by `jsonmltoreact` to render links. Result includes
 * a ReactComponent (type) and the properties it should be rendered with (props)
 *
 * @param {object} props - props set on the link node
 * @returns {object} - Component to be rendered and properties to give it
 */
function mapLinks(props) {
    const { isExternal, ...linkProps } = props;
    return {
        type: isExternal ? ExternalLink : 'a',
        props: linkProps
    };
}
const embeds = {
    'callout:button-group': ButtonGroupCallout
};
const mapInlineEmbeds = (jsonMLAttributes) => ({
    type: embeds[jsonMLAttributes.type],
    props: jsonMLAttributes.props
});
exports.jsonmlToReact = new JsonmlToReact({
    a: mapLinks,
    'inline-embed': mapInlineEmbeds
});
/**
 * If dek should be rendered
 *
 * @param {Array} dek - JsonML representation
 *
 * @returns {boolean} true or false depending on if dek should render
 */
const shouldRenderDek = (dek) => Array.isArray(dek) && !!dek.length;
exports.shouldRenderDek = shouldRenderDek;
/**
 * Return image orientation
 *
 * @param {object} media - image, clip, or video associated with gallery slide
 * @param {object} [media.segmentedSources] -
 * @param {object} [media.sources] -
 *
 * @returns {string} 'portrait' | 'landscape'
 */
function getImageOrientation(media) {
    let mediaSource;
    if (media && media.segmentedSources) {
        [mediaSource] = media.segmentedSources.sm;
    }
    else if (media && media.sources) {
        [mediaSource] = Object.values(media.sources);
    }
    // leaving out 1:1 image ratio because it is the same as landscape
    return mediaSource && mediaSource.height > mediaSource.width
        ? 'portrait'
        : 'landscape';
}
exports.getImageOrientation = getImageOrientation;
const CTA_MAP = {
    article: translations.articleCta,
    product: translations.productCta,
    recipe: translations.recipeCta,
    review: translations.reviewCta,
    venue: translations.venueCta,
    'commerce-product': translations.productCta
};
const venueTypes = [
    'activity',
    'bar',
    'hotel',
    'restaurant',
    'ship',
    'shop',
    'skiresort',
    'spa',
    'venue'
];
const getCTAMapValue = (contentType, formatMessage) => {
    const ctaMapType = venueTypes.includes(contentType)
        ? CTA_MAP.venue
        : CTA_MAP[contentType];
    return ctaMapType && formatMessage(ctaMapType);
};
const getCTAText = (cta, contentType, formatMessage) => cta?.[contentType] || getCTAMapValue(contentType, formatMessage);
exports.getCTAText = getCTAText;
//# sourceMappingURL=helpers.js.map

/***/ }),

/***/ 63510:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const VariedGallerySlide = __webpack_require__(93726);
module.exports = asConfiguredComponent(VariedGallerySlide, 'GallerySlide');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 55082:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { BaseText, BaseLink } = __webpack_require__(76955);
const Button = __webpack_require__(73730);
const { calculateSpacing, minScreen, getColorStyles, getTypographyStyles, getLinkStyles, maxScreen } = __webpack_require__(26865);
const Clamp = __webpack_require__(48286);
const { ButtonWrapper, ButtonLabel, ButtonIconWrapper } = __webpack_require__(18974);
const { BREAKPOINTS } = __webpack_require__(96472);
const SocialIcons = __webpack_require__(35676);
const ResponsiveAsset = __webpack_require__(73275);
const { ProductOfferListWrapper } = __webpack_require__(94037);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const PhotoBookmark = __webpack_require__(87091);
const { ProductOfferCtaBlock } = __webpack_require__(61366);
const GallerySlideCaptionCtaBlock = styled.div.withConfig({
    displayName: 'GallerySlideCaptionCtaBlock'
}) `
  ${({ contentAlign, showCommentCount }) => contentAlign === 'left' && showCommentCount
    ? `display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top:${calculateSpacing(2)};
    width: 100%;`
    : `margin-top:${calculateSpacing(4)}; 
`}
  ${({ hasReadReviewCTA }) => hasReadReviewCTA &&
    `
      margin-top: 0;
      flex-basis: content;
      .button__icon-container {
        margin-top: -${calculateSpacing(2)}
      }
   `}
`;
const GallerySlideCaptionMetaOneContainer = styled.div.withConfig({
    displayName: 'GallerySlideCaptionMetaOneContainer'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.numerical-small')};
  margin-top: ${calculateSpacing(3)};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.subhed')};
`;
const GallerySlideCaptionMetaOne = styled.div.withConfig({
    displayName: 'GallerySlideCaptionMetaOne'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.numerical-small')};
  display: inline;
  margin-right: ${calculateSpacing(0.5)};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.subhed')};
`;
const GallerySlideCaptionPromotionText = styled.span.withConfig({
    displayName: 'GallerySlideCaptionPromotionText'
}) `
    &::before {
      content: '\00a0';
    }
`;
const GallerySlideCaptionPostCta = styled.div.withConfig({
    displayName: 'GallerySlideCaptionPostCta'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.utility.assistive-text')};
  margin-top: ${calculateSpacing(2)};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body')};
`;
const GallerySlideCaptionMetaTwo = styled.div.withConfig({
    displayName: 'GallerySlideCaptionMetaTwo'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-secondary')};
  margin-top: ${calculateSpacing(1)};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.subhed')};
`;
const GallerySlideCaptionButton = styled(Button.Utility).withConfig({
    displayName: 'GallerySlideCaptionButton'
}) `
  ${({ showCommentCount }) => showCommentCount && `margin-top: ${calculateSpacing(4)};`}
  .slide-venue & {
    margin-top: 0;
  }
`;
const GallerySlideRankingContainerScore = styled.div.withConfig({
    displayName: 'GallerySlideRankingContainerScore'
}) ``;
const GallerySlideRankingContainerRank = styled.div.withConfig({
    displayName: 'GallerySlideRankingContainerRank'
}) ``;
const GallerySlideRankingContainerWrapper = styled.div.withConfig({
    displayName: 'GallerySlideRankingContainerWrapper'
}) ``;
const GallerySlideCaptionHedText = styled.span.withConfig({
    displayName: 'GallerySlideCaptionHedText'
}) ``;
GallerySlideCaptionHedText.defaultProps = {
    colorToken: 'colors.consumption.body.standard.subhed',
    typeIdentity: 'typography.definitions.consumptionEditorial.subhed-aux-primary'
};
const GallerySlideCaptionHed = styled(BaseText).withConfig({
    displayName: 'GallerySlideCaptionHed'
}) `
  margin-top: ${calculateSpacing(1.5)};
  margin-bottom: 0;

  .slide-venue & {
    margin-top: ${calculateSpacing(1)};

    .icon {
      transition: transform 0.2s;
      vertical-align: bottom;
    }
  }

  .slide-venue .external-link:hover &,
  .slide-venue .external-link:focus & {
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.link-hover')};

    .icon {
      transform: translateX(${calculateSpacing(1)});

      path {
        ${({ theme }) => getColorStyles(theme, 'fill', 'colors.consumption.body.standard.link-hover')};
      }
    }
  }
  ${({ theme, hasGallerySlideBackground }) => hasGallerySlideBackground &&
    `${getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.subhed-aux-secondary')};`}
`;
GallerySlideCaptionHed.defaultProps = {
    as: 'h2',
    colorToken: 'colors.consumption.body.standard.subhed',
    typeIdentity: 'typography.definitions.consumptionEditorial.subhed-aux-primary'
};
const GallerySlideCaptionBrandNameNotClickable = styled.div.withConfig({
    displayName: 'GallerySlideCaptionBrandNameNotClickable'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.subhed-aux-secondary')};
  margin-top: ${calculateSpacing(1)};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body-deemphasized')};

  &:first-child {
    margin-top: ${calculateSpacing(3)};
  }
`;
const GallerySlideCaptionOffers = styled.div.withConfig({
    displayName: 'GallerySlideCaptionOffers'
}) `
  ${({ showCommentCount }) => showCommentCount &&
    `display: flex;
      flex-direction: column;
      justify-content: space-between;
   `}

  ${({ hasReadReviewCTA }) => hasReadReviewCTA &&
    `  display: flex;
      flex-direction: row;
       ${maxScreen(BREAKPOINTS.md)} {
        ${ProductOfferCtaBlock} {
          width: 70%;
        }
      }
   `}

  ${({ hasGallerySlideBackground }) => hasGallerySlideBackground &&
    `margin-left: -${calculateSpacing(2)};
     margin-right: -${calculateSpacing(2)};
  `}
  margin-top: ${calculateSpacing(2)};
  ${maxScreen(BREAKPOINTS.md)} {
    ${({ hasGallerySlideBackground }) => hasGallerySlideBackground && `margin-top: ${calculateSpacing(3)};`}
  }
`;
const GallerySlideCaptionDek = styled.div.withConfig({
    displayName: 'GallerySlideCaptionDek'
}) `
  &,
  & h1,
  & h2 {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.description-embed')};
    margin-top: ${calculateSpacing(2)};
    ${({ hasGallerySlideBackground }) => hasGallerySlideBackground &&
    `${minScreen(BREAKPOINTS.md)}{
        margin-top: ${calculateSpacing(3)};
       }`}
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body')};

    a:not(.button) {
      ${({ theme }) => getLinkStyles(theme, 'colors.consumption.body.standard.link', 'colors.consumption.body.standard.link-hover')};
    }
  }
  ${({ isClampingEnabled }) => {
    if (isClampingEnabled) {
        return `
          ul {
          li:last-child {
            margin-bottom: 1rem;
          }
        }`;
    }
    return ``;
}}

  ${({ showLess, isClampingEnabled, productDescriptionLineLength }) => isClampingEnabled &&
    `
    ${showLess
        ? `overflow: hidden;`
        : `
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: ${productDescriptionLineLength};
  `}
`}

  .slide-venue & {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.body-core')}
    margin-top: ${calculateSpacing(2)};
  }
`;
const GallerySlideCaptionDekContainer = styled.div.withConfig({
    displayName: 'GallerySlideCaptionDekContainer'
}) ``;
const GallerySlideCaptionDetail = styled.div.withConfig({
    displayName: 'GallerySlideCaptionDetail'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-title')};
  margin-top: ${calculateSpacing(2)};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body-deemphasized')};

  .slide-venue & {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-primary')};
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body-deemphasized')};
  }
`;
const GallerySlideCaptionPreHeaderOne = styled.span.withConfig({
    displayName: 'GallerySlideCaptionPreHeaderOne'
}) ``;
const GallerySlideCaptionPreHeaderOneWrapper = styled.div.withConfig({
    displayName: 'GallerySlideCaptionPreHeaderOneWrapper'
}) `
  padding-top: ${calculateSpacing(2)};

  ${({ hasGallerySlideTextPadding }) => hasGallerySlideTextPadding &&
    `
    ${minScreen(BREAKPOINTS.md)} {
      padding-top: ${calculateSpacing(1.5)};
    }`}

  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.numerical-small')};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body-deemphasized')};
`;
const GallerySlideCaptionPreHeaderTwo = styled.div.withConfig({
    displayName: 'GallerySlideCaptionPreHeaderTwo'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-title')};
  margin-top: ${calculateSpacing(3)};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body-deemphasized')};

  .slide-venue & {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-primary')};
    margin-top: ${calculateSpacing(4)};
  }
`;
const GallerySlideCaptionPromotionHed = styled.div.withConfig({
    displayName: 'GallerySlideCaptionPromotionHed'
}) ``;
const GallerySlideCaptionCreditWrapper = styled.div.withConfig({
    displayName: 'GallerySlideCaptionCreditWrapper'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-tertiary')};
  padding-top: ${calculateSpacing(1)};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body-deemphasized')};
`;
const GallerySlideFigCaption = styled.div.withConfig({
    displayName: 'GallerySlideFigCaption'
}) `
  display: block;
  margin: 0;

  a {
    &:not(.button) {
      text-decoration: none;
      ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.link')};

      &:hover,
      &:focus {
        text-decoration: underline;
        ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.link-hover')};
      }
    }
  }
`;
const BookmarkWrapper = styled.div.withConfig({
    displayName: 'BookmarkWrapper'
}) `
  float: right;
  line-height: 0;
  ${PhotoBookmark} {
    svg {
      .icon-loader-fill {
        ${getColorStyles('fill', 'colors.interactive.base.white')}
      }

      .icon-loader-stroke {
        ${getColorStyles('stroke', 'colors.interactive.base.white')}
      }
    }
  }
`;
const GallerySlideCaptionWrapper = styled.div.withConfig({
    displayName: 'GallerySlideCaptionWrapper'
}) `
  ${minScreen(BREAKPOINTS.md)} {
    grid-column: 1 / -1;
  }
`;
const GallerySlideZoomWrapper = styled.div.withConfig({
    displayName: 'GallerySlideZoomWrapper'
}) `
  :hover {
    background-image: ${({ url }) => `url(${url})`};
    ${({ useFixedZoomedImageSize }) => useFixedZoomedImageSize && `background-size: auto 150vh`}
  }

  background-repeat: no-repeat;
  overflow: hidden;
  @media (any-pointer: fine) {
    img {
      &:hover {
        ${({ hasMouseMoved }) => hasMouseMoved && `opacity: 0;`}
        transition: opacity 0.5s;
        cursor: crosshair;
      }
    }
  }
`;
const GallerySlideResponsiveAsset = styled(ResponsiveAsset).withConfig({
    displayName: 'GallerySlideResponsiveAsset'
}) `
  & {
    ${ResponsiveImageContainer} {
      display: block;
      width: 100%;
    }
  }

  & .responsive-image {
    display: block;
  }
`;
const GallerySlideSocialIcons = styled(SocialIcons.Overlay).withConfig({
    displayName: 'GallerySlideSocialIcons'
}) ``;
const GallerySlideAssetContainerInner = styled.div.withConfig({
    displayName: 'GallerySlideAssetContainerInner'
}) `
  position: relative;
`;
const GallerySlideNativeShareContainer = styled(GallerySlideAssetContainerInner).withConfig({
    displayName: 'GallerySlideNativeShareContainer'
}) `
  bottom: 20px;
  float: right;

  svg {
    cursor: pointer;
  }
`;
const GallerySlideSocialShareIcon = styled.div.withConfig({
    displayName: 'GallerySlideSocialShareIcon'
}) `
  position: absolute;
  right: 5px;
  bottom: 35px;
  width: max-content;
`;
const GallerySlideAssetContainer = styled.div.withConfig({
    displayName: 'GallerySlideAssetContainer'
}) ``;
const GallerySlideAssetWrapper = styled.div.withConfig({
    displayName: 'GallerySlideAssetWrapper'
}) `
  display: block;

  picture {
    width: 100%;
  }

  ${({ orientation }) => orientation === 'landscape' &&
    css `
      ${minScreen(BREAKPOINTS.md)} {
        grid-column: 1 / -1;
      }
    `}

  ${({ contentType }) => contentType === 'clip' &&
    css `
      margin: 0;
    `}
`;
const GallerySlideFigure = styled.figure.withConfig({
    displayName: 'GallerySlideFigure'
}) `
  width: 100%;

  ${minScreen(BREAKPOINTS.md)} {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: ${calculateSpacing(3)};
  }
`;
const hasBackgroundSlideWrapperCss = (shouldOrderedGallery) => shouldOrderedGallery &&
    css `
    & {
      ${GallerySlideCaptionPreHeaderOneWrapper} {
        ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.numerical-large')}
        ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.subhed')};
      }

      ${GallerySlideCaptionHed} {
        margin-top: ${calculateSpacing(1.5)};
      }
    }
  `;
const hasBackgroundSlideContentAlignWrapperCss = (shouldOrderedGallery, contentAlign) => shouldOrderedGallery &&
    contentAlign === 'left' &&
    css `
    & {
      & {
        ${minScreen(BREAKPOINTS.md)} {
          ${GallerySlideCaptionPreHeaderOneWrapper} {
            margin-top: ${calculateSpacing(2)};
            margin-right: ${calculateSpacing(3)};
          }

          ${GallerySlideCaptionPreHeaderTwo} {
            margin-top: ${calculateSpacing(3)};
          }
        }
      }
    }
  `;
const GallerySlideWrapper = styled.div.withConfig({
    displayName: 'GallerySlideWrapper'
}) `
  & {
    margin-bottom: ${calculateSpacing(5)};
  }
  ${({ hasGallerySlideBackground }) => hasGallerySlideBackground &&
    css `
      ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.background.light')};

      && {
        margin-bottom: ${calculateSpacing(8)};
        ${maxScreen(BREAKPOINTS.md)} {
          margin-bottom: ${calculateSpacing(6)};
        }
      }
    `}
  ${({ hasBackground }) => hasBackground &&
    css `
      ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.consumption.body.standard.bg-card')};

      margin: 0 ${calculateSpacing(3)} ${calculateSpacing(2)};
      padding-bottom: ${calculateSpacing(6)};

      ${minScreen(BREAKPOINTS.md)} {
        margin: 0 0 ${calculateSpacing(12)};
      }

      + .gallery-slide__cm-container {
        margin: ${calculateSpacing(12)} 0;
      }

      ${GallerySlideFigure} {
        margin: 0;
      }

      ${GallerySlideCaptionWrapper} {
        ${minScreen(BREAKPOINTS.md)} {
          grid-column: 1 / -1;
        }
      }

      ${GallerySlideFigCaption} {
        margin-right: ${calculateSpacing(2)};
        margin-left: ${calculateSpacing(2)};

        ${minScreen(BREAKPOINTS.md)} {
          ${({ contentAlign, showBookMarkIcon }) => contentAlign === 'left' && showBookMarkIcon
        ? `margin-right:${calculateSpacing(3)};
         margin-left: ${calculateSpacing(3)};`
        : `margin-right:${calculateSpacing(6)}; 
         margin-left: ${calculateSpacing(6)};`}
        }
      }
    `}
    ${({ hasReadReviewCTA }) => hasReadReviewCTA &&
    css `
      && {
        ${maxScreen(BREAKPOINTS.md)} {
          margin: 0;
        }
      }
    `}
  ${({ hasBackground, contentAlign }) => !hasBackground &&
    contentAlign === 'left' &&
    css `
      & {
        ${GallerySlideAssetContainer} {
          justify-content: flex-start;
        }
      }
    `}
    ${({ hasBackground }) => !hasBackground &&
    css `
      & {
        ${GallerySlideFigure} {
          margin: 0;
        }

        ${GallerySlideCaptionWrapper} {
          ${({ hasGallerySlideBackground }) => !hasGallerySlideBackground && `margin: 0 22px;`}
          ${minScreen(BREAKPOINTS.lg)} {
            margin: 0;
          }
          ${maxScreen(BREAKPOINTS.md)} {
            ${({ hasCaptionMargin }) => !hasCaptionMargin && `margin: 0;`}
          }
        }
      }
    `}

    ${({ contentType }) => contentType &&
    (contentType === 'clip' || contentType === 'cnevideo') &&
    `
      & {
        width: 100%;
      }
    `}
    
  ${({ hasBackground, orientation }) => hasBackground &&
    orientation === 'landscape' &&
    css `
      ${GallerySlideAssetWrapper} {
        width: 100%;
        height: 100%;
      }
    `}
    ${({ hasBackground, orientation }) => !hasBackground &&
    orientation === 'portrait' &&
    css `
      & ${GallerySlideAssetWrapper} {
        display: block;

        ${GallerySlideAssetContainer} {
          display: block;
          justify-content: center;

          ${ResponsiveImageContainer} {
            width: auto;
          }
        }

        ${minScreen(BREAKPOINTS.md)} {
          grid-column: 1 / -1;
        }
      }
    `}

    ${({ hasBackground, orientation }) => hasBackground &&
    orientation === 'portrait' &&
    css `
      & ${GallerySlideAssetWrapper} {
        position: relative;
        grid-column: 1 / -1;
        padding-bottom: 100%;
        height: 0;

        ${GallerySlideAssetContainerInner} {
          height: 100%;
        }

        ${GallerySlideAssetContainer} {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.consumption.body.standard.bg-card')};
        }

        ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.consumption.body.standard.bg-photo')};

        &::before {
          display: block;
          padding-top: 100%;
          width: 100%;
          content: '';
        }

        ${ResponsiveImageContainer} {
          margin: auto;
          max-width: 100%;
          max-height: 100%;
        }
      }
    `}

    ${({ hasBackground, orientation, image }) => hasBackground &&
    orientation === 'portrait' &&
    image &&
    css `
      & ${GallerySlideAssetWrapper} {
        ${GallerySlideResponsiveAsset} {
          display: block;
          padding-bottom: 0;
          width: 100%;
          height: 100%;
          text-align: center;

          img${ResponsiveImageContainer} {
            display: inline-block;
            width: auto;
            max-width: 100%;
            height: 100%;
          }
        }
      }
    `}
    
    ${({ hasBackground, orientation, contentAlign }) => !hasBackground &&
    contentAlign === 'left' &&
    orientation === 'portrait' &&
    css `
      ${GallerySlideAssetWrapper} {
        justify-content: flex-start;
      }
    `}

  ${({ shouldOrderedGallery }) => hasBackgroundSlideWrapperCss(shouldOrderedGallery)}
  ${({ shouldOrderedGallery, contentAlign }) => hasBackgroundSlideContentAlignWrapperCss(shouldOrderedGallery, contentAlign)}
    
  ${({ showMultipleBuyButtons }) => showMultipleBuyButtons &&
    css `
      & {
        .product-offer__cta-block .product-offer__buy-button {
          width: 100%;

          ${minScreen(BREAKPOINTS.md)} {
            width: 50%;
          }
        }

        .product-offer__buy-button-side {
          width: 100%;
        }
      }
    `}


    ${({ awardList }) => awardList &&
    css `
      & {
        display: flex;
        margin-bottom: 0;
      }

      ${GallerySlideFigure} {
        display: grid;
        grid-template-rows: auto auto;
        column-gap: ${calculateSpacing(3)};
        border-top: 1px solid;
        ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.consumption.body.standard.divider')};
        padding: ${calculateSpacing(2)} 0;

        ${minScreen(BREAKPOINTS.sm)} {
          grid-template-columns: 3fr 3fr;
        }

        ${minScreen(BREAKPOINTS.md)} {
          grid-template-columns: repeat(6, 1fr);
        }

        ${GallerySlideAssetWrapper} {
          grid-column: 1/4;
          grid-row: 1/5;
          order: 0;

          ${minScreen(BREAKPOINTS.sm)} {
            grid-column: 1/1;
            grid-row: 1/1;
            margin-bottom: ${calculateSpacing(2)};
          }

          ${minScreen(BREAKPOINTS.md)} {
            grid-column: 1/4;
            grid-row: 1/5;
            margin-bottom: 0;
          }
        }

        ${GallerySlideRankingContainerWrapper} {
          display: flex;
          grid-column: 4/-1;
          grid-row: 1/1;
          margin-bottom: ${calculateSpacing(2)};

          div {
            ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.numerical-large')}
          }

          ${minScreen(BREAKPOINTS.sm)} {
            grid-column: 2/3;
            grid-row: 1/1;
            align-items: center;
          }

          ${minScreen(BREAKPOINTS.md)} {
            grid-column: 4/-1;
            grid-row: 1/1;
          }
        }

        ${GallerySlideRankingContainerRank} {
          border-right: 1px solid;
          ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.consumption.body.standard.divider')};
          padding-right: ${calculateSpacing(2)};

          h2 {
            ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-secondary')}
          }
        }

        ${GallerySlideRankingContainerScore} {
          padding-left: ${calculateSpacing(2)};

          h2 {
            ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-secondary')}
          }
        }

        ${GallerySlideCaptionHed} {
          grid-column: 4/-1;
          grid-row: 2/2;
          margin-top: 0;

          a {
            ${({ theme }) => getLinkStyles(theme, 'colors.consumption.body.standard.link', 'colors.consumption.body.standard.link-hover', 'navigation')};
          }

          ${minScreen(BREAKPOINTS.sm)} {
            grid-column: 1/3;
          }

          ${minScreen(BREAKPOINTS.md)} {
            grid-column: 4/-1;
            grid-row: 2/2;
          }
        }

        ${GallerySlideCaptionDek} {
          grid-column: 4/-1;
          margin: 0;
          ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body-deemphasized')};

          ${minScreen(BREAKPOINTS.sm)} {
            grid-column: 1/3;
          }

          ${minScreen(BREAKPOINTS.md)} {
            grid-column: 4/-1;
          }
        }

        ${GallerySlideCaptionDek} p {
          grid-column: 4/6;
          grid-row: 3/3;
          margin-top: 0;
        }

        ${ProductOfferListWrapper} {
          grid-column: 4/6;
          width: 160px;

          ${maxScreen(BREAKPOINTS.md)} {
            grid-column: 1/-1;
            width: 100%;
          }

          .product-offer__buy-button {
            margin-top: ${calculateSpacing(2)};

            ${maxScreen(BREAKPOINTS.md)} {
              width: 100%;
            }
          }
        }
      }
    `}

    
    ${({ isHorizontal }) => isHorizontal &&
    css `
      ${GallerySlideFigure} {
        display: grid;

        ${GallerySlideCaptionHed} {
          margin-top: 0;
          margin-bottom: 0.2em;
        }

        ${GallerySlideCaptionDek} p {
          margin-top: 0;
        }

        ${minScreen(BREAKPOINTS.sm)} {
          ${GallerySlideAssetWrapper} {
            grid-column: 1/-1;
            order: 0;
          }

          ${GallerySlideCaptionHed} {
            grid-column: 1/-1;
            order: 0;
          }

          ${GallerySlideCaptionDek} {
            grid-column: 1/-1;
            order: 1;
          }
        }

        ${minScreen(BREAKPOINTS.lg)} {
          grid-template-rows: auto 1fr;

          ${GallerySlideAssetWrapper} {
            grid-column: 4/-1;
            grid-row: 1/-1;
            order: 0;
          }

          ${GallerySlideCaptionHed} {
            grid-column: 1/4;
            grid-row: 1/1;
            order: 0;
          }

          ${GallerySlideCaptionDek} {
            grid-column: 1/4;
            grid-row: 2/-1;
            order: 0;
          }
        }
      }
    `}

    ${({ defaultVotingPrompt }) => defaultVotingPrompt &&
    css `
      & {
        margin-bottom: 0;
      }

      ${GallerySlideCaptionDek} {
        p {
          margin-bottom: 0;
        }
      }
    `}
`;
const GallerySlideFigCaptionWrapper = styled.figcaption.withConfig({
    displayName: 'GallerySlideFigCaptionWrapper'
}) `
  ${({ shouldOrderedGallery }) => hasBackgroundSlideWrapperCss(shouldOrderedGallery)}
  ${({ shouldOrderedGallery, contentAlign }) => hasBackgroundSlideContentAlignWrapperCss(shouldOrderedGallery, contentAlign)}
  ${({ hasGallerySlideBackground }) => hasGallerySlideBackground && `padding: 0 ${calculateSpacing(2)};`}
  ${({ contentAlign }) => contentAlign === 'left' &&
    css `
      text-align: left;
      ${GallerySlideCaptionCreditWrapper} {
        text-align: left;
      }
    `}

  ${({ contentAlign }) => contentAlign === 'center' &&
    css `
      text-align: center;
      ${GallerySlideCaptionCreditWrapper} {
        text-align: center;
      }
    `}
`;
const GallerySlideCaptionClampedDek = styled(Clamp).withConfig({
    displayName: 'GallerySlideCaptionClampedDek'
}) `
  && {
    ${ButtonWrapper} {
      transform-origin: center;
      ${({ showLess }) => showLess
    ? `margin: -${calculateSpacing(1)} 0 ${calculateSpacing(2)} 0;`
    : `margin: ${calculateSpacing(1)} 0 ${calculateSpacing(2)} 0;`}
      padding: 0;
      min-width: auto;
      height: 24px;
    }
    ${ButtonLabel} {
      padding: 0;
      width: 100%;
      text-align: left;
      ${getTypographyStyles('typography.definitions.utility.button-bulletin')};
      ${({ theme }) => `  ${getColorStyles(theme, 'color', 'colors.interactive.base.black')};`};
    }
  }
  ${ButtonIconWrapper} {
    svg {
      width: 24px;
      height: 24px;
    }
    padding: 0;
  }
`;
const ReadReviewCTA = styled(Button.Utility).withConfig({
    displayName: 'ReadReviewCTA'
}) `
  width: 50%;
`;
const GallerySlideCaptionSeasonName = styled(BaseLink).withConfig({
    displayName: 'GallerySlideCaptionSeasonName'
}) ``;
const GallerySlideCaptionBrandNameClickable = styled(BaseLink).withConfig({
    displayName: 'GallerySlideCaptionBrandNameClickable'
}) ``;
module.exports = {
    BookmarkWrapper,
    GallerySlideWrapper,
    GallerySlideFigure,
    GallerySlideAssetWrapper,
    GallerySlideAssetContainer,
    GallerySlideAssetContainerInner,
    GallerySlideSocialIcons,
    GallerySlideResponsiveAsset,
    GallerySlideCaptionWrapper,
    GallerySlideFigCaptionWrapper,
    GallerySlideFigCaption,
    GallerySlideCaptionCreditWrapper,
    GallerySlideCaptionPreHeaderOneWrapper,
    GallerySlideCaptionPreHeaderOne,
    GallerySlideCaptionPreHeaderTwo,
    GallerySlideCaptionPromotionHed,
    GallerySlideCaptionDekContainer,
    GallerySlideCaptionDetail,
    GallerySlideCaptionDek,
    GallerySlideCaptionOffers,
    GallerySlideCaptionBrandNameNotClickable,
    GallerySlideCaptionBrandNameClickable,
    GallerySlideCaptionHed,
    GallerySlideCaptionHedText,
    GallerySlideCaptionSeasonName,
    GallerySlideRankingContainerWrapper,
    GallerySlideRankingContainerRank,
    GallerySlideRankingContainerScore,
    GallerySlideCaptionCtaBlock,
    GallerySlideCaptionMetaOneContainer,
    GallerySlideCaptionMetaOne,
    GallerySlideCaptionPromotionText,
    GallerySlideCaptionMetaTwo,
    GallerySlideCaptionButton,
    GallerySlideCaptionPostCta,
    GallerySlideNativeShareContainer,
    GallerySlideSocialShareIcon,
    GallerySlideCaptionClampedDek,
    GallerySlideZoomWrapper,
    ReadReviewCTA
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 20460:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    articleCta: {
        id: 'GallerySlide.ArticleCta',
        defaultMessage: 'View Story',
        description: 'GallerySlide component article text',
        isConfigurable: true
    },
    productCta: {
        id: 'GallerySlide.ProductCta',
        defaultMessage: 'Shop Now',
        description: 'GallerySlide component product text',
        isConfigurable: true
    },
    recipeCta: {
        id: 'GallerySlide.RecipeCta',
        defaultMessage: 'View Recipe',
        description: 'GallerySlide component recipe text',
        isConfigurable: true
    },
    reviewCta: {
        id: 'GallerySlide.ReviewCta',
        defaultMessage: 'Read More',
        description: 'GallerySlide component review text',
        isConfigurable: true
    },
    venueCta: {
        id: 'GallerySlide.VenueCta',
        defaultMessage: 'Book Now',
        description: 'GallerySlide component venue text',
        isConfigurable: true
    },
    venueSellerPreviewText: {
        id: 'GallerySlide.VenueSellerPreviewText',
        defaultMessage: 'Powered By:',
        description: 'Seller preview'
    },
    productOfferCTAText: {
        id: 'GallerySlide.DefaultCTAText',
        defaultMessage: 'Book Now',
        description: 'Cta text for product offer list'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 93726:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const GallerySlide = __webpack_require__(25939);
const GallerySlideHorizontal = __webpack_require__(30723);
GallerySlide.CardLeft = asVariation(GallerySlide, 'CardLeft', {
    contentAlign: 'left',
    hasBackground: true,
    hasCaption: true,
    hasCaptionMargin: true,
    isOrdered: false
});
GallerySlide.CardCenter = asVariation(GallerySlide, 'CardCenter', {
    contentAlign: 'center',
    hasBackground: true,
    hasCaption: true,
    hasCaptionMargin: true,
    isOrdered: false
});
GallerySlide.CardOrderedLeft = asVariation(GallerySlide, 'CardOrderedLeft', {
    contentAlign: 'left',
    hasBackground: true,
    hasCaption: true,
    hasCaptionMargin: true,
    isOrdered: true
});
GallerySlide.CardOrderedCenter = asVariation(GallerySlide, 'CardOrderedCenter', {
    contentAlign: 'center',
    hasBackground: true,
    hasCaption: true,
    hasCaptionMargin: true,
    isOrdered: true
});
GallerySlide.ItemCenter = asVariation(GallerySlide, 'ItemCenter', {
    contentAlign: 'center',
    hasBackground: false,
    hasCaption: true,
    isOrdered: false,
    hasCaptionMargin: false
});
GallerySlide.ItemCenterNoCaption = asVariation(GallerySlide, 'ItemCenterNoCaption', {
    contentAlign: 'center',
    hasBackground: false,
    hasCaption: false,
    hasCaptionMargin: false,
    isOrdered: false
});
GallerySlide.ItemLeft = asVariation(GallerySlide, 'ItemLeft', {
    contentAlign: 'left',
    hasBackground: false,
    hasCaption: true,
    isOrdered: false,
    hasCaptionMargin: false
});
GallerySlide.ItemLeftMultipleLine = asVariation(GallerySlide, 'ItemLeftMultipleLine', {
    contentAlign: 'left',
    hasBackground: false,
    hasCaption: true,
    hasCaptionMargin: false,
    isOrdered: false,
    hasMultipleLines: true
});
GallerySlide.ItemLeftCaptionAbove = asVariation(GallerySlide, 'ItemLeftCaptionAbove', {
    contentAlign: 'left',
    hasBackground: false,
    hasCaption: true,
    hasCaptionMargin: false,
    isOrdered: false,
    shouldBrandNameBelowHed: true
});
GallerySlide.ItemLeftCaptionAboveMultipleButtons = asVariation(GallerySlide, 'ItemLeftCaptionAboveMultipleButtons', {
    contentAlign: 'left',
    hasBackground: false,
    hasCaption: true,
    hasCaptionMargin: false,
    isOrdered: false,
    shouldBrandNameBelowHed: true
}, {
    buttonVariation: 'Primary',
    btnStyle: 'outlined',
    showMultipleBuyButtons: true,
    showPriceOnButton: true,
    showSlideCount: true
});
GallerySlide.CardLeftWithCaptionAboveMultipleButtons = asVariation(GallerySlide, 'CardLeftWithCaptionAboveMultipleButtons', {
    contentAlign: 'left',
    hasBackground: true,
    hasCaption: true,
    hasCaptionMargin: true,
    isOrdered: false
}, {
    buttonVariation: 'Primary',
    btnStyle: 'outlined',
    showMultipleBuyButtons: true,
    showPriceOnButton: true,
    showSlideCount: true
});
GallerySlide.CardCenterWithCaptionAboveMultipleButtons = asVariation(GallerySlide, 'CardCenterWithCaptionAboveMultipleButtons', {
    contentAlign: 'center',
    hasBackground: true,
    hasCaption: true,
    hasCaptionMargin: true,
    isOrdered: false
}, {
    buttonVariation: 'Primary',
    btnStyle: 'outlined',
    showMultipleBuyButtons: true,
    showPriceOnButton: true,
    showSlideCount: true
});
GallerySlide.ItemLeftCaptionAboveMultipleButtonsWithPrice = asVariation(GallerySlide, 'ItemLeftCaptionAboveMultipleButtonsWithPrice', {
    contentAlign: 'left',
    hasBackground: true,
    hasCaption: true,
    hasCaptionMargin: false,
    isOrdered: false,
    shouldBrandNameBelowHed: false,
    shouldDekBelowOffer: true
}, {
    buttonVariation: 'Utility',
    showMultipleBuyButtons: true,
    showPriceOnButton: true,
    hasPriceSection: true,
    showSellerNameBelowButton: true
});
GallerySlide.ItemOrderedCenter = asVariation(GallerySlide, 'ItemOrderedCenter', {
    contentAlign: 'center',
    hasBackground: false,
    hasCaption: true,
    hasCaptionMargin: false,
    isOrdered: true
});
GallerySlide.ItemOrderedLeft = asVariation(GallerySlide, 'ItemOrderedLeft', {
    contentAlign: 'left',
    hasBackground: false,
    hasCaption: true,
    hasCaptionMargin: false,
    isOrdered: true
});
GallerySlide.NoCaption = asVariation(GallerySlide, 'NoCaption', {
    contentAlign: 'left',
    hasBackground: false,
    hasCaption: false,
    hasCaptionMargin: true,
    isOrdered: true
});
GallerySlide.SplitScreenImageRight = asVariation(GallerySlideHorizontal, 'SplitScreenImageRight', {});
GallerySlide.ItemLeftCaptionAboveMultipleButtonsWithDekBelowOffer = asVariation(GallerySlide, 'ItemLeftCaptionAboveMultipleButtonsWithDekBelowOffer', {
    contentAlign: 'left',
    hasBackground: false,
    hasCaption: true,
    hasCaptionMargin: false,
    isOrdered: false,
    shouldBrandNameBelowHed: true,
    shouldDekBelowOffer: true
}, {
    buttonVariation: 'Primary',
    btnStyle: 'outlined',
    showMultipleBuyButtons: true,
    showPriceOnButton: true,
    showSlideCount: true
});
GallerySlide.CardLeftWithBookmarkAndComment = asVariation(GallerySlide, 'CardLeftWithBookmarkAndComment', {
    contentAlign: 'left',
    hasBackground: true,
    hasCaption: true,
    hasCaptionMargin: true,
    isOrdered: false,
    showBookMarkIcon: true,
    showCommentCount: true
}, {
    buttonVariation: 'Primary',
    btnStyle: 'outlined',
    showMultipleBuyButtons: true,
    showPriceOnButton: true,
    showSlideCount: true
});
module.exports = GallerySlide;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 84009:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const uniqueId = __webpack_require__(97200);
const get = __webpack_require__(58156);
const Grid = __webpack_require__(86659);
const { GroupCalloutWrapper, GroupCalloutTitle } = __webpack_require__(68426);
const { TrackComponentChannel } = __webpack_require__(78788);
const { checkImageCreditText } = __webpack_require__(5344);
const gridWrapperMap = {};
gridWrapperMap[1] = Grid.EvenAny;
gridWrapperMap[2] = Grid.EvenTwo;
gridWrapperMap[3] = Grid.EvenThree;
gridWrapperMap[4] = Grid.EvenFour;
/**
 * Group component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {Array} props.children - Children items to render
 * @param {Array} [props.childTypes] - Optional content types for children
 * @param {object} [props.heading] - Callout heading variations.
 * @param {boolean} [props.hasThreeColumnsOnMobile] - Optional flag to set three column group in mobile.
 * @param {boolean} [props.isUpcEnabled] - If the containing items are embed and have upc enabled.
 * @param {boolean} [props.isXSmallGroup2] - Optional flag to set smaller group callout wrapper width.
 * @param {object} [props.name] - Callout name.
 * @param {object} [props.variations] - Optional variations properties used in rendering the component.
 * @param {boolean} [props.variations.isEven] - Optional flag to set an even width column layout
 * @param {boolean} [props.variations.childCountPerRow] - Optional value to set number of grid cols
 * @param {boolean} [props.variations.hasRowGap] - Optional value to set grid row gap
 * @param {boolean} [props.variations.fullBleed] - Optional flag to set a full bleed layout
 * @param {boolean} [props.variations.showSingleCol] - Optional flag to show single product in a row on small screens
 * @param {boolean} [props.showDangerousDek] - Optional flag to show ShowDangerousDek
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 *
 * @returns {ReactElement} <div>
 */
const GroupCallout = ({ className, children, childTypes = [], hasThreeColumnsOnMobile = false, heading = {}, isUpcEnabled, isXSmallGroup2 = false, name, variations = {
    isEven: false,
    fullBleed: false
}, showDangerousDek = false, variationName }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'GroupCallout',
            variation: variationName
        });
    }, [variationName]);
    const containsInstagram = childTypes.some((item) => item === 'instagram');
    const containsProducts = childTypes.some((item) => item === 'product');
    const containsArticles = childTypes.some((item) => item === 'article');
    const containsImages = childTypes.some((item) => item === 'image');
    let contentType;
    let groupItems;
    const titleRegex = /^h[1-6]$/;
    const titleElement = React.Children.toArray(children).find((child) => {
        const { type } = child;
        return typeof type === 'string' && titleRegex.test(type);
    });
    groupItems = React.Children.toArray(children).filter((child) => !titleRegex.test(child.type));
    let WrapperElement = 'div';
    const childrenCount = variations.childCountPerRow ?? React.Children.count(children);
    let hasGridMargins = false;
    if (containsProducts) {
        hasGridMargins = true;
        if (childrenCount >= 4) {
            WrapperElement = gridWrapperMap[4];
        }
        else {
            WrapperElement = gridWrapperMap[childrenCount];
        }
    }
    const groupClassNames = classnames('callout callout--group', `callout--${name}`, className);
    if (containsArticles) {
        contentType = 'article';
        groupItems = React.Children.map(groupItems, (item) => React.cloneElement(item, {
            ...item.props,
            showButton: false,
            showByline: true,
            showRubric: true,
            variations: { layout: 'side-by-side' }
        }));
    }
    const { hasRowGap, showSingleCol } = variations;
    const componentTitle = contentType ? heading[contentType] : null;
    const title = titleElement ? titleElement.props.children : componentTitle;
    let productMultiImageCount = 1;
    let hasImageCreditText = false;
    React.Children.toArray(children).forEach((item) => {
        const images = get(item, 'props.image');
        const isProductItem = ['contentreference', 'product'].includes(item?.props?.contentType);
        if (Array.isArray(images) && images.length > 1 && isProductItem) {
            productMultiImageCount++;
        }
        if (!hasImageCreditText) {
            hasImageCreditText = checkImageCreditText(images);
        }
    });
    const visibleChildren = React.useMemo(() => {
        return React.Children.map(groupItems, (item, i) => {
            const assetKey = containsImages
                ? `callout--group-item-${get(item, 'props.image.id')}`
                : uniqueId('callout--group-item-');
            return React.cloneElement(item, {
                index: i,
                key: assetKey,
                className: `callout--group-item callout--group-item-${i + 1}`,
                productMultiImageCount,
                hasImageCreditText,
                hideLandscapeLayout: true
            });
        });
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    return (React.createElement(GroupCalloutWrapper, { as: WrapperElement, className: groupClassNames, containsInstagram: containsInstagram, containsProducts: containsProducts, containsArticles: containsArticles, hasGridMargins: hasGridMargins, hasRowGap: hasRowGap, hasThreeColumnsOnMobile: hasThreeColumnsOnMobile, isUpcEnabled: isUpcEnabled, isFullBleed: !containsProducts && variations.fullBleed, isXSmallGroup2: isXSmallGroup2, "data-testid": "GroupCalloutWrapper", showSingleCol: showSingleCol, showDangerousDek: showDangerousDek },
        title && (React.createElement(GroupCalloutTitle, { "data-testid": "GroupCalloutTitle" }, title)),
        visibleChildren));
};
GroupCallout.propTypes = {
    children: PropTypes.node.isRequired,
    childTypes: PropTypes.array,
    className: PropTypes.string,
    hasThreeColumnsOnMobile: PropTypes.bool,
    heading: PropTypes.object,
    isUpcEnabled: PropTypes.bool,
    isXSmallGroup2: PropTypes.bool,
    name: PropTypes.string,
    showDangerousDek: PropTypes.bool,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        isEven: PropTypes.bool,
        fullBleed: PropTypes.bool,
        childCountPerRow: PropTypes.number,
        hasRowGap: PropTypes.bool,
        showSingleCol: PropTypes.bool
    })
};
GroupCallout.displayName = 'GroupCallout';
module.exports = GroupCallout;
//# sourceMappingURL=GroupCallout.js.map

/***/ }),

/***/ 31830:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const VariedGroupCallout = __webpack_require__(9566);
module.exports = asConfiguredComponent(VariedGroupCallout, 'GroupCallout');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 68426:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { BaseText } = __webpack_require__(76955);
const { calculateSpacing, minScreen, styledProperty, minMaxScreen, getColorStyles, getTypographyStyles, maxScreen } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { ProductEmbedHed, ProductEmbedDek } = __webpack_require__(53985);
const GroupCalloutWrapper = styled.div.withConfig({
    displayName: 'GroupCalloutWrapper'
}) `
  /* NOTE: Specificity required because of containsArticles */
  && {
    display: grid;
    grid-column-gap: ${({ isUpcEnabled }) => isUpcEnabled ? calculateSpacing(2) : '20px'};
    grid-row-gap: ${({ hasRowGap }) => (hasRowGap ? '1rem' : 0)};
    margin: 0;
    width: 100%;

    @media (max-width: ${BREAKPOINTS.md}) {
      grid-column-gap: ${({ isUpcEnabled }) => isUpcEnabled ? calculateSpacing(1) : '20px'};
    }
  }

  &.grid-even.grid-items-2 {
    ${maxScreen(BREAKPOINTS.md)} {
      grid-template-columns: ${({ showSingleCol }) => showSingleCol ? '1fr' : ''};
    }
  }

  .responsive-cartoon {
    &::before {
      ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.consumption.body.standard.divider')};

      display: inline-block;
      grid-column: 1/-1;
      border-width: 0 0 1px;
      border-style: solid;
      height: 0;
      content: '';
    }

    &::after {
      ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.consumption.body.standard.divider')};
      display: inline-block;
      grid-column: 1/-1;
      border-width: 1px 0 0;
      border-style: solid;
      height: 0;
      content: '';
    }
  }

  .responsive-cartoon__caption {
    ${getTypographyStyles('typography.definitions.globalEditorial.context-secondary')}
    margin-top: 0;
  }

  ${({ hasGridMargins }) => {
    if (hasGridMargins) {
        return `
      && {
        margin-bottom: ${calculateSpacing(3)};
        margin-top: ${calculateSpacing(3)};

        ${minScreen(BREAKPOINTS.md)} {
          margin-bottom: ${calculateSpacing(6)};
          margin-top: ${calculateSpacing(6)};
        }
      }
      `;
    }
    return '';
}}

  ${({ isUpcEnabled }) => {
    if (isUpcEnabled) {
        return `
      && {
        margin-bottom: 0;
        margin-top: 0;
      }
      `;
    }
    return '';
}}


  &.callout--group-2,
  &.callout--group-3,
  &.callout--group-4 {
    ${ProductEmbedHed} {
      ${getTypographyStyles('typography.definitions.consumptionEditorial.subhed-aux-secondary')}
    }
  }

  &.callout--group-2 {
    ${styledProperty('containsInstagram', true, `grid-template-columns: repeat(auto-fit, minmax(326px, 1fr));`)}
  }

  ${styledProperty('containsProducts', true, `margin-bottom: unset;`)}
  .product-embed.product-embed--image-top {
    ${(showDangerousDek) => !showDangerousDek &&
    `${ProductEmbedDek} {
        display: none;
      }`};
  }

  .product-embed.product-embed--no-bottom-padding {
    ${minScreen(BREAKPOINTS.md)} {
      grid-column: unset;
    }
  }

  .callout--group-item {
    margin: 0;

    &.product-embed {
      height: 100%;
    }
  }

  p {
    margin: 0;
  }

  ${minScreen(BREAKPOINTS.md)} {
    &.callout--group-2 {
      grid-template-columns: repeat(2, 1fr);
      ${styledProperty('isXSmallGroup2', true, `margin: 0 auto; width: 50%;`)}
    }

    &.callout--group-3 {
      grid-template-columns: repeat(3, 1fr);
    }

    &.callout--group-4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  ${({ hasThreeColumnsOnMobile }) => {
    if (hasThreeColumnsOnMobile) {
        return `
        ${maxScreen(BREAKPOINTS.md)} {
          &.callout--group-3 {
            grid-template-columns: repeat(3, 1fr);
          }
        `;
    }
    return '';
}}

  ${styledProperty('isFullBleed', true, `
    ${minMaxScreen(BREAKPOINTS.md, BREAKPOINTS.xl)} {
      position: relative;
      left: 50%;
      grid-gap: unset;
      margin-left: -50vw;
      width: 100vw;

      .caption {
        margin-right: ${calculateSpacing(1)};
        margin-left: ${calculateSpacing(1)};
      }
    }
  `)}

  figure.callout--group-item {
    margin: 0;
  }

  ${styledProperty('containsArticles', true, css `
      margin-top: ${calculateSpacing(4)};
      padding-top: ${calculateSpacing(2)};

      ${minScreen(BREAKPOINTS.md)} {
        margin-top: ${calculateSpacing(1)};
      }

      &.callout--inset-left,
      &.callout--inset-right {
        border-width: 2px 0 0;
        border-style: solid;
        ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.consumption.body.standard.display-texture')};

        .content-card-embed--side-by-side {
          display: grid;
          grid-column-gap: ${calculateSpacing(3)};
          grid-template-columns: 75px auto;
        }

        .content-card-embed__image {
          margin-bottom: 0;
        }

        .content-card-embed__hed {
          ${getTypographyStyles('typography.definitions.discovery.hed-bulletin-primary')}
          margin-bottom: ${calculateSpacing(1)};
        }

        .content-card-embed__hed-link {
          &:link,
          &:visited {
            text-decoration: none;
            ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.subhed')};
          }

          &:active,
          &:focus,
          &:hover {
            text-decoration: underline;
            ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.subhed')};
          }
        }

        .content-card-embed__byline-authors {
          text-align: left;
        }

        .content-card-embed__rubric {
          ${getTypographyStyles('typography.definitions.globalEditorial.context-primary')}
          ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.display-signature')};
        }

        .content-card-embed {
          background-color: transparent;
          padding: ${calculateSpacing(2)} 0 0;

          &:not(:last-child) {
            border-width: 1px;
            border-style: solid;
            ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.consumption.body.standard.divider')};
            padding-bottom: ${calculateSpacing(2)};
          }
        }
      }
    `)}
`;
const GroupCalloutTitle = styled(BaseText).withConfig({
    displayName: 'GroupCalloutTitle'
}) `
  border-width: 0 0 2px;
  border-style: solid;
  padding: 0 0 ${calculateSpacing(2)};
`;
GroupCalloutTitle.defaultProps = {
    as: 'h2',
    colorToken: 'colors.consumption.body.standard.display-texture',
    typeIdentity: 'typography.definitions.discovery.subhed-section-tertiary'
};
module.exports = {
    GroupCalloutWrapper,
    GroupCalloutTitle
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 9566:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const GroupCallout = __webpack_require__(84009);
GroupCallout.Default = asVariation(GroupCallout, 'Default', {
    isEven: false,
    fullBleed: false
});
GroupCallout.Even = asVariation(GroupCallout, 'Even', {
    isEven: true,
    fullBleed: false
});
GroupCallout.FullBleed = asVariation(GroupCallout, 'FullBleed', {
    isEven: false,
    fullBleed: true
});
GroupCallout.OnlyTwo = asVariation(GroupCallout, 'OnlyTwo', {
    isEven: true,
    fullBleed: false,
    childCountPerRow: 2,
    hasRowGap: true,
    showSingleCol: true
}, {
    name: 'group-2'
});
module.exports = GroupCallout;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 77858:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { filter } = __webpack_require__(21827);
const { AtoZIndexWrapper, AtoZIndexList, AtoZIndexLink, AtoZIndexText, AtoZHeading, AtoZIndexValue } = __webpack_require__(12606);
const LINK_CONFIG = [
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'G',
    'H',
    'I',
    'J',
    'K',
    'L',
    'M',
    'N',
    'O',
    'P',
    'Q',
    'R',
    'S',
    'T',
    'U',
    'V',
    'W',
    'X',
    'Y',
    'Z'
];
/**
 * AtoZIndex component
 *
 * @param {object} props - React props
 * @param {Array} [props.links] - Array of links with heading
 * @param {string} [props.links.groupName] - Link group heading
 * @param {string} [props.links.groupId] - Link group id
 * @param {string} [props.navId] - Unique id for the navigation group
 * @param {Function} [props.setFilterResult] - setState function for filter result
 * @param {Function} [props.setLinkValue] - setState function for link value
 * @param {boolean} [props.isPaginated] - boolean value to determine component is paginated alphabetically or not
 * @returns {ReactElement} <div>
 */
const AtoZIndex = ({ links, navId, setLinkValue, isPaginated, setFilterResult }) => {
    if (!links || !links.length) {
        return null;
    }
    const scrollToLetter = (e) => {
        e.preventDefault();
        const target = document.getElementById(e.target.hash.replace('#', ''));
        if (!target) {
            return;
        }
        const { offsetTop: targetOffsetTop } = target;
        const endPoint = targetOffsetTop - 90;
        const distance = endPoint - window.pageYOffset;
        const rate = (distance * 4) / 400;
        let interval;
        function scrollIncrement() {
            const yOffset = Math.ceil(window.pageYOffset);
            if ((yOffset >= endPoint && rate >= 0) ||
                (yOffset <= endPoint && rate <= 0)) {
                clearInterval(interval);
            }
            else {
                window.scrollBy(0, rate);
            }
        }
        interval = setInterval(scrollIncrement, 4);
    };
    const moveToLetter = (e) => {
        e.preventDefault();
        const targetId = e.target.hash.replace('#', '');
        const linkIndex = targetId.split('-')[1];
        setLinkValue(linkIndex);
        setFilterResult(() => filter([links[linkIndex]], ''));
    };
    return (React.createElement(AtoZIndexWrapper, { "data-testid": "AtoZIndexWrapper" },
        React.createElement(AtoZHeading, null, "Browse by letter:"),
        React.createElement(AtoZIndexList, null, LINK_CONFIG.map((linkTitle) => {
            const groupToLinkTo = links.find((link) => link.groupName === linkTitle);
            const groupToIndex = links.findIndex((link) => link.groupName === linkTitle);
            const itemId = isPaginated ? groupToIndex : navId;
            const funcToUse = isPaginated ? moveToLetter : scrollToLetter;
            return groupToLinkTo ? (React.createElement(AtoZIndexValue, { key: linkTitle },
                React.createElement(AtoZIndexLink, { "data-testid": "AtoZIndexLink", href: `#${groupToLinkTo.groupName === '#'
                        ? `other-${itemId}`
                        : `${groupToLinkTo.groupName.toLowerCase()}-${itemId}`}`, onClick: funcToUse }, linkTitle))) : (React.createElement(AtoZIndexValue, { key: linkTitle },
                React.createElement(AtoZIndexText, null,
                    linkTitle,
                    " ")));
        }))));
};
AtoZIndex.propTypes = {
    isPaginated: PropTypes.bool,
    links: PropTypes.arrayOf(PropTypes.shape({
        groupName: PropTypes.string.isRequired
    })),
    navId: PropTypes.string,
    setFilterResult: PropTypes.func,
    setLinkValue: PropTypes.func
};
module.exports = AtoZIndex;
//# sourceMappingURL=AtoZIndex.js.map

/***/ }),

/***/ 71218:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const { useState } = __webpack_require__(96540);
const uniqueid = __webpack_require__(97200);
const googleAnalytics = __webpack_require__(37402);
const SearchIcon = __webpack_require__(90506);
const { asConfiguredComponent } = __webpack_require__(12892);
const { filter, useDebounce } = __webpack_require__(21827);
const AtoZIndex = __webpack_require__(77858);
const Ad = __webpack_require__(19607);
const StickyBox = __webpack_require__(28433);
const { PaymentGateway } = __webpack_require__(92807);
const { TrackComponentChannel } = __webpack_require__(78788);
const { GroupedNavigationWrapper, GroupedNavigationFilter, GroupedNavigationFilterContent, GroupedNavigationFilterBrowser, GroupedNavigationFilterInput, GroupedNavigationContent, GroupedNavigationLinks, GroupedNavigationGroup, GroupedNavigationAdRail, GroupedNavigationNoResult, GroupedNavigationQuote } = __webpack_require__(12606);
const translations = (__webpack_require__(63864)/* ["default"] */ .A);
const SectionTitle = __webpack_require__(35864);
/**
 * GroupedNavigationHasBrowser component
 *
 * @param {object}    props - React props
 * @param {string}    [props.className] - Optional top-level class to add
 * @param {string}    [props.dangerousHed] - Optional Title
 * @param {string}    [props.filterLabel] - Optional Label for filter
 * @param {string}    [props.analyticsEventForFilter] - Optional Google Analytics event string to capture filter search
 * @param {object[]}  [props.groupedLinks] - Array of link groups to display
 * @param {string}    [props.groupedLinks.groupName] - Link group heading
 * @param {string}    [props.groupedLinks.groupId] - Unique id for the group
 * @param {object[]}  [props.groupedLinks.links] - Array of links objects
 * @param {string}    [props.groupedLinks.links.text] - Link text
 * @param {string}    [props.groupedLinks.links.url] - Link relative url
 * @param {boolean} [props.isPaginated] - boolean value to determine component is paginated alphabetically or not
 * @param {boolean}   [props.hasAtoZIndex] - Optional flag to show an A to Z index on the menu
 * @param {boolean}   [props.groupedLinks.links.isSecondary] - Optional flag of link level of importance
 * @param {boolean}   [props.groupedLinks.links.analyticsEvent] - Optional Google Analytics event string
 * @param {boolean}   [props.hasFilter] - Optional flag to show a filter on the menu
 * @param {boolean}   [props.showContentDivider] - Optional flag to show content divider
 * @returns {ReactElement} <div>
 */
const GroupedNavigationHasBrowser = ({ className, dangerousHed, groupedLinks, hasAtoZIndex = true, hasFilter = false, analyticsEventForFilter, filterLabel = 'Search..', showContentDivider = false, isPaginated = false }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'GroupedNavigationHasBrowser'
        });
    }, []);
    const { formatMessage } = useIntl();
    const navId = uniqueid();
    const [filterValue, setFilterValue] = useState('');
    const primaryFilterResult = isPaginated ? [groupedLinks[0]] : groupedLinks;
    const [filterResult, setFilterResult] = useDebounce(primaryFilterResult, 200);
    const [linkValue, setLinkValue] = useState('0');
    const onFilterChange = (e) => {
        const query = e.target.value;
        const filterResultOnChange = isPaginated
            ? [groupedLinks[linkValue]]
            : groupedLinks;
        setFilterValue(query);
        setFilterResult(() => filter(filterResultOnChange, query));
    };
    const onFocus = () => {
        if (analyticsEventForFilter) {
            googleAnalytics.emitGoogleTrackingEvent(analyticsEventForFilter);
        }
    };
    if (!groupedLinks || !groupedLinks.length) {
        return null;
    }
    return (React.createElement(GroupedNavigationWrapper, { className: className, hasFilter: hasFilter, "data-testid": "GroupedNavigationWrapper" },
        dangerousHed && (React.createElement(SectionTitle, { dangerousHed: dangerousHed, hasDividerAbove: true, hasDividerBelow: true, textAlign: "center", "data-testid": "section-title" })),
        hasFilter && (React.createElement(GroupedNavigationFilter, { isPaginated: isPaginated },
            React.createElement(GroupedNavigationFilterContent, null,
                React.createElement(SearchIcon, null),
                React.createElement(GroupedNavigationFilterInput, { placeholder: filterLabel, "aria-label": filterLabel ||
                        formatMessage(translations.filterInputAriaLabelText), name: "filter", type: "text", onChange: onFilterChange, onFocus: onFocus, value: filterValue })),
            React.createElement(GroupedNavigationFilterBrowser, { isPaginated: isPaginated }, hasAtoZIndex && (React.createElement(AtoZIndex, { links: groupedLinks, navId: navId, setLinkValue: setLinkValue, isPaginated: isPaginated, setFilterResult: setFilterResult }))))),
        React.createElement(GroupedNavigationAdRail, null,
            filterResult.length > 0 ? (React.createElement(GroupedNavigationContent, { hasFilter: hasFilter },
                React.createElement(GroupedNavigationLinks, null, filterResult.map((group) => {
                    if (!group.links)
                        return null;
                    const linksMappedWithClass = group.links.map((link) => {
                        const linkClassName = link.isSecondary === true
                            ? 'link--secondary'
                            : 'link--primary';
                        return {
                            ...link,
                            className: linkClassName
                        };
                    });
                    const attributes = {};
                    if (hasAtoZIndex) {
                        attributes.id =
                            group.groupName === '#'
                                ? `other-${navId}`
                                : `${group.groupName.toLowerCase()}-${navId}`;
                    }
                    return (React.createElement(GroupedNavigationGroup, { key: group.groupName, className: "grouped-navigation__group", links: linksMappedWithClass, linkClassName: "grouped-navigation__link", heading: group.groupName, showContentDivider: showContentDivider, shouldStyleListItems: true, attributes: attributes, isPaginated: isPaginated }));
                })))) : (React.createElement(GroupedNavigationNoResult, null,
                "0 results for",
                ' ',
                React.createElement(GroupedNavigationQuote, null,
                    "\"",
                    filterValue,
                    "\""))),
            React.createElement(PaymentGateway, { group: "ads" },
                React.createElement(StickyBox, null,
                    React.createElement(Ad, { position: "rail" }))))));
};
const linkShape = PropTypes.shape({
    text: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired,
    isSecondary: PropTypes.bool,
    analyticsEvent: PropTypes.string
});
const groupedLinksShape = PropTypes.arrayOf(PropTypes.shape({
    links: PropTypes.arrayOf(linkShape),
    groupName: PropTypes.string,
    groupId: PropTypes.string
}));
GroupedNavigationHasBrowser.propTypes = {
    analyticsEventForFilter: PropTypes.string,
    className: PropTypes.string,
    dangerousHed: PropTypes.string,
    filterLabel: PropTypes.string,
    groupedLinks: groupedLinksShape,
    hasAtoZIndex: PropTypes.bool,
    hasFilter: PropTypes.bool,
    isPaginated: PropTypes.bool,
    showContentDivider: PropTypes.bool
};
GroupedNavigationHasBrowser.displayName = 'GroupedNavigationHasBrowser';
module.exports = asConfiguredComponent(GroupedNavigationHasBrowser, 'GroupedNavigationHasBrowser');
module.exports.groupedLinksShape = groupedLinksShape;
//# sourceMappingURL=GroupedNavigationHasBrowser.js.map

/***/ }),

/***/ 21634:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(71218);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 12606:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BaseLink, BaseText } = __webpack_require__(76955);
const { calculateSpacing, getLinkStyles, getTypographyStyles, getColorStyles, getInputFieldStyles } = __webpack_require__(26865);
const Navigation = __webpack_require__(54790);
const Grid = __webpack_require__(86659);
const { BREAKPOINTS } = __webpack_require__(96472);
const GroupedNavigationWrapper = styled.div.withConfig({
    displayName: 'GroupedNavigationWrapper'
}) `
  padding-top: ${calculateSpacing(4)};
  scroll-behavior: smooth;
  ${({ hasFilter }) => hasFilter && `padding-top: ${calculateSpacing(2)};`}

  .navigation__heading {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-feature')};
    margin: 0;
    line-height: normal;
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.foundation.expanded-utility.nav-link.default')};
  }

  .navigation__list-item {
    width: 50%;
    white-space: normal;
    @media (min-width: ${BREAKPOINTS.lg}) {
      width: 33.3%;
    }
  }

  .navigation__list {
    margin-bottom: 0;
  }

  .content-divider {
    display: block;
    margin-bottom: ${calculateSpacing(2)};
    border-bottom-width: ${calculateSpacing(0.5)};
    border-bottom-style: solid;
    ${({ theme }) => getColorStyles(theme, 'border-bottom-color', 'colors.discovery.lead.secondary.accent')};
    padding-top: ${calculateSpacing(1)};
    width: ${calculateSpacing(3)};
  }

  .grouped-navigation__link {
    ${({ theme }) => getLinkStyles(theme, 'colors.foundation.expanded-utility.nav-link.default', 'colors.foundation.expanded-utility.nav-link.hover', 'navigation')}

    &.link--primary {
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-primary')};
    }

    &.link--secondary {
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-bulletin-primary')};
    }
  }
`;
const GroupedNavigationFilter = styled.div.withConfig({
    displayName: 'GroupedNavigationFilter'
}) `
  position: static;
  border-width: 0 0 1px;
  border-style: none;
  padding-top: 2rem;
  width: 100%;

  ${({ isPaginated }) => isPaginated &&
    `
  border-bottom: 1px solid rgb(223, 223, 223);
  padding-bottom: ${calculateSpacing(4)};
  `}

  ${({ theme }) => getColorStyles(theme, 'color', 'colors.discovery.body.white.divider')};

  .icon {
    position: absolute;
    top: 10px;
    pointer-events: none;
  }
  @media (min-width: ${BREAKPOINTS.lg}) {
    display: flex;
    flex-direction: row;
  }
`;
const GroupedNavigationFilterContent = styled.div.withConfig({
    displayName: 'GroupedNavigationFilterContent'
}) `
  position: relative;
  width: 100%;
  text-align: left;
  @media (min-width: ${BREAKPOINTS.lg}) {
    width: 25%;
  }
`;
const GroupedNavigationFilterBrowser = styled.div.withConfig({
    displayName: 'GroupedNavigationFilterBrowser'
}) `
  position: relative;
  padding-top: 5%;
  width: 100%;
  text-align: left;
  @media (min-width: ${BREAKPOINTS.lg}) {
    ${({ isPaginated }) => isPaginated ? `padding-top: 0px;` : `padding-top: 1%;`};
    padding-left: 2%;
    width: 75%;
  }
`;
const GroupedNavigationFilterInput = styled(BaseText).withConfig({
    displayName: 'GroupedNavigationFilterInput'
}) `
  ${({ theme }) => getInputFieldStyles(theme, 'normal', 'background')};
  ${({ theme }) => getInputFieldStyles(theme, 'normal', 'text')};
  border: 1px solid #d8d8d8;
  padding-left: 48px;
  width: 100%;
  height: 50px;
`;
GroupedNavigationFilterInput.defaultProps = {
    as: 'input',
    typeIdentity: 'typography.definitions.foundation.link-secondary'
};
const GroupedNavigationContent = styled.div.withConfig({
    displayName: 'GroupedNavigationContent'
}) `
  display: flex;
  width: 100%
    ${({ hasFilter }) => hasFilter &&
    `
      padding-top: ${calculateSpacing(4)};

  `};
  height: 100%;
`;
const GroupedNavigationAdRail = styled(Grid.ContentWithAdRail).withConfig({
    displayName: 'GroupedNavigationAdRail'
}) `
  &&& {
    margin: 0 0;
    padding: 0 0;
    height: 100%;
    --grid-margin: 0;
  }
`;
const GroupedNavigationLinks = styled.div.withConfig({
    displayName: 'GroupedNavigationLinks'
}) `
  flex: 1;
  padding-top: 1rem;
  width: 100%;
  height: 100%;
  overflow-y: auto;

  @media (min-width: ${BREAKPOINTS.lg}) {
    padding-top: 2rem;
  }

  && li {
    padding-bottom: ${calculateSpacing(2)};

    &.link--primary {
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-primary')};
    }

    &.link--secondary {
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-secondary')};
    }
  }
`;
const GroupedNavigationGroup = styled(Navigation).withConfig({
    displayName: 'GroupedNavigationGroup'
}) `
  margin-bottom: 15px;
  ${({ isPaginated }) => !isPaginated && `border-bottom: 1px solid #dddddd;`}

  &:last-child {
    border-bottom: 0;
  }
`;
const GroupedNavigationIndex = styled.div.withConfig({
    displayName: 'GroupedNavigationIndex'
}) `
  position: static;
  padding-right: ${calculateSpacing(1)};
  overflow-y: auto;
`;
const AtoZIndexWrapper = styled(BaseText).withConfig({
    displayName: 'AtoZIndexWrapper'
}) `
  width: 100%;
  text-align: center;

  @media (min-width: ${BREAKPOINTS.lg}) {
    text-align: left;
  }
`;
AtoZIndexWrapper.defaultProps = {
    as: 'nav'
};
const AtoZIndexList = styled(BaseText).withConfig({
    displayName: 'AtoZIndexList'
}) `
  display: inline;
  top: 10px;
  margin-top: 0;
  padding: 0;
  list-style: none;
`;
AtoZIndexList.defaultProps = {
    as: 'ul'
};
const AtoZIndexValue = styled(BaseText).withConfig({
    displayName: 'AtoZIndexValue'
}) `
  display: inline-block;
  width: 25px;
`;
AtoZIndexValue.defaultProps = {
    as: 'span'
};
const AtoZIndexLink = styled(BaseLink).withConfig({
    displayName: 'AtoZIndexLink'
}) `
  display: inline;
  padding-top: ${calculateSpacing(0.25)};
  padding-bottom: ${calculateSpacing(0.25)};
  letter-spacing: 0;
`;
AtoZIndexLink.defaultProps = {
    colorSecondaryLinkToken: 'colors.foundation.expanded-utility.nav-link.hover',
    colorStaticLinkToken: 'colors.foundation.expanded-utility.nav-link.default',
    colorToken: 'colors.foundation.expanded-utility.nav-link.default',
    linkStyle: 'navigation',
    typeToken: 'typography.definitions.foundation.link-feature'
};
const AtoZIndexText = styled(BaseText).withConfig({
    displayName: 'AtoZIndexText'
}) `
  display: inline;
  padding-top: ${calculateSpacing(0.25)};
  padding-bottom: ${calculateSpacing(0.25)};
  color: #757575;
`;
AtoZIndexText.defaultProps = {
    as: 'li',
    colorToken: 'colors.foundation.expanded-utility.nav-link.default',
    typeIdentity: 'typography.definitions.foundation.link-feature'
};
const AtoZHeading = styled(BaseText).withConfig({
    displayName: 'AtoZHeading'
}) `
  top: 10px;
  padding-right: 10px;
  padding-bottom: 4%;
  color: rgb(0, 0, 0);

  @media (min-width: ${BREAKPOINTS.lg}) {
    display: inline;
    padding-bottom: 0%;
  }
`;
AtoZHeading.defaultProps = {
    typeIdentity: 'typography.definitions.foundation.link-feature'
};
const GroupedNavigationNoResult = styled(BaseText).withConfig({
    displayName: 'GroupedNavigationNoResult'
}) `
  margin: 30px 10px;
  text-align: center;
  text-transform: lowercase;
  color: rgb(0, 0, 0);
`;
GroupedNavigationNoResult.defaultProps = {
    as: 'div',
    typeIdentity: 'typography.definitions.foundation.title-primary'
};
const GroupedNavigationQuote = styled(BaseText).withConfig({
    displayName: 'GroupedNavigationQuote'
}) `
  color: rgb(0, 0, 0);
`;
GroupedNavigationQuote.defaultProps = {
    as: 'span',
    typeIdentity: 'typography.definitions.foundation.title-primary'
};
module.exports = {
    GroupedNavigationAdRail,
    GroupedNavigationWrapper,
    GroupedNavigationFilter,
    GroupedNavigationFilterContent,
    GroupedNavigationFilterBrowser,
    GroupedNavigationFilterInput,
    GroupedNavigationContent,
    GroupedNavigationLinks,
    GroupedNavigationGroup,
    GroupedNavigationIndex,
    GroupedNavigationNoResult,
    GroupedNavigationQuote,
    AtoZIndexWrapper,
    AtoZIndexList,
    AtoZIndexLink,
    AtoZIndexText,
    AtoZIndexValue,
    AtoZHeading
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 63864:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    filterInputAriaLabelText: {
        id: 'GroupedNavigationHasBrowser.FilterInputAriaLabel',
        defaultMessage: 'Filter links',
        description: 'Grouped Navigation Filter component aria label text',
        isConfigurable: true
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 21827:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.useDebounce = exports.filter = void 0;
const { useState, useCallback } = __webpack_require__(96540);
const debounce = __webpack_require__(38221);
const filter = (source, query) => {
    if (!query?.trim())
        return source;
    const formatText = (word) => word
        .toString()
        .toLowerCase()
        // remove any diacritics
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '')
        // remove any non alphanumeric characters
        .replace(/[^a-z0-9\s]/gi, '');
    return source
        .map((group) => {
        return {
            ...group,
            links: group.links?.filter((link) => {
                // check if our query contains a space
                if (/(\s|')/.test(query)) {
                    return formatText(link.text).includes(formatText(query));
                }
                // check if link text is an acromyn
                if (link.text.match(/([a-zA-Z]\.){2,}/)) {
                    return link.text
                        .split(' ')
                        .filter((word) => formatText(word).startsWith(formatText(query)))
                        .length;
                }
                return link.text
                    .split(/([ \-'’.]+)/)
                    .filter((word) => formatText(word).startsWith(formatText(query)))
                    .length;
            })
        };
    })
        .filter((group) => group.links?.length);
};
exports.filter = filter;
const useDebounce = (obj, wait) => {
    const [state, setState] = useState(obj);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    const debounceFunc = useCallback(debounce((prop) => {
        setState(prop);
    }, wait), []);
    const setDebouncedState = (val) => {
        debounceFunc(val);
    };
    return [state, setDebouncedState];
};
exports.useDebounce = useDebounce;
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 96510:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const { useState } = __webpack_require__(96540);
const googleAnalytics = __webpack_require__(37402);
const SearchIcon = __webpack_require__(90506);
const { asConfiguredComponent } = __webpack_require__(12892);
const { filter, useDebounce } = __webpack_require__(36537);
const { TrackComponentChannel } = __webpack_require__(78788);
const { GroupedNavigationWrapper, GroupedNavigationFilter, GroupedNavigationFilterContent, GroupedNavigationFilterInput, GroupedNavigationContent, GroupedNavigationLinks, GroupedNavigationGroup, GroupedNavigationNoResult, GroupedNavigationQuote } = __webpack_require__(37316);
const translations = (__webpack_require__(31950)/* ["default"] */ .A);
const { SummaryCarouselRow } = __webpack_require__(34751);
const Carousel = __webpack_require__(30830);
const SectionTitle = __webpack_require__(35864);
const CAROUSEL_SLIDE_SIZING = {
    width: {
        sm: '50%',
        lg: '40%',
        xl: '20%'
    },
    spacing: { sm: '0px', md: '0px', lg: '0px', xl: '0px', xxl: '0px' }
};
/**
 * GroupedNavigation component
 *
 * @param {object}    props - React props
 * @param {string}    [props.className] - Optional top-level class to add
 * @param {string}    [props.dangerousHed] - Optional header
 * @param {string}    [props.filterLabel] - Optional Label for filter
 * @param {string}    [props.analyticsEventForFilter] - Optional Google Analytics event string to capture filter search
 * @param {object[]}  [props.groupedLinks] - Array of link groups to display
 * @param {string}    [props.groupedLinks.groupName] - Link group heading
 * @param {string}    [props.groupedLinks.groupId] - Unique id for the group
 * @param {object[]}  [props.groupedLinks.links] - Array of links objects
 * @param {string}    [props.groupedLinks.links.text] - Link text
 * @param {string}    [props.groupedLinks.links.url] - Link relative url
 * @param {boolean}   [props.groupedLinks.links.isSecondary] - Optional flag of link level of importance
 * @param {boolean}   [props.groupedLinks.links.analyticsEvent] - Optional Google Analytics event string
 * @param {boolean}   [props.hasFilter] - Optional flag to show a filter on the menu
 * @param {boolean}   [props.showContentDivider] - Optional flag whether group heading have decorative border, defaults to true
 * @returns {ReactElement} <div>
 */
const GroupedNavigationHasSummaryCarousel = ({ className, dangerousHed, groupedLinks, showContentDivider = true, hasFilter = false, analyticsEventForFilter, filterLabel }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'GroupedNavigationHasSummaryCarousel'
        });
    }, []);
    const { formatMessage } = useIntl();
    const linksRef = React.useRef(null);
    const [filterValue, setFilterValue] = useState('');
    const [filterResult, setFilterResult] = useDebounce(groupedLinks, 200);
    let chunks = [];
    const chunksize = 9;
    if (filterResult.length > 0) {
        chunks = [];
        let temp = 0;
        filterResult.forEach((item) => {
            if (!chunks.length || temp >= chunksize) {
                chunks.push([]);
                temp = 0;
            }
            if (item.links)
                temp = temp + item.links.length + 1;
            if (temp < chunksize) {
                chunks[chunks.length - 1].push(item);
            }
            else {
                chunks.push([]);
                chunks[chunks.length - 1].push(item);
                temp = item.links.length;
            }
        });
        if (chunks.length % 2 !== 0) {
            chunks.push([]);
            chunks[chunks.length - 1].push({ groupName: '', links: [] });
        }
    }
    const onFilterChange = (e) => {
        const query = e.target.value;
        setFilterValue(query);
        setFilterResult(() => filter(groupedLinks, query));
    };
    const onFocus = () => {
        if (analyticsEventForFilter) {
            googleAnalytics.emitGoogleTrackingEvent(analyticsEventForFilter);
        }
    };
    if (!groupedLinks || !groupedLinks.length) {
        return null;
    }
    return (React.createElement(GroupedNavigationWrapper, { className: className, hasFilter: hasFilter, "data-testid": "GroupedNavigationWrapper" },
        dangerousHed && (React.createElement(SectionTitle, { dangerousHed: dangerousHed, hasDividerAbove: true, hasDividerBelow: true, textAlign: "center", "data-testid": "section-title" })),
        hasFilter && (React.createElement(GroupedNavigationFilter, null,
            React.createElement(GroupedNavigationFilterContent, null,
                React.createElement(SearchIcon, null),
                React.createElement(GroupedNavigationFilterInput, { placeholder: filterLabel, "aria-label": filterLabel ||
                        formatMessage(translations.filterInputAriaLabelText), name: "filter", type: "text", onChange: onFilterChange, onFocus: onFocus, value: filterValue })))),
        React.createElement(GroupedNavigationContent, { hasFilter: hasFilter },
            React.createElement(GroupedNavigationLinks, { ref: linksRef }, filterResult.length > 0 ? (React.createElement(SummaryCarouselRow, { backgroundColor: "white" },
                React.createElement(Carousel, { contentAlign: "center", controlPosition: "center", controlPlacement: "space-between", hasControls: true, hasModerateSpacing: true, hasNoHorizontalScrollCarousel: false, hasPagination: true, hideHeaderBorder: true, isDotClickable: true, hasIncreasedPadding: true }, chunks.map((arr, index) => {
                    return (React.createElement(Carousel.CarouselItem, { ...CAROUSEL_SLIDE_SIZING, key: `product-bundle-${index}` }, arr.map((group) => {
                        if (!group.links)
                            return null;
                        const linksMappedWithClass = group.links.map((link) => {
                            const linkClassName = link.isSecondary === true
                                ? 'link--secondary'
                                : 'link--primary';
                            return {
                                ...link,
                                className: linkClassName
                            };
                        });
                        const attributes = {};
                        return (React.createElement(GroupedNavigationGroup, { key: group.groupName, className: "grouped-navigation__group", links: linksMappedWithClass, linkClassName: "grouped-navigation__link", heading: group.groupName, showContentDivider: showContentDivider, shouldStyleListItems: true, attributes: attributes }));
                    })));
                })))) : (React.createElement(GroupedNavigationNoResult, null,
                "0 results for",
                ' ',
                React.createElement(GroupedNavigationQuote, null,
                    "\"",
                    filterValue,
                    "\"")))))));
};
const linkShape = PropTypes.shape({
    text: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired,
    isSecondary: PropTypes.bool,
    analyticsEvent: PropTypes.string
});
const groupedLinksShape = PropTypes.arrayOf(PropTypes.shape({
    links: PropTypes.arrayOf(linkShape),
    groupName: PropTypes.string,
    groupId: PropTypes.string
}));
GroupedNavigationHasSummaryCarousel.propTypes = {
    analyticsEventForFilter: PropTypes.string,
    className: PropTypes.string,
    dangerousHed: PropTypes.string,
    filterLabel: PropTypes.string,
    groupedLinks: groupedLinksShape,
    hasFilter: PropTypes.bool,
    showContentDivider: PropTypes.bool
};
GroupedNavigationHasSummaryCarousel.displayName =
    'GroupedNavigationHasSummaryCarousel';
module.exports = asConfiguredComponent(GroupedNavigationHasSummaryCarousel, 'GroupedNavigationHasSummaryCarousel');
module.exports.groupedLinksShape = groupedLinksShape;
//# sourceMappingURL=GroupedNavigationHasSummaryCarousel.js.map

/***/ }),

/***/ 49152:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(96510);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 37316:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BaseText } = __webpack_require__(76955);
const { calculateSpacing, getLinkStyles, getTypographyStyles, getColorStyles, getInputFieldStyles } = __webpack_require__(26865);
const Navigation = __webpack_require__(54790);
const { BREAKPOINTS } = __webpack_require__(96472);
const GroupedNavigationWrapper = styled.div.withConfig({
    displayName: 'GroupedNavigationWrapper'
}) `
  padding-top: ${calculateSpacing(4)};

  ${({ hasFilter }) => hasFilter && `padding-top: ${calculateSpacing(2)};`}

  .navigation__heading {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.title-primary')};
    margin: 0;
    line-height: normal;
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.foundation.expanded-utility.nav-link.default')};
  }

  .navigation__list-item {
    white-space: normal;
  }

  .content-divider {
    display: block;
    margin-bottom: ${calculateSpacing(2)};
    border-bottom-width: ${calculateSpacing(0.5)};
    border-bottom-style: solid;
    ${({ theme }) => getColorStyles(theme, 'border-bottom-color', 'colors.discovery.lead.secondary.accent')};
    padding-top: ${calculateSpacing(1)};
    width: ${calculateSpacing(2)};
  }

  .grouped-navigation__link {
    ${({ theme }) => getLinkStyles(theme, 'colors.foundation.expanded-utility.nav-link.default', 'colors.foundation.expanded-utility.nav-link.hover', 'navigation')}

    &.link--primary {
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-primary')};
    }

    &.link--secondary {
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-secondary')};
    }
  }
`;
const GroupedNavigationFilter = styled.div.withConfig({
    displayName: 'GroupedNavigationFilter'
}) `
  position: static;
  border-width: 0 0 1px;
  border-style: none;
  padding-top: 2rem;
  width: 100%;

  ${({ theme }) => getColorStyles(theme, 'color', 'colors.discovery.body.white.divider')};

  .icon {
    position: absolute;
    top: 10px;
    pointer-events: none;
  }
`;
const GroupedNavigationFilterContent = styled.div.withConfig({
    displayName: 'GroupedNavigationFilterContent'
}) `
  position: relative;
  width: 100%;
  text-align: center;
`;
const GroupedNavigationFilterInput = styled(BaseText).withConfig({
    displayName: 'GroupedNavigationFilterInput'
}) `
  ${({ theme }) => getInputFieldStyles(theme, 'normal', 'background')};
  ${({ theme }) => getInputFieldStyles(theme, 'normal', 'text')};
  border: 1px solid #d8d8d8;
  padding-left: 48px;
  width: 385px;
  height: 50px;
  @media (max-width: ${BREAKPOINTS.lg}) {
    width: 100%;
  }
`;
GroupedNavigationFilterInput.defaultProps = {
    as: 'input',
    typeIdentity: 'typography.definitions.foundation.link-secondary'
};
const GroupedNavigationContent = styled.div.withConfig({
    displayName: 'GroupedNavigationContent'
}) `
  display: flex;
  width: 100%
    ${({ hasFilter }) => hasFilter &&
    `
      padding-top: ${calculateSpacing(4)};
      height: calc(100% - 60px);
      width: 100%

  `};
  height: 100%;
`;
const GroupedNavigationLinks = styled.div.withConfig({
    displayName: 'GroupedNavigationLinks'
}) `
  flex: 1;
  padding-top: 2rem;
  width: 100%;
  height: 100%;
  overflow-y: auto;

  && li {
    padding-bottom: ${calculateSpacing(2)};

    &.link--primary {
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-primary')};
    }

    &.link--secondary {
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-secondary')};
    }
  }
`;
const GroupedNavigationNoResult = styled(BaseText).withConfig({
    displayName: 'GroupedNavigationNoResult'
}) `
  margin: 30px 10px;
  text-align: center;
  text-transform: lowercase;
  color: rgb(0, 0, 0);
`;
GroupedNavigationNoResult.defaultProps = {
    as: 'div',
    typeIdentity: 'typography.definitions.foundation.title-primary'
};
const GroupedNavigationQuote = styled(BaseText).withConfig({
    displayName: 'GroupedNavigationQuote'
}) `
  color: rgb(0, 0, 0);
`;
GroupedNavigationQuote.defaultProps = {
    as: 'span',
    typeIdentity: 'typography.definitions.foundation.title-primary'
};
const GroupedNavigationGroup = styled(Navigation.Vertical).withConfig({
    displayName: 'GroupedNavigationGroup'
}) `
  padding-right: 1rem;
`;
const GroupedNavigationIndex = styled.div.withConfig({
    displayName: 'GroupedNavigationIndex'
}) `
  position: static;
  padding-right: ${calculateSpacing(1)};
  overflow-y: auto;
`;
module.exports = {
    GroupedNavigationWrapper,
    GroupedNavigationFilter,
    GroupedNavigationFilterContent,
    GroupedNavigationFilterInput,
    GroupedNavigationContent,
    GroupedNavigationLinks,
    GroupedNavigationGroup,
    GroupedNavigationIndex,
    GroupedNavigationNoResult,
    GroupedNavigationQuote
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 31950:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    filterInputAriaLabelText: {
        id: 'GroupedNavigationHasSummaryCarousel.FilterInputAriaLabel',
        defaultMessage: 'Filter links',
        description: 'Grouped Navigation Filter component aria label text',
        isConfigurable: true
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 36537:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.useDebounce = exports.filter = void 0;
const { useState, useCallback } = __webpack_require__(96540);
const debounce = __webpack_require__(38221);
const filter = (source, query) => {
    if (!query?.trim())
        return source;
    const formatText = (word) => word
        .toString()
        .toLowerCase()
        // remove any diacritics
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '')
        // remove any non alphanumeric characters
        .replace(/[^a-z0-9\s]/gi, '');
    return source
        .map((group) => {
        return {
            ...group,
            links: group.links?.filter((link) => {
                // check if our query contains a space
                if (/(\s|')/.test(query)) {
                    return formatText(link.text).includes(formatText(query));
                }
                // check if link text is an acromyn
                if (link.text.match(/([a-zA-Z]\.){2,}/)) {
                    return link.text
                        .split(' ')
                        .filter((word) => formatText(word).startsWith(formatText(query)))
                        .length;
                }
                return link.text
                    .split(/([ \-'’.]+)/)
                    .filter((word) => formatText(word).startsWith(formatText(query)))
                    .length;
            })
        };
    })
        .filter((group) => group.links?.length);
};
exports.filter = filter;
const useDebounce = (obj, wait) => {
    const [state, setState] = useState(obj);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    const debounceFunc = useCallback(debounce((prop) => {
        setState(prop);
    }, wait), []);
    const setDebouncedState = (val) => {
        debounceFunc(val);
    };
    return [state, setDebouncedState];
};
exports.useDebounce = useDebounce;
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 78627:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { AtoZIndexWrapper, AtoZIndexList, AtoZIndexLink, AtoZIndexText } = __webpack_require__(35089);
const LINK_CONFIG = [
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'G',
    'H',
    'I',
    'J',
    'K',
    'L',
    'M',
    'N',
    'O',
    'P',
    'Q',
    'R',
    'S',
    'T',
    'U',
    'V',
    'W',
    'X',
    'Y',
    'Z',
    '#'
];
const easeInOutQuad = function (time, startPosition, change, duration) {
    let currentTime = time;
    currentTime /= duration / 2;
    if (currentTime < 1)
        return (change / 2) * currentTime * currentTime + startPosition;
    currentTime--;
    return (-change / 2) * (currentTime * (currentTime - 2) - 1) + startPosition;
};
/**
 * AtoZIndex component
 *
 * @param {object} props - React props
 * @param {object} [props.linksRef] - Target element for scrolling
 * @param {Array} [props.links] - Array of links with heading
 * @param {string} [props.links.groupName] - Link group heading
 * @param {string} [props.links.groupId] - Link group id
 * @param {string} [props.navId] - Unique id for the navigation group
 *
 * @returns {ReactElement} <div>
 */
const AtoZIndex = ({ links, linksRef, navId }) => {
    if (!links || !links.length) {
        return null;
    }
    const scrollToLetter = (e) => {
        e.preventDefault();
        const raf = window.requestAnimationFrame || ((func) => window.setTimeout(func, 20));
        const target = document.getElementById(e.target.hash.replace('#', ''));
        if (!target) {
            return;
        }
        const { offsetTop: targetOffsetTop } = target;
        const { offsetTop: linksOffetTop, scrollTop: linksTop } = linksRef.current;
        const scrollToPosition = targetOffsetTop - linksOffetTop;
        const change = scrollToPosition - linksTop;
        let currentTime = 0;
        const increment = 20;
        const duration = 600;
        const animateScroll = () => {
            currentTime += increment;
            const positionToScrollTo = easeInOutQuad(currentTime, linksTop, change, duration);
            linksRef.current.scrollTop = positionToScrollTo;
            if (currentTime < duration) {
                raf(animateScroll);
            }
        };
        animateScroll();
    };
    return (React.createElement(AtoZIndexWrapper, { "data-testid": "AtoZIndexWrapper" },
        React.createElement(AtoZIndexList, null, LINK_CONFIG.map((linkTitle) => {
            const groupToLinkTo = links.find((link) => link.groupName === linkTitle);
            return groupToLinkTo ? (React.createElement("li", { key: linkTitle },
                React.createElement(AtoZIndexLink, { "data-testid": "AtoZIndexLink", href: `#${groupToLinkTo.groupName === '#'
                        ? `other-${navId}`
                        : `${groupToLinkTo.groupName.toLowerCase()}-${navId}`}`, onClick: scrollToLetter }, linkTitle))) : (React.createElement(AtoZIndexText, { key: linkTitle }, linkTitle));
        }))));
};
AtoZIndex.propTypes = {
    links: PropTypes.arrayOf(PropTypes.shape({
        groupName: PropTypes.string.isRequired
    })),
    linksRef: PropTypes.object,
    navId: PropTypes.string
};
module.exports = AtoZIndex;
//# sourceMappingURL=AtoZIndex.js.map

/***/ }),

/***/ 41155:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const { useState } = __webpack_require__(96540);
const uniqueid = __webpack_require__(97200);
const googleAnalytics = __webpack_require__(37402);
const SearchIcon = __webpack_require__(90506);
const { asConfiguredComponent } = __webpack_require__(12892);
const { filter, useDebounce } = __webpack_require__(25642);
const AtoZIndex = __webpack_require__(78627);
const { TrackComponentChannel } = __webpack_require__(78788);
const { GroupedNavigationWrapper, GroupedNavigationFilter, GroupedNavigationFilterContent, GroupedNavigationFilterInput, GroupedNavigationContent, GroupedNavigationLinks, GroupedNavigationGroup, GroupedNavigationIndex } = __webpack_require__(35089);
const translations = (__webpack_require__(21531)/* ["default"] */ .A);
/**
 * GroupedNavigation component
 *
 * @param {object}    props - React props
 * @param {string}    [props.className] - Optional top-level class to add
 * @param {string}    [props.filterLabel] - Optional Label for filter
 * @param {string}    [props.analyticsEventForFilter] - Optional Google Analytics event string to capture filter search
 * @param {object[]}  [props.groupedLinks] - Array of link groups to display
 * @param {string}    [props.groupedLinks.groupName] - Link group heading
 * @param {string}    [props.groupedLinks.groupId] - Unique id for the group
 * @param {object[]}  [props.groupedLinks.links] - Array of links objects
 * @param {string}    [props.groupedLinks.links.text] - Link text
 * @param {string}    [props.groupedLinks.links.url] - Link relative url
 * @param {boolean}   [props.groupedLinks.links.isSecondary] - Optional flag of link level of importance
 * @param {boolean}   [props.groupedLinks.links.analyticsEvent] - Optional Google Analytics event string
 * @param {boolean}   [props.hasAtoZIndex] - Optional flag to show an A to Z index on the menu
 * @param {boolean}   [props.hasFilter] - Optional flag to show a filter on the menu
 * @param {boolean}   [props.hasSpacing] - Optional flag for margin between the search and index
 * @param {boolean}   [props.showContentDivider] - Optional flag whether group heading have decorative border, defaults to true
 * @returns {ReactElement} <div>
 */
const GroupedNavigation = ({ className, groupedLinks, showContentDivider = true, hasAtoZIndex = false, hasFilter = false, hasSpacing = false, analyticsEventForFilter, filterLabel }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'GroupedNavigation'
        });
    }, []);
    const { formatMessage } = useIntl();
    const linksRef = React.useRef(null);
    const navId = uniqueid();
    const [filterValue, setFilterValue] = useState('');
    const [filterResult, setFilterResult] = useDebounce(groupedLinks, 200);
    const onFilterChange = (e) => {
        const query = e.target.value;
        setFilterValue(query);
        setFilterResult(() => filter(groupedLinks, query));
    };
    const onFocus = () => {
        if (analyticsEventForFilter) {
            googleAnalytics.emitGoogleTrackingEvent(analyticsEventForFilter);
        }
    };
    if (!groupedLinks || !groupedLinks.length) {
        return null;
    }
    return (React.createElement(GroupedNavigationWrapper, { className: className, hasFilter: hasFilter, "data-testid": "GroupedNavigationWrapper" },
        hasFilter && (React.createElement(GroupedNavigationFilter, null,
            React.createElement(GroupedNavigationFilterContent, null,
                React.createElement(GroupedNavigationFilterInput, { placeholder: filterLabel, "aria-label": filterLabel ||
                        formatMessage(translations.filterInputAriaLabelText), name: "filter", type: "text", onChange: onFilterChange, onFocus: onFocus, value: filterValue }),
                React.createElement(SearchIcon, null)))),
        React.createElement(GroupedNavigationContent, { hasFilter: hasFilter, hasSpacing: hasSpacing },
            React.createElement(GroupedNavigationLinks, { ref: linksRef }, filterResult.map((group) => {
                if (!group.links)
                    return null;
                const linksMappedWithClass = group.links.map((link) => {
                    const linkClassName = link.isSecondary === true ? 'link--secondary' : 'link--primary';
                    return {
                        ...link,
                        className: linkClassName
                    };
                });
                const attributes = {};
                if (hasAtoZIndex) {
                    attributes.id =
                        group.groupName === '#'
                            ? `other-${navId}`
                            : `${group.groupName.toLowerCase()}-${navId}`;
                }
                return (React.createElement(GroupedNavigationGroup, { key: group.groupName, className: "grouped-navigation__group", links: linksMappedWithClass, linkClassName: "grouped-navigation__link", heading: group.groupName, showContentDivider: showContentDivider, shouldStyleListItems: true, attributes: attributes }));
            })),
            hasAtoZIndex && (React.createElement(GroupedNavigationIndex, { className: "grouped-navigation__index" },
                React.createElement(AtoZIndex, { links: groupedLinks, linksRef: linksRef, navId: navId }))))));
};
const linkShape = PropTypes.shape({
    text: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired,
    isSecondary: PropTypes.bool,
    analyticsEvent: PropTypes.string
});
const groupedLinksShape = PropTypes.arrayOf(PropTypes.shape({
    links: PropTypes.arrayOf(linkShape),
    groupName: PropTypes.string,
    groupId: PropTypes.string
}));
GroupedNavigation.propTypes = {
    analyticsEventForFilter: PropTypes.string,
    className: PropTypes.string,
    filterLabel: PropTypes.string,
    groupedLinks: groupedLinksShape,
    hasAtoZIndex: PropTypes.bool,
    hasFilter: PropTypes.bool,
    hasSpacing: PropTypes.bool,
    showContentDivider: PropTypes.bool
};
GroupedNavigation.displayName = 'GroupedNavigation';
module.exports = asConfiguredComponent(GroupedNavigation, 'GroupedNavigation');
module.exports.groupedLinksShape = groupedLinksShape;
//# sourceMappingURL=GroupedNavigation.js.map

/***/ }),

/***/ 26223:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(41155);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 35089:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BaseLink, BaseText } = __webpack_require__(76955);
const { calculateSpacing, getLinkStyles, getTypographyStyles, getColorStyles, getInputFieldStyles } = __webpack_require__(26865);
const Navigation = __webpack_require__(54790);
const GroupedNavigationWrapper = styled.div.withConfig({
    displayName: 'GroupedNavigationWrapper'
}) `
  padding-top: ${calculateSpacing(4)};
  height: 100%;

  ${({ hasFilter }) => hasFilter && `padding-top: ${calculateSpacing(2)};`}

  .navigation__heading {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.title-primary')};
    margin: 0;
    line-height: normal;
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.foundation.expanded-utility.nav-link.default')};
  }

  .navigation__list-item {
    white-space: normal;
  }

  .content-divider {
    display: block;
    margin-bottom: ${calculateSpacing(2)};
    border-bottom-width: ${calculateSpacing(0.5)};
    border-bottom-style: solid;
    ${({ theme }) => getColorStyles(theme, 'border-bottom-color', 'colors.discovery.lead.secondary.accent')};
    padding-top: ${calculateSpacing(1)};
    width: ${calculateSpacing(2)};
  }

  .grouped-navigation__link {
    ${({ theme }) => getLinkStyles(theme, 'colors.foundation.expanded-utility.nav-link.default', 'colors.foundation.expanded-utility.nav-link.hover', 'navigation')}

    &.link--primary {
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-primary')};
    }

    &.link--secondary {
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-secondary')};
    }
  }
`;
const GroupedNavigationFilter = styled.div.withConfig({
    displayName: 'GroupedNavigationFilter'
}) `
  position: static;
  border-width: 0 0 1px;
  border-style: solid;
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.discovery.body.white.divider')};
  width: calc(100% - 1.25rem);
  height: 60px;

  .icon {
    position: absolute;
    top: 10px;
    right: 0;
    pointer-events: none;
  }
`;
const GroupedNavigationFilterContent = styled.div.withConfig({
    displayName: 'GroupedNavigationFilterContent'
}) `
  position: relative;
`;
const GroupedNavigationFilterInput = styled(BaseText).withConfig({
    displayName: 'GroupedNavigationFilterInput'
}) `
  ${({ theme }) => getInputFieldStyles(theme, 'normal', 'background')};
  ${({ theme }) => getInputFieldStyles(theme, 'normal', 'text')};
  border: none;
  width: 100%;
  height: ${calculateSpacing(6.2)};
`;
GroupedNavigationFilterInput.defaultProps = {
    as: 'input',
    typeIdentity: 'typography.definitions.foundation.link-secondary'
};
const GroupedNavigationContent = styled.div.withConfig({
    displayName: 'GroupedNavigationContent'
}) `
  display: flex;
  height: 100%
    ${({ hasSpacing }) => hasSpacing &&
    `
       margin-top: ${calculateSpacing(1.5)};
    `};
  ${({ hasFilter }) => hasFilter &&
    `
      padding-top: ${calculateSpacing(4)};
      height: calc(100% - 60px);
  `};
`;
const GroupedNavigationLinks = styled.div.withConfig({
    displayName: 'GroupedNavigationLinks'
}) `
  flex: 1;
  height: 100%;
  overflow-y: auto;
  max-height: 100vh;

  && li {
    padding-bottom: ${calculateSpacing(2)};

    &.link--primary {
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-primary')};
    }

    &.link--secondary {
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-secondary')};
    }
  }
`;
const GroupedNavigationGroup = styled(Navigation.Vertical).withConfig({
    displayName: 'GroupedNavigationGroup'
}) `
  padding-bottom: ${calculateSpacing(5)};
`;
const GroupedNavigationIndex = styled.div.withConfig({
    displayName: 'GroupedNavigationIndex'
}) `
  position: static;
  padding-right: ${calculateSpacing(1)};
  overflow-y: auto;
`;
const AtoZIndexWrapper = styled(BaseText).withConfig({
    displayName: 'AtoZIndexWrapper'
}) `
  width: ${calculateSpacing(3)};
  text-align: center;
`;
AtoZIndexWrapper.defaultProps = {
    as: 'nav'
};
const AtoZIndexList = styled(BaseText).withConfig({
    displayName: 'AtoZIndexList'
}) `
  margin-top: 0;
  padding: 0;
  list-style: none;
`;
AtoZIndexList.defaultProps = {
    as: 'ul'
};
const AtoZIndexLink = styled(BaseLink).withConfig({
    displayName: 'AtoZIndexLink'
}) `
  display: block;
  background: none;
  padding-top: ${calculateSpacing(0.25)};
  padding-bottom: ${calculateSpacing(0.25)};
  width: 100%;
`;
AtoZIndexLink.defaultProps = {
    colorSecondaryLinkToken: 'colors.foundation.expanded-utility.nav-link.hover',
    colorStaticLinkToken: 'colors.foundation.expanded-utility.nav-link.default',
    colorToken: 'colors.foundation.expanded-utility.nav-link.default',
    linkStyle: 'navigation',
    typeToken: 'typography.definitions.foundation.link-secondary'
};
const AtoZIndexText = styled(BaseText).withConfig({
    displayName: 'AtoZIndexText'
}) `
  margin: 0;
  padding-top: ${calculateSpacing(0.25)};
  padding-bottom: ${calculateSpacing(0.25)};
`;
AtoZIndexText.defaultProps = {
    as: 'li',
    colorToken: 'colors.foundation.expanded-utility.nav-link.default',
    typeIdentity: 'typography.definitions.foundation.link-secondary'
};
module.exports = {
    GroupedNavigationWrapper,
    GroupedNavigationFilter,
    GroupedNavigationFilterContent,
    GroupedNavigationFilterInput,
    GroupedNavigationContent,
    GroupedNavigationLinks,
    GroupedNavigationGroup,
    GroupedNavigationIndex,
    AtoZIndexWrapper,
    AtoZIndexList,
    AtoZIndexLink,
    AtoZIndexText
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 21531:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    filterInputAriaLabelText: {
        id: 'GroupedNavigation.FilterInputAriaLabel',
        defaultMessage: 'Filter links',
        description: 'Grouped Navigation Filter component aria label text',
        isConfigurable: true
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 25642:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.useDebounce = exports.filter = void 0;
const { useState, useCallback } = __webpack_require__(96540);
const debounce = __webpack_require__(38221);
const filter = (source, query) => {
    if (!query?.trim())
        return source;
    const formatText = (word) => word
        .toString()
        .toLowerCase()
        // remove any diacritics
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '')
        // remove any non alphanumeric characters
        .replace(/[^a-z0-9\s]/gi, '');
    return source
        .map((group) => {
        return {
            ...group,
            links: group.links?.filter((link) => {
                // check if our query contains a space
                if (/(\s|')/.test(query)) {
                    return formatText(link.text).includes(formatText(query));
                }
                // check if link text is an acromyn
                if (link.text.match(/([a-zA-Z]\.){2,}/)) {
                    return link.text
                        .split(' ')
                        .filter((word) => formatText(word).startsWith(formatText(query)))
                        .length;
                }
                return link.text
                    .split(/([ \-'’.]+)/)
                    .filter((word) => formatText(word).startsWith(formatText(query)))
                    .length;
            })
        };
    })
        .filter((group) => group.links?.length);
};
exports.filter = filter;
const useDebounce = (obj, wait) => {
    const [state, setState] = useState(obj);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    const debounceFunc = useCallback(debounce((prop) => {
        setState(prop);
    }, wait), []);
    const setDebouncedState = (val) => {
        debounceFunc(val);
    };
    return [state, setDebouncedState];
};
exports.useDebounce = useDebounce;
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 65201:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.IdentityDropdown = exports.IDENTITY_DROPDOWN_ID = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const styles_1 = __webpack_require__(4896);
const types_1 = __webpack_require__(76066);
const IdentityTextClickables_1 = __webpack_require__(89874);
const triggerable_container_1 = __webpack_require__(5026);
exports.IDENTITY_DROPDOWN_ID = 'identityDropdown';
function IdentityDropdown({ identityClickables }) {
    const { position, isOpen } = (0, react_1.useContext)(triggerable_container_1.TriggerableContainerContext);
    return (react_1.default.createElement(styles_1.IdentityDropdownGrid, { blockStart: position.bottom, isOpen: isOpen, "aria-hidden": !isOpen, "data-testid": "identity-dropdown" },
        react_1.default.createElement(styles_1.IdentityDropdownContentWrapper, { isOpen: isOpen },
            react_1.default.createElement(IdentityTextClickables_1.IdentityTextClickables, { identityClickables: identityClickables, designSettings: {
                    type: types_1.ClickableType.SECONDARY_TEXT,
                    scalable: true
                } }))));
}
exports.IdentityDropdown = IdentityDropdown;
//# sourceMappingURL=IdentityDropdown.js.map

/***/ }),

/***/ 25335:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.IdentityDropdownStyleGenerator = void 0;
const AbstractStyleGenerator_1 = __webpack_require__(17054);
class IdentityDropdownStyleGenerator extends AbstractStyleGenerator_1.AbstractStyleGenerator {
    getStyleForBreakpoint(breakpoint) {
        switch (breakpoint) {
            case AbstractStyleGenerator_1.Breakpoints.SM:
            case AbstractStyleGenerator_1.Breakpoints.MD:
            case AbstractStyleGenerator_1.Breakpoints.LG:
                return [
                    ['max-width', '100%'],
                    ['width', `100%`],
                    ['grid-template-columns', 'none'],
                    ['grid-column', 'none']
                ];
            case AbstractStyleGenerator_1.Breakpoints.XL:
                return [
                    ['max-width', '50%'],
                    ['width', '50%'],
                    ['grid-template-columns', 'none'],
                    ['grid-column', 'none']
                ];
            case AbstractStyleGenerator_1.Breakpoints.XXL:
            case AbstractStyleGenerator_1.Breakpoints.XXXL:
                return [
                    ['max-width', '640px'],
                    ['width', '100%'],
                    ['grid-template-columns', 'subgrid'],
                    ['grid-column', '-4 / -1']
                ];
            default:
                return [
                    ['max-width', '100%'],
                    ['width', `100%`],
                    ['grid-template-columns', 'none'],
                    ['grid-column', 'none']
                ];
        }
    }
}
exports.IdentityDropdownStyleGenerator = IdentityDropdownStyleGenerator;
//# sourceMappingURL=IdentityDropdownStyleGenerator.js.map

/***/ }),

/***/ 89874:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.IdentityTextClickables = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const types_1 = __webpack_require__(76066);
const styles_1 = __webpack_require__(4896);
const utils_1 = __webpack_require__(66593);
const Clickable_1 = __importDefault(__webpack_require__(14694));
function IdentityTextClickables({ identityClickables, designSettings }) {
    return (react_1.default.createElement(styles_1.IdentityContent, null, identityClickables.map((clickable) => {
        return (react_1.default.createElement(Clickable_1.default, { component: types_1.Component.TEXT_CLICKABLE, key: clickable.text, states: {
                default: {
                    label: clickable.text
                }
            }, action: {
                type: types_1.ActionType.LINK,
                url: clickable.url,
                rel: 'nofollow',
                target: types_1.TargetType.SELF
            }, "aria-label": clickable.text, designSettings: designSettings, trackingData: {
                schema: utils_1.TrackingSchemaType.USER_ACCOUNT_EVENT
            } }));
    })));
}
exports.IdentityTextClickables = IdentityTextClickables;
//# sourceMappingURL=IdentityTextClickables.js.map

/***/ }),

/***/ 49189:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.IdentityUnits = exports.IdentityUnitsComponent = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const IdentityTextClickables_1 = __webpack_require__(89874);
const types_1 = __webpack_require__(76066);
const TextClickable_1 = __webpack_require__(98360);
const IdentityDropdown_1 = __webpack_require__(65201);
const connector_1 = __importDefault(__webpack_require__(34967));
const hooks_1 = __webpack_require__(22916);
function IdentityUnitsComponent({ type, user, accountProps }) {
    const identityClickables = (0, hooks_1.useIdentityClickables)(user, accountProps);
    if (type === types_1.IdentityUnitType.DROPDOWN_TRIGGER) {
        return (react_1.default.createElement(TextClickable_1.TextClickable, { component: types_1.Component.TEXT_CLICKABLE, action: { type: types_1.ActionType.TRIGGER, trigger: IdentityDropdown_1.IDENTITY_DROPDOWN_ID }, states: { default: { stateIcon: ['Account', 'thinner'] } }, status: types_1.ClickableStatus.DEFAULT, designSettings: { type: types_1.ClickableType.PRIMARY_TEXT } }));
    }
    if (type === types_1.IdentityUnitType.DROPDOWN) {
        return react_1.default.createElement(IdentityDropdown_1.IdentityDropdown, { identityClickables: identityClickables });
    }
    if (type === types_1.IdentityUnitType.DRAWER_LINKS) {
        return (react_1.default.createElement(IdentityTextClickables_1.IdentityTextClickables, { identityClickables: identityClickables, designSettings: { type: types_1.ClickableType.TERTIARY_TEXT, scalable: true } }));
    }
    return null;
}
exports.IdentityUnitsComponent = IdentityUnitsComponent;
exports.IdentityUnits = (0, connector_1.default)(IdentityUnitsComponent, {
    keysToPluck: ['user', 'accountProps']
});
//# sourceMappingURL=IdentityUnits.js.map

/***/ }),

/***/ 76809:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.mockAccountProps = exports.mockAuthenticatedUser = exports.mockNotAuthenticatedUser = void 0;
exports.mockNotAuthenticatedUser = {
    amguuid: '',
    email: '',
    hasUserAuthCheck: '1',
    isAuthResolved: true,
    isAuthenticated: false,
    xid: '',
    geo: {
        countryCode: 'DE'
    },
    bucketNumber: 70,
    isEntitled: false
};
exports.mockAuthenticatedUser = {
    amguuid: 'a13aa220-3bce-4770-9d0c',
    email: 'x@condenast.de',
    hasUserAuthCheck: '',
    isAuthResolved: false,
    isAuthenticated: true,
    xid: '',
    geo: {
        countryCode: ''
    },
    bucketNumber: 100
};
exports.mockAccountProps = {
    signInLink: '/auth/initiate?redirectURL=%2F&source=VERSO_NAVIGATION',
    accountLinks: [
        {
            attributes: {
                name: '/my-account'
            },
            index: 0,
            text: 'My Account',
            url: '/account/profile'
        },
        {
            attributes: {
                name: '/saved-stories'
            },
            index: 1,
            text: ' Saved Stories',
            url: '/account/saved'
        },
        {
            attributes: {
                name: '/sign-out'
            },
            index: 2,
            nodeType: 'signOut',
            text: ' Sign Out',
            url: '/auth/end'
        }
    ],
    redirectURL: '%2F'
};
//# sourceMappingURL=fixture.js.map

/***/ }),

/***/ 22916:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.useIdentityClickables = void 0;
const react_intl_1 = __webpack_require__(46984);
const translations_1 = __importDefault(__webpack_require__(99554));
function useIdentityClickables(user, accountProps) {
    // eslint-disable-next-line @typescript-eslint/unbound-method
    const { formatMessage } = (0, react_intl_1.useIntl)();
    const isUserAuthenticated = user.isAuthenticated;
    if (!isUserAuthenticated) {
        return [
            {
                text: formatMessage(translations_1.default.signIn),
                url: accountProps.signInLink
            }
        ];
    }
    const signOutClickables = accountProps.accountLinks.map((link) => ({
        text: link.text,
        url: link.url
    }));
    return signOutClickables;
}
exports.useIdentityClickables = useIdentityClickables;
//# sourceMappingURL=hooks.js.map

/***/ }),

/***/ 19460:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.mockAccountProps = exports.mockAuthenticatedUser = exports.IdentityUnits = void 0;
var IdentityUnits_1 = __webpack_require__(49189);
Object.defineProperty(exports, "IdentityUnits", ({ enumerable: true, get: function () { return IdentityUnits_1.IdentityUnits; } }));
var fixture_1 = __webpack_require__(76809);
Object.defineProperty(exports, "mockAuthenticatedUser", ({ enumerable: true, get: function () { return fixture_1.mockAuthenticatedUser; } }));
Object.defineProperty(exports, "mockAccountProps", ({ enumerable: true, get: function () { return fixture_1.mockAccountProps; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 4896:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.IdentityContent = exports.IdentityDropdownContentWrapper = exports.IdentityDropdownGrid = void 0;
const styled_components_1 = __importDefault(__webpack_require__(92168));
const constants_1 = __webpack_require__(96472);
const IdentityDropdownStyleGenerator_1 = __webpack_require__(25335);
const AnimationStyleGenerator_1 = __webpack_require__(83158);
const design_1 = __webpack_require__(75163);
exports.IdentityDropdownGrid = styled_components_1.default.div.withConfig({
    displayName: 'IdentityDropdownGrid'
}) `
  position: fixed;
  width: 100%;
  height: ${({ blockStart }) => `calc(100% - ${blockStart}px)`};
  inset-block-start: ${({ blockStart }) => blockStart}px;
  inset-inline-start: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  z-index: ${constants_1.ZINDEX_MAP.oneNav + 1};
  visibility: hidden;
`;
exports.IdentityDropdownContentWrapper = styled_components_1.default.div.withConfig({
    displayName: 'IdentityDropdownContentWrapper'
}) `
  cursor: default;
  display: grid;
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  background-color: var(${design_1.Design.Color.Surface});

  ${new IdentityDropdownStyleGenerator_1.IdentityDropdownStyleGenerator().generateStyleForBreakpoints()};

  visibility: ${({ isOpen }) => (isOpen ? 'visible' : 'hidden')};

  @media (prefers-reduced-motion: no-preference) {
    transform: ${({ isOpen }) => (isOpen ? 'scaleY(1)' : 'scaleY(0)')};
    transform-origin: 0 0;
  }
  @media (prefers-reduced-motion: reduce) {
    opacity: ${({ isOpen }) => (isOpen ? '1' : '0')};
  }

  ${({ isOpen }) => AnimationStyleGenerator_1.AnimationStyleGenerator.generateTransitionStyle({
    isOpen,
    enter: {
        animatedProperties: ['transform', 'visibility'],
        easingFunctions: ['0.65,0,0.35,1', '0,0,0,0'],
        durations: ['350ms', '350ms']
    },
    exit: {
        animatedProperties: ['transform', 'visibility'],
        easingFunctions: ['0.65,0,0.35,1', '0,0,0,0'],
        durations: ['350ms', '350ms']
    },
    reducedMotionEnter: {
        animatedProperties: ['opacity', 'visibility'],
        easingFunctions: ['0.37,0,0.63,1', '0,0,0,0'],
        durations: ['350ms', '350ms']
    },
    reducedMotionExit: {
        animatedProperties: ['opacity', 'visibility'],
        easingFunctions: ['0.37,0,0.63,1', '0,0,0,0'],
        durations: ['350ms', '350ms']
    }
})}
`;
exports.IdentityContent = styled_components_1.default.div.withConfig({
    displayName: 'IdentityContent'
}) `
  width: 100%;
  display: flex;
  flex-direction: column;
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 99554:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
const react_intl_1 = __webpack_require__(46984);
exports["default"] = (0, react_intl_1.defineMessages)({
    signIn: {
        id: 'IdentityUnits.SignIn',
        defaultMessage: 'Sign In',
        description: 'Label for sign in link'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 77509:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState, useEffect, useContext, useMemo } = React;
const { useIntl } = __webpack_require__(46984);
const { ConsentContext } = __webpack_require__(85438);
const Button = __webpack_require__(73730);
const Caption = __webpack_require__(12046);
const ConsentBanner = __webpack_require__(83561);
const Headphone = __webpack_require__(43657);
const { getConsentLevel, getSandboxAttributes, getUrlDomain, isSameDomain } = __webpack_require__(35833);
const translations = (__webpack_require__(87566)/* ["default"] */ .A);
const IframeEmbedContent = __webpack_require__(152);
const { TrackComponentChannel } = __webpack_require__(78788);
const { IframeEmbedWrapper, IframeEmbedContainer, IframeEmbedAspectRatioWrapper, IframeAudioTagWrapper, IframeDangerousDek, IframeAudioIconBox } = __webpack_require__(34980);
/**
 * IframeEmbed component
 *
 * @param {object} props - React props
 * @param {object} [props.aspectRatio] - Optional aspectRatio to dynamically size the component.
 * @param {object} [props.attributes] - Optional attributes to add top level i.e. aria-*, role, etc.
 * @param {string} [props.audioTagIconTitle] - Optional title for the headphone icon of the floating audio tag
 * @param {Array} [props.audioTagIncludeUrls] - Optional attributes to control the audio tag visibility based on the url
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.dangerousCaption] - Optional caption html content for
 * @param {string} props.dangerousDek - Optional text for the audio variation of the element
 * @param {string} [props.sandbox] - Optional definition of sandbox permissions (default: 'allow-scripts allow-same-origin')
 * @param {boolean} [props.shouldAllowFullScreen] - Optional flag to allow the Iframe to open in full screen.
 * @param {boolean} [props.shouldValidateAudmPlayer] - Optional attributes to show the audio tag if the iframe content has the Audm player.
 * @param {string} props.title - Required title form Iframe element
 * @param {string} props.url - Required url target for Iframe content
 * @param {string} [props.height] - Optional height target for Iframe content. (default: 766)
 * @param {string} [props.mobileHeight] - Optional height  target for Iframe content mobile only.
 * @param {string} [props.width] - Optional width target for Iframe content. (default: 766)
 * @param {Array} [props.options] - Optional array for rendering syndication names & urls.
 * @param {boolean} [props.hasOptions] - Optional field to changes the styles
 * @param {object} [props.variations] - Optional variations properties used in rendering the component.
 * @param {string} [props.variations.contentAlign] - How to align the Iframe and its options within the surrounding container.
 * @param {string} [props.variations.captionAlign] - How to align the caption html content.
 * @param {string} [props.variations.contentAlign] - How to align the iframe and its options within the surrounding container.
 * @param {string} [props.variations.hasAudioTag] - Optional flag to enable the audio tag elements.
 *
 * @returns {ReactElement} <figure>
 */
// eslint-disable-next-line complexity
const IframeEmbed = ({ attributes, aspectRatio, audioTagIconTitle, audioTagIncludeUrls = [], dangerousDek, className, dangerousCaption, sandbox = 'allow-scripts', shouldAllowFullScreen = false, title, url, height = '766', mobileHeight = '', width = '766', options, hasOptions = false, variations = {
    contentAlign: 'center',
    hasAudioTag: false
}, shouldValidateAudmPlayer = false, variationName }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'IframeEmbed',
            variation: variationName
        });
    }, [variationName]);
    const consentContext = useContext(ConsentContext);
    const { formatMessage } = useIntl();
    const urlDomain = getUrlDomain(url);
    const allowFullScreen = shouldAllowFullScreen || isSameDomain(urlDomain, 'wirewax.com');
    const iframeHeight = height || '300px';
    const iframeWidth = width || undefined;
    const sandboxAttributes = getSandboxAttributes(url, sandbox);
    const consentLevel = getConsentLevel(url);
    const hasConsent = consentLevel === false ? true : consentContext[consentLevel];
    const buttonFactory = (opts) => {
        return opts.reduce((acc, { name, url: uri }) => {
            if (name && uri) {
                const openUrl = () => window.open(uri, '_blank');
                acc.push(React.createElement(Button, { ariaLabel: formatMessage(translations.ariaLabel, { name }), key: name, label: name, onClickHandler: openUrl, role: "link" }));
            }
            return acc;
        }, []);
    };
    const validateAudmPlayer = variations?.hasAudioTag &&
        url.includes('audm.') &&
        shouldValidateAudmPlayer;
    const [showAudioTag, setShowAudioTag] = useState(!validateAudmPlayer);
    const numericalAspectRatio = useMemo(() => {
        if (aspectRatio != null) {
            const [width, height] = aspectRatio
                .split(':')
                .map((ratio) => parseInt(ratio, 10));
            return height / width;
        }
        return null;
    }, [aspectRatio]);
    useEffect(() => {
        const handleAudmPlayer = (event) => {
            const { origin, data } = event;
            if (origin.includes('audm.')) {
                const { context, event: playerEvent } = JSON.parse(data);
                if (context === 'player.js' && playerEvent === 'ready') {
                    setShowAudioTag(true);
                }
            }
        };
        validateAudmPlayer && window.addEventListener('message', handleAudmPlayer);
        return () => {
            window.removeEventListener('message', handleAudmPlayer);
        };
    }, [validateAudmPlayer]);
    return (React.createElement(IframeEmbedWrapper, { ...attributes, "data-testid": "IframeEmbed", className: classnames('iframe-embed', className), hasOptions: hasOptions, contentAlign: variations.contentAlign },
        React.createElement(IframeEmbedContainer, { "data-testid": "IframeEmbedContainer" },
            hasConsent ? (React.createElement(React.Fragment, null,
                variations?.hasAudioTag &&
                    audioTagIncludeUrls.some((e) => url.includes(e)) &&
                    showAudioTag && (React.createElement(IframeAudioTagWrapper, null,
                    React.createElement(IframeAudioIconBox, null,
                        React.createElement(Headphone, { headphoneIconTitle: audioTagIconTitle })),
                    React.createElement(IframeDangerousDek, { dangerouslySetInnerHTML: {
                            __html: dangerousDek || formatMessage(translations.dangerousDek)
                        } }))),
                React.createElement(IframeEmbedAspectRatioWrapper, { aspectRatio: numericalAspectRatio },
                    React.createElement(IframeEmbedContent, { "data-testid": "IframeEmbedContent", height: iframeHeight, mobileHeight: mobileHeight, width: iframeWidth, sandboxAttributes: sandboxAttributes, title: title || formatMessage(translations.title), src: url, shouldAllowFullScreen: allowFullScreen })))) : (React.createElement(ConsentBanner, { consentBannerHeader: translations.consentBannerHeader, hasConsent: hasConsent, url: url })),
            dangerousCaption && (React.createElement(Caption, { dangerousCaptionText: dangerousCaption, captionAlign: variations.captionAlign })),
            options && buttonFactory(options))));
};
IframeEmbed.propTypes = {
    aspectRatio: PropTypes.string,
    attributes: PropTypes.object,
    audioTagIconTitle: PropTypes.string,
    audioTagIncludeUrls: PropTypes.arrayOf(PropTypes.string),
    className: PropTypes.string,
    dangerousCaption: PropTypes.string,
    dangerousDek: PropTypes.string,
    hasOptions: PropTypes.bool,
    height: PropTypes.string,
    isLazyLoaded: PropTypes.bool,
    mobileHeight: PropTypes.string,
    options: PropTypes.arrayOf(PropTypes.shape({
        name: PropTypes.string.isRequired,
        url: PropTypes.string.isRequired
    })),
    sandbox: PropTypes.string,
    shouldAllowFullScreen: PropTypes.bool,
    shouldValidateAudmPlayer: PropTypes.bool,
    title: PropTypes.string,
    url: PropTypes.string.isRequired,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        contentAlign: PropTypes.oneOf(['center', 'left', 'right']),
        captionAlign: PropTypes.oneOf(['center', 'left', 'right']),
        hasAudioTag: PropTypes.bool
    }),
    width: PropTypes.string
};
IframeEmbed.displayName = 'IframeEmbed';
module.exports = IframeEmbed;
//# sourceMappingURL=IframeEmbed.js.map

/***/ }),

/***/ 152:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const LazyLoad = __webpack_require__(84144);
const { IframeEmbedContent: IframeEmbedContentIframe } = __webpack_require__(34980);
const options = { elements_selector: '.lazy' };
/**
 * IframeEmbedContent component
 *
 * @param {object} props - React props
 * @param {string} [props.sandboxAttributes] - Optional definition of sandbox permissions (default: 'allow-scripts allow-same-origin')
 * @param {boolean} [props.shouldAllowFullScreen] - Optional flag to allow the iframe to open in full screen.
 * @param {string} props.src - Required src target for iframe content
 * @param {string} props.title - Required title form iframe element
 * @param {string} [props.height] - Optional height target for iframe content. (default: 766)
 * @param {string} [props.mobileHeight] - Optional height  target for Iframe content mobile only.
 * @param {string} [props.width] - Optional width target for iframe content. (default: 766)
 *
 * @returns {ReactElement} <iframe>
 */
const IframeEmbedContent = ({ sandboxAttributes, shouldAllowFullScreen, src, title, height, mobileHeight, width }) => {
    React.useEffect(() => {
        const lazyload = new LazyLoad(options);
        lazyload.update();
        return () => lazyload && lazyload.destroy();
    }, []);
    return (React.createElement(IframeEmbedContentIframe
    // need a className because of a weird styled components bug
    , { 
        // need a className because of a weird styled components bug
        className: "IframeEmbedContent lazy", height: height, mobileHeight: mobileHeight, width: width, sandbox: sandboxAttributes, title: title, "data-src": src, allowFullScreen: shouldAllowFullScreen, allow: "autoplay *; encrypted-media *; clipboard-write; autoplay; fullscreen; picture-in-picture" }));
};
IframeEmbedContent.propTypes = {
    height: PropTypes.string,
    mobileHeight: PropTypes.string,
    sandboxAttributes: PropTypes.string,
    shouldAllowFullScreen: PropTypes.bool,
    src: PropTypes.string.isRequired,
    title: PropTypes.string,
    width: PropTypes.string
};
IframeEmbedContent.displayName = 'IframeEmbedContent';
module.exports = IframeEmbedContent;
//# sourceMappingURL=IframeEmbedContent.js.map

/***/ }),

/***/ 62997:
/***/ ((module) => {

/**
 *
 * ██╗███╗   ██╗███████╗ ██████╗
 * ██║████╗  ██║██╔════╝██╔═══██╗
 * ██║██╔██╗ ██║█████╗  ██║   ██║
 * ██║██║╚██╗██║██╔══╝  ██║   ██║
 * ██║██║ ╚████║██║     ╚██████╔╝
 * ╚═╝╚═╝  ╚═══╝╚═╝      ╚═════╝
 *
 * Please keep this list alphabetical and in sync with the docs here:
 * https://cnissues.atlassian.net/wiki/spaces/CEX/pages/600571933/Verso+Iframe+Embed+Sandboxes
 */
const contentDomains = {
    'airfoil-assets.condenastdigital.com': {
        sandbox: [
            'allow-same-origin',
            'allow-popups',
            'allow-popups-to-escape-sandbox'
        ]
    },
    'assets.pinterest.com': { sandbox: ['allow-scripts', 'allow-popups'] },
    'audm.herokuapp.com': {
        // Consent disabled as they have removed any tracking and additional
        // scripts we were concerned about
        consent: false,
        sandbox: ['allow-same-origin', 'allow-popups']
    },
    'bandcamp.com': { sandbox: ['allow-same-origin', 'allow-popups'] },
    'bizzabo.com': { sandbox: ['allow-same-origin', 'allow-popups'] },
    'blingby.com': { sandbox: ['allow-same-origin'] },
    'codepen.io': { sandbox: ['allow-same-origin'] },
    'conde-nast.msgfocus.com': {
        sandbox: ['allow-forms', 'allow-same-origin', 'allow-popups']
    },
    'condenast.jotform.com': {
        sandbox: ['allow-forms', 'allow-popups', 'allow-top-navigation']
    },
    'dailymotion.com': { sandbox: ['allow-same-origin'] },
    'datawrapper.dwcdn.net': { sandbox: ['allow-same-origin'] },
    'docs.google.com': { sandbox: ['allow-forms'] },
    'documentcloud.org': { sandbox: ['allow-popups'] },
    'elevenlabs.io': { sandbox: ['allow-same-origin'] },
    'embed.music.apple.com': {
        sandbox: [
            'allow-scripts',
            'allow-forms',
            'allow-popups',
            'allow-same-origin',
            'allow-storage-access-by-user-activation',
            'allow-top-navigation-by-user-activation'
        ]
    },
    'embed.podcasts.apple.com': {
        sandbox: [
            'allow-scripts',
            'allow-forms',
            'allow-popups',
            'allow-same-origin',
            'allow-storage-access-by-user-activation',
            'allow-top-navigation-by-user-activation'
        ]
    },
    'embed.ted.com': { sandbox: ['allow-scripts', 'allow-same-origin'] },
    'eventbrite.it': { sandbox: ['allow-scripts', 'allow-same-origin'] },
    'eventbrite.com': { sandbox: ['allow-scripts', 'allow-same-origin'] },
    'facebook.com': { sandbox: ['allow-same-origin'] },
    'flourish.studio': { sandbox: ['allow-same-origin'] },
    'form.jotform.com': { sandbox: ['allow-forms'] },
    'fw.tv': { sandbox: ['allow-same-origin'] },
    'giphy.com': { sandbox: ['allow-same-origin'] },
    'google.com': { sandbox: ['allow-popups'] },
    'iheart.com': { sandbox: ['allow-same-origin'] },
    'infogram.com': { sandbox: ['allow-same-origin'] },
    'interactives.ap.org': { sandbox: ['allow-same-origin', 'allow-scripts'] },
    'interactive.vanityfair.com': {
        sandbox: ['allow-scripts', 'allow-same-origin']
    },
    'interactive-stag.vanityfair.com': {
        sandbox: ['allow-scripts', 'allow-same-origin']
    },
    'knotch-cdn.com': {
        sandbox: [
            'allow-same-origin',
            'allow-popups',
            'allow-popups-to-escape-sandbox'
        ]
    },
    'labs.vogue.es': {
        sandbox: [
            'allow-same-origin',
            'allow-popups',
            'allow-popups-to-escape-sandbox',
            'allow-forms',
            'allow-top-navigation'
        ]
    },
    'link.gq-magazin.de': {
        sandbox: [
            'allow-forms',
            'allow-scripts',
            'allow-modals',
            'allow-same-origin'
        ]
    },
    'link.vogue.de': {
        sandbox: [
            'allow-forms',
            'allow-scripts',
            'allow-modals',
            'allow-same-origin'
        ]
    },
    'link.glamour.de': {
        sandbox: [
            'allow-forms',
            'allow-scripts',
            'allow-modals',
            'allow-same-origin'
        ]
    },
    'link.ad-magazin.de': {
        sandbox: [
            'allow-forms',
            'allow-scripts',
            'allow-modals',
            'allow-same-origin'
        ]
    },
    'link.gqmagazine.fr': {
        sandbox: [
            'allow-modals',
            'allow-forms',
            'allow-popups',
            'allow-same-origin'
        ]
    },
    'link.admagazine.fr': {
        sandbox: [
            'allow-modals',
            'allow-forms',
            'allow-popups',
            'allow-same-origin'
        ]
    },
    'link.vanityfair.fr': { sandbox: ['allow-modals', 'allow-forms'] },
    'link.vogue.fr': {
        sandbox: ['allow-forms', 'allow-scripts', 'allow-same-origin']
    },
    'link.vogue.it': { sandbox: ['allow-forms'] },
    'livescale.tv': { sandbox: ['allow-same-origin'] },
    'media.mtvnservices.com': { sandbox: ['allow-same-origin'] },
    'megaphone.fm': { sandbox: ['allow-popups', 'allow-same-origin'] },
    'mixcloud.com': { sandbox: ['allow-same-origin'] },
    'newyorker.com': { sandbox: ['allow-same-origin'] },
    'platform.livex.tv': { sandbox: ['allow-scripts', 'allow-same-origin'] },
    'player.spokenlayer.net': { sandbox: ['allow-same-origin'] },
    'player.vimeo.com': {
        sandbox: [
            'allow-popups',
            'allow-same-origin',
            'allow-scripts',
            'allow-top-navigation-by-user-activation'
        ]
    },
    'redditmedia.com': { sandbox: ['allow-same-origin', 'allow-popups'] },
    'sber-zvuk.com': {
        sandbox: ['allow-same-origin', 'allow-storage-access-by-user-activation']
    },
    'sdqk.me': { sandbox: ['allow-same-origin', 'allow-popups'] },
    'sketchfab.com': { sandbox: ['allow-same-origin'] },
    'soundcloud.com': { sandbox: ['allow-same-origin'] },
    'spreaker.com': { sandbox: ['allow-same-origin'] },
    'st.avsplow.com': { sandbox: ['allow-scripts', 'allow-same-origin'] },
    'static.condenast.ru': { sandbox: ['allow-popups', 'allow-same-origin'] },
    'curiosity.condenast.ru': { sandbox: ['allow-scripts', 'allow-same-origin'] },
    'curiosity.admagazine.ru': {
        sandbox: ['allow-scripts', 'allow-same-origin']
    },
    'surveygizmo.com': { sandbox: ['allow-same-origin'] },
    'sutori.com': { sandbox: ['allow-same-origin'] },
    'tableau.com': { sandbox: ['allow-same-origin'] },
    'tiktok.com': { sandbox: ['allow-same-origin'] },
    'top-fwz1.mail.ru': { sandbox: ['allow-same-origin'] },
    'tp.media': { sandbox: ['allow-popups'] },
    'travelpayouts.com': {
        sandbox: [
            'allow-scripts',
            'allow-popups',
            'allow-forms',
            'allow-same-origin'
        ]
    },
    'trinket.io': { sandbox: ['allow-same-origin'] },
    'typeform.com': {
        sandbox: [
            'allow-same-origin',
            'allow-scripts',
            'allow-top-navigation',
            'allow-popups',
            'allow-top-navigation-by-user-activation'
        ]
    },
    'twitch.tv': { sandbox: ['allow-popups', 'allow-same-origin'] },
    'twitter.com': { sandbox: ['allow-same-origin'] },
    'vero.co': { sandbox: ['allow-popups', 'allow-same-origin'] },
    'vevo.com': { sandbox: ['allow-same-origin'] },
    'vk.com': {
        sandbox: [
            'allow-popups',
            'allow-same-origin',
            'allow-storage-access-by-user-activation'
        ]
    },
    'voguebusiness.com': { sandbox: ['allow-same-origin'] },
    'wikimedia.org': { sandbox: ['allow-same-origin'] },
    'wnyc.org': {
        // Consent disabled as they have removed any tracking and additional
        // scripts we were concerned about
        consent: false,
        sandbox: ['allow-same-origin', 'allow-scripts']
    },
    'woobox.com': { sandbox: ['allow-scripts', 'allow-forms'] },
    'yandex.ru': { sandbox: ['allow-same-origin'] },
    'youtu.be': {
        sandbox: [
            'allow-scripts',
            'allow-popups',
            'allow-same-origin',
            'allow-presentation',
            'allow-popups-to-escape-sandbox'
        ]
    },
    'youtube.com': {
        sandbox: [
            'allow-scripts',
            'allow-popups',
            'allow-same-origin',
            'allow-presentation',
            'allow-popups-to-escape-sandbox'
        ]
    },
    'youtube-nocookie.com': {
        sandbox: [
            'allow-scripts',
            'allow-popups',
            'allow-same-origin',
            'allow-presentation',
            'allow-popups-to-escape-sandbox'
        ]
    },
    'zoom.us': { sandbox: ['allow-same-origin'] },
    'condenast.formstack.com': { sandbox: ['allow-scripts', 'allow-forms'] }
};
// Some embeds do not work if the 'sandbox' attribute even exists
const noSandboxDomains = ['spotify.com', 'wirewax.com'];
const consentLevels = new Set([
    'strictlyNecessary',
    'performance',
    'functional',
    'targeting',
    'socialMedia'
]);
const defaultConsentLevel = 'targeting';
module.exports = {
    consentLevels,
    contentDomains,
    defaultConsentLevel,
    noSandboxDomains
};
//# sourceMappingURL=constants.js.map

/***/ }),

/***/ 22816:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const VariedIframeEmbed = __webpack_require__(91172);
module.exports = asConfiguredComponent(VariedIframeEmbed, 'IframeEmbed');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 34980:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { css, default: styled } = __webpack_require__(92168);
const { BaseWrap } = __webpack_require__(76955);
const { calculateSpacing, getColorStyles, clearFix, getTypographyStyles } = __webpack_require__(26865);
const { CaptionWrapper } = __webpack_require__(38860);
const { ButtonWrapper } = __webpack_require__(18974);
const { BREAKPOINTS } = __webpack_require__(96472);
const IframeEmbedContainer = styled.div.withConfig({
    displayName: 'IframeEmbedContainer'
}) `
  display: inline-block;
  width: 100%;
  text-align: center;
  ${CaptionWrapper} {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-secondary')}
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body')};
    ${({ captionAlign }) => captionAlign &&
    `
    margin-top: ${calculateSpacing(1)};
    text-align: ${captionAlign};
  `}
  }
`;
const IframeEmbedContent = styled.iframe.withConfig({
    displayName: 'IframeEmbedContent'
}) `
  border: 0;
  width: 100%;
  max-width: 100%;
  @media (max-width: ${BREAKPOINTS.md}) {
    ${({ mobileHeight }) => mobileHeight && `height: ${mobileHeight};`}
  }
`;
const IframeEmbedAspectRatioWrapper = styled.div.withConfig({
    displayName: 'IframeEmbedAspectRatioWrapper'
}) `
  ${({ aspectRatio }) => aspectRatio != null &&
    `
    position: relative;
    padding-bottom: ${aspectRatio * 100}%;
    width: 100%;
    height: 0;

    /*
      We have to use a className because Styled Components
      seems to break and change the className for these
      components on a re-render.
    */
    .IframeEmbedContent {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
    }
  `};
`;
const withOptionsStyle = css `
  ${clearFix()}

  ${IframeEmbedContainer} {
    text-align: right;
  }

  /*
    We have to use a className because Styled Components
    seems to break and change the className for these
    components on a re-render.
  */
  .IframeEmbedContent {
    display: block;
  }

  ${CaptionWrapper} {
    float: left;
    margin-top: ${calculateSpacing(3, 'px')};
    ${({ contentAlign }) => `
      margin-top: ${calculateSpacing(1, 'px')};
      text-align: ${contentAlign};
    `}
  }

  ${ButtonWrapper} {
    margin-top: ${calculateSpacing(1, 'px')};
    margin-left: ${calculateSpacing(0.5, 'px')};
  }
`;
const IframeEmbedWrapper = styled.figure.withConfig({
    displayName: 'IframeEmbedWrapper-sc'
}) `
  margin: 0 auto;

  ${({ contentAlign }) => `text-align: ${contentAlign || 'center'}`}
  ${({ hasOptions }) => hasOptions && withOptionsStyle}
`;
const IframeAudioTagWrapper = styled.div.withConfig({
    displayName: 'IframeAudioTagWrapper'
}) `
  display: flex;
  align-items: center;
  justify-content: start;
  margin-bottom: ${calculateSpacing(1, 'px')};
`;
const IframeDangerousDek = styled(BaseWrap).withConfig({
    displayName: 'IframeDangerousDek'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.utility.label')}
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.foundation.collapsed-menu.utility-link.default')};
  margin: 0;
  margin-left: ${calculateSpacing(1, 'px')};
  text-align: left;
`;
const IframeAudioIconBox = styled.div.withConfig({
    displayName: 'IframeAudioIconBox'
}) `
  ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.discovery.body.brand.accreditation')};
  ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.discovery.body.black.border')};

  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  width: 24px;
  height: 24px;

  svg {
    align-self: center;
    width: 12px;
    height: 12px;

    path {
      ${({ theme }) => getColorStyles(theme, 'fill', 'colors.interactive.base.white')};
    }
  }
`;
module.exports = {
    IframeEmbedWrapper,
    IframeEmbedContainer,
    IframeEmbedAspectRatioWrapper,
    IframeEmbedContent,
    IframeAudioTagWrapper,
    IframeDangerousDek,
    IframeAudioIconBox
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 87566:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    title: {
        id: 'IframeEmbed.Title',
        defaultMessage: 'Embedded Frame',
        description: 'Title for iframe',
        isConfigurable: true
    },
    dangerousDek: {
        id: 'IframeEmbed.DangerousDek',
        defaultMessage: 'Listen to this story',
        description: 'Text of the audio tag',
        isConfigurable: true
    },
    ariaLabel: {
        id: 'IframeEmbed.AriaLabel',
        defaultMessage: 'Click button to go to: {name}',
        description: 'Aria label for button',
        isConfigurable: true
    },
    consentBannerHeader: {
        id: 'IframeEmbed.ConsentBannerHeader',
        defaultMessage: 'Content',
        description: 'Header for message banner'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 35833:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { consentLevels, contentDomains, defaultConsentLevel, noSandboxDomains } = __webpack_require__(62997);
function getUrlDomain(url) {
    try {
        return new URL(url).hostname.toLowerCase();
    }
    catch (err) {
        return '';
    }
}
function isSameDomain(frameDomain, domain) {
    return frameDomain === domain || frameDomain.endsWith(`.${domain}`);
}
function getContentDomainsKey(frameDomain) {
    const contentDomainKeys = Object.keys(contentDomains);
    return contentDomainKeys.find((key) => {
        return isSameDomain(frameDomain, key);
    });
}
function getSandboxAttributes(frameUrl, propSandbox) {
    const frameDomain = getUrlDomain(frameUrl);
    // Check if we don't want to assign any attributes based on the domain
    const excludeSandboxAttribute = noSandboxDomains.some((domain) => {
        return isSameDomain(frameDomain, domain);
    });
    if (excludeSandboxAttribute)
        return undefined;
    let sandbox = [];
    // Parse the sandbox prop for sandbox values
    if (typeof propSandbox === 'string') {
        sandbox = sandbox.concat(propSandbox.split(/[\s,]+/g));
    }
    // Get the attributes from `contentDomains`
    const contentDomainKey = getContentDomainsKey(frameDomain);
    if (contentDomainKey &&
        Array.isArray(contentDomains[contentDomainKey].sandbox)) {
        sandbox = sandbox.concat(contentDomains[contentDomainKey].sandbox);
    }
    return Array.from(new Set(sandbox)).join(' ');
}
function resolveConsentLevelValue(frameUrl, consentValue) {
    // We have opted into turning off consent for this domain
    if (consentValue === false) {
        return false;
    }
    // We have specified a function for granular control over different urls. Get
    // the value back from the function and begin resolving in case its `false`,
    // a consent level or... another function. I won't be annoyed if this happens,
    // just disappointed.
    if (typeof consentValue === 'function') {
        const retValue = consentValue(frameUrl);
        return resolveConsentLevelValue(frameUrl, retValue);
    }
    // Check if the consent value is in our list of expected consent levels
    if (consentLevels.has(consentValue)) {
        return consentValue;
    }
    // Fallback to targeting to cover our sweet behinds
    return defaultConsentLevel;
}
function getConsentLevel(frameUrl) {
    const frameDomain = getUrlDomain(frameUrl);
    const contentDomainKey = getContentDomainsKey(frameDomain);
    if (contentDomainKey) {
        return resolveConsentLevelValue(frameUrl, contentDomains[contentDomainKey].consent);
    }
    return defaultConsentLevel;
}
module.exports = {
    getConsentLevel,
    getContentDomainsKey,
    getSandboxAttributes,
    getUrlDomain,
    isSameDomain,
    resolveConsentLevelValue
};
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 91172:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const IframeEmbed = __webpack_require__(77509);
IframeEmbed.CaptionLeftAlign = asVariation(IframeEmbed, 'CaptionLeftAlign', { captionAlign: 'left', contentAlign: 'left' }, { hasOptions: true });
IframeEmbed.WithAudioTag = asVariation(IframeEmbed, 'WithAudioTag', { hasAudioTag: true }, { hasOptions: true });
module.exports = IframeEmbed;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 59505:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const ImageSlideShow = __webpack_require__(17639);
module.exports = asConfiguredComponent(ImageSlideShow, 'ImageSlideShow');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 17639:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState, useEffect, useRef } = React;
const { injectIntl } = __webpack_require__(46984);
const debounce = __webpack_require__(38221);
const throttle = __webpack_require__(7350);
const translations = (__webpack_require__(65956)/* ["default"] */ .A);
const Button = __webpack_require__(73730);
const { BREAKPOINTS } = __webpack_require__(96472);
const ResponsiveAsset = __webpack_require__(73275);
const InteractiveCaptionCredit = __webpack_require__(10368);
const { ImageSlideShowWrapper, ImageSlideShowHeader, ImageSlideShowFooter, ImageSlideShowTitle, ImageSlideShowCarousel, ImageSlideShowCarouselList, ImageSlideShowCarouselItem, ImageSlideShowCarouselArrow, ImageSlideShowSlideMobileText, ImageSlideShowSlideText, ImageSlideShowSlideCaption, ImageSlideShowSlideCredit, ImageSlideShowSlideImage, ImageSlideShowLastSlide, ImageSlideShowLastSlideLink, ImageSlideShowLastSlideHed, ImageSlideShowLastSlideDek, ImageSlideShowCTA, ImageSlideShowCarouselButton } = __webpack_require__(92178);
let scrollTimeout = null;
/**
 * ImageSlideShow component
 *
 * @param {object} props - React props
 * @param {string} [props.dek] - Optional description of the ImageSlideShow component.
 * @param {string} [props.endSlideDek] - Optional last slide dek
 * @param {string} [props.endSlideHed] - Optional last slide hed
 * @param {string} [props.galleryLink] - Optional link to gallery
 * @param {string} [props.galleryLinkLabel] - Optional link label
 * @param {boolean} [props.hasMarginTop] - optional margin top
 * @param {boolean} [props.hasTitleDividerAbove] - Optional section title settings
 * @param {boolean} [props.hasTitleDividerAboveDek] - Optional section title settings
 * @param {boolean} [props.hasTitleDividerBelow] - Optional section title settings
 * @param {string} [props.hed] - Optional title of the ImageSlideShow component.
 * @param {boolean} [props.hideLastSlide] - Optional hide last slide message
 * @param {object} props.intl - i18n functions
 * @param {number} [props.maxAllowedSlides] - Optional maximum number of slides does this component shows.
 * @param {Array}  props.slideItems - Array of items containing detail about each slides.
 * @param {string} props.trackingNamespace - Tracking namespace
 *
 * @returns {ReactElement} <ImageSlideShow>
 */
const ImageSlideShow = ({ dek, endSlideDek, endSlideHed, galleryLink, galleryLinkLabel, hasMarginTop, hasTitleDividerAbove, hasTitleDividerAboveDek, hasTitleDividerBelow, hed, hideLastSlide, intl, maxAllowedSlides = 10, slideItems, trackingNamespace = {
    backwardButton: 'ImageSlideShow Control Backward',
    forwardButton: 'ImageSlideShow Control Forward',
    lastSlideButton: 'ImageSlideShow gallery link',
    swipe: 'ImageSlideShow carousel swipe',
    viewMoreCTA: 'ImageSlideShow View All Button'
} }) => {
    const [currentSlide, setCurrentSlide] = useState(0);
    const [slidePositions, setSlidePositions] = useState(0);
    const [isDesktop, setBreakPoint] = useState(false);
    const imageSlideShowRef = useRef(null);
    const carouselRef = useRef(null);
    const [prevArrowInactive, setPrevArrowInactive] = useState(true);
    const [nextArrowInactive, setNextArrowInactive] = useState(false);
    const trackEvent = (eventTracking) => {
        if ( true && window.dataLayer && eventTracking) {
            window.dataLayer.push({
                event: eventTracking
            });
        }
    };
    const { forwardButton, backwardButton, lastSlideButton, swipe, viewMoreCTA } = trackingNamespace;
    const mediaQueryString = `(min-width: ${BREAKPOINTS.md})`;
    slideItems.length =
        slideItems.length <= maxAllowedSlides
            ? slideItems.length
            : maxAllowedSlides;
    const totalCarouselItems = slideItems.length + (hideLastSlide ? 0 : 1);
    const [isScrolling, setIsScrolling] = useState(false);
    const [isMouseOverCarousel, setIsMouseOverCarousel] = useState(false);
    useEffect(() => {
        if (imageSlideShowRef.current) {
            imageSlideShowRef.current.style.opacity = 1;
        }
        const onResize = () => {
            if (carouselRef.current) {
                const carouselPositions = [...carouselRef.current.children].map((child) => child.offsetLeft);
                setSlidePositions(carouselPositions);
                const images = [
                    ...imageSlideShowRef.current.querySelectorAll('[class^=ImageSlideShowSlideImage]')
                ];
                // align the arrows to middle of images
                let minimumImageHeight = 0;
                images.forEach((image) => {
                    image.style.minHeight = 0;
                });
                images.forEach((image) => {
                    if (minimumImageHeight < image.offsetHeight) {
                        minimumImageHeight = image.offsetHeight;
                    }
                });
                // set all images to be equal height
                images.forEach((image) => {
                    image.style.minHeight = `${minimumImageHeight}px`;
                });
                // reposition arrows to center of image
                [...imageSlideShowRef.current.querySelectorAll('button')].forEach((button) => {
                    button.style.opacity = 1;
                    button.style.top = `${minimumImageHeight / 2 - 22}px`; // 22 is half the arrow height
                });
            }
            const isDesktopBreakPoint = window.matchMedia(mediaQueryString).matches;
            setBreakPoint(isDesktopBreakPoint);
            if (isDesktopBreakPoint && (slideItems < 4 || maxAllowedSlides < 4)) {
                setNextArrowInactive(true);
            }
        };
        const onDebounceResize = debounce(onResize, 200);
        window.addEventListener('resize', onDebounceResize);
        setTimeout(onResize, 1000);
        return () => {
            window.removeEventListener('resize', onDebounceResize);
            clearTimeout(onResize);
        };
    }, [imageSlideShowRef, maxAllowedSlides, mediaQueryString, slideItems]);
    // check if there are mixed aspect ratios
    const landscapeImages = slideItems.filter((slide) => {
        const { width, height } = slide.image.sources.sm;
        return width / height >= 1;
    });
    const hasAllLandscapeImages = landscapeImages.length === slideItems.length;
    const nextSlide = () => {
        const diff = 1 + (isDesktop && !hasAllLandscapeImages ? 3 : 1);
        if (currentSlide < totalCarouselItems - diff) {
            const newSlidePosition = currentSlide + 1;
            setCurrentSlide(newSlidePosition);
            if (newSlidePosition > 0 && prevArrowInactive) {
                setPrevArrowInactive(false);
            }
            if (newSlidePosition === totalCarouselItems - diff) {
                setNextArrowInactive(true);
            }
            if (isDesktop) {
                carouselRef.current.scrollTo({
                    left: slidePositions[newSlidePosition],
                    behavior: 'smooth'
                });
            }
            trackEvent(forwardButton);
        }
    };
    const prevSlide = () => {
        if (currentSlide > 0) {
            const newSlidePosition = currentSlide - 1;
            setCurrentSlide(newSlidePosition);
            if (newSlidePosition === 0 && !prevArrowInactive) {
                setPrevArrowInactive(true);
            }
            if (isDesktop) {
                carouselRef.current.scrollTo({
                    left: slidePositions[newSlidePosition],
                    behavior: 'smooth'
                });
            }
            if (nextArrowInactive) {
                setNextArrowInactive(false);
            }
            trackEvent(backwardButton);
        }
    };
    const handleKeyPress = (e) => {
        if (e.keyCode === 39) {
            nextSlide();
        }
        else if (e.keyCode === 37) {
            prevSlide();
        }
    };
    const MARGIN = isDesktop ? 0 : 24;
    const carouselPosition = 0;
    // let scrollTimeout = null;
    const onCarouselScroll = () => {
        // we only want to update this way when scrolling by touchbar or mouse
        if (!isMouseOverCarousel && isDesktop) {
            return;
        }
        scrollTimeout = setTimeout(() => {
            clearTimeout(scrollTimeout);
            if (carouselRef.current && slidePositions) {
                const carouselLeftPosition = carouselRef.current.scrollLeft + MARGIN;
                const nearestScrolledToPosition = slidePositions.reduce((prev, curr) => {
                    return Math.abs(curr - carouselLeftPosition) <
                        Math.abs(prev - carouselLeftPosition)
                        ? curr
                        : prev;
                });
                const newSlidePosition = slidePositions.indexOf(nearestScrolledToPosition);
                setCurrentSlide(newSlidePosition);
                if (newSlidePosition > 0 && prevArrowInactive) {
                    setPrevArrowInactive(false);
                }
                if (newSlidePosition === 0 && !prevArrowInactive) {
                    setPrevArrowInactive(true);
                }
                const portraitDiff = isDesktop ? 4 : 1;
                const lastSlideDiff = hasAllLandscapeImages ? 2 : portraitDiff;
                if (newSlidePosition === totalCarouselItems - lastSlideDiff &&
                    currentSlide === totalCarouselItems - lastSlideDiff) {
                    setNextArrowInactive(true);
                }
                if (newSlidePosition < totalCarouselItems - lastSlideDiff) {
                    setNextArrowInactive(false);
                }
                if (!isDesktop) {
                    trackEvent(swipe);
                }
            }
            setIsScrolling(false);
        }, 1000);
        if (!isScrolling) {
            setIsScrolling(true);
        }
    };
    const scrollThrottle = throttle(onCarouselScroll, 3000, { trailing: false });
    const handleOnScroll = () => {
        scrollThrottle();
    };
    const setCarouselItems = (slide, ind) => {
        if (!slide.image) {
            return null;
        }
        const { caption, credit } = slide;
        return (React.createElement(ImageSlideShowCarouselItem, { key: `slide-${ind}`, isLandscape: hasAllLandscapeImages, style: { position: 'relative' } },
            React.createElement(ImageSlideShowSlideImage, { key: `slide-${ind}` },
                React.createElement(ResponsiveAsset, { ...slide.image })),
            (credit || caption) && (React.createElement(ImageSlideShowSlideText, null,
                credit && (React.createElement(ImageSlideShowSlideCredit, { dangerouslySetInnerHTML: {
                        __html: credit
                    } })),
                caption && (React.createElement(ImageSlideShowSlideCaption, { dangerouslySetInnerHTML: {
                        __html: caption
                    } }))))));
    };
    return (React.createElement(ImageSlideShowWrapper, { hasMarginTop: hasMarginTop },
        React.createElement(ImageSlideShowHeader, null,
            React.createElement(ImageSlideShowTitle, { dangerousHed: hed, dangerousDek: dek, hasDividerAbove: hasTitleDividerAbove, hasDividerAboveDek: hasTitleDividerAboveDek, hasDividerBelow: hasTitleDividerBelow, textAlign: "center", "data-testid": "section-title" })),
        React.createElement(ImageSlideShowCarousel, { ref: imageSlideShowRef, tabIndex: "0", onKeyDown: handleKeyPress },
            React.createElement(ImageSlideShowCarouselButton, { "data-testid": "ImageSlideShowPrevButton", direction: "prev", isInactive: prevArrowInactive, onClick: () => prevSlide(), type: "button" },
                React.createElement(ImageSlideShowCarouselArrow, { type: "prev" })),
            React.createElement(ImageSlideShowCarouselButton, { "data-testid": "ImageSlideShowNextButton", direction: "next", isInactive: nextArrowInactive, onClick: () => nextSlide(), type: "button" },
                React.createElement(ImageSlideShowCarouselArrow, { type: "next" })),
            React.createElement(ImageSlideShowCarouselList, { onScroll: handleOnScroll, onMouseOver: () => setIsMouseOverCarousel(true), onMouseOut: () => setIsMouseOverCarousel(false), ref: carouselRef, style: { transform: `translateX(${carouselPosition})` } },
                slideItems.map(setCarouselItems),
                !hideLastSlide && (React.createElement(ImageSlideShowCarouselItem, { isLandscape: hasAllLandscapeImages },
                    React.createElement(ImageSlideShowLastSlideLink, { href: galleryLink, onClick: () => trackEvent(lastSlideButton) },
                        React.createElement(ImageSlideShowSlideImage, null,
                            React.createElement(ImageSlideShowLastSlide, null,
                                React.createElement(ImageSlideShowLastSlideHed, null, endSlideHed),
                                React.createElement(ImageSlideShowLastSlideDek, null, endSlideDek ||
                                    intl.formatMessage(translations.lastSlideCTA)))))))),
            React.createElement(ImageSlideShowSlideMobileText, null,
                React.createElement(InteractiveCaptionCredit, { caption: slideItems[currentSlide]?.caption, credit: slideItems[currentSlide]?.credit }))),
        React.createElement(ImageSlideShowFooter, null, galleryLink && (React.createElement(ImageSlideShowCTA, { "data-testid": "ImageSlideShowCTA" },
            React.createElement(Button.Utility, { btnStyle: "outlined", href: galleryLink, inputKind: "link", label: galleryLinkLabel || intl.formatMessage(translations.galleryLink), onClickHandler: () => {
                    trackEvent(viewMoreCTA);
                }, target: "_self" }))))));
};
ImageSlideShow.propTypes = {
    dek: PropTypes.string,
    endSlideDek: PropTypes.string,
    endSlideHed: PropTypes.string,
    galleryLink: PropTypes.string,
    galleryLinkLabel: PropTypes.string,
    hasMarginTop: PropTypes.bool,
    hasTitleDividerAbove: PropTypes.bool,
    hasTitleDividerAboveDek: PropTypes.bool,
    hasTitleDividerBelow: PropTypes.bool,
    hed: PropTypes.string,
    hideLastSlide: PropTypes.bool,
    intl: PropTypes.object,
    maxAllowedSlides: PropTypes.number,
    slideItems: PropTypes.array,
    trackingNamespace: PropTypes.object
};
module.exports = injectIntl(ImageSlideShow);
//# sourceMappingURL=ImageSlideShow.js.map

/***/ }),

/***/ 10368:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { useEffect, useRef, useState } = React;
const PropTypes = __webpack_require__(5556);
const { ContentUpdatorWrapper, ImageSlideShowSlideCaption, ImageSlideShowSlideCredit } = __webpack_require__(92178);
/**
 * ImageSlideShowInteractiveCaptionCredit component
 *
 * @param {object} props - React props
 * @param {string} [props.caption] - Optional caption
 * @param {string} [props.credit] - Optional credit
 *
 * @returns {ReactElement} <ImageSlideShowInteractiveCaptionCredit>
 */
const ImageSlideShowInteractiveCaptionCredit = ({ caption, credit }) => {
    const [opacity, setOpacity] = useState(1);
    const [captionText, setCaption] = useState('');
    const [creditText, setCredit] = useState('');
    const updateTimer = useRef(null);
    useEffect(() => {
        const setUpdate = () => {
            if (caption !== captionText || credit !== creditText) {
                setOpacity(0);
                updateTimer.current = setTimeout(() => {
                    setOpacity(1);
                    setCaption(caption);
                    setCredit(credit);
                    updateTimer.current = null;
                }, 300);
            }
        };
        if (!updateTimer.current) {
            setUpdate();
        }
        return () => {
            clearTimeout(updateTimer.current);
            updateTimer.current = null;
        };
    }, [caption, captionText, credit, creditText]);
    return (React.createElement(ContentUpdatorWrapper, { style: { opacity } },
        React.createElement(ImageSlideShowSlideCredit, { dangerouslySetInnerHTML: {
                __html: creditText
            } }),
        React.createElement(ImageSlideShowSlideCaption, { dangerouslySetInnerHTML: {
                __html: captionText
            } })));
};
ImageSlideShowInteractiveCaptionCredit.propTypes = {
    caption: PropTypes.string,
    credit: PropTypes.string
};
module.exports = ImageSlideShowInteractiveCaptionCredit;
//# sourceMappingURL=ImageSlideShowInteractiveCaptionCredit.js.map

/***/ }),

/***/ 92178:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing, getColorToken, getTypographyStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { applyGridSpacing, cssVariablesGrid } = __webpack_require__(1123);
const SectionTitle = __webpack_require__(35864);
const ChevronRight = __webpack_require__(25751);
const ImageSlideShowWrapper = styled.div.withConfig({
    displayName: 'ImageSlideShowWrapper'
}) `
  ${cssVariablesGrid()}
  ${({ hasMarginTop }) => hasMarginTop && `margin-top: ${calculateSpacing(4)};`}
`;
const ImageSlideShowHeader = styled.div.withConfig({
    displayName: 'ImageSlideShowHeader'
}) `
  ${applyGridSpacing('padding')}
`;
const ImageSlideShowFooter = styled.div.withConfig({
    displayName: 'ImageSlideShowFooter'
}) `
  ${applyGridSpacing('padding')}
`;
const ImageSlideShowTitle = styled(SectionTitle).withConfig({
    displayName: 'ImageSlideShowTitle'
}) ``;
const ImageSlideShowCarousel = styled.div.withConfig({
    displayName: 'ImageSlideShowCarousel'
}) `
  position: relative;
  transition: opacity 0.3s ease-in;
  opacity: 0;
  margin: ${calculateSpacing(4)} 0;
  overflow: hidden;

  @media (min-width: ${BREAKPOINTS.md}) {
    ${cssVariablesGrid()}
    ${applyGridSpacing('margin')}
    overflow: visible;
  }
`;
const ImageSlideShowCarouselList = styled.ul.withConfig({
    displayName: 'ImageSlideShowCarouselList'
}) `
  display: flex;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.34, 0.83, 1.06, 0.65);
  margin: 0;
  padding: 0;
  padding-right: ${calculateSpacing(4)};

  padding-left: ${calculateSpacing(1.5)};
  list-style: none;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;

  &::-webkit-scrollbar {
    display: none;
  }

  @media (min-width: ${BREAKPOINTS.md}) {
    padding: 0;
    ${cssVariablesGrid()}
  }
`;
const ImageSlideShowCarouselItem = styled.li.withConfig({
    displayName: 'ImageSlideShowCarouselItem'
}) `
  display: flex;
  position: relative;
  flex-grow: 1;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  align-self: stretch;
  margin-left: ${calculateSpacing(1.5)};
  width: 100%;
  max-width: calc(100% - ${calculateSpacing(4.5)});
  max-height: 100%;
  scroll-snap-align: center;

  &:last-child,
  &:last-of-type {
    margin-right: ${calculateSpacing(3)};
  }

  @media (min-width: ${BREAKPOINTS.md}) {
    align-content: start;
    margin: 0 1.35%;
    width: inherit;
    max-width: 100%;
    scroll-snap-align: start;

    ${({ isLandscape }) => `width: ${isLandscape ? '48.6%' : '23%'}`};

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }
  }
`;
const ImageSlideShowCarouselButton = styled.button.withConfig({
    displayName: 'ImageSlideShowCarouselButton'
}) `
  display: none;
  position: absolute;
  top: calc(50% - 22px);
  transition: opacity 0.3s ease-in;
  opacity: 0;
  background: none;
  ${({ direction }) => `${direction === 'prev' ? 'left: -44px' : 'right: -44px'}`};
  fill: ${({ isInactive }) => isInactive
    ? getColorToken('colors.interactive.base.light')
    : getColorToken('colors.interactive.base.black')};
  pointer-events: ${({ isInactive }) => (isInactive ? 'none' : 'auto')};

  @media (min-width: ${BREAKPOINTS.md}) {
    display: block;
  }
`;
const ImageSlideShowCarouselArrow = styled(ChevronRight).withConfig({
    displayName: 'ImageSlideShowCarouselArrow'
}) `
  ${({ type }) => `transform: scale(${type === 'prev' ? '-0.85' : '0.85'})`};
`;
const ImageSlideShowCarouselSwipe = styled.div.withConfig({
    displayName: 'ImageSlideShowCarouselSwipe'
}) ``;
const ImageSlideShowSlide = styled.div.withConfig({
    displayName: 'ImageSlideShowSlide'
}) ``;
const ImageSlideShowSlideImage = styled.div.withConfig({
    displayName: 'ImageSlideShowSlideImage'
}) `
  display: flex;
  position: relative;
  align-items: center;
  background-color: ${getColorToken('colors.consumption.body.inverted.bg-photo')};
  width: 100%;
`;
const ImageSlideShowSlideMobileText = styled.div.withConfig({
    displayName: 'ImageSlideShowSlideMobileText'
}) `
  width: 100%;

  @media (min-width: ${BREAKPOINTS.md}) {
    display: none;
  }
`;
const ContentUpdatorWrapper = styled.div.withConfig({
    displayName: 'ContentUpdatorWrapper'
}) `
  transition: opacity 0.3s linear;
  min-height: 50px;
`;
const ImageSlideShowSlideText = styled.div.withConfig({
    displayName: 'ImageSlideShowSlideText'
}) `
  display: none;
  width: 100%;

  @media (min-width: ${BREAKPOINTS.md}) {
    display: block;
  }
`;
const ImageSlideShowSlideCredit = styled.p.withConfig({
    displayName: 'ImageSlideShowSlideCredit'
}) `
  margin: ${calculateSpacing(1.5)} 0 0;
  width: 100%;
  text-align: center;
  color: ${getColorToken('colors.consumption.body.standard.body-deemphasized')};

  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.accreditation-core')}
`;
const ImageSlideShowSlideCaption = styled.p.withConfig({
    displayName: 'ImageSlideShowSlideCaption'
}) `
  margin: ${calculateSpacing(0.5)} 0 0;
  width: 100%;
  text-align: center;
  color: ${getColorToken('colors.discovery.body.light.description')};

  a {
    text-decoration: none;
    color: ${getColorToken('colors.discovery.body.light.description')};
  }

  a:hover {
    text-decoration: underline;
  }

  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.description-core')}
`;
const ImageSlideShowLastSlide = styled.div.withConfig({
    displayName: 'ImageSlideShowLastSlide'
}) `
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex-wrap: wrap;
  background-color: ${getColorToken('colors.consumption.body.inverted.bg-photo')};
  padding: 0 ${calculateSpacing(2)};
`;
const ImageSlideShowLastSlideHed = styled.h3.withConfig({
    displayName: 'ImageSlideShowLastSlideHed'
}) `
  align-self: end;
  margin-top: 0;
  width: 100%;
  text-align: center;
  color: ${getColorToken('colors.consumption.lead.inverted.heading')};
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-feature')}
`;
const ImageSlideShowLastSlideDek = styled.p.withConfig({
    displayName: 'ImageSlideShowLastSlideDek'
}) `
  align-self: end;
  width: 100%;
  text-align: center;
  color: ${getColorToken('colors.consumption.lead.inverted.description')};
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-secondary')}
`;
const ImageSlideShowLastSlideLink = styled.a.withConfig({
    displayName: 'ImageSlideShowLastSlideLink'
}) `
  width: 100%;
  text-decoration: none;

  &:hover,
  &:focus {
    p {
      text-decoration: underline;
    }
  }

  & > div {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    @media (min-width: ${BREAKPOINTS.lg}) {
      padding-bottom: ${calculateSpacing(4)};
    }
  }
`;
const ImageSlideShowCTA = styled.div.withConfig({
    displayName: 'ImageSlideShowCTA'
}) `
  margin-bottom: ${calculateSpacing(5)};
  text-align: center;
`;
module.exports = {
    ImageSlideShowWrapper,
    ImageSlideShowHeader,
    ImageSlideShowFooter,
    ImageSlideShowTitle,
    ImageSlideShowCarousel,
    ImageSlideShowCarouselList,
    ImageSlideShowCarouselItem,
    ImageSlideShowCarouselButton,
    ImageSlideShowCarouselArrow,
    ImageSlideShowCarouselSwipe,
    ImageSlideShowSlide,
    ImageSlideShowSlideImage,
    ImageSlideShowSlideMobileText,
    ContentUpdatorWrapper,
    ImageSlideShowSlideText,
    ImageSlideShowSlideCaption,
    ImageSlideShowSlideCredit,
    ImageSlideShowLastSlide,
    ImageSlideShowLastSlideLink,
    ImageSlideShowLastSlideHed,
    ImageSlideShowLastSlideDek,
    ImageSlideShowCTA
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 65956:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    galleryLink: {
        id: 'ImageSlideShow.galleryLink',
        defaultMessage: 'See the gallery',
        description: 'CTA to gallery'
    },
    lastSlideCTA: {
        id: 'ImageSlideShow.lastSlideCTA',
        defaultMessage: 'Explore the gallery',
        description: 'Last slide overlay call to action'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 47863:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const URL = __webpack_require__(88835);
const translations = (__webpack_require__(92601)/* ["default"] */ .A);
const { TrackComponentChannel } = __webpack_require__(78788);
const JUSTWATCH_HOST = 'www.justwatch.com';
const { JustWatchEmbedWrapper, JustWatchEmbedWidgetWrapper, JustWatchEmbedLogoLink, JustWatchEmbedLogoText } = __webpack_require__(27839);
/**
 * JustWatchEmbed component
 *
 * @param {object} props - React props
 * @param {string} [props.apiKey] - JustWatch tenant API key
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} props.url - JustWatch Url
 *
 * @returns {ReactElement} <div>
 */
const JustWatchEmbed = ({ apiKey, className, url }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'JustWatchEmbed'
        });
    }, []);
    const { formatMessage } = useIntl();
    const { hostname, pathname } = URL.parse(url);
    if (hostname !== JUSTWATCH_HOST) {
        return null;
    }
    return (React.createElement(JustWatchEmbedWrapper, { "data-testid": "JustWatchEmbedWrapper", className: className },
        React.createElement(JustWatchEmbedWidgetWrapper, { "data-jw-widget": true, "data-append-iframe": true, "data-api-key": apiKey, "data-url-path": pathname, "data-scale": 0.8, 
            // Since we're injecting markup via a 3rd party
            // We need to circumvent SSR diffing
            // This is same pproach we do with Ads
            suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: '' } }),
        React.createElement(JustWatchEmbedLogoLink, { target: "_blank", "aria-label": "Opens in a new window", rel: "noopener noreferrer", href: "https://www.justwatch.com" },
            formatMessage(translations.poweredBy),
            React.createElement(JustWatchEmbedLogoText, null, "JustWatch"))));
};
JustWatchEmbed.propTypes = {
    apiKey: PropTypes.string,
    className: PropTypes.string,
    url: PropTypes.string.isRequired
};
module.exports = JustWatchEmbed;
//# sourceMappingURL=JustWatchEmbed.js.map

/***/ }),

/***/ 38973:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(47863);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 27839:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BaseLink } = __webpack_require__(76955);
const { calculateSpacing } = __webpack_require__(26865);
const JustWatchEmbedWrapper = styled.div.withConfig({
    displayName: 'JustWatchEmbedWrapper'
}) `
  margin: ${calculateSpacing(5, 'px')} 0;
`;
const JustWatchEmbedWidgetWrapper = styled.div.withConfig({
    displayName: 'JustWatchEmbedWidgetWrapper'
}) ``;
const JustWatchEmbedLogoLink = styled(BaseLink).withConfig({
    displayName: 'JustWatchEmbedLogoLink'
}) `
  color: #000000;
  font-family: sans-serif;
  font-size: 11px;
`;
const JustWatchEmbedLogoText = styled.span.withConfig({
    displayName: 'JustWatchEmbedLogoText'
}) `
  display: inline-block;
  margin-left: 3px;
  background: url('https://widget.justwatch.com/assets/JW_logo_black_10px.svg');
  width: 66px;
  height: 10px;
  overflow: hidden;
  text-indent: -3000px;
`;
module.exports = {
    JustWatchEmbedWrapper,
    JustWatchEmbedWidgetWrapper,
    JustWatchEmbedLogoLink,
    JustWatchEmbedLogoText
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 92601:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    poweredBy: {
        id: 'JustWatchEmbed.PoweredBy',
        defaultMessage: 'Powered by',
        description: 'Text for sponser name prefix'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 99535:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const throttle = __webpack_require__(7350);
const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { connector } = __webpack_require__(57744);
const PaletteProvider = __webpack_require__(49235);
const NavigationDropdown = __webpack_require__(52627);
const { TrackComponentChannel } = __webpack_require__(78788);
const { trackNavigationClick } = __webpack_require__(99623);
const LinkList = __webpack_require__(15740);
const Marquee = __webpack_require__(37748);
const { LinkBannerWrapper, StyledNavigationDropdown } = __webpack_require__(89635);
const { googleAnalytics } = __webpack_require__(90090);
const scrollHelper = __webpack_require__(26890);
const { getComponentPosition, isBannerIntoView } = __webpack_require__(95788);
const trackClick = (url, bannerType, text, tracking = {}) => {
    // snowplow tracking
    trackNavigationClick(url, text, `link_banner_${bannerType}`, 'click', 'link-banner');
    // other tracking
    const { trackingIdentifier, attributes = {} } = tracking;
    if (trackingIdentifier) {
        googleAnalytics.emitGoogleTrackingEvent(`recirc-linkbanner-${trackingIdentifier}-click`, {
            'gtm.elementUrl': url,
            ...attributes,
            type: bannerType
        });
    }
    if ( true &&
        window.dataLayer &&
        bannerType === 'visual-link-banner') {
        window.dataLayer.push({
            event: 'link-title',
            navigationType: 'visual-link-list',
            clickText: text
        });
    }
};
const trackImpression = (tracking, componentPosition, bannerType) => {
    const { trackingIdentifier = '', attributes = {} } = tracking;
    if (trackingIdentifier) {
        googleAnalytics.emitUniqueGoogleTrackingEvent(`recirc-linkbanner-${trackingIdentifier}-impression`, {
            componentPosition,
            ...attributes,
            type: bannerType
        });
    }
};
/**
 * LinkBanner component
 *
 * @param {object} props - React props
 * @param {boolean} [props.clsConfig] - Temporary Optionally prop to improve cls score
 * @param {boolean} [props.hasAllExternalLinks] - Optionally override all links to open in new tab
 * @param {boolean} [props.hasBorder] - Optional flag to display border on container. Defaults to true
 * @param {boolean} [props.hasCustomBackground] - Optional flag to display custom background. Defaults to false
 * @param {boolean} [props.hasDivider] - Optional boolean flag to set divider
 * @param {boolean} [props.hasExtraSpace] - Optional
 * @param {boolean} [props.hasHedLinkColor] - Optional flag to set color of hed as link color
 * @param {boolean} [props.hasUnderline] - Optional flag to give underline to the link
 * @param {boolean} [props.hasLinkListGradient] - Optionally adds a gradient when the link list overflows the viewport
 * @param {boolean} [props.hasMediumTypeface] - Optionally overrides font size in visual-carousel variation
 * @param {boolean} [props.hasShadow] - Optional boolean flag to allow border bottom shadow
 * @param {boolean} [props.hasSmallTypeface] - Optionally sets InPageNavigation variation to utilize a different type token
 * @param {boolean} [props.hasSmallViewportTitle] - Optionally sets style to secondary type token for LinkBanner title
 * @param {boolean} [props.isResponsive] - Optional
 * @param {boolean} [props.hideHed] - Optional Flag to hide the hed from "link-list" variation of banner
 * @param {boolean} [props.hideLinkListImage] - Flag to hide image of link list
 * @param {boolean} [props.hideMarqueeHed] - Optional Flag to hide the hed from "marquee" variation of banner
 * @param {boolean} [props.hideMobileMarqueeImage] - Flag to hide image of marquee banner in mobile view
 * @param {boolean} [props.isCentered] - Optional flag to justify the container to the center of the viewport.
 * @param {object} [props.linkBannerData] - link banner information from the redux store
 * @param {string} [props.palette] - Standard or inverted, standard by default, ideally inherited from parent's nav component
 * @param {boolean} [props.shouldCenterAlignContent] - Optional flag to center align the list items
 * @param {boolean} [props.showMobileCompactView] - flag to enable compact view for mobile
 * @param {boolean} [props.showBannerUnderNav] - Optional flag to determine linkBanner display when drawer is open
 * @param {boolean} [props.shouldReplaceWithDropdown] - Flag to enable link banner to get replaced with NavDropdown
 * @param {string} [props.theme] - Banner theme type
 * @param {string} props.trackingNamespace - Tracking namespace
 * @param {string} [props.type] - Banner display type
 * @param {boolean} [props.hasDefaultChevron] - Optional boolean flag to set chevron by default
 * @param {Array} [props.typesWithBottomMargin] - Optional types for which margin bottom should be applied
 * @returns {ReactElement} <div>
 */
const LinkBanner = ({ clsConfig, hasAllExternalLinks = false, hasBorder = true, hasCustomBackground = false, hasDefaultChevron = false, hasExtraSpace = false, hasHedLinkColor, hasLinkListGradient = false, hasMediumTypeface = false, hasSmallTypeface = false, hasSmallViewportTitle = false, hasUnderline = false, isResponsive = false, hideHed = false, hideLinkListImage = false, hideMarqueeHed = false, hideMobileMarqueeImage = true, shouldReplaceWithDropdown = false, isCentered = true, linkBannerData = {
    hed: '',
    dek: '',
    image: {},
    links: []
}, palette = 'standard', shouldCenterAlignContent = false, showMobileCompactView = false, showBannerUnderNav, theme, trackingNamespace, typesWithBottomMargin = [], hasShadow = true, hasDivider }) => {
    const [dropDown, setDropDown] = React.useState(false);
    const { hed, image, links, tracking = {}, bannerType } = linkBannerData;
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'LinkBanner',
            variation: bannerType
        });
    }, [bannerType]);
    const bannerRef = React.useRef();
    const [isScrolled, setScrolledState] = React.useState(false);
    const lastScrollPosition = React.useRef(0);
    const [shouldTrim, setShouldTrim] = React.useState(false);
    React.useEffect(() => {
        const handleVisualLinkBannerScroll = () => {
            const scrollTop = window.pageYOffset;
            if (scrollHelper.shouldUpdateScroll(isScrolled, scrollTop, lastScrollPosition.current, 'delta')) {
                setScrolledState(scrollTop - lastScrollPosition.current > 0);
                lastScrollPosition.current = scrollTop;
            }
        };
        const throttledScroll = throttle(handleVisualLinkBannerScroll, 150);
        window.addEventListener('scroll', throttledScroll);
        return () => {
            window.removeEventListener('scroll', throttledScroll);
        };
    }, [isScrolled, bannerType]);
    React.useEffect(() => {
        const componentPosition = getComponentPosition(bannerRef);
        const handleScroll = throttle(() => {
            if (isBannerIntoView(bannerRef)) {
                trackImpression(tracking, componentPosition, bannerType);
                window.removeEventListener('scroll', handleScroll, false);
            }
        }, 100);
        if (isBannerIntoView(bannerRef)) {
            trackImpression(tracking, componentPosition, bannerType);
        }
        else {
            window.addEventListener('scroll', handleScroll, false);
            return function cleanup() {
                window.removeEventListener('scroll', handleScroll, false);
            };
        }
        return undefined;
    }, [tracking, bannerType]);
    React.useEffect(() => {
        links.forEach((link) => {
            if (link.text.length > 50)
                setShouldTrim(true);
        });
        function getSizes() {
            if (Math.round((window.devicePixelRatio * 100) / 2) >= 400) {
                setDropDown(true);
            }
            else {
                setDropDown(false);
            }
        }
        if (shouldReplaceWithDropdown) {
            getSizes();
            window.addEventListener('resize', getSizes);
        }
        return function cleanup() {
            window.removeEventListener('resize', getSizes);
        };
    }, [shouldReplaceWithDropdown, links]);
    if (links.length === 0) {
        return null;
    }
    const hasGradient = bannerType === 'visual-link-banner' ? false : hasLinkListGradient;
    const isVisualLinkBanner = bannerType === 'visual-link-banner' || bannerType === 'visual-carousel';
    const linkListBannerProps = {
        hasCarouselControls: isVisualLinkBanner,
        hasNoStickyPosition: bannerType === 'visual-carousel',
        hasMediumTypeface: bannerType === 'visual-carousel' && hasMediumTypeface,
        hasSmallTypeface,
        hasSmallViewportTitle,
        hasExtraSpace,
        hasGradient,
        hasUnderline,
        hed,
        hideLinkListImage: isVisualLinkBanner ? true : hideLinkListImage,
        hideHed,
        image,
        isCentered,
        isFeatured: theme === 'featured',
        links: links.map((link) => ({
            ...link,
            isExternal: hasAllExternalLinks || link.isExternal,
            onClick: () => trackClick(link.url, bannerType, link.text, tracking)
        })),
        shouldHaveBottomMargin: typesWithBottomMargin.includes(bannerType),
        shouldCenterAlignContent,
        trackingNamespace,
        hasDivider,
        hasDefaultChevron
    };
    const marqueeBannerProps = {
        hasUnderline,
        hasCustomBackground,
        hasHedLinkColor,
        hideMarqueeHed,
        hideMobileMarqueeImage,
        isCentered,
        isResponsive,
        linkBannerData: {
            ...linkBannerData,
            hed: hideMarqueeHed ? null : hed
        },
        showMobileCompactView,
        trackClick
    };
    const options = links.map((link) => ({ name: link.text, url: link.url }));
    if (dropDown && shouldReplaceWithDropdown) {
        return (React.createElement(PaletteProvider, { palette: palette },
            React.createElement(StyledNavigationDropdown, { options: options, showLabel: true, shouldTrim: shouldTrim, label: linkBannerData.hed, hasDropdown: dropDown, as: NavigationDropdown })));
    }
    let style = {};
    if (clsConfig?.improveCls) {
        style = { style: { minHeight: `${clsConfig.minHeight}px` } };
    }
    return (React.createElement(PaletteProvider, { palette: palette },
        React.createElement(LinkBannerWrapper, { ...style, id: "link-banner", ref: bannerRef, "data-testid": "LinkBanner", hasBorder: hasBorder, hasCustomBackground: hasCustomBackground, hasHedLinkColor: hasHedLinkColor, hasShadow: hasShadow, showBannerUnderNav: showBannerUnderNav, hasCarouselControls: linkListBannerProps.hasCarouselControls, hasLightBackground: linkListBannerProps.hasLightBackground, hasNoStickyPosition: linkListBannerProps.hasNoStickyPosition, isScrolled: isScrolled, className: classnames({
                'visual-link-banner--is-scrolled': isScrolled
            }) }, bannerType === 'link-list' ||
            bannerType === 'visual-link-banner' ||
            bannerType === 'visual-carousel' ? (React.createElement(LinkList, { ...linkListBannerProps })) : (React.createElement(Marquee, { ...marqueeBannerProps })))));
};
LinkBanner.displayName = 'LinkBanner';
const bannerPropTypes = [
    'marquee',
    'link-list',
    'visual-link-banner',
    'visual-carousel'
];
LinkBanner.propTypes = {
    clsConfig: PropTypes.object,
    hasAllExternalLinks: PropTypes.bool,
    hasBorder: PropTypes.bool,
    hasCustomBackground: PropTypes.bool,
    hasDefaultChevron: PropTypes.bool,
    hasDivider: PropTypes.bool,
    hasExtraSpace: PropTypes.bool,
    hasHedLinkColor: PropTypes.bool,
    hasLinkListGradient: PropTypes.bool,
    hasMediumTypeface: PropTypes.bool,
    hasShadow: PropTypes.bool,
    hasSmallTypeface: PropTypes.bool,
    hasSmallViewportTitle: PropTypes.bool,
    hasUnderline: PropTypes.bool,
    hideHed: PropTypes.bool,
    hideLinkListImage: PropTypes.bool,
    hideMarqueeHed: PropTypes.bool,
    hideMobileMarqueeImage: PropTypes.bool,
    isCentered: PropTypes.bool,
    isResponsive: PropTypes.bool,
    isScrolled: PropTypes.bool,
    linkBannerData: Marquee.propTypes.linkBannerData,
    palette: PropTypes.oneOf(['standard', 'inverted']),
    shouldCenterAlignContent: PropTypes.bool,
    shouldReplaceWithDropdown: PropTypes.bool,
    showBannerUnderNav: PropTypes.bool,
    showMobileCompactView: PropTypes.bool,
    theme: PropTypes.string,
    trackingNamespace: PropTypes.string,
    type: PropTypes.oneOf(bannerPropTypes),
    typesWithBottomMargin: PropTypes.arrayOf(PropTypes.oneOf(bannerPropTypes))
};
const connectedLinkBanner = connector(LinkBanner, {
    keysToPluck: ['linkBannerData']
});
module.exports = { LinkBanner, connectedLinkBanner };
//# sourceMappingURL=LinkBanner.js.map

/***/ }),

/***/ 82873:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const { LinkBanner, connectedLinkBanner } = __webpack_require__(99535);
module.exports = asConfiguredComponent(connectedLinkBanner, 'LinkBanner');
const linkBannerExports = module.exports;
linkBannerExports.LinkBanner = asConfiguredComponent(LinkBanner, 'LinkBanner');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 89635:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.StyledNavigationDropdown = exports.LinkBannerWrapper = exports.DESKTOP_HEIGHT = exports.MOBILE_HEIGHT = void 0;
const { default: styled } = __webpack_require__(92168);
const { getColorStyles, calculateSpacing, getTypographyStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { isInverted } = __webpack_require__(70698);
const { NavigationDropdownListItem, NavigationDropdownListWrapper, NavigationDropdownButton } = __webpack_require__(77906);
const BORDER_HEIGHT = 1;
exports.MOBILE_HEIGHT = 60;
exports.DESKTOP_HEIGHT = 60;
exports.LinkBannerWrapper = styled.section.withConfig({
    displayName: 'LinkBannerWrapper'
}) `
  ${({ hasCarouselControls, hasNoStickyPosition }) => hasCarouselControls &&
    !hasNoStickyPosition &&
    `
      position: fixed;
      box-shadow: rgb(0 0 0 / 10%) 0px 1px 6px;
      transform: translateY(0px);
      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
      z-index: 350;
      padding-top: var(--header-height, ${calculateSpacing(7, 'px')});

      &.visual-link-banner--is-scrolled {
        position: fixed;
        opacity: 0;
        transform: translateY(-200px);
        transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
      }
  `}
  ${({ hasNoStickyPosition, hasShadow }) => hasNoStickyPosition &&
    hasShadow &&
    `box-shadow: rgb(0 0 0 / 10%) 0px 1px 6px;;`}
  ${({ hasBorder, theme, hasShadow }) => hasBorder &&
    hasShadow &&
    `
    border-bottom: ${BORDER_HEIGHT}px solid;
    ${getColorStyles(theme, 'border-color', isInverted(theme)
        ? 'colors.consumption.lead.inverted.divider'
        : 'colors.foundation.menu.dividers')};
  `}

  ${({ theme, hasCustomBackground, hasLightBackground }) => {
    let color;
    if (hasCustomBackground) {
        // TODO: This is a hotfix and need to update after discussing with UI team
        color = 'colors.consumption.lead.special.syndication';
    }
    else if (isInverted(theme)) {
        color = 'colors.consumption.lead.inverted.background';
    }
    else if (hasLightBackground) {
        color = 'colors.discovery.body.light.background';
    }
    else {
        color = 'colors.foundation.menu-bg.collapsed';
    }
    return getColorStyles(theme, 'background', color);
}};

  height: ${({ hasCarouselControls }) => !hasCarouselControls && `${exports.MOBILE_HEIGHT}px`};

  @media (min-width: ${BREAKPOINTS.md}) {
    height: ${({ hasCarouselControls }) => !hasCarouselControls && `${exports.DESKTOP_HEIGHT}px`};
  }

  .body__drawer--open & {
    display: ${({ showBannerUnderNav }) => !showBannerUnderNav && `none`};
  }
`;
exports.StyledNavigationDropdown = styled.div.withConfig({
    displayName: 'StyledNavigationDropdown'
}) `
  ${NavigationDropdownListWrapper} {
    margin-top: 0;
    max-height: ${calculateSpacing(15)};
    ${({ shouldTrim }) => shouldTrim &&
    `
    min-width: ${calculateSpacing(32)};
    white-space: normal;
    `};
  }
  ${NavigationDropdownListItem} {
    height: ${calculateSpacing(3)};
    ${({ shouldTrim }) => shouldTrim && `margin-bottom: ${calculateSpacing(1)}`};
  }
  ${NavigationDropdownButton} {
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.lead.standard.context-signature')};
    ${getTypographyStyles('typography.definitions.globalEditorial.context-primary')};
  }
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 15740:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { LinkBannerLinkList } = __webpack_require__(38365);
const ResponsiveAsset = __webpack_require__(73275);
/**
 *
 * @param {boolean} [props.hasExtraSpace] - Optional
 * @param {boolean} [props.hasGradient] - Optionally adds a gradient when the link list overflows the viewport
 * @param {boolean} [props.hasUnderline] - Optional flag to give underline to the link
 * @param {boolean} [props.hasMediumTypeface] - Optional flag to change NavLink font size
 * @param {boolean} [props.hasSmallTypeface] - Optional flag to change NavLink type token
 * @param {boolean} [props.hasSmallViewportTitle] - Optionally sets style to secondary type token for LinkBanner title
 * @param {string} [props.hed] - hed of the multiple link list banner
 * @param {boolean} [props.hideLinkListImage] - Flag to hide image of link list
 * @param {boolean} [props.hideHed] - Optional Flag to hide the hed from "link-list" variation of banner
 * @param {object} [props.image] - Contains the different configuration for the link banner image
 * @param {boolean} [props.isCentered] - Optional flag to justify the container to the center of the viewport. Defaults to true
 * @param {boolean} [props.isFeatured] - Optional for featured styles
 * @param {Array} [props.links] - array containing the links of the multiple link list
 * @param {boolean} [props.shouldCenterAlignContent] - Optional flag to center align the list items
 * @param {boolean} [props.shouldHaveBottomMargin] - Optional flag to add margin bottom below link banner
 * @param {string} props.trackingNamespace - Tracking namespace
 * @param {boolean} [props.hasDivider] - Optional boolean flag to set dividers
 * @param {boolean} [props.hasDefaultChevron] - Optional boolean flag to set chevron by default
 * @returns {ReactElement} <div>
 */
const LinkList = ({ hasCarouselControls = false, hasDefaultChevron, hasDivider, hasExtraSpace = false, hasGradient = false, hasUnderline = false, hasMediumTypeface = false, hasSmallTypeface = false, hasSmallViewportTitle, hed, hideLinkListImage = false, hideHed = false, image, isCentered = true, isFeatured, links, shouldCenterAlignContent, shouldHaveBottomMargin, trackingNamespace }) => {
    const primaryLink = {
        image: !hideLinkListImage && (image?.segmentedSources || image?.sources)
            ? image
            : null,
        text: !hideHed ? hed : null
    };
    return (React.createElement(LinkBannerLinkList, { hasCarouselControls: hasCarouselControls, hasExtraSpace: hasExtraSpace, hed: hed, hasGradient: hasGradient, hasUnderline: hasUnderline, hasMediumTypeface: hasMediumTypeface, hasSmallTypeface: hasSmallTypeface, hasSmallViewportTitle: hasSmallViewportTitle, isCentered: isCentered, isFeatured: isFeatured, links: links, primaryLink: (primaryLink.image || primaryLink.text) && primaryLink, shouldCenterAlignContent: shouldCenterAlignContent, shouldHaveBottomMargin: shouldHaveBottomMargin, trackingNamespace: trackingNamespace, hasDivider: hasDivider, hasDefaultChevron: hasDefaultChevron }));
};
LinkList.propTypes = {
    hasCarouselControls: PropTypes.bool,
    hasDefaultChevron: PropTypes.bool,
    hasDivider: PropTypes.bool,
    hasExtraSpace: PropTypes.bool,
    hasGradient: PropTypes.bool,
    hasMediumTypeface: PropTypes.bool,
    hasSmallTypeface: PropTypes.bool,
    hasSmallViewportTitle: PropTypes.bool,
    hasUnderline: PropTypes.bool,
    hed: PropTypes.string,
    hideHed: PropTypes.bool,
    hideLinkListImage: PropTypes.bool,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    isCentered: PropTypes.bool,
    isFeatured: PropTypes.bool,
    links: PropTypes.arrayOf(PropTypes.shape({
        url: PropTypes.string,
        text: PropTypes.string,
        isExternal: PropTypes.bool,
        onClick: PropTypes.func
    })),
    shouldCenterAlignContent: PropTypes.bool,
    shouldHaveBottomMargin: PropTypes.bool,
    trackingNamespace: PropTypes.string
};
module.exports = LinkList;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 38365:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.LinkBannerLinkList = exports.DESKTOP_HEIGHT = exports.MOBILE_HEIGHT = void 0;
const { default: styled, css } = __webpack_require__(92168);
const { calculateSpacing, getColorStyles, getColorToken, getTypographyStyles, getLinkStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { isInverted } = __webpack_require__(70698);
const ScrollingNavigation = __webpack_require__(14212);
const { LinkBannerRubric, NavListItem: ScrollingNavigationListItem, NavListItemContent: ScrollingNavigationListItemContent, NavListItemContentAnchor: ScrollingNavigationListItemContentAnchor, ImageWrapper: ScrollingNavigationImageWrapper, NavPrimaryItem: ScrollingNavigationPrimaryItem, NavLink: ScrollingNavigationLink, VisualTextWrap: ScrollingVisualTextWrap, NavListWrapper: ScrollingNavigationNavListWrapper } = __webpack_require__(79424);
const BORDER_HEIGHT = 1;
exports.MOBILE_HEIGHT = 60;
exports.DESKTOP_HEIGHT = 60;
const getSecondaryLinkKey = (hasDivider, theme) => {
    let key = null;
    if (hasDivider)
        key = isInverted(theme)
            ? 'colors.consumption.lead.inverted.link'
            : 'colors.foundation.collapsed-menu.nav-link.default';
    else {
        key = isInverted(theme)
            ? 'colors.consumption.lead.inverted.link'
            : 'colors.foundation.collapsed-menu.nav-link.hover';
    }
    return key;
};
exports.LinkBannerLinkList = styled(ScrollingNavigation).withConfig({
    displayName: 'LinkBannerLinkList'
}) `
  ${({ hasGradient, theme }) => hasGradient &&
    `&::after {
        background: linear-gradient(90deg, rgba(${getColorToken(theme, isInverted(theme)
        ? 'colors.consumption.lead.inverted.background'
        : 'colors.foundation.menu-bg.collapsed', { rgbOnly: true })}, 0) 0%, rgba(${getColorToken(theme, isInverted(theme)
        ? 'colors.consumption.lead.inverted.background'
        : 'colors.foundation.menu-bg.collapsed', { rgbOnly: true })}, 1) 75%);;
      }`}

  ${ScrollingNavigationListItem} {
    ${ScrollingNavigationListItemContent} {
      ${ScrollingNavigationListItemContentAnchor}:first-child {
        margin-right: 0;
        max-width: 66px;
        ${ScrollingNavigationImageWrapper} {
          max-width: 85px;
        }
      }
    }
    height: ${exports.MOBILE_HEIGHT - BORDER_HEIGHT}px;

    @media (min-width: ${BREAKPOINTS.md}) {
      height: ${exports.DESKTOP_HEIGHT - BORDER_HEIGHT}px;
    }

    ${({ hasExtraSpace }) => hasExtraSpace &&
    `
        & + ${ScrollingNavigationListItem} {
          @media (min-width: ${BREAKPOINTS.xl}) {
            margin-left: ${calculateSpacing(5)}
          }
        }
      `}

    ${({ theme, hasDivider }) => hasDivider &&
    `
      &::before {
        ${getColorStyles(theme, 'background-color', 'colors.discovery.body.black.accent')};
      }
      
      &:visited:before {
    ${getColorStyles(theme, 'background-color', 'colors.discovery.body.black.accent')};
    }
    &:hover::before {
      ${getColorStyles(theme, 'background-color', 'colors.discovery.body.black.accent')};
     } 
     &:focus-visible::before  {
        ${getColorStyles(theme, 'background-color', 'colors.discovery.body.black.accent')};
      }

      
 `}
  }
  ${({ hasDivider, theme }) => hasDivider &&
    `&:last-child {
      margin-left: 0;
    }
    &:not(:last-child){
      border-right: ${BORDER_HEIGHT}px solid;
      margin-left: 0;
      padding-right: ${calculateSpacing(2)};
      border-color:${getColorToken(theme, 'colors.discovery.body.white.divider')}
       }`}

  ${ScrollingNavigationLink} {
    ${({ theme, hasDivider }) => getLinkStyles(theme, isInverted(theme)
    ? 'colors.consumption.lead.inverted.link'
    : 'colors.foundation.collapsed-menu.nav-link.default', getSecondaryLinkKey(hasDivider, theme), 'navigation')}
  }

  ${ScrollingNavigationLink} {
    ${({ hasUnderline }) => hasUnderline &&
    `&:link {
          text-decoration: underline;
        }
        `}
    ${({ hasDivider }) => hasDivider &&
    `&:link {
          text-decoration: none;
        }
        `}

    ${({ hasCarouselControls }) => hasCarouselControls &&
    `&:link {
      text-decoration: none;
      color: inherit;
    }`}
  }

  ${ScrollingNavigationLink} {
    ${({ hasSmallTypeface, theme }) => hasSmallTypeface &&
    `${getTypographyStyles(theme, 'typography.definitions.globalEditorial.numerical-small')}
      font-weight: 500;
      `}
  }

  ${ScrollingVisualTextWrap} {
    margin-right: 0;
    margin-left: ${calculateSpacing(2)};
    ${({ hasDivider }) => hasDivider && `line-height: ${calculateSpacing(1.375, 'px')};`}
    width: fit-content;
  }

  ${ScrollingNavigationLink} {
    ${({ hasMediumTypeface }) => hasMediumTypeface && `font-size: 18px;`}
  }

  ${ScrollingNavigationNavListWrapper} {
    ${({ shouldHaveBottomMargin }) => shouldHaveBottomMargin && `margin-bottom: ${calculateSpacing(4)}`}
  }

  ${({ hasCarouselControls }) => hasCarouselControls &&
    `&& {
        height: 100%
      }`}
  ${ScrollingNavigationPrimaryItem} {
    ${({ hasExtraSpace }) => hasExtraSpace && `margin-right: ${calculateSpacing(5)};`}

    ${ScrollingNavigationLink} {
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-primary')};
      ${({ theme }) => getColorStyles(theme, 'color', isInverted(theme)
    ? 'colors.consumption.lead.inverted.heading'
    : 'colors.discovery.body.white.context-signature')};
    }
  }
  ${({ isFeatured }) => isFeatured &&
    css `
      ${LinkBannerRubric} {
        font-size: 11px;
        font-weight: 600;
        line-height: 12px;
        letter-spacing: 1.2px;
        text-align: left;
      }

      ${ScrollingNavigationLink} {
        font-size: 13px;
        font-weight: 600;
        line-height: 17px;
        letter-spacing: 0.1px;
        text-align: left;
        text-transform: unset;
      }
      ${ScrollingNavigationListItem} {
        :not(:last-child)::after {
          background: #e2e2e2;
        }
      }
    `}

  ${ScrollingNavigationLink} {
    display: block;
  }
`;
//# sourceMappingURL=style.js.map

/***/ }),

/***/ 37748:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const ResponsiveAsset = __webpack_require__(73275);
const { LinkBannerMarquee, LinkBannerMarqueeImage, LinkBannerMarqueeImageLink, LinkBannerMarqueeHed, LinkBannerMarqueeDek, LinkBannerMarqueeLink, LinkBannerMarqueeMobileCompactView } = __webpack_require__(36357);
/**
 *
 * @param {object} props - React props
 * @param {boolean} [props.hasCustomBackground] - Optional flag to display custom background. Defaults to false
 * @param {boolean} [props.hasHedLinkColor] - Optional flag to set color of hed as link color
 * @param {boolean} [props.hasUnderline] - Optional flag to give underline to the link
 * @param {boolean} [props.hideMobileMarqueeImage] - Flag to hide image of marquee banner in mobile view
 * @param {boolean} [props.isCentered] - Optional flag to justify the container to the center of the viewport. Defaults to true
 * @param {boolean} [props.isResponsive] - Optional
 * @param {object} [props.linkBannerData] - link banner information from the redux store
 * @param {boolean} [props.showMobileCompactView] - flag to enable compact view for mobile
 * @param {Function} [props.trackClick] - Handles the link banner clicks
 * @returns {ReactElement} <div>
 */
const Marquee = ({ hasCustomBackground = false, hasHedLinkColor = false, hasUnderline = false, hideMobileMarqueeImage = true, isCentered = true, isResponsive = false, linkBannerData = {
    hed: '',
    dek: '',
    image: {},
    links: []
}, showMobileCompactView = false, trackClick }) => {
    const { hed, dek, image, links, tracking } = linkBannerData;
    const primaryLink = links?.[0];
    const ConditionalMobileCompactWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : children;
    return (React.createElement(LinkBannerMarquee, { "data-testid": "LinkBannerMarquee", isCentered: isCentered, showMobileCompactView: showMobileCompactView },
        (image?.segmentedSources || image?.sources) && (React.createElement(LinkBannerMarqueeImageLink, { href: primaryLink.url, onClick: () => trackClick(primaryLink.url, 'marquee_logo', primaryLink.text, tracking) },
            React.createElement(LinkBannerMarqueeImage, { hideMobile: hideMobileMarqueeImage, ...image }))),
        React.createElement(ConditionalMobileCompactWrapper, { condition: showMobileCompactView, wrapper: (children) => (React.createElement(LinkBannerMarqueeMobileCompactView, { "data-testid": "LinkBannerMarqueeMobileCompactView" }, children)) },
            hed && (React.createElement(LinkBannerMarqueeHed, { "data-testid": "LinkBannerMarqueeHed", dangerouslySetInnerHTML: { __html: hed }, hasHedLinkColor: hasHedLinkColor })),
            dek && (React.createElement(LinkBannerMarqueeDek, { "data-testid": "LinkBannerMarqueeDek", dangerouslySetInnerHTML: { __html: dek } })),
            primaryLink && (React.createElement(LinkBannerMarqueeLink, { href: primaryLink.url, onClick: () => trackClick(primaryLink.url, 'marquee', primaryLink.text, tracking), hasUnderline: hasUnderline, hasCustomBackground: hasCustomBackground, isResponsive: isResponsive, hasHedLinkColor: hasHedLinkColor, dangerouslySetInnerHTML: { __html: primaryLink.text } })))));
};
Marquee.propTypes = {
    hasCustomBackground: PropTypes.bool,
    hasHedLinkColor: PropTypes.bool,
    hasUnderline: PropTypes.bool,
    hideMobileMarqueeImage: PropTypes.bool,
    isCentered: PropTypes.bool,
    isResponsive: PropTypes.bool,
    linkBannerData: PropTypes.shape({
        hed: PropTypes.string,
        dek: PropTypes.string,
        image: PropTypes.shape(ResponsiveAsset.propTypes),
        links: PropTypes.arrayOf(PropTypes.shape({
            url: PropTypes.string,
            text: PropTypes.string,
            isExternal: PropTypes.bool
        })),
        bannerType: PropTypes.oneOf(['marquee', 'link-list', 'visual-link-banner']),
        tracking: PropTypes.shape({
            trackingIdentifier: PropTypes.string,
            attributes: PropTypes.shape({
                id: PropTypes.string,
                url: PropTypes.string,
                type: PropTypes.string,
                source: PropTypes.string
            })
        })
    }),
    showMobileCompactView: PropTypes.bool,
    trackClick: PropTypes.func
};
module.exports = Marquee;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 36357:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.LinkBannerMarqueeImageLink = exports.LinkBannerMarqueeLink = exports.LinkBannerMarqueeDek = exports.LinkBannerMarqueeHed = exports.LinkBannerMarqueeMobileCompactView = exports.LinkBannerMarqueeImage = exports.LinkBannerMarquee = exports.DESKTOP_HEIGHT = exports.MOBILE_HEIGHT = void 0;
const { default: styled, css } = __webpack_require__(92168);
const { calculateSpacing, getColorStyles, getColorToken, getTypographyStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { isInverted } = __webpack_require__(70698);
const { BaseLink, BaseText } = __webpack_require__(76955);
const { applyGridSpacing, cssVariablesGrid } = __webpack_require__(1123);
const ExternalLink = __webpack_require__(39832);
const { NavImage: ScrollingNavigationImage } = __webpack_require__(79424);
exports.MOBILE_HEIGHT = 60;
exports.DESKTOP_HEIGHT = 60;
const setBannerColor = (theme) => `
  color: ${getColorToken(theme, 'colors.consumption.body.special.link')};
`;
exports.LinkBannerMarquee = styled.div.withConfig({
    displayName: 'LinkBannerMarquee'
}) `
  ${cssVariablesGrid()}
  display: flex;
  align-items: center;
  ${applyGridSpacing('padding')};
  height: 100%;

  ${({ isCentered }) => isCentered &&
    `
      @media (min-width: ${BREAKPOINTS.md}) {
        justify-content: center;
      }`}

  ${({ isCentered, showMobileCompactView }) => isCentered &&
    showMobileCompactView &&
    `
      @media (max-width: ${BREAKPOINTS.md}) {
        justify-content: center;
      }`}
`;
exports.LinkBannerMarqueeImage = styled(ScrollingNavigationImage).withConfig({ displayName: 'LinkBannerMarqueeImage' }) `
  flex-shrink: 0;

  img {
    height: inherit;
    max-height: ${calculateSpacing(6)};
    @media (min-width: ${BREAKPOINTS.md}) {
      max-height: ${calculateSpacing(7)};
    }
  }

  ${({ hideMobile }) => hideMobile &&
    `&& {
            @media (max-width: ${BREAKPOINTS.md}) {
                display: none;
            }
        }
    `}
`;
exports.LinkBannerMarqueeMobileCompactView = styled.div.withConfig({
    displayName: 'LinkBannerMarqueeMobileCompactView'
}) `
  display: flex;
  align-items: center;

  @media (max-width: ${BREAKPOINTS.md}) {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: ${calculateSpacing(1)};

    > span {
      text-align: center;
      white-space: normal;
    }

    > a {
      margin: 0;
      margin-top: ${calculateSpacing(1)};
    }
  }
`;
exports.LinkBannerMarqueeHed = styled(BaseText)
    .withConfig({ displayName: 'LinkBannerMarqueeHed' })
    .attrs(({ theme }) => ({
    colorToken: isInverted(theme)
        ? 'colors.consumption.lead.inverted.heading'
        : 'colors.discovery.body.white.context-signature'
})) `
    white-space: nowrap;

    > a {
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.description-feature')};
      text-decoration: none;
      ${({ theme }) => getColorStyles(theme, 'color', isInverted(theme)
    ? 'colors.consumption.lead.inverted.heading'
    : 'colors.discovery.body.white.heading')};
  
      &:hover,
      &:focus {
        text-decoration: underline;
      }
    }

    ${({ hasHedLinkColor, theme }) => hasHedLinkColor && setBannerColor(theme)}

    @media (min-width: ${BREAKPOINTS.md}) {
      margin-left: ${calculateSpacing(1)};
    }

  `;
exports.LinkBannerMarqueeHed.defaultProps = {
    as: 'span',
    typeIdentity: 'typography.definitions.globalEditorial.context-primary'
};
exports.LinkBannerMarqueeDek = styled(BaseText)
    .withConfig({ displayName: 'LinkBannerMarqueeDek' })
    .attrs(({ theme }) => ({
    colorToken: isInverted(theme)
        ? 'colors.consumption.lead.inverted.heading'
        : 'colors.discovery.body.white.context-tertiary'
})) `
    margin-left: ${calculateSpacing(1)};
    white-space: nowrap;  
    @media (max-width: ${BREAKPOINTS.md}) {
        display: none;
    }
  `;
const whiteSpaceNoWrap = css `
  white-space: nowrap;
`;
exports.LinkBannerMarqueeDek.defaultProps = {
    as: 'span',
    typeIdentity: 'typography.definitions.globalEditorial.context-tertiary'
};
exports.LinkBannerMarqueeLink = styled(BaseLink)
    .withConfig({ displayName: 'LinkBannerMarqueeLink' })
    .attrs(({ theme, hasCustomBackground }) => {
    let colorSecondaryLinkToken;
    let colorStaticLinkToken;
    if (hasCustomBackground) {
        // TODO: This is a hotfix and need to update after discussing with UI team
        colorSecondaryLinkToken = 'colors.consumption.body.special.link';
        colorStaticLinkToken = 'colors.consumption.body.special.link';
    }
    else if (isInverted(theme)) {
        colorStaticLinkToken = 'colors.consumption.lead.inverted.link';
        colorSecondaryLinkToken = 'colors.consumption.lead.inverted.link';
    }
    else {
        colorSecondaryLinkToken =
            'colors.foundation.collapsed-menu.nav-link.hover';
        colorStaticLinkToken =
            'colors.foundation.collapsed-menu.nav-link.default';
    }
    return {
        colorSecondaryLinkToken,
        colorStaticLinkToken
    };
}) `
  flex-grow: 1;
  margin-left: ${calculateSpacing(1)};
  text-align:  ${({ isResponsive }) => (isResponsive ? 'center' : 'right')};
  ${({ isResponsive }) => !isResponsive && whiteSpaceNoWrap}
  ${({ hasCustomBackground, theme }) => hasCustomBackground && setBannerColor(theme)}

  &::after {
    content: '\\A0\\BB';
  }

  &:hover,
  &:focus {
    text-decoration: none;
  }

  @media (min-width: ${BREAKPOINTS.md}) {
    flex-grow: 0;
    ${whiteSpaceNoWrap}
  }

  ${({ hasUnderline }) => hasUnderline &&
    `&::after {
        content: '';
      }
      &:link {
        text-decoration: underline;
      }`}

`;
exports.LinkBannerMarqueeLink.defaultProps = {
    as: ExternalLink,
    linkStyle: 'navigation',
    typeToken: 'typography.definitions.foundation.link-primary'
};
exports.LinkBannerMarqueeImageLink = styled(BaseLink).withConfig({
    displayName: 'LinkBannerMarqueeImageLink'
}) ``;
exports.LinkBannerMarqueeImageLink.defaultProps = {
    as: ExternalLink,
    linkStyle: 'navigation'
};
//# sourceMappingURL=style.js.map

/***/ }),

/***/ 22901:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { default: JsonmlToReact } = __webpack_require__(1165);
const { TrackComponentChannel } = __webpack_require__(78788);
const { trackNavigationEvent } = __webpack_require__(14307);
const { LinkStackWrapper, LinkStackHeader, LinkStackContent, LinkStackBullet, LinkStackDek, LinkStackFooter, LinkStackList } = __webpack_require__(15539);
const { emitGoogleTrackingEvent, emitUniqueGoogleTrackingEvent } = __webpack_require__(37402);
const { useViewportObserver } = __webpack_require__(55030);
const ResponsiveAsset = __webpack_require__(86157);
const { processLinks, processInternalLink } = __webpack_require__(74804);
const mapInlineEmbeds = __webpack_require__(51009);
const { asConfiguredComponent } = __webpack_require__(12892);
const jsonmlToReact = new JsonmlToReact({
    a: processLinks,
    'inline-embed': mapInlineEmbeds,
    'internal-link': processInternalLink
});
/**
 * LinkStack component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.dangerousDek] - Optional description
 * @param {string} props.dangerousHed - Link stack header title
 * @param {string} [props.body] - Optional link stack footer content
 * @param {object} [props.image] - Optional link stack header image
 * @param {string} [props.imageAlign] - Optional flag that toggles image alignment
 * @param {boolean} [props.isSecondaryHed] - Optional flag that toggles secondary type token for hed
 * @param {boolean} [props.hasDividerAbove] - Optional. Display a top border
 * @param {boolean} [props.hasDividerBelow] - Optional. Display a bottom border
 * @param {boolean} [props.hasBulletBottomSpacing] - Optional flag that toggles space for list item
 * @param {boolean} [props.hasExtraDividerBelowSpacing] - Optional flag that toggles for extra space above hed and top border
 * @param {boolean} [props.hasMarginSpacing] - Optional. Set to `true` for margin spacing
 * @param {Array<string>} props.items - list of text items with inline links
 * @param {Array<object>} props.textItems - list of text items with inline links
 * @param {object} props.publishInfo - Publish info of the link stack
 * @param {number} props.publishInfo.version - Current published version
 * @param {string} [props.shouldOverrideLSFMarginBottom] - Optional prop to override the margin of linkstack footer
 * @param {string} [props.shouldOverrideMarginBottom] - Optional prop to override the margin of linkstack list
 * @param {string} props.uri - Published url of the link stack
 * @param {string} [props.dividerColor] - Optional prop to get divider color for article page from copilot
 * @returns {ReactElement} <div>
 */
const LinkStack = ({ body, className, dangerousDek, dangerousHed, hasDividerAbove = true, hasDividerBelow = true, hasBulletBottomSpacing = true, hasExtraDividerBelowSpacing = false, hasMarginSpacing = false, image, imageAlign = 'left', isSecondaryHed = false, items, textItems, publishInfo, dividerColor, shouldOverrideLSFMarginBottom = false, shouldOverrideMarginBottom = false, uri }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'LinkStack'
        });
    }, []);
    const getLinkStackItems = (eventType, url, text) => {
        if (eventType === 'click')
            return [
                {
                    content_title: text,
                    content_url: url
                }
            ];
        const itemsList = [];
        textItems.forEach((item) => {
            const matches = item.content.match(/\[(.*?)\]\((.*?)\)/);
            const hyperlink = matches ? matches[2] : null;
            itemsList.push({
                content_title: item.content.replace(/<[^>]*>/g, ''),
                content_url: hyperlink
            });
        });
        return itemsList;
    };
    const trackSnowplowNavigationEvent = (eventType, url, text) => {
        const eventData = {
            type: eventType,
            label: dangerousHed.replace(/<[^>]*>/g, ''),
            subject: 'link_stack',
            subject_id: uri,
            subject_version: publishInfo.version.toString(),
            items: getLinkStackItems(eventType, url, text) || [null],
            placement: 'content_footer',
            total_index: textItems?.length
        };
        trackNavigationEvent(eventData);
    };
    useViewportObserver('.linkstack', undefined, (isInViewport) => {
        if (isInViewport) {
            emitUniqueGoogleTrackingEvent('link-stack-impression', {
                linkStackId: uri,
                linkStackVersion: publishInfo?.version
            });
            trackSnowplowNavigationEvent('impression');
        }
    });
    const clickHandler = (event) => {
        const { target } = event;
        const parent = target.closest('.link-stack--link-item') ??
            target.closest('.link-stack--footer');
        if (target.tagName === 'A' && parent) {
            emitGoogleTrackingEvent('link-stack-click', {
                linkStackId: uri,
                linkStackVersion: publishInfo?.version,
                clickURL: event.target.getAttribute('href')
            });
            trackSnowplowNavigationEvent('click', event.target.getAttribute('href'), event.target.innerText);
        }
    };
    if (!items?.length) {
        return null;
    }
    return (React.createElement(LinkStackWrapper, { className: classnames('linkstack', className), onClick: clickHandler, "data-testid": "LinkStack" },
        React.createElement(LinkStackHeader, { className: "link-stack--heading", dangerousHed: dangerousHed, image: image, imageAlign: imageAlign, isSecondaryHed: isSecondaryHed, hasDividerAbove: hasDividerAbove, hasDividerBelow: hasDividerBelow, hasExtraDividerBelowSpacing: hasExtraDividerBelowSpacing, dividerColor: dividerColor, "data-testid": "LinkStackHed" }),
        React.createElement(LinkStackContent, { hasMarginSpacing: hasMarginSpacing },
            dangerousDek && (React.createElement(LinkStackDek, { className: "link-stack--description", dangerouslySetInnerHTML: { __html: dangerousDek } })),
            React.createElement(LinkStackList, { shouldOverrideMarginBottom: shouldOverrideMarginBottom }, items?.map((link, i) => (React.createElement(LinkStackBullet, { className: "link-stack--link-item", key: i, "data-testid": "LinkStackBullet", hasBulletBottomSpacing: hasBulletBottomSpacing }, jsonmlToReact.convert(link))))),
            body && (React.createElement(LinkStackFooter, { shouldOverrideLSFMarginBottom: shouldOverrideLSFMarginBottom, className: "link-stack--footer" }, jsonmlToReact.convert(body))))));
};
LinkStack.propTypes = {
    body: PropTypes.array,
    className: PropTypes.string,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string.isRequired,
    dividerColor: PropTypes.string,
    hasBulletBottomSpacing: PropTypes.bool,
    hasDividerAbove: PropTypes.bool,
    hasDividerBelow: PropTypes.bool,
    hasExtraDividerBelowSpacing: PropTypes.bool,
    hasMarginSpacing: PropTypes.bool,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    imageAlign: PropTypes.oneOf(['left', 'right']),
    isSecondaryHed: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.array).isRequired,
    publishInfo: PropTypes.shape({
        version: PropTypes.number
    }).isRequired,
    shouldOverrideLSFMarginBottom: PropTypes.bool,
    shouldOverrideMarginBottom: PropTypes.bool,
    textItems: PropTypes.arrayOf(PropTypes.object),
    uri: PropTypes.string
};
LinkStack.displayName = 'LinkStack';
module.exports = asConfiguredComponent(LinkStack, 'LinkStack');
//# sourceMappingURL=LinkStack.js.map

/***/ }),

/***/ 63401:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(22901);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 15539:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { calculateSpacing, getColorStyles, getTypographyStyles, getLinkStyles } = __webpack_require__(26865);
const { INTERACTIVE } = __webpack_require__(96472);
const SectionTitle = __webpack_require__(35864);
const ResponsiveAsset = __webpack_require__(73275);
const { SectionTitleImageWrapper, SectionTitleHed } = __webpack_require__(33500);
const { applyCustomBorderTopColor } = __webpack_require__(1123);
const LinkStackWrapper = styled.div.withConfig({
    displayName: 'LinkStackWrapper'
}) `
  padding-bottom: ${calculateSpacing(4)};

  .small {
    font-variant: small-caps;
    text-transform: lowercase;
    font-style: normal;
  }
`;
const LinkStackHeader = styled(SectionTitle).withConfig({
    displayName: 'LinkStackHeader'
}) `
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;

  ${SectionTitleHed} {
    ${({ hasExtraDividerBelowSpacing }) => hasExtraDividerBelowSpacing
    ? `
         padding: ${calculateSpacing(0)};
        `
    : `
         padding: ${calculateSpacing(1)} 0;`};

    ${({ theme, isSecondaryHed }) => isSecondaryHed
    ? getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.subhed-break-secondary')
    : getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.subhed-break-primary')}
  }
  ${({ dividerColor }) => dividerColor &&
    css `
      ${applyCustomBorderTopColor(dividerColor)};
    `}
  ${SectionTitleImageWrapper} {
    padding-right: ${calculateSpacing(1)};
  }

  ${ResponsiveAsset} img {
    width: auto;
    height: ${calculateSpacing(6)};
    overflow: hidden;
  }

  ${({ hasExtraDividerBelowSpacing }) => hasExtraDividerBelowSpacing
    ? `
         padding-top: ${calculateSpacing(5)};
         margin: 0;
        `
    : `padding: ${calculateSpacing(0)};
         margin-top: ${calculateSpacing(2)};
         margin-bottom: ${calculateSpacing(2)};
      `};

  ${({ imageAlign }) => imageAlign === 'right'
    ? `
    flex-direction: row;
    justify-content: space-between;
    ${SectionTitleImageWrapper} {
      padding-right: 0;
    }
    `
    : ``};
`;
const LinkStackContent = styled.div.withConfig({
    displayName: 'LinkStackContent'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.body-core')};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body')};

  ul {
    padding-left: ${calculateSpacing(2)};
  }

  a {
    transition: color ${INTERACTIVE.timingLinkDefault} ease;
    ${({ theme }) => getLinkStyles(theme, 'colors.consumption.body.standard.link', 'colors.consumption.body.standard.link-hover')}
  }

  ${({ hasMarginSpacing }) => hasMarginSpacing &&
    `
    margin: ${calculateSpacing(2)} 0 0 ${calculateSpacing(4)};
  `}
`;
const LinkStackList = styled.ul.withConfig({
    displayName: 'LinkStackList'
}) `
  ${({ shouldOverrideMarginBottom }) => shouldOverrideMarginBottom && `margin-bottom: ${calculateSpacing(1)};`}
`;
const LinkStackDek = styled.div.withConfig({
    displayName: 'LinkStackDek'
}) ``;
const LinkStackFooter = styled.div.withConfig({
    displayName: 'LinkStackFooter'
}) `
  margin-bottom: ${calculateSpacing(2)};

  ${({ shouldOverrideLSFMarginBottom }) => shouldOverrideLSFMarginBottom && `margin-bottom: ${calculateSpacing(1)};`}
`;
const LinkStackBullet = styled.li.withConfig({
    displayName: 'LinkStackBullet'
}) `
  ${({ hasBulletBottomSpacing }) => hasBulletBottomSpacing && ` margin-bottom: ${calculateSpacing(2)};`}

  p {
    margin: 0;
  }
`;
module.exports = {
    LinkStackWrapper,
    LinkStackHeader,
    LinkStackContent,
    LinkStackBullet,
    LinkStackDek,
    LinkStackFooter,
    LinkStackList
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 14245:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const isEmpty = __webpack_require__(62193);
const snakeCase = __webpack_require__(4124);
const isString = __webpack_require__(85015);
const get = __webpack_require__(58156);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(41360)/* ["default"] */ .A);
const PaletteProvider = __webpack_require__(49235);
const Viewport = __webpack_require__(52089);
const ChevronIcon = __webpack_require__(69880);
const CloseIcon = __webpack_require__(76399);
const breakpoints = __webpack_require__(99906);
const actOnMousePosition = __webpack_require__(13738);
const Navigation = __webpack_require__(54790);
const AccountLinks = __webpack_require__(33795);
const { TrackComponentChannel } = __webpack_require__(78788);
const { storageFactory } = __webpack_require__(60663);
const localStore = storageFactory(() => window.sessionStorage);
const { trackNavigationEvent } = __webpack_require__(14307);
/* eslint-disable complexity */
const { MarginTopSize, MegaMenuGridWrapper, MegaMenuContent, MegaMenuCloseIcon, MegaMenuDefaultWrapper, MegaMenuDrawerNavLink, MegaMenuColumnWrapper, MegaMenuNavigationPrimary, MegaMenuVerboseCategoryList, MegaMenuVerboseCategoryLink, MegaMenuVerboseWrapper, MegaMenuWrapper, MegaMenuBottom, MegaMenuAccount, MegaMenuSignInLink, MegaMenuUtilityLinks, MegaMenuMobileVerboseWrapper, MegaMenuMobileClickOutLink, MegaMenuNavLinkWithChevron, MegaMenuColumnFooterAllLinkWrapper } = __webpack_require__(10246);
const { useState, useEffect, useRef } = React;
const { asConfiguredComponent } = __webpack_require__(12892);
const { NavDrawer } = __webpack_require__(12501);
const handleClickNavigation = (text) => {
    if ( true && window.dataLayer) {
        window.dataLayer.push({
            event: 'navigation-click',
            navigationType: 'header',
            clickText: text
        });
    }
};
/**
 * MegaMenu Component.
 *
 * @param {object} props - React props
 * @param {object} props.accountProps - Required properties for the account drop down
 * @param {Function} props.collapseMegaMenu - Optional function to trigger collapsing megamenu
 * @param {number} props.containerMinHeight - Optional variable to mark the container's height which will be used to trigger collapseMegaMenu
 * @param {boolean} [props.isAccountsEnabled] - Boolean to determine whether to show account-related functionality
 * @param {boolean} [props.isContentCentered] - Boolean to determine whether content should be centered with a max-width
 * @param {boolean} props.hasLinkBanner - Optional flag to determine styling if link banner is present
 * @param {boolean} props.isSlim - Display a slimmer navigation across all breakpoints, used to determine drawer positioning
 * @param {object} [props.megaMenuContent] - Content to display megamenu
 * @param {object} [props.primaryNavLink] - Primary link object
 * @param {boolean} [props.hasExtraTopMargin] -  Optional value to remove extra space
 * @param {string} [props.theme] - Theme set by the base page "standard" | "inverted"
 * @param {object} props.user - required user object
 * @param {boolean} props.user.isAuthenticated - represents if the user is currently authenticated
 * @param {Array} [props.utilityLinks] - Optional Secondary list of `{ isExternal, text, url, isPersistent }` object links
 * @param {object} [props.variations] - Optional variation properties used in rendering the component
 * @param {boolean} [props.variations.multipleIteration] - Optional value determining to show new implementation of iterating links in mobile view
 * @param {boolean} [props.variations.showBorderHighlight] - Optional value determining whether to show border highlight on hover and on active
 * @param {boolean} [props.variations.showClickOutLink] - Optional value determining to show click out link
 * @param {boolean} [props.variations.showCloseCTA] - Optional value determining to show close action button
 * @param {boolean} [props.variations.showMenuOnClick] - Optional value determining to open menu on click action
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 * @param {string} [props.navHighlightColour] - colour code for highlighting navigation link
 * @returns {ReactElement} <MegaMenu>
 */
const MegaMenu = (props) => {
    const { accountProps = {
        signInLink: '/account/sign-in'
    }, megaMenuContent = {}, isAccountsEnabled, isContentCentered, isSlim, user, collapseMegaMenu, containerMinHeight, theme = 'standard', utilityLinks = [], hasLinkBanner, primaryNavLink = {}, variations = {
        layout: 'default',
        multipleIteration: false,
        showBorderHighlight: false,
        showClickOutLink: false,
        showCloseCTA: true,
        showMenuOnClick: false
    }, variationName, isDrawerOpen = false, hasExtraTopMargin = false, navHighlightColour } = props;
    const { accountLinks, signInLink } = accountProps;
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'MegaMenu',
            variation: variationName
        });
    }, [variationName]);
    const layout = megaMenuContent.layout || variations.layout;
    const [parentMenus, setParentMenus] = useState(megaMenuContent.children);
    const [currentLink, setCurrentLink] = useState({});
    const [currentChildren, setCurrentChildren] = useState([]);
    const [desktopSml, setDesktopSml] = useState(false);
    const [showCategories, setShowCategories] = useState(true);
    const [masterLinks, setMasterLink] = useState([]);
    const [activeLink, setActiveLink] = useState('');
    const [activeLinks, setActiveLinks] = useState([]);
    const [activeLinkChilds, setActiveLinkChilds] = useState([]);
    const megamenuUtilityLinks = utilityLinks.filter((link) => link.showInBottomNav);
    const showSecondaryFooterAllLink = get(megaMenuContent, 'showSecondaryFooterAllLink', false);
    const wrapperRef = useRef(null);
    // create a tracking string for Secondary link
    const createTrackingStringForSecondary = (clickedLink, primaryLink, index) => `${primaryLink}/${clickedLink}/${index}`;
    // create a tracking string for Tertiary link on mobile
    const createTrackingStringForTertiaryMobile = (primaryLinks) => `${primaryLinks.join('|')}|`;
    // create a tracking string for Tertiary link on mobile
    const createTrackingStringForTertiaryDesktop = (primaryNavigationLink = '', currentLinkUrl = '') => `${primaryNavigationLink}|${currentLinkUrl}|`;
    // mega menu tracking
    const trackingNavClick = (linkName, primaryLink, index) => {
        const trackingString = primaryLink
            ? createTrackingStringForSecondary(linkName, primaryLink, index + 1)
            : `Nav Link/${linkName}`;
        handleClickNavigation(trackingString);
    };
    // find for the children links
    const findItemNested = (arr, linkText, nestingKey = 'children') => {
        const activeLinkObj = arr.reduce((a, item) => {
            if (a)
                return a;
            if (item.text === linkText || item.groupName === linkText)
                return item;
            if (item[nestingKey])
                return findItemNested(item[nestingKey], linkText, nestingKey);
            return null;
        }, null);
        return activeLinkObj;
    };
    // updating the array which stores data to of links clicked
    const updateActiveLinks = (updateType, linkName) => {
        if (updateType === 'push') {
            setActiveLinks([...activeLinks, linkName]);
        }
        else {
            const indexOfLink = activeLinks.indexOf(linkName);
            const _activeLinks = activeLinks;
            if (indexOfLink > -1) {
                _activeLinks.splice(indexOfLink, 1);
            }
        }
    };
    // action called on link clicked
    const linkClick = (linkName, index = null) => {
        setActiveLink(linkName);
        updateActiveLinks('push', linkName);
        trackingNavClick(linkName, activeLink, index);
        const activeLinkObj = findItemNested(masterLinks, linkName);
        setActiveLinkChilds(activeLinkObj);
    };
    // action called on back link clicked
    const backLinkClick = (linkName) => {
        updateActiveLinks('pop', linkName);
        const nextActiveLink = activeLinks.length && activeLinks[activeLinks.length - 1];
        setActiveLink(nextActiveLink);
        const activeLinkObj = findItemNested(masterLinks, nextActiveLink);
        if (activeLinkObj) {
            setActiveLinkChilds(activeLinkObj);
        }
    };
    const getLinkText = (currentLink) => currentLink.text || currentLink.groupName;
    const hoverLink = (e) => {
        const hoveredLink = desktopSml
            ? e.target.firstChild.textContent
            : e.target.firstChild.querySelector('span').textContent;
        parentMenus.forEach((menu) => {
            if (hoveredLink === getLinkText(menu)) {
                setCurrentLink(menu);
                setShowCategories(!showCategories);
                setCurrentChildren([]);
            }
        });
    };
    const clickLink = (hoveredLink) => {
        parentMenus.forEach((menu, index) => {
            if (hoveredLink === menu.text) {
                setCurrentLink(menu);
                setShowCategories(!showCategories);
                setCurrentChildren([]);
                trackingNavClick(hoveredLink, primaryNavLink?.text, index);
            }
        });
    };
    const determineScreenSize = () => {
         true &&
            window.innerWidth < breakpoints.minThresholds.xl
            ? setDesktopSml(true)
            : setDesktopSml(false);
    };
    const updateMousePosition = (e) => {
        if (variations.showClickOutLink && containerMinHeight && !desktopSml) {
            actOnMousePosition({
                yval: e.clientY,
                ymax: containerMinHeight,
                func: collapseMegaMenu
            });
        }
        else if (wrapperRef.current &&
            !wrapperRef.current.contains(e.target) &&
            !desktopSml &&
            !variations.showClickOutLink) {
            collapseMegaMenu(e);
        }
    };
    const trackSnowplowEvent = (event) => {
        const eventData = {
            type: 'click',
            label: event?.target?.textContent?.toString(),
            subject: 'mega_menu',
            items: [
                {
                    content_title: event?.target?.textContent?.toString(),
                    content_url: event?.target?.href
                }
            ],
            placement: 'top'
        };
        trackNavigationEvent(eventData);
    };
    useEffect(() => {
        window.addEventListener('mousemove', updateMousePosition);
        return () => window.removeEventListener('mousemove', updateMousePosition);
    });
    useEffect(() => {
        setParentMenus(megaMenuContent.children);
        // Reset current link and display categories for megaMenuMobile
        setCurrentLink(layout === 'verbose' ? megaMenuContent.children[0] : {});
        setShowCategories(true);
    }, [megaMenuContent, layout]);
    useEffect(() => {
        parentMenus.map((menu) => menu.text === currentLink.text
            ? setCurrentChildren(menu.children || menu.links)
            : null);
    }, [showCategories, currentLink, parentMenus]);
    useEffect(() => {
        determineScreenSize();
    });
    useEffect(() => {
        setMasterLink(megaMenuContent.children);
    }, [megaMenuContent]);
    const { formatMessage } = useIntl();
    const renderHeadingProperties = (data) => {
        return {
            groupName: data.groupName,
            isExternal: data.isExternal,
            isLink: data.isLink,
            url: data.url
        };
    };
    const handleLinkClick = (url) => {
        // Navigates to the specified URL
        window.location.href = url;
    };
    const determineItemCount = () => {
        // if max items are set in config, explicitly return value
        if (megaMenuContent.maxItemsPerColumn)
            return megaMenuContent.maxItemsPerColumn;
        if (layout === 'default') {
            // check if footer link is displayed which accounts for extra item
            return showSecondaryFooterAllLink
                ? megaMenuContent.children.length + 2
                : megaMenuContent.children.length;
        }
        // default count to 10
        return 10;
    };
    const primaryNavProps = (links, includesClickOut, headingData, isCard = false, hasCardList = false) => {
        const isHeadingAString = isString(headingData);
        const heading = isHeadingAString || !headingData ? headingData : headingData.groupName;
        const card = isCard ? ' nav__card' : '';
        const navProps = {
            attributes: {
                'aria-labelledby': heading
                    ? snakeCase(heading)
                    : formatMessage(translations.megaMenuNavigationPrimaryAriaLabel)
            },
            className: `drawer__navigation--primary${card}`,
            hasCardList,
            heading: heading || '',
            includesClickOut: includesClickOut || false,
            isCard,
            links,
            layout,
            maxItemsPerColumn: determineItemCount(),
            showContentDivider: true,
            isMegamenu: true
        };
        if (!isHeadingAString && headingData) {
            navProps.headingUrl = headingData.url || '';
            navProps.isHeadingALink = headingData.isLink || false;
            navProps.isHeadingUrlExternal = headingData.isExternal || false;
        }
        if (heading)
            navProps.headingAttributes = { id: snakeCase(heading) };
        return navProps;
    };
    const categoryListItem = (text, idx) => {
        const key = idx || '';
        const activeStyling = text === currentLink.text ? 'active' : '';
        const listItemProps = desktopSml
            ? {
                className: !showCategories ? 'active' : '',
                onClick: (e) => hoverLink(e),
                key
            }
            : {
                className: activeStyling,
                onMouseEnter: (e) => !variations.showMenuOnClick && hoverLink(e),
                onClick: () => variations.showMenuOnClick && clickLink(text),
                onKeyDown: (e) => {
                    if (e.keyCode === 13) {
                        // enter keypress
                        hoverLink(e);
                    }
                },
                key
            };
        return !desktopSml ? (React.createElement("li", { ...listItemProps },
            React.createElement(MegaMenuVerboseCategoryLink, { href: !variations.showMenuOnClick ? currentLink.url : undefined },
                React.createElement("span", null, text),
                React.createElement(ChevronIcon, { width: "1rem", height: "1rem" })))) : (React.createElement("li", { ...listItemProps },
            React.createElement("span", null, text),
            React.createElement(ChevronIcon, { width: "1rem", height: "1rem" })));
    };
    const categoryListItemForMobileMenu = (text, idx, linkClickEvent, url = '#') => {
        const key = idx || '';
        const activeStyling = text === activeLink ? 'active' : '';
        const listItemProps = {
            className: 'li-with-chevron',
            onClick: () => linkClickEvent(text, idx),
            key
        };
        return (React.createElement("li", { ...listItemProps },
            React.createElement(MegaMenuNavLinkWithChevron, { className: activeStyling, href: url, onClick: (e) => {
                    e.preventDefault();
                    return false;
                }, role: "link" },
                React.createElement("span", null, text),
                React.createElement(ChevronIcon, { width: "1rem", height: "1rem" }))));
    };
    const groupListItemForMobile = (subChild, index, noHeadingGroupName = false) => {
        const headingProperties = renderHeadingProperties(subChild);
        const trackingText = createTrackingStringForTertiaryMobile(activeLinks);
        return (React.createElement(MegaMenuNavigationPrimary, { ...primaryNavProps(subChild.links, false, headingProperties), key: index, noHeadingGroupName: noHeadingGroupName, showDividerOnTop: true, isHeadingEmpty: true, trackingText: trackingText, trackingTextIndex: index, navHighlightColour: navHighlightColour }));
    };
    const megaMenuDrawerNavLink = ({ handleLinkClickUrl, url, label, clickEventLabel, key }) => {
        return (React.createElement(MegaMenuDrawerNavLink, { key: key, onClick: () => handleLinkClick(handleLinkClickUrl) },
            React.createElement("span", null,
                React.createElement("a", { href: url, onClick: () => clickEventLabel && handleClickNavigation(clickEventLabel) }, label))));
    };
    const renderClickOutLinks = get(megaMenuContent, 'clickOutLinks') &&
        megaMenuContent.clickOutLinks.map((link, index) => megaMenuDrawerNavLink({
            handleLinkClickUrl: link.url,
            url: link.url,
            label: link.text,
            clickEventLabel: link.text,
            key: index
        }));
    const megaMenuCategoryList = (React.createElement(MegaMenuVerboseCategoryList, { showBorderHighlight: variations.showBorderHighlight, showUnderlineOnHover: !variations.showMenuOnClick },
        parentMenus.map((child, index) => categoryListItem(getLinkText(child), index)),
        showSecondaryFooterAllLink &&
            megaMenuDrawerNavLink({
                handleLinkClickUrl: megaMenuContent.url,
                url: megaMenuContent.url,
                label: `${formatMessage(translations.allText)} ${megaMenuContent.text}`,
                clickEventLabel: `${primaryNavLink?.text}|Viewall`,
                key: null
            }),
        renderClickOutLinks));
    const getMegaMenuCategoryList = (menu) => {
        let hasGroup = false;
        const content = menu
            .filter((child) => !child.isCard)
            .map((child, index) => {
            if (child.hasChildren) {
                return categoryListItemForMobileMenu(child.text || child.groupName, index, linkClick, child.url);
            }
            else if (child.links) {
                hasGroup = true;
                // flag current item if the heading is empty
                const noHeadingGroupName = child.groupName === '';
                return groupListItemForMobile(child, index, noHeadingGroupName);
            }
            return megaMenuDrawerNavLink({
                handleLinkClickUrl: child.url,
                url: child.url,
                label: child.text,
                clickEventLabel: null,
                key: index
            });
        });
        return hasGroup ? (React.createElement(React.Fragment, null, content)) : (React.createElement(MegaMenuVerboseCategoryList, { showBorderHighlight: variations.showBorderHighlight },
            content,
            showSecondaryFooterAllLink &&
                megaMenuDrawerNavLink({
                    handleLinkClickUrl: megaMenuContent.url,
                    url: megaMenuContent.url,
                    label: `${formatMessage(translations.allText)} ${megaMenuContent.text}`,
                    clickEventLabel: `${primaryNavLink?.text}|Viewall`,
                    key: null
                })));
    };
    const megaMenuCards = (menu) => {
        const cardsData = menu.filter((child) => child.isCard);
        if (!isEmpty(cardsData)) {
            const cardHeading = cardsData[0].groupName;
            const cardLinks = cardsData.map((item) => item.links);
            return (React.createElement(MegaMenuNavigationPrimary, { ...primaryNavProps(cardLinks, false, cardHeading, true, true), showDividerOnTop: true, isHeadingEmpty: true }));
        }
        return false;
    };
    const megaMenuMobileMultipleIteration = (React.createElement(MegaMenuMobileVerboseWrapper, { onClick: trackSnowplowEvent },
        activeLink ? (React.createElement(React.Fragment, null,
            React.createElement(MegaMenuVerboseCategoryList, { showBorderHighlight: variations.showBorderHighlight }, categoryListItemForMobileMenu(activeLink, null, backLinkClick)),
            getMegaMenuCategoryList(activeLinkChilds.children),
            megaMenuCards(activeLinkChilds.children),
            activeLinkChilds.hasClickOut && (React.createElement(MegaMenuMobileClickOutLink, null,
                React.createElement("a", { href: activeLinkChilds.url }, activeLinkChilds.clickOutText
                    ? activeLinkChilds.clickOutText
                    : `${formatMessage(translations.destinationClickOut)} ${activeLinkChilds.text}`))))) : (getMegaMenuCategoryList(masterLinks)),
        !activeLink && (React.createElement(MegaMenuBottom, null,
            isAccountsEnabled && (React.createElement(MegaMenuAccount, null, user &&
                (user.isAuthenticated ? (React.createElement(AccountLinks, { accountLinks: accountLinks, className: "drawer-account__options" })) : (React.createElement(MegaMenuSignInLink, { href: signInLink, rel: "nofollow" }, formatMessage(translations.megaMenuSignInLinkText)))))),
            React.createElement(NavDrawer, { use: "MegaMenu" }),
            megamenuUtilityLinks.length > 0 && (React.createElement(MegaMenuUtilityLinks, { links: megamenuUtilityLinks }))))));
    const megaMenuMobile = (React.createElement(MegaMenuVerboseWrapper, { onClick: trackSnowplowEvent }, showCategories ? (megaMenuCategoryList) : (React.createElement(React.Fragment, null,
        React.createElement(MegaMenuVerboseCategoryList, { showBorderHighlight: variations.showBorderHighlight }, categoryListItem(getLinkText(currentLink))),
        currentLink &&
            (currentLink.hasChildren ? (currentChildren.map((subChild, index) => {
                const headingProperties = renderHeadingProperties(subChild);
                return (React.createElement(MegaMenuNavigationPrimary, { ...(currentLink.hasClickOut &&
                        index + 1 >= currentChildren.length
                        ? primaryNavProps([
                            ...subChild.links,
                            {
                                isExternal: false,
                                text: `${formatMessage(translations.destinationClickOut)} ${currentLink.text}`,
                                url: currentLink.url
                            }
                        ], currentLink.hasClickOut, headingProperties)
                        : primaryNavProps(subChild.links, false, headingProperties)), key: index }));
            })) : (React.createElement(MegaMenuNavigationPrimary, { ...primaryNavProps(currentChildren) })))))));
    const columnLayout = (React.createElement(MegaMenuColumnWrapper, { onClick: trackSnowplowEvent },
        parentMenus.map((menu, idx) => {
            const links = menu.children || menu.links;
            if (!links) {
                return null;
            }
            const headingProperties = renderHeadingProperties(menu);
            const trackingText = `${primaryNavLink?.text || megaMenuContent?.text}|`;
            return (React.createElement(MegaMenuNavigationPrimary, { ...primaryNavProps(links, false, headingProperties), marginTopSize: MarginTopSize.LARGE, trackingText: trackingText, key: idx, hasExtraTopMargin: hasExtraTopMargin, navHighlightColour: navHighlightColour }));
        }),
        showSecondaryFooterAllLink && (React.createElement(MegaMenuColumnFooterAllLinkWrapper, null, megaMenuDrawerNavLink({
            handleLinkClickUrl: megaMenuContent.url,
            url: megaMenuContent.url,
            label: `${formatMessage(translations.allText)} ${megaMenuContent.text}`,
            clickEventLabel: null,
            key: null
        })))));
    const verboseLayout = (React.createElement(MegaMenuVerboseWrapper, { onClick: trackSnowplowEvent },
        megaMenuCategoryList,
        currentLink && isDrawerOpen ? (currentChildren?.map((subChild, index) => {
            const groupNameExists = Boolean(get(subChild, 'groupName'));
            const showBlankHeading = groupNameExists || get(subChild, 'isCard', false);
            const headingProperties = renderHeadingProperties(subChild);
            const trackingText = createTrackingStringForTertiaryDesktop(primaryNavLink?.text || megaMenuContent?.text, currentLink?.text);
            return (React.createElement(MegaMenuNavigationPrimary, { ...(variations.showClickOutLink &&
                    currentLink.hasClickOut &&
                    index + 1 >= currentChildren.length
                    ? primaryNavProps([
                        ...subChild.links,
                        {
                            isExternal: false,
                            text: currentLink.clickOutText
                                ? currentLink.clickOutText
                                : `${formatMessage(translations.destinationClickOut)} ${currentLink.text}`,
                            url: currentLink.url,
                            hasClickOut: true
                        }
                    ], currentLink.hasClickOut, headingProperties, subChild.isCard)
                    : primaryNavProps(subChild.links, false, headingProperties, subChild.isCard)), showBlankHeading: showBlankHeading, key: index, hasClickOutWithCard: subChild.isCard && currentLink.hasClickOut, isCard: subChild.isCard, trackingText: trackingText, trackingTextIndex: index }));
        })) : (React.createElement("div", null))));
    const defaultLayout = () => {
        const linksWithPrimaryNav = [
            ...parentMenus,
            showSecondaryFooterAllLink && {
                isExternal: false,
                text: `${formatMessage(translations.allText)} ${megaMenuContent.text}`,
                url: megaMenuContent.url
            }
        ].filter(Boolean);
        const headingProperties = megaMenuContent.headingData
            ? renderHeadingProperties(megaMenuContent.headingData)
            : '';
        const hasClickOut = showSecondaryFooterAllLink;
        return (React.createElement(MegaMenuDefaultWrapper, { onClick: trackSnowplowEvent },
            React.createElement(MegaMenuNavigationPrimary, { ...primaryNavProps(linksWithPrimaryNav, hasClickOut, headingProperties) })));
    };
    const determineLayout = () => {
        let renderedLayout = defaultLayout();
        if (desktopSml && layout !== 'default') {
            renderedLayout = variations.multipleIteration
                ? megaMenuMobileMultipleIteration
                : megaMenuMobile;
        }
        else {
            if (layout === 'column')
                renderedLayout = columnLayout;
            if (layout === 'verbose')
                renderedLayout = verboseLayout;
        }
        return renderedLayout;
    };
    const renderCloseIcon = (React.createElement(Viewport, { min: "xl" }, (matches) => matches && (React.createElement(MegaMenuCloseIcon, { "aria-label": formatMessage(translations.closeButtonLabel), ButtonIcon: CloseIcon, isIconButton: true, label: formatMessage(translations.closeButtonLabel), onClickHandler: collapseMegaMenu, hasExtraTopMargin: hasExtraTopMargin, hasLinkBanner: hasLinkBanner }))));
    const nav_visible =  true && localStore.getItem('nav_invisible')
        ? 'override-header'
        : '';
    const hasSecondaryFooterAllLink = activeLink && activeLinkChilds.showSecondaryFooterAllLink;
    return (React.createElement(MegaMenuWrapper, { ref: wrapperRef, "data-testid": "mega-menu-content" },
        React.createElement(PaletteProvider, { palette: theme },
            React.createElement(MegaMenuGridWrapper, { isSlim: isSlim, hasLinkBanner: hasLinkBanner, hasSecondaryFooterAllLink: hasSecondaryFooterAllLink, hasExtraTopMargin: hasExtraTopMargin },
                React.createElement(MegaMenuContent, { className: nav_visible, isCentered: isContentCentered, navHighlightColour: navHighlightColour },
                    determineLayout(),
                    variations.showCloseCTA && renderCloseIcon)),
            hasSecondaryFooterAllLink && (React.createElement(MegaMenuColumnFooterAllLinkWrapper, null, megaMenuDrawerNavLink({
                handleLinkClickUrl: activeLinkChilds.url,
                url: activeLinkChilds.url,
                label: `${formatMessage(translations.allText)} ${activeLinkChilds.text}`,
                clickEventLabel: null,
                key: null
            }))))));
};
/* eslint-enable complexity */
MegaMenu.propTypes = {
    accountProps: PropTypes.shape({
        accountLinks: PropTypes.array,
        signInLink: PropTypes.string,
        redirectURL: PropTypes.string
    }),
    collapseMegaMenu: PropTypes.func,
    containerMinHeight: PropTypes.number,
    hasExtraTopMargin: PropTypes.bool,
    hasLinkBanner: PropTypes.bool,
    isAccountsEnabled: PropTypes.bool,
    isContentCentered: PropTypes.bool,
    isDrawerOpen: PropTypes.bool,
    isSlim: PropTypes.bool,
    megaMenuContent: PropTypes.object,
    navHighlightColour: PropTypes.string,
    primaryNavLink: PropTypes.object,
    theme: PropTypes.string,
    user: PropTypes.shape({
        isAuthenticated: PropTypes.bool.isRequired
    }),
    utilityLinks: Navigation.propTypes.links,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        layout: PropTypes.string,
        multipleIteration: PropTypes.bool,
        showBorderHighlight: PropTypes.bool,
        showClickOutLink: PropTypes.bool,
        showCloseCTA: PropTypes.bool,
        showMenuOnClick: PropTypes.bool
    })
};
MegaMenu.displayName = 'MegaMenu';
module.exports = asConfiguredComponent(MegaMenu, 'MegaMenu');
//# sourceMappingURL=MegaMenu.js.map

/***/ }),

/***/ 69834:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(34562);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 41360:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    megaMenuNavigationPrimaryAriaLabel: {
        id: 'MegaMenu.NavigationPrimaryAriaLabel',
        defaultMessage: 'Primary',
        description: 'MegaMenu component Navigation links aria label'
    },
    destinationClickOut: {
        id: 'MegaMenu.VerboseClickOut',
        defaultMessage: 'More',
        description: 'MegaMenu component verbose category click out'
    },
    allText: {
        id: 'MegaMenu.All',
        defaultMessage: 'All',
        description: 'MegaMenu Secondary Footer All Link'
    },
    closeButtonLabel: {
        id: 'MegaMenu.MegaMenuButton',
        defaultMessage: 'Close Mega Menu',
        description: 'ARIA label for the close button on Mega Menu'
    },
    megaMenuSignInLinkText: {
        id: 'MegaMenu.SignInLinkText',
        defaultMessage: 'Sign in',
        description: 'MegaMenu component Sign in link text'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 34562:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const MegaMenu = __webpack_require__(14245);
MegaMenu.Verbose = asVariation(MegaMenu, 'Verbose', {
    layout: 'verbose'
});
MegaMenu.Column = asVariation(MegaMenu, 'Column', {
    layout: 'column'
});
MegaMenu.MultipleColumn = asVariation(MegaMenu, 'MultipleColumn', {
    layout: 'verbose',
    multipleIteration: true,
    showBorderHighlight: true
});
MegaMenu.NewVerbose = asVariation(MegaMenu, 'NewVerbose', {
    layout: 'verbose',
    multipleIteration: true,
    showBorderHighlight: true,
    showClickOutLink: true,
    showCloseCTA: true,
    showMenuOnClick: true
});
module.exports = MegaMenu;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 6099:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState, useEffect } = __webpack_require__(96540);
const { BREAKPOINTS } = __webpack_require__(96472);
const { CNEVideoEmbedWrapper } = __webpack_require__(69763);
/**
 * MinimalVideo component
 *
 * @param {object} props - React props
 * @param {string} [props.scriptUrl] - CNE video scriptUrl
 * @param {string} [props.width] - CNE video width
 * @param {boolean} [props.shouldPause] - boolean to pause CNE video
 * @param {boolean} [props.shouldGoFullScreenOnPlay] - boolean to enable CNE shouldGoFullScreenOnPlay
 * @param {boolean} [props.hidePosterTitle] - boolean hide/show CNE video title
 * @param {string} [props.videoEmbedPosition] - video position in page
 *
 * @returns {ReactElement} <div>
 */
const MinimalVideo = ({ scriptUrl, width = '100%', shouldPause = false, shouldGoFullScreenOnPlay = false, hidePosterTitle, videoEmbedPosition = '' }) => {
    const media =  true
        ? window.matchMedia(`(max-width: ${BREAKPOINTS.md})`)
        : 0;
    const [isMobile, setIsMobile] = useState(media?.matches || false);
    const [isPaused, setIsPaused] = useState(shouldPause);
    useEffect(() => {
        if (media.matches !== isMobile) {
            setIsMobile(media.matches);
        }
        if (isPaused !== shouldPause) {
            setIsPaused((current) => !current);
        }
        const listener = () => {
            setIsMobile(media.matches);
            setIsPaused(shouldPause);
        };
        media.addEventListener('change', listener);
        return () => media.removeEventListener('change', listener);
    }, [isMobile, media, isPaused, shouldPause]);
    return (React.createElement(CNEVideoEmbedWrapper, { width: width, scriptUrl: scriptUrl, shouldAutoplay: !isMobile, additionalEmbedParams: {
            hidePosterTitle: hidePosterTitle || isMobile,
            hasAnimatedThumb: true
        }, shouldMute: !isMobile, shouldGoFullScreenOnPlay: !shouldGoFullScreenOnPlay ? shouldGoFullScreenOnPlay : isMobile, shouldPause: isPaused, videoEmbedPosition: videoEmbedPosition }));
};
MinimalVideo.propTypes = {
    hidePosterTitle: PropTypes.bool,
    scriptUrl: PropTypes.string.isRequired,
    shouldGoFullScreenOnPlay: PropTypes.bool,
    shouldPause: PropTypes.bool,
    videoEmbedPosition: PropTypes.string,
    width: PropTypes.string
};
module.exports = MinimalVideo;
//# sourceMappingURL=MinimalVideo.js.map

/***/ }),

/***/ 56153:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(6099);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 69763:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const CNEVideoEmbed = __webpack_require__(64930);
const CNEVideoEmbedWrapper = styled(CNEVideoEmbed).withConfig({
    displayName: 'CNEVideoEmbedWrapper'
}) `
  ${({ width }) => `width: ${width};`}
`;
module.exports = {
    CNEVideoEmbedWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 84759:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const throttle = __webpack_require__(7350);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { connector } = __webpack_require__(57744);
const PaletteProvider = __webpack_require__(49235);
const { TrackComponentChannel } = __webpack_require__(78788);
const LinkList = __webpack_require__(89580);
const Marquee = __webpack_require__(37748);
const { NavigationListWrapper } = __webpack_require__(65843);
const { googleAnalytics } = __webpack_require__(90090);
const { trackNavigationEvent } = __webpack_require__(14307);
const { getComponentPosition, isBannerIntoView } = __webpack_require__(95788);
const trackClick = (url, layout, text, hed, index, shouldTrackSnowplowEvent, totalItems) => {
    googleAnalytics.emitGoogleTrackingEvent('navigation-list-click', {
        'gtm.elementUrl': url,
        layout,
        text
    });
    shouldTrackSnowplowEvent &&
        trackNavigationEvent({
            type: 'click',
            label: hed,
            subject: 'carousel_navigation_list',
            items: [
                {
                    content_title: text,
                    content_url: url
                }
            ],
            placement: 'mid-content',
            index,
            total_index: totalItems
        });
};
const trackImpression = (componentPosition, layout, hed) => {
    googleAnalytics.emitUniqueGoogleTrackingEvent('navigation-list-impression', {
        componentPosition,
        layout,
        hed
    });
};
/**
 * NavigationList component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {boolean} [props.hasAnchorLinkListDivider] - Optional prop to add divider between header and dek for Anchorlist
 * @param {bool} [props.hasBackgroundColorWhite] - Optional flag for setting background color to white
 * @param {boolean} [props.hasBorder] - Optional flag to display border on container. Defaults to true
 * @param {boolean} [props.hasSquareChevronSlider] - Optional flag to display square chevron slider icon
 * @param {boolean} [props.hasUnderline] - Optional flag to give underline to the link
 * @param {bool} [props.isInvertedTheme] - flag to invert color
 * @param {bool} [props.shouldTrackSnowplowEvent] - flag to decide to track navigation event
 * @param {bool} [props.hasRoundedCornerCards] - Optional flag to add border radious for cards
 * @param {object} [props.navigationListData] - navigation list information from the redux store
 * @param {string} [props.palette] - Standard or inverted, standard by default, ideally inherited from parent's nav component
 * @param {boolean} [props.shouldCenterAlignContent] - Optional flag to center align the list items
 * @param {boolean} [props.shouldDisplayDangerousDek] - Optional boolean to display dek
 * @param {boolean} [props.shouldEnableBundleComponentAnalytics] - Optional feature flag to append data-section-title attribute for analytics
 * @param {boolean} [props.shouldIncreaseCardSizeOnDesktop] - Optional flag to increase the card size on desktop above 1280 breakpoint
 * @param {string} [props.layout] - Optional layout configured from copilot container
 * @param {string} [props.theme] - NavigationList theme type
 * @param {string} props.trackingNamespace - Tracking namespace
 * @param {boolean} [props.hideBackgroundColor] - Optional flag for not showing background color
 * @param {boolean} [props.hasHeaderBorder] - Optional flag for header border for carousel
 * @returns {ReactElement} <div>
 */
const NavigationList = ({ className, hasAnchorLinkListDivider = false, hasBackgroundColorWhite = false, hasBorder = false, hasSquareChevronSlider = false, hasHeaderBorder, hasUnderline = false, hideBackgroundColor = false, isInvertedTheme = false, shouldTrackSnowplowEvent, hasRoundedCornerCards = false, navigationListData, palette = 'standard', shouldCenterAlignContent = false, shouldDisplayDangerousDek = false, shouldEnableBundleComponentAnalytics, shouldIncreaseCardSizeOnDesktop = false, layout = 'NavigationListAnchored', theme, trackingNamespace }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'NavigationList',
            variation: layout
        });
    }, [layout]);
    const { hed = '', dek = '', links = [] } = navigationListData;
    const bannerRef = React.useRef();
    const [isBannerPositionTop, setBannerPositionTop] = React.useState(false);
    React.useEffect(() => {
        const handleBannerPosition = () => {
            const bannerTopOffset = bannerRef.current?.getBoundingClientRect().top;
            setBannerPositionTop(bannerTopOffset <= 0);
        };
        const throttledScrollPosition = throttle(handleBannerPosition, 50);
        window.addEventListener('scroll', throttledScrollPosition);
        return () => {
            window.removeEventListener('scroll', throttledScrollPosition);
        };
    }, [layout]);
    React.useEffect(() => {
        const componentPosition = getComponentPosition(bannerRef);
        const handleScroll = throttle(() => {
            if (isBannerIntoView(bannerRef)) {
                trackImpression(componentPosition, layout, hed);
                window.removeEventListener('scroll', handleScroll, false);
            }
        }, 100);
        if (isBannerIntoView(bannerRef)) {
            trackImpression(componentPosition, layout, hed);
        }
        else {
            window.addEventListener('scroll', handleScroll, false);
            return function cleanup() {
                window.removeEventListener('scroll', handleScroll, false);
            };
        }
        return undefined;
    }, [layout, hed]);
    if (!links.length) {
        return null;
    }
    const navigationList = {
        dek,
        hasAnchorLinkList: layout === 'NavigationListAnchored' ||
            layout === 'NavigationListTextOverlayOnImage',
        hasAnchorLinkListDivider,
        hasSquareChevronSlider,
        hasUnderline,
        hed,
        isBannerPositionTop,
        isFeatured: theme === 'featured',
        hasRoundedCornerCards,
        hasHeaderBorder,
        layout,
        links: links.map((link, index) => ({
            ...link,
            isExternal: false,
            onClick: () => trackClick(link.url, layout, link.text, hed, index, shouldTrackSnowplowEvent, links.length)
        })),
        shouldCenterAlignContent: shouldCenterAlignContent || (links.length >= 1 && links.length <= 10),
        shouldDisplayDangerousDek,
        shouldEnableBundleComponentAnalytics,
        shouldIncreaseCardSizeOnDesktop,
        trackingNamespace
    };
    return (React.createElement(PaletteProvider, { palette: isInvertedTheme ? 'inverted' : palette },
        React.createElement(NavigationListWrapper, { ref: bannerRef, "data-testid": "NavigationList", hasBackgroundColorWhite: hasBackgroundColorWhite, hasBorder: hasBorder, hideBackgroundColor: hideBackgroundColor, hasHeaderBorder: hasHeaderBorder, isBannerPositionTop: isBannerPositionTop, isSubNavigation: navigationList.isSubNavigation, className: className, layout: navigationList.layout },
            React.createElement(LinkList, { ...navigationList }))));
};
NavigationList.displayName = 'NavigationList';
const bannerPropTypes = [
    'NavigationListSubnavigation',
    'NavigationListAnchored',
    'NavigationListTextOverlayOnImage'
];
NavigationList.propTypes = {
    className: PropTypes.string,
    hasAnchorLinkListDivider: PropTypes.bool,
    hasBackgroundColorWhite: PropTypes.bool,
    hasBorder: PropTypes.bool,
    hasHeaderBorder: PropTypes.bool,
    hasRoundedCornerCards: PropTypes.bool,
    hasSquareChevronSlider: PropTypes.bool,
    hasUnderline: PropTypes.bool,
    hideBackgroundColor: PropTypes.bool,
    isBannerPositionTop: PropTypes.bool,
    isCentered: PropTypes.bool,
    isInvertedTheme: PropTypes.bool,
    layout: PropTypes.oneOf(bannerPropTypes),
    navigationListData: Marquee.propTypes.linkBannerData,
    palette: PropTypes.oneOf(['standard', 'inverted']),
    shouldCenterAlignContent: PropTypes.bool,
    shouldDisplayDangerousDek: PropTypes.bool,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldIncreaseCardSizeOnDesktop: PropTypes.bool,
    shouldTrackSnowplowEvent: PropTypes.bool,
    theme: PropTypes.string,
    trackingNamespace: PropTypes.string
};
const connectedNavigationList = connector(NavigationList, {
    keysToPluck: ['navigationListData']
});
module.exports = { NavigationList, connectedNavigationList };
//# sourceMappingURL=NavigationList.js.map

/***/ }),

/***/ 2505:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const { NavigationList, connectedNavigationList } = __webpack_require__(84759);
module.exports = asConfiguredComponent(connectedNavigationList, 'NavigationList');
const navigationListExports = module.exports;
navigationListExports.NavigationList = asConfiguredComponent(NavigationList, 'NavigationList');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 65843:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.NavigationListWrapper = exports.DESKTOP_HEIGHT = exports.MOBILE_HEIGHT = void 0;
const { default: styled } = __webpack_require__(92168);
const { getColorStyles } = __webpack_require__(26865);
const { isInverted } = __webpack_require__(70698);
const { BREAKPOINTS } = __webpack_require__(96472);
const BORDER_HEIGHT = 1;
exports.MOBILE_HEIGHT = 60;
exports.DESKTOP_HEIGHT = 60;
exports.NavigationListWrapper = styled.section.withConfig({
    displayName: 'NavigationListWrapper'
}) `
  position: relative;
  ${({ isBannerPositionTop }) => isBannerPositionTop && `box-shadow: rgb(0 0 0 / 10%) 0px 1px 6px;`}
  ${({ hasBorder, theme }) => hasBorder &&
    `
    border-top: ${BORDER_HEIGHT}px solid;
    border-bottom: ${BORDER_HEIGHT}px solid;
    ${getColorStyles(theme, 'border-color', isInverted(theme)
        ? 'colors.discovery.body.dark.divider'
        : 'colors.discovery.body.light.divider')};
  `}
  ${({ hideBackgroundColor }) => hideBackgroundColor &&
    `
    &&&{
      background-color: transparent;
      box-shadow: transparent 0px 1px 6px;
    }`}

  ${({ theme, layout, hasBackgroundColorWhite }) => {
    let color;
    if (isInverted(theme)) {
        color = 'colors.discovery.body.dark.background';
    }
    else if (layout === 'NavigationListSubnavigation' ||
        hasBackgroundColorWhite) {
        color = 'colors.background.white';
    }
    else {
        color = 'colors.discovery.body.light.background';
    }
    return getColorStyles(theme, 'background', color);
}};

  ${({ layout }) => layout === 'NavigationListSubnavigation' &&
    `
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 20px 24px;
        
      @media (min-width: ${BREAKPOINTS.md}) {
        padding: 0px 64px 20px;
      }
  `}
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 89580:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { NavigationListLinkList } = __webpack_require__(71853);
/**
 *
 * @param {boolean} [props.hasRoundedCornerCards] - Optional flag to add border radious for cards
 * @param {boolean} [props.hasSquareChevronSlider] - Optional flag to display square chevron slider icon
 * @param {boolean} [props.hasAnchorLinkListDivider] - Optional flag to display divider under header
 * @param {boolean} [props.hasUnderline] - Optional flag to give underline to the link
 * @param {string} [props.hed] - hed of the multiple link list banner
 * @param {string} [props.dek] - dek of the multiple link list banner
 * @param {boolean} [props.isCentered] - Optional flag to justify the container to the center of the viewport. Defaults to true
 * @param {Array} [props.layout] - Optional layout configured from copilot container
 * @param {Array} [props.links] - array containing the links of the multiple link list
 * @param {boolean} [props.shouldCenterAlignContent] - Optional flag to center align the list items
 * @param {boolean} [props.shouldDisplayDangerousDek] - Optional flag to display dek
 * @param {boolean} [props.shouldEnableBundleComponentAnalytics] - Optional feature flag to append data-section-title attribute for analytics  trackingNamespace
 * @param {boolean} [props.shouldIncreaseCardSizeOnDesktop] - Optional flag to increase the card size on desktop above 1280 breakpoint
 * @param {boolean} [props.hasHeaderBorder] - optional flag for header border for carousel
 * @returns {ReactElement} <div>
 */
const LinkList = ({ hasGradient = false, hasSquareChevronSlider = false, hasUnderline = false, hasAnchorLinkList, hasAnchorLinkListDivider = false, hasHeaderBorder, hed, dek, isCentered = false, hasRoundedCornerCards = false, layout, links, shouldCenterAlignContent, shouldDisplayDangerousDek = false, shouldEnableBundleComponentAnalytics, shouldIncreaseCardSizeOnDesktop = false }) => {
    const primaryLink = {
        text: layout === 'NavigationListSubnavigation' ? hed : null
    };
    return (React.createElement(NavigationListLinkList, { hed: hed, dek: dek, hasGradient: hasGradient, hasSquareChevronSlider: hasSquareChevronSlider, hasUnderline: hasUnderline, hasAnchorLinkList: hasAnchorLinkList, hasAnchorLinkListDivider: hasAnchorLinkListDivider, hasHeaderBorder: hasHeaderBorder, isCentered: isCentered, hasRoundedCornerCards: hasRoundedCornerCards, layout: layout, links: links, primaryLink: primaryLink.text && primaryLink, shouldCenterAlignContent: shouldCenterAlignContent, shouldDisplayDangerousDek: shouldDisplayDangerousDek, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, shouldIncreaseCardSizeOnDesktop: shouldIncreaseCardSizeOnDesktop }));
};
LinkList.propTypes = {
    dek: PropTypes.string,
    hasAnchorLinkList: PropTypes.bool,
    hasAnchorLinkListDivider: PropTypes.bool,
    hasGradient: PropTypes.bool,
    hasHeaderBorder: PropTypes.bool,
    hasRoundedCornerCards: PropTypes.bool,
    hasSquareChevronSlider: PropTypes.bool,
    hasUnderline: PropTypes.bool,
    hed: PropTypes.string,
    isCentered: PropTypes.bool,
    layout: PropTypes.string,
    links: PropTypes.arrayOf(PropTypes.shape({
        url: PropTypes.string,
        text: PropTypes.string,
        isExternal: PropTypes.bool,
        onClick: PropTypes.func
    })),
    shouldCenterAlignContent: PropTypes.bool,
    shouldDisplayDangerousDek: PropTypes.bool,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldIncreaseCardSizeOnDesktop: PropTypes.bool
};
module.exports = LinkList;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 71853:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.NavigationListLinkList = exports.DESKTOP_HEIGHT = exports.MOBILE_HEIGHT = void 0;
const utils_1 = __webpack_require__(26865);
const { default: styled, css } = __webpack_require__(92168);
const { calculateSpacing, getColorStyles, getTypographyStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { isInverted } = __webpack_require__(70698);
const ScrollingNavigation = __webpack_require__(14212);
const { ButtonWrapper } = __webpack_require__(18974);
const { NavListWrapper: ScrollingNavigationWrapper, NavList: ScrollingNavigationList, NavListItem: ScrollingNavigationListItem, NavPrimaryItem: ScrollingNavigationPrimaryItem, NavLink: ScrollingNavigationLink, VisualTextWrap: ScrollingVisualTextWrap } = __webpack_require__(79424);
const { ResponsiveImageContainer, ResponsiveImagePicture } = __webpack_require__(7228);
const { SpanWrapper } = __webpack_require__(18117);
const { CarouselHeader, CarouselTitle, CarouselList, CarouselWrapper } = __webpack_require__(44802);
const { SummaryDekDefault } = __webpack_require__(95015);
const BORDER_HEIGHT = 1;
exports.MOBILE_HEIGHT = 60;
exports.DESKTOP_HEIGHT = 60;
exports.NavigationListLinkList = styled(ScrollingNavigation).withConfig({
    displayName: 'NavigationListLinkList'
}) `
  ${CarouselHeader} {
    padding-bottom: 0;
  }

  ${CarouselTitle} {
    ${({ hasAnchorLinkListDivider }) => hasAnchorLinkListDivider
    ? getTypographyStyles('typography.definitions.discovery.subhed-section-primary')
    : getTypographyStyles('typography.definitions.discovery.hed-core-primary')};
    ${({ theme }) => getColorStyles(theme, 'color', isInverted(theme)
    ? 'colors.discovery.body.dark.description'
    : 'colors.discovery.body.light.description')};

    ${({ theme, hasAnchorLinkListDivider }) => hasAnchorLinkListDivider &&
    getColorStyles(theme, 'color', 'colors.discovery.body.light.heading')};
  }

  ${SummaryDekDefault} {
    ${getTypographyStyles('typography.definitions.discovery.description-page')};
    margin-top: ${calculateSpacing(2)};
    margin-bottom: ${calculateSpacing(2)};
    padding-bottom: ${calculateSpacing(3)};
  }

  ${ScrollingNavigationListItem} {
    height: ${exports.MOBILE_HEIGHT - BORDER_HEIGHT}px;

    @media (min-width: ${BREAKPOINTS.md}) {
      height: ${exports.DESKTOP_HEIGHT - BORDER_HEIGHT}px;
    }
  }

  ${ScrollingNavigationLink} {
    ${({ hasUnderline }) => hasUnderline &&
    `&:link {
          text-decoration: underline;
        }
        `}

    &:link,
    &:visited {
      ${({ theme }) => getColorStyles(theme, 'color', isInverted(theme)
    ? 'colors.discovery.body.dark.description'
    : 'colors.discovery.body.light.description')};
    }
  }

  ${ScrollingVisualTextWrap} {
    ${getTypographyStyles('typography.definitions.discovery.hed-bulletin-secondary')};
  }

  ${({ hasCarouselControls }) => hasCarouselControls &&
    `&& {
        height: 100%
      }`}
  ${ScrollingNavigationPrimaryItem} {
    ${ScrollingNavigationLink} {
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-primary')};
    }
  }

  ${ScrollingNavigationLink} {
    display: block;
  }

  ${ButtonWrapper} {
    ${({ hasSquareChevronSlider }) => hasSquareChevronSlider &&
    ` border-radius: unset;
    `}
  }

  ${ScrollingNavigationListItem} {
    ${({ hasRoundedCornerCards }) => hasRoundedCornerCards
    ? `
    ${ResponsiveImageContainer}, ${ResponsiveImagePicture}, ${SpanWrapper}::after {
      border-radius: 10px;
    }
    `
    : `${ResponsiveImageContainer}, ${ResponsiveImagePicture}, ${SpanWrapper}::after {
      border-radius: 0px;
    }
    `}

    ${ResponsiveImagePicture} {
      ${({ shouldIncreaseCardSizeOnDesktop }) => shouldIncreaseCardSizeOnDesktop
    ? `
          @media (min-width: ${BREAKPOINTS.lg}) {
            width: fit-content;
            height: auto;
          } 
        img {
          @media (min-width: ${BREAKPOINTS.lg}) {
            width: 150px;
            height: 200px;
          }
        }`
    : ``}
      object-fit: cover;
    }
  }

  ${({ layout, theme }) => {
    if (layout === 'NavigationListSubnavigation') {
        return css `
        ${ScrollingNavigationWrapper} {
          display: flex;
          flex-direction: column;
          align-items: center;
          border-top: 1px solid;
          border-bottom: 1px solid;
          border-color: ${(0, utils_1.getColorToken)(theme, 'colors.interactive.base.black')};
          padding: 20px 0 calc(20px - 0.75rem) 0;
          gap: calc(20px - 0.75rem);
          width: 100%;
          overflow-x: inherit;

          @media (min-width: ${BREAKPOINTS.md}) {
            padding: 20px 0 calc(20px - 1rem) 0;
            gap: calc(20px - 1rem);
          }
        }

        ${ScrollingNavigationPrimaryItem} {
          margin: 0;

          ${ScrollingNavigationLink} {
            ${getColorStyles(theme, 'color', 'colors.discovery.body.white.context-signature')};
            ${getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-title')};
          }
        }

        ${ScrollingNavigationList} {
          flex-wrap: wrap;
          justify-content: center;
          white-space: normal;
          --grid-margin: 0;
        }

        ${ScrollingNavigationListItem} {
          flex-shrink: inherit;
          height: auto;
          text-transform: uppercase;
        }
      `;
    }
    else if (layout === 'NavigationListTextOverlayOnImage') {
        return css `
        ${ScrollingVisualTextWrap} {
          position: absolute;
          bottom: ${calculateSpacing(0.5)};
          padding-right: ${calculateSpacing(1)};
          padding-left: ${calculateSpacing(1)};
          ${ScrollingNavigationLink} {
            ${getColorStyles(theme, 'color', 'colors.interactive.base.white')};
          }
        }

        ${SpanWrapper}::after {
          position: absolute;
          top: 0;
          left: 0;
          background: linear-gradient(0deg, black, transparent 70%);
          width: 100%;
          height: 100%;
          content: '';
        }

        ${ScrollingNavigationListItem} {
          &:hover::before,
          &:focus-visible::before {
            ${getColorStyles(theme, 'background-color', 'colors.discovery.body.white.background')};
            right: ${calculateSpacing(1)};
            left: ${calculateSpacing(1)};
            z-index: 1;
            margin-top: ${calculateSpacing(1)};
            margin-bottom: ${calculateSpacing(1)};
            width: auto;

            @media (max-width: ${BREAKPOINTS.md}) {
              margin-bottom: 6px;
            }
          }
        }
        ${CarouselList} {
          padding: 0 ${calculateSpacing(8)} 0 ${calculateSpacing(8)};
          @media (max-width: ${BREAKPOINTS.md}) {
            padding: 0 ${calculateSpacing(3)} 0 ${calculateSpacing(3)};
          }
        }
        ${CarouselWrapper} {
          padding-top: ${calculateSpacing(2.5)};
          padding-bottom: ${calculateSpacing(2.5)};
        }
      `;
    }
    return '';
}}
`;
//# sourceMappingURL=style.js.map

/***/ }),

/***/ 75527:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.NotificationBanner = exports.OneNavNotificationBannerContent = exports.NotificationBannerContent = exports.NotificationBannerComponent = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const react_dom_1 = __webpack_require__(40961);
const styled_components_1 = __webpack_require__(92168);
const redux_1 = __webpack_require__(57744);
const configured_component_1 = __webpack_require__(12892);
const themed_component_1 = __webpack_require__(20223);
const styles_1 = __webpack_require__(92280);
const types_1 = __webpack_require__(43481);
const Close_1 = __importDefault(__webpack_require__(80046));
const ErrorBoundry_1 = __webpack_require__(45193);
const helpers_1 = __webpack_require__(27705);
const hooks_1 = __webpack_require__(49356);
function NotificationBannerComponent({ id, position, brandName, isOneNav, experimentFlags = {}, theme, fullPageTheme }) {
    /** TODO: Position should come from the Growthbook expriement. */
    const { isBannerVisible, setIsBannerVisible } = (0, hooks_1.useShowNotificationBanner)(id);
    const usedTheme = [theme, fullPageTheme].includes('inverted')
        ? 'inverted'
        : 'standard';
    // A/B experiment if present
    const experimentKey = `${brandName.toLowerCase()}-notice-banner`;
    const experiment = experimentFlags[experimentKey];
    const experimentPosition = experiment?.props?.experimentBannerPosition;
    /** TODO: Remove, just for multiverso testing. */
    if (brandName === 'WIRED' &&
        experimentPosition === types_1.NotificationBannerPosition.ABOVE_NAV) {
        // eslint-disable-next-line no-param-reassign
        position = types_1.NotificationBannerPosition.ABOVE_STANDARD_NAV;
    }
    else if (brandName === 'WIRED' &&
        experimentPosition === types_1.NotificationBannerPosition.BELOW_HERO_AD) {
        // eslint-disable-next-line no-param-reassign
        position = types_1.NotificationBannerPosition.BELOW_HERO_AD;
    }
    (0, hooks_1.useSnowPlowTracking)(isBannerVisible);
    /** If it is rendered by one nav, the base page should not render it. */
    if (position === types_1.NotificationBannerPosition.INSIDE_ONE_NAV && !isOneNav) {
        return null;
    }
    if (!isBannerVisible) {
        return null;
    }
    /** TODO: Remove, just for Growthbook testing. There will will be only one position. */
    const BannerComponent = getBannerComponent(position, setIsBannerVisible, brandName, id);
    return (react_1.default.createElement(ErrorBoundry_1.ErrorBoundary, null,
        react_1.default.createElement(styled_components_1.ThemeProvider, { theme: (outerTheme) => ({
                ...outerTheme,
                notificationBannerTheme: usedTheme
            }) },
            react_1.default.createElement(BannerComponent, null))));
}
exports.NotificationBannerComponent = NotificationBannerComponent;
function getBannerComponent(position, setIsBannerVisible, brandName, id) {
    switch (position) {
        case types_1.NotificationBannerPosition.BASE_PAGE_TOP:
            return () => (react_1.default.createElement(NotificationBannerBasePage, { id: id, setIsBannerVisible: setIsBannerVisible, brandName: brandName }));
        case types_1.NotificationBannerPosition.ABOVE_HERO_AD:
            return () => (react_1.default.createElement(NotificationBannerHeroAd, { insertPosition: "beforebegin", setIsBannerVisible: setIsBannerVisible, id: id, brandName: brandName, hostClassPrefix: "StickyHeroAdWrapper" }));
        case types_1.NotificationBannerPosition.BELOW_HERO_AD:
            return () => (react_1.default.createElement(NotificationBannerHeroAd, { insertPosition: "beforebegin", setIsBannerVisible: setIsBannerVisible, id: id, brandName: brandName, hostClassPrefix: "BasePageMainContent" }));
        case types_1.NotificationBannerPosition.BELOW_CONNECTED_NAV:
            return () => (react_1.default.createElement(NotificationBannerConnectedNavigation, { setIsBannerVisible: setIsBannerVisible, brandName: brandName, insertPosition: "beforeend", id: id }));
        case types_1.NotificationBannerPosition.ABOVE_CONNECTED_NAV:
            return () => (react_1.default.createElement(NotificationBannerConnectedNavigation, { setIsBannerVisible: setIsBannerVisible, brandName: brandName, insertPosition: "beforebegin", id: id }));
        case types_1.NotificationBannerPosition.INSIDE_ONE_NAV:
            return () => (react_1.default.createElement(NotificationBannerInsideOneNav, { id: id, setIsBannerVisible: setIsBannerVisible, brandName: brandName }));
        case types_1.NotificationBannerPosition.ABOVE_STANDARD_NAV:
            return () => (react_1.default.createElement(NotificationBannerStandardNavigation, { setIsBannerVisible: setIsBannerVisible, brandName: brandName, insertPosition: "beforebegin", id: id }));
        case types_1.NotificationBannerPosition.BELOW_STANDARD_NAV:
            return () => (react_1.default.createElement(NotificationBannerStandardNavigation, { setIsBannerVisible: setIsBannerVisible, brandName: brandName, insertPosition: "afterend", id: id }));
        case types_1.NotificationBannerPosition.BELOW_ONE_NAV_HERO_AD:
            return () => (react_1.default.createElement(NotificationBannerHeroAd, { insertPosition: "beforebegin", setIsBannerVisible: setIsBannerVisible, id: id, brandName: brandName, hostClassPrefix: "BasePageMainContent" }));
        default:
            return () => null;
    }
}
/**
 * Base banner component: renders copy, link and close button.
 * @param props.bannerBaseProps See {@link BannerBaseProps}
 */
function NotificationBannerBase({ id, setIsBannerVisible, brandName, Wrapper, TextWrapper, LinkComponent, CloseIconWrapper }) {
    return (react_1.default.createElement(Wrapper, null,
        react_1.default.createElement(TextWrapper, null,
            brandName,
            " uses first- and third-party technologies that provide information about your interactions with this site to others. See our",
            ' ',
            react_1.default.createElement(LinkComponent, { target: "_blank", href: "https://www.condenast.com/privacy-policy#privacypolicy", onClick: helpers_1.trackSnowplowNavigation }, "Privacy Policy"),
            ' ',
            "for more information."),
        react_1.default.createElement(CloseIconWrapper, { onClick: () => (0, helpers_1.onBannerClose)(setIsBannerVisible, id), "aria-label": "close notification banner" },
            react_1.default.createElement(Close_1.default, null))));
}
/**
 * Standard notification banner.
 * @param props.id                 Banner ID.
 * @param props.setIsBannerVisible State setter to toggle visibility.
 * @param props.brandName          Brand name for copy.
 */
function NotificationBannerContent(props) {
    return (react_1.default.createElement(NotificationBannerBase, { ...props, Wrapper: styles_1.NotificationBannerWrapper, TextWrapper: styles_1.NotificationBannerTextWrapper, LinkComponent: styles_1.NotificationBannerLink, CloseIconWrapper: styles_1.NotificationBannerCloseIcon }));
}
exports.NotificationBannerContent = NotificationBannerContent;
/**
 * OneNav‐styled notification banner.
 * @param props.id                 Banner ID.
 * @param props.setIsBannerVisible State setter to toggle visibility.
 * @param props.brandName          Brand name for copy.
 */
function OneNavNotificationBannerContent(props) {
    return (react_1.default.createElement(NotificationBannerBase, { ...props, Wrapper: styles_1.NotificationOneNavBannerWrapper, TextWrapper: styles_1.NotificationOneNavBannerTextWrapper, LinkComponent: styles_1.NotificationOneNavBannerLink, CloseIconWrapper: styles_1.NotificationOneNavBannerCloseIcon }));
}
exports.OneNavNotificationBannerContent = OneNavNotificationBannerContent;
function NotificationBannerBasePage({ id, setIsBannerVisible, brandName }) {
    return (react_1.default.createElement(styles_1.NotificationBannerBasePageTop, null,
        react_1.default.createElement(NotificationBannerContent, { id: id, setIsBannerVisible: setIsBannerVisible, brandName: brandName })));
}
function NotificationBannerInsideOneNav({ id, setIsBannerVisible, brandName }) {
    return (react_1.default.createElement(styles_1.NotificationBannerInsideOneNavWrapper, null,
        react_1.default.createElement(OneNavNotificationBannerContent, { id: id, setIsBannerVisible: setIsBannerVisible, brandName: brandName })));
}
function NotificationBannerStandardNavigation({ insertPosition, setIsBannerVisible, brandName, id }) {
    const [container, setContainer] = (0, react_1.useState)(null);
    const bannerRef = (0, react_1.useRef)(null);
    const lastScrollTop = (0, react_1.useRef)(0);
    (0, react_1.useEffect)(() => {
        const standardNavWrapperElement = document.querySelector('[class^="StandardNavigationWrapper"]');
        if (standardNavWrapperElement == null) {
            return;
        }
        const bannerContainer = document.createElement('div');
        bannerContainer.classList.add('notificationBanner-portal');
        standardNavWrapperElement.insertAdjacentElement(insertPosition, bannerContainer);
        setContainer(bannerContainer);
        // eslint-disable-next-line consistent-return
        return () => {
            bannerContainer.remove();
        };
    }, [insertPosition]);
    (0, react_1.useEffect)(() => {
        const handleScroll = () => {
            const el = bannerRef.current;
            if (!el)
                return;
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            if (scrollTop > lastScrollTop.current) {
                el.classList.add('hidden');
            }
            else {
                el.classList.remove('hidden');
            }
            lastScrollTop.current = scrollTop <= 0 ? 0 : scrollTop;
        };
        window.addEventListener('scroll', handleScroll, { passive: true });
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);
    if (!container) {
        return null;
    }
    return (0, react_dom_1.createPortal)(react_1.default.createElement(styles_1.NotificationBannerStandardNavigationWrapper, { ref: bannerRef },
        react_1.default.createElement(NotificationBannerContent, { setIsBannerVisible: setIsBannerVisible, id: id, brandName: brandName })), container);
}
function NotificationBannerConnectedNavigation({ insertPosition, setIsBannerVisible, brandName, id }) {
    const [container, setContainer] = (0, react_1.useState)(null);
    (0, react_1.useEffect)(() => {
        const connectedNavWrapperElement = document.querySelector('[data-in-view=\'{"pattern":"ConnectedNavigation"}\']');
        if (connectedNavWrapperElement == null) {
            return;
        }
        const bannerContainer = document.createElement('div');
        bannerContainer.classList.add('notificationBanner-portal');
        connectedNavWrapperElement.insertAdjacentElement(insertPosition, bannerContainer);
        setContainer(bannerContainer);
        // eslint-disable-next-line consistent-return
        return () => {
            bannerContainer.remove();
        };
    }, [insertPosition]);
    if (!container) {
        return null;
    }
    return (0, react_dom_1.createPortal)(react_1.default.createElement(styles_1.NotificationBannerConnectedNavigationWrapper, null,
        react_1.default.createElement(NotificationBannerContent, { setIsBannerVisible: setIsBannerVisible, id: id, brandName: brandName })), container);
}
function NotificationBannerHeroAd({ insertPosition, setIsBannerVisible, id, brandName, hostClassPrefix }) {
    const [container, setContainer] = (0, react_1.useState)(null);
    (0, react_1.useEffect)(() => {
        const selector = `[class^="${hostClassPrefix}"]`;
        const heroAdWrapperElement = document.querySelector(selector);
        if (heroAdWrapperElement == null) {
            return;
        }
        const bannerContainer = document.createElement('div');
        bannerContainer.classList.add('notificationBanner-portal');
        heroAdWrapperElement.insertAdjacentElement(insertPosition, bannerContainer);
        setContainer(bannerContainer);
        // eslint-disable-next-line consistent-return
        return () => {
            bannerContainer.remove();
        };
    }, [insertPosition, hostClassPrefix]);
    if (!container) {
        return null;
    }
    return (0, react_dom_1.createPortal)(react_1.default.createElement(styles_1.NotificationBannerHeroAdWrapper, null,
        react_1.default.createElement(NotificationBannerContent, { setIsBannerVisible: setIsBannerVisible, id: id, brandName: brandName })), container);
}
exports.NotificationBanner = (0, redux_1.connector)((0, themed_component_1.asThemedComponent)((0, configured_component_1.asConfiguredComponent)(NotificationBannerComponent, 'NotificationBannerComponent')), {
    keysToPluck: ['brandName']
});
//# sourceMappingURL=NotificationBanner.js.map

/***/ }),

/***/ 67073:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.NOTIFICATION_BANNER_STORAGE_KEY = exports.LOCAL_STORE_FACTORY = void 0;
const local_storage_error_boundary_1 = __webpack_require__(60663);
exports.LOCAL_STORE_FACTORY = (0, local_storage_error_boundary_1.storageFactory)(() => window.localStorage);
exports.NOTIFICATION_BANNER_STORAGE_KEY = 'notification-banner';
//# sourceMappingURL=constants.js.map

/***/ }),

/***/ 27705:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.trackSnowplowNavigation = exports.getStorageId = exports.onBannerClose = void 0;
const cn_snowplow_web_1 = __webpack_require__(43954);
const constants_1 = __webpack_require__(67073);
const snowplow_tracking_1 = __webpack_require__(14307);
function onBannerClose(setIsBannerVisible, id) {
    (0, snowplow_tracking_1.trackMessageUnitEvent)({
        type: 'close',
        placement: 'top',
        subject: 'legal_notice_banner'
    });
    const endOfYear = new Date();
    /** Set the date to the last second of the year. */
    endOfYear.setFullYear(endOfYear.getFullYear(), 11, 31);
    endOfYear.setHours(23, 59, 59, 999);
    const bannerData = {
        expiration: endOfYear.getTime()
    };
    const storageId = getStorageId(id);
    constants_1.LOCAL_STORE_FACTORY.setItem(storageId, JSON.stringify(bannerData));
    setIsBannerVisible(false);
}
exports.onBannerClose = onBannerClose;
function getStorageId(id) {
    return id
        ? constants_1.NOTIFICATION_BANNER_STORAGE_KEY + id
        : constants_1.NOTIFICATION_BANNER_STORAGE_KEY;
}
exports.getStorageId = getStorageId;
function trackSnowplowNavigation(event) {
    const click_url = event.currentTarget.href;
    const containsAffiliateDomain = snowplow_tracking_1.affiliateDomainsList.some((domain) => click_url.includes(domain));
    const eventData = {
        type: 'click',
        label: 'Privacy Policy',
        placement: 'top',
        subject: 'legal_notice_banner'
    };
    const clickData = {
        click_id: event.currentTarget.id,
        click_class: event.currentTarget.className,
        click_text: event.currentTarget.textContent,
        click_type: event.currentTarget.tagName,
        click_target: event.currentTarget.target,
        click_url,
        placement: 'top',
        is_external: true,
        is_affiliate: containsAffiliateDomain
    };
    const trackEvent = cn_snowplow_web_1.trackSelfDescribingEvent;
    trackEvent({
        event: {
            schema: 'iglu:com.condenast/messaging_unit_event/jsonschema/3-0-3',
            data: eventData
        },
        context: [
            {
                schema: 'iglu:com.condenast/click_info/jsonschema/2-0-0',
                data: clickData
            }
        ]
    });
}
exports.trackSnowplowNavigation = trackSnowplowNavigation;
//# sourceMappingURL=helpers.js.map

/***/ }),

/***/ 49356:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.useSnowPlowTracking = exports.useShowNotificationBanner = void 0;
const react_1 = __webpack_require__(96540);
const constants_1 = __webpack_require__(67073);
const helpers_1 = __webpack_require__(27705);
const track_component_1 = __webpack_require__(78788);
const snowplow_tracking_1 = __webpack_require__(14307);
function useShowNotificationBanner(id) {
    const [isBannerVisible, setIsBannerVisible] = (0, react_1.useState)(false);
    /** Will be called on the Client Side only when the component is mounted. */
    (0, react_1.useEffect)(() => {
        setIsBannerVisible(shouldShowNotificationBanner(id));
    }, [id]);
    return { isBannerVisible, setIsBannerVisible };
}
exports.useShowNotificationBanner = useShowNotificationBanner;
function shouldShowNotificationBanner(id) {
    const storageId = (0, helpers_1.getStorageId)(id);
    const bannerData = constants_1.LOCAL_STORE_FACTORY.getItem(storageId);
    if (bannerData == null) {
        return true;
    }
    const parsedBannerData = JSON.parse(bannerData);
    const now = Date.now();
    if (now < parsedBannerData.expiration) {
        return false;
    }
    /** Passed over the time limit, the banner should be visible. */
    constants_1.LOCAL_STORE_FACTORY.removeItem(storageId);
    return true;
}
function useSnowPlowTracking(isBannerVisible) {
    (0, react_1.useEffect)(() => {
        if (isBannerVisible) {
            (() => {
                window.Kendra.TRACK_COMPONENT.broadcast(track_component_1.TrackComponentChannel.RENDER, {
                    name: 'NotificationBanner'
                });
                (0, snowplow_tracking_1.trackMessageUnitEvent)({
                    type: 'impression',
                    placement: 'top',
                    subject: 'legal_notice_banner'
                });
            })();
        }
    }, [isBannerVisible]);
}
exports.useSnowPlowTracking = useSnowPlowTracking;
//# sourceMappingURL=hooks.js.map

/***/ }),

/***/ 39471:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.NotificationBanner = void 0;
var NotificationBanner_1 = __webpack_require__(75527);
Object.defineProperty(exports, "NotificationBanner", ({ enumerable: true, get: function () { return NotificationBanner_1.NotificationBanner; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 92280:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.NotificationOneNavBannerCloseIcon = exports.NotificationOneNavBannerLink = exports.NotificationOneNavBannerTextWrapper = exports.NotificationOneNavBannerWrapper = exports.NotificationBannerCloseIcon = exports.NotificationBannerLink = exports.NotificationBannerTextWrapper = exports.NotificationBannerWrapper = exports.NotificationBannerStandardNavigationWrapper = exports.NotificationBannerConnectedNavigationWrapper = exports.NotificationBannerHeroAdWrapper = exports.NotificationBannerInsideOneNavWrapper = exports.NotificationBannerBasePageTop = void 0;
const styled_components_1 = __importDefault(__webpack_require__(92168));
const utils_1 = __webpack_require__(26865);
exports.NotificationBannerBasePageTop = styled_components_1.default.div.withConfig({
    displayName: 'NotificationBannerBasePageTop'
}) `
  width: 100%;
  display: flex;
  justify-content: center;
  background: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.notificationBannerTheme}.background-tertiary`)};
  margin-top: 1rem;
`;
exports.NotificationBannerInsideOneNavWrapper = styled_components_1.default.div.withConfig({
    displayName: 'NotificationBannerInsideOneNavWrapper'
}) `
  width: 100%;
  display: flex;
  justify-content: center;
  background: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.oneNavTheme}.background-tertiary`)};
`;
exports.NotificationBannerHeroAdWrapper = styled_components_1.default.div.withConfig({
    displayName: 'NotificationBannerBasePageTop'
}) `
  width: 100%;
  margin: 2em 0 0 0;
  display: flex;
  justify-content: center;
  background: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.notificationBannerTheme}.background-tertiary`)};
`;
exports.NotificationBannerConnectedNavigationWrapper = styled_components_1.default.div.withConfig({ displayName: 'NotificationBannerConnectedNavigationWrapper' }) `
  width: 100%;
  display: flex;
  justify-content: center;
  background: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.notificationBannerTheme}.background-tertiary`)};
`;
exports.NotificationBannerStandardNavigationWrapper = styled_components_1.default.div.withConfig({ displayName: 'NotificationBannerStandardNavigationWrapper' }) `
  width: 100%;
  display: flex;
  justify-content: center;
  background: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.notificationBannerTheme}.background-tertiary`)};
  transition: opacity 0.2s ease;
  opacity: 1;

  &.hidden {
    opacity: 0;
    display: none;
  }
`;
exports.NotificationBannerWrapper = styled_components_1.default.div.withConfig({
    displayName: 'NotificationBannerWrapper'
}) `
  background: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.notificationBannerTheme}.background-tertiary`)};
  ${(0, utils_1.getTypographyStyles)('typography.definitions.utility.legal-text')}
  padding: 1rem 1.5rem;
  position: relative;
  text-align: center;
  display: flex;
  gap: 1rem;
`;
exports.NotificationBannerTextWrapper = styled_components_1.default.div.withConfig({
    displayName: 'NotificationBannerTextWrapper'
}) `
  text-align: left;
  margin-right: 0.25rem;
  vertical-align: center;
  color: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.notificationBannerTheme}.item-primary`)};

  a:link,
  a:visited,
  a:active {
    text-decoration: underline;
    color: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.notificationBannerTheme}.item-primary`)};
  }

  @media (min-width: 1024px) {
    text-align: center;
    margin-right: 1.25rem;
  }
`;
exports.NotificationBannerLink = styled_components_1.default.a.withConfig({
    displayName: 'NotificationBannerLink'
}) `
  text-decoration: underline;
  font-weight: bold;
  color: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.notificationBannerTheme}.item-primary`)};
`;
exports.NotificationBannerCloseIcon = styled_components_1.default.div.withConfig({
    displayName: 'NotificationBannerCloseIcon'
}) `
  flex: 0 0 auto;
  cursor: pointer;

  display: flex;
  align-items: center;

  svg {
    width: 16px;
    height: 16px;
    path {
      fill: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.notificationBannerTheme}.item-primary`)};
    }
    circle {
      stroke: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.notificationBannerTheme}.item-primary`)};
    }
  }
`;
exports.NotificationOneNavBannerWrapper = (0, styled_components_1.default)(exports.NotificationBannerWrapper).withConfig({
    displayName: 'NotificationOneNavBannerWrapper'
}) `
  background: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.oneNavTheme}.background-tertiary`)};
`;
exports.NotificationOneNavBannerTextWrapper = (0, styled_components_1.default)(exports.NotificationBannerTextWrapper).withConfig({
    displayName: 'NotificationOneNavBannerWrapper'
}) `
  color: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.oneNavTheme}.item-primary`)};

  a:link,
  a:visited,
  a:active {
    text-decoration: underline;
    color: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.oneNavTheme}.item-primary`)};
  }
`;
exports.NotificationOneNavBannerLink = (0, styled_components_1.default)(exports.NotificationBannerLink).withConfig({
    displayName: 'NotificationOneNavBannerWrapper'
}) `
  color: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.oneNavTheme}.item-primary`)};
`;
exports.NotificationOneNavBannerCloseIcon = (0, styled_components_1.default)(exports.NotificationBannerCloseIcon).withConfig({
    displayName: 'NotificationOneNavBannerWrapper'
}) `
  svg {
    path {
      fill: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.oneNavTheme}.item-primary`)};
    }
    circle {
      stroke: ${({ theme }) => (0, utils_1.getColorToken)(`colors.navigation.${theme.oneNavTheme}.item-primary`)};
    }
  }
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 43481:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.NotificationBannerPosition = void 0;
var NotificationBannerPosition;
(function (NotificationBannerPosition) {
    NotificationBannerPosition["BASE_PAGE_TOP"] = "base-page-top";
    NotificationBannerPosition["INSIDE_ONE_NAV"] = "inside-one-nav";
    NotificationBannerPosition["ABOVE_CONNECTED_NAV"] = "connected-nav-top";
    NotificationBannerPosition["BELOW_CONNECTED_NAV"] = "connected-nav-bottom";
    NotificationBannerPosition["ABOVE_HERO_AD"] = "above-hero-ad";
    NotificationBannerPosition["BELOW_HERO_AD"] = "below-hero-ad";
    NotificationBannerPosition["ABOVE_STANDARD_NAV"] = "above-standard-nav";
    NotificationBannerPosition["BELOW_STANDARD_NAV"] = "below-standard-nav";
    NotificationBannerPosition["BELOW_ONE_NAV"] = "below-one-nav";
    NotificationBannerPosition["BELOW_ONE_NAV_HERO_AD"] = "below-one-nav-hero-ad";
    NotificationBannerPosition["ABOVE_NAV"] = "above-nav";
})(NotificationBannerPosition = exports.NotificationBannerPosition || (exports.NotificationBannerPosition = {}));
//# sourceMappingURL=types.js.map

/***/ }),

/***/ 91003:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { googleAnalytics } = __webpack_require__(90090);
const { ProductOfferListWrapper, ProductOfferList, ProductOfferListConfiguredDisclaimer, OffersDataDisclaimerContainer } = __webpack_require__(29294);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * OffersData component
 *
 * @param {object} props - React props
 * @param {string} [props.buttonPosition] - Button position to track Analytics event
 * @param {string} [props.className] - Optional top-level class to add
 * @param {object} [props.ctaText] - Optional text displaying CTA button text
 * @param {string} [props.ctaAtRetailerName] - Optional cta at text when price is not present
 * @param {boolean} [props.hideTopDisclaimerOnMobile] - Optional
 * @param {object} [props.offers] - Array of offers
 * @param {bool} [props.showHeaderButton] - flag to show button at header
 * @returns {ReactElement} <div>
 */
const OffersData = ({ buttonPosition, className, ctaText, ctaAtRetailerName, hideTopDisclaimerOnMobile, offers, showHeaderButton }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'OffersData'
        });
    }, []);
    const onClickHandler = () => {
        googleAnalytics.emitGoogleTrackingEvent('buy-button-click', {
            componentPosition: buttonPosition
        });
    };
    if (!offers?.length) {
        return null;
    }
    return (React.createElement(React.Fragment, null,
        showHeaderButton && (React.createElement(ProductOfferListWrapper, { className: classnames('offer-data', className), "data-testid": "ProductOfferListWrapper" },
            React.createElement(ProductOfferList, { dataAttrs: { 'data-component-position': buttonPosition }, defaultCTAText: ctaText, ctaAtRetailerName: ctaAtRetailerName, offers: offers, onClickHandler: onClickHandler, showCount: 4, showPriceOnButton: true }))),
        React.createElement(OffersDataDisclaimerContainer, { className: classnames('disclaimer-container', className) }, !hideTopDisclaimerOnMobile && React.createElement(ProductOfferListConfiguredDisclaimer, null))));
};
OffersData.propTypes = {
    buttonPosition: PropTypes.string.isRequired,
    className: PropTypes.string,
    ctaAtRetailerName: PropTypes.string,
    ctaText: PropTypes.string,
    hideTopDisclaimerOnMobile: PropTypes.bool,
    offers: PropTypes.array,
    showHeaderButton: PropTypes.bool
};
module.exports = OffersData;
//# sourceMappingURL=OffersData.js.map

/***/ }),

/***/ 19762:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(91003);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 29294:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { ConfiguredDisclaimer } = __webpack_require__(74307);
const ProductOfferListBase = __webpack_require__(18059);
const ProductOfferListWrapper = styled.div.withConfig({
    displayName: 'ProductOfferListWrapper'
}) `
  margin-bottom: ${calculateSpacing(2)};
`;
const ProductOfferList = styled(ProductOfferListBase).withConfig({
    displayName: 'ProductOfferList'
}) `
  display: flex;
  grid-column: 1/-1;
  flex-direction: column;
  align-items: left;
  width: 100%;
  @media (min-width: ${BREAKPOINTS.lg}) {
    grid-column: 1 / span 4;
    margin-bottom: ${calculateSpacing(2)};
  }
`;
const ProductOfferListConfiguredDisclaimer = styled(ConfiguredDisclaimer).withConfig({ displayName: 'ProductOfferListConfiguredDisclaimer' }) `
  grid-column: 1/-1;
  @media (min-width: ${BREAKPOINTS.lg}) {
    grid-column: 1/9;
  }
`;
const OffersDataDisclaimerContainer = styled.div.withConfig({
    displayName: 'OffersDataDisclaimerContainer'
}) ``;
module.exports = {
    ProductOfferListWrapper,
    ProductOfferList,
    ProductOfferListConfiguredDisclaimer,
    OffersDataDisclaimerContainer
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 74606:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState, useEffect } = __webpack_require__(96540);
const { connect } = __webpack_require__(67851);
const { BookmarkNew } = __webpack_require__(97504);
const { PhotoBookmarkMessageBannerWrapper, PhotoBookmarkMessageBannerMessage, PhotoMessageBannerContent, PhotoMessageBannerIcon } = __webpack_require__(62389);
const PhotoBookmarkMessageBanner = ({ channel, message, showPhotoBookmarkMessageBanner = true, title }) => {
    const [showMessageBanner, setShowMessageBanner] = useState(false);
    useEffect(() => {
        const bannerShownKey = `photoBookmarkBannerShownOn${channel}`;
        const hasVisitedBefore = window.localStorage.getItem(bannerShownKey);
        if (hasVisitedBefore || !showPhotoBookmarkMessageBanner) {
            setShowMessageBanner(false);
        }
        else {
            setShowMessageBanner(true);
            window.localStorage.setItem(bannerShownKey, true);
        }
    }, [channel, showPhotoBookmarkMessageBanner]);
    return (showMessageBanner && (React.createElement(PhotoBookmarkMessageBannerWrapper, { shouldShowCloseButton: true },
        React.createElement(PhotoMessageBannerContent, null,
            React.createElement(PhotoMessageBannerIcon, { as: BookmarkNew, title: title }),
            React.createElement(PhotoBookmarkMessageBannerMessage, null, message)))));
};
PhotoBookmarkMessageBanner.propTypes = {
    channel: PropTypes.string,
    message: PropTypes.string,
    showPhotoBookmarkMessageBanner: PropTypes.bool,
    title: PropTypes.string
};
PhotoBookmarkMessageBanner.displayName = 'PhotoBookmarkMessageBanner';
const mapStateToProps = (state) => {
    const { showPhotoBookmarkMessageBanner } = state;
    return {
        showPhotoBookmarkMessageBanner
    };
};
module.exports = connect(mapStateToProps)(PhotoBookmarkMessageBanner, 'PhotoBookmarkMessageBanner');
//# sourceMappingURL=PhotoBookmarkMessageBanner.js.map

/***/ }),

/***/ 79822:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useCallback, useEffect } = __webpack_require__(96540);
const { connect } = __webpack_require__(67851);
const { useIntl } = __webpack_require__(46984);
const { alertType } = __webpack_require__(39403);
const translations = (__webpack_require__(77463)["default"]);
const { PhotoBookmarkMessageBannerWrapper, SaveBookmarkAlertButton, SaveBookmarkAlertLabel, SaveBookmarkAlertLink, SaveBookmarkAlertContent } = __webpack_require__(62389);
const ResponsiveAsset = __webpack_require__(86157);
const { photoBookmarkDispatchActions } = __webpack_require__(86902);
const { trackDrawerLinkClick } = __webpack_require__(60880);
const { usePhotoBookmarkingContext } = __webpack_require__(50624);
const DrawerMessageBanner = __webpack_require__(11501);
const SHOW_DURATION_SECONDS = 5;
const SHOW_DURATION_MILLISECONDS = 1000 * SHOW_DURATION_SECONDS;
/**
 *
 * @param {object} props - PhotoBookmarkSaveAlert props
 * @param {string} [props.copilotID] - ID of the Copilot entity
 * @param {string} [props.contentType] - Content type which has been rendered
 * @param {object} [props.image] - image object for collection drawer
 * @param {boolean} [props.shouldEnableBookmarkDrawers] - Feature flag to define whether enable bookmark drawers functionality
 * @param {Function} [props.setLastBookmarkedPhoto] - Dispatch function to set the id of the most recently bookmarked photo
 *
 * @returns {ReactElement} <PhotoBookmarkSaveAlert>
 */
const PhotoBookmarkSaveAlert = ({ setLastBookmarkedPhoto, image, copilotID, contentType, shouldEnableBookmarkDrawers }) => {
    const { formatMessage } = useIntl();
    const { channel, openCreateCollectionDrawer, openCollectionsDrawer, lastCollectionSavedTo, saveAlertMessage: { linkMessage, textMessage, href, type }, shouldAutoSaveToCollection, closeAll } = usePhotoBookmarkingContext();
    const isErrorAlert = type === alertType.ERROR;
    const isAlertWithButton = type === alertType.SUCCESS_WITH_BUTTON;
    const isAlertWithLink = type === alertType.SUCCESS_WITH_LINK;
    // Prevent unnecessary re-renders from useEffect
    const memoizedSetLastBookmarkedPhoto = useCallback(setLastBookmarkedPhoto, [
        setLastBookmarkedPhoto
    ]);
    const showAlert = image || (contentType !== 'photo' && copilotID) || isErrorAlert;
    useEffect(() => {
        // This could be achieved with MessageBanner's delayDuration prop but
        // removing the lastBookmarkedPhoto from redux is required to stop the banner being
        // shown again when navigating between looks/pages
        let timerId;
        if (showAlert) {
            timerId = setTimeout(() => {
                memoizedSetLastBookmarkedPhoto();
                closeAll();
            }, SHOW_DURATION_MILLISECONDS);
        }
        return () => {
            timerId && clearTimeout(timerId);
        };
    }, [memoizedSetLastBookmarkedPhoto, showAlert, closeAll]);
    if (!showAlert) {
        return null;
    }
    const handleClick = () => {
        if (shouldAutoSaveToCollection) {
            openCollectionsDrawer();
            return;
        }
        openCreateCollectionDrawer();
    };
    const linkText = linkMessage || formatMessage(translations.SaveBookmarkAlertLink);
    const shouldUseImage = image && !isErrorAlert;
    const drawerLinkClick = () => {
        trackDrawerLinkClick({
            channel,
            contentId: copilotID,
            contentType,
            label: linkText,
            subjectId: lastCollectionSavedTo.id,
            subjectName: lastCollectionSavedTo.name
        });
    };
    return (React.createElement(React.Fragment, null,
        !shouldEnableBookmarkDrawers && (React.createElement(PhotoBookmarkMessageBannerWrapper, null,
            React.createElement(SaveBookmarkAlertContent, null,
                shouldUseImage && React.createElement(ResponsiveAsset, { ...image }),
                React.createElement(SaveBookmarkAlertLabel, null, textMessage || formatMessage(translations.SaveBookmarkAlertText)),
                isAlertWithLink && (React.createElement(SaveBookmarkAlertLink, { href: href, onClick: drawerLinkClick }, linkText)),
                isAlertWithButton && (React.createElement(SaveBookmarkAlertButton, { label: linkText, onClickHandler: handleClick, btnStyle: "text" }))))),
        shouldEnableBookmarkDrawers && (React.createElement(DrawerMessageBanner, { bannerType: "savedWithAddingToList" }))));
};
PhotoBookmarkSaveAlert.propTypes = {
    contentType: PropTypes.string,
    copilotID: PropTypes.string,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    setLastBookmarkedPhoto: PropTypes.func,
    shouldEnableBookmarkDrawers: PropTypes.bool
};
PhotoBookmarkSaveAlert.displayName = 'PhotoBookmarkSaveAlert';
const mapStateToProps = (state) => {
    const { config: { account }, lastBookmarkedPhoto: { copilotID, image, contentType } = {} } = state;
    const shouldEnableBookmarkDrawers = account?.bookmark?.enableBookmarkDrawers || false;
    return {
        copilotID,
        image,
        contentType,
        shouldEnableBookmarkDrawers
    };
};
const mapDispatchToProps = (dispatch) => {
    const { setLastBookmarkedPhoto } = photoBookmarkDispatchActions(dispatch);
    return {
        setLastBookmarkedPhoto
    };
};
module.exports = connect(mapStateToProps, mapDispatchToProps)(PhotoBookmarkSaveAlert);
//# sourceMappingURL=PhotoBookmarkSaveAlert.js.map

/***/ }),

/***/ 13483:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.PhotoBookmarking = void 0;
const prop_types_1 = __importDefault(__webpack_require__(5556));
const react_1 = __importStar(__webpack_require__(96540));
const react_intl_1 = __webpack_require__(46984);
const PhotoBookmarkSaveAlert_1 = __importDefault(__webpack_require__(79822));
const collections_drawer_1 = __importDefault(__webpack_require__(51285));
const PhotoBookmarkMessageBanner_1 = __importDefault(__webpack_require__(74606));
const constants_1 = __webpack_require__(96472);
const screen_1 = __webpack_require__(55030);
const translations_1 = __importDefault(__webpack_require__(77463));
const CreateCollectionDrawer_1 = __importDefault(__webpack_require__(71648));
const styles_1 = __webpack_require__(42775);
const context_1 = __webpack_require__(50624);
const reducer_1 = __webpack_require__(39403);
const PaletteProvider_1 = __importDefault(__webpack_require__(49235));
const messageBannerTextForChannel = {
    Runway: {
        mobileMessage: translations_1.default.RunwayMobileMessageBannerText,
        desktopMessage: translations_1.default.RunwayDesktopMessageBannerText
    },
    StreetStyle: {
        mobileMessage: translations_1.default.GalleryMobileMessageBannerText,
        desktopMessage: translations_1.default.GalleryDesktopMessageBannerText
    },
    ImageSearch: {
        mobileMessage: translations_1.default.ImageSearchMobileMessageBannerText,
        desktopMessage: translations_1.default.ImageSearchDesktopMessageBannerText
    },
    Default: {
        mobileMessage: translations_1.default.DefaultMobileMessageBannerText,
        desktopMessage: translations_1.default.DefaultDesktopMessageBannerText
    }
};
const getMessageBannerText = ({ isLargeDevice, channel }) => {
    const { mobileMessage, desktopMessage } = messageBannerTextForChannel[channel] || {};
    return isLargeDevice ? desktopMessage : mobileMessage;
};
const getIsLargeDevice = () => constants_1.CAN_USE_DOM
    ? window.matchMedia(`(min-width: ${constants_1.BREAKPOINTS.md})`).matches
    : false;
/**
 *
 * @param {object} props - PhotoBookmarking props
 * @param {string} [props.theme] - set theme of all PhotoBookmarking child components to be inverted or standard by default
 *
 * @returns {ReactElement} <PhotoBookmarking>
 */
const PhotoBookmarking = ({ theme = 'standard' }) => {
    const { formatMessage } = (0, react_intl_1.useIntl)();
    const [isLargeDevice, setIsLargeDevice] = (0, react_1.useState)(getIsLargeDevice());
    const { showComponent, channel } = (0, context_1.usePhotoBookmarkingContext)();
    const showSaveAlert = showComponent === reducer_1.showComponentType.SAVE_ALERT;
    const showCollectionsDrawer = showComponent === reducer_1.showComponentType.COLLECTIONS_DRAWER;
    (0, screen_1.useResizeObserver)(() => setIsLargeDevice(getIsLargeDevice()));
    const messageBannerText = getMessageBannerText({
        isLargeDevice,
        channel
    });
    return (react_1.default.createElement(PaletteProvider_1.default, { palette: theme },
        showSaveAlert && react_1.default.createElement(PhotoBookmarkSaveAlert_1.default, null),
        react_1.default.createElement(collections_drawer_1.default, { isLargeDevice: isLargeDevice, isOpen: showCollectionsDrawer }),
        react_1.default.createElement(CreateCollectionDrawer_1.default, { isLargeDevice: isLargeDevice }),
        react_1.default.createElement(styles_1.CollectionsDrawerGlobalStyles, null),
        messageBannerText && (react_1.default.createElement(PhotoBookmarkMessageBanner_1.default, { channel: channel, message: formatMessage(messageBannerText), title: formatMessage(translations_1.default.photoBookmarkSaveIconTitle) }))));
};
exports.PhotoBookmarking = PhotoBookmarking;
exports.PhotoBookmarking.propTypes = {
    theme: prop_types_1.default.oneOf(['inverted', 'standard'])
};
//# sourceMappingURL=PhotoBookmarking.js.map

/***/ }),

/***/ 56602:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const prop_types_1 = __importDefault(__webpack_require__(5556));
const react_1 = __importDefault(__webpack_require__(96540));
const redux_1 = __webpack_require__(57744);
const context_1 = __webpack_require__(50624);
const hooks_1 = __webpack_require__(40667);
const PhotoBookmarking_1 = __webpack_require__(13483);
/**
 * PhotoBookmarkingProvider is a context provider component that extends photo bookmarking functionality
 * when it use used to wrap pages or child components that also have photo bookmarking enabled.
 * It manages the state for photo bookmarking, collections and message banners and provides
 * the necessary actions and state to child components through context.
 *
 * This component serves as the entry point for the photo bookmarking collections features and renders the
 * PhotoBookmarking component which handles alerts, drawers, and message banners related to bookmarking.
 *
 * @param {object} props - Component props
 * @param {React.ReactNode} props.children - Child components that will have access to the photo bookmarking context
 * @param {string} props.channel - Channel identifier used for message customization (e.g., 'Runway', 'StreetStyle')
 * @param {number} props.collectionAutoSaveThreshold - Number of saves to a collection before auto-saving is enabled
 * @param {string} props.federatedGraphqlUrl - URL for the GraphQL API that handles bookmarking operations
 * @param {boolean} props.isPhotoBookmarkingEnabled - Flag to enable/disable the photo bookmarking feature
 * @param {object} props.site - Site information object containing organization ID
 * @param {string} props.theme - Visual theme for the bookmarking components ('inverted' or 'standard')
 * @returns {React.ReactElement} The PhotoBookmarkingProvider component
 */
const PhotoBookmarkingProvider = ({ children, channel, collectionAutoSaveThreshold, federatedGraphqlUrl, isPhotoBookmarkingEnabled = false, site, theme }) => {
    const { actions, state } = (0, hooks_1.usePhotoBookmarkingState)();
    const organizationId = site?.orgId || '';
    const [hasCollections, setHasCollections] = (0, hooks_1.useHasCollections)({
        federatedGraphqlUrl,
        organizationId
    });
    if (!isPhotoBookmarkingEnabled) {
        return children;
    }
    const shouldAutoSaveToCollection = !!collectionAutoSaveThreshold &&
        state.lastCollectionSavedTo.count >= collectionAutoSaveThreshold;
    const providerState = {
        ...actions,
        ...state,
        shouldAutoSaveToCollection,
        setHasCollections,
        hasCollections,
        federatedGraphqlUrl,
        organizationId,
        channel
    };
    return (react_1.default.createElement(context_1.PhotoBookmarkingContext.Provider, { value: providerState },
        react_1.default.createElement(PhotoBookmarking_1.PhotoBookmarking, { theme: theme }),
        children));
};
PhotoBookmarkingProvider.propTypes = {
    channel: prop_types_1.default.string,
    children: prop_types_1.default.node,
    collectionAutoSaveThreshold: prop_types_1.default.number,
    federatedGraphqlUrl: prop_types_1.default.string,
    isPhotoBookmarkingEnabled: prop_types_1.default.bool,
    site: prop_types_1.default.object,
    theme: prop_types_1.default.oneOf(['inverted', 'standard'])
};
exports["default"] = (0, redux_1.connector)(PhotoBookmarkingProvider, {
    keysToSpread: ['userPlatform', 'coreDataLayer']
});
//# sourceMappingURL=PhotoBookmarkingProvider.js.map

/***/ }),

/***/ 73806:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.channel = void 0;
exports.channel = {
    RUNWAY: 'Runway',
    STREET_STYLE: 'StreetStyle',
    IMAGE_SEARCH: 'ImageSearch'
};
Object.freeze(exports.channel);
//# sourceMappingURL=constants.js.map

/***/ }),

/***/ 47242:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.useMemoizedDispatchActions = exports.photoBookmarkActionType = void 0;
const react_1 = __webpack_require__(96540);
exports.photoBookmarkActionType = {
    CLOSE_ALL: 'closeAll',
    OPEN_COLLECTIONS_DRAWER: 'openCollectionsDrawer',
    OPEN_CREATE_COLLECTION_DRAWER: 'openCreateCollectionDrawer',
    OPEN_SAVE_ALERT_CREATE_COLLECTION: 'openSaveAlertCreateCollection',
    OPEN_SAVE_ALERT_BOARD_NAME: 'openSaveAlertWithBoardName',
    OPEN_SAVE_ALERT_BOARD_NAME_AFTER_MOVE: 'openSaveAlertWithBoardNameAfterMove',
    OPEN_SAVE_ALERT_ERROR: 'openSaveAlertError',
    OPEN_SAVE_ALERT_WITH_MOVE_CTA: 'openSaveAlertWithMoveCTA',
    SET_LAST_COLLECTION_SAVED: 'setLastCollectionSaved'
};
// Memoized hook version
function useMemoizedDispatchActions(dispatch) {
    const closeAll = (0, react_1.useCallback)(() => {
        dispatch({
            type: exports.photoBookmarkActionType.CLOSE_ALL
        });
    }, [dispatch]);
    const openCollectionsDrawer = (0, react_1.useCallback)(() => dispatch({
        type: exports.photoBookmarkActionType.OPEN_COLLECTIONS_DRAWER
    }), [dispatch]);
    const openCreateCollectionDrawer = (0, react_1.useCallback)(() => dispatch({
        type: exports.photoBookmarkActionType.OPEN_CREATE_COLLECTION_DRAWER
    }), [dispatch]);
    const openSaveAlertCreateCollection = (0, react_1.useCallback)(() => dispatch({
        type: exports.photoBookmarkActionType.OPEN_SAVE_ALERT_CREATE_COLLECTION
    }), [dispatch]);
    const openSaveAlertError = (0, react_1.useCallback)(({ collectionName } = {}) => {
        dispatch({
            type: exports.photoBookmarkActionType.OPEN_SAVE_ALERT_ERROR,
            collectionName
        });
    }, [dispatch]);
    const openSaveAlertWithBoardName = (0, react_1.useCallback)(({ collectionName }) => {
        dispatch({
            type: exports.photoBookmarkActionType.OPEN_SAVE_ALERT_BOARD_NAME,
            name: collectionName
        });
    }, [dispatch]);
    const openSaveAlertWithBoardNameAfterMove = (0, react_1.useCallback)(({ collectionName }) => {
        dispatch({
            type: exports.photoBookmarkActionType.OPEN_SAVE_ALERT_BOARD_NAME_AFTER_MOVE,
            name: collectionName
        });
    }, [dispatch]);
    const openSaveAlertWithMoveCTA = (0, react_1.useCallback)(() => {
        dispatch({
            type: exports.photoBookmarkActionType.OPEN_SAVE_ALERT_WITH_MOVE_CTA
        });
    }, [dispatch]);
    const setLastCollectionSaved = (0, react_1.useCallback)(({ collectionName, collectionId }) => {
        dispatch({
            type: exports.photoBookmarkActionType.SET_LAST_COLLECTION_SAVED,
            name: collectionName,
            id: collectionId
        });
    }, [dispatch]);
    return {
        closeAll,
        openCollectionsDrawer,
        openCreateCollectionDrawer,
        openSaveAlertCreateCollection,
        openSaveAlertWithBoardName,
        openSaveAlertWithBoardNameAfterMove,
        openSaveAlertWithMoveCTA,
        openSaveAlertError,
        setLastCollectionSaved
    };
}
exports.useMemoizedDispatchActions = useMemoizedDispatchActions;
//# sourceMappingURL=dispatchActions.js.map

/***/ }),

/***/ 40667:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.useHasCollections = exports.usePhotoBookmarkingState = void 0;
const react_1 = __webpack_require__(96540);
const react_intl_1 = __webpack_require__(46984);
const collectionsUtils_1 = __webpack_require__(74139);
const dispatchActions_1 = __webpack_require__(47242);
const reducer_1 = __webpack_require__(39403);
const translations_1 = __importDefault(__webpack_require__(77463));
const usePhotoBookmarkingState = () => {
    const { formatMessage } = (0, react_intl_1.useIntl)();
    const initialState = {
        showComponent: reducer_1.showComponentType.NONE,
        saveAlertMessage: {
            linkMessage: formatMessage(translations_1.default.SaveBookmarkAlertLink),
            textMessage: formatMessage(translations_1.default.SaveBookmarkAlertText),
            type: reducer_1.alertType.SUCCESS_WITH_BUTTON
        },
        lastCollectionSavedTo: { name: '', id: '', count: 0 }
    };
    const reducerWithFormatMessage = (state, action) => (0, reducer_1.reducer)(state, action, formatMessage);
    const [state, dispatch] = (0, react_1.useReducer)(reducerWithFormatMessage, initialState);
    const actions = (0, dispatchActions_1.useMemoizedDispatchActions)(dispatch);
    return { actions, state };
};
exports.usePhotoBookmarkingState = usePhotoBookmarkingState;
const useHasCollections = ({ federatedGraphqlUrl, organizationId }) => {
    const [hasCollections, setHasCollections] = (0, react_1.useState)(false);
    (0, react_1.useEffect)(() => {
        const fetchCollectionCount = async () => {
            const collectionCount = await (0, collectionsUtils_1.getCollectionCount)({
                federatedGraphqlUrl,
                organizationId
            });
            setHasCollections(collectionCount > 0);
        };
        fetchCollectionCount();
    }, [federatedGraphqlUrl, organizationId]);
    return [hasCollections, setHasCollections];
};
exports.useHasCollections = useHasCollections;
//# sourceMappingURL=hooks.js.map

/***/ }),

/***/ 39403:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.reducer = exports.alertType = exports.showComponentType = exports.ACCOUNT_SAVED_IMAGES_PAGE = void 0;
const dispatchActions_1 = __webpack_require__(47242);
const translations_1 = __importDefault(__webpack_require__(77463));
exports.ACCOUNT_SAVED_IMAGES_PAGE = '/account/saved/images';
exports.showComponentType = {
    COLLECTIONS_DRAWER: 'CollectionsDrawer',
    CREATE_COLLECTION_DRAWER: 'CreateCollectionDrawer',
    NONE: 'none',
    SAVE_ALERT: 'PhotoBookmarkSaveAlert'
};
exports.alertType = {
    SUCCESS_WITH_LINK: 'success-with-link',
    SUCCESS_WITH_BUTTON: 'success-with-button',
    ERROR: 'error'
};
const reducer = (state, action, formatMessage) => {
    switch (action.type) {
        case dispatchActions_1.photoBookmarkActionType.CLOSE_ALL: {
            return {
                ...state,
                showComponent: exports.showComponentType.NONE
            };
        }
        case dispatchActions_1.photoBookmarkActionType.OPEN_COLLECTIONS_DRAWER:
            return {
                ...state,
                showComponent: exports.showComponentType.COLLECTIONS_DRAWER
            };
        case dispatchActions_1.photoBookmarkActionType.OPEN_CREATE_COLLECTION_DRAWER: {
            return {
                ...state,
                showComponent: exports.showComponentType.CREATE_COLLECTION_DRAWER
            };
        }
        case dispatchActions_1.photoBookmarkActionType.OPEN_SAVE_ALERT_CREATE_COLLECTION:
            return {
                ...state,
                saveAlertMessage: {
                    linkMessage: formatMessage(translations_1.default.SaveBookmarkAlertLink),
                    textMessage: formatMessage(translations_1.default.SaveBookmarkAlertText),
                    type: exports.alertType.SUCCESS_WITH_BUTTON
                },
                showComponent: exports.showComponentType.SAVE_ALERT
            };
        case dispatchActions_1.photoBookmarkActionType.OPEN_SAVE_ALERT_BOARD_NAME: {
            return {
                ...state,
                saveAlertMessage: {
                    href: exports.ACCOUNT_SAVED_IMAGES_PAGE,
                    linkMessage: formatMessage(translations_1.default.SaveAlertSavedToBoardMessage),
                    textMessage: formatMessage(translations_1.default.SaveAlertWithBoardName, {
                        collectionName: action.name
                    }),
                    type: exports.alertType.SUCCESS_WITH_LINK
                },
                showComponent: exports.showComponentType.SAVE_ALERT
            };
        }
        case dispatchActions_1.photoBookmarkActionType.OPEN_SAVE_ALERT_BOARD_NAME_AFTER_MOVE: {
            return {
                ...state,
                saveAlertMessage: {
                    href: exports.ACCOUNT_SAVED_IMAGES_PAGE,
                    linkMessage: formatMessage(translations_1.default.SaveAlertSavedToBoardMessage),
                    textMessage: formatMessage(translations_1.default.SaveAlertMovedWithBoardName, {
                        collectionName: action.name
                    }),
                    type: exports.alertType.SUCCESS_WITH_LINK
                },
                showComponent: exports.showComponentType.SAVE_ALERT
            };
        }
        case dispatchActions_1.photoBookmarkActionType.OPEN_SAVE_ALERT_WITH_MOVE_CTA: {
            return {
                ...state,
                saveAlertMessage: {
                    linkMessage: formatMessage(translations_1.default.SaveBookmarkAlertMoveLink),
                    textMessage: formatMessage(translations_1.default.SaveAlertWithBoardName, {
                        collectionName: state.lastCollectionSavedTo.name
                    }),
                    type: exports.alertType.SUCCESS_WITH_BUTTON
                },
                showComponent: exports.showComponentType.SAVE_ALERT
            };
        }
        case dispatchActions_1.photoBookmarkActionType.OPEN_SAVE_ALERT_ERROR: {
            return {
                ...state,
                saveAlertMessage: {
                    textMessage: formatMessage(translations_1.default.SaveBookmarkErrorText, {
                        collectionName: action.collectionName
                    }),
                    type: exports.alertType.ERROR
                },
                showComponent: exports.showComponentType.SAVE_ALERT
            };
        }
        case dispatchActions_1.photoBookmarkActionType.SET_LAST_COLLECTION_SAVED: {
            const isSavedToSameCollection = state.lastCollectionSavedTo.id === action.id;
            const newCount = isSavedToSameCollection
                ? state.lastCollectionSavedTo.count + 1
                : 1;
            return {
                ...state,
                lastCollectionSavedTo: {
                    name: action.name,
                    id: action.id,
                    count: newCount
                }
            };
        }
        default:
            return state;
    }
};
exports.reducer = reducer;
//# sourceMappingURL=reducer.js.map

/***/ }),

/***/ 37230:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const { useInView } = __webpack_require__(26855);
const { connect } = __webpack_require__(67851);
const classnames = __webpack_require__(32485);
const { buildThresholdArray } = __webpack_require__(26695);
const ResponsiveAsset = __webpack_require__(73275);
const { getFinalPrice, getFinalOffer } = __webpack_require__(50398);
const { mapSourcesToSegmentedSources } = __webpack_require__(52009);
const { TrackComponentChannel } = __webpack_require__(78788);
const { encodeAffiliateLink, extractTrackingParameters } = __webpack_require__(25203);
const { getAmazonAffiliateAttributes } = __webpack_require__(82063);
const { handleLinkClick } = __webpack_require__(43428);
const { PLPProductCardWrapper, PLPProductCardObject, PLPProductCardHeader, PLPProductCardImage, PLPProductCardBody, PLPProductCardOffer, PLPProductCardBrandName, PLPProductCardName, PLPProductCardLink, PLPVariantInfoWrapper, PLPVariantInfo } = __webpack_require__(58533);
// eslint-disable-next-line complexity
const PLPProductCard = ({ contentType, dangerousHed, url, hasAtRetailerNameLowerCase = false, hasImageGrid, hasProductPriceColor, shouldUseProductPriceSecondary = false, hasProductNewPriceColor, hasUnderlineHed, hasProductWhiteBackground = false, isProductCardName, isProductCardRetailerName = false, shouldCheckProductInView, hasMarginTopAuto = false, hasPLPBrandNameContextTitle = false, hasPLPCardNameDescriptionCore = false, image, isLazy, hasImpressionTracking = false, data_item = {}, brand, offers, showOfferUrl, onClick = () => { }, contentId, layoutName, layout, dropShipSellers, isDropshipProduct, className, isProductWithVariants = false, expVariationName, priceFormatting, actionIdFlags = {}, amazonAffiliateTag }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'PLPProductCard'
        });
    }, []);
    const offer = offers ? offers[0] : {};
    const { price, comparisonPrice, sellerName, shortUrl, purchaseUri } = offer;
    const offerShortUrl = contentType === 'commerce-product' && !shortUrl ? purchaseUri : shortUrl;
    const { formatMessage } = useIntl();
    let isAffiliateProduct = true;
    if (isDropshipProduct && dropShipSellers?.length) {
        const newPurchaseUri = new URL(purchaseUri);
        isAffiliateProduct = dropShipSellers?.some((seller) => !newPurchaseUri.hostname?.toLowerCase().includes(seller));
    }
    const cid = !isAffiliateProduct
        ? data_item.id || data_item.variantKey
        : contentId;
    // for usa brands we will be passing shortUrl for non-usa brands we will be using purchaseUri
    const offerUrlParams = `cid=${cid}`;
    let offerUrl;
    if (showOfferUrl) {
        offerUrl = purchaseUri;
    }
    else {
        offerUrl = cid
            ? encodeAffiliateLink(offerShortUrl, {
                origin: cid,
                offerUrl: purchaseUri
            })
            : offerShortUrl;
    }
    if (offerUrl.indexOf('?') > 0) {
        offerUrl = `${offerUrl}&${offerUrlParams}`;
    }
    else {
        offerUrl = !isAffiliateProduct
            ? `${offerUrl}#${offerUrlParams}`
            : `${offerUrl}?${offerUrlParams}`;
    }
    const currencySymbols = {
        USD: '$',
        EUR: '€',
        GBP: '£',
        INR: '₹',
        JPY: '¥',
        TWD: 'NT$',
        PHP: '₱',
        PLN: 'zł',
        KRW: '₩',
        UAH: '₴',
        VND: '₫',
        MXN: 'Mex$' // Mexican peco
    };
    let target = '_self';
    let rel;
    if (isAffiliateProduct) {
        target = '_blank';
        rel = 'noreferrer noopener sponsored';
    }
    // Get Amazon affiliate attributes for the actual offer URL (not the affiliate link)
    const amazonAffiliateAttributes = getAmazonAffiliateAttributes(purchaseUri, amazonAffiliateTag);
    const linkProps = {
        'data-buy-button': true,
        'data-offer-retailer': sellerName || '',
        'data-offer-url': url || '',
        'aria-label': dangerousHed || '',
        href: offerUrl || url || '',
        title: dangerousHed || '',
        rel,
        target,
        hasUnderline: hasUnderlineHed,
        ...amazonAffiliateAttributes,
        id: offer.offerId || offer.id
    };
    const isActionIdEnabledForComponent = actionIdFlags?.enableActionIdForPLPProductCard;
    const enableActionIdMapping = linkProps?.href?.includes('cna.st') && isActionIdEnabledForComponent;
    const handleClick = (event) => {
        const hrefValue = event?.currentTarget?.getAttribute('href');
        const queryParams = extractTrackingParameters();
        if (enableActionIdMapping && hrefValue) {
            event.preventDefault();
            handleLinkClick({
                event,
                onClickHandler: onClick,
                linkProps: hrefValue,
                setLinkProps: (href) => {
                    window.open(href, '_blank', 'noopener, noreferrer');
                },
                type: 'PLPProductCard',
                component: 'plp_product_card',
                queryParams
            });
        }
        else {
            onClick({ event });
        }
    };
    const finalPrice = getFinalPrice(price, hasProductPriceColor, hasProductNewPriceColor, comparisonPrice, currencySymbols[offer.currency || 'USD'], shouldUseProductPriceSecondary, priceFormatting);
    const finalOffer = getFinalOffer(finalPrice, sellerName, hasProductPriceColor, formatMessage, isAffiliateProduct, dropShipSellers, isDropshipProduct, isProductCardRetailerName, hasAtRetailerNameLowerCase, offerUrl, handleClick, offer.offerId);
    const { label, component } = finalOffer;
    const item = { ...data_item, expVariationName, layout };
    delete item.image;
    delete item.imageLabels;
    delete item.source;
    const cardProps = {
        'data-item': JSON.stringify(item)
    };
    let imageComponent = null;
    if (image && image.sources && offerUrl) {
        imageComponent = (React.createElement("a", { href: offerUrl, target: target, rel: rel, tabIndex: "-1", onClick: handleClick, ...amazonAffiliateAttributes },
            React.createElement(ResponsiveAsset, { ...image, isLazy: isLazy })));
    }
    else if (image && image.sources) {
        imageComponent = React.createElement(ResponsiveAsset, { ...image, isLazy: isLazy });
    }
    const [setNode, , entry] = useInView({
        threshold: buildThresholdArray()
    });
    const [inView, setInView] = React.useState(false);
    React.useEffect(() => {
        if (entry && entry.intersectionRatio) {
            if (entry.intersectionRatio < 0.95) {
                setInView(true);
            }
            else {
                setInView(false);
            }
        }
    }, [entry]);
    const impressionTrackingClasses = [];
    if (hasImpressionTracking) {
        impressionTrackingClasses.push('impressionTracking');
        if (layoutName && layoutName.length) {
            impressionTrackingClasses.push(layoutName);
        }
    }
    const calculatePaddingTop = (aspectRatioString) => {
        let paddingTop = 100;
        if (aspectRatioString?.includes(':')) {
            const aspectRatioNumber = aspectRatioString.split(':').map(Number);
            const paddingTopPercentage = (aspectRatioNumber[1] / aspectRatioNumber[0]) * 100;
            if (isFinite(paddingTopPercentage)) {
                paddingTop = paddingTopPercentage;
            }
        }
        return paddingTop;
    };
    const getAspectRatio = (img) => {
        const aspectRatioForViewports = {};
        if (img) {
            const { segmentedSources, sources = {} } = img;
            const segmentedSourcesObject = segmentedSources ?? mapSourcesToSegmentedSources(sources);
            aspectRatioForViewports.sm = segmentedSourcesObject.sm[0]?.aspectRatio;
            aspectRatioForViewports.lg = segmentedSourcesObject.lg[0]?.aspectRatio;
        }
        return aspectRatioForViewports;
    };
    const getPaddingTopPercentage = (img) => {
        const aspectRatioForViewports = getAspectRatio(img);
        return {
            sm: calculatePaddingTop(aspectRatioForViewports?.sm),
            lg: calculatePaddingTop(aspectRatioForViewports?.lg)
        };
    };
    return (React.createElement(PLPProductCardWrapper, { className: classnames([className, impressionTrackingClasses]), hasImageGrid: hasImageGrid, hasProductPriceColor: hasProductPriceColor, inView: inView, shouldCheckProductInView: shouldCheckProductInView, isProductCardName: isProductCardName, ref: setNode, ...cardProps },
        React.createElement(PLPProductCardObject, null,
            React.createElement(PLPProductCardHeader, null,
                React.createElement(PLPProductCardImage, { hasProductWhiteBackground: hasProductWhiteBackground, hasImageGrid: hasImageGrid, paddingTop: getPaddingTopPercentage(image) }, imageComponent),
                isProductWithVariants ? (React.createElement(PLPVariantInfoWrapper, { ...linkProps, onClick: handleClick },
                    React.createElement(PLPVariantInfo, null, "more options"))) : null),
            React.createElement(PLPProductCardBody, { hasImageGrid: hasImageGrid, isProductCardName: isProductCardName },
                brand && brand.name ? (React.createElement(PLPProductCardBrandName, { isProductCardName: isProductCardName, hasPLPBrandNameContextTitle: hasPLPBrandNameContextTitle, "data-testid": "plp-product-card-brand-name" }, brand.name)) : null,
                dangerousHed ? (React.createElement(PLPProductCardLink, { ...linkProps, onClick: handleClick },
                    React.createElement(PLPProductCardName, { isProductCardName: isProductCardName, isDropshipProduct: isDropshipProduct, isAffiliateProduct: isAffiliateProduct, hasPLPCardNameDescriptionCore: hasPLPCardNameDescriptionCore, dangerouslySetInnerHTML: {
                            __html: dangerousHed
                        } }))) : null,
                label && component && linkProps.href ? (React.createElement(PLPProductCardOffer, { hasProductPriceColor: hasProductPriceColor, hasMarginTopAuto: hasMarginTopAuto, "data-testid": "plp-product-card-offer" }, component)) : null))));
};
PLPProductCard.propTypes = {
    actionIdFlags: PropTypes.object,
    amazonAffiliateTag: PropTypes.string,
    brand: PropTypes.object,
    className: PropTypes.string,
    contentId: PropTypes.string,
    contentType: PropTypes.string,
    dangerousHed: PropTypes.string,
    data_item: PropTypes.object,
    dropShipSellers: PropTypes.arrayOf(PropTypes.string),
    expVariationName: PropTypes.string,
    hasAtRetailerNameLowerCase: PropTypes.bool,
    hasImageGrid: PropTypes.bool,
    hasImpressionTracking: PropTypes.bool,
    hasMarginTopAuto: PropTypes.bool,
    hasPLPBrandNameContextTitle: PropTypes.bool,
    hasPLPCardNameDescriptionCore: PropTypes.bool,
    hasProductNewPriceColor: PropTypes.bool,
    hasProductPriceColor: PropTypes.bool,
    hasProductWhiteBackground: PropTypes.bool,
    hasToggleGridColor: PropTypes.bool,
    hasUnderlineHed: PropTypes.bool,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    isDropshipProduct: PropTypes.bool,
    isLazy: PropTypes.bool,
    isProductCardName: PropTypes.bool,
    isProductCardRetailerName: PropTypes.bool,
    isProductWithVariants: PropTypes.bool,
    layout: PropTypes.string,
    layoutName: PropTypes.string,
    offers: PropTypes.array,
    onClick: PropTypes.func,
    priceFormatting: PropTypes.shape({
        fractionDigits: PropTypes.number,
        shouldFormatDecimalSeparator: PropTypes.bool
    }),
    shouldCheckProductInView: PropTypes.bool,
    shouldUseProductPriceSecondary: PropTypes.bool,
    showNewProductCardDesign: PropTypes.bool,
    showOfferUrl: PropTypes.bool,
    sourceName: PropTypes.string,
    url: PropTypes.string
};
PLPProductCard.displayName = 'PLPProductCard';
const mapStateToProps = (state) => ({
    amazonAffiliateTag: state.commercePlatform?.amazonAffiliateTag
});
// Export unconnected component for testing
PLPProductCard.UnconnectedComponent = PLPProductCard;
module.exports = connect(mapStateToProps)(PLPProductCard);
//# sourceMappingURL=PLPProductCard.js.map

/***/ }),

/***/ 50398:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const translations = (__webpack_require__(20199)/* ["default"] */ .A);
const { PLPProductCardPrice, PLPProductCardRetailerName, PLPProductCardSalePrice, PLPArrow } = __webpack_require__(58533);
const isPriceContainsCurrencySymbol = (price) => !/^\d/.test(price);
const isPriceInteger = (price) => Number.isInteger(price);
const lowerizeFirstWord = (atRetailerNameText) => {
    if (atRetailerNameText) {
        const atRetailerNameTextArray = atRetailerNameText.split(' ');
        return `${atRetailerNameTextArray[0].toLowerCase()} ${atRetailerNameTextArray
            .splice(1)
            .join(' ')
            .toUpperCase()}`;
    }
    return atRetailerNameText;
};
/**
 * Returns locale to use as Intl.NumberFormat argument based on currency symbol
 *
 * @param {string} [currency] - currency symbol
 *
 * @returns {string} locale
 */
const getLocaleByCurrency = (currency) => (currency === '€' ? 'de' : 'en');
/**
 * Formats price according to priceFormatting settings.
 * If shouldFormatDecimalSeparator sets to true,
 * , (comma) is used for prices in € and . (dot) is used for prices in $, £ and all other currencies
 *  e.g. $50.30, €50,30 and £50,30
 *  To change decimal separator locale is passed to Intl.NumberFormat: 'en' for dot and 'de' for comma.
 *
 * @param {number|string} [price] - price to format
 * @param {string} [currency] - currency symbol ($, £, etc.)
 * @param {object} [priceFormatting] - object with formatting settings
 * @param {number} [priceFormatting.fractionDigits] - Optional. Number of fraction digits to display
 * @param {bool} [priceFormatting.shouldFormatDecimalSeparator] - Optional. Should decimal separator be formatted according to currency
 *
 * @returns {string} formatted string
 */
const formatPrice = (price, currency, priceFormatting) => {
    if (!price || isPriceContainsCurrencySymbol(price) || isPriceInteger(price)) {
        return price;
    }
    const minimumFractionDigits = priceFormatting?.fractionDigits || 0;
    let formattedPrice = price;
    let locale = 'en';
    if (priceFormatting?.shouldFormatDecimalSeparator && currency) {
        locale = getLocaleByCurrency(currency);
    }
    formattedPrice = new Intl.NumberFormat(locale, {
        useGrouping: false,
        minimumFractionDigits
    }).format(formattedPrice);
    return formattedPrice;
};
const getFinalPrice = (price, hasProductPriceColor, hasProductNewPriceColor, comparisonPrice, productPriceCurrency, shouldUseProductPriceSecondary, priceFormatting) => {
    if (!price) {
        return {
            label: null,
            component: null
        };
    }
    let displayedPrice = price;
    let displayedComparisonPrice = comparisonPrice;
    if (priceFormatting) {
        displayedPrice = formatPrice(price, productPriceCurrency, priceFormatting);
        displayedComparisonPrice = formatPrice(comparisonPrice, productPriceCurrency, priceFormatting);
    }
    return {
        label: comparisonPrice || price,
        component: comparisonPrice ? (React.createElement(React.Fragment, null,
            React.createElement(PLPProductCardSalePrice, { hasProductPriceColor: hasProductPriceColor, shouldUseProductPriceSecondary: shouldUseProductPriceSecondary },
                price && !isPriceContainsCurrencySymbol(price)
                    ? productPriceCurrency
                    : '',
                displayedPrice),
            ' ',
            React.createElement(PLPProductCardPrice, { hasProductPriceColor: hasProductPriceColor, hasProductNewPriceColor: hasProductNewPriceColor, shouldUseProductPriceSecondary: shouldUseProductPriceSecondary },
                price && !isPriceContainsCurrencySymbol(comparisonPrice)
                    ? productPriceCurrency
                    : '',
                displayedComparisonPrice))) : (React.createElement(PLPProductCardPrice, { hasProductPriceColor: hasProductPriceColor, shouldUseProductPriceSecondary: shouldUseProductPriceSecondary },
            price && !isPriceContainsCurrencySymbol(price)
                ? productPriceCurrency
                : '',
            displayedPrice))
    };
};
/*
    In a given string, The regular expression (/&#{0,1}[a-z0-9]+;/ig, "") this looks for html-entities like &amp etc
    In a given string, The regular expression (/(<([^>]+)>)/gi, '') this expression helps in removing
    html elements like <p>, <strong> etc
    */
const stripHTMLTags = (retailerName) => {
    return retailerName
        .replace(/&#{0,1}[a-z0-9]+;/gi, '')
        .replace(/(<([^>]+)>)/gi, '');
};
function getRetailerTemplate(isDropshipProduct, isAffiliateProduct, dropShipSellers, atRetailerNameComponentText, hasProductPriceColor, isProductCardRetailerName, offerUrl, handleClick, offerId) {
    if (!isDropshipProduct) {
        return (React.createElement(PLPProductCardRetailerName, { hasProductPriceColor: hasProductPriceColor, isProductCardRetailerName: isProductCardRetailerName, "data-testid": "plp-product-card-retailer-name" },
            ' ',
            stripHTMLTags(atRetailerNameComponentText)));
    }
    /*
      if its affiliate product use <PLPArrow /> or else use <PLPShopping /> (for dropship products)
      <PLPArrow /> is styled component to show Arrow icon
      <PLPShopping /> is styled component to show shopping icon (basket icon)
      */
    return (React.createElement(PLPProductCardRetailerName, { hasProductPriceColor: hasProductPriceColor, isDropshipProduct: isDropshipProduct, isAffiliateProduct: isAffiliateProduct, isProductCardRetailerName: isProductCardRetailerName, "data-testid": "plp-product-card-retailer-name" }, isAffiliateProduct ? (React.createElement(React.Fragment, null,
        React.createElement("a", { href: offerUrl, "aria-label": "Opens in a new window", target: "_blank", rel: "noreferrer noopener sponsored", onClick: handleClick, id: offerId },
            React.createElement("span", null, stripHTMLTags(atRetailerNameComponentText)),
            React.createElement("span", { className: "plpicons" },
                React.createElement(PLPArrow, { "aria-hidden": true }))))) : (React.createElement(React.Fragment, null,
        React.createElement("a", { href: offerUrl, target: "_self", rel: "noreferrer", onClick: handleClick, id: offerId },
            React.createElement("span", null,
                "Shop on ",
                dropShipSellers ? dropShipSellers?.[0] : ''))))));
}
const getFinalOffer = (finalPrice, sellerName, hasProductPriceColor, formatMessage, isAffiliateProduct, dropShipSellers, isDropshipProduct, isProductCardRetailerName, hasAtRetailerNameLowerCase, offerUrl, handleClick, offerId) => {
    const translationText = sellerName
        ? translations.atRetailerNameComponentText
        : translations.shopNowComponentText;
    const atRetailerNameComponentText = hasAtRetailerNameLowerCase
        ? lowerizeFirstWord(formatMessage(translationText, {
            sellerNameText: sellerName
        }))
        : formatMessage(translationText, {
            sellerNameText: sellerName
        });
    const atRetailerNameLabel = formatMessage(translations.atRetailerNameLabel, {
        finalPriceLabel: finalPrice.label,
        sellerNameText: sellerName
    });
    const buyAt = formatMessage(translations.buyAt, {
        sellerNameText: sellerName
    });
    const baseTemplate = getRetailerTemplate(isDropshipProduct, isAffiliateProduct, dropShipSellers, atRetailerNameComponentText, hasProductPriceColor, isProductCardRetailerName, offerUrl, handleClick, offerId);
    return {
        label: finalPrice.label ? atRetailerNameLabel : buyAt,
        component: finalPrice?.component ? (React.createElement(React.Fragment, null,
            finalPrice.component,
            baseTemplate)) : (React.createElement(PLPProductCardRetailerName, { hasProductPriceColor: hasProductPriceColor, isProductCardRetailerName: isProductCardRetailerName }, buyAt))
    };
};
module.exports = {
    getFinalPrice,
    getFinalOffer,
    getLocaleByCurrency,
    formatPrice,
    lowerizeFirstWord
};
//# sourceMappingURL=PLPProductCardHelper.js.map

/***/ }),

/***/ 67611:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PLPProductCard = __webpack_require__(37230);
const { asConfiguredComponent } = __webpack_require__(12892);
module.exports = asConfiguredComponent(PLPProductCard, 'PLPProductCard');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 58533:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BREAKPOINTS } = __webpack_require__(96472);
const Arrow = __webpack_require__(43222);
const Shopping = __webpack_require__(10934);
const { BaseLink, BaseText } = __webpack_require__(76955);
const { calculateSpacing, getColorStyles, getTypographyStyles, getColorToken, minScreen, isInverted } = __webpack_require__(26865);
const PLPProductCardSalePrice = styled(BaseText).withConfig({
    displayName: 'PLPProductCardSalePrice'
}) `
  text-decoration: line-through;
  ${({ theme }) => `  ${getColorStyles(theme, 'color', isInverted(theme)
    ? 'colors.consumption.body.inverted.body'
    : 'colors.consumption.body.standard.subhed')};
  `};
  ${({ hasProductPriceColor, theme }) => hasProductPriceColor &&
    `
${getTypographyStyles(theme, 'typography.definitions.globalEditorial.numerical-small')};
`}

  ${({ shouldUseProductPriceSecondary, theme }) => shouldUseProductPriceSecondary &&
    `
    ${getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-secondary')};
  `}
`;
PLPProductCardSalePrice.defaultProps = {
    as: 'span',
    colorToken: 'colors.consumption.body.standard.link',
    typeIdentity: 'typography.definitions.utility.button-utility'
};
const PLPProductCardRetailerName = styled(BaseText).withConfig({
    displayName: 'PLPProductCardRetailerName'
}) `
  a {
    text-decoration: none;

    .plpicons {
      position: relative;
      margin-left: 2px;
    }
  }
  ${({ isDropshipProduct, isAffiliateProduct }) => (isDropshipProduct || isAffiliateProduct) &&
    `display: flex; 
line-height: 1.5em;`}

  ${({ hasProductPriceColor, theme }) => hasProductPriceColor &&
    `
  ${getColorStyles(theme, 'color', isInverted(theme)
        ? 'colors.consumption.body.inverted.body'
        : 'colors.consumption.body.standard.body-deemphasized')};
  `}

  ${({ isProductCardRetailerName, theme }) => isProductCardRetailerName &&
    `${getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-secondary')};
    ${getColorStyles(theme, 'color', isInverted(theme)
        ? 'colors.consumption.body.inverted.body'
        : 'colors.interactive.base.black')};
  `};
`;
PLPProductCardRetailerName.defaultProps = {
    as: 'span',
    colorToken: 'colors.consumption.body.standard.link',
    typeIdentity: 'typography.definitions.globalEditorial.numerical-small'
};
const PLPArrow = styled(Arrow).withConfig({ displayName: 'plpArrowIcon' }) `
  ${({ theme }) => `
  transform: rotate(-45deg) scale(0.75);
  position: relative;
  top: 3px;
  fill: ${getColorToken(theme, isInverted(theme)
    ? 'colors.consumption.body.inverted.body'
    : 'colors.consumption.body.standard.body-deemphasized')};
  stroke: ${getColorToken(theme, isInverted(theme)
    ? 'colors.consumption.body.inverted.body'
    : 'colors.consumption.body.standard.body-deemphasized')};
  stroke-width: 1.2px;
`}
`;
const PLPShopping = styled(Shopping).withConfig({
    displayName: 'plpShoppingIcon'
}) `
  ${({ theme }) => `
  width: 18px;
  height: 18px;
  fill: ${getColorToken(theme, isInverted(theme)
    ? 'colors.consumption.body.inverted.body'
    : 'colors.consumption.body.standard.body-deemphasized')};
`}
`;
const PLPProductCardPrice = styled(BaseText).withConfig({
    displayName: 'PLPProductCardPrice'
}) `
  ${({ theme }) => `  ${getColorStyles(theme, 'color', isInverted(theme)
    ? 'colors.consumption.body.inverted.body'
    : 'colors.consumption.body.standard.subhed')};
  `};
  ${({ hasProductPriceColor, theme }) => hasProductPriceColor &&
    `
  ${getTypographyStyles(theme, 'typography.definitions.globalEditorial.numerical-small')};
  `}
  ${({ shouldUseProductPriceSecondary, theme }) => shouldUseProductPriceSecondary &&
    `
  ${getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-secondary')};
  `}
  ${({ hasProductNewPriceColor, theme }) => {
    if (!hasProductNewPriceColor && isInverted(theme)) {
        return `${getColorStyles(theme, 'color', 'colors.consumption.body.inverted.body')}`;
    }
    else if (hasProductNewPriceColor) {
        return `${getColorStyles(theme, 'color', 'colors.consumption.body.standard.accent')}`;
    }
    return ``;
}}
`;
PLPProductCardPrice.defaultProps = {
    as: 'span',
    colorToken: 'colors.consumption.body.standard.link',
    typeIdentity: 'typography.definitions.utility.button-utility'
};
const PLPProductCardOffer = styled(BaseText).withConfig({
    displayName: 'PLPProductCardOffer'
}) `
  /*  stylelint-disable value-no-vendor-prefix */
  display: box;
  margin-top: ${({ hasMarginTopAuto }) => hasMarginTopAuto ? 'auto' : `${calculateSpacing(0.5)}`};
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
`;
PLPProductCardOffer.defaultProps = {
    colorToken: 'colors.consumption.body.standard.link',
    typeIdentity: 'typography.definitions.utility.button-utility'
};
const PLPProductCardLink = styled(BaseLink).withConfig({
    displayName: 'PLPProductCardLink'
}) `
  min-height: 4em;
  max-height: 5em;
  ${minScreen(BREAKPOINTS.md)} {
    min-height: 3.5em;
  }
`;
PLPProductCardLink.defaultProps = {
    colorToken: 'colors.consumption.body.standard.link',
    hasUnderline: true,
    typeIdentity: 'typography.definitions.utility.button-utility'
};
const PLPProductCardBrandName = styled(BaseText).withConfig({
    displayName: 'PLPProductCardBrandName'
}) `
  ${({ isProductCardName, theme }) => isProductCardName &&
    `${getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-primary')};
    ${getColorStyles(theme, 'color', isInverted(theme)
        ? 'colors.consumption.body.inverted.body'
        : 'colors.interactive.base.black')};
    `}

  ${({ hasPLPBrandNameContextTitle, theme }) => hasPLPBrandNameContextTitle &&
    `${getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-title')};
    text-transform: uppercase;
    `}
  display: -webkit-box;
  margin-top: ${calculateSpacing(0.5)};
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
`;
PLPProductCardBrandName.defaultProps = {
    colorToken: 'colors.consumption.body.standard.subhed',
    typeIdentity: 'typography.definitions.consumptionEditorial.subhed-aux-secondary'
};
const PLPProductCardName = styled(BaseText).withConfig({
    displayName: 'PLPProductCardName'
}) `
  ${({ isProductCardName, theme }) => isProductCardName &&
    `${getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-secondary')};
    ${getColorStyles(theme, 'color', isInverted(theme)
        ? 'colors.consumption.body.inverted.body'
        : 'colors.interactive.base.black')};
  `};

  ${({ hasPLPCardNameDescriptionCore, theme }) => hasPLPCardNameDescriptionCore &&
    `${getTypographyStyles(theme, 'typography.definitions.discovery.description-core')};
`};
  display: -webkit-box;
  margin-top: ${calculateSpacing(0.5)};
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
`;
PLPProductCardName.defaultProps = {
    colorToken: 'colors.consumption.body.standard.subhed',
    typeIdentity: 'typography.definitions.consumptionEditorial.subhed-aux-secondary'
};
const PLPProductCardBody = styled.div.withConfig({
    displayName: 'PLPProductCardBody'
}) `
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  ${({ hasImageGrid }) => `${!hasImageGrid &&
    `padding: 0 ${calculateSpacing(1)} ${calculateSpacing(1.5)};`};
    ${hasImageGrid &&
    `padding-top:${calculateSpacing(1.5)};
     min-height:100px;
    `}`}
  text-align: left;
`;
const PLPProductCardImage = styled.div.withConfig({
    displayName: 'PLPProductCardImage'
}) `
  &::before {
    display: block;
    ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.consumption.body.standard.bg-card')};
    padding-top: ${({ paddingTop }) => paddingTop && paddingTop.sm ? `${paddingTop.sm}%` : `100%`};
    ${minScreen(BREAKPOINTS.md)} {
      padding-top: ${({ paddingTop }) => paddingTop && paddingTop.lg ? `${paddingTop.lg}%` : `100%`};
    }
    content: '';
  }
  position: relative;
  width: 100%;
  overflow: hidden;

  picture,
  img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background-color: ${({ hasProductWhiteBackground, theme }) => hasProductWhiteBackground
    ? `${getColorToken(theme, 'colors.background.white')}`
    : `${getColorToken(theme, 'colors.consumption.body.standard.bg-card')}`};
    max-width: 100%;
    ${({ hasImageGrid }) => !hasImageGrid && `object-fit: cover;`}
  }
`;
const PLPProductCardHeader = styled.div.withConfig({
    displayName: 'PLPProductCardHeader'
}) `
  position: relative;
`;
const PLPProductCardObject = styled.div.withConfig({
    displayName: 'PLPProductCardObject'
}) `
  display: flex;
  flex-direction: column;
  border: 1px solid;
  border-color: transparent;
  height: 100%;
`;
const PLPProductCardWrapper = styled.div.withConfig({
    displayName: 'PLPProductCardWrapper'
}) `
  margin: 0;
  height: 100%;

  ${({ shouldCheckProductInView, inView }) => shouldCheckProductInView && inView && `opacity: 0.4;`}

  &:hover {
    cursor: pointer;
    ${PLPProductCardBrandName},${PLPProductCardName} {
      ${({ isProductCardName, theme }) => isProductCardName &&
    !isInverted(theme) &&
    `${getColorStyles(theme, 'color', 'colors.consumption.body.standard.link-hover')};`}
    }
    ${PLPProductCardName} {
      ${({ isProductCardName }) => isProductCardName && `text-decoration-line:underline;`}
    }
  }
`;
const PLPVariantInfoWrapper = styled(BaseLink).withConfig({
    displayName: 'PLPVariantInfoWrapper'
}) `
  position: absolute;
  bottom: 6px;
  left: 6px;
  border: 1px solid;
  padding: ${calculateSpacing(0.5)} ${calculateSpacing(1)};

  &:hover {
    text-decoration: none;
  }
  ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.background.white')};
  ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.background.light')};
`;
const PLPVariantInfo = styled(BaseText).withConfig({
    displayName: 'PLPVariantInfo'
}) `
  text-decoration: none;
  ${getTypographyStyles('typography.definitions.globalEditorial.context-secondary')}
  ${({ theme }) => `  ${getColorStyles(theme, 'color', 'colors.consumption.body.standard.subhed')};
  `};
`;
module.exports = {
    PLPProductCardWrapper,
    PLPProductCardObject,
    PLPProductCardHeader,
    PLPProductCardImage,
    PLPProductCardBody,
    PLPProductCardBrandName,
    PLPProductCardOffer,
    PLPProductCardName,
    PLPProductCardLink,
    PLPProductCardPrice,
    PLPProductCardRetailerName,
    PLPProductCardSalePrice,
    PLPArrow,
    PLPVariantInfoWrapper,
    PLPVariantInfo,
    PLPShopping
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 20199:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    atRetailerNameComponentText: {
        id: 'PLPProductCard.AtRetailerNameComponentText',
        defaultMessage: 'Shop at {sellerNameText}',
        description: 'PLPProductCard component At RetailerName text'
    },
    shopNowComponentText: {
        id: 'PLPProductCard.ShopNowComponentText',
        defaultMessage: 'Shop Now',
        description: 'PLPProductCard component At RetailerName text without RetailerName'
    },
    atRetailerNameLabel: {
        id: 'PLPProductCard.AtRetailerNameLabel',
        defaultMessage: '$ {finalPriceLabel} At {sellerNameText}',
        description: 'PLPProductCard component At RetailerName text with price'
    },
    buyAt: {
        id: 'PLPProductCard.BuyAt',
        defaultMessage: 'Buy At {sellerNameText}',
        description: 'PLPProductCard component Buy At RetailerName text'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 87475:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const debounce = __webpack_require__(38221);
const React = __webpack_require__(96540);
const { useState } = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(20811)/* ["default"] */ .A);
const { googleAnalytics } = __webpack_require__(90090);
const { useViewportObserver } = __webpack_require__(55030);
const { Disclaimer } = __webpack_require__(74307);
const ExternalLink = __webpack_require__(39832);
const ResponsiveAsset = __webpack_require__(73275);
const { handleLinkClick } = __webpack_require__(43428);
const ProductOfferList = __webpack_require__(18059);
const ProductEmbedHedandDek = __webpack_require__(37537);
const { TrackComponentChannel } = __webpack_require__(78788);
const { formatGtmData, productImpressionTracking } = __webpack_require__(60162);
const { componentTracking } = __webpack_require__(90090);
const { ProductEmbedContent, ProductEmbedCTA, ProductEmbedImageLink, ProductEmbedWrapper, ProductEmbedImage, ProductEmbedImageCreditWrapper, ProductEmbedDek, ProductEmbedClampedDescription } = __webpack_require__(53985);
const { extractTrackingParameters } = __webpack_require__(25203);
/**
 * Returns the CTA text based on content type
 * Falls back to defaultCtaText
 *
 * @param contentType - the content type of the embed
 * @param ctaText - the cta text explicitly provided
 * @param formatMessage - function provided by useIntl hook
 * @returns {string} CTA text
 */
const getCTAText = (contentType, ctaText, formatMessage) => {
    if (contentType === 'venue') {
        return formatMessage(translations.venueCtaText);
    }
    else if (ctaText) {
        return ctaText;
    }
    return formatMessage(translations.defaultCtaText);
};
/**
 * ProductEmbed component
 *
 * @param {object} props - React Props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.contentType] - Optional content type for the embed
 * @param {string} [props.ctaText] - Optional text displaying CTA button text
 * @param {string} [props.ctaHref] - Optional text url to link to CTA button
 * @param {string} [props.dangerousHed] - Optional HTML text description of a title for card. Fallsback to dangerousDek if empty.
 * @param {string} [props.dangerousDek] - Optional HTML text description of a caption for card
 * @param {string} [props.embedSize] - Optional property to know the size of product embeds
 * @param {string} [props.internalLink] - Optional link used for image
 * @param {boolean} [props.isEmbedSizeEnabled] - Option switch to turn on size based product embed changes
 * @param {ResponsiveAsset.propTypes.media} props.image - Required image that contains altText, attributes, and source urls
 * @param {boolean} [props.isSponsored] - Optional boolean to add class if this is a sponsored product
 * @param {Array} [props.multipleOffers] - Optional array of offers to display on a product slide
 * @param {boolean} [props.isFirstProduct] - boolean if the procust is the first one on the content
 * @param {string} [props.productBrand] - optional text description of brand name
 * @param {string} [props.productOfferVariation] - optional product offer variation to display text outside button
 * @param {boolean} [props.shouldHaveAlternateHedSpacing] - optional boolean to add alternate spacing above and below the hed
 * @param {boolean} [props.shouldHaveModerateWrapperPadding] - optional boolean to have moderate padding around product embed
 * @param {string} [props.shouldShowBrandName] - optional boolean to add brand name above product name
 * @param {string} [props.shouldShowBrandInProductName] - optional boolean to add brand name with product name
 * @param {boolean} [props.showAffiliateDisclaimerOnFirstProduct] - Optional flag to toggle affiliate disclaimer on first product embed
 * @param {boolean} [props.showLocalisedOffers] - Optional flag to show localized offers
 * @param {boolean} props.showOfferUrl - Determines whether offerUrl should be displayed or not
 * @param {boolean} [props.showPriceOnButton] - Optional flag to toggle offer price display inside a button
 * @param {object} [props.variations] - Optional variation properties used in rendering the component
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 * @param {boolean} [props.isLazy] - Optional if the image is lazy loaded
 * @param {string} [props.hedTag] - prop used for hed tag value of ProductEmbedHed component
 * @param {boolean} [props.hasGalleryProductEmbedPadding] - optional flag to show padding for galler product embed
 * @param {boolean} [props.hasProductEmbedHedTextCentreAlign] - optional flag to show to text aligned center
 * @param {boolean} [props.hasProductEmbedPadding] - optional flag to show paading for product embed
 * @param {string} [props.ctaAtRetailerName] - Optional cta at text when price is not present
 * @param {string} [props.id] - prop for copilot id
 * @param {boolean} [props.showClampedProductDescription] - optinal flag for for enabling product description accordion data
 * @param {number} [props.productDescriptionLineLength] - optional for adjusting product description lines
 * @param {string} [props.component] - Optional prop to fetch the component name
 * @param {object} [props.actionIdFlags] - Optional flags to enable actionId encoding on click
 * @returns {ReactElement} <div>
 */
// eslint-disable-next-line complexity
const ProductEmbed = (props) => {
    const { className, contentType, ctaHref, ctaText, ctaAtRetailerName, dangerousCredit, dangerousDek, dangerousHed, embedSize, internalLink, isEmbedSizeEnabled = false, offerRetailer, offerUrl, image, isSponsored, isFirstProduct, hasProductEmbedPadding = false, hasProductEmbedHedTextCentreAlign, hasGalleryProductEmbedPadding = false, hedTag = 'div', multipleOffers, productBrand, productId, id, productOfferVariation, shouldHaveAlternateHedSpacing = false, shouldHaveModerateWrapperPadding = false, shouldShowBrandName = false, shouldShowBrandInProductName = false, showAffiliateDisclaimerOnFirstProduct, showOfferUrl, showPriceOnButton, variations = {
        imageAlign: 'left',
        noBottomPadding: false,
        hasSidePadding: false,
        hasTopMargin: true,
        shouldDekBelowOffer: false,
        hasMultipleLines: false,
        hasBottomMargin: false
    }, dropShipSellers, showLocalisedOffers, isLazy = false, variationName, shouldEnableBundleComponentAnalytics = false, index, showClampedProductDescription = false, hasReadMoreFeature = false, productDescriptionLineLength, component = 'product_embed', actionIdFlags = {} } = props;
    const showClampedDescription = showClampedProductDescription && hasReadMoreFeature;
    const isActionIdEnabledForComponent = actionIdFlags?.enableActionIdForProductEmbed;
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ProductEmbed',
            variation: variationName
        });
    }, [variationName]);
    const [showLess, setShowLess] = useState(false);
    const { formatMessage } = useIntl();
    const productCtaText = getCTAText(contentType, ctaText, formatMessage);
    let isExternalProduct = true;
    if (dropShipSellers?.length > 0) {
        isExternalProduct = dropShipSellers?.some((seller) => !offerUrl?.toLowerCase().includes(seller));
    }
    const { imageAlign, marginDek, contentAlign, buttonAlign, hasTopMargin, contentPosition, shouldDekBelowOffer, hasMultipleLines } = variations;
    const externalLinkAttrs = {
        tabIndex: -1,
        'aria-hidden': true,
        'data-offer-retailer': offerRetailer,
        'data-offer-url': offerUrl
    };
    const productData = {
        dangerousHed,
        brand: { name: productBrand },
        id: productId || id,
        index,
        contentType,
        offers: multipleOffers,
        component: 'product_embed',
        hotelLink: internalLink
    };
    React.useEffect(() => {
        window.addEventListener('load', () => productImpressionTracking('ProductEmbed', document.getElementsByClassName('product-embed')));
        window.addEventListener('scroll', debounce(() => {
            productImpressionTracking('ProductEmbed', document.getElementsByClassName('product-embed'));
        }, 1000));
    }, []);
    const gtmClickHandler = (position, event, actionId) => {
        formatGtmData({
            window,
            product: { ...productData },
            index: position,
            actionId,
            layout: 'ProductEmbed',
            event,
            layoutTitle: dangerousHed
        });
    };
    const onClickHandler = ({ label, position, event, actionId }) => {
        const eventLabel = {
            'click text': embedSize
                ? `${embedSize}_${position + 1}_${label}`
                : `default_${position + 1}_${label}`
        };
        googleAnalytics.emitGoogleTrackingEvent('buy-button-click', eventLabel);
        gtmClickHandler(position, event, actionId);
    };
    const trackingImpressionEvent = () => {
        googleAnalytics.emitUniqueGoogleTrackingEvent('productembeds');
    };
    useViewportObserver(`.product-embed`, undefined, (isInViewport) => {
        if (isInViewport) {
            trackingImpressionEvent();
        }
    });
    const useEmbedSize = !!(isEmbedSizeEnabled && embedSize);
    const defaultText = formatMessage(translations.defaultTextPreamble);
    const hedWithBrand = productBrand && shouldShowBrandInProductName
        ? `${productBrand} ${dangerousHed}`
        : dangerousHed;
    const viewProps = {
        dangerousHed: hedWithBrand,
        dangerousDek,
        embedSize,
        marginDek,
        productBrand,
        productId,
        shouldShowBrandName,
        shouldDekBelowOffer
    };
    const getDescription = (dangerousDek) => {
        return (React.createElement(ProductEmbedDek, { className: "product-embed__dek", marginDek: marginDek, dangerouslySetInnerHTML: { __html: dangerousDek }, showClampedProductDescription: showClampedDescription, productDescriptionLineLength: productDescriptionLineLength, showLess: showLess }));
    };
    const getClampedDescription = (dangerousDek) => {
        const type = showLess ? 'close' : 'open';
        const onTextClick = () => {
            setShowLess(!showLess);
            formatGtmData({
                window,
                product: {
                    ...productData
                },
                index: productData.index,
                layout: 'ProductEmbed',
                type
            });
        };
        return (React.createElement(ProductEmbedClampedDescription, { lines: productDescriptionLineLength, linesInExtraLargeDesktop: productDescriptionLineLength, isCollapsible: true, showLess: showLess, offset: 2, onTextClick: onTextClick, showClampedProductDescription: showClampedDescription }, getDescription(dangerousDek)));
    };
    const getImageAlign = () => imageAlign && image && !useEmbedSize ? imageAlign : null;
    const getMarginDek = () => (!useEmbedSize && marginDek ? marginDek : null);
    const url = showOfferUrl ? offerUrl : ctaHref;
    const linkhref = internalLink ?? url;
    const enableActionIdMapping = linkhref?.includes('cna.st') && isActionIdEnabledForComponent;
    const handleClick = (event, position) => {
        const hrefValue = event?.currentTarget?.getAttribute('href');
        const queryParams = extractTrackingParameters();
        if (enableActionIdMapping && hrefValue) {
            event.preventDefault();
            handleLinkClick({
                event,
                gtmTrackOnClick: gtmClickHandler,
                linkProps: hrefValue,
                setLinkProps: (newHref) => {
                    window.open(newHref, '_blank', 'noopener, noreferrer');
                },
                position,
                type: 'GallerySlideImage',
                component,
                queryParams
            });
        }
        else {
            gtmClickHandler(position, event);
        }
    };
    const getImageElement = () => {
        if (internalLink) {
            return (React.createElement(ProductEmbedImageLink, { href: linkhref, onClick: (event, position) => handleClick(event, position) },
                React.createElement(ProductEmbedImage, { hasNativeImgLazyLoading: true, isLazy: isLazy, as: ResponsiveAsset, ...image })));
        }
        return (React.createElement(ProductEmbedImageLink, { as: ExternalLink, href: linkhref, target: isExternalProduct ? '_blank' : '_self', rel: "sponsored noopener", attributes: externalLinkAttrs, onClick: (event, position) => handleClick(event, position), component: component },
            React.createElement(ProductEmbedImage, { hasNativeImgLazyLoading: true, isLazy: isLazy, as: ResponsiveAsset, ...image }),
            dangerousCredit && (React.createElement(ProductEmbedImageCreditWrapper, { dangerouslySetInnerHTML: { __html: dangerousCredit } }))));
    };
    let analyticsDataAttributes = {};
    if (shouldEnableBundleComponentAnalytics) {
        analyticsDataAttributes = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, 'product carousel item', index);
    }
    return (React.createElement(React.Fragment, null,
        showAffiliateDisclaimerOnFirstProduct && isFirstProduct && (React.createElement(Disclaimer, { "data-testid": "ProductEmbedDisclaimer" })),
        React.createElement(ProductEmbedWrapper, { ...analyticsDataAttributes, "data-testid": "ProductEmbedWrapper", className: classnames('product-embed', {
                [`product-embed--image-${imageAlign}`]: imageAlign && image && !useEmbedSize
            }, { 'product-embed--no-bottom-padding': variations.noBottomPadding }, className), imageAlign: getImageAlign(), id: id || productId, marginDek: getMarginDek(), hasTopMargin: hasTopMargin, isSponsored: isSponsored, embedSize: embedSize, noImage: !image && useEmbedSize, noBottomPadding: variations.noBottomPadding, noRightLeftPadding: variations.noRightLeftPadding, hasSidePadding: variations.hasSidePadding, shouldHaveAlternateHedSpacing: shouldHaveAlternateHedSpacing, shouldHaveModerateWrapperPadding: shouldHaveModerateWrapperPadding, shouldShowBrandName: shouldShowBrandName, useEmbedSize: useEmbedSize, hasProductEmbedPadding: hasProductEmbedPadding, "data-item": JSON.stringify(productData), hasGalleryProductEmbedPadding: hasGalleryProductEmbedPadding },
            image && getImageElement(),
            React.createElement(ProductEmbedContent, { className: "product-embed__content", contentAlign: contentAlign, contentPosition: contentPosition },
                React.createElement(ProductEmbedHedandDek, { ...viewProps, hasBottomMargin: variations.hasBottomMargin, hedTag: hedTag, hasProductEmbedHedTextCentreAlign: hasProductEmbedHedTextCentreAlign, showLess: showLess, getClampedDescription: showClampedDescription ? getClampedDescription : getDescription }),
                productCtaText && ctaHref && (React.createElement(ProductEmbedCTA, { useEmbedSize: useEmbedSize, as: ProductOfferList, marginDek: marginDek, buttonAlign: buttonAlign, noDek: !dangerousDek && showPriceOnButton, className: "product-embed__cta", defaultCTAText: productCtaText, ctaAtRetailerName: ctaAtRetailerName, defaultTextForEmbedSize: useEmbedSize ? defaultText : null, hasMultipleLines: hasMultipleLines, embedSize: embedSize, offers: multipleOffers, onClickHandler: onClickHandler, productId: productId, showCount: 4, showOfferUrl: showOfferUrl, showPriceOnButton: showPriceOnButton, productOfferVariation: productOfferVariation, dropShipSellers: dropShipSellers, showLocalisedOffers: showLocalisedOffers, hasProductEmbedPadding: hasProductEmbedPadding, hasGalleryProductEmbedPadding: hasGalleryProductEmbedPadding, isActionIdEnabledForComponent: isActionIdEnabledForComponent, component: component })),
                shouldDekBelowOffer &&
                    dangerousDek &&
                    dangerousHed &&
                    embedSize !== 'feature-small' &&
                    (showClampedDescription
                        ? getClampedDescription(dangerousDek)
                        : getDescription(dangerousDek))))));
};
ProductEmbed.propTypes = {
    actionIdFlags: PropTypes.object,
    className: PropTypes.string,
    component: PropTypes.string,
    contentType: PropTypes.string,
    ctaAtRetailerName: PropTypes.string,
    ctaHref: PropTypes.string,
    ctaText: PropTypes.string,
    dangerousCredit: PropTypes.string,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    dropShipSellers: PropTypes.array,
    embedSize: PropTypes.string,
    hasGalleryProductEmbedPadding: PropTypes.bool,
    hasProductEmbedHedTextCentreAlign: PropTypes.bool,
    hasProductEmbedPadding: PropTypes.bool,
    hasReadMoreFeature: PropTypes.bool,
    hedTag: PropTypes.string,
    id: PropTypes.string,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    index: PropTypes.number,
    internalLink: PropTypes.string,
    isEmbedSizeEnabled: PropTypes.bool,
    isFirstProduct: PropTypes.bool,
    isLazy: PropTypes.bool,
    isSponsored: PropTypes.bool,
    multipleOffers: PropTypes.array,
    offerRetailer: PropTypes.string,
    offerUrl: PropTypes.string,
    productBrand: PropTypes.string,
    productDescriptionLineLength: PropTypes.number,
    productId: PropTypes.string,
    productOfferVariation: PropTypes.string,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldHaveAlternateHedSpacing: PropTypes.bool,
    shouldHaveModerateWrapperPadding: PropTypes.bool,
    shouldShowBrandInProductName: PropTypes.bool,
    shouldShowBrandName: PropTypes.bool,
    showAffiliateDisclaimerOnFirstProduct: PropTypes.bool,
    showClampedProductDescription: PropTypes.bool,
    showLocalisedOffers: PropTypes.bool,
    showOfferUrl: PropTypes.bool,
    showPriceOnButton: PropTypes.bool,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        buttonAlign: PropTypes.oneOf(['left', 'right', 'center']),
        contentAlign: PropTypes.oneOf(['start', 'end', 'center', 'space-between']),
        contentPosition: PropTypes.oneOf([
            'start',
            'end',
            'center',
            'top',
            'bottom'
        ]),
        imageAlign: PropTypes.oneOf(['left', 'top', 'center']).isRequired,
        marginDek: PropTypes.oneOf(['top', 'bottom']),
        noBottomPadding: PropTypes.bool.isRequired,
        hasMultipleLines: PropTypes.bool,
        hasBottomMargin: PropTypes.bool,
        hasSidePadding: PropTypes.bool,
        hasTopMargin: PropTypes.bool,
        noRightLeftPadding: PropTypes.bool,
        shouldDekBelowOffer: PropTypes.bool
    })
};
ProductEmbed.displayName = 'ProductEmbed';
module.exports = ProductEmbed;
//# sourceMappingURL=ProductEmbed.js.map

/***/ }),

/***/ 37537:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { ProductEmbedHed, ProductEmbedBrandName, ProductEmbedHedWrapper } = __webpack_require__(53985);
/**
 * get the hed and dek
 *
 * @param {object} props - View props
 * @param {string} props.dangerousHed - Optional HTML text description of a title for card. Fallsback to dangerousDek if empty.
 * @param {string} props.dangerousDek - Optional HTML text description of a caption for card
 * @param {Array} props.embedSize - Optional property to know the size of product embeds
 * @param {string} props.productBrand - Optional HTML text brand name
 * @param {string} props.shouldShowBrandName - Optional flag to show brand name
 * @param {string} props.shouldDekBelowOffer - Optional boolean determining should Dek be below offer(s)
 * @param {string} [props.hasBottomMargin] - Component variation name
 * @param {string} [props.hedTag] - prop used for hed tag value of ProductEmbedHed component
 * @param {boolean} [props.hasProductEmbedHedTextCentreAlign] - optional flag to show text aligned center
 * @param {Function} [props.getClampedDescription] - function for clamped description
 *
 * @returns {ReactElement}
 */
const ProductEmbedHedandDek = ({ dangerousHed, dangerousDek, embedSize, hedTag, hasProductEmbedHedTextCentreAlign, productBrand, productId, shouldShowBrandName, shouldDekBelowOffer, hasBottomMargin, getClampedDescription }) => {
    const addIdIfProductExist = (productID) => {
        if (productID) {
            return productID;
        }
        return undefined;
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(ProductEmbedHedWrapper, { hasBottomMargin: hasBottomMargin, hasProductEmbedHedTextCentreAlign: hasProductEmbedHedTextCentreAlign },
            shouldShowBrandName && productBrand && (React.createElement(ProductEmbedBrandName, { dangerouslySetInnerHTML: { __html: productBrand } })),
            dangerousHed ? (React.createElement(ProductEmbedHed, { as: hedTag, id: addIdIfProductExist(productId), dangerouslySetInnerHTML: { __html: dangerousHed } })) : (React.createElement(ProductEmbedHed, { dangerouslySetInnerHTML: { __html: dangerousDek } })),
            !shouldDekBelowOffer &&
                dangerousDek &&
                dangerousHed &&
                embedSize !== 'feature-small' &&
                getClampedDescription(dangerousDek))));
};
ProductEmbedHedandDek.propTypes = {
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    embedSize: PropTypes.string,
    getClampedDescription: PropTypes.func,
    hasBottomMargin: PropTypes.bool,
    hasProductEmbedHedTextCentreAlign: PropTypes.bool,
    hedTag: PropTypes.string,
    productBrand: PropTypes.string,
    productId: PropTypes.string,
    shouldDekBelowOffer: PropTypes.bool,
    shouldShowBrandName: PropTypes.bool
};
module.exports = ProductEmbedHedandDek;
//# sourceMappingURL=ProductEmbedHedandDek.js.map

/***/ }),

/***/ 75871:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const VariedProductEmbed = __webpack_require__(19057);
module.exports = asConfiguredComponent(VariedProductEmbed, 'ProductEmbed');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 53985:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { calculateSpacing, getColorStyles, getTypographyStyles, minScreen, maxScreen, minMaxScreen, styledProperty } = __webpack_require__(26865);
const Clamp = __webpack_require__(48286);
const { BaseText, BaseWrap, BaseLink } = __webpack_require__(76955);
const { BREAKPOINTS } = __webpack_require__(96472);
const { BodyWrapper } = __webpack_require__(29912);
const { ProductOfferCtaBlock } = __webpack_require__(61366);
const { ButtonWrapper, ButtonLabel, ButtonIconWrapper } = __webpack_require__(18974);
const isEmbedMedium = (embedSize) => {
    return embedSize === 'feature-medium';
};
const isEmbedSmallOrLarge = (embedSize) => {
    return embedSize === 'feature-small' || embedSize === 'feature-large';
};
const isEmbedSmallOrMedium = (embedSize) => {
    return embedSize === 'feature-small' || embedSize === 'feature-medium';
};
const isEmbedMediumOrLarge = (embedSize) => {
    return embedSize === 'feature-medium' || embedSize === 'feature-large';
};
const isEmbedLarge = (embedSize) => {
    return embedSize === 'feature-large';
};
const applyStylesProductEmbedHed = (embedSize) => getTypographyStyles(isEmbedMedium(embedSize)
    ? 'typography.definitions.discovery.subhed-section-tertiary'
    : 'typography.definitions.consumptionEditorial.subhed-aux-primary');
const getContentStyles = ({ contentAlign, contentPosition }) => contentAlign === 'center' &&
    contentPosition === 'start' &&
    css `
    display: flex;
    flex-direction: column;
    justify-content: center;
  `;
const ProductEmbedCTA = styled.div.withConfig({
    displayName: 'ProductEmbedCTA'
}) `
  grid-column: 1/-1;
  grid-row: 2/3;
  margin-top: ${calculateSpacing(2)};

  .button--text-inside {
    padding: ${calculateSpacing(2)} 0.5rem;
  }
  ${({ useEmbedSize, embedSize }) => !useEmbedSize &&
    isEmbedLarge(embedSize) &&
    css `
      ${ButtonWrapper} {
        width: 100%;
        max-width: ${calculateSpacing(34)};

        &:hover,
        &:focus {
          width: 100%;
          max-width: ${calculateSpacing(34)};
        }
      }
      ${maxScreen(BREAKPOINTS.md)} {
        ${ButtonWrapper} {
          max-width: 100%;

          &:hover,
          &:focus {
            max-width: 100%;
          }
        }
      }
    `}

  ${({ hasGalleryProductEmbedPadding }) => hasGalleryProductEmbedPadding &&
    ` ${maxScreen(BREAKPOINTS.md)}{
    ${ProductOfferCtaBlock} > a {
    padding: ${calculateSpacing(1)} 0;}
    } 
  }`}
  ${({ hasProductEmbedPadding, hasGalleryProductEmbedPadding }) => (hasProductEmbedPadding || hasGalleryProductEmbedPadding) &&
    `${ProductOfferCtaBlock}{
    ${ButtonLabel}{
       padding:${calculateSpacing(1)} ${calculateSpacing(2)} 0;
       margin-bottom: ${calculateSpacing(1)};
    }
  }`}
  ${({ buttonAlign }) => buttonAlign === 'right' && `position: relative;`}

  ${minScreen(BREAKPOINTS.md)} {
    position: relative;
    grid-column: 2/3;
    max-width: ${calculateSpacing(46)};
  }

  & a {
    &:focus,
    &:link,
    &:visited,
    &:hover {
      text-decoration: none;
    }

    transition-timing-function: ease-in;
    transition-property: color, background, border;
  }
`;
const ProductEmbedImageLink = styled(BaseLink).withConfig({
    displayName: 'ProductEmbedImageLink'
}) `
  grid-area: product-image;
  grid-column: 1/2;
  grid-row: 1/2;
  ${({ hasGallerySlideBackground }) => !hasGallerySlideBackground && `padding-left: ${calculateSpacing(2)};`}

  &&&& {
    text-decoration: none;
  }
  ${minScreen(BREAKPOINTS.md)} {
    grid-row: 1/-1;
    padding-left: 0;
  }
`;
const ProductEmbedImage = styled.div.withConfig({
    displayName: 'ProductEmbedImage'
}) ``;
const ProductEmbedContent = styled.div.withConfig({
    displayName: 'ProductEmbedContent'
}) `
  grid-area: product-content;
  grid-column: 2/3;
  grid-row: 1/2;
  padding-right: ${calculateSpacing(2)};

  ${({ contentAlign }) => contentAlign === 'space-between' &&
    css `
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
    `}

  ${getContentStyles}

  ${minScreen(BREAKPOINTS.md)} {
    padding-right: 0;
  }
`;
const productEmbedHedStyles = css `
  ${getTypographyStyles('typography.definitions.consumptionEditorial.subhed-aux-secondary')}
  margin: 0;
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.subhed')};
`;
const ProductEmbedHed = styled(BaseText).withConfig({
    displayName: 'ProductEmbedHed'
}) `
  ${productEmbedHedStyles}
  ${BodyWrapper} & {
    ${productEmbedHedStyles}
  }
`;
ProductEmbedHed.defaultProps = {
    as: 'h2'
};
const ProductEmbedDek = styled(BaseText).withConfig({
    displayName: 'ProductEmbedDek'
}) `
  ${getTypographyStyles('typography.definitions.consumptionEditorial.description-embed')}
  margin-top: ${calculateSpacing(1)};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body')};
  ${minScreen(BREAKPOINTS.md)} {
    margin-top: ${calculateSpacing(2)};
  }
  ${({ showLess, showClampedProductDescription, productDescriptionLineLength }) => showClampedProductDescription &&
    `
    ${showLess
        ? `overflow: hidden;`
        : `
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: ${productDescriptionLineLength};
  `}
`}
`;
ProductEmbedDek.defaultProps = {
    as: 'div'
};
const productEmbedFeatureSmallStyles = css `
  && {
    grid-template-columns: repeat(2, 1fr);
    padding-right: 0;
    padding-left: 0;

    ${minScreen(BREAKPOINTS.md)} {
      grid-template-columns:
        minmax(${calculateSpacing(20)}, 30%)
        1fr;
    }
  }
`;
const productEmbedFeatureMediumStyles = css `
  && {
    margin-bottom: ${calculateSpacing(3)};

    .product-offer__buy-button {
      max-width: ${calculateSpacing(33)};
    }

    ${minScreen(BREAKPOINTS.md)} {
      padding-right: 0;
      padding-left: 0;
    }

    ${minMaxScreen(0, BREAKPOINTS.md)} {
      .product-offer__cta-block a {
        padding: ${calculateSpacing(2)} ${calculateSpacing(0.5)};
      }

      .product-offer__buy-button .button__label {
        padding: 0;
      }
    }
  }
`;
const productEmbedFeatureLargeStyles = css `
  && {
    display: flex;
    flex-direction: column;
    margin-bottom: ${calculateSpacing(3)};
    padding: 0;

    .product-offer__buy-button {
      max-width: ${calculateSpacing(33)};
    }
  }
`;
const productEmbedImageLeftStyles = css `
  &.callout--group-item {
    && {
      grid-column: 1/-1;

      ${minScreen(BREAKPOINTS.md)} {
        grid-column-gap: ${calculateSpacing(2)};
        grid-template-columns:
          minmax(${calculateSpacing(10)}, 40%)
          1fr;
        grid-row-gap: ${calculateSpacing(2)};
        margin-bottom: ${calculateSpacing(5)};
        padding: ${calculateSpacing(2)} 0 ${calculateSpacing(8)};

        ${ProductEmbedImageLink} {
          padding-left: ${calculateSpacing(2)};
        }

        ${ProductEmbedContent} {
          padding-right: ${calculateSpacing(2)};
        }
        ${ProductEmbedCTA} {
          position: absolute;
          grid-column: 1/-1;
          max-width: none;
        }
      }
    }
  }
`;
const productEmbedImageTopStyles = css `
  && {
    display: flex;
    flex-direction: column;
    margin-bottom: ${calculateSpacing(5)};
    padding-bottom: ${calculateSpacing(6)};
    ${({ hasGalleryProductEmbedPadding }) => hasGalleryProductEmbedPadding &&
    `
       &&&{
       margin-bottom: ${calculateSpacing(8)};
        ${maxScreen(BREAKPOINTS.md)}{
          margin-bottom: ${calculateSpacing(6)};
        }}
       `}
    ${ProductEmbedImageLink} {
      ${({ hasProductEmbedPadding }) => hasProductEmbedPadding
    ? ` padding: 0 ${calculateSpacing(1)};`
    : `padding: 0 ${calculateSpacing(2)};`}
      ${({ hasGalleryProductEmbedPadding }) => hasGalleryProductEmbedPadding && ` padding: 0;`}
    }

    ${ProductEmbedContent} {
      padding-left: ${calculateSpacing(2)};
    }

    ${ProductEmbedHed} {
      ${({ shouldHaveAlternateHedSpacing }) => shouldHaveAlternateHedSpacing
    ? `margin: ${calculateSpacing(0.6)} 0 ${calculateSpacing(2)};`
    : `margin: ${calculateSpacing(1)} 0 0;`}
      ${({ hasProductEmbedPadding }) => hasProductEmbedPadding && `margin:${calculateSpacing(1)} 0;`}
      ${({ hasGalleryProductEmbedPadding }) => hasGalleryProductEmbedPadding && `margin:${calculateSpacing(2)} 0;`}
    }
    ${({ marginDek, imageAlign }) => marginDek === 'bottom' && imageAlign === 'top' && `padding-bottom: 0;`}

    ${ProductEmbedDek} {
      margin: ${calculateSpacing(2)} 0 0;
      ${({ hasProductEmbedPadding, hasGalleryProductEmbedPadding }) => (hasProductEmbedPadding || hasGalleryProductEmbedPadding) &&
    `margin-bottom:${calculateSpacing(2)};`}
      ${({ marginDek }) => marginDek === 'bottom' &&
    `
        position: relative;
        margin: ${calculateSpacing(2)} 0 ${calculateSpacing(2)};
      `}
    }

    ${ProductEmbedCTA} {
      ${({ hasTopMargin }) => hasTopMargin ? `margin-top: 1rem;` : `margin: 0;`}
      ${({ marginDek }) => marginDek && `position: relative;`}
      ${({ noDek }) => noDek && `margin-top: ${calculateSpacing(2)};`}
    }

    ${minScreen(BREAKPOINTS.md)} {
      margin-bottom: ${calculateSpacing(7)};
      padding-bottom: ${calculateSpacing(5)};

      ${ProductEmbedImageLink} {
        padding: 0;
      }

      ${ProductEmbedContent} {
        padding: 0;
      }

      ${ProductEmbedHed} {
        ${({ shouldShowBrandName }) => shouldShowBrandName
    ? `margin: ${calculateSpacing(1)} 0 0;`
    : `margin: ${calculateSpacing(2)} 0 ${calculateSpacing(2)};`}
        ${({ hasProductEmbedPadding }) => hasProductEmbedPadding && `margin:${calculateSpacing(1)} 0;`}
        ${({ hasGalleryProductEmbedPadding }) => hasGalleryProductEmbedPadding && `margin:${calculateSpacing(2)} 0;`}
      }
      ${ProductEmbedDek} {
        margin: 0 0 ${calculateSpacing(2)};
      }
    }
  }

  &.callout--group-item {
    ${minScreen(BREAKPOINTS.md)} {
      height: calc(100% - ${calculateSpacing(7)});
    }
  }
`;
const productEmbedImageCenterStyles = css `
  .grid--item & {
    &.callout--group-item {
      &.callout--group-item-1 {
        max-width: 960px;
      }

      &.callout--group-item-1,
      &.callout--group-item-2 {
        ${ProductEmbedContent} {
          ${styledProperty('contentAlign', 'center', css `
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              text-align: center;
            `)}
        }
        ${minMaxScreen(BREAKPOINTS.sm, BREAKPOINTS.md)} {
          display: block;
          padding: 16px 1rem 4rem;
          max-width: 100%;

          ${ProductEmbedImageLink} {
            padding-left: 0;
          }
        }
      }
    }
  }
`;
const applyImageStyles = (embedSize) => {
    switch (embedSize) {
        case 'feature-small':
            return productEmbedFeatureSmallStyles;
        case 'feature-medium':
            return productEmbedFeatureMediumStyles;
        case 'feature-large':
            return productEmbedFeatureLargeStyles;
        default:
            return null;
    }
};
const ProductEmbedImageCreditWrapper = styled(BaseText).withConfig({
    displayName: 'ProductEmbedImageCreditWrapper'
}) `
  padding-top: ${calculateSpacing(1)};
  padding-bottom: ${calculateSpacing(2)};
`;
ProductEmbedImageCreditWrapper.defaultProps = {
    as: 'p',
    colorToken: 'colors.consumption.body.standard.body-deemphasized',
    typeIdentity: 'typography.definitions.globalEditorial.accreditation-core'
};
const productEmbedCommonPaddingStyles = (noBottomPadding, hasSidePadding, shouldHaveModerateWrapperPadding, hasGalleryProductEmbedPadding) => {
    return css `
    && {
      & {
        padding-bottom: 0;
      }
      ${noBottomPadding &&
        `text-align: center;
      `}
      ${minScreen(BREAKPOINTS.md)} {
        grid-column: 3 / span 4;
        text-align: left;
      }

      ${ProductEmbedContent} {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
      }

      ${ProductEmbedCTA} {
        position: relative;
        ${noBottomPadding &&
        `
          margin-right: ${calculateSpacing(-2)};
          margin-left: ${calculateSpacing(-2)};
          ${minScreen(BREAKPOINTS.md)} {
            margin-right: ${calculateSpacing(-4)};
            margin-left: ${calculateSpacing(-4)};
          }
        `}
        ${shouldHaveModerateWrapperPadding &&
        ` 
          ${minScreen(BREAKPOINTS.md)} {
            margin-right: ${calculateSpacing(-2)};
            margin-left: ${calculateSpacing(-2)};
          }
        `}
        ${hasGalleryProductEmbedPadding &&
        ` 
            ${minScreen(BREAKPOINTS.md)} {
              margin-right: 0;
              margin-left: 0;
            }
          `}
        width: unset;
        min-width: unset;
        max-width: unset;

        ${hasSidePadding &&
        `
            & a {
              &:active,
              &:focus {
                ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.interactive.base.brand-primary')};
                ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.interactive.base.brand-primary')};
              }
            }
        `}
      }
    }

    ${BodyWrapper} > .body__inner-container > && {
      ${minScreen(BREAKPOINTS.md)} {
        margin-right: auto;
        margin-left: auto;
        width: 50%;
      }
    }
  `;
};
const ProductEmbedWrapper = styled(BaseWrap).withConfig({
    displayName: 'ProductEmbedWrapper'
}) `
  display: grid;
  position: relative;
  grid-column-gap: ${calculateSpacing(2)};
  grid-column: 1/-1;
  grid-template-areas: 'product-image product-content';
  grid-template-columns:
    minmax(${calculateSpacing(10)}, 40%)
    1fr;
  grid-row-gap: ${calculateSpacing(2)};
  ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.consumption.body.standard.bg-card')};
  padding: ${calculateSpacing(2)} 0;
  ${({ hasProductEmbedPadding }) => hasProductEmbedPadding && `padding: ${calculateSpacing(1)} 0;`}
  ${({ hasGalleryProductEmbedPadding }) => hasGalleryProductEmbedPadding && `padding:0;`}
  ${minScreen(BREAKPOINTS.md)} {
    grid-column-gap: ${calculateSpacing(4)};
    grid-column: 1 / span 8;
    grid-template-areas: 'product-image product-content';
    grid-template-columns:
      minmax(auto, ${calculateSpacing(30)})
      1fr;
    grid-template-rows: auto;
    grid-row-gap: 0;
    margin-bottom: ${calculateSpacing(7)};
    ${({ shouldHaveModerateWrapperPadding }) => shouldHaveModerateWrapperPadding
    ? `padding: ${calculateSpacing(2)};`
    : `padding: ${calculateSpacing(5)} ${calculateSpacing(4)};`}
    ${({ hasGalleryProductEmbedPadding }) => hasGalleryProductEmbedPadding && `padding:0;`}
  }

  /* image align styles */
  ${styledProperty('imageAlign', 'top', productEmbedImageTopStyles)}

  ${styledProperty('imageAlign', 'center', productEmbedImageCenterStyles)}

  ${styledProperty('imageAlign', 'left', productEmbedImageLeftStyles)}

  /* no-image styles */
  ${styledProperty('noImage', true, css `
      display: flex;
    `)}
  ${({ useEmbedSize, embedSize }) => useEmbedSize &&
    embedSize &&
    css `
      ${ProductEmbedImageLink} {
        padding: 0;
        ${isEmbedMedium(embedSize) && `margin: auto 0;`}
        ${isEmbedSmallOrLarge(embedSize) &&
        `${minScreen(BREAKPOINTS.md)} {
            padding: 0;
         }`}
      }

      ${ProductEmbedContent} {
        padding-left: 0;
        ${isEmbedSmallOrMedium(embedSize) && `margin: auto 0;`}
        ${isEmbedMediumOrLarge(embedSize) && `padding-right: 0;`}
        ${isEmbedSmallOrLarge(embedSize) &&
        `${minScreen(BREAKPOINTS.md)} {
             padding-left: 0;
         }`}
      }

      ${ProductEmbedHed} {
        ${applyStylesProductEmbedHed(embedSize)}
        ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.black')};
        ${isEmbedSmallOrMedium(embedSize) &&
        `margin-top: 0;
             line-height: 1.125em;`}
        ${isEmbedSmallOrLarge(embedSize) &&
        `${minScreen(BREAKPOINTS.md)} {
              margin-top: 0;
            }`}
      }

      ${ProductEmbedDek} {
        ${isEmbedMediumOrLarge(embedSize) &&
        css `
          ${getTypographyStyles('typography.definitions.consumptionEditorial.body-core')} margin-top: ${calculateSpacing(1)};
          ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body')};
        `}
      }

      ${ProductEmbedCTA} {
        ${isEmbedMediumOrLarge(embedSize) &&
        `margin-top: ${calculateSpacing(2)};`}
        ${isEmbedLarge(embedSize) &&
        `${minScreen(BREAKPOINTS.md)} {
            position: relative;
            margin-top: ${calculateSpacing(2)};
           max-width: ${calculateSpacing(43)};
          }`}
      }

      /* image size styles */
      ${applyImageStyles(embedSize)}
    `}

    ${({ noRightLeftPadding }) => noRightLeftPadding &&
    css `
      && {
        padding: 0;

        &:not(:nth-child(1)) {
          margin-top: 1rem;
        }

        ${ProductEmbedImageLink} {
          padding: 0;
        }

        ${ProductEmbedContent} {
          padding: 0;
        }

        ${ProductEmbedImageCreditWrapper} {
          padding-bottom: 0;
        }
      }
    `}

    ${({ noBottomPadding, hasSidePadding, shouldHaveModerateWrapperPadding, hasGalleryProductEmbedPadding }) => (noBottomPadding || hasSidePadding) &&
    productEmbedCommonPaddingStyles(noBottomPadding, hasSidePadding, shouldHaveModerateWrapperPadding, hasGalleryProductEmbedPadding)}
`;
ProductEmbedWrapper.defaultProps = {
    bottomSpacing: 5
};
const ProductEmbedBrandName = styled.div.withConfig({
    displayName: 'ProductEmbedBrandName'
}) `
  margin-top: ${calculateSpacing(1)};
  text-align: left;
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-secondary')};
  text-transform: uppercase;
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.body-deemphasized')};
`;
const ProductEmbedHedWrapper = styled.div.withConfig({
    displayName: 'ProductEmbedHedWrapper'
}) `
  ${({ hasBottomMargin }) => hasBottomMargin
    ? `
      ${maxScreen(BREAKPOINTS.md)} {
          margin-bottom: ${calculateSpacing(2)};
      }`
    : ` `}
  ${({ hasProductEmbedHedTextCentreAlign }) => hasProductEmbedHedTextCentreAlign &&
    `
  text-align:center;
  &{
  margin-bottom: ${calculateSpacing(0)};
  }`}
`;
const ProductEmbedClampedDescription = styled(Clamp).withConfig({
    displayName: 'ProductEmbedClampedDescription'
}) `
  && {
    ${ButtonWrapper} {
      ${({ showLess }) => showLess
    ? `margin: -${calculateSpacing(1)} 0 ${calculateSpacing(2)} 0;`
    : `margin: ${calculateSpacing(1)} 0 ${calculateSpacing(2)} 0;`}
      padding: 0;
      min-width: auto;
      height: 24px;
    }
    ${ButtonLabel} {
      padding: 0;
      width: 100%;
      text-align: left;
      ${getTypographyStyles('typography.definitions.utility.button-bulletin')};
      ${({ theme }) => `  ${getColorStyles(theme, 'color', 'colors.interactive.base.black')};`};
    }
  }
  ${ButtonIconWrapper} {
    svg {
      width: 24px;
      height: 24px;
    }
    padding: 0;
  }
`;
module.exports = {
    ProductEmbedContent,
    ProductEmbedCTA,
    ProductEmbedDek,
    ProductEmbedHed,
    ProductEmbedImageLink,
    ProductEmbedWrapper,
    ProductEmbedImage,
    ProductEmbedImageCreditWrapper,
    ProductEmbedBrandName,
    ProductEmbedHedWrapper,
    ProductEmbedClampedDescription
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 20811:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    priceWithNoSellerPreamble: {
        id: 'ProductEmbed.PriceWithNoSellerPreamble',
        defaultMessage: 'Buy for {price}',
        description: 'ProductEmbed component price text without seller name preamble'
    },
    priceWithSellerPreamble: {
        id: 'ProductEmbed.PriceWithSellerPreamble',
        defaultMessage: '{price} at {sellerName}',
        description: 'ProductEmbed component price text with seller name preamble'
    },
    defaultTextPreamble: {
        id: 'ProductEmbed.DefaultTextPreamble',
        defaultMessage: 'Learn More',
        description: 'ProductEmbed component default text for price button'
    },
    defaultCtaText: {
        id: 'ProductEmbed.DefaultCtaText',
        defaultMessage: 'Buy It',
        description: 'ProductEmbed component default CTA text',
        isConfigurable: true
    },
    venueCtaText: {
        id: 'ProductEmbed.VenueCtaText',
        defaultMessage: 'Book Now',
        description: 'ProductEmbed component CTA text for venue content type'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 19057:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const ProductEmbed = __webpack_require__(87475);
ProductEmbed.ImageLeft = asVariation(ProductEmbed, 'ImageLeft', {
    imageAlign: 'left',
    noBottomPadding: false
});
ProductEmbed.ImageTop = asVariation(ProductEmbed, 'ImageTop', {
    imageAlign: 'top',
    noBottomPadding: false
});
ProductEmbed.ImageTopNoBottomPadding = asVariation(ProductEmbed, 'ImageTopNoBottomPadding', {
    imageAlign: 'top',
    noBottomPadding: true,
    hasBottomMargin: true
});
ProductEmbed.ImageTopDekwithMargin = asVariation(ProductEmbed, 'ImageTopDekwithMargin', {
    imageAlign: 'top',
    noBottomPadding: false,
    marginDek: 'bottom'
});
ProductEmbed.ImageTopNoBottomPaddingContentAlign = asVariation(ProductEmbed, 'ImageTopNoBottomPaddingContentAlign', {
    imageAlign: 'top',
    noBottomPadding: true,
    contentAlign: 'end',
    hasBottomMargin: true
});
ProductEmbed.ImageTopNoBottomPaddingContentAlignWithMultiLine = asVariation(ProductEmbed, 'ImageTopNoBottomPaddingContentAlignWithMultiLine', {
    imageAlign: 'top',
    noBottomPadding: true,
    contentAlign: 'end',
    hasMultipleLines: true,
    hasBottomMargin: true
});
ProductEmbed.ImageLeftButtonAlignRight = asVariation(ProductEmbed, 'ImageLeftButtonAlignRight', {
    imageAlign: 'left',
    noBottomPadding: false,
    buttonAlign: 'right'
});
ProductEmbed.ImageLeftWithButtonAndTextCentered = asVariation(ProductEmbed, 'ImageLeftWithButtonAndTextCentered', {
    imageAlign: 'center',
    noBottomPadding: false,
    contentAlign: 'center'
});
ProductEmbed.ImageLeftWithButtonAndTextVerticallyCentered = asVariation(ProductEmbed, 'ImageLeftWithButtonAndTextVerticallyCentered', {
    imageAlign: 'center',
    noBottomPadding: false,
    contentAlign: 'center',
    contentPosition: 'start'
});
ProductEmbed.ItemLeftCaptionAboveMultipleButtonsWithPrice = asVariation(ProductEmbed, 'ItemLeftCaptionAboveMultipleButtonsWithPrice', {
    imageAlign: 'top',
    noBottomPadding: false,
    hasSidePadding: true,
    hasTopMargin: true,
    shouldDekBelowOffer: true
}, {
    shouldShowBrandName: true,
    shouldShowBrandInProductName: false,
    showPriceOnButton: true,
    productOfferVariation: 'ButtonWithPriceSection'
});
ProductEmbed.ImageTopDekwithMarginNoRightLeftPadding = asVariation(ProductEmbed, 'ImageTopDekwithMarginNoRightLeftPadding', {
    imageAlign: 'top',
    noBottomPadding: false,
    marginDek: 'bottom',
    noRightLeftPadding: true
});
ProductEmbed.ImageTopButtonAlignmentForSideBySideProduct = asVariation(ProductEmbed, 'ImageTopButtonAlignmentForSideBySideProduct', {
    imageAlign: 'top',
    noBottomPadding: false,
    contentAlign: 'space-between'
});
module.exports = ProductEmbed;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 95472:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState, useEffect } = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const get = __webpack_require__(58156);
const translations = (__webpack_require__(8509)/* ["default"] */ .A);
const ProductSummaryGridItem = __webpack_require__(19163);
const { Link, ProductSummaryGridShowMore, ProductSummaryGridShowLess, ProductSummaryGridCardCounter, ProductSummaryGridShowMoreLessWrapper, ProductSummaryGridShowLessDivider, ProductSummaryGridTitle, ProductSummaryGridWrapper } = __webpack_require__(363);
/**
 * ProductSummaryGrid component
 *
 * @param {object} props - props for the component
 * @param {Array} props.chunks - Required array of items
 * @param {string} props.gridTitle - title text to display
 * @param {number} props.productsToDisplayOnLoad - number of products to display on page load
 * @param {boolean} [props.isFullyRoundedButtonEnabled] - Optional boolean to enable fully rounded buttons in the product grid (now from Redux)
 * @param {boolean} [props.showPriceOnButton] - Optional boolean to show product price inside the button
 * @param {boolean} [props.showLocalisedOffers] - Optional to show product localised offers
 * @param {boolean} [props.isUpcEnabled] - Optional prop for upc component
 * @param {object} [props.actionIdFlags] - Optional flags to enable actionId encoding on click
 * @param {boolean} [props.showDiscountPercentLabel] - Optional boolean to show discount percentage label
 * @param {Array} [props.children] - Optional children to be rendered inside the component
 * @returns {ReactElement} <div>
 */
// TO-DO : This type check is being done to support the Rich text coming as inputs, This would be refactored later.
const extractTextFromChildren = (node) => {
    if (typeof node === 'string')
        return node;
    if (typeof node === 'number' || typeof node === 'boolean')
        return String(node);
    if (Array.isArray(node))
        return node.map(extractTextFromChildren).join('');
    if (React.isValidElement(node))
        return extractTextFromChildren(node.props.children);
    return '';
};
const ProductSummaryGrid = (props) => {
    const { chunks, gridTitle, productsToDisplayOnLoad = 3, showPriceOnButton = true, showLocalisedOffers = true, isUpcEnabled, actionIdFlags = {}, shouldUseBlackButton, children = [], isFullyRoundedButtonEnabled, showDiscountPercentLabel = false, renditionConfig } = props;
    const extractProductSummaryData = (nestedChildren) => {
        if (!nestedChildren || nestedChildren.length < 3) {
            return null;
        }
        const dataItem = get(nestedChildren, '[0].props', {});
        const secondChildProps = get(nestedChildren, '[1].props', {});
        const thirdChildProps = get(nestedChildren, '[2].props.children.props.children.props', {});
        const rawDangerousHed = get(secondChildProps, 'children.props.children');
        const dangerousHed = extractTextFromChildren(rawDangerousHed);
        const fallbackProps = get(nestedChildren, '[2].props.children.props');
        const rawCTAname = extractTextFromChildren(thirdChildProps?.children) ||
            extractTextFromChildren(fallbackProps?.children);
        const ctaName = typeof rawCTAname === 'string' ? rawCTAname : '';
        const extract = (obj, path) => extractTextFromChildren(get(obj, path, ''));
        const productName = extract(dataItem, 'dangerousHed');
        const brand = extract(dataItem, 'productBrand');
        const href = extract(thirdChildProps, 'href');
        return {
            ...dataItem,
            id: dataItem.id || dataItem.productId,
            dangerousHed,
            ctaName,
            href,
            productName,
            brand,
            offers: get(dataItem, 'multipleOffers', [])
        };
    };
    const processChildrenData = React.useMemo(() => {
        // Early return if children is falsy
        if (!children) {
            return [];
        }
        // Ensure children is always treated as an array
        const childrenArray = Array.isArray(children) ? children : [children];
        return childrenArray
            .map((child) => {
            if (!child?.props) {
                return null;
            }
            return extractProductSummaryData(child.props.children);
        })
            .filter(Boolean);
    }, [children]);
    // Set isEnhancedPSG true if processChildrenData are provided
    const isEnhancedPSG = processChildrenData.length > 0;
    // Use processChildrenData if available, otherwise fall back to chunks
    const productData = processChildrenData.length > 0 ? processChildrenData : chunks || [];
    const chunksForProductSummaryGrid = productData
        .filter(Boolean)
        .filter((product) => {
        // Check for the exclusion tag
        const hasFunctionalTags = Array.isArray(product.functionalTags) &&
            product.functionalTags.length > 0;
        if (hasFunctionalTags) {
            return !product.functionalTags.some((tag) => tag && tag.name === '_no-product-summary-grid');
        }
        return true;
    });
    const { formatMessage } = useIntl();
    const initialVisibleItems = chunksForProductSummaryGrid.length > productsToDisplayOnLoad
        ? productsToDisplayOnLoad
        : productData.length;
    const MAX_ITEMS = chunksForProductSummaryGrid.length >= 10
        ? 10
        : chunksForProductSummaryGrid.length;
    const [showMore, setShowMore] = useState(true);
    const [showLess, setShowLess] = useState(false);
    const [numberOfVisibleItems, setNumberOfVisibleItems] = useState(initialVisibleItems);
    // When a user presses Show more, it will show the next 10 slide cards in the grid and update the card counter
    const newChunkSize = () => {
        const updatedChunkSet = MAX_ITEMS + numberOfVisibleItems;
        if (updatedChunkSet >= chunksForProductSummaryGrid.length) {
            setNumberOfVisibleItems(chunksForProductSummaryGrid.length);
            setShowMore(false);
        }
        else {
            setNumberOfVisibleItems(updatedChunkSet);
        }
        setShowLess(true);
    };
    const newReducedChunkSize = () => {
        setNumberOfVisibleItems(initialVisibleItems);
        setShowLess(false);
        setShowMore(true);
    };
    // Set showMore and showLess to false if productsToDisplayOnLoad is equal to the total number of products
    useEffect(() => {
        if (productsToDisplayOnLoad >= chunksForProductSummaryGrid.length) {
            setShowMore(false);
            setShowLess(false);
        }
    }, [chunksForProductSummaryGrid.length, productsToDisplayOnLoad]);
    return (chunksForProductSummaryGrid.length > 0 && (React.createElement(ProductSummaryGridWrapper, { isEnhancedPSG: isEnhancedPSG },
        React.createElement(ProductSummaryGridTitle, { isEnhancedPSG: isEnhancedPSG }, gridTitle ||
            formatMessage(translations.defaultProductSummaryGridTitle)),
        chunksForProductSummaryGrid
            .slice(0, numberOfVisibleItems)
            .map((item, itemIndex) => {
            return (React.createElement(ProductSummaryGridItem, { isEnhancedPSG: isEnhancedPSG, key: item.id || itemIndex, ...item, itemIndex: itemIndex, showPriceOnButton: showPriceOnButton, showLocalisedOffers: showLocalisedOffers, isUpcEnabled: isUpcEnabled || item.isUpcEnabled, actionIdFlags: actionIdFlags, shouldUseBlackButton: shouldUseBlackButton, isFullyRoundedButtonEnabled: isFullyRoundedButtonEnabled, showDiscountPercentLabel: showDiscountPercentLabel, renditionConfig: renditionConfig }));
        }),
        React.createElement(ProductSummaryGridShowMoreLessWrapper, { isEnhancedPSG: isEnhancedPSG },
            chunksForProductSummaryGrid.length > 3 && showMore && (React.createElement(Link, { onClick: () => {
                    newChunkSize();
                    if ( true && window.dataLayer) {
                        window.dataLayer.push({
                            event: 'product-grid-showmore',
                            'Product-Grid': 'showmore'
                        });
                    }
                } },
                React.createElement(ProductSummaryGridShowMore, { showMore: showMore, showLess: showLess, isEnhancedPSG: isEnhancedPSG }, formatMessage(translations.showMore)))),
            numberOfVisibleItems > productsToDisplayOnLoad && showLess && (React.createElement(Link, { onClick: () => {
                    newReducedChunkSize();
                } },
                React.createElement(ProductSummaryGridShowLessDivider, { showMore: showMore }),
                React.createElement(ProductSummaryGridShowLess, null, formatMessage(translations.showLess)))),
            React.createElement(ProductSummaryGridCardCounter, { isEnhancedPSG: isEnhancedPSG },
                numberOfVisibleItems,
                " / ",
                chunksForProductSummaryGrid.length)))));
};
ProductSummaryGrid.propTypes = {
    actionIdFlags: PropTypes.object,
    children: PropTypes.array,
    chunks: PropTypes.array.isRequired,
    gridTitle: PropTypes.string,
    isEnhancedPSG: PropTypes.bool,
    isFullyRoundedButtonEnabled: PropTypes.bool,
    isUpcEnabled: PropTypes.bool,
    layout: PropTypes.string,
    productsToDisplayOnLoad: PropTypes.number,
    renditionConfig: PropTypes.object,
    shouldUseBlackButton: PropTypes.bool,
    showDiscountPercentLabel: PropTypes.bool,
    showLocalisedOffers: PropTypes.bool,
    showPriceOnButton: PropTypes.bool
};
ProductSummaryGrid.displayName = 'ProductSummaryGrid';
ProductSummaryGrid.extractTextFromChildren = extractTextFromChildren;
module.exports = ProductSummaryGrid;
//# sourceMappingURL=ProductSummaryGrid.js.map

/***/ }),

/***/ 19163:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const debounce = __webpack_require__(38221);
const classnames = __webpack_require__(32485);
const short = __webpack_require__(60943);
const ResponsiveAsset = __webpack_require__(73275);
const ExternalLink = __webpack_require__(39832);
const { ProductEmbedImageLink } = __webpack_require__(53985);
const ProductSummaryGridOffer = __webpack_require__(99172);
const translations = (__webpack_require__(8509)/* ["default"] */ .A);
const { formatGtmData, productImpressionTracking } = __webpack_require__(60162);
const { ProductSummaryWrapper, ProductSummaryImage, ProductSummaryAssetWrapper, ProductSummaryResponsiveAsset, ProductSummaryButton, ProductSummaryHed, ProductSummaryHedText, ProductSummaryDekReadMore, ProductSummaryBrandAndName } = __webpack_require__(363);
const { handleLinkClick } = __webpack_require__(43428);
const { extractTrackingParameters } = __webpack_require__(25203);
const ProductSummaryTitle = ({ brandAndName, ctaHref, ctaText, dangerousHed, isClickable, isEnhancedPSG, offers, productId, itemIndex, href }) => {
    if (!dangerousHed && !brandAndName) {
        return null;
    }
    const productTitleEllipsisLineBreak = typeof dangerousHed === 'string' && dangerousHed.trim() ? 2 : 3;
    const isDangerousHedString = typeof dangerousHed === 'string' && !!dangerousHed.trim();
    const isBrandAndNameString = typeof brandAndName === 'string' && !!brandAndName.trim();
    const headingElement = (React.createElement(ProductSummaryHed, { isEnhancedPSG: isEnhancedPSG },
        isDangerousHedString && (React.createElement(ProductSummaryHedText, { dangerouslySetInnerHTML: { __html: dangerousHed }, isEnhancedPSG: isEnhancedPSG })),
        isBrandAndNameString && (React.createElement(ProductSummaryBrandAndName, { dangerouslySetInnerHTML: { __html: brandAndName }, isEnhancedPSG: isEnhancedPSG, elipsisValue: productTitleEllipsisLineBreak })),
        offers?.length > 0 && (React.createElement(ProductSummaryDekReadMore, { ...(isEnhancedPSG && {
                colorToken: 'colors.consumption.body.standard.link'
            }), isEnhancedPSG: isEnhancedPSG, href: href || `#${productId}`, dangerouslySetInnerHTML: { __html: ctaText }, onClick: () => {
                if ( true && window.dataLayer) {
                    const payload = {
                        'Product-Grid': 'recc-readmore',
                        'Product-Name': `${brandAndName}`,
                        'Product-Grid-Click-Position': `${itemIndex}`
                    };
                    window.dataLayer.push({
                        event: 'product-grid-recc-readmore',
                        ...payload
                    });
                }
            } }))));
    if (!isClickable || !ctaHref) {
        return headingElement;
    }
    return React.createElement(ExternalLink, { href: ctaHref }, headingElement);
};
ProductSummaryTitle.propTypes = {
    brandAndName: PropTypes.string,
    ctaHref: PropTypes.string,
    ctaText: PropTypes.string,
    dangerousHed: PropTypes.string,
    href: PropTypes.string,
    isClickable: PropTypes.bool,
    isEnhancedPSG: PropTypes.bool,
    itemIndex: PropTypes.number,
    offers: PropTypes.array,
    productId: PropTypes.string
};
/**
 * ProductSummaryGridItem component
 *
 * @param {object} props - props for the component
 * @param {string} [props.brand] - Optional top-level brand name
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} props.contentType - Required text description of the type of content to be rendered
 * @param {string} [props.ctaHref] - Optional text url to link to CTA button
 * @param {string} [props.ctaText] - Optional text displaying CTA button text
 * @param {string} [props.dangerousHed] - Optional HTML text description of a title for card
 * @param {ResponsiveAsset.propTypes.media} props.image - Required image that contains altText, attributes, and source urls
 * @param {ResponsiveAsset.propTypes.media} props.defaultImageForProductSummaryGrid - Required default image that contains altText, attributes, and source urls
 * @param {Bool} [props.isHedClickable] - Optional flag to show a clickable hed
 * @param {Bool} [props.hasPriceSection] - Optional flag to show a clickable hed
 * @param {string} [props.name] - display product name
 * @param {Array} [props.offers] - Optional array of offers to display on a product slide
 * @param {boolean} [props.showLocalisedOffers] - Optional to show product localised offers
 * @param {boolean} [props.showPriceOnButton] - Optional boolean to show product price inside the button
 * @param {boolean} props.showOfferUrl - Determines whether offerUrl should be displayed or not based on flag
 * @param {string} [props.price] - Optional text used to display original price with a strikethrough
 * @param {object} [props.actionIdFlags] - Optional flags to enable actionId encoding on click
 * @returns {ReactElement} <div>
 */
const ProductSummaryGridItem = ({ brand, buttonVariation, btnStyle, className, contentType, ctaHref, ctaName, dangerousHed, dropShipSellers, image, itemIndex, isHedClickable, isEnhancedPSG, name, offers, id, showLocalisedOffers, showPriceOnButton, showOfferUrl, defaultImageForProductSummaryGrid, isUpcEnabled, actionIdFlags, shouldUseBlackButton, href, isFullyRoundedButtonEnabled, showDiscountPercentLabel = false, productName, renditionConfig }) => {
    const { formatMessage } = useIntl();
    const brandAndName = isEnhancedPSG
        ? [brand, productName].filter(Boolean).join(' ')
        : [brand, name].filter(Boolean).join(' ');
    const defaultCtaText = isEnhancedPSG
        ? formatMessage(translations.jumpToReview)
        : formatMessage(translations.readMore);
    const isJumpToReview = typeof ctaName === 'string' &&
        ctaName.trim().toLowerCase() === 'jump to review'.toLowerCase();
    const isCTAavailable = typeof ctaName === 'string' && !!ctaName.trim();
    let ctaText = isCTAavailable ? ctaName : defaultCtaText;
    if (isJumpToReview) {
        ctaText = defaultCtaText;
    }
    const productId = contentType === 'product' ? `${id}` : '';
    const dataAttrs = contentType === 'product' ? { 'data-buy-button': true } : {};
    const imageData = image?.length ? image[0] : image;
    const imageForItem = imageData
        ? {
            ...imageData,
            psgId: short.generate('hex', 10)
        }
        : defaultImageForProductSummaryGrid;
    const isClip = imageForItem?.contentType === 'clip';
    // eslint-disable-next-line consistent-return
    const getUrl = (showOfferUri) => {
        if (offers && offers.length > 0) {
            return showOfferUri ? offers[0].offerUrl : offers[0].purchaseUri;
        }
    };
    const linkhref = getUrl(showOfferUrl);
    const hasClipInsideUPC = isClip && isUpcEnabled;
    const productData = {
        dangerousHed,
        brand: { name: brand },
        id: productId || id,
        index: itemIndex,
        contentType,
        offers,
        component: 'product_summary_grid'
    };
    React.useEffect(() => {
        window.addEventListener('load', () => productImpressionTracking('ProductEmbed', document.getElementsByClassName('product-embed')));
        window.addEventListener('scroll', debounce(() => {
            productImpressionTracking('ProductEmbed', document.getElementsByClassName('product-embed'));
        }, 1000));
    }, []);
    const gtmClickHandler = (position, event, actionId) => {
        formatGtmData({
            window,
            product: { ...productData, component: 'product_summary_grid' },
            index: position,
            actionId,
            layout: 'ProductEmbed',
            event,
            layoutTitle: dangerousHed
        });
    };
    let isExternalProduct = true;
    if (dropShipSellers?.length > 0) {
        isExternalProduct = dropShipSellers?.some((seller) => !getUrl(showOfferUrl)?.toLowerCase().includes(seller));
    }
    const captionProps = {
        brand,
        brandAndName,
        buttonVariation,
        btnStyle,
        className,
        contentType,
        ctaHref,
        ctaText,
        dataAttrs,
        dropShipSellers,
        itemIndex,
        name,
        offers,
        productId,
        showLocalisedOffers,
        showPriceOnButton,
        showOfferUrl,
        isUpcEnabled,
        shouldUseBlackButton,
        isFullyRoundedButtonEnabled,
        showDiscountPercentLabel
    };
    const isActionIdEnabledForComponent = actionIdFlags?.enableActionIdForProductSummaryGrid;
    const enableActionIdMapping = linkhref?.includes('cna.st') && isActionIdEnabledForComponent;
    const handleClick = (event, position) => {
        const hrefValue = event?.currentTarget?.getAttribute('href');
        const queryParams = extractTrackingParameters();
        if (enableActionIdMapping && hrefValue) {
            event.preventDefault();
            handleLinkClick({
                event,
                gtmTrackOnClick: gtmClickHandler,
                linkProps: hrefValue,
                position,
                type: 'GallerySlideImage',
                component: 'product_summary_grid',
                queryParams
            });
        }
        else {
            gtmClickHandler(position, event);
        }
    };
    const getProductOrImage = (isEnhancedPSG) => {
        if (contentType === 'product' && offers && offers.length > 0) {
            return (React.createElement(ProductEmbedImageLink, { as: ExternalLink, href: linkhref, target: isExternalProduct ? '_blank' : '_self', rel: "sponsored noopener", onClick: (event, position) => handleClick(event, position), attributes: {
                    tabIndex: -1,
                    'aria-hidden': true,
                    'data-offer-retailer': offers[0].sellerName,
                    'data-offer-url': offers[0].offerUrl
                }, component: "product_summary_grid" },
                React.createElement(ProductSummaryResponsiveAsset, { isEnhancedPSG: isEnhancedPSG, ...imageForItem, hasNativeImgLazyLoading: !isClip, shouldAutoPlay: !isClip, shouldYieldControlOfVideoPlayPause: isClip })));
        }
        return (React.createElement(ProductSummaryResponsiveAsset, { isEnhancedPSG: isEnhancedPSG, ...imageForItem, hasNativeImgLazyLoading: !isClip, shouldAutoPlay: !isClip, shouldYieldControlOfVideoPlayPause: isClip }));
    };
    return (React.createElement(ProductSummaryWrapper, { isEnhancedPSG: isEnhancedPSG, className: classnames('product-embed', className), "data-event-boundary": "click", imageForItem: imageForItem, "data-testid": "ProductSummaryWrapper", "data-item": JSON.stringify(productData), onClick: () => {
            if ( true && window.dataLayer) {
                const payload = {
                    'Product-Grid': `info - ${dangerousHed}`,
                    'Product-Name': `${brandAndName}`,
                    'Product-Grid-Click-Position': `${itemIndex}`
                };
                window.dataLayer.push({
                    event: 'product-grid-info-title',
                    ...payload
                });
            }
        } },
        React.createElement(ProductSummaryImage, { isEnhancedPSG: isEnhancedPSG, hasClipInsideUPC: hasClipInsideUPC },
            imageForItem && (React.createElement(ProductSummaryAssetWrapper, { contentType: contentType, isUpcEnabled: isUpcEnabled, isEnhancedPSG: isEnhancedPSG, renditionConfig: renditionConfig, hasClipInsideUPC: hasClipInsideUPC }, getProductOrImage(isEnhancedPSG))),
            React.createElement(ProductSummaryTitle, { isEnhancedPSG: isEnhancedPSG, brandAndName: brandAndName, ctaHref: ctaHref, ctaText: ctaText, dangerousHed: dangerousHed, isClickable: isHedClickable, offers: offers, productId: productId, itemIndex: itemIndex, isUpcEnabled: isUpcEnabled, href: href }),
            React.createElement(ProductSummaryButton, { isEnhancedPSG: isEnhancedPSG, productId: productId, isUpcEnabled: isUpcEnabled, actionIdFlags: actionIdFlags, ...captionProps, ctaHref: ctaHref || `#${id}`, as: ProductSummaryGridOffer, gtmClickHandler: gtmClickHandler }))));
};
ProductSummaryGridItem.propTypes = {
    actionIdFlags: PropTypes.object,
    brand: PropTypes.string,
    btnStyle: PropTypes.oneOf(['filled', 'outlined', 'text']),
    buttonVariation: PropTypes.string,
    className: PropTypes.string,
    contentType: PropTypes.string.isRequired,
    cta: PropTypes.shape({
        article: PropTypes.string,
        product: PropTypes.string,
        recipe: PropTypes.string,
        review: PropTypes.string
    }),
    ctaHref: PropTypes.string,
    ctaName: PropTypes.string,
    ctaText: PropTypes.string,
    dangerousHed: PropTypes.string,
    defaultImageForProductSummaryGrid: PropTypes.shape(ResponsiveAsset.propTypes),
    defaultProductSummaryImage: PropTypes.shape(ResponsiveAsset.propTypes),
    dropShipSellers: PropTypes.array,
    href: PropTypes.string,
    id: PropTypes.string,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    isEnhancedPSG: PropTypes.bool,
    isFullyRoundedButtonEnabled: PropTypes.bool,
    isHedClickable: PropTypes.bool,
    isUpcEnabled: PropTypes.bool,
    itemIndex: PropTypes.number,
    name: PropTypes.string,
    offers: PropTypes.array,
    price: PropTypes.string,
    productName: PropTypes.string,
    renditionConfig: PropTypes.object,
    shouldUseBlackButton: PropTypes.bool,
    showDiscountPercentLabel: PropTypes.bool,
    showLocalisedOffers: PropTypes.bool,
    showOfferUrl: PropTypes.bool,
    showPriceOnButton: PropTypes.bool
};
ProductSummaryGridItem.displayName = 'ProductSummaryGridItem';
module.exports = ProductSummaryGridItem;
//# sourceMappingURL=ProductSummaryGridItem.js.map

/***/ }),

/***/ 99172:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const isEmpty = __webpack_require__(62193);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const ProductOfferList = __webpack_require__(18059);
const Button = __webpack_require__(73730);
const { ProductSummaryGridOfferWrapper } = __webpack_require__(363);
/**
 * ProductSummaryGridOffer component
 *
 * @param {string} [ctaText] - Optional text displaying CTA button text
 * @param {string} [ctaHref] - Optional text url to link to CTA button
 * @param {string} [dataAttrs] - Optional data attributes for button
 * @param {boolean} [props.@param {boolean} [props.showLocalisedOffers] - Optional to show product localised offers] - Optional to show product localised offers
 * @param {boolean} [props.showPriceOnButton] - Optional boolean to show product price inside the button
 * @param {boolean} [props.isUpcEnabled] - Optional boolean for upc component
 * @param {object} [props.actionIdFlags] - Optional flags to enable actionId encoding on click
 * @returns {ReactElement} <div>
 */
const ProductSummaryGridOffer = ({ buttonVariation, btnStyle, ctaHref, ctaText, dataAttrs, dropShipSellers, isEnhancedPSG, offers, showLocalisedOffers, showPriceOnButton, productId, showOfferUrl, brandAndName, itemIndex, isUpcEnabled, gtmClickHandler, actionIdFlags = {}, shouldUseBlackButton, isFullyRoundedButtonEnabled, showDiscountPercentLabel = false }) => {
    const MAX_BUTTON_COUNT = 1;
    const isActionIdEnabledForComponent = actionIdFlags?.enableActionIdForProductSummaryGrid;
    const onClickHandlerForReadMoreButton = () => {
        if ( true && window.dataLayer) {
            const payload = {
                'Product-Grid': 'info - readmorebutton',
                'Product-Name': `${brandAndName || ctaText}`,
                'Product-Grid-Click-Position': `${itemIndex}`
            };
            window.dataLayer.push({
                event: 'product-grid-info-readmorebutton',
                ...payload
            });
        }
    };
    const onClickHandlerForBuyButton = ({ position, event, actionId }) => {
        gtmClickHandler(position, event, actionId);
        if ( true && window.dataLayer) {
            const payload = {
                'Product-Grid': 'recc-buybutton',
                'Product-Name': `${brandAndName || ctaText}`,
                'Product-Grid-Click-Position': `${itemIndex}`
            };
            window.dataLayer.push({
                event: 'product-grid-recc-buybutton',
                ...payload
            });
        }
    };
    return (React.createElement(ProductSummaryGridOfferWrapper, { isUpcEnabled: isUpcEnabled, isEnhancedPSG: isEnhancedPSG, isFullyRoundedButtonEnabled: isFullyRoundedButtonEnabled, hasNoOffers: isEmpty(offers) },
        React.createElement(ProductOfferList, { buttonVariation: buttonVariation, btnStyle: btnStyle, dataAttrs: dataAttrs, defaultCTAText: ctaText, offers: offers, productId: productId, showSellerNameBelowPrice: isEnhancedPSG || isUpcEnabled, showCount: MAX_BUTTON_COUNT, showPriceOnButton: showPriceOnButton, showOfferUrl: showOfferUrl, dropShipSellers: dropShipSellers, showLocalisedOffers: showLocalisedOffers, onClickHandler: onClickHandlerForBuyButton, isProductSummaryGridOffer: isUpcEnabled, isActionIdEnabledForComponent: isActionIdEnabledForComponent, shouldUseBlackButton: shouldUseBlackButton, showDiscountPercentLabel: showDiscountPercentLabel }),
        isEmpty(offers) ? (React.createElement(Button.Primary, { buttonVariation: buttonVariation, btnStyle: "outlined", href: ctaHref, inputKind: "link", label: ctaText, onClickHandler: onClickHandlerForReadMoreButton })) : null));
};
ProductSummaryGridOffer.propTypes = {
    actionIdFlags: PropTypes.object,
    brandAndName: PropTypes.string,
    btnStyle: PropTypes.oneOf(['filled', 'outlined', 'text']),
    buttonVariation: PropTypes.string,
    ctaHref: PropTypes.string,
    ctaText: PropTypes.string,
    dataAttrs: PropTypes.object,
    dropShipSellers: PropTypes.array,
    gtmClickHandler: PropTypes.func,
    isEnhancedPSG: PropTypes.bool,
    isFullyRoundedButtonEnabled: PropTypes.bool,
    isUpcEnabled: PropTypes.bool,
    itemIndex: PropTypes.number,
    offers: PropTypes.array,
    productId: PropTypes.string,
    shouldUseBlackButton: PropTypes.bool,
    showDiscountPercentLabel: PropTypes.bool,
    showLocalisedOffers: PropTypes.bool,
    showOfferUrl: PropTypes.bool,
    showPriceOnButton: PropTypes.bool
};
ProductSummaryGridOffer.displayName = 'ProductSummaryGridOffer';
module.exports = ProductSummaryGridOffer;
//# sourceMappingURL=ProductSummaryGridOffer.js.map

/***/ }),

/***/ 25646:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { connect: connectToStore } = __webpack_require__(67851);
const { asConfiguredComponent } = __webpack_require__(12892);
const ProductSummaryGrid = __webpack_require__(95472);
const mapStateToProps = (state) => ({
    isFullyRoundedButtonEnabled: state.commercePlatform?.psgIsFullyRoundedButtonEnabled,
    showDiscountPercentLabel: state.commercePlatform?.showDiscountPercentLabel,
    renditionConfig: state.commercePlatform?.psgRenditionConfig || {}
});
const ConfiguredProductSummaryGrid = asConfiguredComponent(ProductSummaryGrid, 'ProductSummaryGrid');
module.exports = connectToStore(mapStateToProps)(ConfiguredProductSummaryGrid);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 363:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { BaseText } = __webpack_require__(76955);
const Button = __webpack_require__(73730);
const { BaseLink } = __webpack_require__(60881);
const { calculateSpacing, maxScreen, minMaxScreen, getColorStyles, getTypographyStyles, getColorToken, getLinkStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const ResponsiveAsset = __webpack_require__(73275);
const { getCSSHeightRules } = __webpack_require__(65226);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const { ResponsiveClipVideoContainer, ResponsiveClipWrapper } = __webpack_require__(91783);
const { ProductOfferCtaBlock } = __webpack_require__(61366);
const { ProductOfferListWrapper } = __webpack_require__(94037);
const { ButtonLabel, ButtonWrapper } = __webpack_require__(18974);
const { ProductOfferWrapper } = __webpack_require__(61366);
const { CNEVideoEmbedWrapper } = __webpack_require__(18117);
const ProductSummaryGridTitle = styled(BaseText).withConfig({
    displayName: 'ProductSummaryGridTitle'
}) `
  ${({ theme, isEnhancedPSG }) => {
    const padding = isEnhancedPSG
        ? `${calculateSpacing(1.5, 'px')} 0 ${calculateSpacing(1.5, 'px')}`
        : `${calculateSpacing(2)} 0 ${calculateSpacing(2)}`;
    const borderColor = isEnhancedPSG
        ? getColorToken(theme, 'colors.discovery.body.white.heading')
        : getColorToken(theme, 'colors.consumption.body.standard.divider');
    const textColor = isEnhancedPSG
        ? getColorToken(theme, 'colors.discovery.body.white.heading')
        : undefined;
    return `
      border-top: 1px solid ${borderColor};
      border-bottom: 1px solid ${borderColor};
      ${textColor ? `color: ${textColor};` : ''}
      padding: ${padding};
    `;
}}
`;
ProductSummaryGridTitle.defaultProps = {
    as: 'header',
    typeIdentity: 'typography.definitions.consumptionEditorial.subhed-aux-secondary'
};
const ProductSummaryCtaBlock = styled.div.withConfig({
    displayName: 'ProductSummaryCtaBlock'
}) ``;
const ProductSummaryCaptionButton = styled(Button.Utility).withConfig({
    displayName: 'ProductSummaryCaptionButton'
}) `
  margin-top: ${calculateSpacing(4)};
`;
const ProductSummaryHedText = styled.span.withConfig({
    displayName: 'ProductSummaryHedText'
}) `
  display: block;
  margin-bottom: ${calculateSpacing(1)};

  ${({ theme, isEnhancedPSG }) => isEnhancedPSG
    ? `
        ${getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.subhed-aux-secondary')}
        color: ${getColorToken(theme, 'colors.consumption.body.standard.body')};
         /* stylelint-disable value-no-vendor-prefix */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        /* stylelint-enable value-no-vendor-prefix */
      `
    : ''}
`;
const ProductSummaryHed = styled(BaseText).withConfig({
    displayName: 'ProductSummaryHed'
}) `
  grid-area: content;
  ${({ isEnhancedPSG }) => isEnhancedPSG &&
    css `
      @media (min-width: calc(${BREAKPOINTS.md})) {
        min-width: 145px;
      }
    `}
`;
ProductSummaryHed.defaultProps = {
    as: 'div',
    colorToken: 'colors.consumption.body.standard.subhed',
    typeIdentity: 'typography.definitions.consumptionEditorial.subhed-aux-secondary'
};
const ProductSummaryBrandAndName = styled.div.withConfig({
    displayName: 'ProductSummaryBrandAndName'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.description-embed')};
  margin-bottom: ${calculateSpacing(1.5)};

  ${({ isEnhancedPSG, elipsisValue }) => isEnhancedPSG &&
    css `
      /* stylelint-disable value-no-vendor-prefix */
      display: -webkit-box;
      -webkit-line-clamp: ${elipsisValue};
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
      /* stylelint-enable value-no-vendor-prefix */
    `}
`;
const ProductSummaryDekReadMore = styled(BaseLink).withConfig({
    displayName: 'ProductSummaryDekReadMore'
}) `
  ${({ theme, isEnhancedPSG }) => {
    const typographyKey = isEnhancedPSG
        ? 'typography.definitions.utility.button-core'
        : 'typography.definitions.utility.button-utility';
    return getTypographyStyles(theme, typographyKey);
}}

  display: inline-block;
  font-style: normal;
`;
ProductSummaryDekReadMore.defaultProps = {
    as: 'a',
    colorStaticLinkToken: 'colors.interactive.base.black',
    colorToken: null,
    linkStyle: 'global'
};
const ProductSummaryGridShowMoreLessWrapper = styled.div.withConfig({
    displayName: 'ProductSummaryGridShowMoreLessWrapper'
}) `
  display: grid;
  grid-template-columns: auto auto repeat(5, 1fr);
  align-items: center;
  ${({ isEnhancedPSG }) => isEnhancedPSG
    ? `
        margin-top: ${calculateSpacing(1, 'px')};
        margin-bottom: ${calculateSpacing(1, 'px')};
      `
    : `margin-top: ${calculateSpacing(2)};`}
`;
const ProductSummaryGridShowMore = styled(BaseLink).withConfig({
    displayName: 'ProductSummaryGridShowMore'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.utility.button-core')}
`;
ProductSummaryGridShowMore.defaultProps = {
    as: 'a',
    colorStaticLinkToken: 'colors.interactive.base.black',
    colorToken: null,
    linkStyle: 'global'
};
const ProductSummaryGridShowLess = styled(BaseLink).withConfig({
    displayName: 'ProductSummaryGridShowLess'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.utility.button-core')}
`;
ProductSummaryGridShowLess.defaultProps = {
    as: 'a',
    colorStaticLinkToken: 'colors.interactive.base.black',
    colorToken: null,
    linkStyle: 'global'
};
const ProductSummaryGridShowLessDivider = styled.div.withConfig({
    displayName: 'ProductSummaryGridShowLessDivider'
}) `
  ${({ showMore }) => showMore &&
    css `
      display: inline-block;
      margin: 0 ${calculateSpacing(1.5)};
      border-left: 1px solid
        ${getColorToken('colors.consumption.body.standard.divider')};
      height: 10px;
      content: '';

      ${maxScreen(BREAKPOINTS.md)} {
        margin-right: ${calculateSpacing(1.5)};
      }
    `}
`;
const ProductSummaryGridCardCounter = styled.div.withConfig({
    displayName: 'ProductSummaryGridCardCounter'
}) `
  grid-column: 8;
  justify-self: end;
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.numerical-small')};
  margin-top: ${calculateSpacing(0.4)};
  color: ${getColorToken('colors.consumption.body.standard.body-deemphasized')};
`;
const Link = styled.a.withConfig({ displayName: 'Link' }) `
  ${({ theme }) => getLinkStyles(theme, 'colors.consumption.body.standard.link', 'colors.consumption.body.standard.link-hover')};
`;
const ProductSummaryGridOfferWrapper = styled.div.withConfig({
    displayName: 'ProductSummaryGridOfferWrapper'
}) `
  grid-area: button;
  ${({ isFullyRoundedButtonEnabled }) => isFullyRoundedButtonEnabled &&
    `
        a {
          border-radius: 50px;
        }
        `}
  ${({ hasNoOffers, isEnhancedPSG, theme }) => hasNoOffers &&
    isEnhancedPSG &&
    css `
      ${ButtonWrapper} {
        border-width: 1px;
        :hover {
          ${ButtonLabel} {
            color: ${getColorToken(theme, 'colors.interactive.base.white')};
          }
        }
      }
    `}

  ${({ isEnhancedPSG, theme, isUpcEnabled }) => isEnhancedPSG
    ? css `
          padding-left: ${calculateSpacing(4.5, 'px')};
          max-width: 100%;
          width: 336px;
          min-width: auto;
          @media (min-width: calc(${BREAKPOINTS.md})) {
            a {
              min-width: 0;
            }
          }
          display: flex;
          align-items: center;
          justify-content: end;
          margin-right: 0;
          ${ProductOfferListWrapper} {
            width: 100%;
          }
          ${ProductOfferWrapper} {
            @media (min-width: 1600px) {
              max-width: 100%;
            }
          }
          ${ButtonWrapper} {
            width: 100%;
          }
          ${ButtonLabel} {
            color: ${getColorToken(theme, 'colors.interactive.base.black')};
            ${getTypographyStyles(theme, 'typography.definitions.utility.button-core')};
          }
          ${ProductOfferCtaBlock} {
            width: 100%;
            height: ${isUpcEnabled ? '48px' : '40px'};
          }
        `
    : css `
          a {
            min-width: 15rem;
          }

          display: flex;
          align-items: center;
          ${ProductOfferCtaBlock} > a,
          > a {
            padding: 0;
            height: ${isUpcEnabled ? '48px' : '40px'};

            @media (max-width: calc(${BREAKPOINTS.md} - 1px)) {
              width: 100%;
            }

            ${minMaxScreen(BREAKPOINTS.md, BREAKPOINTS.lg)} {
              width: 300px;
            }

            ${minMaxScreen(BREAKPOINTS.lg, BREAKPOINTS.xl)} {
              width: 224px;
            }

            ${minMaxScreen(BREAKPOINTS.xl, BREAKPOINTS.xxl)} {
              width: 222px;
            }
          }
        `}

  ${ButtonLabel} {
    /* stylelint-disable-next-line value-no-vendor-prefix */
    display: -webkit-box;
    padding: 0 8px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    /* stylelint-enable-next-line value-no-vendor-prefix */
  }

  @media (max-width: calc(${BREAKPOINTS.md} - 1px)) {
    margin-top: ${calculateSpacing(2.5)};

    a {
      width: 100%;
    }

    ${({ isEnhancedPSG }) => isEnhancedPSG &&
    css `
        padding-left: 0;
        width: 100%;
        max-width: 100%;
      `}
  }
`;
const ProductSummaryButton = styled.div.withConfig({
    displayName: 'ProductSummaryButton'
}) ``;
const ProductSummaryResponsiveAsset = styled(ResponsiveAsset).withConfig({
    displayName: 'ProductSummaryResponsiveAsset'
}) `
  & {
    ${ResponsiveImageContainer} {
      display: block;
      width: ${({ isEnhancedPSG }) => (isEnhancedPSG ? '80px' : '69px')};
      min-width: ${({ isEnhancedPSG }) => isEnhancedPSG && '80px'};
      max-width: 100%;
      ${({ isEnhancedPSG }) => (isEnhancedPSG ? 'height: auto;' : '')}
    }

    & {
      ${ResponsiveClipVideoContainer} {
        width: ${({ isEnhancedPSG }) => (isEnhancedPSG ? '80px' : '69px')};
        min-width: ${({ isEnhancedPSG }) => isEnhancedPSG && '80px'};
        max-width: 100%;

        video {
          height: auto;
        }
      }
    }
  }

  ${({ isEnhancedPSG }) => !isEnhancedPSG &&
    `
    &&&{
  width: 69px;
   }
  `}

  & .responsive-image {
    display: block;
  }
`;
const ProductSummaryAssetWrapper = styled.div.withConfig({
    displayName: 'ProductSummaryAssetWrapper'
}) `
  display: flex;
  grid-area: image;
  align-items: center;
  ${({ isEnhancedPSG }) => isEnhancedPSG &&
    `
       > * {
        flex: 1 1 auto;
      }
      div, figure {
        flex: 1 1 auto;
        width: 100%;
      }
      iframe, video {
        width: 100%;
        height: auto;
        display: block;
      }
      ${CNEVideoEmbedWrapper}{
        height:auto;
        padding:0;
      }
    `}

  picture {
    width: 100%;
  }

  img {
    background-color: ${({ theme, isUpcEnabled }) => isUpcEnabled &&
    `${getColorToken(theme, 'colors.consumption.body.standard.bg-card')}`};
  }

  a {
    padding-left: 0;
  }

  ${({ hasClipInsideUPC, renditionConfig }) => hasClipInsideUPC &&
    css `
      > * {
        flex: 1 1 auto;
      }
      && ${ResponsiveClipVideoContainer} {
        display: flex;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        align-items: center;
        justify-content: center;
        cursor: default;
        width: 100%;
        @media (max-width: calc(${BREAKPOINTS.md} - 1px)) {
          width: 69px;
        }

        video {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      ${getCSSHeightRules('responsive-clip', renditionConfig)};

      ${ResponsiveClipWrapper} {
        overflow: hidden;
        place-items: center;
      }
    `}
`;
const ProductSummaryImage = styled.figure.withConfig({
    displayName: 'ProductSummaryImage'
}) `
  display: grid;
  grid-template-areas: 'image content button';
  margin: 0;
  width: 100%;

  ${({ isEnhancedPSG }) => isEnhancedPSG
    ? css `
          grid-template-columns: 80px 1fr minmax(0, max-content);
          column-gap: ${calculateSpacing(1.5, 'px')};
          padding: ${calculateSpacing(3, 'px')} 0;
        `
    : css `
          grid-template-columns: 1fr 3fr 2fr;
          column-gap: ${calculateSpacing(1.5)};
          padding: ${calculateSpacing(2)} 0;
        `};

  @media (max-width: calc(${BREAKPOINTS.md} - 1px)) {
    ${({ isEnhancedPSG }) => isEnhancedPSG
    ? `
          grid-template-areas:
            'image content'
            'button button';
          grid-template-columns: 80px 1fr;
          width: 100%;
          padding: ${calculateSpacing(3, 'px')} 0;
        `
    : `
          grid-template-areas:
            'content content content image'
            'button button button button';
        `}
  }
`;
const ProductSummaryWrapper = styled.div.withConfig({
    displayName: 'ProductSummaryWrapper'
}) `
  border-bottom: 1px solid
    ${({ theme }) => getColorToken(theme, 'colors.consumption.body.standard.divider')};

  ${({ isEnhancedPSG }) => isEnhancedPSG && 'width: 100%;'}

  ${({ isEnhancedPSG }) => isEnhancedPSG &&
    css `
      @media (max-width: calc(${BREAKPOINTS.md} - 1px)) {
        width: 100%;
      }
    `}
  ${({ theme, isEnhancedPSG, hasBackground }) => {
    if (isEnhancedPSG)
        return '';
    return (hasBackground &&
        css `
        ${getColorStyles(theme, 'background-color', 'colors.consumption.body.standard.bg-card')};

        padding-bottom: ${calculateSpacing(6)};

        ${maxScreen(BREAKPOINTS.md)} {
          margin: 0 0 ${calculateSpacing(12)};
        }

        ${ProductSummaryImage} {
          margin: 0;
        }
      `);
}}

  ${ProductSummaryAssetWrapper} {
    width: 100%;
    height: 100%;
  }
`;
const ProductSummaryGridWrapper = styled.div.withConfig({
    displayName: 'ProductSummaryGridWrapper'
}) `
  ${({ isEnhancedPSG, theme }) => isEnhancedPSG &&
    css `
      margin-top: ${calculateSpacing(4, 'px')};
      margin-bottom: ${calculateSpacing(4, 'px')};
      padding: ${calculateSpacing(3, 'px')};
      width: 100%;
      min-width: 230px;
      ${getColorStyles(theme, 'background-color', 'colors.background.light')}
    `}
`;
module.exports = {
    ProductSummaryWrapper,
    ProductSummaryImage,
    ProductSummaryAssetWrapper,
    ProductSummaryResponsiveAsset,
    ProductSummaryButton,
    ProductSummaryGridOfferWrapper,
    ProductSummaryBrandAndName,
    ProductSummaryHed,
    ProductSummaryHedText,
    ProductSummaryDekReadMore,
    ProductSummaryCtaBlock,
    ProductSummaryCaptionButton,
    ProductSummaryGridShowMoreLessWrapper,
    ProductSummaryGridShowMore,
    ProductSummaryGridShowLess,
    ProductSummaryGridShowLessDivider,
    ProductSummaryGridCardCounter,
    ProductSummaryGridTitle,
    Link,
    ProductSummaryGridWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 8509:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    gridTitle: {
        id: 'ProductSummaryGrid.GridTitle',
        defaultMessage: 'Featured in this article',
        description: 'Product Summary Grid title'
    },
    readMore: {
        id: 'ProductSummaryGrid.ReadMore',
        defaultMessage: 'Read more',
        description: 'Product Summary Grid accordian to read more'
    },
    jumpToReview: {
        id: 'ProductSummaryGrid.JumpToReview',
        defaultMessage: 'Jump to review',
        description: 'Product Summary Grid accordian to jump to review'
    },
    showMore: {
        id: 'ProductSummaryGrid.ShowMore',
        defaultMessage: 'Show more',
        description: 'Product Summary Grid button text to show more grid items'
    },
    showLess: {
        id: 'ProductSummaryGrid.ShowLess',
        defaultMessage: 'Show less',
        description: 'Product Summary Grid button text to show less grid items',
        isConfigurable: true
    },
    defaultProductSummaryGridTitle: {
        id: 'ProductSummaryGrid.DefaultProductSummaryGridTitle',
        defaultMessage: 'Featured in this article',
        description: 'default title for product summary grid'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 34611:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

/* eslint-disable eslint-comments/disable-enable-pair */
/* eslint-disable complexity */
const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { TrackComponentChannel } = __webpack_require__(78788);
const Grid = __webpack_require__(86659);
const ResponsiveAsset = __webpack_require__(73275);
const Button = __webpack_require__(73730);
const { PromoBoxButtonContainer, PromoBoxButtonPrimary, PromoBoxButtonSecondary, PromoBoxCallout, PromoBoxCalloutContent, PromoBoxContent, PromoBoxText, PromoBoxTitle, PromoBoxResponsiveAsset, PromoBoxWrapper } = __webpack_require__(75697);
const { componentTracking, googleAnalytics } = __webpack_require__(90090);
const { useViewportObserver } = __webpack_require__(55030);
/**
 * PromoBox component
 *
 * @param {object} props - React props
 * @param {object} props.asset - Object containing ResponsiveClip or ResponsiveImage properties
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.contentTextAlign] - Callout content alignment
 * @param {string} props.dangerousButtonText - A string (possibly HTML) to use as the button text
 * @param {string} [props.dangerousText] - Additional promo text to display
 * @param {string} [props.dangerousSecondaryButtonText] - Optional secondary button text to display
 * @param {string} [props.dangerousTitle] - A string (possibly HTML) to use as the title
 * @param {string} props.hasFullWidthForAsset - A destination for the promo box when clicked
 * @param {string} props.hasRoundedEdges - Optional flag to set rounded edges for images
 * @param {boolean} [props.hasTopLine] - flag to show block top line
 * @param {boolean} [props.hasFullGridWidth] - flag to set maximum width of the Promobox
 * @param {string} props.href - A destination for the promo box when clicked
 * @param {boolean} props.shouldLinkWrapper - Use PromoBox wrapper as link
 * @param {string} props.primaryButtonStyle - button style to be used for primary button
 * @param {string} props.secondaryHref - A destination for the secondary CTA on promobox
 * @param {string} props.secondaryButtonPosition - optional flag to position the seconday button
 * @param {string} props.secondaryButtonVariation - optional flag to display the seconday button variation
 * @param {boolean} props.showSecondaryButton - option flag to show secondary button
 * @param {boolean} [props.shouldEnableBackgroundImgForMobile] - feature flag to display background image for mobile
 * @param {boolean} [props.shouldEnableBundleComponentAnalytics] - feature flag to append data-section-title attribute for analytics
 * @param {boolean} [props.shouldFetchBITokens] - Optional flag to fetch BI tokens for styles
 * @param {object} [props.trackingNamespace] - Optional override the base namespace of data-section-title for component tracking
 * @param {object} [props.variations] - Optional variations
 * @param {object} [props.variations.contentAlign] - Optional variation for content alignment
 * @param {object} [props.isInverted] - Optional prop for inverting the color
 * @param {object} [props.isInvertedTheme] - Optional variation for content alignment
 * @param {object} [props.variations.showCard] - Optional variation for background card color behind text
 * @param {boolean} [props.variations.fullBleed] - take width of the container
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 *
 * @returns {ReactElement} <a>
 */
const PromoBox = ({ asset, secondaryButtonVariation, className, contentTextAlign = 'center', dangerousButtonText, dangerousSecondaryButtonText, dangerousText, dangerousTitle, hasFullWidthForAsset = false, hasRoundedEdges = false, hasTopLine = true, hasFullGridWidth = false, href, shouldLinkWrapper = true, primaryButtonStyle, secondaryHref, secondaryButtonPosition, showSecondaryButton = false, shouldEnableBackgroundImgForMobile = false, shouldEnableBundleComponentAnalytics, shouldFetchBITokens = false, trackingNamespace, isInverted = false, isInvertedTheme = false, variations = {
    showCard: true
}, variationName }) => {
    const { showCard, fullBleed, contentAlign } = variations;
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'PromoBox',
            variation: variationName
        });
    }, [variationName]);
    useViewportObserver('.promo-box', undefined, (isInViewport) => {
        if (isInViewport) {
            googleAnalytics.emitUniqueGoogleTrackingEvent('promobox-impression', {
                href
            });
        }
    });
    const buttonProps = {
        inputKind: !showSecondaryButton ? 'text' : 'link',
        btnStyle: primaryButtonStyle,
        isCardVariation: showCard,
        label: dangerousButtonText,
        secondaryButtonPosition,
        href
    };
    const secondaryButtonProps = {
        ...buttonProps,
        btnStyle: 'outlined',
        label: dangerousSecondaryButtonText,
        href: showSecondaryButton && secondaryHref
    };
    const InnerCardComponent = showCard ? Grid.NoMargins : Grid.WithMargins;
    const ParentContainer = showCard && !fullBleed ? Grid.WithMargins : 'div';
    const analyticsDataAttributePrimary = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNamespace?.primary || dangerousButtonText);
    const analyticsDataAttributeSecondary = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNamespace?.secondary || dangerousSecondaryButtonText);
    return (React.createElement(PromoBoxWrapper, { "data-testid": "promo-box", href: !secondaryHref ? `${href}` : undefined, className: classnames('promo-box', className), contentAlign: contentAlign, isCardVariation: showCard, hasTopLine: hasTopLine, hasFullGridWidth: hasFullGridWidth, as: shouldLinkWrapper && href ? 'a' : 'div', hasFullWidthForAsset: hasFullWidthForAsset, shouldFetchBITokens: shouldFetchBITokens },
        asset && (React.createElement(PromoBoxResponsiveAsset, { ...asset, contentAlign: contentAlign, isCardVariation: showCard, hasFullWidthForAsset: hasFullWidthForAsset, hasRoundedEdges: hasRoundedEdges, shouldEnableBackgroundImgForMobile: shouldEnableBackgroundImgForMobile })),
        React.createElement(PromoBoxContent, { as: ParentContainer, isCardVariation: showCard, fullBleed: fullBleed },
            React.createElement(PromoBoxCallout, { className: "promo-box__callout", isCardVariation: showCard, isInverted: isInverted, contentAlign: contentAlign, fullBleed: fullBleed },
                dangerousTitle && (React.createElement(PromoBoxCalloutContent, { as: InnerCardComponent, isCardVariation: showCard },
                    React.createElement(PromoBoxTitle, { contentAlign: contentAlign, isCardVariation: showCard, dangerouslySetInnerHTML: { __html: dangerousTitle }, isInvertedTheme: isInvertedTheme, isInverted: isInverted }))),
                dangerousText && (React.createElement(PromoBoxCalloutContent, { as: InnerCardComponent, isCardVariation: showCard },
                    React.createElement(PromoBoxText, { className: "promo-box__text", contentTextAlign: contentTextAlign, contentAlign: contentAlign, isCardVariation: showCard, dangerouslySetInnerHTML: { __html: dangerousText }, isInvertedTheme: isInvertedTheme, isInverted: isInverted }))),
                React.createElement(PromoBoxButtonContainer, { secondaryButtonPosition: secondaryButtonPosition },
                    buttonProps.label && (React.createElement(PromoBoxButtonPrimary, { ...buttonProps, ...analyticsDataAttributePrimary, isInverted: isInverted })),
                    showSecondaryButton && secondaryButtonProps.label && (React.createElement(PromoBoxButtonSecondary, { ...secondaryButtonProps, ...analyticsDataAttributeSecondary, as: Button[secondaryButtonVariation] })))))));
};
PromoBox.propTypes = {
    asset: PropTypes.shape(ResponsiveAsset.propTypes),
    className: PropTypes.string,
    contentTextAlign: PropTypes.oneOf(['left', 'right', 'center']),
    dangerousButtonText: PropTypes.string,
    dangerousSecondaryButtonText: PropTypes.string,
    dangerousText: PropTypes.string,
    dangerousTitle: PropTypes.string,
    hasFullGridWidth: PropTypes.bool,
    hasFullWidthForAsset: PropTypes.bool,
    hasRoundedEdges: PropTypes.bool,
    hasTopLine: PropTypes.bool,
    href: PropTypes.string.isRequired,
    isInverted: PropTypes.bool,
    isInvertedTheme: PropTypes.bool,
    primaryButtonStyle: PropTypes.oneOf(['filled', 'outlined', 'text']),
    secondaryButtonPosition: PropTypes.string,
    secondaryButtonVariation: PropTypes.string,
    secondaryHref: PropTypes.string,
    shouldEnableBackgroundImgForMobile: PropTypes.bool,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldFetchBITokens: PropTypes.bool,
    shouldLinkWrapper: PropTypes.bool,
    showSecondaryButton: PropTypes.bool,
    trackingNamespace: PropTypes.object,
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        contentAlign: PropTypes.oneOf(['below']),
        showCard: PropTypes.bool,
        fullBleed: PropTypes.bool
    })
};
PromoBox.displayName = 'PromoBox';
module.exports = PromoBox;
//# sourceMappingURL=PromoBox.js.map

/***/ }),

/***/ 35727:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
module.exports = asConfiguredComponent(__webpack_require__(35393), 'PromoBox');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 75697:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { BaseText, BaseWrap } = __webpack_require__(76955);
const { getColorStyles, calculateSpacing, getTypographyStyles, getColorToken, getDecoration } = __webpack_require__(26865);
const { applyGridSpacing } = __webpack_require__(1123);
const { BREAKPOINTS } = __webpack_require__(96472);
const { GridItem } = __webpack_require__(40653);
const ResponsiveAsset = __webpack_require__(73275);
const Button = __webpack_require__(73730);
const setFullWidthForAsset = `
  .responsive-image__image {
    width: 100%;
  }
`;
const PromoBoxWrapper = styled(BaseWrap).withConfig({
    displayName: 'PromoBoxWrapper'
}) `
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;

  ${({ theme, hasTopLine, shouldFetchBITokens = true }) => hasTopLine
    ? `
        border-top: ${shouldFetchBITokens ? getDecoration(theme, 'dividerWidth') : '1px'} solid;
        ${getColorStyles(theme, 'border-color', shouldFetchBITokens
        ? 'colors.discovery.body.white.border'
        : 'colors.discovery.body.white.divider')};
        padding-top: ${calculateSpacing(6)};
      `
    : ``}

  ${({ isCardVariation }) => isCardVariation
    ? `
      display: grid;
      position: relative;
      grid-template-columns: repeat(12, 1fr);

      @media (min-width: ${BREAKPOINTS.md}) {
        ${applyGridSpacing('margin', true)}
      }
  `
    : ``}

      ${({ hasFullGridWidth }) => hasFullGridWidth &&
    `@media (min-width: ${BREAKPOINTS.md}) {
      margin-left: 0;
      margin-right: 0;
    }`}
    
  ${({ contentAlign }) => contentAlign === `below`
    ? `
    flex-wrap: wrap;
  `
    : ``}

  ${({ hasFullWidthForAsset }) => hasFullWidthForAsset &&
    `
    &:focus-visible {
      outline-offset: ${calculateSpacing(0.5)};
    }
  `}
`;
const PromoBoxResponsiveAsset = styled(ResponsiveAsset).withConfig({
    displayName: 'PromoBoxResponsiveAsset'
}) `
  width: 100%;

  ${({ isCardVariation }) => isCardVariation
    ? `
    grid-column: 1/-1;
    grid-row: 1;
    z-index: 1;

    &.responsive-asset {
      display: none;
    }
    @media (min-width: ${BREAKPOINTS.md}) {
      &.responsive-asset {
        display: block;
      }
    }
  `
    : ``}

  ${({ contentAlign }) => contentAlign === `below`
    ? `
   &::after {
     display: none;
   }
  `
    : ``}

  ${({ hasFullWidthForAsset }) => hasFullWidthForAsset && setFullWidthForAsset}

  ${({ hasRoundedEdges }) => hasRoundedEdges &&
    `
    &.responsive-asset {
      border-radius: ${calculateSpacing(1)};
    }
    @media (max-width: ${BREAKPOINTS.md}) {
      &.responsive-asset {
        border-radius: ${calculateSpacing(1)};
      }
    } 
  `}

  ${({ shouldEnableBackgroundImgForMobile }) => shouldEnableBackgroundImgForMobile &&
    `
    @media (max-width: ${BREAKPOINTS.md}) {
      &.responsive-asset {
        display: block;
      }
    } 
  `}
`;
const PromoBoxCallout = styled.div.withConfig({
    displayName: 'PromoBoxCallout'
}) `
  position: relative;
  text-decoration: none;

  ${({ theme, isCardVariation }) => isCardVariation
    ? `
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    ${getColorStyles(theme, 'background-color', 'colors.discovery.body.brand.background')};
    padding: ${calculateSpacing(2)} ${calculateSpacing(2)};
    text-align: center;
    text-decoration: none;

    @media (min-width: ${BREAKPOINTS.md}) {
      padding: ${calculateSpacing(6)} ${calculateSpacing(7)};
    }
   
  `
    : ``}

  ${({ contentAlign }) => contentAlign === `below`
    ? `
    margin-top: ${calculateSpacing(1)};

    @media (min-width: ${BREAKPOINTS.md}) {
      margin-top: ${calculateSpacing(5)};
    }
  `
    : ``}

  ${({ isInverted, theme }) => isInverted &&
    `${getColorStyles(theme, 'background-color', 'colors.discovery.body.black.background')}`}
`;
const PromoBoxText = styled(BaseText).withConfig({
    displayName: 'PromoBoxText'
}) `
  margin-top: ${calculateSpacing(1)};

  ${({ contentAlign, theme }) => contentAlign === `below`
    ? `
    ${getTypographyStyles(theme, 'typography.definitions.discovery.description-core')}
    ${getColorStyles(theme, 'color', 'colors.discovery.body.white.description')};
    margin-top: ${calculateSpacing(2)};
  `
    : ``}

  @media (min-width: ${BREAKPOINTS.md}) {
    margin-top: ${calculateSpacing(2)};
  }

  ${({ isCardVariation, theme }) => isCardVariation
    ? `
    ${getTypographyStyles(theme, 'typography.definitions.discovery.description-core')}
    ${getColorStyles(theme, 'color', 'colors.discovery.body.brand.description')};
    margin-top: ${calculateSpacing(2)};

    @media (min-width: ${BREAKPOINTS.md}) {
      margin-top: ${calculateSpacing(3)}
    }
  `
    : ``}

  ${({ isInvertedTheme, theme }) => isInvertedTheme
    ? `color: ${getColorToken(theme, 'colors.background.white')}}`
    : ``}

  ${({ isInverted, theme }) => isInverted && `color: ${getColorToken(theme, 'colors.background.white')};`}

  ${({ contentTextAlign }) => `text-align: ${contentTextAlign}`};
`;
PromoBoxText.defaultProps = {
    as: 'div',
    colorToken: 'colors.discovery.body.black.description',
    typeIdentity: 'typography.definitions.globalEditorial.context-primary'
};
const PromoBoxTitle = styled(BaseText).withConfig({
    displayName: 'PromoBoxTitle'
}) `
  margin-top: ${calculateSpacing(2)};
  text-align: center;

  ${({ contentAlign, theme }) => contentAlign === `below`
    ? `
    margin-top: 0;
    ${getColorStyles(theme, 'color', 'colors.discovery.body.white.heading')};
  `
    : ``}

  @media (min-width: ${BREAKPOINTS.md}) {
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-break-out')}
  }

  ${({ isCardVariation, theme }) => isCardVariation
    ? `
      ${getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-primary')}
      ${getColorStyles(theme, 'color', 'colors.discovery.body.brand.heading')};
      margin-top: 0;
      width: 100%;

      @media (min-width: ${BREAKPOINTS.md}) {
        ${getTypographyStyles(theme, 'typography.definitions.discovery.hed-feature')}
        width: 100%;
      }

      @media (min-width: ${BREAKPOINTS.lg}) {
        ${getTypographyStyles(theme, 'typography.definitions.discovery.hed-break-out')}
      }
  `
    : ``}
  ${({ isInvertedTheme, theme }) => isInvertedTheme
    ? `color: ${getColorToken(theme, 'colors.background.white')}}`
    : ``}

  ${({ isInverted, theme }) => isInverted && `color: ${getColorToken(theme, 'colors.background.white')};`}
`;
PromoBoxTitle.defaultProps = {
    as: 'span',
    colorToken: 'colors.discovery.body.black.heading',
    typeIdentity: 'typography.definitions.discovery.hed-core-primary'
};
const PromoBoxButtonContainer = styled(BaseWrap).withConfig({
    displayName: 'PromoBoxButtonContainer'
}) `
  display: flex;
  flex-direction: ${({ secondaryButtonPosition }) => secondaryButtonPosition === 'inverted' ? `column-reverse` : `column`};
  align-items: center;
  justify-content: center;
`;
const PromoBoxButtonPrimary = styled(Button.Primary).withConfig({
    displayName: 'PromoBoxButtonPrimary'
}) `
  margin-top: ${({ isCardVariation }) => isCardVariation ? calculateSpacing(2) : calculateSpacing(1)};

  @media (min-width: ${BREAKPOINTS.md}) {
    margin-top: ${({ isCardVariation, secondaryButtonPosition }) => {
    if (secondaryButtonPosition === 'inverted') {
        calculateSpacing(2);
    }
    else {
        isCardVariation ? calculateSpacing(4) : calculateSpacing(5);
    }
}};
  }

  ${({ isInverted, theme }) => isInverted &&
    `background-color: ${getColorToken(theme, 'colors.background.black')};
    color: ${getColorToken(theme, 'colors.background.white')};
    
    &:hover {
      background-color: ${getColorToken(theme, 'colors.background.white')};
      color: ${getColorToken(theme, 'colors.background.black')};
    }
    `}
`;
const PromoBoxButtonSecondary = styled.button.withConfig({
    displayName: 'PromoBoxButtonSecondary'
}) `
  margin-top: ${({ isCardVariation }) => isCardVariation ? calculateSpacing(2) : calculateSpacing(1)};

  @media (min-width: ${BREAKPOINTS.md}) {
    margin-top: ${({ isCardVariation, secondaryButtonPosition }) => {
    if (secondaryButtonPosition !== 'inverted') {
        calculateSpacing(2);
    }
    else {
        isCardVariation ? calculateSpacing(4) : calculateSpacing(5);
    }
}};
  }
`;
const PromoBoxContent = styled.div.withConfig({
    displayName: 'PromoBoxContent'
}) `
  ${({ isCardVariation }) => {
    if (isCardVariation) {
        return `
        && {
          grid-column: 1/-1;
          grid-row: 1;
          z-index: 2;
        }

        ${GridItem} {
          grid-column: 1/-1;
        }

        @media (min-width: ${BREAKPOINTS.md}) {
          ${GridItem} {
            grid-column: 3/11;
          }
        }
      `;
    }
    return '';
}}
`;
const PromoBoxCalloutContent = styled.div.withConfig({
    displayName: 'PromoBoxCalloutContent'
}) `
  ${GridItem} {
    grid-column: span 4;

    @media (min-width: ${BREAKPOINTS.md}) {
      grid-column: 3 / span 8;
    }
  }

  ${({ isCardVariation }) => {
    if (isCardVariation) {
        return `
        @media (min-width: ${BREAKPOINTS.md}) {
          ${GridItem} {
            grid-column: span 12;
          }
        }
      `;
    }
    return '';
}}
`;
module.exports = {
    PromoBoxCallout,
    PromoBoxCalloutContent,
    PromoBoxText,
    PromoBoxTitle,
    PromoBoxButtonContainer,
    PromoBoxButtonPrimary,
    PromoBoxButtonSecondary,
    PromoBoxWrapper,
    PromoBoxResponsiveAsset,
    PromoBoxContent
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 35393:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const PromoBox = __webpack_require__(34611);
PromoBox.TextBelow = asVariation(PromoBox, 'TextBelow', {
    contentAlign: 'below',
    showCard: false
});
PromoBox.FullBleed = asVariation(PromoBox, 'FullBleed', {
    contentAlign: 'below',
    fullBleed: true,
    showCard: true
}, {
    shouldLinkWrapper: false
});
module.exports = PromoBox;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 75217:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { TrackComponentChannel } = __webpack_require__(78788);
const { PymInteractiveIframeEmbedWrapper, PymInteractiveIframeEmbedContainer, PymInteractiveIframEmbedContent, PymInteractiveIframEmbedCaption } = __webpack_require__(60430);
/**
 * PymInteractiveIframeEmbed component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.caption] - Optional caption
 * @param {number} [props.offsetHeight] - Optional height to add
 * @param {string} props.title - Required by iframe
 * @param {string} props.url - The iframe url
 *
 * @returns {ReactElement} <figure>
 */
const PymInteractiveIframeEmbed = ({ className, caption, offsetHeight = 0, title = 'Interactive Iframe Embed', url }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'PymInteractiveIframeEmbed'
        });
    }, []);
    const iframeElementRef = React.useRef();
    const figureElementRef = React.useRef();
    const receiveMessage = ({ source, origin, data }) => {
        const { type: dataType, height: newHeight } = data;
        // Ensure DOM node exists and origin matches
        const isSameDomain = figureElementRef.current &&
            iframeElementRef.current &&
            iframeElementRef.current.src.startsWith(origin) &&
            iframeElementRef.current.contentWindow === source;
        let height;
        // exit if message coming from the wrong source
        if (!isSameDomain)
            return;
        // check if pym
        if (typeof data === 'string' && data.indexOf('apym') !== -1) {
            height = data.replace('apym', '');
            // check if resizer
        }
        else if (dataType === 'embed-size') {
            height = newHeight;
        }
        // if we have a height
        if (height) {
            figureElementRef.current.style.height = `${Number(height) + offsetHeight}px`;
        }
    };
    React.useEffect(() => {
        window.addEventListener('message', receiveMessage);
        return () => {
            window.removeEventListener('message', receiveMessage);
        };
    });
    return (React.createElement(PymInteractiveIframeEmbedWrapper, { "data-testid": "PymInteractiveIframeEmbedWrapper", className: className, ref: figureElementRef },
        React.createElement(PymInteractiveIframeEmbedContainer, null,
            React.createElement(PymInteractiveIframEmbedContent, { title: title, src: url, ref: iframeElementRef, scrolling: "no" }),
            caption && (React.createElement(PymInteractiveIframEmbedCaption, { dangerousCaptionText: caption })))));
};
PymInteractiveIframeEmbed.propTypes = {
    caption: PropTypes.string,
    className: PropTypes.string,
    offsetHeight: PropTypes.number,
    title: PropTypes.string,
    url: PropTypes.string.isRequired
};
PymInteractiveIframeEmbed.displayName = 'PymInteractiveIframeEmbed';
module.exports = PymInteractiveIframeEmbed;
//# sourceMappingURL=PymInteractiveIframeEmbed.js.map

/***/ }),

/***/ 39122:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const PymInteractiveIframeEmbed = __webpack_require__(75217);
module.exports = asConfiguredComponent(PymInteractiveIframeEmbed, 'PymInteractiveIframeEmbed');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 60430:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const Caption = __webpack_require__(14760);
const { calculateSpacing, getTypographyStyles, getColorStyles } = __webpack_require__(26865);
const PymInteractiveIframeEmbedWrapper = styled.figure.withConfig({
    displayName: 'PymInteractiveIframeEmbedWrapper'
}) `
  margin: ${calculateSpacing(5, 'px')} auto;
  height: 100%;
  text-align: center;
`;
const PymInteractiveIframeEmbedContainer = styled.div.withConfig({
    displayName: 'PymInteractiveIframeEmbedContainer'
}) `
  width: 100%;
  height: 100%;
`;
const PymInteractiveIframEmbedContent = styled.iframe.withConfig({
    displayName: 'PymInteractiveIframEmbedContent'
}) `
  border: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
`;
const PymInteractiveIframEmbedCaption = styled(Caption).withConfig({
    displayName: 'PymInteractiveIframEmbedCaption'
}) `
  ${({ theme, typeIdentity }) => getTypographyStyles(theme, typeIdentity)}
  ${({ theme, colorToken }) => getColorStyles(theme, 'color', colorToken)};
`;
PymInteractiveIframEmbedCaption.defaultProps = {
    colorToken: 'colors.consumption.body.standard.body',
    typeIdentity: 'typography.definitions.globalEditorial.context-secondary'
};
module.exports = {
    PymInteractiveIframeEmbedWrapper,
    PymInteractiveIframeEmbedContainer,
    PymInteractiveIframEmbedContent,
    PymInteractiveIframEmbedCaption
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 1825:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const Bylines = __webpack_require__(52540);
const ResponsiveAsset = __webpack_require__(73275);
const { TrackComponentChannel } = __webpack_require__(78788);
const { ReviewEmbedContentCard, ReviewEmbedWrapper, ReviewEmbedHr } = __webpack_require__(88920);
/**
 * ContentCardEmbed component
 *
 * @param {object} props - React props.
 * @param {string} [props.artistName] - Optional artist name
 * @param {string} [props.buttonTextContent] - Optional button text
 * @param {string} [props.className] - Optional top-level class to add.
 * @param {object} [props.contributors] - Optional object containing data to create contributor bylines.
 * @param {string} [props.dangerousDek] - Optional HTML Dek.
 * @param {string} [props.dangerousHed] - Optional HTML Hed.
 * @param {string} [props.hasWhiteBg] - Option to show white background for content card.
 * @param {object} [props.image] - Image.
 * @param {object} [props.showArtist] - Option to show artist.
 * @param {object} [props.showButton] - Option to show button.
 * @param {object} [props.showByline] - Option to show byline.
 * @param {object} [props.showHr] - Option to show button.
 * @param {object} [props.showSideBySide] - If true, shows side by side variation for the embed.
 * @param {string} [props.url] - URL to content.
 *
 * @returns {ReactElement} <div>
 */
const ReviewEmbed = ({ artistName = '', buttonTextContent = '', contributors, className, dangerousDek, dangerousHed, hasWhiteBg = false, image, showArtist = false, showButton = false, showByline = true, showHr = true, showSideBySide = true, url }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ReviewEmbed'
        });
    }, []);
    return (React.createElement(ReviewEmbedWrapper, { className: className, "data-testid": "review-embed-wrapper" },
        showHr && React.createElement(ReviewEmbedHr, { "data-testid": "review-embed-hr" }),
        React.createElement(ReviewEmbedContentCard, { "data-testid": "review-embed-content-card", artistName: showArtist ? artistName : '', buttonTextContent: buttonTextContent, contributors: contributors, dangerousDek: dangerousDek, dangerousHed: dangerousHed, image: image, url: url, showButton: showButton, showByline: showByline, hasWhiteBg: hasWhiteBg, showSideBySide: showSideBySide }),
        showHr && React.createElement(ReviewEmbedHr, { "data-testid": "review-embed-hr" })));
};
ReviewEmbed.propTypes = {
    artistName: PropTypes.string,
    buttonTextContent: PropTypes.string,
    className: PropTypes.string,
    contributors: PropTypes.shape(Bylines.propTypes.contributors),
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    hasWhiteBg: PropTypes.bool,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    showArtist: PropTypes.bool,
    showButton: PropTypes.bool,
    showByline: PropTypes.bool,
    showHr: PropTypes.bool,
    showSideBySide: PropTypes.bool,
    url: PropTypes.string
};
module.exports = ReviewEmbed;
//# sourceMappingURL=ReviewEmbed.js.map

/***/ }),

/***/ 66268:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(1825);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 88920:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BREAKPOINTS } = __webpack_require__(96472);
const { calculateSpacing } = __webpack_require__(26865);
const ContentCardEmbed = __webpack_require__(78942);
const ReviewEmbedWrapper = styled.div.withConfig({
    displayName: 'ReviewEmbedWrapper'
}) `
  @media (min-width: ${BREAKPOINTS.md}) {
    margin: ${calculateSpacing(5)} 0;
  }
`;
const ReviewEmbedContentCard = styled(ContentCardEmbed).withConfig({
    displayName: 'ReviewEmbedContentCard'
}) `
  margin: ${calculateSpacing(5)} 0 ${calculateSpacing(4)};
`;
const ReviewEmbedHr = styled.hr.withConfig({
    displayName: 'ReviewEmbedHr'
}) `
  display: block;
  border: 0;
  padding: 0;
  height: 1px;
`;
module.exports = {
    ReviewEmbedContentCard,
    ReviewEmbedWrapper,
    ReviewEmbedHr
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 51437:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { useRef, useState, useEffect, useCallback, useMemo } = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const classnames = __webpack_require__(32485);
const ExternalLink = __webpack_require__(9573);
const { sizesAscending } = __webpack_require__(99906);
const ResponsiveAsset = __webpack_require__(73275);
const { componentTracking } = __webpack_require__(90090);
const { TrackComponentChannel } = __webpack_require__(78788);
const { getLastIndexElement, getNextIndexElement, handleOnScrollStop, isBackwardArrowActive, onScrollComplete } = __webpack_require__(70713);
const { trackNavigationEvent } = __webpack_require__(14307);
const { trackSnowplowEvent } = __webpack_require__(49938);
const getListEl = (ref) => ref?.current?.querySelector('nav > ul');
const scrollElementToIndex = (index, ref) => {
    const el = getListEl(ref);
    const scrollToElementIndex = index || 1;
    const childEl = el?.querySelector(`li:nth-child(${scrollToElementIndex})`);
    const childElOffset = childEl?.offsetLeft;
    const offsetValueAdjustment = 48;
    el.scrollTo({
        left: childElOffset - offsetValueAdjustment,
        behavior: 'smooth'
    });
};
/* eslint consistent-return: "error" */
const isLastItemInView = (ref) => {
    const list = getListEl(ref);
    const lastItem = list?.querySelector(`li:last-child`);
    if (list && lastItem) {
        const parentElRect = list.getBoundingClientRect();
        const childElRect = lastItem.getBoundingClientRect();
        return (parentElRect.left < childElRect.left &&
            parentElRect.right > childElRect.right - 150);
    }
    return null;
};
/* eslint consistent-return: "error" */
const isFirstItemInView = (ref) => {
    const list = getListEl(ref);
    const firstItem = list?.querySelector(`li:first-child`);
    if (list && firstItem) {
        const parentElRect = list.getBoundingClientRect();
        const childElRect = firstItem.getBoundingClientRect();
        return (parentElRect.left < childElRect.left &&
            parentElRect.right > childElRect.right);
    }
    return null;
};
const { LeftScrollButton, ImageWrapper, LinkBannerRubric, NavListWrapper, NavList, NavListItem, NavListItemContent, NavListItemContentAnchor, NavLink, NavWrapper, NavListWrapperForMore, NavPrimaryItem, NavImage, RightScrollButton, ScrollingNavigationMoreLinkWrapper, StyledChevron, StyledThinChevron, NavListDefault, VisualTextWrap } = __webpack_require__(79424);
const { default: Carousel } = __webpack_require__(36061);
const { isMobileViewport } = __webpack_require__(55659);
const handleClickNavigation = (e, text) => {
    if ( true && window.dataLayer) {
        window.dataLayer.push({
            event: 'navigation-click',
            navigationType: 'header',
            clickText: text
        });
    }
    const eventData = {
        type: 'click',
        label: text,
        subject: 'header_menu',
        items: [
            {
                content_title: text,
                content_url: e?.target?.href?.toString()
            }
        ],
        placement: 'header'
    };
    trackNavigationEvent(eventData);
};
/**
 * ScrollingNavigation
 * A list of navigational items
 *
 * @param {object} props - React props
 * @param {string} [props.ariaLabel] - Optional string to set a aria-label attribute
 * @param {string} [props.className] - Optional additional class to add to wrapper
 * @param {Function} props.collapseMegaMenu - Function that determines to close megamenu on more click for StackedNavigation
 * @param {number} [props.defaultNavLinkCount] - Optional prop to specify the number of links after which the More is shown, defaults to 6
 * @param {string} [props.dek] - dek of the multiple link list banner
 * @param {boolean} [props.fadeWidth] - prop for the fade width of megamenu
 * @param {Function} [props.isRightSpaceDisabled] - Optionally reduces the right padding to nav list
 * @param {boolean} [props.hasAnchorLinkList] - Visual InPage Link banner variation
 * @param {boolean} [props.hasAnchorLinkListDivider] - Optional prop to add divider between header and dek for Anchorlist
 * @param {boolean} [props.hasBorders] - Optionally adds a border to wrapper
 * @param {boolean} [props.hasBottomBorder] - Optionally adds a border at the bottom to wrapper
 * @param {boolean} [props.hasContentHeaderLogo] - checks if the content header has logo
 * @param {boolean} [props.hasDivider] - Optionally adds a divider after the primary item
 * @param {boolean} props.hasCarouselControls - Visual link banner variation
 * @param {boolean} [props.hasDefaultChevron] - Optional boolean flag to set chevron by default
 * @param {boolean} [props.hasGradient] - Optionally adds a gradient when the links overflow the viewport. Defaults to true
 * @param {boolean} [props.hasSmallViewportTitle] - Optionally sets style to secondary type token for carousel title
 * @param {string} [props.hed] - hed of the multiple link list banner
 * @param {boolean} [props.hideMoreLinkOnLargerScreens] - Optional value determining whether to not show More link on larger viewports greater than 1280px
 * @param {string} [props.hidePrimaryLink] - Breakpoint to hide primary
 * @param {boolean} props.isCentered - Center aligns the navigation items
 * @param {boolean} props.isLeftSpaceDisabled - Optionally removes the left padding to nav wrapper
 * @param {boolean} props.isMenuDrawerOpen - prop to check if mega menu drawer is open
 * @param {boolean} props.isPointerEventEnabledOnHover - Determine pointer events when hasHrefForLinks is true
 * @param {boolean} props.isSlim - Display a slimmer navigation across all breakpoints
 * @param {Array} props.links - Navigation items
 * @param {Function} props.onHover - Function that determines which drawer to display for SiteHeader
 * @param {object} [props.primaryLink] - Item to display across all breakpoints
 * @param {boolean} [props.shouldDisplayDangerousDek] - Optional boolean to display dek
 * @param {boolean} [props.shouldEnableBundleComponentAnalytics] - Optional feature flag to append data-section-title attribute for analytics
 * @param {string} [props.shouldOpenDrawerOnClick] - Optional value determining whether to open menu drawer on click or hover
 * @param {boolean} props.shouldUseHoverState - Determine styling of the NavLink when active
 * @param {string} [props.showChevron] - Optional value determining whether to show chevron icon or not
 * @param {string} [props.showMoreLink] - Optional value determining whether to show more link or not
 * @param {string} props.trackingNamespace - Tracking namespace
 * @param {string} [props.theme] - to get the theme
 * @param {boolean} [props.hasHeaderBorder] - Optional flag for header border for carousel
 */
// eslint-disable-next-line complexity
const ScrollingNavigation = ({ ariaLabel, className, collapseMegaMenu = () => { }, defaultNavLinkCount = 6, dek, hasBorders, hasBottomBorder, hasContentHeaderLogo, hasCarouselControls, hasSmallViewportTitle, hasDefaultChevron, hasDivider, hasGradient = true, hideMoreLinkOnLargerScreens = false, hidePrimaryLink, hasAnchorLinkList, hasAnchorLinkListDivider = false, hasHeaderBorder, hed, isCentered, isLeftSpaceDisabled = false, isMenuDrawerOpen, isPointerEventEnabledOnHover, isRightSpaceDisabled = false, isSlim, shouldUseHoverState, links, onHover = () => { }, primaryLink, shouldDisplayDangerousDek = false, shouldEnableBundleComponentAnalytics, shouldOpenDrawerOnClick = false, showChevron = false, showMoreLink = false, fadeWidth = 'sm', trackingNamespace, theme = 'standard' }) => {
    const invertedGradient = hasGradient && theme !== 'inverted';
    const [isMoreActive, setIsMoreActive] = useState(false);
    const [lastItemInView, setLastItemInView] = useState(false);
    const [firstItemInView, setFirstItemInView] = useState(false);
    const [currentIndex, setCurrentIndex] = useState(0);
    const [displayRightChevronButton, setDisplayRightChevronButton] = useState(false);
    const [displayLeftChevronButton, setDisplayLeftChevronButton] = useState(false);
    const [currentLinkText, currentLinkTextState] = useState(null);
    const navListRef = useRef();
    const imagesPerIteration = 1;
    const navHeight = hasContentHeaderLogo ? true : isSlim;
    React.useEffect(() => {
        if (true) {
            // removing hypens to allow isActive flag on multi-word links
            const hashWithoutHyphens = decodeURIComponent(window?.location?.hash).replace(/-/g, ' ');
            currentLinkTextState(hashWithoutHyphens);
        }
    }, []);
    const handleOnScrollStopCallback = useCallback(() => {
        const newIndex = handleOnScrollStop(navListRef);
        setCurrentIndex(newIndex);
    }, []);
    const activeLeftButton = useMemo(() => isBackwardArrowActive(navListRef, currentIndex), [currentIndex]);
    useEffect(() => {
        activeLeftButton && !firstItemInView
            ? setDisplayLeftChevronButton(true)
            : setDisplayLeftChevronButton(false);
        if (activeLeftButton && !lastItemInView) {
            setDisplayRightChevronButton(true);
        }
        if (activeLeftButton && lastItemInView) {
            setDisplayRightChevronButton(false);
        }
    }, [firstItemInView, lastItemInView, activeLeftButton]);
    const applyChevronRules = useCallback(() => {
        links.length <= 4 || lastItemInView
            ? setDisplayRightChevronButton(false)
            : setDisplayRightChevronButton(true);
        if (activeLeftButton && !lastItemInView) {
            setDisplayRightChevronButton(true);
        }
        firstItemInView || !activeLeftButton
            ? setDisplayLeftChevronButton(false)
            : setDisplayLeftChevronButton(true);
    }, [firstItemInView, lastItemInView, activeLeftButton, links]);
    useEffect(() => {
        if (hasDefaultChevron) {
            applyChevronRules();
        }
    }, [
        firstItemInView,
        lastItemInView,
        activeLeftButton,
        hasDefaultChevron,
        links,
        applyChevronRules
    ]);
    useEffect(() => {
        onScrollComplete(handleOnScrollStopCallback());
        setLastItemInView(isLastItemInView(navListRef));
        setFirstItemInView(isFirstItemInView(navListRef));
        window.addEventListener('scroll', onScrollComplete(handleOnScrollStopCallback), true);
    }, [currentIndex, handleOnScrollStopCallback]);
    const scrollSelectedInPageIntoView = () => {
        const selectedInPageNav = window.document &&
            window.document.querySelector('ul.anchor-nav-list li[class*="active-InPage-nav"]');
        if (selectedInPageNav) {
            selectedInPageNav.scrollIntoView({
                behavior: 'smooth',
                block: 'center',
                inline: 'center'
            });
        }
    };
    React.useEffect(() => {
        window &&
            window.innerWidth < 768 &&
            window.addEventListener('DOMContentLoaded', scrollSelectedInPageIntoView);
        return () => {
            window.removeEventListener('DOMContentLoaded', scrollSelectedInPageIntoView);
        };
    }, []);
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ScrollingNavigation'
        });
    }, []);
    if (!links?.length)
        return null;
    const handleLeftClick = () => {
        const index = getLastIndexElement(currentIndex, imagesPerIteration, navListRef);
        scrollElementToIndex(index, navListRef);
        if ( true && window.dataLayer) {
            window.dataLayer.push({
                event: 'link-banner-left-arrow',
                navigationType: 'visual-link-list'
            });
        }
    };
    const handleRightClick = () => {
        const index = getNextIndexElement(currentIndex, imagesPerIteration, navListRef);
        handleOnScrollStopCallback();
        let displayNextIndex = index;
        if (index > 1) {
            displayNextIndex = index - 3;
        }
        scrollElementToIndex(displayNextIndex, navListRef);
        if (links.length >= 5) {
            setDisplayLeftChevronButton(true);
        }
        if (links.length === index) {
            setDisplayRightChevronButton(false);
        }
        if ( true && window.dataLayer) {
            window.dataLayer.push({
                event: 'link-banner-right-arrow',
                navigationType: 'visual-link-list'
            });
        }
    };
    const onKeyPress = (event, text) => {
        if (event.keyCode === 13 || event.keyCode === 32) {
            // enter or space keypress
            event.preventDefault();
            onHover(text);
        }
    };
    const handleClick = (url, event, defaultClickHandler) => {
        if (typeof defaultClickHandler === 'function') {
            defaultClickHandler();
        }
        const parts = url.split('#');
        const target = parts[1]?.toLowerCase();
        if (!target)
            return;
        if (true) {
            const { href: currentHref } = window.location;
            const currentUrlPart = currentHref.split('#');
            if (parts[0] !== currentUrlPart[0]) {
                window.location.href = url;
            }
            // Feature not supported in iOS Safari 9.3
            // eslint-disable-next-line compat/compat
            const anchorTarget = document.getElementById(target);
            const scrollHeight = 200;
            window.scrollTo({
                top: anchorTarget.offsetTop - scrollHeight,
                behavior: 'smooth'
            });
            const href = `#${target}`;
            window.history.replaceState(undefined, undefined, href);
            // removing hypens to allow isActive flag on multi-word links
            const hashWithoutHyphens = decodeURIComponent(window?.location?.hash).replace(/-/g, ' ');
            currentLinkTextState(hashWithoutHyphens);
        }
        event.preventDefault();
    };
    const onMoreClick = (e) => {
        setIsMoreActive(!isMoreActive);
        collapseMegaMenu();
        if (!isMoreActive)
            handleClickNavigation(e, `Nav Link/More`);
    };
    const onNavClick = (text, hasChildren, clickEvent, isLink, showInTopNav) => {
        if (hasChildren && !isLink)
            clickEvent.preventDefault();
        onHover(text);
        if (clickEvent) {
            const eventData = {
                type: 'click',
                label: text,
                subject: showInTopNav ? 'header_menu' : 'sub_header_menu',
                items: [
                    {
                        content_title: text,
                        content_url: clickEvent?.target?.href?.toString()
                    }
                ],
                placement: 'header'
            };
            trackNavigationEvent(eventData);
        }
        setIsMoreActive(false);
    };
    const getHref = (hasChildren, hasHrefForLinks, url) => {
        if (hasHrefForLinks || (!hasHrefForLinks && !hasChildren))
            return url;
        return undefined;
    };
    const ariaExpandedValue = (hasChildren, isActive) => {
        if (hasChildren && isActive) {
            return true;
        }
        else if (hasChildren) {
            return false;
        }
        return undefined;
    };
    const onEnter = () => {
        if (!hasDefaultChevron) {
            applyChevronRules();
        }
    };
    const onLeave = () => {
        if (!hasDefaultChevron) {
            setDisplayRightChevronButton(false);
            setDisplayLeftChevronButton(false);
        }
    };
    const navListMore = () => (React.createElement(NavListItem, { key: "More", isActive: isMoreActive, shouldUseHoverState: true, isSlim: navHeight, enableHoverStyle: true, onClick: (e) => shouldOpenDrawerOnClick && onMoreClick(e), onKeyDown: ({ keyCode }) => (keyCode === 32 || keyCode === 13) && onMoreClick() },
        React.createElement(NavLink, { role: "link", hasChildren: true, href: null, "aria-expanded": isMoreActive, "data-testid": "ScrollingNavigationMoreLink", isActive: isMoreActive, shouldUseHoverState: true, as: "a", onMouseOver: () => !shouldOpenDrawerOnClick && onMoreClick() },
            React.createElement("span", { dangerouslySetInnerHTML: { __html: 'More' } })),
        showChevron ? React.createElement(StyledChevron, { isactive: String(isMoreActive) }) : ''));
    const renderNavList = (navLinks, type = 'all') => {
        const result = navLinks.map(({ hasChildren, hasHrefForLinks, isActive, isExternal, isLink, onClick, text, url, showOnlyInBreakpoints, showInTopNav }, index) => {
            const isChevronActive = isActive && isMenuDrawerOpen;
            let analyticsDataAttribute = {};
            if (shouldEnableBundleComponentAnalytics) {
                analyticsDataAttribute =
                    componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNamespace || primaryLink?.text, index);
            }
            return (React.createElement(NavListItem, { className: classnames(className, {
                    isDummyLinkClickable: hasHrefForLinks &&
                        "object" === 'undefined' &&
                        0
                }), ...analyticsDataAttribute, key: text, isActive: isActive, shouldUseHoverState: shouldUseHoverState, isSlim: navHeight, enableHoverStyle: shouldOpenDrawerOnClick, hasChildren: hasChildren, onClick: (clickEvent) => (shouldOpenDrawerOnClick ||
                    isPointerEventEnabledOnHover ||
                    !showInTopNav) &&
                    onNavClick(text, hasChildren, clickEvent, isLink, showInTopNav), onKeyDown: (e) => hasChildren && onKeyPress(e, text), showOnlyInBreakpoints: showOnlyInBreakpoints, showInTopNav: showInTopNav },
                React.createElement(NavLink, { tabIndex: "0", role: "link", hasChildren: hasChildren, href: getHref(hasChildren, hasHrefForLinks, url), "aria-expanded": ariaExpandedValue(hasChildren, isActive), "data-testid": "ScrollingNavigationLink", isActive: isActive, shouldUseHoverState: shouldUseHoverState, as: isExternal ? ExternalLink : 'a', onClick: onClick, onMouseOver: () => !shouldOpenDrawerOnClick && onNavClick(text), onKeyDown: (e) => hasChildren && onKeyPress(e, text) },
                    React.createElement("span", { dangerouslySetInnerHTML: { __html: text } })),
                showChevron && hasChildren && (React.createElement(StyledChevron, { isactive: String(isChevronActive) }))));
        });
        if (type === 'more') {
            result.push(navListMore());
        }
        return React.createElement(NavList, { disableRightSpace: isRightSpaceDisabled }, result);
    };
    const ImageComponent = (input) => {
        const { hasAnchorLinkList, hasChildren, hasHrefForLinks, url, isExternal, onClick, isActive, image } = input;
        return (React.createElement(React.Fragment, null, hasAnchorLinkList ? (React.createElement(ImageWrapper, { tabIndex: "-1", "data-testid": "ImageWrapper", hasAnchorLinkList: hasAnchorLinkList, hasHeaderBorder: hasHeaderBorder, href: getHref(hasChildren, hasHrefForLinks, url), as: isExternal ? ExternalLink : 'a', onClick: hasAnchorLinkList ? (e) => handleClick(url, e, onClick) : onClick, isActive: isActive },
            React.createElement(ResponsiveAsset, { ...image }))) : (React.createElement(NavListItemContentAnchor, { as: "div" },
            React.createElement(ImageWrapper, { "data-testid": "ImageWrapper", src: image.segmentedSources.lg[0].url })))));
    };
    const renderNavListWithControls = (navLinks, type = 'all') => {
        const result = navLinks.map(({ hasChildren, hasHrefForLinks, isActive, isExternal, isLink, onClick, text, url, image, rubric }, index) => {
            let analyticsDataAttribute = {};
            if (shouldEnableBundleComponentAnalytics) {
                analyticsDataAttribute =
                    componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNamespace || primaryLink?.text, index);
            }
            const handlerProps = !hasAnchorLinkList && {
                isClickable: true,
                onClick: () => {
                    window.location.href = url;
                }
            };
            return (React.createElement(NavListItem, { className: classnames(className, {
                    isDummyLinkClickable: hasHrefForLinks &&
                        "object" === 'undefined' &&
                        0,
                    'active-InPage-nav': hasAnchorLinkList &&
                        currentLinkText === `#${text.toLowerCase()}`
                }), ...analyticsDataAttribute, key: text, isActive: hasAnchorLinkList
                    ? currentLinkText === `#${text.toLowerCase()}`
                    : isActive, shouldUseHoverState: shouldUseHoverState, isSlim: navHeight, enableHoverStyle: shouldOpenDrawerOnClick, hasChildren: hasChildren, onClick: (clickEvent) => (shouldOpenDrawerOnClick || isPointerEventEnabledOnHover) &&
                    onNavClick(text, hasChildren, clickEvent, isLink), onKeyDown: (e) => hasChildren && onKeyPress(e, text), hasCarouselControls: hasCarouselControls, hasAnchorLinkList: hasAnchorLinkList },
                image && (React.createElement(NavListItemContent, { ...handlerProps, hasAnchorLinkList: hasAnchorLinkList },
                    React.createElement(ImageComponent, { hasAnchorLinkList: hasAnchorLinkList, hasChildren: hasChildren, hasHrefForLinks: hasHrefForLinks, url: url, isExternal: isExternal, onClick: onClick, isActive: isActive, image: image }),
                    React.createElement(VisualTextWrap, { hasAnchorLinkList: hasAnchorLinkList },
                        !hasAnchorLinkList && (React.createElement(LinkBannerRubric, { id: "rubric" }, rubric)),
                        React.createElement(NavLink, { tabIndex: "0", role: "link", hasChildren: hasChildren, hasAnchorLinkList: hasAnchorLinkList, href: getHref(hasChildren, hasHrefForLinks, url), "aria-expanded": ariaExpandedValue(hasChildren, isActive), "data-testid": "ScrollingNavigationLink", isActive: isActive, shouldUseHoverState: shouldUseHoverState, as: isExternal ? ExternalLink : 'a', onClick: hasAnchorLinkList
                                ? (e) => handleClick(url, e, onClick)
                                : onClick, onMouseOver: () => !shouldOpenDrawerOnClick && onNavClick(text), onKeyDown: hasAnchorLinkList
                                ? null
                                : (e) => hasChildren && onKeyPress(e, text), hasCarouselControls: hasCarouselControls },
                            React.createElement("span", { dangerouslySetInnerHTML: { __html: text } }))))),
                showChevron && hasChildren && (React.createElement(StyledChevron, { isactive: String(isActive) }))));
        });
        if (type === 'more') {
            result.push(navListMore());
        }
        return (React.createElement(React.Fragment, null, hasAnchorLinkList ? (React.createElement(NavList, { hasAnchorLinkList: hasAnchorLinkList, hasSmallViewportTitle: hasSmallViewportTitle, numberOfItemsInCarousel: navLinks.length, className: "anchor-nav-list" },
            React.createElement(Carousel, { carouselSettings: {
                    hideScrollbar: true,
                    showLabels: false,
                    shouldCenterAlignIfItemsAreLess: true,
                    shouldRightAlignFooterControls: isMobileViewport()
                }, headerProps: {
                    hasDividerBelowHeader: hasAnchorLinkListDivider,
                    hasTopBorder: false,
                    hasBottomBorder: false,
                    dangerousHed: hed,
                    dangerousDek: dek,
                    shouldDisplayDangerousDek,
                    contentAlign: 'center'
                }, trackingEventData: {
                    snowplowNavEventSubject: 'carousel_navigation_list'
                } }, result))) : (React.createElement(NavList, { hasAnchorLinkList: hasAnchorLinkList, hasCarouselControls: hasCarouselControls, numberOfItemsInCarousel: navLinks.length }, result))));
    };
    const navWrapper = (React.createElement(NavWrapper, { "data-testid": "ScrollingNavigationNavWrapper", hasBorders: hasBorders, hasBottomBorder: hasBottomBorder, hasGradient: invertedGradient, isCentered: isCentered, className: className, isMoreActive: isMoreActive, links: links },
        React.createElement(NavListWrapperForMore, { "aria-label": ariaLabel },
            primaryLink && (React.createElement(NavPrimaryItem, { "data-testid": "ScrollingNavigationPrimaryItem", hidePrimaryLink: hidePrimaryLink, hasDivider: hasDivider },
                primaryLink.image && !hasCarouselControls && (React.createElement(NavImage, { ...primaryLink.image, hasMargin: !!primaryLink.text })),
                primaryLink.text && (React.createElement(NavLink, { href: primaryLink.url, as: primaryLink.isExternal ? ExternalLink : 'a' }, primaryLink.text)))),
            renderNavList(links.slice(defaultNavLinkCount)))));
    const navListWithMore = (React.createElement(React.Fragment, null,
        React.createElement(NavListDefault, { showDefaultNavListOnLargerScreens: hideMoreLinkOnLargerScreens }, renderNavList(links)),
        React.createElement(ScrollingNavigationMoreLinkWrapper, { hideMoreLinkWrapperOnLargerScreens: hideMoreLinkOnLargerScreens }, renderNavList(links.slice(0, defaultNavLinkCount), 'more'))));
    if (hasCarouselControls) {
        return (React.createElement(React.Fragment, null,
            React.createElement(NavWrapper, { "data-testid": "ScrollingNavigation", hasBorders: hasBorders, hasBottomBorder: hasBottomBorder, hasGradient: invertedGradient, isCentered: isCentered, fadeWidth: fadeWidth, className: className, hed: hed, links: links },
                React.createElement(React.Fragment, null,
                    React.createElement(NavListWrapper, { "aria-label": ariaLabel, disableLeftSpace: isLeftSpaceDisabled, hasCarouselControls: hasCarouselControls, ref: navListRef, onMouseEnter: onEnter, onMouseLeave: onLeave, links: links },
                        hasCarouselControls && (React.createElement(React.Fragment, null,
                            displayLeftChevronButton && (React.createElement(LeftScrollButton, { onClick: handleLeftClick, onMouseLeave: onLeave, active: activeLeftButton },
                                React.createElement(StyledThinChevron, null))),
                            displayRightChevronButton && (React.createElement(RightScrollButton, { onClick: handleRightClick },
                                React.createElement(StyledThinChevron, null))))),
                        primaryLink && (React.createElement(NavPrimaryItem, { "data-testid": "ScrollingNavigationPrimaryItem", hidePrimaryLink: hidePrimaryLink, hasDivider: hasDivider },
                            primaryLink.image && (React.createElement(NavImage, { ...primaryLink.image, hasMargin: !!primaryLink.text })),
                            primaryLink.text && (React.createElement(NavLink, { href: primaryLink.url, as: primaryLink.isExternal ? ExternalLink : 'a', dangerouslySetInnerHTML: { __html: primaryLink.text } })))),
                        showMoreLink && links.length > defaultNavLinkCount
                            ? navListWithMore
                            : renderNavListWithControls(links)))),
            isMoreActive && navWrapper));
    }
    const displayNavList = showMoreLink && links.length > defaultNavLinkCount
        ? navListWithMore
        : (hasAnchorLinkList && renderNavListWithControls(links)) ||
            renderNavList(links);
    return (React.createElement(React.Fragment, null,
        React.createElement(NavWrapper, { "data-testid": "ScrollingNavigation", hasBorders: hasBorders, hasBottomBorder: hasBottomBorder, hasGradient: invertedGradient, isCentered: isCentered, fadeWidth: fadeWidth, hasAnchorLinkList: hasAnchorLinkList, className: className, links: links },
            React.createElement(React.Fragment, null,
                React.createElement(NavListWrapper, { "aria-label": ariaLabel, disableLeftSpace: isLeftSpaceDisabled, hasAnchorLinkList: hasAnchorLinkList, links: links, onClick: (e) => {
                        if (primaryLink?.text)
                            trackSnowplowEvent(e, links?.[0]?.showInTopNav ? 'header_menu' : 'sub_header_menu');
                    } },
                    primaryLink && (React.createElement(NavPrimaryItem, { "data-testid": "ScrollingNavigationPrimaryItem", hidePrimaryLink: hidePrimaryLink, hasDivider: hasDivider },
                        primaryLink.image && (React.createElement(NavImage, { ...primaryLink.image, hasMargin: !!primaryLink.text })),
                        primaryLink.text && (React.createElement(NavLink, { href: primaryLink.url, as: primaryLink.isExternal ? ExternalLink : 'a', dangerouslySetInnerHTML: { __html: primaryLink.text } })))),
                    displayNavList))),
        isMoreActive && navWrapper));
};
ScrollingNavigation.propTypes = {
    ariaLabel: PropTypes.string,
    className: PropTypes.string,
    collapseMegaMenu: PropTypes.func,
    defaultNavLinkCount: PropTypes.number,
    dek: PropTypes.string,
    fadeWidth: PropTypes.string,
    hasAnchorLinkList: PropTypes.bool,
    hasAnchorLinkListDivider: PropTypes.bool,
    hasBorders: PropTypes.bool,
    hasBottomBorder: PropTypes.bool,
    hasCarouselControls: PropTypes.bool,
    hasContentHeaderLogo: PropTypes.bool,
    hasDefaultChevron: PropTypes.bool,
    hasDivider: PropTypes.bool,
    hasGradient: PropTypes.bool,
    hasHeaderBorder: PropTypes.bool,
    hasSmallViewportTitle: PropTypes.bool,
    hed: PropTypes.string,
    hideMoreLinkOnLargerScreens: PropTypes.bool,
    hidePrimaryLink: PropTypes.oneOf(sizesAscending),
    isCentered: PropTypes.bool,
    isLeftSpaceDisabled: PropTypes.bool,
    isMenuDrawerOpen: PropTypes.bool,
    isPointerEventEnabledOnHover: PropTypes.bool,
    isRightSpaceDisabled: PropTypes.bool,
    isSlim: PropTypes.bool,
    links: PropTypes.array,
    onHover: PropTypes.func,
    primaryLink: PropTypes.object,
    shouldDisplayDangerousDek: PropTypes.bool,
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    shouldOpenDrawerOnClick: PropTypes.bool,
    shouldUseHoverState: PropTypes.bool,
    showChevron: PropTypes.bool,
    showMoreLink: PropTypes.bool,
    theme: PropTypes.oneOf(['standard', 'inverted']),
    trackingNamespace: PropTypes.string
};
ScrollingNavigation.displayName = 'ScrollingNavigation';
module.exports = ScrollingNavigation;
//# sourceMappingURL=ScrollingNavigation.js.map

/***/ }),

/***/ 14212:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(51437);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 79424:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.LeftScrollButton = exports.RightScrollButton = exports.LinkBannerRubric = exports.ImageWrapper = exports.VisualTextWrap = exports.NavListDefault = exports.ScrollingNavigationMoreLinkWrapper = exports.NavImage = exports.NavPrimaryItem = exports.NavListItemContentAnchor = exports.NavListItemContent = exports.NavListItem = exports.StyledChevron = exports.StyledThinChevron = exports.NavLink = exports.NavList = exports.NavListWrapperForMore = exports.NavListWrapper = exports.NavWrapper = void 0;
const styles_1 = __webpack_require__(72662);
const styles_2 = __webpack_require__(33500);
const { default: styled } = __webpack_require__(92168);
const { calculateSpacing, getColorStyles, getColorToken, getTypographyStyles, minScreen } = __webpack_require__(26865);
const { BaseLink } = __webpack_require__(76955);
const ResponsiveAsset = __webpack_require__(73275);
const { BREAKPOINTS } = __webpack_require__(96472);
const { cssVariablesGrid } = __webpack_require__(1123);
const { resolveMenuKey, isInverted } = __webpack_require__(70698);
const { ChevronDown } = __webpack_require__(98247);
const { ChevronRight: ThinChevron } = __webpack_require__(91470);
const webkitHideScrollbar = `&::-webkit-scrollbar {display: none;}`;
const commonNavListWrapperStyles = `
  display: flex;
  overflow-x: auto;
  line-height: 1;
`;
exports.NavWrapper = styled.div.withConfig({ displayName: 'NavWrapper' }) `
  ${({ hasAnchorLinkList }) => `display: ${hasAnchorLinkList ? 'block' : 'flex'};`}
  position: relative;
  width: 100%;
  ${({ isMoreActive, theme }) => isMoreActive &&
    `position: absolute;
    ${getColorStyles(theme, 'background-color', resolveMenuKey(theme, isInverted(theme)
        ? 'colors.consumption.lead.inverted.background'
        : 'colors.foundation.menu-bg.collapsed'))};
  left: 0px;`}

  ${({ isCentered }) => isCentered && 'justify-content: center;'}
  ${({ hasBorders, theme }) => hasBorders &&
    `
    border-width: 1px 0;
    border-style: solid;
    ${getColorStyles(theme, 'border-color', 'colors.foundation.menu.dividers')};
  `}
  ${({ hasBottomBorder, theme }) => hasBottomBorder &&
    `border-bottom: 1px solid;
    ${getColorStyles(theme, 'border-color', 'colors.foundation.menu.dividers')};
  `}

  ${({ hasGradient, fadeWidth, theme, hasAnchorLinkList }) => hasGradient &&
    `&::after {
      position: ${hasAnchorLinkList ? 'unset' : 'absolute'};
      top: 1px;
      right: 0;
      bottom: 1px;
      background: linear-gradient(90deg, rgba(${getColorToken(theme, resolveMenuKey(theme, 'colors.foundation.menu-bg.collapsed'), { rgbOnly: true })}, 0) 0%, rgba(${getColorToken(theme, resolveMenuKey(theme, 'colors.foundation.menu-bg.collapsed'), { rgbOnly: true })}, 1) 75%);
     
      width: ${calculateSpacing(3)} ;
      content: '';
      pointer-events: none;
      ${fadeWidth === 'lg' &&
        `
       width: ${calculateSpacing(9)} ;
       opacity: 0.9;
       @media (max-width: ${BREAKPOINTS.md}) {
         right: -1px;
       }
       `}
    }`}
`;
exports.NavListWrapper = styled.nav.withConfig({
    displayName: 'NavListWrapper'
}) `
  ${cssVariablesGrid()};
  ${({ hasAnchorLinkList }) => !hasAnchorLinkList &&
    `
      padding-left: var(--grid-margin);
      ${commonNavListWrapperStyles};
    `}

  ${({ hasCarouselControls, hasAnchorLinkList }) => hasCarouselControls &&
    !hasAnchorLinkList &&
    `
    padding-left: 0;
    height: 99px;
    && {
      background-color: ${getColorToken('colors.interactive.base.white')};
    }
  `}
  ${webkitHideScrollbar};
  ${({ disableLeftSpace }) => disableLeftSpace && `padding-left:0;`}
`;
exports.NavListWrapperForMore = styled.nav.withConfig({
    displayName: 'NavListWrapperForMore'
}) `
  ${cssVariablesGrid()};
  ${commonNavListWrapperStyles};
  padding-left: ${calculateSpacing(6)};
  ${webkitHideScrollbar};
`;
exports.NavList = styled.ul.withConfig({ displayName: 'NavList' }) `
  margin: 0;
  padding: 0;
  ${({ hasAnchorLinkList }) => !hasAnchorLinkList &&
    `display: inline-flex;
     padding-right: var(--grid-margin);
    `}
  ${({ hasCarouselControls, hasAnchorLinkList }) => !hasCarouselControls && !hasAnchorLinkList && `white-space: nowrap; `}
  ${({ hasCarouselControls, numberOfItemsInCarousel, hasAnchorLinkList }) => hasCarouselControls &&
    `
    display: grid;
    overflow-wrap: anywhere;
    overflow: auto;
    grid-template-columns: repeat(${numberOfItemsInCarousel}, calc(25% - 8px));
    grid-template-rows: minmax(99px, 1fr);
    width: 100vw;

    && {
      background-color: ${getColorToken('colors.discovery.body.white.background')};
    }

    ${webkitHideScrollbar};
    @media (max-width: ${BREAKPOINTS.lg}) {
      padding-left: ${calculateSpacing(3)};
      grid-template-columns: repeat(7,calc(33% - 10px));
    }
    ${!hasAnchorLinkList &&
        ` 
         padding-left: var(--grid-margin);
         grid-gap: 16px;
        @media (max-width: ${BREAKPOINTS.md}) {
           grid-template-columns: repeat(${numberOfItemsInCarousel},calc(50% - 8px));
          grid-gap: 23px;
       }
        @media (max-width: 455px) {
          grid-template-columns: repeat(${numberOfItemsInCarousel},calc(95% - 8px));
          grid-gap: 23px;
        }
     `}
  `}

  ${({ disableRightSpace = false }) => disableRightSpace && `padding-right: 0;`}
  ${({ hasAnchorLinkList, theme }) => hasAnchorLinkList &&
    `
    ${styles_2.SectionTitleHed} {
     ${getTypographyStyles(theme, 'typography.definitions.discovery.subhed-section-secondary')};
     text-align: center;
      ${getColorStyles(theme, 'color', isInverted(theme)
        ? 'colors.discovery.body.black.description'
        : 'colors.discovery.body.white.description')};
   }
   ${styles_1.CarouselList}{
    padding:0 ${calculateSpacing(6)} 0 ${calculateSpacing(6)};
     margin:0;
     @media (max-width: 428px) {
      padding:0 ${calculateSpacing(3)} 0 ${calculateSpacing(3)};
    }
    > li {
      margin: 0;
    }
   }
   ${styles_1.CarouselContainer}{
    margin: 0px;
    padding-top: ${calculateSpacing(3)};
    padding-bottom: ${calculateSpacing(2)};
   }
  ${styles_1.CarouselNavigationWrapper}{
    margin-right: ${calculateSpacing(6)};
    @media (max-width: ${BREAKPOINTS.md}){
      margin-right: ${calculateSpacing(3)}
    }
  }
  ${styles_1.FooterNavigationWrapper}{
    margin-right: ${calculateSpacing(6)};
     @media (max-width: ${BREAKPOINTS.md}){
      margin-right: ${calculateSpacing(3)}
    }
  }
    ${styles_1.CarouselFooterWrapper}{
      margin: 0;
    }
  `}
`;
exports.NavLink = styled(BaseLink)
    .withConfig({ displayName: 'NavLink' })
    .attrs(({ theme }) => ({
    colorSecondaryLinkToken: resolveMenuKey(theme, isInverted(theme)
        ? 'colors.consumption.lead.inverted.link'
        : 'colors.foundation.collapsed-menu.nav-link.hover'),
    colorStaticLinkToken: resolveMenuKey(theme, isInverted(theme)
        ? 'colors.consumption.lead.inverted.link'
        : 'colors.foundation.collapsed-menu.nav-link.default')
})) `
  ${({ hasCarouselControls }) => !hasCarouselControls &&
    `padding: ${calculateSpacing(1.5)} 0;
     word-break: normal;
     
    @media (min-width: ${BREAKPOINTS.lg}) {
      padding: ${calculateSpacing(2)} 0;
    }
  `}

  text-decoration: none; 
  line-height: 1;

  &:not([href]) {
    ${({ hasChildren }) => !hasChildren && `pointer-events: none`}
  }

  &:link,
  &:visited {
    ${({ theme, isActive }) => isActive &&
    `${getColorStyles(theme, 'color', resolveMenuKey(theme, isInverted(theme)
        ? 'colors.consumption.lead.inverted.link'
        : 'colors.foundation.collapsed-menu.nav-link.hover'))};`}
  }
  ${({ theme, isActive, shouldUseHoverState }) => isActive &&
    shouldUseHoverState &&
    `${getColorStyles(theme, 'color', resolveMenuKey(theme, isInverted(theme)
        ? 'colors.consumption.lead.inverted.link-hover'
        : 'colors.foundation.collapsed-menu.nav-link.hover'))};`}

  &:focus {
    ${({ theme, isActive }) => {
    if (isActive) {
        return `${getColorToken('color', resolveMenuKey(theme, isInverted(theme)
            ? 'colors.consumption.lead.inverted.link-hover'
            : 'colors.foundation.collapsed-menu.nav-link.hover'))};`;
    }
    return `${getColorToken('color', resolveMenuKey(theme, isInverted(theme)
        ? 'colors.consumption.lead.inverted.link'
        : 'colors.foundation.collapsed-menu.nav-link.default'))};`;
}}
  }

  &:hover, &:focus-visible {
    text-decoration: none;
    ${({ theme }) => `${getColorStyles(theme, 'color', resolveMenuKey(theme, 'colors.foundation.collapsed-menu.nav-link.hover'))};`}
  }
  ${({ hasCarouselControls }) => hasCarouselControls &&
    `
    word-break: break-word;
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.discovery.body.white.heading')};
    ${getTypographyStyles('typography.discovery.hed-core-secondary')};
  `}
`;
exports.NavLink.defaultProps = {
    linkStyle: 'navigation',
    typeToken: 'typography.definitions.foundation.link-primary'
};
exports.StyledThinChevron = styled(ThinChevron).withConfig({
    displayName: 'ScrollingNavigationThinChevron'
}) ``;
exports.StyledChevron = styled(ChevronDown).withConfig({
    displayName: 'ScrollingNavigationChevron'
}) `
  ${({ theme }) => getColorStyles(theme, 'fill', isInverted(theme)
    ? 'colors.consumption.lead.inverted.link'
    : 'colors.foundation.collapsed-menu.nav-link.default')};
  margin-left: ${calculateSpacing(0.5)};

  ${({ theme, isactive }) => isactive === 'true' &&
    `transform: rotate(180deg);
      ${getColorStyles(theme, 'fill', resolveMenuKey(theme, isInverted(theme)
        ? 'colors.consumption.lead.inverted.link-hover'
        : 'colors.foundation.collapsed-menu.nav-link.hover'))};`}
`;
exports.NavListItem = styled.li.withConfig({ displayName: 'NavListItem' }) `
  display: flex;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  transition: all 500ms ease;
  height: 48px;

  &.isDummyLinkClickable {
    cursor: pointer;

    a {
      pointer-events: none;
    }
  }
  ${({ hasAnchorLinkList, theme }) => hasAnchorLinkList &&
    `
    &:hover::before, &:focus-visible::before {
      ${getColorStyles(theme, 'background-color', isInverted(theme)
        ? 'colors.discovery.body.white.background'
        : 'colors.discovery.body.black.background')};
    }
    &&& {
       height : 100%;
    }`}

  ${({ showOnlyInBreakpoints }) => showOnlyInBreakpoints && `display: none;`}

  ${({ showOnlyInBreakpoints }) => showOnlyInBreakpoints &&
    showOnlyInBreakpoints.map((showOnlyInBreakpoint) => `@media (max-width: ${BREAKPOINTS[showOnlyInBreakpoint]}){ display: flex; }`)}

  ${({ hasCarouselControls }) => hasCarouselControls &&
    `
    :not(:last-child):after {
      position: absolute;
      left: 100%;
      height: 99px;
      background: black;
      width: 1px;
      top: 0;
      padding-left: 0;

      && {
          background: ${getColorToken('colors.discovery.body.white.divider')};
        }
    }   
   `}

  ${({ isSlim }) => !isSlim &&
    `
    @media (min-width: ${BREAKPOINTS.lg}) {
      height: ${calculateSpacing(9)};
    }
  `}

  ${({ theme, isActive }) => isActive &&
    `
    &::before {
      ${getColorStyles(theme, 'background-color', resolveMenuKey(theme, isInverted(theme)
        ? 'colors.consumption.lead.inverted.background'
        : 'colors.foundation.collapsed-menu.nav-link.hover'))};
    }
  `};

  ${({ theme, hasAnchorLinkList, isActive }) => hasAnchorLinkList &&
    isActive &&
    `
    &::before {
      ${getColorStyles(theme, 'background-color', isInverted(theme)
        ? 'colors.discovery.body.white.background'
        : 'colors.discovery.body.black.background')};
    }
    `}
  ${({ theme, isActive, enableHoverStyle }) => !isActive &&
    enableHoverStyle &&
    `
    &:hover::before, &:focus-visible::before {
      ${getColorStyles(theme, 'background-color', resolveMenuKey(theme, isInverted(theme)
        ? 'colors.consumption.lead.inverted.link-hover'
        : 'colors.foundation.collapsed-menu.nav-link.default'))};
    }
  `};

  ${({ hasCarouselControls }) => !hasCarouselControls &&
    `& + li {
      margin-left: ${calculateSpacing(2)};
    }`}

  &:first-child {
    margin-left: 0;
  }

  &::before {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 4px;
    content: '';
  }

  &:hover,
  &:focus-visible {
    outline: none;
    ${({ theme }) => ` 
    
    ${exports.StyledChevron} {
        ${getColorStyles(theme, 'fill', resolveMenuKey(theme, isInverted(theme)
    ? 'colors.consumption.lead.inverted.link-hover'
    : 'colors.foundation.collapsed-menu.nav-link.hover'))};
      }

    ${exports.NavLink} {
        ${getColorStyles(theme, 'color', resolveMenuKey(theme, isInverted(theme)
    ? 'colors.consumption.lead.inverted.link-hover'
    : 'colors.foundation.collapsed-menu.nav-link.hover'))}
      }
    `}
  }
`;
exports.NavListItemContent = styled.div.withConfig({
    displayName: 'NavListItemContent'
}) `
  ${({ hasAnchorLinkList }) => !hasAnchorLinkList &&
    `display: flex;
    flex-direction: inherit;
    align-items: center;`}

  ${({ isClickable }) => isClickable && `cursor: pointer;`}
`;
exports.NavListItemContentAnchor = styled.a.withConfig({
    displayName: 'NavListItemContentAnchor'
}) ``;
exports.NavPrimaryItem = styled.div.withConfig({
    displayName: 'NavPrimaryItem'
}) `
  display: inline-flex;
  position: relative;
  flex: 1 0 auto;
  align-items: center;
  margin-right: ${calculateSpacing(2)};

  ${({ hasDivider, theme }) => hasDivider &&
    `
    padding-right: ${calculateSpacing(2)};

    ::after {
      display: block;
      position: absolute;
      right: 0;
      ${getColorStyles(theme, 'background-color', isInverted(theme)
        ? 'colors.consumption.lead.inverted.divider'
        : 'colors.foundation.menu.dividers')};
      width: 1px;
      height: 32px;
      content: '';
    }
  `}

  ${({ hidePrimaryLink }) => hidePrimaryLink &&
    `
    @media (min-width: ${BREAKPOINTS[hidePrimaryLink]}) {
      display: none;
    }`}

  ${exports.NavLink} {
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    ${({ theme }) => getColorStyles(theme, 'color', resolveMenuKey(theme, 'colors.foundation.collapsed-menu.nav-link.hover'))};
  }
`;
exports.NavImage = styled(ResponsiveAsset).withConfig({
    displayName: 'NavImage'
}) `
  img {
    height: ${calculateSpacing(6)};
    ${({ hasMargin }) => hasMargin && `margin-right: ${calculateSpacing(2)}`};

    @media (min-width: ${BREAKPOINTS.md}) {
      height: ${calculateSpacing(7)};
    }
  }
`;
exports.ScrollingNavigationMoreLinkWrapper = styled.div.withConfig({
    displayName: 'ScrollingNavigationMoreLinkWrapper'
}) `
  ${minScreen(BREAKPOINTS.lg)} {
    display: block;
  }

  ${minScreen(BREAKPOINTS.xxl)} {
    display: none;
  }

  ${({ hideMoreLinkWrapperOnLargerScreens }) => hideMoreLinkWrapperOnLargerScreens &&
    `
      ${minScreen(BREAKPOINTS.xl)} {
        display: none;
      }
    `}
`;
exports.NavListDefault = styled.div.withConfig({
    displayName: 'NavListDefault'
}) `
  display: none;

  ${({ showDefaultNavListOnLargerScreens }) => showDefaultNavListOnLargerScreens &&
    `
      ${minScreen(BREAKPOINTS.xl)} {
        display: block;
      }
    `}

  ${minScreen(BREAKPOINTS.xxl)} {
    display: block;
  }
`;
exports.VisualTextWrap = styled.div.withConfig({
    displayName: 'VisualTextWrap'
}) `
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  ${({ hasAnchorLinkList }) => hasAnchorLinkList
    ? `
    ${getTypographyStyles('typography.definitions.globalEditorial.numerical-small')}
    width:117px;
    a {
      padding:${calculateSpacing(1)} 0;
     }
    padding-bottom: ${calculateSpacing(1)};
    `
    : ` width:181px;
    margin-right: ${calculateSpacing(2)};
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  /* stylelint-disable-next-line value-no-vendor-prefix */

  @media (max-width: ${BREAKPOINTS.sm}) {
    min-width: 200px;
  }`}
`;
exports.ImageWrapper = styled.img.withConfig({
    displayName: 'ImageWrapper'
}) `
  ${({ hasAnchorLinkList }) => hasAnchorLinkList
    ? `
   picture,
    img {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background: white;
    width: 117px;
  }
  `
    : `margin-right: ${calculateSpacing(2)};
  width: 24%;

  @media (max-width: ${BREAKPOINTS.lg}) {
    width: 24%;
  }
  @media (max-width: ${BREAKPOINTS.md}) {
    width: 23%;
  }`}

  ${({ hasHeaderBorder }) => hasHeaderBorder &&
    `
  picture,
  img {
  width: 200px;
}
  
  `}
  ${({ hasCarouselControls }) => !hasCarouselControls &&
    `
      object-fit: cover;
      height: 66px;
      && {
        width: 66px;
        aspect-ratio: 1;
      }
    `}
`;
exports.LinkBannerRubric = styled.div.withConfig({
    displayName: 'LinkBannerRubric'
}) `
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  margin-bottom: ${calculateSpacing(0.5)};
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: ${calculateSpacing(2)};
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  /* stylelint-disable-next-line value-no-vendor-prefix */
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.lead.standard.context-signature')};
  ${getTypographyStyles('typography.definitions.globalEditorial.context-primary')};

  && {
    text-transform: uppercase;
    text-decoration: none;
  }
`;
const BaseScrollButton = styled.button.withConfig({
    displayName: 'BaseScrollButton'
}) `
  position: absolute;
  z-index: 10000;
  border: 0.5px solid ${getColorToken('colors.discovery.body.white.border')};
  border-radius: 22px;
  background-color: ${getColorToken('colors.interactive.base.white')};
  cursor: pointer;
  padding: 5px;
  width: ${calculateSpacing(6)};
  height: ${calculateSpacing(6)};

  @media (max-width: ${BREAKPOINTS.md}) {
    display: none;
  }
`;
exports.RightScrollButton = styled(BaseScrollButton).withConfig({
    displayName: 'RightScrollButton'
}) `
  right: 0;
  transform: rotate(0deg);
  margin: 26px 8px 25px auto;
`;
exports.LeftScrollButton = styled(BaseScrollButton).withConfig({
    displayName: 'LeftScrollButton'
}) `
  left: 0;
  transform: rotate(180deg);
  margin: 26px auto 25px 8px;
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 37107:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(47524)/* ["default"] */ .A);
const Navigation = __webpack_require__(54790);
const SocialIcons = __webpack_require__(35676);
const AccountLinks = __webpack_require__(33795);
const { TrackComponentChannel } = __webpack_require__(78788);
const { NavDrawer } = __webpack_require__(12501);
const { SecondaryMenuGridWrapper, SecondaryMenuContent, SecondaryMenuNavigationPrimary, SecondaryMenuNavigationUtility, SecondaryMenuBottom, SecondaryMenuSearch, SecondaryMenuSearchLink, SecondaryMenuAccount, SecondaryMenuSignInLink, SecondaryMenuUtilityLinks, SecondaryMenuSecondaryLinks, SecondaryMenuNavigationDropdown, SecondaryMenuNavigationDropdownHeader, SecondaryMenuSocialIcons } = __webpack_require__(90098);
/**
 * SecondaryMenu Component.
 *
 * @param {object} props - React props
 * @param {object} props.accountProps - Required properties for the account drop down
 * @param {string} props.rootBrandName - Optional root brand name of the site used in the header for market switcher
 * @param {object} props.contentAlign - Optional text alignment in menu, default 'left'
 * @param {boolean} [props.hasInvertedSearchStyles] - Boolean to determine whether to show an alternate styling on the search link
 * @param {boolean} [props.hasExtraTopMargin] - Boolean to add extra top margin on mobile
 * @param {boolean} [props.hideSocialIcons] - Boolean to determine whether to show social icons
 * @param {object} props.internationalInfo - Optional object with array of `{ name, url }` objects and string of home location of that tenant.
 * @param {boolean} [props.isAccountsEnabled] - Boolean to determine whether to show account-related functionality
 * @param {SocialIcons.propTypes} props.socialIconsProps - An object containing a list of `{ network, url }` objects
 * @param {Array<object>} props.primaryLinks - A list of `{ url, text }` objects
 * @param {Array<object>} props.secondaryLinks - A list of `{ url, text }` objects
 * @param {string} props.secondaryMenuSignInLabel - Optional custom Sign in label
 * @param {string} props.secondaryMenuSignInLink - Optional custom Sign in link
 * @param {boolean} [props.showMarketSwitcher] - If `true` show market switcher in overlay when menu is opened
 * @param {boolean} [props.showSearch] - whether to show the search component
 * @param {boolean} [props.showUtilityLinksOnTop] - Optional prop to determine whether to display utilityLinks on top before primaryLinks
 * @param {string} [props.theme] - Optional, used to invert colors
 * @param {object} props.user - required user object
 * @param {boolean} props.user.isAuthenticated - represents if the user is currently authenticated
 * @param {Array<object>} props.utilityLinks - A list of `{ url, text }` objects
 *
 * @returns {ReactElement} <SecondaryMenu>
 */
const SecondaryMenu = (props) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SecondaryMenu'
        });
    }, []);
    const { accountProps: { accountLinks, signInLink = '/account/sign-in' } = {}, contentAlign = 'left', primaryLinks, isAccountsEnabled, internationalInfo, user, showSearch, hasExtraTopMargin = false, hideSocialIcons, rootBrandName, secondaryLinks, showMarketSwitcher, socialIconsProps, hasInvertedSearchStyles = false, secondaryMenuSignInLink, secondaryMenuSignInLabel, showUtilityLinksOnTop = false, theme = 'standard', shouldInvertSecondaryMenuTheme } = props;
    const utilityLinks = props.utilityLinks.filter((link) => !link.hideFromSecondaryMenu);
    const { formatMessage } = useIntl();
    const handleClickNavigation = (text) => {
        if ( true && window.dataLayer) {
            window.dataLayer.push({
                event: 'navigation-click',
                navigationType: 'menu',
                clickText: text
            });
        }
    };
    const isInverted = theme === 'inverted' && shouldInvertSecondaryMenuTheme;
    return (React.createElement(SecondaryMenuGridWrapper, { contentAlign: contentAlign, showUtilityLinksOnTop: showUtilityLinksOnTop, isInverted: isInverted },
        React.createElement(SecondaryMenuContent, { contentAlign: contentAlign },
            showUtilityLinksOnTop && utilityLinks.length > 0 && (React.createElement(SecondaryMenuNavigationUtility, { attributes: {
                    'aria-label': formatMessage(translations.secondaryMenuNavigationPrimaryAriaLabel)
                }, className: "drawer__navigation--primary", hasExtraTopMargin: hasExtraTopMargin, contentAlign: contentAlign, links: utilityLinks, isInverted: isInverted })),
            primaryLinks.length > 0 && (React.createElement(SecondaryMenuNavigationPrimary, { attributes: {
                    'aria-label': formatMessage(translations.secondaryMenuNavigationPrimaryAriaLabel)
                }, className: "drawer__navigation--primary", hasExtraTopMargin: hasExtraTopMargin, contentAlign: contentAlign, links: primaryLinks, isInverted: isInverted })),
            React.createElement(SecondaryMenuBottom, { "data-testid": "secondaryMenuBottomList", contentAlign: contentAlign },
                showSearch && (React.createElement(SecondaryMenuSearch, { contentAlign: contentAlign },
                    React.createElement(SecondaryMenuSearchLink, { onClick: () => handleClickNavigation(formatMessage(translations.secondaryMenuSearchLinkText)), href: "/search", hasInvertedSearchStyles: hasInvertedSearchStyles, isInverted: isInverted }, formatMessage(translations.secondaryMenuSearchLinkText)))),
                isAccountsEnabled && (React.createElement(SecondaryMenuAccount, { isInverted: isInverted, contentAlign: contentAlign, onClick: () => handleClickNavigation(formatMessage(translations.secondaryMenuSignInLinkText)) }, user &&
                    (user.isAuthenticated ? (React.createElement(AccountLinks, { accountLinks: accountLinks, className: "drawer-account__options" })) : (React.createElement(SecondaryMenuSignInLink, { href: secondaryMenuSignInLink || signInLink, rel: "nofollow", isInverted: isInverted }, secondaryMenuSignInLabel ||
                        formatMessage(translations.secondaryMenuSignInLinkText)))))),
                React.createElement(NavDrawer, { use: "SecondaryMenu" }),
                !showUtilityLinksOnTop && utilityLinks.length > 0 && (React.createElement(SecondaryMenuUtilityLinks, { attributes: {
                        'aria-label': formatMessage(translations.secondaryMenuUtilityLinksAriaLabel)
                    }, contentAlign: contentAlign, links: utilityLinks, isInverted: isInverted, utilityLinksOneItem: utilityLinks.length === 1 && secondaryLinks.length === 0 })),
                secondaryLinks.length > 0 && (React.createElement(SecondaryMenuSecondaryLinks, { attributes: {
                        'aria-label': formatMessage(translations.secondaryMenuSecondaryLinksAriaLabel)
                    }, className: "drawer__navigation--secondary", contentAlign: contentAlign, links: secondaryLinks, isInverted: isInverted }))),
            showMarketSwitcher &&
                internationalInfo?.internationalSites.length > 0 && (React.createElement(React.Fragment, null,
                React.createElement(SecondaryMenuNavigationDropdownHeader, { isInverted: isInverted }, formatMessage(translations.secondaryMenuNavDropdownHeader, {
                    rootBrandName: React.createElement("i", null, rootBrandName)
                })),
                React.createElement(SecondaryMenuNavigationDropdown, { id: "secondary-menu-overlay-dropdown", assistiveLabel: formatMessage(translations.secondaryMenuNavDropdownAssistiveLabel), label: internationalInfo.homeLocation.name, showLabel: true, isInverted: isInverted, direction: "up", options: internationalInfo.internationalSites }))),
            !hideSocialIcons && (React.createElement(SecondaryMenuSocialIcons, { ...socialIconsProps, className: "drawer__social-icons", isInverted: isInverted, showBorderTop: !showMarketSwitcher })))));
};
SecondaryMenu.propTypes = {
    accountProps: PropTypes.shape({
        accountLinks: PropTypes.array,
        redirectURL: PropTypes.string,
        signInLink: PropTypes.string
    }),
    contentAlign: PropTypes.oneOf(['left', 'center']),
    hasExtraTopMargin: PropTypes.bool,
    hasInvertedSearchStyles: PropTypes.bool,
    hideSocialIcons: PropTypes.bool,
    internationalInfo: PropTypes.object,
    isAccountsEnabled: PropTypes.bool,
    primaryLinks: Navigation.propTypes.links,
    rootBrandName: PropTypes.string,
    secondaryLinks: Navigation.propTypes.links,
    secondaryMenuSignInLabel: PropTypes.string,
    secondaryMenuSignInLink: PropTypes.string,
    shouldInvertSecondaryMenuTheme: PropTypes.bool,
    showMarketSwitcher: PropTypes.bool,
    showSearch: PropTypes.bool,
    showUtilityLinksOnTop: PropTypes.bool,
    socialIconsProps: PropTypes.shape(SocialIcons.propTypes).isRequired,
    theme: PropTypes.oneOf(['standard', 'inverted']),
    user: PropTypes.shape({
        isAuthenticated: PropTypes.bool.isRequired
    }),
    utilityLinks: Navigation.propTypes.links
};
SecondaryMenu.displayName = 'SecondaryMenu';
module.exports = SecondaryMenu;
//# sourceMappingURL=SecondaryMenu.js.map

/***/ }),

/***/ 82814:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const SecondaryMenu = __webpack_require__(37107);
module.exports = asConfiguredComponent(SecondaryMenu, 'SecondaryMenu');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 47524:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    secondaryMenuSearchLinkText: {
        id: 'SecondaryMenu.SearchLinkText',
        defaultMessage: 'Search',
        description: 'SecondaryMenu component Search link text'
    },
    secondaryMenuSignInLinkText: {
        id: 'SecondaryMenu.SignInLinkText',
        defaultMessage: 'Sign in',
        description: 'SecondaryMenu component Sign in link text'
    },
    secondaryMenuNavigationPrimaryAriaLabel: {
        id: 'SecondaryMenu.NavigationPrimaryAriaLabel',
        defaultMessage: 'Primary',
        description: 'SecondaryMenu component Navigation links aria label'
    },
    secondaryMenuUtilityLinksAriaLabel: {
        id: 'SecondaryMenu.UtilityLinksAriaLabel',
        defaultMessage: 'Utility',
        description: 'SecondaryMenu component Utility links aria label'
    },
    secondaryMenuSecondaryLinksAriaLabel: {
        id: 'SecondaryMenu.SecondaryLinksAriaLabel',
        defaultMessage: 'Secondary',
        description: 'SecondaryMenu component Secondary links aria label'
    },
    secondaryMenuNavDropdownHeader: {
        id: 'SecondaryMenu.NavDropdownHeader',
        defaultMessage: `Explore {rootBrandName} across the globe`,
        description: 'SecondaryMenu component Navigation dropdown header text'
    },
    secondaryMenuNavDropdownAssistiveLabel: {
        id: 'SecondaryMenu.NavDropdownAssistiveLabel',
        defaultMessage: 'Select international site',
        description: 'ARIA description for secondary menu navigation dropdown'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 48961:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const ToggleChip = __webpack_require__(15343);
const ToggleChipList = __webpack_require__(99244);
const { googleAnalytics } = __webpack_require__(90090);
const { TrackComponentChannel } = __webpack_require__(78788);
const SectionHeaderLede = __webpack_require__(57849);
const { SectionHeaderWrapper, SectionHeaderContainer, SectionHeaderHed, SectionHeaderSubhed, SectionHeaderSubhedClamp, SectionHeaderGrid, SectionHeaderHedDivider, ChipWrapper } = __webpack_require__(57221);
const subHedPositionOptions = {
    ABOVE: 'above',
    BELOW: 'below'
};
/**
 * SectionHeader component
 *
 * @param {object} props - React props
 * @param {string} [props.chipLengthToCenterAlignInMobile] - Prop to decide whether chip should be center aligned in mobile
 * @param {string} [props.hasNoHorizontalScroll] - Optional prop for disabling the horizontal scroll
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string}  [props.contentAlign] - Alignment of the content 'center' or 'left'
 * @param {string}  [props.customTitle] - Optional custom tile to be used
 * @param {string} props.dangerousHed - Section hed
 * @param {string} [props.fullPageTheme] - Optional prop to apply an inverted (dark) theme to the entire page
 * @param {number} [props.dividerLength] - Optional prop to apply the divider length for the desktop
 * @param {boolean} [props.hasInvertedTheme] - Optional to change background of Section Header for inverted theme
 * @param {boolean} [props.hasInvertedDivider] - Optional to change background of Section Header divider with inverted theme
 * @param {boolean} [props.hasMinimalVerticalPadding] - Optional minimal padding option on container div.section-header__container
 * @param {boolean} [props.hasSectionContainerWidth] - Optional prop to section header grid width
 * @param {Array}  [props.headerChipLinks] - Optional prop to display chip links on section header component
 * @param {string} [props.hedTag] - Optional tag for section hed
 * @param {boolean} [props.hidePaddingBottom] - Optional prop to hide padding bottom of SectionHeaderContainer
 * @param {number} [props.mobileDividerLength] - Optional prop to apply the divider length for the desktop
 * @param {string} [props.subHed] - Optional Section subHed
 * @param {string} [props.subHedMaxLines] - Optional Section subHed Maximum number of lines
 * @param {string} [props.subHedPosition] - Optional positioning of subhed, either above or below, defaults to below
 * @param {object} [props.lede] - Optional lede
 * @param {object} [props.ledeLogoBaseUrl] - Optional lede logo base url
 * @param {object} [props.shouldCenterAlignChipsInMobile] - Optional to center align chips in center in mobile screens
 * @param {object} [props.shouldEnableLede] - Optional enabling lede image if it is present
 * @param {boolean} [props.shouldEnableSubNavigation] - Optional prop to enable display of sub-navigation
 * @param {object} [props.shouldUseCustomTitle] - Optional enabling custom title if this flag is true
 * @param {object} [props.shouldUseLedeAsLogo] - Optional enabling lede image if it is present
 * @param {boolean} [props.showDivider] - Optional enabling divider span between hed and subhed
 * @param {boolean} [props.shouldInvertDangerousDek] - optional to enable the inverted dangerousDek.
 * @param {boolean} [props.shouldHideBottomSpacing] - Optional prop to hide bottom spacing
 * @param {boolean} [props.shouldHideTopSpacing] - Optional prop to hide top spacing
 * @param {boolean} [props.shouldIncreaseBottomSpacingDivider] - Optional prop to increase bottom spacing for divider
 * @param {boolean} [props.showSmallerSubHed] - Optional show subhed in smaller font
 * @param {boolean} [props.showSubChannelHed] - Optional show subhed in smaller font
 * @param {boolean} [props.showTwolineSubHed] - Optional show showTwolineSubHed in medium font
 * @param {Array} [props.toggleChipsWithLink] - Optional links to be appeared as toggle chips
 * @param {string} [props.toggleChipRole] - Optional value to set toggle chips role
 * @param {object} [props.variations] - Optional variation properties used in rendering the component
 *  @param {object} [props.type] - Optional type of section header like header, footer, etc.
 * @param {boolean} [props.shouldUseCollectionHeaderFont] - Optional flag for collection header font token
 * @param {boolean} [props.hasConsistentSpacing] - defines whether the consistent spacing is needed or not
 *
 * @returns {ReactElement} <div>
 */
const SectionHeader = ({ chipLengthToCenterAlignInMobile, hasNoHorizontalScroll = true, hidePaddingBottom = false, className, contentAlign = 'center', customTitle, dangerousHed, fullPageTheme = 'standard', dividerLength = 12.5, hasConsistentSpacing = false, hasInvertedDivider = false, hasInvertedTheme = false, hasMinimalVerticalPadding = false, hasSectionContainerWidth, hedTag = 'h1', subHed, subHedMaxLines = 0, subHedPosition = subHedPositionOptions.BELOW, lede, ledeLogoBaseUrl = '', mobileDividerLength = 12.5, shouldCenterAlignChipsInMobile = false, shouldEnableLede = false, shouldEnableSubNavigation = true, shouldHideBottomSpacing = false, shouldHideTopSpacing = false, shouldInvertDangerousDek = false, shouldIncreaseBottomSpacingDivider = false, shouldUseCollectionHeaderFont, shouldUseLedeAsLogo = false, shouldUseCustomTitle = false, showDivider = false, showSmallerSubHed = false, showSubChannelHed = false, showTwolineSubHed, variations = {
    showSubHedToggleChips: true
}, toggleChipsWithLink, toggleChipRole = 'switch', type }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SectionHeader'
        });
    }, []);
    const { showSubHedToggleChips } = variations;
    const shouldClamp = subHedMaxLines > 0;
    const shouldCenterChipsInMobile = toggleChipsWithLink?.length === chipLengthToCenterAlignInMobile;
    let subHedChunk = subHed ? (React.createElement(SectionHeaderSubhed, { hasSectionContainerWidth: hasSectionContainerWidth, className: "section-header__subhed", "data-testid": "SectionHeaderSubhed", dangerouslySetInnerHTML: { __html: subHed }, contentAlign: contentAlign, showSmallerSubHed: showSmallerSubHed, showtwolineSubHed: showTwolineSubHed, fullPageTheme: fullPageTheme, shouldInvertDangerousDek: shouldInvertDangerousDek })) : null;
    if (subHedChunk && shouldClamp) {
        subHedChunk = (React.createElement(SectionHeaderSubhedClamp, { lines: subHedMaxLines, linesInExtraLargeDesktop: subHedMaxLines, isCollapsible: true }, subHedChunk));
    }
    const subHedValue = () => {
        if (showSubChannelHed)
            return dangerousHed;
        else if (shouldUseCustomTitle && customTitle)
            return customTitle;
        return dangerousHed;
    };
    const setGAEvent = (label, clicktype) => {
        googleAnalytics.emitUniqueGoogleTrackingEvent('toggle-click', {
            clickText: label,
            clickType: clicktype
        });
    };
    const [currentUrlPth, setCurrentUrlPath] = React.useState(toggleChipsWithLink);
    React.useEffect(() => {
        if (true) {
            const currentUrlPath = window?.location?.pathname;
            setCurrentUrlPath(currentUrlPath);
        }
    }, [toggleChipsWithLink]);
    return (React.createElement(SectionHeaderWrapper, { className: classnames('section-header', className, {
            'inverted-section-header': hasInvertedTheme
        }), shouldEnableLede: shouldEnableLede, fullPageTheme: fullPageTheme, shouldHideTopSpacing: shouldHideTopSpacing, shouldHideBottomSpacing: shouldHideBottomSpacing, hasConsistentSpacing: hasConsistentSpacing, "data-testid": "SectionHeader" },
        shouldEnableLede && (React.createElement(SectionHeaderLede, { lede: lede, ledeLogoBaseUrl: ledeLogoBaseUrl, shouldUseLedeAsLogo: shouldUseLedeAsLogo })),
        (!shouldUseLedeAsLogo || !lede) && (React.createElement(SectionHeaderGrid, { contentAlign: contentAlign, hasSectionContainerWidth: hasSectionContainerWidth },
            React.createElement(SectionHeaderContainer, { className: classnames('section-header__container', hasMinimalVerticalPadding &&
                    'section-header__container--minimal-padding'), contentAlign: contentAlign, hasSectionContainerWidth: hasSectionContainerWidth, shouldHideTopSpacing: shouldHideTopSpacing, hidePaddingBottom: hidePaddingBottom, hasConsistentSpacing: hasConsistentSpacing },
                subHedPosition === subHedPositionOptions.ABOVE && subHedChunk,
                subHedPosition === subHedPositionOptions.ABOVE && showDivider && (React.createElement(SectionHeaderHedDivider, { contentAlign: contentAlign, subHedPosition: subHedPosition, dividerLength: dividerLength, mobileDividerLength: mobileDividerLength, hasInvertedDivider: hasInvertedDivider, shouldIncreaseBottomSpacingDivider: shouldIncreaseBottomSpacingDivider, shouldHideTopSpacing: shouldHideTopSpacing })),
                React.createElement(SectionHeaderHed, { className: "section-header__hed", "data-testid": "SectionHeaderHed", dangerouslySetInnerHTML: {
                        __html: subHedValue()
                    }, fullPageTheme: fullPageTheme, as: hedTag, showSubChannelHed: showSubChannelHed, shouldUseCollectionHeaderFont: shouldUseCollectionHeaderFont }),
                subHedPosition === subHedPositionOptions.BELOW && showDivider && (React.createElement(SectionHeaderHedDivider, { contentAlign: contentAlign, subHedPosition: subHedPosition, dividerLength: dividerLength, mobileDividerLength: mobileDividerLength, hasInvertedDivider: hasInvertedDivider, shouldIncreaseBottomSpacingDivider: shouldIncreaseBottomSpacingDivider, shouldHideTopSpacing: shouldHideTopSpacing })),
                subHedPosition === subHedPositionOptions.BELOW && subHedChunk,
                shouldEnableSubNavigation &&
                    showSubHedToggleChips &&
                    toggleChipsWithLink &&
                    toggleChipsWithLink.length > 0 && (React.createElement(ChipWrapper, { hasSectionContainerWidth: hasSectionContainerWidth, shouldCenterAlignChipsInMobile: shouldCenterChipsInMobile && shouldCenterAlignChipsInMobile, hasConsistentSpacing: hasConsistentSpacing },
                    React.createElement(ToggleChipList, { contentAlign: "center", layout: "nowrap", hasNoHorizontalScroll: hasNoHorizontalScroll }, toggleChipsWithLink.map((chips) => {
                        const toggleAnalyticsDataAttribute = {};
                        return (React.createElement(ToggleChip, { analyticsDataAttribute: toggleAnalyticsDataAttribute, key: chips.label, isChecked: chips.url === currentUrlPth, onChange: () => setGAEvent(chips.label, type), redirectUrl: chips.url, role: toggleChipRole }, chips.label));
                    })))))))));
};
SectionHeader.propTypes = {
    chipLengthToCenterAlignInMobile: PropTypes.number,
    className: PropTypes.string,
    contentAlign: PropTypes.oneOf(['center', 'left']),
    customTitle: PropTypes.string,
    dangerousHed: PropTypes.string.isRequired,
    dividerLength: PropTypes.number,
    fullPageTheme: PropTypes.oneOf(['inverted', 'standard']),
    hasConsistentSpacing: PropTypes.bool,
    hasInvertedDivider: PropTypes.bool,
    hasInvertedTheme: PropTypes.bool,
    hasMinimalVerticalPadding: PropTypes.bool,
    hasNoHorizontalScroll: PropTypes.bool,
    hasSectionContainerWidth: PropTypes.bool,
    hedTag: PropTypes.string,
    hidePaddingBottom: PropTypes.bool,
    lede: PropTypes.object,
    ledeLogoBaseUrl: PropTypes.string,
    mobileDividerLength: PropTypes.number,
    shouldCenterAlignChipsInMobile: PropTypes.bool,
    shouldEnableLede: PropTypes.bool,
    shouldEnableSubNavigation: PropTypes.bool,
    shouldHideBottomSpacing: PropTypes.bool,
    shouldHideTopSpacing: PropTypes.bool,
    shouldIncreaseBottomSpacingDivider: PropTypes.bool,
    shouldInvertDangerousDek: PropTypes.bool,
    shouldUseCollectionHeaderFont: PropTypes.bool,
    shouldUseCustomTitle: PropTypes.bool,
    shouldUseLedeAsLogo: PropTypes.bool,
    showDivider: PropTypes.bool,
    showSmallerSubHed: PropTypes.bool,
    showSubChannelHed: PropTypes.bool,
    showTwolineSubHed: PropTypes.bool,
    subHed: PropTypes.string,
    subHedMaxLines: PropTypes.number,
    subHedPosition: PropTypes.oneOf([
        subHedPositionOptions.BELOW,
        subHedPositionOptions.ABOVE
    ]),
    toggleChipRole: PropTypes.string,
    toggleChipsWithLink: PropTypes.array,
    type: PropTypes.string,
    variations: PropTypes.shape({
        showSubHedToggleChips: PropTypes.bool
    })
};
module.exports = SectionHeader;
//# sourceMappingURL=SectionHeader.js.map

/***/ }),

/***/ 57849:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { SectionHeaderLedeSection } = __webpack_require__(57221);
/*
 *
 * SectionHeaderLede subcomponent
 *
 * @param {object} [props.lede] - Optional lede
 * @param {object} [props.ledeLogoBaseUrl] - Optional lede logo base url
 * @param {object} [props.shouldUseLedeAsLogo] - Optional enabling lede image if it is present
 * */
const SectionHeaderLede = ({ lede, ledeLogoBaseUrl = '', shouldUseLedeAsLogo }) => {
    if (!lede)
        return null;
    const ledeContent = (React.createElement(SectionHeaderLedeSection, { lede: lede, captionWidth: "standard", shouldUseLedeAsLogo: shouldUseLedeAsLogo, hideLedeCaption: true }));
    return ledeLogoBaseUrl ? (React.createElement("a", { href: ledeLogoBaseUrl, "aria-label": "Lede Logo" }, ledeContent)) : (ledeContent);
};
SectionHeaderLede.propTypes = {
    lede: PropTypes.object,
    ledeLogoBaseUrl: PropTypes.string,
    shouldUseLedeAsLogo: PropTypes.bool
};
module.exports = SectionHeaderLede;
//# sourceMappingURL=SectionHeaderLede.js.map

/***/ }),

/***/ 95291:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const { asThemedComponent } = __webpack_require__(20223);
const VariedSecionHeader = __webpack_require__(19837);
module.exports = asThemedComponent(asConfiguredComponent(VariedSecionHeader, 'SectionHeader'));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 57221:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const Clamp = __webpack_require__(48286);
const { GridItem } = __webpack_require__(40653);
const Grid = __webpack_require__(86659);
const { BREAKPOINTS } = __webpack_require__(96472);
const { BaseText } = __webpack_require__(76955);
const { ListWrapper } = __webpack_require__(14952);
const LeadAsset = __webpack_require__(92027);
const { calculateSpacing, getColorStyles, getColorToken, getTypographyStyles } = __webpack_require__(26865);
const { getSectionSpacingStyling } = __webpack_require__(16800);
const { applyGridSpacing } = __webpack_require__(1123);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const { ContentHeaderLeadContentFullWidth, ContentHeaderResponsiveAsset } = __webpack_require__(5239);
const SectionHeaderWrapper = styled.header.withConfig({
    displayName: 'SectionHeaderWrapper'
}) `
  && {
    ${({ shouldHideTopSpacing }) => shouldHideTopSpacing &&
    `
        margin-top: 0px;
    `}
    ${({ shouldHideBottomSpacing }) => shouldHideBottomSpacing &&
    `
        margin-bottom: 0px;
    `}
  }

  ${applyGridSpacing('padding')}

  ${({ hasConsistentSpacing, theme }) => {
    return hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px'
        ? null
        : `padding-bottom: ${calculateSpacing(5)};`;
}}
  display: grid;

  ${({ shouldEnableLede }) => shouldEnableLede &&
    `
      grid-template-columns: 1fr;
      ${ContentHeaderLeadContentFullWidth} {
        grid-column: inherit;
      }
    `}

  ${({ fullPageTheme, theme }) => {
    const colorTokenMap = {
        inverted: 'colors.consumption.lead.inverted.background',
        light: 'colors.background.light',
        default: 'colors.discovery.lead.primary.background'
    };
    const colorToken = colorTokenMap[fullPageTheme] || colorTokenMap.default;
    return `${getColorStyles(theme, 'background-color', colorToken)}`;
}}

      ${({ hasSectionColor, theme }) => hasSectionColor &&
    `${getColorStyles(theme, 'background', 'colors.background.light')}`}
  
  [class*='GridWrapper-'] [class*='SectionHeaderSubhedClamp-'] {
    ${({ hasConsistentSpacing, theme }) => {
    return hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px'
        ? `
        padding-bottom: ${getSectionSpacingStyling(theme, 'gap-md')};
        @media (max-width: ${BREAKPOINTS.md}) {
          padding-bottom: ${getSectionSpacingStyling(theme, 'gap-sm')};
        }
      `
        : null;
}}
  }

  [class*='GridWrapper-'] .section-header__subhed {
    ${({ hasConsistentSpacing, theme }) => {
    return hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px'
        ? `
        padding-top: 0px;
      `
        : null;
}}
  }
`;
const SectionHeaderContainer = styled.div.withConfig({
    displayName: 'SectionHeaderContainer'
}) `
  ${({ hasSectionContainerWidth }) => !hasSectionContainerWidth && ` max-width: 850px;`}

  ${({ hasConsistentSpacing, theme }) => {
    if (hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
        return `padding: ${calculateSpacing(0)} 0;`;
    }
    return `padding: ${calculateSpacing(4)} 0;`;
}}

  ${({ hasConsistentSpacing, theme }) => {
    if (hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
        return `
        display: flex;
        flex-flow: column;
        gap: 24px;
      `;
    }
    return null;
}}
  
  ${({ hasSectionColor }) => hasSectionColor &&
    `padding: ${calculateSpacing(5)} 0 ${calculateSpacing(4)};`}
  text-align: ${({ contentAlign }) => contentAlign};

  &.section-header__container--minimal-padding {
    ${({ hasConsistentSpacing, theme }) => {
    if (hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
        return `padding: ${calculateSpacing(0)} 0;`;
    }
    return `padding: ${calculateSpacing(5)} 0;`;
}}
  }

  @media (min-width: ${BREAKPOINTS.md}) {
    ${({ hasConsistentSpacing, theme }) => {
    if (hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
        return `padding: ${calculateSpacing(0)} 0;`;
    }
    return `padding: ${calculateSpacing(5)} 0;`;
}}

    ${({ hasSectionColor }) => hasSectionColor &&
    `padding: ${calculateSpacing(5)} 0 ${calculateSpacing(4)};`}
  }

  && {
    ${({ shouldHideTopSpacing }) => shouldHideTopSpacing &&
    `
          padding-top: 0px;
      `}
    ${({ hidePaddingBottom }) => hidePaddingBottom &&
    `
          padding-bottom: 0px;
      `}
  }
`;
const SectionHeaderLedeSection = styled(LeadAsset).withConfig({
    displayName: 'SectionHeaderLedeSection'
}) `
  grid-column: 1;
  grid-row: 1;
  ${({ theme }) => getColorStyles(theme, 'background', 'colors.background.white')};

  ${({ shouldUseLedeAsLogo }) => shouldUseLedeAsLogo &&
    `
      .lead-asset__content {
        padding: 32px 0;
      }
    `}

  .lead-asset__content__photo,
  ${ResponsiveImageContainer} {
    max-height: none;
  }

  ${ContentHeaderResponsiveAsset},
  ${ResponsiveImageContainer} {
    ${({ shouldUseLedeAsLogo }) => shouldUseLedeAsLogo
    ? `
    width: 21em;
    text-align: center;
    margin: 0 auto;

    @media (max-width: ${BREAKPOINTS.md}) {
      width: 16em;
    }
    `
    : `
    width: 100%;
    `}
  }
`;
const SectionHeaderHedDivider = styled.span.withConfig({
    displayName: 'SectionHeaderHedDivider'
}) `
  @media (min-width: ${BREAKPOINTS.md}) {
    margin-top: ${calculateSpacing(4)};
    margin-bottom: ${calculateSpacing(2)};
  }
  display: block;
  grid-column: 1 / -1;
  margin-top: ${calculateSpacing(2)};
  margin-right: auto;
  margin-bottom: ${({ subHedPosition }) => subHedPosition === 'above' ? calculateSpacing(2) : 0};
  margin-left: ${({ contentAlign }) => contentAlign === 'center' ? 'auto' : 0};
  border-bottom-width: ${calculateSpacing(0.25, 'px')};
  border-bottom-style: solid;
  border-bottom-color: ${getColorToken('colors.consumption.lead.standard.accent')};
  width: ${calculateSpacing(12.5, 'px')};

  && {
    ${({ hasInvertedDivider, dividerLength, mobileDividerLength }) => hasInvertedDivider &&
    `border-bottom-width: ${calculateSpacing(1.5, 'px')};
       border-bottom-style: solid;
       border-bottom-color: white;
       
       @media (min-width: ${BREAKPOINTS.md}) {
          width: ${calculateSpacing(dividerLength, 'px')};
        }

       @media (max-width: ${BREAKPOINTS.md}) {
          width: ${calculateSpacing(mobileDividerLength, 'px')};
        }`}
    ${({ shouldHideTopSpacing }) => shouldHideTopSpacing &&
    `
          margin-top: 0px;
      `}

    ${({ shouldIncreaseBottomSpacingDivider }) => shouldIncreaseBottomSpacingDivider &&
    `
          margin-bottom: 48px;
      `}
  }
`;
const SectionHeaderHed = styled(BaseText).withConfig({
    displayName: 'SectionHeaderHed'
}) `
  ${({ fullPageTheme, theme }) => fullPageTheme === 'inverted'
    ? getColorStyles(theme, 'color', 'colors.consumption.lead.inverted.heading')
    : getColorStyles(theme, 'color', 'colors.discovery.lead.primary.hed')};

  ${({ hasSectionColor, theme, showSubChannelHed }) => {
    if (showSubChannelHed) {
        return `
        ${getTypographyStyles(theme, 'typography.definitions.discovery.subhed-section-secondary')}
      `;
    }
    else if (hasSectionColor) {
        return `
        ${getTypographyStyles(theme, 'typography.definitions.discovery.subhed-section-primary')}
      `;
    }
    return ``;
}}
  ${({ shouldUseCollectionHeaderFont, theme }) => shouldUseCollectionHeaderFont &&
    `
  ${getTypographyStyles(theme, 'typography.definitions.discovery.page-hed-subsection')}
  `}
`;
SectionHeaderHed.defaultProps = {
    as: 'h1',
    bottomSpacing: 0,
    topSpacing: 0,
    typeIdentity: 'typography.definitions.discovery.page-hed-section'
};
const SectionHeaderSubhed = styled(BaseText).withConfig({
    displayName: 'SectionHeaderSubhed'
}) `
  padding: ${({ contentAlign }) => contentAlign === 'center'
    ? `${calculateSpacing(2)}  ${calculateSpacing(3)} 0 ${calculateSpacing(3)}`
    : `${calculateSpacing(2)}  ${calculateSpacing(3)} 0 0`};
  ${({ hasSectionColor, showSmallerSubHed }) => (hasSectionColor || showSmallerSubHed) &&
    getTypographyStyles('typography.definitions.consumptionEditorial.description-core')}
  ${({ showtwolineSubHed }) => showtwolineSubHed &&
    getTypographyStyles('typography.definitions.consumptionEditorial.display-medium')}
  @media (max-width: ${BREAKPOINTS.md}) {
    ${({ hasSectionContainerWidth }) => hasSectionContainerWidth &&
    `
     margin-left:${calculateSpacing(3)};
     margin-right:${calculateSpacing(3)};
     `}
  }
  ${({ fullPageTheme, shouldInvertDangerousDek, theme }) => fullPageTheme === 'inverted' && shouldInvertDangerousDek
    ? `${getColorStyles(theme, 'color', 'colors.consumption.lead.inverted.description')}`
    : ''}
`;
SectionHeaderSubhed.defaultProps = {
    colorToken: 'colors.discovery.lead.primary.description',
    typeIdentity: 'typography.definitions.discovery.description-page'
};
const SectionHeaderSubhedClamp = styled(Clamp).withConfig({
    displayName: 'SectionHeaderSubhedClamp'
}) ``;
const SectionHeaderGrid = styled(Grid.WithMargins).withConfig({
    displayName: 'SectionHeaderGrid'
}) `
  ${GridItem} {
    grid-column-end: -1;
    grid-column-start: 1;
    justify-self: ${({ hasSectionContainerWidth, contentAlign }) => hasSectionContainerWidth ? `auto` : `${contentAlign}`};
  }
  @media (max-width: ${BREAKPOINTS.md}) {
    ${({ hasSectionContainerWidth }) => hasSectionContainerWidth &&
    `&.grid {
    --grid-margin: 0;
  }`}
  }
`;
const ChipWrapper = styled.div.withConfig({ displayName: 'ChipWrapper' }) `
  ${({ hasConsistentSpacing, theme }) => {
    if (hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px')
        return `margin: 0px;`;
    return `margin: ${calculateSpacing(2)} 0 0 0;`;
}}

  .list-item-wrapper:first-child {
    margin-left: initial;
  }

  .list-item-wrapper:last-child {
    margin-right: unset;
  }

  ${ListWrapper} {
    a {
      padding-top: 0.7rem;
      padding-bottom: 0.7rem;
    }
    @media (min-width: ${BREAKPOINTS.md}) {
      flex-wrap: wrap;
      overflow-x: none;
      justify-content: center;
      padding: ${calculateSpacing(1)} ${calculateSpacing(3)};

      .list-item-wrapper {
        margin-bottom: ${calculateSpacing(1)};
      }
    }
    @media (max-width: ${BREAKPOINTS.md}) {
      ${({ hasSectionContainerWidth }) => hasSectionContainerWidth
    ? `
        padding-left:${calculateSpacing(3)};
        padding-right:${calculateSpacing(3)};
        `
    : `width: 350px;
            padding-left: 0;`}
      ${({ shouldCenterAlignChipsInMobile }) => shouldCenterAlignChipsInMobile && `justify-content: center`};
      padding-top: 0.7rem;
      padding-bottom: 0.7rem;
    }
  }
`;
module.exports = {
    SectionHeaderWrapper,
    SectionHeaderContainer,
    SectionHeaderHed,
    SectionHeaderHedDivider,
    SectionHeaderSubhed,
    SectionHeaderSubhedClamp,
    SectionHeaderGrid,
    SectionHeaderLedeSection,
    ChipWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 19837:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const SectionHeader = __webpack_require__(48961);
SectionHeader.displayName = 'SectionHeader';
SectionHeader.SubHedToggleChips = asVariation(SectionHeader, 'SubHedToggleChips', {
    showSubHedToggleChips: true
});
module.exports = SectionHeader;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 30591:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { connector } = __webpack_require__(57744);
const ResponsiveAsset = __webpack_require__(73275);
const { googleAnalytics } = __webpack_require__(90090);
const { TrackComponentChannel } = __webpack_require__(78788);
const { SeriesPaginationContentWrapper, SeriesPaginationImage, SeriesPaginationLink, SeriesPaginationListItem, SeriesPaginationPlaceholder, SeriesPaginationUnorderedList, SeriesPaginationWrapper } = __webpack_require__(32868);
/**
 * Render link item
 *
 * @param {object} props - Link props
 * @param {string} [props.hed] - Link text, ie linked content header
 * @param {string} [props.href] - Link destination
 * @param {string} [props.prefix] - Optional prefix to the link text: index and dividing symbol
 *
 * @returns {ReactElement} <span>
 */
const PaginationLink = ({ href, prefix, hed }) => {
    const hedAndPrefix = `${prefix} ${hed}`;
    return (React.createElement(SeriesPaginationLink, { href: href, dangerouslySetInnerHTML: { __html: hedAndPrefix }, onClick: () => googleAnalytics.emitGoogleTrackingEvent('seriespagination', {
            title: hedAndPrefix
        }) }));
};
PaginationLink.propTypes = {
    hed: PropTypes.string,
    href: PropTypes.string,
    prefix: PropTypes.string
};
/**
 * Render placeholder link item for unpublished content
 *
 * @param {object} props - Placeholder props
 * @param {string} props.prefix - Prefix to the link text, including an optional index and optional dividing symbol
 * @param {string} props.hed - Link text, ie linked content header
 *
 * @returns {ReactElement} <span>
 */
const Placeholder = ({ prefix, hed }) => {
    const hedAndPrefix = `${prefix} ${hed}`;
    return (React.createElement(SeriesPaginationPlaceholder, { dangerouslySetInnerHTML: { __html: hedAndPrefix } }));
};
Placeholder.propTypes = {
    hed: PropTypes.string,
    prefix: PropTypes.string
};
/**
 * Render the items in the series banner
 *
 * @param {object} props - View props
 * @param {Array} props.links - Array of link objects
 * @param {string} [props.prefixDivider] - Optional divider to add between and item's index and hed - defaults to '//'
 * @param {string} [props.shouldIncludeIndex] - Optional flag to determine whether item's index should display - defaults to true
 *
 * @returns {ReactElement} <span> | <ul>
 */
const PaginationList = ({ links, prefixDivider, shouldIncludeIndex }) => {
    return (links.length && (React.createElement(SeriesPaginationUnorderedList, null, links.map((link, idx) => {
        const key = idx;
        const { hed = '', isExternal = false, isPublished = false, url = '' } = link;
        const shouldUsePlaceholder = !isPublished && !isExternal;
        const Component = shouldUsePlaceholder ? Placeholder : PaginationLink;
        const baseOneIndex = shouldIncludeIndex ? idx + 1 : '';
        const prefix = `${baseOneIndex}${prefixDivider}`;
        return (React.createElement(SeriesPaginationListItem, { key: key },
            React.createElement(Component, { href: url, prefix: prefix, hed: hed })));
    }))));
};
PaginationList.propTypes = {
    links: PropTypes.arrayOf(PropTypes.shape({
        url: PropTypes.string,
        hed: PropTypes.string,
        isPublished: PropTypes.bool
    })),
    prefixDivider: PropTypes.string,
    shouldIncludeIndex: PropTypes.bool
};
/**
 * SeriesPagination component
 *
 * @param {object} props - React props
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.prefixDivider] - Optional divider to add between and item's index and hed - defaults to '//'
 * @param {object} [props.seriesData] - Series data information from the redux store
 * @param {string} [props.shouldIncludeIndex] - Optional flag to determine whether item's index should display - defaults to true
 *
 * @returns {ReactElement} <div>
 */
const SeriesPagination = ({ className, prefixDivider = ':', seriesData, shouldIncludeIndex = true }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SeriesPagination'
        });
    }, []);
    const { image, links = [] } = seriesData || {};
    if (!links.length) {
        return null;
    }
    const viewProps = {
        links,
        prefixDivider,
        shouldIncludeIndex
    };
    return (React.createElement(SeriesPaginationWrapper, { className: className },
        React.createElement(SeriesPaginationContentWrapper, null,
            (image?.segmentedSources || image?.sources) && (React.createElement(SeriesPaginationImage, null,
                React.createElement(ResponsiveAsset, { ...image }))),
            React.createElement(PaginationList, { ...viewProps }))));
};
SeriesPagination.displayName = 'SeriesPagination';
SeriesPagination.propTypes = {
    className: PropTypes.string,
    prefixDivider: PropTypes.string,
    seriesData: PropTypes.shape({
        hed: PropTypes.hed,
        dek: PropTypes.dek,
        image: PropTypes.shape(ResponsiveAsset.propTypes),
        links: PropTypes.arrayOf(PropTypes.shape({
            hed: PropTypes.string,
            dek: PropTypes.string,
            image: PropTypes.object,
            isCurrent: PropTypes.bool,
            isExternal: PropTypes.bool,
            isPublished: PropTypes.bool,
            promoDek: PropTypes.string,
            promoHed: PropTypes.string,
            url: PropTypes.string
        })),
        shouldExcludeSeriesPagination: PropTypes.bool
    }),
    shouldIncludeIndex: PropTypes.bool
};
module.exports = connector(SeriesPagination, {
    keysToPluck: ['seriesData']
});
//# sourceMappingURL=SeriesPagination.js.map

/***/ }),

/***/ 28256:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const SeriesPagination = __webpack_require__(30591);
module.exports = asConfiguredComponent(SeriesPagination, 'SeriesPagination');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 32868:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BaseLink } = __webpack_require__(76955);
const { calculateSpacing, getTypographyStyles, getColorStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const SeriesPaginationContentWrapper = styled.div.withConfig({
    displayName: 'SeriesPaginationContentWrapper'
}) `
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: auto;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 ${calculateSpacing(2)};
  height: 100%;

  @media (max-width: ${BREAKPOINTS.sm}) {
    &::after {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      z-index: 99;
      background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgba(255, 255, 255, 0.8) 73%
      );
      width: 50px;
      height: 100%;
      content: '';
    }
  }
`;
const SeriesPaginationImage = styled.div.withConfig({
    displayName: 'SeriesPaginationImage'
}) `
  flex-shrink: 0;

  img {
    height: 27px;
  }
`;
const SeriesPaginationLink = styled(BaseLink).withConfig({
    displayName: 'SeriesPaginationLink'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-primary')};

  padding-top: ${calculateSpacing(3)};
  padding-bottom: ${calculateSpacing(3)};

  @media (max-width: ${BREAKPOINTS.md}) {
    padding-top: ${calculateSpacing(4)};
    padding-bottom: ${calculateSpacing(4)};
  }
`;
SeriesPaginationLink.defaultProps = {
    colorSecondaryToken: 'colors.foundation.collapsed-menu.nav-link.hover',
    colorStaticLinkToken: 'colors.foundation.collapsed-menu.nav-link.default',
    linkStyle: 'navigation'
};
const SeriesPaginationPlaceholder = styled(SeriesPaginationLink).withConfig({
    displayName: 'SeriesPaginationPlaceholder'
}) `
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.inverted.body-deemphasized')};

  &:hover {
    cursor: default;
    text-decoration: none;
    ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.inverted.body-deemphasized')};
  }
`;
const SeriesPaginationListItem = styled.li.withConfig({
    displayName: 'SeriesPaginationListItem'
}) `
  display: inline-block;
  padding: 0 0 0 ${calculateSpacing(5)};
  white-space: nowrap;

  &:last-of-type {
    padding-right: ${calculateSpacing(2)};
  }
`;
const SeriesPaginationUnorderedList = styled.ul.withConfig({
    displayName: 'SeriesPaginationUnorderedList'
}) `
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  height: 100%;
  list-style: none;

  @media (max-width: ${BREAKPOINTS.sm}) {
    padding: 0 50px 0 0;
  }
`;
const SeriesPaginationWrapper = styled.section.withConfig({
    displayName: 'SeriesPaginationWrapper'
}) `
  border-width: 0 0 1px;
  border-style: solid;
  width: 100%;
  height: 60px;

  ${({ theme }) => getColorStyles(theme, 'border-color', 'colors.discovery.body.white.divider')};
  ${({ theme }) => getColorStyles(theme, 'background', 'colors.foundation.menu-bg.collapsed')};

  @media (max-width: ${BREAKPOINTS.lg} - 1) {
    border-width: 1px 0;
  }

  @media (max-width: ${BREAKPOINTS.md}) {
    height: 60px;
  }
`;
module.exports = {
    SeriesPaginationContentWrapper,
    SeriesPaginationImage,
    SeriesPaginationLink,
    SeriesPaginationListItem,
    SeriesPaginationPlaceholder,
    SeriesPaginationUnorderedList,
    SeriesPaginationWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 91440:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const ResponsiveAsset = __webpack_require__(73275);
const ShoppingIcon = __webpack_require__(64964);
const PLPProductCard = __webpack_require__(67611);
const { TrackComponentChannel } = __webpack_require__(78788);
const { ShoppableAssetEmbedIconWrapper, ShoppableAssetEmbedIcon, ShoppableAssetEmbedIconHoverText, ShoppableAssetEmbedAssetContainer, ShoppableAssetEmbedDrawer } = __webpack_require__(22879);
const { AssetEmbedWrapper: ShoppableAssetEmbedWrapper, AssetEmbedResponsiveAsset: ShoppableAssetEmbedResponsiveAsset, AssetEmbedCaption: ShoppableAssetEmbedCaption } = __webpack_require__(41108);
const translations = (__webpack_require__(58009)/* ["default"] */ .A);
const { default: Carousel } = __webpack_require__(36061);
const { isMobileViewport } = __webpack_require__(55659);
/**
 * ShoppableAssetEmbed component
 *
 * @param {object} props - React props
 * @param {object} [props.attributes] - Optional attributes to add top level i.e. aria-*, role, etc.
 * @param {string} [props.className] - Optional top-level class to add.
 * @param {string} [props.dangerousCaption] - Optional caption to place under asset.
 * @param {string} [props.dangerousCredit] - Optional credit to place under asset.
 * @param {ResponsiveAsset.propTypes} props.image - Object containing asset sources for a ResponsiveAsset.
 * @param {Array} [props.shoppableItems] - Optional list of shoppable items associated with the asset.
 * @param {string} [props.contentAlign] - Where to align the asset within the surrounding composition.
 *
 * @returns {ReactElement} <figure>
 */
const ShoppableAssetEmbed = ({ attributes, className, dangerousCaption, dangerousCredit, image, shoppableItems = [], contentAlign }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ShoppableAssetEmbed'
        });
    }, []);
    const { formatMessage } = useIntl();
    const [showIcon, setShowIcon] = React.useState(false);
    const [isDrawerOpen, setIsDrawerOpen] = React.useState(false);
    const shouldShowControls = !isMobileViewport()
        ? shoppableItems.length > 5
        : shoppableItems.length > 2;
    if (!image) {
        return null;
    }
    const shouldRenderCaption = dangerousCaption || dangerousCredit;
    const handleClick = () => {
        showIcon && setIsDrawerOpen(!isDrawerOpen);
    };
    return (React.createElement(ShoppableAssetEmbedWrapper, { ...attributes, isAlignedLeft: contentAlign === 'left', isAlignedRight: contentAlign === 'right', className: className },
        React.createElement(ShoppableAssetEmbedAssetContainer, { onClick: handleClick },
            React.createElement(ShoppableAssetEmbedResponsiveAsset, { ...image, isLazy: true, onAssetLoaded: () => setShowIcon(true) }),
            React.createElement(ShoppableAssetEmbedIconWrapper, { showIcon: showIcon },
                React.createElement(ShoppableAssetEmbedIcon, null,
                    React.createElement(ShoppingIcon, null)),
                React.createElement(ShoppableAssetEmbedIconHoverText, null, formatMessage(translations.shoppingIconHoverText)))),
        React.createElement(ShoppableAssetEmbedDrawer, { isOpen: isDrawerOpen, onClose: handleClick, showCloseButton: true },
            React.createElement(Carousel, { headerProps: {
                    dangerousHed: formatMessage(translations.shoppingIconHoverText),
                    sectionTitleVariation: 'TextLeft'
                }, carouselSettings: {
                    showControls: shouldShowControls,
                    scrollType: 'one-by-one'
                } }, shoppableItems.map((shoppableItem, index) => {
                return (React.createElement(Carousel.CarouselItem, { key: index },
                    React.createElement(PLPProductCard, { ...shoppableItem, isProductCardName: true, hasUnderlineHed: false })));
            }))),
        shouldRenderCaption && (React.createElement(ShoppableAssetEmbedCaption, { dangerousCaptionText: dangerousCaption, dangerousCredit: dangerousCredit }))));
};
ShoppableAssetEmbed.propTypes = {
    attributes: PropTypes.object,
    className: PropTypes.string,
    contentAlign: PropTypes.oneOf(['left', 'right']),
    dangerousCaption: PropTypes.string,
    dangerousCredit: PropTypes.string,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    shoppableItems: PropTypes.array
};
ShoppableAssetEmbed.displayName = 'ShoppableAssetEmbed';
module.exports = ShoppableAssetEmbed;
//# sourceMappingURL=ShoppableAssetEmbed.js.map

/***/ }),

/***/ 82077:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(91440);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 22879:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing, getColorToken } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { BaseText, BaseWrap } = __webpack_require__(76955);
const Drawer = __webpack_require__(98653);
const { CarouselListItem } = __webpack_require__(72662);
const ShoppableAssetEmbedIconWrapper = styled.div.withConfig({
    displayName: 'ShoppableAssetEmbedIconWrapper'
}) `
  display: none;
  position: absolute;
  bottom: ${calculateSpacing(2)};
  left: ${calculateSpacing(2)};
  transition: max-width 0.32s ease;
  border: ${calculateSpacing(0.2)} solid
    ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.standard.divider')};
  border-radius: ${calculateSpacing(6)};
  background-color: ${({ theme }) => getColorToken(theme, 'colors.background.white')};
  min-width: ${calculateSpacing(5)};
  max-width: 0%;
  height: ${calculateSpacing(5)};
  overflow: hidden;
  white-space: nowrap;
  ${({ showIcon }) => showIcon && `display: block`};

  @media (min-width: ${BREAKPOINTS.md}) {
    bottom: ${calculateSpacing(3)};
    left: ${calculateSpacing(3)};
  }
`;
const ShoppableAssetEmbedIcon = styled('span').withConfig({
    displayName: 'ShoppableAssetEmbedIcon'
}) `
  svg {
    position: absolute;
    bottom: ${calculateSpacing(1)};
    left: ${calculateSpacing(0.8)};
  }
`;
const ShoppableAssetEmbedIconHoverText = styled(BaseText).withConfig({
    displayName: 'ShoppableAssetEmbedIconHoverText'
}) `
  transition: max-width 0.32s ease;
  padding-right: ${calculateSpacing(2.6)};
  padding-left: ${calculateSpacing(5.8)};
  max-width: 0;
`;
ShoppableAssetEmbedIconHoverText.defaultProps = {
    as: 'span',
    colorToken: 'colors.consumption.body.special.link',
    typeIdentity: 'typography.definitions.utility.button-utility'
};
const ShoppableAssetEmbedAssetContainer = styled(BaseWrap).withConfig({
    displayName: 'ShoppableAssetEmbedContainer'
}) `
  display: inline-block;
  position: relative;

  &:hover {
    cursor: pointer;
    @media (min-width: ${BREAKPOINTS.md}) {
      ${ShoppableAssetEmbedIconHoverText},
      ${ShoppableAssetEmbedIconWrapper} {
        max-width: 100%;
      }
    }
  }
`;
const ShoppableAssetEmbedDrawer = styled(Drawer.Bottom).withConfig({
    displayName: 'ShoppableAssetEmbedContainer'
}) `
  && {
    padding: 0 ${calculateSpacing(8)};
    @media (max-width: ${BREAKPOINTS.md}) {
      padding: 0 ${calculateSpacing(3)};
    }
  }

  ${CarouselListItem} {
    @media only screen and (max-width: 767px) {
      width: 48%;
    }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      width: 17.5%;
    }
    @media only screen and (min-width: 1025px) {
      width: 12.5%;
    }
  }
`;
module.exports = {
    ShoppableAssetEmbedIconWrapper,
    ShoppableAssetEmbedIcon,
    ShoppableAssetEmbedIconHoverText,
    ShoppableAssetEmbedAssetContainer,
    ShoppableAssetEmbedDrawer
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 58009:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    shoppingIconHoverText: {
        id: 'ShoppableAssetEmbed.shoppingIconHoverText',
        defaultMessage: 'Shop the look',
        description: 'ShoppableAssetEmbed component shopping icon on hover text'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 99788:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const Star = __webpack_require__(68642);
const { sizesFullName } = __webpack_require__(99906);
const Clamp = __webpack_require__(48286);
const ResponsiveAsset = __webpack_require__(86157);
const { TrackComponentChannel } = __webpack_require__(78788);
const { SummaryItemFloatingIcon, SummaryItemImageIcon } = __webpack_require__(14207);
const HeadphoneIcon = __webpack_require__(77818);
const GalleryIcon = __webpack_require__(96774);
const Rubric = __webpack_require__(34187);
const { SideBySideRatingsCardWrapper, ImageWrapper, Image, Label, Link, ContentWrapper, Content, Body, Hed, Dek, MetaData, Rating, SideBySideRatingsCardDate, SourceTagNameWrapper } = __webpack_require__(78897);
const displayDate = (shouldHidePublishDate, date, hideIssueDate, issueDate) => {
    let dateValue = '';
    if (!hideIssueDate && issueDate) {
        dateValue = issueDate;
    }
    else if (!shouldHidePublishDate && date) {
        dateValue = date;
    }
    return (dateValue && (React.createElement(SideBySideRatingsCardDate, { dangerouslySetInnerHTML: {
            __html: dateValue
        } })));
};
/**
 * SideBySideRatingsCard component
 *
 * @param {object} [analyticsDataAttribute] - Optional data-section-title attribute for component level tracking
 * @param {string} dangerousHed - Required string value to display hed
 * @param {string} [dangerousDek] - Required value to show the ingredients or dek
 * @param {string} [publishDate] - Published date
 * @param {string} [hedTag] - Option to override the default header html tag when nested within a higher level header
 * @param {boolean} [hideIssueDate] - Show or hide the issue date
 * @param {ResponsiveAsset.propTypes} [image] - Object containing sources for a ResponsiveAsset
 * @param {Array} [imageLabels] - String values to specify imageLabels
 * @param {boolean} [isAudioArticle] - Optional to show headphone icon
 * @param {string} [issueDate] - Issue Date of magazine
 * @param {number} [rating] - Optional one used to showing ratings
 * @param {number} [reviewsCount] - Optional one used to displaying number of reviewers
 * @param {boolean} [hasDekPaddingBottom] - Prop to hide padding for Dek
 * @param {boolean} [hideRubricItemSummary] - Optional. Set `true` for hide rubrics, set `false` for show rubrics.
 * @param {boolean} [props.hideSourceTagName] - Optional Set `true` to hide sourceTagName
 * @param {object} rubric - The rubric for the piece of content
 * @param {boolean} [shouldHideDekOnMobileView] - Optional prop to hide dek on mobile view.
 * @param {boolean} [shouldHidePublishDate] -  Boolean value to hide publish date
 * @param {boolean} [shouldHoldImageSpace] - Option to hold image space
 * @param {string} sourceTagName - The source of the content
 * @param {string} url - Required url to direct to content

 * @returns {ReactElement} <div>
 */
const SideBySideRatingsCard = ({ analyticsDataAttribute, contentType, dangerousHed, dangerousDek, date, hedTag = 'h3', image, imageLabels, isAudioArticle = false, issueDate, rating, hasDekPaddingBottom = true, hideIssueDate = true, hideRubricItemSummary = false, hideSourceTagName, reviewsCount, rubric, shouldHideDekOnMobileView = false, shouldHidePublishDate = true, shouldHoldImageSpace = true, sourceTagName, url }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SideBySideRatingsCard'
        });
    }, []);
    if (!url || !dangerousHed)
        return null;
    const { medium } = sizesFullName;
    const removeContentPaddingOnMobileView = shouldHideDekOnMobileView;
    const showImageWithoutLink = image && image.showImageWithoutLink;
    const goToLink = () => {
        if (showImageWithoutLink)
            window.location = url;
    };
    const sideBySideRatingsCardImage = (React.createElement(React.Fragment, null,
        React.createElement(Image, { ...image, shouldHoldImageSpace: shouldHoldImageSpace }),
        imageLabels && imageLabels.length
            ? imageLabels.map((imageLabel, i) => (React.createElement(Label, { key: i.toString() }, imageLabel)))
            : null));
    return (React.createElement(SideBySideRatingsCardWrapper, { ...analyticsDataAttribute },
        image && (React.createElement(ImageWrapper, { onClick: goToLink },
            showImageWithoutLink ? (sideBySideRatingsCardImage) : (React.createElement(Link, { href: url }, sideBySideRatingsCardImage)),
            isAudioArticle && (React.createElement(SummaryItemFloatingIcon, null,
                React.createElement(HeadphoneIcon, null))),
            contentType === 'gallery' && (React.createElement(SummaryItemImageIcon, { ButtonIcon: () => React.createElement(GalleryIcon, null), inputKind: "text", isIconButton: true, label: "icon", position: "left" })))),
        React.createElement(ContentWrapper, null,
            React.createElement(Content, { removePaddingOnMobileView: removeContentPaddingOnMobileView, hasDekPaddingBottom: hasDekPaddingBottom },
                React.createElement(Body, null,
                    !hideRubricItemSummary && rubric && React.createElement(Rubric, { name: rubric.name }),
                    !hideSourceTagName && sourceTagName && (React.createElement(SourceTagNameWrapper, null,
                        "\u00A0",
                        `| From ${sourceTagName}`)),
                    React.createElement(Link, { href: url },
                        React.createElement(Hed, { as: hedTag, dangerouslySetInnerHTML: { __html: dangerousHed } })),
                    React.createElement(Clamp, { lines: 2, breakpoint: medium },
                        React.createElement(Dek, { dangerouslySetInnerHTML: {
                                __html: dangerousDek
                            }, shouldHideDekOnMobileView: shouldHideDekOnMobileView })),
                    displayDate(shouldHidePublishDate, date, hideIssueDate, issueDate))),
            rating && reviewsCount ? (React.createElement(MetaData, null,
                React.createElement(Star, null),
                React.createElement(Rating, null,
                    rating,
                    " (",
                    reviewsCount,
                    ")"))) : null)));
};
SideBySideRatingsCard.propTypes = {
    analyticsDataAttribute: PropTypes.object,
    contentType: PropTypes.string,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string.isRequired,
    date: PropTypes.string,
    hasDekPaddingBottom: PropTypes.bool,
    hedTag: PropTypes.string,
    hideIssueDate: PropTypes.bool,
    hideRubricItemSummary: PropTypes.bool,
    hideSourceTagName: PropTypes.bool,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    imageLabels: PropTypes.arrayOf(PropTypes.string),
    isAudioArticle: PropTypes.bool,
    issueDate: PropTypes.string,
    rating: PropTypes.number,
    reviewsCount: PropTypes.number,
    rubric: PropTypes.shape(Rubric.propTypes),
    shouldHideDekOnMobileView: PropTypes.bool,
    shouldHidePublishDate: PropTypes.bool,
    shouldHoldImageSpace: PropTypes.bool,
    sourceTagName: PropTypes.string,
    url: PropTypes.string.isRequired
};
module.exports = SideBySideRatingsCard;
//# sourceMappingURL=SideBySideRatingsCard.js.map

/***/ }),

/***/ 53743:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(99788);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 78897:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { BREAKPOINTS } = __webpack_require__(96472);
const { BaseText, BaseLink } = __webpack_require__(76955);
const { minScreen, calculateSpacing, getColorStyles, getDecoration } = __webpack_require__(26865);
const ResponsiveAsset = __webpack_require__(86157);
const SideBySideRatingsCardWrapper = styled.div.withConfig({
    displayName: 'SideBySideRatingsCardWrapper'
}) `
  display: flex;
  flex-direction: row;
`;
const Link = styled(BaseLink).withConfig({ displayName: 'Link' }) ``;
Link.defaultProps = {
    colorToken: 'colors.discovery.body.white.heading',
    linkStyle: 'global'
};
const ImageWrapper = styled.div.withConfig({ displayName: 'ImageWrapper' }) `
  position: relative;
  width: 40%;

  ${minScreen(BREAKPOINTS.md)} {
    width: 50%;
  }
`;
const Image = styled(ResponsiveAsset).withConfig({ displayName: 'Image' }) `
  img {
    border-radius: ${({ theme }) => getDecoration(theme, 'cardRadiusSm')};

    ${minScreen(BREAKPOINTS.md)} {
      border-radius: ${({ theme }) => getDecoration(theme, 'cardRadiusMd')};
    }

    ${minScreen(BREAKPOINTS.lg)} {
      border-radius: ${({ theme }) => getDecoration(theme, 'cardRadiusLg')};
    }
  }

  cursor: pointer;
`;
const Label = styled(BaseText).withConfig({ displayName: 'Label' }) `
  position: absolute;
  top: ${calculateSpacing(1)};
  left: ${calculateSpacing(1)};
  margin: 0 ${calculateSpacing(0.5)} 0 0;
  border-radius: ${calculateSpacing(3)};
  padding: ${calculateSpacing(0.5)} ${calculateSpacing(1)};

  ${({ theme }) => getColorStyles(theme, 'background', 'colors.discovery.body.brand.background')};

  ${minScreen(BREAKPOINTS.md)} {
    margin: 0 ${calculateSpacing(1)} 0 0;
  }

  ${minScreen(BREAKPOINTS.lg)} {
    top: ${calculateSpacing(2)};
    left: ${calculateSpacing(2)};
    padding: ${calculateSpacing(1)} ${calculateSpacing(2)};
  }
`;
Label.defaultProps = {
    as: 'div',
    colorToken: 'colors.discovery.body.brand.heading',
    typeIdentity: 'typography.definitions.globalEditorial.tags'
};
const ContentWrapper = styled.div.withConfig({ displayName: 'ContentWrapper' }) `
  border-radius: ${({ theme }) => getDecoration(theme, 'cardRadiusSm')};
  padding: 0 0 0 ${calculateSpacing(2)};
  width: 60%;

  ${minScreen(BREAKPOINTS.md)} {
    border-radius: ${({ theme }) => getDecoration(theme, 'cardRadiusMd')};
    padding: 0 0 0 ${calculateSpacing(3)};
    width: 50%;
  }

  ${minScreen(BREAKPOINTS.lg)} {
    border-radius: ${({ theme }) => getDecoration(theme, 'cardRadiusLg')};
    padding: 0 0 0 ${calculateSpacing(4)};
  }
`;
const Content = styled.div.withConfig({ displayName: 'Content' }) `
  ${({ hasDekPaddingBottom, removePaddingOnMobileView }) => {
    if (!hasDekPaddingBottom) {
        return `padding-bottom: 0;`;
    }
    else if (removePaddingOnMobileView) {
        return `
        ${minScreen(BREAKPOINTS.md)} {
          padding: 0 0 ${calculateSpacing(2)};
        }
      `;
    }
    return `padding: 0 0 ${calculateSpacing(2)};`;
}}
`;
const Body = styled.div.withConfig({ displayName: 'Body' }) ``;
const Hed = styled(BaseText).withConfig({ displayName: 'Hed' }) `
  margin: 0 0 ${calculateSpacing(1)};
`;
Hed.defaultProps = {
    as: 'h3',
    colorToken: 'colors.discovery.body.white.heading',
    typeIdentity: 'typography.definitions.discovery.hed-core-secondary'
};
const Dek = styled(BaseText).withConfig({ displayName: 'Dek' }) `
  ${({ shouldHideDekOnMobileView }) => shouldHideDekOnMobileView &&
    `
   display: none;
   
    ${minScreen(BREAKPOINTS.md)} {
      display: block;
    }
  `}
`;
Dek.defaultProps = {
    as: 'div',
    colorToken: 'colors.discovery.body.white.description',
    typeIdentity: 'typography.definitions.discovery.description-core'
};
const MetaData = styled.div.withConfig({ displayName: 'MetaData' }) `
  display: flex;
  flex-direction: row;
  align-items: center;
  height: ${calculateSpacing(4)};
`;
const Rating = styled(BaseText).withConfig({ displayName: 'Rating' }) `
  margin: 0 ${calculateSpacing(1)};
`;
Rating.defaultProps = {
    as: 'div',
    colorToken: 'colors.discovery.body.white.accreditation',
    typeIdentity: 'typography.definitions.globalEditorial.numerical-small'
};
const SideBySideRatingsCardDate = styled(BaseText).withConfig({
    displayName: 'SideBySideRatingsSideBySideRatingsCardDate'
}) `
  display: block;
  align-self: center;
  margin-top: ${calculateSpacing(1)};
`;
SideBySideRatingsCardDate.defaultProps = {
    as: 'time',
    colorToken: 'colors.discovery.body.white.context-tertiary',
    typeIdentity: 'typography.definitions.globalEditorial.context-tertiary'
};
const SourceTagNameWrapper = styled(BaseText).withConfig({
    displayName: 'SourceTagNameWrapper'
}) `
  display: inline-block;
`;
SourceTagNameWrapper.defaultProps = {
    as: 'div',
    colorToken: 'colors.consumption.lead.standard.heading',
    typeIdentity: 'typography.definitions.globalEditorial.context-primary'
};
module.exports = {
    SideBySideRatingsCardWrapper,
    Link,
    ImageWrapper,
    Image,
    Label,
    ContentWrapper,
    Content,
    Body,
    Hed,
    Dek,
    MetaData,
    Rating,
    SideBySideRatingsCardDate,
    SourceTagNameWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 98918:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(13487)/* ["default"] */ .A);
const { TrackComponentChannel } = __webpack_require__(78788);
const { SponsoredContentHeaderWrapper, SponsoredContentHeaderExternalLink, SponsoredContentHeaderInfoBox, SponsoredContentHeaderBylineText, SponsoredContentHeaderResponsiveAsset, SponsoredContentHeaderSponsorName } = __webpack_require__(67101);
const { getBylineText, getLogoRatio, getSponsoredHeaderDisplayOptions, getValidBylineOption } = __webpack_require__(62574);
/**
 * SponsoredContentHeader component
 *
 * @param {object} props - React props
 * @param {string} props.brandName - Brand to insert into the byline copy
 * @param {string} props.bylineOption - The wording option chosen for the sponsor's byline credit
 * @param {string} props.bylineVariant - A option for variants of bylines
 * @param {string} props.campaignUrl - The link to the sponsor's ad campaign or main site
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.sponsorLogo] - Optional sponsor logo image
 * @param {string} props.sponsorName - Name of sponsor
 *
 * @returns {ReactElement} <div>
 */
const SponsoredContentHeader = ({ brandName, bylineOption: contentBylineOption, bylineVariant, campaignUrl, className, sponsorLogo, sponsorName }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SponsoredContentHeader'
        });
    }, []);
    const intl = useIntl();
    const bylineOption = getValidBylineOption(contentBylineOption);
    const { isBrandedLegacy, shouldDisplayLogo } = getSponsoredHeaderDisplayOptions({
        bylineOption,
        bylineVariant,
        hasLogo: !!sponsorLogo
    });
    const bylineText = getBylineText({
        intl,
        bylineOption,
        brandName,
        sponsorName
    });
    const logoRatio = getLogoRatio({ sponsorLogo });
    return (React.createElement(SponsoredContentHeaderWrapper, { isBrandedLegacy: isBrandedLegacy, className: classnames(className, bylineOption.replace('_', '-')), "data-testid": "SponsoredContentHeaderWrapper" },
        React.createElement(SponsoredContentHeaderExternalLink, { additionalRelVals: ['sponsored'], href: campaignUrl || undefined, attributes: {
                'aria-label': intl.formatMessage(translations.sponsoredLinkCTA, {
                    sponsorName
                })
            } },
            React.createElement(SponsoredContentHeaderInfoBox, { isBrandedLegacy: isBrandedLegacy },
                React.createElement(SponsoredContentHeaderBylineText, { isBrandedLegacy: isBrandedLegacy, "data-testid": "SponsoredContentHeaderBylineText" }, bylineText),
                shouldDisplayLogo ? (React.createElement(SponsoredContentHeaderResponsiveAsset, { altText: sponsorLogo.altText, constrainLogoByWidth: logoRatio > 1, isBrandedLegacy: isBrandedLegacy, sources: sponsorLogo.sources })) : (React.createElement(SponsoredContentHeaderSponsorName, { isBrandedLegacy: isBrandedLegacy }, sponsorName))))));
};
SponsoredContentHeader.propTypes = {
    brandName: PropTypes.string.isRequired,
    bylineOption: PropTypes.string.isRequired,
    bylineVariant: PropTypes.string.isRequired,
    campaignUrl: PropTypes.string.isRequired,
    className: PropTypes.string,
    sponsorLogo: PropTypes.any,
    sponsorName: PropTypes.string.isRequired
};
SponsoredContentHeader.displayName = 'SponsoredContentHeader';
module.exports = SponsoredContentHeader;
//# sourceMappingURL=SponsoredContentHeader.js.map

/***/ }),

/***/ 31411:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
module.exports = asConfiguredComponent(__webpack_require__(98918), 'SponsoredContentHeader');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 67101:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BaseText } = __webpack_require__(76955);
const { calculateSpacing, getColorStyles, getTypographyStyles } = __webpack_require__(26865);
const ResponsiveAsset = __webpack_require__(86157);
const ExternalLink = __webpack_require__(39832);
const SponsoredContentHeaderWrapper = styled.div.withConfig({
    displayName: 'SponsoredContentHeaderWrapper'
}) `
  display: flex;
  justify-content: center;
  ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.discovery.body.light.background')};
  padding: ${calculateSpacing(2)};
  width: 100%;
  min-height: 80px;

  ${({ isBrandedLegacy }) => isBrandedLegacy
    ? `
    grid-column: 1 / -1;
    padding: unset;
    height: 60px;
    min-height: unset;

    &.light-theme {
      ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.background.light')}
    }
  `
    : ``}
`;
const SponsoredContentHeaderExternalLink = styled(ExternalLink).withConfig({
    displayName: 'SponsoredContentHeaderExternalLink'
}) `
  text-decoration: none;
`;
const SponsoredContentHeaderInfoBox = styled.div.withConfig({
    displayName: 'SponsoredContentHeaderInfoBox'
}) `
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;

  ${({ isBrandedLegacy }) => isBrandedLegacy ? `& { flex-direction: unset; }` : ``}
`;
const SponsoredContentHeaderBylineText = styled(BaseText).withConfig({
    displayName: 'SponsoredContentHeaderBylineText'
}) `
  ${({ theme, isBrandedLegacy }) => isBrandedLegacy
    ? `
      ${getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-primary')};
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      padding-right: ${calculateSpacing(2)};
      height: 100%;

      &.light-theme {
        ${getColorStyles(theme, 'color', 'colors.discovery.body.light.heading')}
      }
    }
  `
    : ``}
`;
SponsoredContentHeaderBylineText.defaultProps = {
    as: 'div',
    colorToken: 'colors.consumption.lead.standard.syndication',
    typeIdentity: 'typography.definitions.globalEditorial.syndication'
};
const SponsoredContentHeaderResponsiveAsset = styled(ResponsiveAsset).withConfig({ displayName: 'SponsoredContentHeaderResponsiveAsset' }) `
  &.responsive-asset {
    display: flex;
    align-items: center;
    margin-top: ${calculateSpacing(1)};
    overflow: visible;

    ${({ theme, isBrandedLegacy }) => isBrandedLegacy
    ? `
      justify-content: flex-start;
      margin-top: unset;
      padding-left: ${calculateSpacing(2)};
      border-left: 1px solid;
      ${getColorStyles(theme, 'border-color', 'colors.discovery.body.light.divider')};
    `
    : ``}
  }

  &.responsive-image {
    height: 60px;

    img {
      height: 100%;
    }

    ${({ constrainLogoByWidth }) => constrainLogoByWidth
    ? `{
      width: 60px;
      height: unset;

      img {
        height: unset;
      }
    }`
    : ``}
  }
`;
const SponsoredContentHeaderSponsorName = styled(BaseText).withConfig({
    displayName: 'SponsoredContentHeaderSponsorName'
}) `
  display: flex;
  align-items: center;
  margin-top: ${calculateSpacing(0.5)};

  ${({ isBrandedLegacy, theme }) => isBrandedLegacy
    ? `
    justify-content: flex-start;
    margin-top: unset;
    padding-left: ${calculateSpacing(0.5)};

    &.light-theme {
      ${getColorStyles(theme, 'color', 'colors.discovery.body.light.syndication')};
    }
  `
    : ``}
`;
SponsoredContentHeaderSponsorName.defaultProps = {
    as: 'div',
    colorToken: 'colors.consumption.lead.standard.syndication',
    typeIdentity: 'typography.definitions.consumptionEditorial.description-feature'
};
module.exports = {
    SponsoredContentHeaderWrapper,
    SponsoredContentHeaderExternalLink,
    SponsoredContentHeaderInfoBox,
    SponsoredContentHeaderBylineText,
    SponsoredContentHeaderResponsiveAsset,
    SponsoredContentHeaderSponsorName
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 13487:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    bylineBrandXAdvertiser: {
        id: 'SponsoredContentHeader.BylineBrandXAdvertiser',
        defaultMessage: '{brandName} X',
        description: "Byline text when it's a brand and an advertiser"
    },
    bylineBrandPresentsAdvertiser: {
        id: 'SponsoredContentHeader.BylineBrandPresentsAdvertiser',
        defaultMessage: '{brandName} Presents',
        description: "Byline text when it's a brand presenting an advertiser"
    },
    bylineBrandedContent: {
        id: 'SponsoredContentHeader.BylineBrandedContent',
        defaultMessage: `Branded Content By`,
        description: 'Byline text for branded content'
    },
    bylineContributorContentByAdvertiser: {
        id: 'SponsoredContentHeader.bylineContributorContentByAdvertiser',
        defaultMessage: `Contributor Content By`,
        description: 'Byline text for Contributor content'
    },
    bylineCreated: {
        id: 'SponsoredContentHeader.BylineCreated',
        defaultMessage: 'Created By {brandName} For',
        description: 'Byline text for created by brand'
    },
    bylinePaidPost: {
        id: 'SponsoredContentHeader.BylinePaidPost',
        defaultMessage: 'PAID POST',
        description: 'Byline text for a paid post'
    },
    bylinePR: {
        id: 'SponsoredContentHeader.BylinePR',
        defaultMessage: 'PR',
        description: 'Byline text for a PR'
    },
    bylinePaidPostByAdvertiser: {
        id: 'SponsoredContentHeader.BylinePaidPostByAdvertiser',
        defaultMessage: 'Paid Post by {sponsorName}, Brought to you By Business Reporter',
        description: 'Byline text by advertiser for a paid post'
    },
    bylineProduced: {
        id: 'SponsoredContentHeader.BylineProduced',
        defaultMessage: 'Produced By',
        description: 'Byline text for produced by'
    },
    bylineProducedByAdvertiser: {
        id: 'SponsoredContentHeader.BylineProducedByAdvertiser',
        defaultMessage: 'Produced By',
        description: 'Byline text for produced by advertiser'
    },
    bylinePublishedByAdvertiser: {
        id: 'SponsoredContentHeader.BylinePublishedByAdvertiser',
        defaultMessage: 'Published By',
        description: 'Byline text for published by advertiser'
    },
    bylinePresentedByAdvertiser: {
        id: 'SponsoredContentHeader.BylinePresentedByAdvertiser',
        defaultMessage: 'Presented By',
        description: 'Byline text for presented by advertiser'
    },
    bylineProducedByBrand: {
        id: 'SponsoredContentHeader.BylineProducedByBrand',
        defaultMessage: 'Produced By {brandName} With',
        description: 'Byline text for produced by brand'
    },
    bylineSponsored: {
        id: 'SponsoredContentHeader.BylineSponsored',
        defaultMessage: 'Sponsored content',
        description: 'Byline text for sponsored content'
    },
    bylineSponsoredContent: {
        id: 'SponsoredContentHeader.BylineSponsoredContent',
        defaultMessage: 'Sponsored Content By',
        description: 'Byline text for sponsored content with a sponsor name'
    },
    bylineTogetherWith: {
        id: 'SponsoredContentHeader.BylineTogetherWith',
        defaultMessage: 'Together with',
        description: 'Byline text for together with'
    },
    bylineInCollaboration: {
        id: 'SponsoredContentHeader.BylineInCollaboration',
        defaultMessage: 'In Collaboration With',
        description: 'Byline text for in collaboration with'
    },
    bylineSponsoredBy: {
        id: 'SponsoredContentHeader.BylineSponsoredBy',
        defaultMessage: 'Sponsored By',
        description: 'Byline text for sponsored by'
    },
    bylineInPartnership: {
        id: 'SponsoredContentHeader.BylineInPartnership',
        defaultMessage: 'In Partnership With',
        description: 'Byline text for in partnership with'
    },
    bylineAdvertising: {
        id: 'SponsoredContentHeader.BylineAdvertising',
        defaultMessage: 'Advertising',
        description: 'Byline text for advertising'
    },
    bylineAdvertisement: {
        id: 'SponsoredContentHeader.BylineAdvertisement',
        defaultMessage: 'Advertisement',
        description: 'Byline text for advertisement'
    },
    bylinePromotedByAdvertiser: {
        id: 'SponsoredContentHeader.BylinePromotedByAdvertiser',
        defaultMessage: 'Promoted by',
        description: 'Byline text for promoted by advertiser'
    },
    bylinePromotion: {
        id: 'SponsoredContentHeader.BylinePromotion',
        defaultMessage: 'Promotion',
        description: 'Byline text for promotion'
    },
    bylineAdvertisementFeatureWith: {
        id: 'SponsoredContentHeader.BylineAdvertisementFeatureWith',
        defaultMessage: 'Advertisement Feature With',
        description: 'Byline text for advertisement feature with'
    },
    bylineOriginalContentBy: {
        id: 'SponsoredContentHeader.BylineOriginalContentBy',
        defaultMessage: 'Original Content By',
        description: 'Byline text for Original Content By'
    },
    sponsoredLinkCTA: {
        id: 'SponsoredContentHeader.SponsoredLinkCTA',
        defaultMessage: "Click to go to {sponsorName}'s website",
        description: 'Call to action for sponsored link'
    },
    bylineAdvertisementByAdvertiser: {
        id: 'SponsoredContentHeader.bylineAdvertisementByAdvertiser',
        defaultMessage: 'Advertisement By',
        description: 'Byline text for advertisement by advertiser'
    },
    bylineAd: {
        id: 'SponsoredContentHeader.bylineAd',
        defaultMessage: 'Ad',
        description: 'Byline text for ad'
    },
    bylineSponsoredByAdvertiser: {
        id: 'SponsoredContentHeader.bylineSponsoredByAdvertiser',
        defaultMessage: 'Sponsored By',
        description: 'Byline text for sponsored by advertiser'
    },
    bylineInPartnershipWithAdvertiser: {
        id: 'SponsoredContentHeader.bylineInPartnershipWithAdvertiser',
        defaultMessage: 'In Partnership With',
        description: 'Byline text for in partnership with advertiser'
    },
    bylinePaidPartnershipWithAdvertiser: {
        id: 'SponsoredContentHeader.bylinePaidPartnershipWithAdvertiser',
        defaultMessage: 'Paid Partnership With',
        description: 'Byline text for paid partnership with advertiser'
    },
    bylineAffiliatePartner: {
        id: 'SponsoredContentHeader.bylineAffiliatePartner',
        defaultMessage: 'Affiliate Partner',
        description: 'Byline text for affiliate partner'
    },
    bylinePaidPromotionByAdvertiser: {
        id: 'SponsoredContentHeader.bylinePaidPromotionByAdvertiser',
        defaultMessage: 'Paid Promotion By',
        description: 'Byline text for paid promotion by advertiser'
    },
    bylineSpecialFeature: {
        id: 'SponsoredContentHeader.bylineSpecialFeature',
        defaultMessage: 'Special Feature',
        description: 'Byline text for special feature'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 62574:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const translations = (__webpack_require__(13487)/* ["default"] */ .A);
// Byline copy that is mapped to option tokens in Copilot
const DEFAULT_BYLINE_TEMPLATE = 'produced_by_advertiser';
const BYLINE_TEMPLATES = {
    advertisement: translations.bylineAdvertisement,
    brand_x_advertiser: translations.bylineBrandXAdvertiser,
    brand_presents_advertiser: translations.bylineBrandPresentsAdvertiser,
    branded_content: translations.bylineBrandedContent,
    contributor_content_by_advertiser: translations.bylineContributorContentByAdvertiser,
    created: translations.bylineCreated,
    original_content_by: translations.bylineOriginalContentBy,
    paid_post: translations.bylinePaidPost,
    paid_post_by_advertiser_brought_to_you_by_business_reporter: translations.bylinePaidPostByAdvertiser,
    produced: translations.bylineProduced,
    produced_by_advertiser: translations.bylineProducedByAdvertiser,
    presented_by_advertiser: translations.bylinePresentedByAdvertiser,
    produced_by_brand: translations.bylineProducedByBrand,
    sponsored: translations.bylineSponsored,
    sponsored_content: translations.bylineSponsoredContent,
    together_with: translations.bylineTogetherWith,
    in_collaboration: translations.bylineInCollaboration,
    sponsored_by: translations.bylineSponsoredBy,
    in_partnership: translations.bylineInPartnership,
    advertisement_feature_with: translations.bylineAdvertisementFeatureWith,
    advertisement_by_advertiser: translations.bylineAdvertisementByAdvertiser,
    ad: translations.bylineAd,
    sponsored_by_advertiser: translations.bylineSponsoredByAdvertiser,
    in_partnership_with_advertiser: translations.bylineInPartnershipWithAdvertiser,
    paid_partnership_with_advertiser: translations.bylinePaidPartnershipWithAdvertiser,
    affiliate_partner: translations.bylineAffiliatePartner,
    paid_promotion_by_advertiser: translations.bylinePaidPromotionByAdvertiser,
    special_feature: translations.bylineSpecialFeature,
    advertising: translations.bylineAdvertising,
    PR: translations.bylinePR,
    promoted_by_advertiser: translations.bylinePromotedByAdvertiser,
    published_by_advertiser: translations.bylinePublishedByAdvertiser,
    promotion: translations.bylinePromotion
};
/**
 * Get a byline token that has text mapped it, otherwise return a default
 *
 * @param bylineOption - byline option token
 *
 * @returns {string} a token that has copy mapped to it or a default token
 */
function getValidBylineOption(bylineOption) {
    const hasBylineTemplate = Object.prototype.hasOwnProperty.call(BYLINE_TEMPLATES, bylineOption);
    if (hasBylineTemplate) {
        return bylineOption;
    }
    return DEFAULT_BYLINE_TEMPLATE;
}
/**
 * Get display options for sponsored byline component to properly display the byline
 * based off of combinations of values received from copilot
 *
 * @param params - params for function
 * @param params.bylineOption - byline option token
 * @param params.bylineVariant - byline variant token
 * @param params.hasLogo - if an advertiser logo was provided with the content
 *
 * @returns {string} - display options based on byline option, variant, and logo combinations
 */
function getSponsoredHeaderDisplayOptions({ bylineOption, bylineVariant, hasLogo }) {
    const validBylineOption = getValidBylineOption(bylineOption);
    // old byline options that display on single row
    const isBrandedLegacy = validBylineOption === 'sponsored' || validBylineOption === 'produced';
    // legacy options always display a logo
    const shouldDisplayLogo = hasLogo && (bylineVariant === 'logo' || isBrandedLegacy);
    return {
        isBrandedLegacy,
        shouldDisplayLogo
    };
}
/**
 * Get byline copy text with the brandname inserted into the copy
 *
 * @param param - byline props
 * @param param.intl - react-intl with formatMessage function
 * @param param.bylineOption - byline option token
 * @param param.brandName - brand to insert into the byline copy
 * @param param.sponsorName - brand to insert into the byline copy
 *
 * @returns {string} byline copy with appropriate brand inserted into copy
 */
function getBylineText({ intl, bylineOption = DEFAULT_BYLINE_TEMPLATE, brandName, sponsorName }) {
    return intl.formatMessage(BYLINE_TEMPLATES[bylineOption], {
        brandName,
        sponsorName
    });
}
/**
 * Get aspect ratio of sponsor logo
 *
 * @param {string} [props.sponsorLogo] - Optional sponsor logo image
 *
 * @returns {number} - Logo ratio as a decimal
 */
function getLogoRatio({ sponsorLogo }) {
    return ((sponsorLogo?.sources?.sm?.height || 0) /
        (sponsorLogo?.sources?.sm?.width || 1));
}
module.exports = {
    BYLINE_TEMPLATES,
    getBylineText,
    getLogoRatio,
    getSponsoredHeaderDisplayOptions,
    getValidBylineOption
};
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 43709:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(7035);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 7035:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const SummaryCarousel = __webpack_require__(87339);
SummaryCarousel.Inverted = asVariation(SummaryCarousel, 'Inverted', {}, {
    isInverted: true,
    viewAllButtonVariation: 'UtilityInverted',
    btnStyle: 'outlined'
});
SummaryCarousel.ButtonPrimaryOutlined = asVariation(SummaryCarousel, 'ButtonPrimaryOutlined', {}, {
    viewAllButtonVariation: 'Primary',
    btnStyle: 'outlined'
});
SummaryCarousel.ButtonPrimaryOutlinedCompact = asVariation(SummaryCarousel, 'ButtonPrimaryOutlinedCompact', {}, {
    viewAllButtonVariation: 'Primary',
    btnStyle: 'outlined',
    hasModerateSpacing: false
});
module.exports = SummaryCarousel;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 30608:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { TrackComponentChannel } = __webpack_require__(78788);
const { SummaryItemSimpleAnchor, SummaryItemSimpleHed, SummaryItemResponsiveAsset, SummaryItemLiveWrapperAsset, SummaryItemLiveSpacerAsset, SummaryItemLiveEllipseAsset, SummaryItemLiveLabelAsset, SummaryItemSimpleSubHed, SummaryItemCustomMessage } = __webpack_require__(14815);
const googleAnalytics = __webpack_require__(37402);
/**
 * SummaryItemSimple component
 *
 * @param {object} props - React props
 * @param {string} [props.image] - Photo containing image sources for a ResponsiveAsset
 * @param {boolean} [props.isLive] - Optional flag indicating we should show the LIVE status. Default: FALSE.
 * @param {boolean} [props.isRunwayRecommendationSubHed] - Optional flag to show runway sun ged
 * @param {string} [props.hed] - Optional Hed
 * @param {boolean} [props.hasMobilePaddingBottom] - padding bottom for mobile view
 * @param {string} [props.liveLabel] - Optional label for showing live status on image
 * @param {string} [props.showAssetOnly] - Boolean prop, that indicates that item is shown as an asset, without any hed, links or dek
 * @param {string} [props.showLinkedAsset] - Boolean prop, that indicates that item is shown as an asset, with url which redirects on click
 * @param {string} [props.subHed] - Optional subHed
 * @param {string} [props.url] - URL to route to when any part of the component is clicked
 * @param {string} [props.analyticsEvent] - google analytics event name to be triggered
 * @param {string} [props.customMessage] - Optional custom message
 * @param {string} [props.showPrice] - show prices for products
 * @param {boolean} [props.hasUnderlineHed] - Optional flag to render an underline below hed
 * @param {string} [props.isInternalLink] - Optional prop to check the the url is of same domain
 * @returns {ReactElement} <a>
 */
const SummaryItemSimple = ({ image, isLive = false, isRunwayRecommendationSubHed = false, hasMobilePaddingBottom, hed, showAssetOnly = false, showLinkedAsset = false, subHed, liveLabel = 'LIVE', url, analyticsEvent, customMessage, showPrice, hasUnderlineHed = true, isInternalLink }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'SummaryItemSimple'
        });
    }, []);
    // assetOnly
    const SummaryItemAsset = image && (React.createElement(SummaryItemResponsiveAsset, { ...image, hasMobilePaddingBottom: hasMobilePaddingBottom }));
    if (showAssetOnly)
        return SummaryItemAsset;
    // Asset with only href
    const SummaryItemAssetWithHref = image && (React.createElement(SummaryItemSimpleAnchor, { href: url, "data-testid": "SummaryItemSimple", onClick: () => {
            analyticsEvent &&
                googleAnalytics.emitGoogleTrackingEvent(analyticsEvent, {
                    'event-label': hed,
                    'gtm.elementUrl': url
                });
        }, target: isInternalLink ? '_self' : '_blank', hasMobilePaddingBottom: hasMobilePaddingBottom },
        React.createElement(SummaryItemResponsiveAsset, { ...image })));
    if (showLinkedAsset)
        return SummaryItemAssetWithHref;
    return (React.createElement(SummaryItemSimpleAnchor, { href: url, "data-testid": "SummaryItemSimple", onClick: () => {
            analyticsEvent &&
                googleAnalytics.emitGoogleTrackingEvent(analyticsEvent, {
                    'event-label': hed,
                    'gtm.elementUrl': url
                });
        }, hasUnderlineHed: hasUnderlineHed, hasMobilePaddingBottom: hasMobilePaddingBottom },
        SummaryItemAsset,
        image && isLive && (React.createElement(SummaryItemLiveWrapperAsset, null,
            React.createElement(SummaryItemLiveEllipseAsset, null),
            React.createElement(SummaryItemLiveSpacerAsset, null),
            React.createElement(SummaryItemLiveLabelAsset, null,
                " ",
                liveLabel,
                " "))),
        hed && (React.createElement(SummaryItemSimpleHed, { as: "h3", hasMobilePaddingBottom: hasMobilePaddingBottom }, hed)),
        subHed && (React.createElement(SummaryItemSimpleSubHed, { showPrice: showPrice, as: "p" }, showPrice ? subHed : null)),
        customMessage && (React.createElement(SummaryItemCustomMessage, { isRunwayRecommendationSubHed: isRunwayRecommendationSubHed },
            ' ',
            customMessage,
            ' '))));
};
SummaryItemSimple.propTypes = {
    analyticsEvent: PropTypes.string,
    customMessage: PropTypes.string,
    hasMobilePaddingBottom: PropTypes.bool,
    hasUnderlineHed: PropTypes.bool,
    hed: PropTypes.string,
    image: PropTypes.shape(SummaryItemResponsiveAsset.propTypes),
    isInternalLink: PropTypes.bool,
    isLive: PropTypes.bool,
    isRunwayRecommendationSubHed: PropTypes.bool,
    liveLabel: PropTypes.string,
    showAssetOnly: PropTypes.bool,
    showLinkedAsset: PropTypes.bool,
    showPrice: PropTypes.bool,
    subHed: PropTypes.string,
    url: PropTypes.string.isRequired
};
module.exports = SummaryItemSimple;
//# sourceMappingURL=SummaryItemSimple.js.map

/***/ }),

/***/ 31933:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const SummaryItemSimple = __webpack_require__(30608);
module.exports = asConfiguredComponent(SummaryItemSimple, 'SummaryItemSimple');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 14815:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { calculateSpacing, getColorStyles, getTypographyStyles } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { BaseLink, BaseText } = __webpack_require__(76955);
const ResponsiveAsset = __webpack_require__(73275);
const SummaryItemSimpleAnchor = styled(BaseLink).withConfig({
    displayName: 'SummaryItemSimpleAnchor'
}) `
  display: block;
  position: relative;
  ${({ hasMobilePaddingBottom }) => `padding-bottom: ${calculateSpacing(hasMobilePaddingBottom ? 4 : 3)};}`};

  && {
    ${({ hasUnderlineHed }) => !hasUnderlineHed && 'text-decoration: none'}
  }
`;
const SummaryItemSimpleHed = styled(BaseText).withConfig({
    displayName: 'SummaryItemSimpleHed'
}) `
  ${({ hasMobilePaddingBottom }) => `padding-bottom: ${calculateSpacing(hasMobilePaddingBottom ? 0.5 : 1.5)};}`};
  text-align: center;

  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-secondary')}
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.discovery.lead.secondary.hed')};
`;
const SummaryItemSimpleSubHed = styled(BaseText).withConfig({
    displayName: 'SummaryItemSimpleSubHed'
}) `
  text-align: center;
  ${({ theme, showPrice }) => showPrice
    ? getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-secondary')
    : getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-tertiary')}
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.discovery.body.white.context-tertiary')};
`;
const SummaryItemResponsiveAsset = styled(ResponsiveAsset).withConfig({
    displayName: 'SummaryItemResponsiveAsset'
}) `
  ${({ hasMobilePaddingBottom }) => `padding-bottom: ${calculateSpacing(hasMobilePaddingBottom ? 1.5 : 0.5)};}`};
  @media (min-width: ${BREAKPOINTS.md}) {
    padding-bottom: ${calculateSpacing(1)};
  }

  img {
    width: 100%;
  }
`;
const SummaryItemLiveWrapperAsset = styled.div.withConfig({
    displayName: 'SummaryItemLiveWrapperAsset'
}) `
  display: flex;
  position: absolute;
  top: 24px;
  left: 12px;
  flex-direction: row;
  align-items: center;
  background: #a60505;
  padding: 2px 4px;
  height: 19px;
`;
const SummaryItemLiveSpacerAsset = styled.div.withConfig({
    displayName: 'SummaryItemLiveSpacerAsset'
}) `
  position: static;
  opacity: 0.3;
  width: 4px;
`;
const SummaryItemLiveEllipseAsset = styled.div.withConfig({
    displayName: 'SummaryItemLiveEllipseAsset'
}) `
  top: 7px;
  left: 4px;
  flex: none;
  flex-grow: 0;
  order: 0;
  margin: 4px 0;
  ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.interactive.base.white')};
  width: 5px;
  height: 5px;
`;
const SummaryItemLiveLabelAsset = styled.div.withConfig({
    displayName: 'SummaryItemLiveLabelAsset'
}) `
  top: 2px;
  left: 13px;
  flex: none;
  flex-grow: 0;
  order: 1;
  margin: 4px 0;
  height: 15px;
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-tertiary')}
  line-height: 15px;
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.white')};
`;
const SummaryItemCustomMessage = styled(BaseText).withConfig({
    displayName: 'SummaryItemCustomMessage'
}) `
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.ad-label')}
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.body.standard.adlabel')};
  text-align: center;

  ${({ theme, isRunwayRecommendationSubHed }) => isRunwayRecommendationSubHed &&
    `
        ${getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-secondary')}
        ${getColorStyles(theme, 'color', 'colors.consumption.body.standard.subhed')}
      `};
`;
SummaryItemCustomMessage.displayName = 'SummaryItemCustomMessage';
module.exports = {
    SummaryItemSimpleAnchor,
    SummaryItemSimpleHed,
    SummaryItemResponsiveAsset,
    SummaryItemLiveWrapperAsset,
    SummaryItemLiveSpacerAsset,
    SummaryItemLiveEllipseAsset,
    SummaryItemLiveLabelAsset,
    SummaryItemSimpleSubHed,
    SummaryItemCustomMessage
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 53814:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { TrackComponentChannel } = __webpack_require__(78788);
const Button = __webpack_require__(73730);
const ResponsiveAsset = __webpack_require__(73275);
const { TickerImage, TickerText, TickerHed, TickerLink, TickerWrapper, TickerLinkWrapper } = __webpack_require__(28934);
const { componentTracking } = __webpack_require__(90090);
const { trackNavigationClick } = __webpack_require__(99623);
/**
 * Ticker component
 *
 * @param {object} props - React props
 * @param {string} [props.btnStyle] - prop to add styling to button
 * @param {string} [props.buttonVariation] - Optional variation of Button to use
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.fullPageTheme] - Optional theme prop - standard or inverted, standard by default
 * @param {boolean} [props.hasBorders] - Optional prop to control border visibility
 * @param {hasSolidBorders} [props.hasSolidBorders] - Optional prop to apply solid borders
 * @param {string} [props.marginTopType] - Optional margin prop- small, none or large, small by default to set top margin for Ticker
 * @param {boolean} [props.hasMinimalBottomMargin] - Optional prop for small bottom margin
 * @param {boolean} [props.hasRoundedImage] - Optional prop for rounded image corners
 * @param {boolean} [props.hideTopBorder] - Optional prop for hiding top border
 * @param {string} [props.id] - container id
 * @param {string} [props.image] - Optional image/Icon to add to the ticker
 * @param {number} [props.imageMinWidth] - Minimum width for the ticker image
 * @param {number} [props.index] - Optional position of the ticker relative to other items on the page, useful to distinguish multiple instances of the ticker
 * @param {bool} props.isInvertedTheme - Optional render a invertedTheme
 * @param {string} props.isLink - Optional render a simple link instead of button if true
 * @param {string} [props.isSpecialTheme] - Optional prop for special theme
 * @param {string} props.link - Required link to recirc/sub/account
 * @param {bool} [props.shouldEnableBundleComponentAnalytics] - feature flag to append data-section-title attribute for analytics
 * @param {string} props.target - Optional open link in a new tab
 * @param {string} props.text - Required text for the ticker
 * @param {object} [props.trackingNamespace] - Optional override the base namespace of data-section-title for component tracking
 * @param {object} [props.typeTokenSet] - [`default`, `utility`]
 * @param {object} [props.variations] - Optional variation properties used in rendering the component
 * @param {string} [props.variations.imagePosition] - [`left`, `right`]. Sets the image position inside the ticker
 * @param {string} [props.variations.layoutPlacement] - [`side-by-side`, `text-below-mobile-only`, `dense`]. Optional. Horizontal / Vertical placement of content.
 * @param {string} [props.variationName] - Component variation name used for Component Tracking
 * @param {boolean} [props.hasConsistentSpacing] - defines whether the consistent spacing is needed or not
 * @returns {ReactElement} <div>
 */
const Ticker = ({ btnStyle = 'filled', buttonVariation = 'Utility', className, fullPageTheme = 'standard', hasBorders = true, id, marginTopType = 'small', hasMinimalBottomMargin = false, hasSolidBorders = false, hasRoundedImage, hideTopBorder = false, image, imageMinWidth = 72, index, isLink = false, isInvertedTheme = false, hasConsistentSpacing = false, isSpecialTheme = false, typeTokenSet, link, shouldEnableBundleComponentAnalytics, target, trackingNamespace, text, variations = {
    imagePosition: 'left',
    layoutPlacement: 'text-below-mobile-only'
}, variationName }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'Ticker',
            variation: variationName
        });
    }, [variationName]);
    const ButtonComponent = Button[buttonVariation];
    const { imagePosition, layoutPlacement } = variations;
    const isLinkTextDefined = link?.text?.length > 0;
    const analyticsDataAttribute = componentTracking.addDataSectionTitleAttribute(shouldEnableBundleComponentAnalytics, trackingNamespace || 'ticker position', index);
    const imgWidth = image?.segmentedSources.sm[0].width;
    const imgHeight = image?.segmentedSources.sm[0].height;
    let applyStyleForNoImage = false;
    let applyStyleForLandscapeImg = false;
    let updatedLayoutPlacement = layoutPlacement;
    let updatedImagePosition = imagePosition;
    if (imgWidth && imgHeight && !(layoutPlacement === 'dense')) {
        if (imgHeight > imgWidth || imgHeight === imgWidth) {
            updatedLayoutPlacement = 'side-by-side';
            updatedImagePosition = 'left';
        }
        else {
            applyStyleForLandscapeImg = true;
        }
    }
    else {
        applyStyleForNoImage = true;
    }
    const isInverted = isInvertedTheme || fullPageTheme === 'inverted';
    const wrapHyperlink = (WrappedComponent) => {
        // This method returns component with hyperlink around it. As of now it reflects globally., but this can be controlled here with few conditions in case if there is a need in future
        return function ModifiedComponent(props) {
            return (React.createElement(TickerLinkWrapper, { href: link.href, onClick: () => trackNavigationClick(link.href, link.text, 'ticker_logo', 'click', id) },
                React.createElement(WrappedComponent, { ...props })));
        };
    };
    const HyperlinkedTickerImage = wrapHyperlink(TickerImage, id); // A generic method to wrap any component with hyperlink..
    return (React.createElement(TickerWrapper, { ...analyticsDataAttribute, className: classnames('ticker-wrapper', className), hasBorders: hasBorders, hideTopBorder: hideTopBorder, marginTopType: marginTopType, hasMinimalBottomMargin: hasMinimalBottomMargin, isInverted: isInverted, isSpecialTheme: isSpecialTheme, hasSolidBorders: hasSolidBorders, layoutPlacement: updatedLayoutPlacement, applyStyleForNoImage: applyStyleForNoImage, applyStyleForLandscapeImg: applyStyleForLandscapeImg, hasConsistentSpacing: hasConsistentSpacing },
        image && image.segmentedSources && (React.createElement(HyperlinkedTickerImage, { ...image, className: "ticker__image", marginTopType: marginTopType, hasRoundedImage: hasRoundedImage, imagePosition: updatedImagePosition, imageMinWidth: imageMinWidth, layoutPlacement: updatedLayoutPlacement, shouldHoldImageSpace: true, applyStyleForNoImage: applyStyleForNoImage })),
        React.createElement(TickerText, { layoutPlacement: updatedLayoutPlacement, applyStyleForNoImage: applyStyleForNoImage, applyStyleForLandscapeImg: applyStyleForLandscapeImg },
            text && (React.createElement(TickerHed, { "data-testid": "TickerText", dangerouslySetInnerHTML: { __html: text }, isLink: isLink, isInverted: isInverted, layoutPlacement: updatedLayoutPlacement, typeTokenSet: typeTokenSet, applyStyleForNoImage: applyStyleForNoImage, applyStyleForLandscapeImg: applyStyleForLandscapeImg })),
            isLink && isLinkTextDefined && (React.createElement(TickerLink, { className: "ticker__link", dangerouslySetInnerHTML: { __html: link.text }, href: link.href, onClick: () => trackNavigationClick(link.href, link.text, 'ticker_link', 'click', id), isInverted: isInverted, layoutPlacement: updatedLayoutPlacement, typeTokenSet: typeTokenSet, applyStyleForNoImage: applyStyleForNoImage, applyStyleForLandscapeImg: applyStyleForLandscapeImg })),
            !isLink && isLinkTextDefined && (React.createElement(ButtonComponent, { componentId: id, btnStyle: btnStyle, subject: "ticker_button", href: link.href, inputKind: "link", label: link.text, target: target, isInverted: isInverted, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, typeTokenSet: typeTokenSet, applyStyleForNoImage: applyStyleForNoImage })))));
};
Ticker.propTypes = {
    btnStyle: PropTypes.string,
    buttonVariation: PropTypes.string,
    className: PropTypes.string,
    fullPageTheme: PropTypes.oneOf(['standard', 'inverted']),
    hasBorders: PropTypes.bool,
    hasConsistentSpacing: PropTypes.bool,
    hasMinimalBottomMargin: PropTypes.bool,
    hasRoundedImage: PropTypes.bool,
    hasSolidBorders: PropTypes.bool,
    hideTopBorder: PropTypes.bool,
    id: PropTypes.string,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    imageMinWidth: PropTypes.oneOf([48, 56, 64, 72]),
    index: PropTypes.number,
    isInvertedTheme: PropTypes.bool,
    isLink: PropTypes.bool,
    isSpecialTheme: PropTypes.bool,
    link: PropTypes.shape({
        href: PropTypes.string,
        text: PropTypes.string
    }).isRequired,
    marginTopType: PropTypes.oneOf(['small', 'none', 'large']),
    shouldEnableBundleComponentAnalytics: PropTypes.bool,
    target: PropTypes.string,
    text: PropTypes.string.isRequired,
    trackingNamespace: PropTypes.object,
    typeTokenSet: PropTypes.oneOf(['default', 'utility']),
    variationName: PropTypes.string,
    variations: PropTypes.shape({
        imagePosition: PropTypes.oneOf(['left', 'right']),
        layoutPlacement: PropTypes.oneOf([
            `side-by-side`,
            `text-below-mobile-only`,
            `dense`
        ])
    })
};
Ticker.displayName = 'Ticker';
module.exports = Ticker;
//# sourceMappingURL=Ticker.js.map

/***/ }),

/***/ 78250:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const { asThemedComponent } = __webpack_require__(20223);
module.exports = asThemedComponent(asConfiguredComponent(__webpack_require__(99010), 'Ticker'));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 28934:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const ResponsiveAsset = __webpack_require__(73275);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const { BaseText, BaseLink } = __webpack_require__(76955);
const { BREAKPOINTS } = __webpack_require__(96472);
const { ButtonWrapper } = __webpack_require__(18974);
const { getTypographyStyles, calculateSpacing, getColorStyles } = __webpack_require__(26865);
const { getSectionSpacingStyling } = __webpack_require__(16800);
const getBaseFlexSettings = () => `
  display: flex;
  align-items: center;
  justify-content: center;
`;
const removeTopBorderSettings = () => `
  border-top: 0px
`;
const TickerWrapper = styled.section.withConfig({
    displayName: 'TickerWrapper'
}) `
  ${getBaseFlexSettings()}
  ${({ layoutPlacement }) => layoutPlacement === 'text-below-mobile-only' &&
    `
      flex-direction: column;
      @media (min-width: ${BREAKPOINTS.md}) {
        flex-direction: row;
      }`}

  ${({ applyStyleForLandscapeImg }) => applyStyleForLandscapeImg &&
    `
      @media (max-width: ${BREAKPOINTS.md}) {
        flex-direction: column;
      }
      `}
  ${({ hasBorders, isInverted, theme }) => hasBorders &&
    (isInverted
        ? `
      border-width: 1px 0;
      border-style: solid;
      ${getColorStyles(theme, 'border-color', 'colors.discovery.body.white.divider')};
    `
        : `
      border-width: 1px 0;
      border-style: solid;
      ${getColorStyles(theme, 'border-color', 'colors.discovery.body.white.divider')};
    `)}

  ${({ hasSolidBorders, theme }) => hasSolidBorders &&
    `border-width: 4px 0px;
    border-style: solid;
    ${getColorStyles(theme, 'border-color', 'colors.interactive.base.black')};`}

  ${({ isInverted, theme }) => isInverted &&
    `
      ${getColorStyles(theme, 'background', 'colors.consumption.lead.inverted.heading-background')};
    `}

  padding: ${calculateSpacing(2)} 0;

  @media (min-width: ${BREAKPOINTS.md}) {
    padding: ${calculateSpacing(1)} 0;
  }

  min-height: 88px;

  ${({ marginTopType, hasConsistentSpacing, theme }) => {
    if (marginTopType === 'small') {
        if (hasConsistentSpacing &&
            getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
            return `margin-bottom: ${calculateSpacing(0)};`;
        }
        return `margin-top: ${calculateSpacing(1)};`;
    }
    if (marginTopType === 'large') {
        if (hasConsistentSpacing &&
            getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
            return `margin-bottom: ${calculateSpacing(0)};`;
        }
        return `margin-top: ${calculateSpacing(4)};`;
    }
    if (marginTopType === 'none') {
        return 'margin-top: 0;';
    }
    return '';
}}

  ${({ hasMinimalBottomMargin }) => hasMinimalBottomMargin && `margin-bottom: ${calculateSpacing(2)};`}

  ${({ hideTopBorder }) => hideTopBorder && removeTopBorderSettings()}

  ${({ isSpecialTheme, theme }) => isSpecialTheme &&
    `
    ${getColorStyles(theme, 'background', 'colors.consumption.body.special.bg-photo')};
  `}
`;
const TickerText = styled.span.withConfig({ displayName: 'TickerText' }) `
  ${getBaseFlexSettings()}
  flex-direction: column;
  align-items: flex-start;
  ${({ applyStyleForLandscapeImg }) => applyStyleForLandscapeImg &&
    `
    @media (max-width: ${BREAKPOINTS.md}){
      align-items: center;
      gap: 0;
    };`}
  @media (min-width: ${BREAKPOINTS.md}) {
    flex-direction: row;
    gap: 5px;
    align-items: center;
  }

  ${({ layoutPlacement }) => {
    if (layoutPlacement === 'side-by-side') {
        return `
      margin-left: ${calculateSpacing(3)};
      gap: ${calculateSpacing(1)};
      @media (min-width: ${BREAKPOINTS.md}) {
        margin-left: 0;
      }
    `;
    }
    else if (layoutPlacement === 'dense') {
        return `
      display: block;
    `;
    }
    return '';
}}

  ${({ applyStyleForLandscapeImg }) => applyStyleForLandscapeImg &&
    `
    @media (max-width: ${BREAKPOINTS.md}) {
      &{
        ${ButtonWrapper}{
          margin-top: ${calculateSpacing(2)};
        }
      }
    }
  `}
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-primary')}
      ${({ applyStyleForNoImage }) => applyStyleForNoImage &&
    `
          @media (max-width: ${BREAKPOINTS.md}) {
            & {
              ${ButtonWrapper} {
                margin: 0 auto;
              }
            }
          }
        `}
`;
const TickerImage = styled(ResponsiveAsset).withConfig({
    displayName: 'TickerImage'
}) `
  position: relative;
  cursor: pointer;
  height: auto;

  && {
    ${ResponsiveImageContainer} {
      vertical-align: baseline;
    }
  }

  ${({ imagePosition }) => imagePosition === 'right' &&
    `
    order: 2;
    margin-top: ${calculateSpacing(2)};

    @media (min-width: ${BREAKPOINTS.md}) {
      margin-top: 0;
      margin-left: ${calculateSpacing(2)};
    }
  `};

  ${({ imagePosition, layoutPlacement }) => imagePosition === 'left' &&
    layoutPlacement === 'dense' &&
    `
    margin-right: ${calculateSpacing(2)};
    `};

  ${({ imagePosition }) => imagePosition === 'left' &&
    `
  @media (min-width: ${BREAKPOINTS.md}) {
    margin-right: ${calculateSpacing(2)};
  }
  `};

  ${({ hasRoundedImage }) => hasRoundedImage &&
    `
    border-radius: ${calculateSpacing(1)}
  `};

  ${({ imageMinWidth }) => imageMinWidth &&
    `
      min-width: ${imageMinWidth}px;
    `}
`;
const TickerHed = styled(BaseText).withConfig({ displayName: 'TickerHed' }) `
  ${({ layoutPlacement }) => layoutPlacement === 'text-below-mobile-only' &&
    `
      text-align: center;
      margin: ${calculateSpacing(2)} 0 ${calculateSpacing(2)} 0;
      @media (min-width: ${BREAKPOINTS.md}) {
        margin: 0 ${calculateSpacing(2)} 0 ${calculateSpacing(2)};
      }
      `}

  ${({ isLink, layoutPlacement }) => {
    if (isLink && layoutPlacement === 'dense') {
        return `margin-right: ${calculateSpacing(0.5)}`;
    }
    else if (!isLink) {
        return `
      @media (min-width: ${BREAKPOINTS.md}) {
        margin-right: ${calculateSpacing(2)};
      }
    `;
    }
    return '';
}};
  ${({ isInverted, theme }) => isInverted
    ? getColorStyles(theme, 'color', 'colors.consumption.lead.inverted.heading')
    : getColorStyles(theme, 'color', 'colors.consumption.lead.standard.heading')};

  ${({ isLink, layoutPlacement }) => isLink &&
    layoutPlacement !== 'dense' &&
    `
    padding-bottom: 0;
    @media (min-width: ${BREAKPOINTS.md}) {
      padding-right: 0;
    }
  `}

  ${({ typeTokenSet, theme }) => {
    if (typeTokenSet === 'utility') {
        return getTypographyStyles(theme, 'typography.definitions.utility.body');
    }
    return '';
}};
  @media (max-width: ${BREAKPOINTS.md}) {
    ${({ applyStyleForLandscapeImg }) => applyStyleForLandscapeImg && `margin-top: ${calculateSpacing(2)};`}
    ${({ applyStyleForNoImage }) => applyStyleForNoImage && `margin-top: 0;`}
  }
`;
TickerHed.defaultProps = {
    as: 'span',
    colorToken: 'colors.discovery.body.white.heading',
    typeIdentity: 'typography.definitions.discovery.description-feature'
};
const TickerLinkWrapper = styled(BaseLink).withConfig({
    displayName: 'TickerLinkWrapper'
}) ``;
const TickerLink = styled(BaseLink).withConfig({ displayName: 'TickerLink' }) `
  ${({ typeTokenSet, theme }) => typeTokenSet === 'utility'
    ? getTypographyStyles(theme, 'typography.definitions.utility.button-utility')
    : getTypographyStyles(theme, 'typography.definitions.discovery.description-feature')}

  &:visited,
  &:link {
    ${({ isInverted, theme }) => isInverted
    ? getColorStyles(theme, 'color', 'colors.interactive.base.white')
    : getColorStyles(theme, 'color', 'colors.interactive.base.brand-primary')};
  }

  &:hover {
    ${({ isInverted, theme }) => isInverted
    ? getColorStyles(theme, 'color', 'colors.interactive.base.brand-primary')
    : getColorStyles(theme, 'color', 'colors.interactive.base.dark')};
  }

  &:focus {
    ${({ isInverted, theme }) => isInverted
    ? getColorStyles(theme, 'color', 'colors.interactive.base.brand-primary')
    : getColorStyles(theme, 'color', 'colors.interactive.base.dark')};
  }
  @media (max-width: ${BREAKPOINTS.md}) {
    ${({ applyStyleForNoImage }) => applyStyleForNoImage && `margin: 0 auto;`}
  }
`;
module.exports = {
    TickerHed,
    TickerText,
    TickerImage,
    TickerWrapper,
    TickerLink,
    TickerLinkWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 99010:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const Ticker = __webpack_require__(53814);
Ticker.ImageLeft = asVariation(Ticker, 'ImageLeft', {
    imagePosition: 'left',
    layoutPlacement: 'text-below-mobile-only'
});
Ticker.ImageRight = asVariation(Ticker, 'ImageRight', {
    imagePosition: 'right',
    layoutPlacement: 'text-below-mobile-only'
});
Ticker.SideBySide = asVariation(Ticker, 'SideBySide', {
    imagePosition: 'left',
    layoutPlacement: 'side-by-side'
});
Ticker.Utility = asVariation(Ticker, 'Utility', {
    imagePosition: 'left',
    layoutPlacement: 'dense'
}, {
    typeTokenSet: 'utility',
    hasBorders: false,
    hasRoundedImage: true,
    imageMinWidth: 48,
    isLink: true
});
module.exports = Ticker;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 76704:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { ToggleChipListWrapper, LabelText, ListWrapper, ListItemWrapper, HelperText } = __webpack_require__(14952);
const { TrackComponentChannel } = __webpack_require__(78788);
const { asThemedComponent } = __webpack_require__(20223);
/**
 * ToggleChipList component
 *
 * @param {object} props - React Props
 * @param {string} [props.label] - Optional value used to displaying Label Text
 * @param {Array} [props.children] - Required value used to displaying contents in Toggle Chips
 * @param {string} [props.contentAlign] - String value used to content alignment
 * @param {string} [props.fullPageTheme] - Optional prop to apply an inverted (dark) theme
 * @param {string} [props.hasNoHorizontalScroll] - Optional prop for disabling the horizontal scroll
 * @param {bool} [props.hasIncreasedBottomMargin] - Optional prop to apply increased bottom margin to label
 * @param {bool} [props.hasLargeLabel] - Optional prop to apply larger font size to label, defaults to BaseText fontSize
 * @param {string} [props.hasSpacing] - Optional prop to set spacing for left and right
 * @param {boolean} [props.hasToggleGridColor] -if `true` show toggle grid
 * @param {string} [props.helper] - Optional value used to displaying Helper Text
 * @param {boolean} [props.hideGradientOnMobileView] - Boolean value set to false which hides gradient background color on mobile view
 * @param {object} [props.layout] - Property used to defining component's layout
 * @param {boolean} [props.isReadViewShopViewEnabled] - enables to have button inorder to show shopview and readview buttons
 * @param {boolean} [props.shouldEnableSnowPlowTracking] - boolean to have snowplow tracking enabled
 * @param {boolean} [props.shouldReduceTopPadding] - optional to reduce top padding of listwrapper
 * @returns {ReactElement} <div>
 */
const ToggleChipList = ({ label, children, contentAlign = 'left', fullPageTheme, hasNoHorizontalScroll = false, isReadViewShopViewEnabled, hasIncreasedBottomMargin = false, hasLargeLabel = false, hasSpacing = false, hasToggleGridColor, helper, hideGradientOnMobileView = false, shouldEnableSnowPlowTracking, shouldReduceTopPadding = false, layout = 'wrap' }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ToggleChipList'
        });
    }, []);
    return (React.createElement(ToggleChipListWrapper, { contentAlign: contentAlign, hasToggleGridColor: hasToggleGridColor, hideGradientOnMobileView: hideGradientOnMobileView, "data-testid": "toggle-chip-list-wrapper" },
        label && (React.createElement(LabelText, { fullPageTheme: fullPageTheme, hasIncreasedBottomMargin: hasIncreasedBottomMargin, hasLargeLabel: hasLargeLabel }, label)),
        React.createElement(ListWrapper, { contentAlign: contentAlign, layout: layout, isReadViewShopViewEnabled: isReadViewShopViewEnabled, hasNoHorizontalScroll: hasNoHorizontalScroll, hasToggleGridColor: hasToggleGridColor, shouldReduceTopPadding: shouldReduceTopPadding, className: "list-wrapper", "data-testid": "list-wrapper" }, React.Children.map(children, (child, index) => {
            if (child) {
                return (React.createElement(ListItemWrapper, { contentAlign: contentAlign, key: index, layout: layout, hasSpacing: hasSpacing, shouldEnableSnowPlowTracking: shouldEnableSnowPlowTracking, className: "list-item-wrapper", "data-testid": "list-item" }, child));
            }
            return null;
        })),
        helper && React.createElement(HelperText, null, helper)));
};
ToggleChipList.propTypes = {
    children: PropTypes.array.isRequired,
    contentAlign: PropTypes.oneOf(['left', 'center', 'right']),
    fullPageTheme: PropTypes.oneOf(['standard', 'inverted']),
    hasIncreasedBottomMargin: PropTypes.bool,
    hasLargeLabel: PropTypes.bool,
    hasNoHorizontalScroll: PropTypes.bool,
    hasSpacing: PropTypes.bool,
    hasToggleGridColor: PropTypes.bool,
    helper: PropTypes.string,
    hideGradientOnMobileView: PropTypes.bool,
    isReadViewShopViewEnabled: PropTypes.bool,
    label: PropTypes.string,
    layout: PropTypes.oneOf(['wrap', 'nowrap']),
    shouldEnableSnowPlowTracking: PropTypes.bool,
    shouldReduceTopPadding: PropTypes.bool
};
module.exports = asThemedComponent(ToggleChipList);
//# sourceMappingURL=ToggleChipList.js.map

/***/ }),

/***/ 99244:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const ToggleChipList = __webpack_require__(76704);
module.exports = asConfiguredComponent(ToggleChipList, 'ToggleChipList');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 14952:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BaseText } = __webpack_require__(76955);
const { calculateSpacing, getColorStyles, getColorToken } = __webpack_require__(26865);
const { resolveMenuKey } = __webpack_require__(70698);
const { BREAKPOINTS } = __webpack_require__(96472);
const ToggleChipListWrapper = styled.div.withConfig({
    displayName: 'ToggleChipListWrapper'
}) `
  ${({ hideGradientOnMobileView, theme }) => !hideGradientOnMobileView &&
    `
    @media (max-width: ${BREAKPOINTS.md}) {
       &::after {
        background: linear-gradient(90deg, rgba(${getColorToken(theme, resolveMenuKey(theme, 'colors.discovery.body.white.background'), { rgbOnly: true })}, 0) 0%, rgba(${getColorToken(theme, resolveMenuKey(theme, 'colors.discovery.body.white.background'), { rgbOnly: true })}, 1) 75%);
        width: ${calculateSpacing(7)};
        content: '';
        position: absolute;
        height: 8%;
        margin-top: ${calculateSpacing(1.25, 'px')};
        right: 0;
        padding-right: ${calculateSpacing(1)};
       }
    }
  `}
  ${({ hasToggleGridColor, theme }) => hasToggleGridColor &&
    `
  ${getColorStyles(theme, 'background-color', 'colors.background.light')};
  border-bottom:${calculateSpacing(4)} solid ;
  ${getColorStyles(theme, 'border-color', 'colors.background.light')};
  `}
  display: flex;
  flex-direction: column;
  ${({ contentAlign }) => {
    if (contentAlign === 'left') {
        return `align-items: flex-start`;
    }
    else if (contentAlign === 'center') {
        return `align-items: center`;
    }
    else if (contentAlign === 'right') {
        return `align-items: flex-end`;
    }
    return false;
}}
`;
const LabelText = styled(BaseText).withConfig({ displayName: 'LabelText' }) `
  margin: 0 0 ${calculateSpacing(1)};

  ${({ hasIncreasedBottomMargin }) => hasIncreasedBottomMargin &&
    ` 
    margin: 0 0 ${calculateSpacing(2)};
  `}

  ${({ hasLargeLabel }) => hasLargeLabel &&
    ` 
    font-size: 1rem;
    letter-spacing: 1px;
  `}

  ${({ fullPageTheme, theme }) => {
    if (fullPageTheme === 'inverted') {
        return getColorStyles(theme, 'color', 'colors.interactive.base.white');
    }
    return ``;
}}
`;
LabelText.defaultProps = {
    as: 'div',
    colorToken: 'colors.interactive.base.black',
    typeIdentity: 'typography.definitions.utility.label'
};
const applyListLayout = ({ layout }) => {
    if (layout === 'wrap') {
        return 'flex-wrap: wrap;';
    }
    return 'overflow-x: auto;';
};
const applyListAlignment = ({ contentAlign, layout }) => {
    if (layout === 'nowrap')
        return '';
    switch (contentAlign) {
        case 'left':
            return 'justify-content: flex-start;';
        case 'center':
            return 'justify-content: center;';
        case 'right':
            return 'justify-content: flex-end;';
        default:
            return '';
    }
};
const ListWrapper = styled.div.withConfig({ displayName: 'ListWrapper' }) `
  display: flex;
  flex-direction: row;
  padding: ${calculateSpacing(2, 'px')} ${calculateSpacing(3)};
  ${({ shouldReduceTopPadding }) => shouldReduceTopPadding && `padding-top: ${calculateSpacing(1)};`}
  width: 100%;
  gap: ${calculateSpacing(1.5)};

  ${({ hasNoHorizontalScroll }) => hasNoHorizontalScroll &&
    ` &::-webkit-scrollbar 
    {
      display: none;
    }`}

  ${applyListLayout}
  
  ${applyListAlignment}
  
  ${({ hasToggleGridColor }) => hasToggleGridColor && `--grid-margin: ${calculateSpacing(3)};`}
  ${({ isReadViewShopViewEnabled }) => isReadViewShopViewEnabled &&
    `
        padding:${calculateSpacing(0.5)};
         gap: ${calculateSpacing(0.5)};
        `}
`;
const applyListItemAlignment = ({ contentAlign, layout, hasSpacing }) => {
    if (layout === 'wrap')
        return '';
    let contentAlignment = contentAlign;
    if (hasSpacing)
        contentAlignment = 'centerWithPadding';
    switch (contentAlignment) {
        case 'center':
            return `
        &:first-child {
          margin-left: auto;
        }

        &:last-child {
          margin-right: auto;
        }
      `;
        case 'right':
            return `
        &:first-child {
          margin-left: auto;
        }
      `;
        case 'centerWithPadding':
            return `
        @media (min-width: ${BREAKPOINTS.md}) {
          &:first-child {
            margin-left: auto;
          }

          &:last-child {
            margin-right: auto;
          }
        }

        @media (min-width: ${BREAKPOINTS.sm}) and (max-width: ${BREAKPOINTS.md}) {
          &:first-child {
            margin-left: 1.5rem;
          }
  
          &:last-child {
            margin-right: 1.5rem;
          }
        }          
        `;
        default:
            return '';
    }
};
const ListItemWrapper = styled.div.withConfig({
    displayName: 'ListItemWrapper'
}) `
  ${applyListItemAlignment}
`;
const HelperText = styled(BaseText).withConfig({ displayName: 'HelperText' }) `
  margin: ${calculateSpacing(1)} 0 0;
`;
HelperText.defaultProps = {
    as: 'div',
    colorToken: 'colors.interactive.base.dark',
    typeIdentity: 'typography.definitions.utility.assistive-text'
};
module.exports = {
    ToggleChipListWrapper,
    LabelText,
    ListWrapper,
    ListItemWrapper,
    HelperText
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 28150:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { ToutText, ToutHed, ToutWrapper, ToutDek, ToutButton } = __webpack_require__(15956);
/**
 * Tout component
 *
 * @param {object} props - React props
 * @param {string} [props.btnStyle] - prop to add styling to button
 * @param {string} props.target - Optional open link in a new tab
 * @param {string} props.rubric - Props to add externallink rubric
 * @param {string} props.dek - Props to add externallink dek
 * @param {string} props.source - Props to add label to button
 * @param {string} props.url - props to add link onclick of button
 * @returns {ReactElement} <div>
 */
const Tout = ({ btnStyle = 'filled', rubric, dek, source, target, url }) => {
    const buttonLabel = source || 'Explore Now';
    return (React.createElement(ToutWrapper, null,
        React.createElement(ToutText, null,
            rubric && (React.createElement(ToutHed, { "data-testid": "ToutHed", dangerouslySetInnerHTML: { __html: rubric } })),
            dek && (React.createElement(ToutDek, { "data-testid": "ToutDek", dangerouslySetInnerHTML: { __html: dek } }))),
        url && (React.createElement(ToutButton, { btnStyle: btnStyle, href: url, label: buttonLabel, target: target, inputKind: "link" }))));
};
Tout.propTypes = {
    btnStyle: PropTypes.string,
    dek: PropTypes.string,
    rubric: PropTypes.string,
    source: PropTypes.string,
    target: PropTypes.string,
    url: PropTypes.string
};
Tout.displayName = 'Tout';
module.exports = Tout;
//# sourceMappingURL=Tout.js.map

/***/ }),

/***/ 20464:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(28150);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 22738:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const UnifiedProductCardImage = __webpack_require__(43901);
const { UnifiedProductCardSlideNumber, UnifiedProductCardBrandName, UnifiedProductCardSuperlative, UnifiedProductCardNameWrapper, UnifiedProductCardName, UnifiedProductCardOfferContainer, UnifiedLandscapeProductCardWrapper, UnifiedProductCardContainer, UnifiedProductCardDetailsContainer, UnifiedProductCardDetails, UnifiedLandscapeProductCardDescDetails, UnifiedProductCardReviewSection, UnifiedProductCardDetailsWrapper } = __webpack_require__(22039);
const UnifiedProductCardOffers = __webpack_require__(58893);
const UnifiedProductCardProsConsAccordion = __webpack_require__(92801);
const UnifiedProductCardDescription = __webpack_require__(66530);
const UnifiedProductCardRating = __webpack_require__(24727);
const UnifiedLandscapeProductCard = ({ dangerousHed, imageProps, totalCount, isCttEnabled, preHeaderOne, hasProductHeight, brandName, hasDiffMinHeight, diffMinHeightValue, hasProductNameHeight, item, productNameTag, shouldRenderSuperlativeText, name, dangerousDek, dek, showClampedDescription, showMultipleOffers, trackingLayout, offersProps, showLocalisedOffers, showProsConsData, rating, showRatingData, pros, cons, prosConsLabel, prosLabel, consLabel, maxProsConsHeight, isSlide, isLandscapeProductCard, productDescriptionLineLength, textProsConsClick, isProsConsActive, showDiscountPercentLabel }) => {
    const { hasImageCreditText, hasMultipleImageSupport: hasMultipleImage, type, offers } = imageProps;
    const landscapeImageProps = {
        ...imageProps,
        isLandscapeProductCard
    };
    return (React.createElement(UnifiedLandscapeProductCardWrapper, { id: item.id },
        shouldRenderSuperlativeText() && dangerousHed && (React.createElement(UnifiedProductCardSuperlative, { dangerouslySetInnerHTML: {
                __html: dangerousHed
            }, isLandscapeProductCard: isLandscapeProductCard })),
        React.createElement(UnifiedProductCardContainer, { hasMultipleImage: hasMultipleImage },
            React.createElement(UnifiedProductCardImage, { ...landscapeImageProps }),
            React.createElement(UnifiedProductCardDetailsContainer, null,
                React.createElement(UnifiedProductCardDetailsWrapper, { hasMultipleImage: hasMultipleImage, hasImageCreditText: hasImageCreditText },
                    React.createElement(UnifiedProductCardDetails, null,
                        totalCount ? (React.createElement(UnifiedProductCardSlideNumber, { isCttEnabled: isCttEnabled, isLandscapeProductCard: isLandscapeProductCard }, preHeaderOne)) : null,
                        React.createElement(UnifiedProductCardBrandName, { isCttEnabled: isCttEnabled, totalCount: totalCount, className: "upc-brandName", isLandscapeProductCard: isLandscapeProductCard, dangerouslySetInnerHTML: {
                                __html: brandName
                            } }),
                        (dangerousHed || name) && (React.createElement(UnifiedProductCardNameWrapper, { hasDiffMinHeight: hasDiffMinHeight, diffMinHeightValue: diffMinHeightValue, isCttEnabled: isCttEnabled, isLandscapeProductCard: isLandscapeProductCard },
                            React.createElement(UnifiedProductCardName, { hasProductHeight: hasProductHeight, hasProductNameHeight: hasProductNameHeight, isLandscapeProductCard: isLandscapeProductCard, isCttEnabled: isCttEnabled, id: `upc_${item.id}`, as: type === 'embed' ? productNameTag : 'p', type: type, dangerouslySetInnerHTML: {
                                    __html: shouldRenderSuperlativeText()
                                        ? name
                                        : dangerousHed || name
                                } })))),
                    React.createElement(UnifiedProductCardOfferContainer, null, offers?.length ? (React.createElement(UnifiedProductCardOffers, { ...offersProps, showLocalisedOffers: showLocalisedOffers, showDiscountPercentLabel: showDiscountPercentLabel })) : null)))),
        React.createElement(UnifiedLandscapeProductCardDescDetails, null,
            React.createElement(UnifiedProductCardDescription, { dangerousDek: dangerousDek, dek: dek, isCttEnabled: isCttEnabled, item: item, showClampedDescription: showClampedDescription, showMultipleOffers: showMultipleOffers, totalCount: totalCount, trackingLayout: trackingLayout, isLandscapeProductCard: isLandscapeProductCard, productDescriptionLineLength: productDescriptionLineLength }),
            React.createElement(UnifiedProductCardReviewSection, null,
                showRatingData() && (React.createElement(UnifiedProductCardRating, { showProsConsData: showProsConsData(), isLandscapeProductCard: isLandscapeProductCard, rating: rating })),
                showProsConsData() && (React.createElement(UnifiedProductCardProsConsAccordion, { pros: pros, cons: cons, prosConsLabel: prosConsLabel, prosLabel: prosLabel, consLabel: consLabel, maxProsConsHeight: maxProsConsHeight, isSlide: isSlide, isLandscapeProductCard: isLandscapeProductCard, showRatingData: showRatingData(), isProsConsActive: isProsConsActive, textProsConsClick: textProsConsClick, isCttEnabled: isCttEnabled }))))));
};
UnifiedLandscapeProductCard.propTypes = {
    brandName: PropTypes.string.isRequired,
    cons: PropTypes.arrayOf(PropTypes.string),
    consLabel: PropTypes.string,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string.isRequired,
    dek: PropTypes.string,
    diffMinHeightValue: PropTypes.number,
    hasDiffMinHeight: PropTypes.bool,
    hasProductHeight: PropTypes.bool,
    hasProductNameHeight: PropTypes.bool,
    imageProps: PropTypes.object.isRequired,
    isCttEnabled: PropTypes.bool,
    isLandscapeProductCard: PropTypes.bool,
    isProsConsActive: PropTypes.bool,
    isSlide: PropTypes.bool,
    item: PropTypes.object,
    maxProsConsHeight: PropTypes.number,
    name: PropTypes.string.isRequired,
    offersProps: PropTypes.object.isRequired,
    preHeaderOne: PropTypes.string,
    productDescriptionLineLength: PropTypes.number,
    productNameTag: PropTypes.string,
    pros: PropTypes.arrayOf(PropTypes.string),
    prosConsLabel: PropTypes.string,
    prosLabel: PropTypes.string,
    rating: PropTypes.number,
    shouldRenderSuperlativeText: PropTypes.func,
    showClampedDescription: PropTypes.bool,
    showDiscountPercentLabel: PropTypes.bool,
    showLocalisedOffers: PropTypes.bool,
    showMultipleOffers: PropTypes.bool,
    showProsConsData: PropTypes.func,
    showRatingData: PropTypes.func,
    textProsConsClick: PropTypes.func,
    totalCount: PropTypes.number,
    trackingLayout: PropTypes.string
};
module.exports = UnifiedLandscapeProductCard;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 66678:
/***/ (function(module, __unused_webpack_exports, __webpack_require__) {

/* eslint complexity: ["error", 28] */
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState } = __webpack_require__(96540);
const isEmpty = __webpack_require__(62193);
const classnames = __webpack_require__(32485);
const ResponsiveAsset = __webpack_require__(73275);
const UnifiedProductCardOffers = __webpack_require__(58893);
const UnifiedProductCardImage = __webpack_require__(43901);
const UnifiedProductCardProsConsAccordion = __webpack_require__(92801);
const UnifiedProductCardRating = __webpack_require__(24727);
const UnifiedProductCardDescription = __webpack_require__(66530);
const UnifiedLandscapeProductCard = __webpack_require__(22738);
const PaletteProvider = __webpack_require__(49235);
const { productImpressionTracking, formatGtmData } = __webpack_require__(60162);
const { getXidAndAmguuid } = __webpack_require__(5344);
const { UnifiedProductCardWrapper, UnifiedProductCardObject, UnifiedProductCardHeader, UnifiedProductCardBody, UnifiedProductCardBrandName, UnifiedProductCardName, UnifiedProductCardNameWrapper, UnifiedProductCardSlideNumber, UnifiedProductCardSuperlative, ProductCardContainer } = __webpack_require__(22039);
const { WindowEventChannel } = __webpack_require__(51735);
// get cne ids for product image data
function getVideoIdsFromImage(image, maxImageCount) {
    // Filter and slice the image array to get video data
    const videoData = Array.isArray(image)
        ? image
            .filter((item) => item?.contentType === 'cnevideo' || item?.contentType === 'clip')
            .slice(0, maxImageCount)
        : [];
    return videoData
        .map((item) => {
        const { scriptUrl, id } = item;
        // Try to extract from scriptUrl
        if (scriptUrl &&
            typeof scriptUrl === 'string' &&
            scriptUrl.includes('/')) {
            const fileName = scriptUrl.split('/').pop();
            const cneVideoId = fileName?.split('.')[0];
            return cneVideoId || id || null;
        }
        // Fallback to id if scriptUrl is missing or invalid
        return id || null;
    })
        .filter(Boolean);
}
/**
 * UnifiedProductCard component
 *
 * @param {ResponsiveAsset.propTypes.media} props.image - Required image that contains altText, attributes, and source urls
 * @param {object} [props.brand] - Optional brand associated with product
 * @param {string} [props.dangerousDek] - Optional dangerousDek
 * @param {string} [props.dangerousHed] - Optional dangerousHed
 * @param {boolean} [props.hasAffiliateLinkDisabled] - Optional hasAffiliateLinkDisabled to read offer url instead of short url
 * @param {string} [props.index] - Optional index to set the item position
 * @param {Array} [props.offers] - Required array of offers to display on a product
 * @param {string} [props.url] - Required product url
 * @param {string} [props.preHeaderOne] - Optional param for displaying the slide number in slide variation
 * @param {string} [props.totalCount] - Optional param for displaying the total number of products in slide variation
 * @param {boolean} props.showMultipleOffers - Optional flag to show/hide multiple offers
 * @param {boolean} props.showProductNameAsH3 - Optional flag to show Product Name as H3 tag
 * @param {Array} props.aspectRatio - Optional flag for product image aspect ratio
 * @param {boolean} [props.showClampedProductDescription] - optinal flag for for enabling product description accordion data
 * @param {number} [props.productDescriptionLineLength]
 * @param {boolean} [props.shouldUseOutlinedButton] - optopnal prop to fetch the experiment variable
 * @param {boolean} [props.isMobileView] - optinal prop for mobile design changes
 * @param {Array} [props.pros] - pros data for product
 * @param {Array} [props.cons] - cons data for product
 * @param {string} [props.rating] - rating data for product
 * @param {object} [props.actionIdFlags] - Optional flags to enable actionId encoding on click
 * @param {bool} [props.theme] - Optional flag for theme, default value is standard
 * @param {string} [props.componentUsed] - Optional prop to fetch the component name
 * @param {boolean} [props.showDiscountPercentLabel] - Optional prop to fetch showDiscountPercentLabel flag
 * @returns {ReactElement} <div>
 */
// eslint-disable-next-line complexity
const UnifiedProductCard = ({ image, brand, dangerousHed, hasAffiliateLinkDisabled, offers, dangerousDek, url = '', type = 'card', preHeaderOne = null, totalCount = null, showMultipleOffers = false, index, isLazy = false, aspectRatio = [3, 4], isDropshipProduct, dropShipSellers, hasImpressionTracking, layoutName, sourceName, data_item = {}, contentId, showLocalisedOffers = false, showOfferUrl = false, layout, dek, hasDiffMinHeight = false, hasProductHeight = false, hasProductNameHeight = false, showOfferButton = false, diffMinHeightValue, showProductNameAsH3 = false, showClampedProductDescription = false, hasReadMoreFeature, productDescriptionLineLength, isCttEnabled = false, shouldUseOutlinedButton, shouldUseBlackButton, showSuperlativeText = false, name, isMobileView, shouldDisableCreditText, maxProsConsHeight = 5.5, pros, cons, rating, productMultiImageCount, hasImageCreditText, actionIdFlags = {}, prosConsLabel, prosLabel, consLabel, theme, isLandscapeModeEnabledInExperiment, componentUsed, hideLandscapeLayout = false, showDiscountPercentLabel = false }) => {
    const isSlide = !!totalCount;
    const imgIndex = React.useRef(0);
    const [isProsConsActive, setIsProsConsActive] = useState(false);
    const [offersLength, setOffersLength] = useState(offers?.length || 0);
    const handleProductOffersUpdate = (length) => {
        setOffersLength(length);
    };
    const isLandscapeProductCard = isLandscapeModeEnabledInExperiment || true;
    const hasOneColumnProductEmbed = !(hideLandscapeLayout || type === 'card');
    let productNameTag = 'p';
    if (showProductNameAsH3) {
        productNameTag = 'h3';
    }
    else if (totalCount) {
        productNameTag = 'h2';
    }
    const showClampedDescription = () => showClampedProductDescription && hasReadMoreFeature;
    const showProsConsData = () => {
        return data_item.hasProsConsFeature && !isEmpty(pros) && !isEmpty(cons);
    };
    const showRatingData = () => {
        return data_item.hasRatingFeature && rating;
    };
    const shouldRenderSuperlativeText = () => {
        return showSuperlativeText && isSlide;
    };
    const renderSuperlativeText = () => {
        return (shouldRenderSuperlativeText() &&
            dangerousHed && (React.createElement(UnifiedProductCardSuperlative, { dangerouslySetInnerHTML: {
                __html: dangerousHed
            } })));
    };
    const shouldEnableLandscapeLayout = () => isLandscapeProductCard &&
        !isMobileView &&
        (isSlide || hasOneColumnProductEmbed);
    const renderRating = () => {
        return (type !== 'card' &&
            showRatingData() && (React.createElement(UnifiedProductCardRating, { showProsConsData: showProsConsData(), rating: rating })));
    };
    const dropShipData = {
        isDropshipProduct,
        dropShipSellers,
        sourceName,
        data_item,
        contentId,
        showOfferUrl: showOfferUrl || hasAffiliateLinkDisabled,
        layout
    };
    const component = new Map([
        ['GridFourColumns', 'plp_grid'],
        ['ContentCarousel', 'carousel']
    ]);
    const brandName = (typeof brand === 'object' && brand?.name) || brand || '';
    const hasMultipleImage = data_item?.hasMultipleImageSupport && !isEmpty(image) && image?.length > 1;
    const maxImageCount = data_item?.showMultipleImageCount;
    const videoIds = getVideoIdsFromImage(image, maxImageCount);
    const getTotalCount = (image, maxCount = 0) => {
        if (!image)
            return undefined;
        const imagesArray = Array.isArray(image) ? image : [image];
        return Math.min(imagesArray.length, maxCount);
    };
    const itemComponent = () => {
        if (!hasMultipleImage &&
            ['cnevideo', 'clip'].includes(image?.contentType)) {
            return 'enhanced_product_card';
        }
        return hasMultipleImage || showRatingData() || showProsConsData()
            ? 'enhanced_product_card'
            : 'unified_product_card';
    };
    const itemPosition = data_item.index ?? index;
    const item = {
        ...data_item,
        id: data_item.id || data_item.productId,
        index: itemPosition,
        brand: {
            name: brandName
        },
        component: data_item.component || component.get(layout) || itemComponent(),
        total_index: getTotalCount(image, maxImageCount),
        hasMultipleImage,
        componentType: type !== 'card',
        rating,
        showProsConsData: showProsConsData(),
        videoIds,
        offersLength
    };
    delete item.imageLabels;
    delete item.source;
    delete item.multipleOffers;
    const cardProps = {
        'data-item': JSON.stringify(item)
    };
    const trackingLayout = layout || item.layout;
    const [xidAndAmguuid, setXidAndAmguuid] = React.useState({});
    const gtmTrackOnClick = (event, actionId, image_index, type = null, offerIndex = null) => {
        if (image_index !== undefined) {
            imgIndex.current = image_index;
        }
        formatGtmData({
            window,
            product: item,
            index: item.index,
            actionId,
            layout: trackingLayout,
            event,
            type,
            image_index: image_index === undefined ? imgIndex.current : image_index,
            offerIndex
        });
    };
    const textProsConsClick = () => {
        const type = isProsConsActive ? 'close' : 'open';
        setIsProsConsActive(!isProsConsActive);
        formatGtmData({
            window,
            product: { ...item, component: 'unified_product_card_pros_cons' },
            index: item.index,
            layout: trackingLayout,
            type
        });
    };
    const imageProps = {
        image,
        isLazy,
        offers,
        url,
        dropShipData,
        type,
        xidAndAmguuid,
        isMobileView,
        aspectRatio,
        gtmTrackOnClick,
        hasMultipleImageSupport: hasMultipleImage,
        showImageCreditText: data_item?.showImageCreditText,
        showMultipleImageCount: maxImageCount,
        shouldDisableCreditText,
        upcLazyLoading: 'lazy',
        productMultiImageCount,
        hasImageCreditText,
        actionIdFlags,
        component: componentUsed
    };
    const offersProps = {
        dangerousHed,
        type,
        offers,
        url,
        showMultipleOffers,
        showOfferButton,
        dropShipData,
        productId: item.id,
        gtmTrackOnClick,
        xidAndAmguuid,
        isCttEnabled,
        shouldUseOutlinedButton,
        shouldUseBlackButton,
        actionIdFlags,
        component: componentUsed,
        onProductOffersUpdate: handleProductOffersUpdate
    };
    const landscapeLayoutProps = {
        dangerousHed,
        imageProps,
        totalCount,
        isCttEnabled,
        preHeaderOne,
        hasProductHeight,
        brandName,
        name,
        hasDiffMinHeight,
        diffMinHeightValue,
        hasProductNameHeight,
        item,
        productNameTag,
        shouldRenderSuperlativeText,
        dangerousDek,
        dek,
        showClampedDescription,
        showMultipleOffers,
        trackingLayout,
        offersProps,
        showLocalisedOffers,
        showRatingData,
        showProsConsData,
        rating,
        pros,
        cons,
        prosConsLabel,
        prosLabel,
        consLabel,
        maxProsConsHeight,
        isSlide,
        isLandscapeProductCard,
        productDescriptionLineLength,
        isProsConsActive,
        textProsConsClick,
        showDiscountPercentLabel
    };
    const renderProsCons = () => {
        return (type !== 'card' &&
            showProsConsData() && (React.createElement(UnifiedProductCardProsConsAccordion, { pros: pros, cons: cons, maxProsConsHeight: maxProsConsHeight, isSlide: isSlide, prosConsLabel: prosConsLabel, prosLabel: prosLabel, consLabel: consLabel, isProsConsActive: isProsConsActive, textProsConsClick: textProsConsClick, isCttEnabled: isCttEnabled, isMobileView: isMobileView })));
    };
    const impressionTrackingClasses = [];
    if (hasImpressionTracking) {
        impressionTrackingClasses.push('impressionTracking');
        if (layoutName?.length) {
            impressionTrackingClasses.push(layoutName);
        }
    }
    const handleLoad = React.useCallback(() => {
        productImpressionTracking('ProductEmbed', document.getElementsByClassName('product-embed'));
    }, []);
    const handleScroll = React.useCallback(() => {
        productImpressionTracking('ProductEmbed', document.getElementsByClassName('product-embed'));
    }, []);
    React.useEffect(() => {
        this.scrollSubscription = window.Kendra.WINDOW_EVENT.on(WindowEventChannel.SCROLL_DEBOUNCE, handleScroll);
        this.loadSubscription = window.Kendra.WINDOW_EVENT.on(WindowEventChannel.LOAD_DEBOUNCE, handleLoad);
        const xidCookies = getXidAndAmguuid();
        setXidAndAmguuid(xidCookies);
        return () => {
            this.scrollSubscription && this.scrollSubscription.off();
            this.loadSubscription && this.loadSubscription.off();
        };
    }, [handleLoad, handleScroll]);
    return (React.createElement(PaletteProvider, { palette: theme },
        React.createElement(ProductCardContainer, { className: classnames({ 'product-embed': type === 'embed' }, [
                impressionTrackingClasses
            ]), ...cardProps }, shouldEnableLandscapeLayout() ? (React.createElement(UnifiedLandscapeProductCard, { ...landscapeLayoutProps })) : (React.createElement(UnifiedProductCardWrapper, { id: item.id, type: type, isSlide: isSlide },
            React.createElement(UnifiedProductCardObject, null,
                React.createElement(UnifiedProductCardHeader, null,
                    renderSuperlativeText(),
                    React.createElement(UnifiedProductCardImage, { ...imageProps }))),
            React.createElement(UnifiedProductCardBody, null,
                !!totalCount && (React.createElement(UnifiedProductCardSlideNumber, { isCttEnabled: isCttEnabled }, preHeaderOne)),
                React.createElement(UnifiedProductCardBrandName, { hasProductHeight: hasProductHeight, isCttEnabled: isCttEnabled, totalCount: totalCount, className: "upc-brandName", dangerouslySetInnerHTML: {
                        __html: brandName
                    } }),
                (dangerousHed || name) && (React.createElement(UnifiedProductCardNameWrapper, { hasDiffMinHeight: hasDiffMinHeight, diffMinHeightValue: diffMinHeightValue, isCttEnabled: isCttEnabled },
                    React.createElement(UnifiedProductCardName, { hasProductHeight: hasProductHeight, hasProductNameHeight: hasProductNameHeight, isCttEnabled: isCttEnabled, id: `upc_${item.id}`, as: type === 'embed' ? productNameTag : 'p', type: type, dangerouslySetInnerHTML: {
                            __html: shouldRenderSuperlativeText()
                                ? name
                                : dangerousHed || name
                        } }))),
                offers?.length > 0 && (React.createElement(UnifiedProductCardOffers, { ...offersProps, showLocalisedOffers: showLocalisedOffers, showDiscountPercentLabel: showDiscountPercentLabel })),
                type !== 'card' && (React.createElement(UnifiedProductCardDescription, { dangerousDek: dangerousDek, dek: dek, isCttEnabled: isCttEnabled, item: item, showClampedDescription: showClampedDescription, showMultipleOffers: showMultipleOffers, totalCount: totalCount, trackingLayout: trackingLayout, isMobileView: isMobileView, productDescriptionLineLength: productDescriptionLineLength })),
                renderRating(),
                renderProsCons()))))));
};
UnifiedProductCard.propTypes = {
    actionIdFlags: PropTypes.object,
    aspectRatio: PropTypes.arrayOf(PropTypes.number),
    brand: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
    componentUsed: PropTypes.string,
    cons: PropTypes.array,
    consLabel: PropTypes.string,
    contentId: PropTypes.string,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    data_item: PropTypes.object,
    dek: PropTypes.arrayOf(PropTypes.string),
    diffMinHeightValue: PropTypes.number,
    dropShipSellers: PropTypes.arrayOf(PropTypes.string),
    hasAffiliateLinkDisabled: PropTypes.bool,
    hasDiffMinHeight: PropTypes.bool,
    hasImageCreditText: PropTypes.bool,
    hasImpressionTracking: PropTypes.bool,
    hasProductHeight: PropTypes.bool,
    hasProductNameHeight: PropTypes.bool,
    hasReadMoreFeature: PropTypes.bool,
    hideLandscapeLayout: PropTypes.bool,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    index: PropTypes.number,
    isCttEnabled: PropTypes.bool,
    isDropshipProduct: PropTypes.bool,
    isLandscapeModeEnabledInExperiment: PropTypes.bool,
    isLazy: PropTypes.bool,
    isMobileView: PropTypes.bool,
    layout: PropTypes.string,
    layoutName: PropTypes.string,
    maxProsConsHeight: PropTypes.number,
    name: PropTypes.string,
    offers: PropTypes.arrayOf(PropTypes.object),
    preHeaderOne: PropTypes.string,
    productDescriptionLineLength: PropTypes.number,
    productMultiImageCount: PropTypes.number,
    pros: PropTypes.array,
    prosConsLabel: PropTypes.string,
    prosLabel: PropTypes.string,
    rating: PropTypes.string,
    shouldDisableCreditText: PropTypes.bool,
    shouldUseAmazonPrimeDayLiveAPIData: PropTypes.bool,
    shouldUseBlackButton: PropTypes.bool,
    shouldUseOutlinedButton: PropTypes.bool,
    showClampedProductDescription: PropTypes.bool,
    showDiscountPercentLabel: PropTypes.bool,
    showLocalisedOffers: PropTypes.bool,
    showMultipleOffers: PropTypes.bool,
    showOfferButton: PropTypes.bool,
    showOfferUrl: PropTypes.bool,
    showProductNameAsH3: PropTypes.bool,
    showSuperlativeText: PropTypes.bool,
    sourceName: PropTypes.string,
    theme: PropTypes.oneOf(['standard', 'inverted']),
    totalCount: PropTypes.number,
    type: PropTypes.oneOf(['card', 'embed']),
    url: PropTypes.string
};
UnifiedProductCard.defaultProps = {
    theme: 'standard'
};
UnifiedProductCard.displayName = 'UnifiedProductCard';
module.exports = UnifiedProductCard;
//# sourceMappingURL=UnifiedProductCard.js.map

/***/ }),

/***/ 66530:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState, useCallback } = __webpack_require__(96540);
const { shouldRenderDek, jsonmlToReact } = __webpack_require__(38759);
const { UnifiedProductCardDescriptionWrapper, UnifiedProductCardClampedDescription } = __webpack_require__(22039);
const { formatGtmData } = __webpack_require__(60162);
const UnifiedProductCardDescription = ({ dangerousDek, dek, isCttEnabled, item, showClampedDescription, showMultipleOffers, totalCount, trackingLayout, isLandscapeProductCard, productDescriptionLineLength }) => {
    const [showLess, setShowLess] = useState(false);
    const getDescription = () => {
        if (dek?.length && shouldRenderDek(dek)) {
            return (React.createElement(UnifiedProductCardDescriptionWrapper, { shouldHideDescriptionMargin: !!totalCount, isCttEnabled: isCttEnabled, showLess: showLess, showClampedProductDescription: showClampedDescription(), productDescriptionLineLength: productDescriptionLineLength }, jsonmlToReact.convert(dek)));
        }
        else if (!dek?.length && dangerousDek) {
            return (React.createElement(UnifiedProductCardDescriptionWrapper, { showMultipleOffers: showMultipleOffers, shouldHideDescriptionMargin: !!totalCount, dangerouslySetInnerHTML: { __html: dangerousDek }, showLess: showLess, isCttEnabled: isCttEnabled, showClampedProductDescription: showClampedDescription(), productDescriptionLineLength: productDescriptionLineLength }));
        }
        return null;
    };
    const onTextClick = useCallback(() => {
        const type = showLess ? 'close' : 'open';
        setShowLess(!showLess);
        formatGtmData(window, item, item.index, trackingLayout, null, '', type);
    }, [showLess, item, trackingLayout]);
    const getClampedDescription = () => {
        const descriptionContent = getDescription();
        if (!descriptionContent)
            return null;
        return (React.createElement(UnifiedProductCardClampedDescription, { lines: productDescriptionLineLength, linesInExtraLargeDesktop: productDescriptionLineLength, isCollapsible: true, showLess: showLess, offset: 2, onTextClick: onTextClick, showClampedProductDescription: showClampedDescription(), isLandscapeProductCard: isLandscapeProductCard }, descriptionContent));
    };
    return (React.createElement(React.Fragment, null, showClampedDescription() ? getClampedDescription() : getDescription()));
};
UnifiedProductCardDescription.propTypes = {
    dangerousDek: PropTypes.string,
    dek: PropTypes.arrayOf(PropTypes.string),
    isCttEnabled: PropTypes.bool,
    isLandscapeProductCard: PropTypes.bool,
    item: PropTypes.object,
    productDescriptionLineLength: PropTypes.number,
    showClampedDescription: PropTypes.func,
    showMultipleOffers: PropTypes.bool,
    totalCount: PropTypes.number,
    trackingLayout: PropTypes.string
};
UnifiedProductCardDescription.displayName = 'UnifiedProductCardDescription';
module.exports = UnifiedProductCardDescription;
//# sourceMappingURL=UnifiedProductCardDescription.js.map

/***/ }),

/***/ 43901:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const isEmpty = __webpack_require__(62193);
const short = __webpack_require__(60943);
const { connect } = __webpack_require__(67851);
const ResponsiveAsset = __webpack_require__(73275);
const Carousel = __webpack_require__(30830);
const { validateAndTransformOffers, getAffiliateData, getClipMetrics } = __webpack_require__(5344);
const { handleLinkClick } = __webpack_require__(43428);
const { trackClipEvent } = __webpack_require__(14307);
const { getAmazonAffiliateAttributes } = __webpack_require__(82063);
const { UnifiedProductEmbedImageLink, UnifiedProductCardImageCarousel, UnifiedProductCardVariantImage, UnifiedProductCardImageCreditText, UnifiedProductCardImageWrapper, UpcSingleImageWrapper } = __webpack_require__(22039);
const { extractTrackingParameters } = __webpack_require__(25203);
const UnifiedProductCardImage = ({ image, isLazy, offers, url, dropShipData, type = 'card', xidAndAmguuid, isMobileView, aspectRatio = [3, 4], gtmTrackOnClick, hasMultipleImageSupport, showImageCreditText, showMultipleImageCount, shouldDisableCreditText = false, upcLazyLoading, productMultiImageCount, hasImageCreditText, actionIdFlags = {}, isLandscapeProductCard, component = 'unified-product-card', amazonAffiliateTag }) => {
    const offerArr = validateAndTransformOffers(url, offers);
    const offer = {
        ...offerArr[0],
        ...xidAndAmguuid
    };
    const checkHasMultipleImages = hasMultipleImageSupport && !isEmpty(image) && image.length > 1;
    const affiliateData = getAffiliateData({ dropShipData, offer, type });
    // Get Amazon affiliate attributes for the actual offer URL
    const amazonAffiliateAttributes = getAmazonAffiliateAttributes(offer.purchaseUri, amazonAffiliateTag);
    const linkProps = {
        href: affiliateData.offerUrl,
        target: affiliateData.target,
        rel: affiliateData.rel,
        tabIndex: '-1',
        'data-offer-url': offer.purchaseUri || '',
        ...amazonAffiliateAttributes
    };
    const cardComponent = type === 'card' ? 'plp_grid' : component;
    if (!image || !image.altText)
        linkProps['aria-hidden'] = 'true';
    const upcId = React.useRef(short.generate('hex', 10));
    const renderImageCreditText = (image) => {
        return (React.createElement(UnifiedProductCardImageCreditText, { dangerouslySetInnerHTML: {
                __html: image?.credit
            } }));
    };
    const isActionIdEnabledForComponent = actionIdFlags?.enableActionIdForUPC;
    const enableActionIdMapping = affiliateData?.offerUrl?.includes('cna.st') &&
        isActionIdEnabledForComponent;
    const handleClick = (event, index, isClipType, clipId) => {
        if (isClipType) {
            const playPauseButton = event.target.closest('.responsive-clip__play-pause');
            // If a button with the 'responsive-clip__play-pause' class is found, prevent the default action
            // and exit the function to avoid unintended behavior
            if (playPauseButton) {
                event.preventDefault();
                const clipElement = event.target.closest('.responsive-clip');
                if (clipElement) {
                    const video = clipElement.querySelector('video');
                    // Only proceed if we actually have a video element
                    if (video) {
                        const type = video.paused ? 'paused' : 'resume';
                        const { width, height, progressPercent, inviewPercent, currentTime } = getClipMetrics(clipElement);
                        trackClipEvent({
                            width,
                            height,
                            inviewPercent,
                            progressPercent,
                            currentTime,
                            type,
                            clipId
                        });
                    }
                }
                return;
            }
        }
        const hrefValue = event?.currentTarget?.getAttribute('href');
        const queryParams = extractTrackingParameters();
        if (enableActionIdMapping && hrefValue) {
            event.preventDefault();
            handleLinkClick({
                event,
                gtmTrackOnClick,
                linkProps: hrefValue,
                setLinkProps: (href) => {
                    window.open(href, '_blank', 'noopener, noreferrer');
                },
                type: 'UPCImage',
                index,
                component: component !== 'unified-product-card' ? component : cardComponent,
                queryParams
            });
        }
        else {
            gtmTrackOnClick(event, null, index);
        }
    };
    const getImageData = React.useCallback((image, index) => {
        const isCNEVideo = image?.contentType === 'cnevideo';
        const isClipType = image?.contentType === 'clip';
        return (React.createElement(React.Fragment, null,
            React.createElement(UnifiedProductCardImageWrapper, { aspectRatio: aspectRatio === '' ? [3, 4] : aspectRatio, hasImageCreditText: hasImageCreditText, hasMultipleImageSupport: hasMultipleImageSupport }, !isEmpty(image) &&
                (!isEmpty(image.sources) ||
                    !isEmpty(image.segmentedSources) ||
                    image.scriptUrl) && (React.createElement(UnifiedProductEmbedImageLink, { onClick: (event) => handleClick(event, index, isClipType, image.id), className: isClipType ? 'asset-embed__responsive-asset' : 'image', isClipType: isClipType, isCNEVideo: isCNEVideo, ...linkProps },
                React.createElement(ResponsiveAsset, { ...image, onClick: (event) => handleClick(event, index, isClipType, image.id), hasNativeImgLazyLoading: !isClipType && !isCNEVideo, isLazy: isLazy, imageAttributes: { loading: upcLazyLoading }, shouldDisableAds: isCNEVideo, shouldLoopVideo: isCNEVideo, shouldPlayContinuously: !isCNEVideo, hasCNEVideoInProductCard: isCNEVideo, upcId: upcId.current })))),
            showImageCreditText &&
                hasImageCreditText &&
                !shouldDisableCreditText &&
                renderImageCreditText(image)));
    }, 
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [
        image,
        showImageCreditText,
        hasImageCreditText,
        shouldDisableCreditText,
        isLazy,
        upcLazyLoading
    ]);
    const videoDotIndexes = React.useMemo(() => checkHasMultipleImages
        ? image.reduce((acc, item, index) => {
            if ((index < showMultipleImageCount &&
                item.contentType === 'cnevideo') ||
                // showMultipleImageCount is used to ensure number of videoDots are equal to number of images
                item.contentType === 'clip') {
                acc.push(index);
            }
            return acc;
        }, [])
        : [], [checkHasMultipleImages, image, showMultipleImageCount]);
    const memoizedimageData = React.useMemo(() => {
        return (checkHasMultipleImages &&
            image.map((img, index) => (React.createElement(React.Fragment, null, index < showMultipleImageCount && (React.createElement(Carousel.CarouselItem, { key: index, hasUPCMultipleImages: hasMultipleImageSupport },
                React.createElement(UnifiedProductCardVariantImage, { key: index }, getImageData(img, index))))))));
    }, [
        checkHasMultipleImages,
        image,
        getImageData,
        hasMultipleImageSupport,
        showMultipleImageCount
    ]);
    return checkHasMultipleImages ? (React.createElement(UnifiedProductCardImageCarousel, { showImageCreditText: showImageCreditText, isLandscapeProductCard: isLandscapeProductCard },
        React.createElement(Carousel, { hasControls: !isMobileView, hasPagination: true, controlPlacement: "space-between", controlPosition: "center", isDotClickable: true, hasSwipeCarouseList: true, hasCircularScrolling: true, gtmTrackOnClick: gtmTrackOnClick, isUpcEnabled: true, hasUPCMultipleImages: hasMultipleImageSupport, shouldEnableScrollToStart: false, videoDotIndexes: videoDotIndexes, upcId: upcId.current }, memoizedimageData))) : (React.createElement(UpcSingleImageWrapper, { isCoupledWithMultiImageProduct: productMultiImageCount > 1, hasImageCreditText: hasImageCreditText, isLandscapeProductCard: isLandscapeProductCard }, getImageData(image?.length > 1 ? image[0] : image)));
};
UnifiedProductCardImage.propTypes = {
    actionIdFlags: PropTypes.object,
    amazonAffiliateTag: PropTypes.string,
    aspectRatio: PropTypes.arrayOf(PropTypes.number),
    component: PropTypes.string,
    dropShipData: PropTypes.object,
    gtmTrackOnClick: PropTypes.func,
    hasImageCreditText: PropTypes.bool,
    hasMultipleImageSupport: PropTypes.bool,
    image: PropTypes.shape(ResponsiveAsset.propTypes),
    isLandscapeProductCard: PropTypes.bool,
    isLazy: PropTypes.bool,
    isMobileView: PropTypes.bool,
    offers: PropTypes.arrayOf(PropTypes.object),
    productMultiImageCount: PropTypes.number,
    shouldDisableCreditText: PropTypes.bool,
    showImageCreditText: PropTypes.bool,
    showMultipleImageCount: PropTypes.number,
    type: PropTypes.oneOf(['card', 'embed']),
    upcLazyLoading: PropTypes.string,
    url: PropTypes.string,
    xidAndAmguuid: PropTypes.object
};
const mapStateToProps = (state) => ({
    amazonAffiliateTag: state.commercePlatform?.amazonAffiliateTag
});
module.exports = connect(mapStateToProps)(UnifiedProductCardImage);
//# sourceMappingURL=UnifiedProductCardImage.js.map

/***/ }),

/***/ 58893:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { useRef, useEffect, useState } = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const { connect } = __webpack_require__(67851);
const ProductOffer = __webpack_require__(36314);
const translations = (__webpack_require__(1889)["default"]);
const { getDiscountPercentage } = __webpack_require__(74148);
const { getProductLocalisedOffers, countryCurrencyMapping } = __webpack_require__(63799);
const { currencySymbols, validateAndTransformOffers, getAffiliateData, isEllipsisActive, getValueWithCurrency } = __webpack_require__(5344);
const { handleLinkClick } = __webpack_require__(43428);
const { UnifiedProductCardPrice, UnifiedProductCardSalePrice, UnifiedProductCardOffer, UnifiedProductCardPriceWrapper, UnifiedProductCardRetailerName, UnifiedArrow, UnifiedProductCardOfferWrapper } = __webpack_require__(22039);
const { extractTrackingParameters } = __webpack_require__(25203);
const { getAmazonAffiliateAttributes } = __webpack_require__(82063);
const { normalizePrice } = __webpack_require__(65947);
const DEFAULT_COUNTRY = 'US';
const productOffer = (offer, dropShipData, gtmTrackOnClick, productId, index, isCttEnabled, shouldUseOutlinedButton, shouldUseBlackButton, type, component, showDiscountPercentLabel, amazonAffiliateTag, actionIdFlags = {}, showOfferButtonWithCardType = false) => {
    const affiliateData = getAffiliateData({ dropShipData, offer });
    // Get Amazon affiliate attributes for the actual offer URL (not the affiliate link)
    const amazonAffiliateAttributes = getAmazonAffiliateAttributes(offer.purchaseUri, amazonAffiliateTag);
    let price = offer.price ? `${offer.price}` : null;
    let reducedPrice = null;
    if (offer.comparisonPrice) {
        if (showOfferButtonWithCardType) {
            reducedPrice = `${offer.comparisonPrice}`;
        }
        else {
            price = `${offer.comparisonPrice}`;
            reducedPrice = `${offer.price}`;
        }
    }
    else if (offer.reducedPrice) {
        reducedPrice = `${offer.reducedPrice}`;
    }
    const isActionIdEnabledForComponent = type === 'embed'
        ? actionIdFlags?.enableActionIdForUPCEmbed
        : actionIdFlags?.enableActionIdForUPC;
    return (React.createElement(ProductOffer.ButtonWithSellerBelowPrice, { ctaHref: affiliateData.offerUrl, offerUrl: offer.offerUrl, offerId: offer.offerId, price: price, productId: productId, reducedPrice: reducedPrice, sellerName: offer.sellerName, showSellerNameBelowPrice: true, key: index, position: index, isExternalProduct: affiliateData.isAffiliateProduct, isCtaInternal: !affiliateData.isAffiliateProduct, gtmTrackOnClick: gtmTrackOnClick, isCttEnabled: isCttEnabled, shouldUseOutlinedButton: shouldUseOutlinedButton, shouldUseBlackButton: shouldUseBlackButton, isActionIdEnabledForComponent: isActionIdEnabledForComponent, component: component, showDiscountPercentLabel: showDiscountPercentLabel, dataAttrs: amazonAffiliateAttributes }));
};
const PriceComponent = ({ currency, price, comparisonPrice, isCttEnabled, showDiscountPercentLabel }) => {
    const { formatMessage } = useIntl();
    const normalizedPrice = typeof price === 'string' ? normalizePrice(price) : price;
    const normalizedComparisonPrice = typeof comparisonPrice === 'string'
        ? normalizePrice(comparisonPrice)
        : comparisonPrice;
    if (comparisonPrice && normalizedComparisonPrice < normalizedPrice) {
        const discountPercentage = getDiscountPercentage(String(price), String(comparisonPrice));
        const discountLabel = showDiscountPercentLabel && discountPercentage
            ? ` (${formatMessage(translations.UnifiedProductCardDiscountPercentageLabel, {
                percentage: discountPercentage
            })})`
            : '';
        return (React.createElement(React.Fragment, null,
            React.createElement(UnifiedProductCardSalePrice, { isCttEnabled: isCttEnabled },
                currencySymbols[currency],
                price),
            ' ',
            React.createElement(UnifiedProductCardPrice, { isCttEnabled: isCttEnabled },
                currencySymbols[currency],
                comparisonPrice,
                discountLabel)));
    }
    return (React.createElement(UnifiedProductCardPrice, { isCttEnabled: isCttEnabled },
        currencySymbols[currency],
        price));
};
PriceComponent.propTypes = {
    comparisonPrice: PropTypes.number,
    currency: PropTypes.string,
    isCttEnabled: PropTypes.bool,
    price: PropTypes.number,
    showDiscountPercentLabel: PropTypes.bool
};
const UnifiedProductCardOffers = ({ amazonAffiliateTag, dangerousHed, type, offers, url, showLocalisedOffers, showMultipleOffers, dropShipData, gtmTrackOnClick, productId, showOfferButton, xidAndAmguuid, isCttEnabled, shouldUseOutlinedButton, shouldUseBlackButton, actionIdFlags = {}, component = 'unified-product-card', showDiscountPercentLabel, onProductOffersUpdate }) => {
    const { formatMessage } = useIntl();
    const linkRef = useRef(null);
    const defaultCurrencyOffers = showLocalisedOffers
        ? offers?.filter((offer) => offer.countryCode && offer.countryCode !== ''
            ? offer.countryCode === DEFAULT_COUNTRY
            : offer.currency === countryCurrencyMapping[DEFAULT_COUNTRY])
        : offers;
    const [productOffers, setProductOffers] = useState(validateAndTransformOffers(url, defaultCurrencyOffers));
    const retailerTextRef = useRef(null);
    const [sellerNameHasEllipsis, setsellerNameHasEllipsis] = useState(false);
    useEffect(() => {
        if (showLocalisedOffers) {
            setProductOffers(validateAndTransformOffers(url, getProductLocalisedOffers(DEFAULT_COUNTRY, offers)));
        }
        return () => { };
    }, [showLocalisedOffers, url, offers]);
    useEffect(() => {
        const retailerText = retailerTextRef.current;
        if (type === 'card') {
            setsellerNameHasEllipsis(isEllipsisActive(retailerText));
        }
    }, [type]);
    if (type === 'card') {
        const { currency, price, sellerName, reducedPrice, comparisonPrice: rawComparisonPrice } = productOffers[0];
        const comparisonPrice = rawComparisonPrice ?? reducedPrice;
        const offer = { ...productOffers[0], ...xidAndAmguuid };
        const cardComponent = component === 'unified-product-card' ? 'plp_grid' : component;
        const affiliateData = getAffiliateData({ dropShipData, offer, type });
        // Get Amazon affiliate attributes for the actual offer URL (not the affiliate link)
        const amazonAffiliateAttributes = getAmazonAffiliateAttributes(offer.purchaseUri, amazonAffiliateTag);
        const linkProps = {
            'data-buy-button': true,
            'data-offer-retailer': sellerName || '',
            'data-offer-url': offer.purchaseUri || '',
            ...amazonAffiliateAttributes,
            'aria-label': dangerousHed || '',
            href: affiliateData.offerUrl,
            target: affiliateData.target,
            rel: affiliateData.rel,
            className: 'product-offer__buy-button',
            id: offer.offerId
        };
        const isActionIdEnabledForComponent = actionIdFlags?.enableActionIdForUPC;
        const enableActionIdMapping = affiliateData?.offerUrl?.includes('cna.st') &&
            isActionIdEnabledForComponent;
        const handleClick = (event, label, position, link) => {
            const hrefValue = linkRef?.current?.href;
            const queryParams = extractTrackingParameters();
            if (enableActionIdMapping && hrefValue && hrefValue !== '') {
                event.preventDefault();
                handleLinkClick({
                    event,
                    gtmTrackOnClick,
                    linkProps: hrefValue,
                    setLinkProps: (newHref) => {
                        window.open(newHref, '_blank', 'noopener, noreferrer');
                    },
                    label,
                    position,
                    link,
                    type: 'upcCard',
                    component: cardComponent,
                    queryParams
                });
            }
            else {
                gtmTrackOnClick(event);
            }
        };
        if (showOfferButton) {
            let comparisonPriceWithCurrency = null;
            let priceWithCurrency = null;
            if (comparisonPrice) {
                comparisonPriceWithCurrency = getValueWithCurrency(currency, comparisonPrice);
            }
            priceWithCurrency = getValueWithCurrency(currency, price);
            return (React.createElement(UnifiedProductCardOfferWrapper, { onClick: (e) => gtmTrackOnClick(e) }, productOffer({
                ...offer,
                price: priceWithCurrency,
                comparisonPrice: comparisonPriceWithCurrency,
                ...xidAndAmguuid
            }, dropShipData, gtmTrackOnClick, productId, 0, isCttEnabled, shouldUseOutlinedButton, shouldUseBlackButton, type, cardComponent, showDiscountPercentLabel, amazonAffiliateTag, actionIdFlags)));
        }
        return (React.createElement(UnifiedProductCardOffer, null,
            React.createElement(UnifiedProductCardPriceWrapper, { isCttEnabled: isCttEnabled, onClick: (event, label, position, link) => {
                    handleClick(event, label, position, link);
                } }, price && (React.createElement("a", { ref: linkRef, ...linkProps }, PriceComponent({
                currency,
                price,
                comparisonPrice,
                isCttEnabled,
                showDiscountPercentLabel
            })))),
            React.createElement(UnifiedProductCardRetailerName, { className: "upcRetailerNameWrapper", sellerNameHasEllipsis: sellerNameHasEllipsis, isCttEnabled: isCttEnabled, onClick: (event, label, position, link) => handleClick(event, label, position, link) },
                React.createElement("a", { ref: linkRef, ...linkProps },
                    React.createElement("span", { className: "upcRetailerNameBlock" },
                        React.createElement("span", { className: "upcRetailerName", ref: retailerTextRef }, sellerName || formatMessage(translations.defaultOfferCtaText))),
                    React.createElement("span", { className: "upcicons" },
                        React.createElement(UnifiedArrow, { "aria-hidden": true }))))));
    }
    else if (type === 'embed' && showMultipleOffers) {
        onProductOffersUpdate(productOffers.length);
        const offersList = productOffers.map((offer, index) => {
            const offerDetails = {
                ...offer,
                ...xidAndAmguuid
            };
            return productOffer(offerDetails, dropShipData, gtmTrackOnClick, productId, index, isCttEnabled, shouldUseOutlinedButton, shouldUseBlackButton, type, component, showDiscountPercentLabel, amazonAffiliateTag, actionIdFlags);
        });
        return (React.createElement(UnifiedProductCardOfferWrapper, { onClick: (e) => gtmTrackOnClick(e) }, offersList));
    }
    return (React.createElement(UnifiedProductCardOfferWrapper, null, productOffer(productOffers[0], dropShipData, gtmTrackOnClick, productId, 0, isCttEnabled, shouldUseOutlinedButton, shouldUseBlackButton, type, component, showDiscountPercentLabel, amazonAffiliateTag, actionIdFlags)));
};
UnifiedProductCardOffers.propTypes = {
    actionIdFlags: PropTypes.object,
    amazonAffiliateTag: PropTypes.string,
    component: PropTypes.string,
    dangerousHed: PropTypes.string,
    dropShipData: PropTypes.object,
    gtmTrackOnClick: PropTypes.func,
    isCttEnabled: PropTypes.bool,
    offers: PropTypes.arrayOf(PropTypes.object),
    onProductOffersUpdate: PropTypes.func,
    productId: PropTypes.string,
    shouldUseBlackButton: PropTypes.bool,
    shouldUseOutlinedButton: PropTypes.bool,
    showDiscountPercentLabel: PropTypes.bool,
    showLocalisedOffers: PropTypes.bool,
    showMultipleOffers: PropTypes.bool,
    showOfferButton: PropTypes.bool,
    type: PropTypes.oneOf(['card', 'embed']),
    url: PropTypes.string,
    xidAndAmguuid: PropTypes.object
};
const mapStateToProps = (state) => ({
    amazonAffiliateTag: state.commercePlatform?.amazonAffiliateTag
});
module.exports = connect(mapStateToProps)(UnifiedProductCardOffers);
//# sourceMappingURL=UnifiedProductCardOffers.js.map

/***/ }),

/***/ 92801:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { useCallback } = __webpack_require__(96540);
const { useIntl } = __webpack_require__(46984);
const LargeChevronIcon = __webpack_require__(708);
const { UnifiedProductCardProConsAccordionItemContainerDataUl, UnifiedProductCardProConsAccordionContainer, UnifiedProductCardProConsAccordionItemContainer, UnifiedProductCardProConsAccordionItemContainerLabel, UnifiedProductCardProConsAccordionLabelContainer, UnifiedProductCardProConsAccordionItemContainerButton, UnifiedProductCardProConsAccordionItemContainerContent, UnifiedProductCardProConsAccordionItemContainerTitle, UnifiedProductCardProConsAccordionItemContainerData } = __webpack_require__(22039);
const { default: translations } = __webpack_require__(1889);
const UnifiedProductCardProsConsAccordion = ({ pros, cons, maxProsConsHeight, isSlide, prosConsLabel, prosLabel, consLabel, isProsConsActive, textProsConsClick, isLandscapeProductCard, showRatingData, isCttEnabled, isMobileView }) => {
    const { formatMessage } = useIntl();
    const renderItems = useCallback((items, prefix) => (React.createElement(UnifiedProductCardProConsAccordionItemContainerDataUl, { maxProsConsHeight: maxProsConsHeight, isSlide: isSlide, isMobileView: isMobileView }, items.map((item, index) => (React.createElement(UnifiedProductCardProConsAccordionItemContainerData, { key: `${prefix}-${index}`, isCttEnabled: isCttEnabled, dangerouslySetInnerHTML: {
            __html: item
        } }))))), [maxProsConsHeight, isSlide, isCttEnabled, isMobileView]);
    return (React.createElement(UnifiedProductCardProConsAccordionContainer, { isLandscapeProductCard: isLandscapeProductCard, showRatingData: showRatingData },
        React.createElement(UnifiedProductCardProConsAccordionItemContainer, { isActive: isProsConsActive, onClick: textProsConsClick },
            React.createElement(UnifiedProductCardProConsAccordionLabelContainer, { isLandscapeProductCard: isLandscapeProductCard },
                React.createElement(UnifiedProductCardProConsAccordionItemContainerLabel, { isLandscapeProductCard: isLandscapeProductCard, dangerouslySetInnerHTML: {
                        __html: prosConsLabel ||
                            formatMessage(translations.UnifiedProductCardProsConsTitle)
                    } })),
            React.createElement(UnifiedProductCardProConsAccordionItemContainerButton, { isActive: isProsConsActive, ButtonIcon: LargeChevronIcon, role: "button", isIconButton: true, label: "AccordionItemContainerButton", width: "0.5rem", height: "0.5rem" })),
        React.createElement(UnifiedProductCardProConsAccordionItemContainerContent, { isActive: isProsConsActive },
            React.createElement(UnifiedProductCardProConsAccordionItemContainerTitle, { isActive: isProsConsActive, isLandscapeProductCard: isLandscapeProductCard, dangerouslySetInnerHTML: {
                    __html: prosLabel ||
                        formatMessage(translations.UnifiedProductCardProsLabel)
                } }),
            renderItems(pros, 'pro'),
            React.createElement(UnifiedProductCardProConsAccordionItemContainerTitle, { isActive: isProsConsActive, isLandscapeProductCard: isLandscapeProductCard, dangerouslySetInnerHTML: {
                    __html: consLabel ||
                        formatMessage(translations.UnifiedProductCardConsLabel)
                } }),
            renderItems(cons, 'con'))));
};
UnifiedProductCardProsConsAccordion.propTypes = {
    cons: PropTypes.array,
    consLabel: PropTypes.string,
    isCttEnabled: PropTypes.bool,
    isLandscapeProductCard: PropTypes.bool,
    isMobileView: PropTypes.bool,
    isProsConsActive: PropTypes.bool,
    isSlide: PropTypes.bool,
    maxProsConsHeight: PropTypes.number,
    pros: PropTypes.array,
    prosConsLabel: PropTypes.string,
    prosLabel: PropTypes.string,
    showRatingData: PropTypes.func,
    textProsConsClick: PropTypes.func
};
module.exports = UnifiedProductCardProsConsAccordion;
//# sourceMappingURL=UnifiedProductCardProsConsAccordion.js.map

/***/ }),

/***/ 24727:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { useIntl } = __webpack_require__(46984);
const { default: translations } = __webpack_require__(1889);
const { UnifiedProductCardRatingLabel, UnifiedProductCardRatingWrapper } = __webpack_require__(22039);
const UnifiedProductCardRating = ({ rating, showProsConsData, isLandscapeProductCard }) => {
    const { formatMessage } = useIntl();
    return (React.createElement(UnifiedProductCardRatingWrapper, { showProsConsData: showProsConsData, isLandscapeProductCard: isLandscapeProductCard },
        React.createElement(UnifiedProductCardRatingLabel, { showProsConsData: showProsConsData, isLandscapeProductCard: isLandscapeProductCard, dangerouslySetInnerHTML: {
                __html: `${formatMessage(translations.UnifiedProductCardRatingTitle)} ${rating}/10`
            } })));
};
UnifiedProductCardRating.propTypes = {
    isLandscapeProductCard: PropTypes.bool,
    rating: PropTypes.string,
    showProsConsData: PropTypes.func
};
module.exports = UnifiedProductCardRating;
//# sourceMappingURL=UnifiedProductCardRating.js.map

/***/ }),

/***/ 51125:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { connect: connectToStore } = __webpack_require__(67851);
const { asConfiguredComponent } = __webpack_require__(12892);
const UnifiedProductCard = __webpack_require__(11763);
const mapStateToProps = (state) => ({
    showDiscountPercentLabel: state.commercePlatform?.showDiscountPercentLabel
});
const ConfiguredUnifiedProductCard = asConfiguredComponent(UnifiedProductCard, 'UnifiedProductCard');
module.exports = connectToStore(mapStateToProps)(ConfiguredUnifiedProductCard);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 22039:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { BREAKPOINTS } = __webpack_require__(96472);
const Arrow = __webpack_require__(43222);
const Clamp = __webpack_require__(48286);
const Button = __webpack_require__(73730);
const { ButtonIcon } = __webpack_require__(18974);
const { BaseText, BaseLink } = __webpack_require__(76955);
const { ResponsiveClipVideoContainer, ResponsiveClipWrapper } = __webpack_require__(91783);
const { CarouselWrapper, CarouselListWrapper, CarouselFooter, CarouselListButton, CarouselFooterItemDots, CarouselControlButton } = __webpack_require__(44802);
const { calculateSpacing, getColorStyles, getTypographyStyles, getColorToken, minScreen, isInverted, minMaxScreen } = __webpack_require__(26865);
const { BodyWrapper } = __webpack_require__(29912);
const { ButtonWrapper, ButtonLabel, ButtonIconWrapper } = __webpack_require__(18974);
const animationSpeed = '0.2s';
const UnifiedProductCardSalePrice = styled(BaseText).withConfig({
    displayName: 'UnifiedProductCardSalePrice'
}) `
  text-decoration: line-through;
  ${({ theme }) => `  ${getColorStyles(theme, 'color', isInverted(theme)
    ? 'colors.consumption.body.inverted.body'
    : 'colors.consumption.body.standard.subhed')};
  `};

  ${({ isCttEnabled }) => isCttEnabled &&
    getTypographyStyles('typography.definitions.commerce.call-to-action')}
`;
UnifiedProductCardSalePrice.defaultProps = {
    as: 'span',
    colorToken: 'colors.consumption.body.standard.link',
    typeIdentity: 'typography.definitions.utility.button-utility'
};
const UnifiedProductCardRetailerName = styled(BaseText).withConfig({
    displayName: 'UnifiedProductCardRetailerName'
}) `
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding: 0;
  width: 100%;
  line-height: revert;

  a {
    display: flex;
    gap: ${({ sellerNameHasEllipsis }) => sellerNameHasEllipsis ? '0' : calculateSpacing(0.5)};
    width: 100%;
  }

  .upcRetailerNameBlock {
    display: grid;
  }

  .upcRetailerName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .upcicons {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in;
    margin: auto;
    margin-left: 0;
    border-radius: 100px;
    background: ${({ theme }) => `${getColorToken(theme, 'colors.interactive.base.highlight')}`};
    width: 1rem;
    height: 1rem;
    text-align: center;
    aspect-ratio: 1/1;
  }

  ${({ isCttEnabled }) => isCttEnabled &&
    getTypographyStyles('typography.definitions.commerce.call-to-action')}
`;
UnifiedProductCardRetailerName.defaultProps = {
    as: 'span',
    colorToken: 'colors.interactive.base.black',
    typeIdentity: 'typography.definitions.utility.button-core'
};
const UnifiedArrow = styled(Arrow).withConfig({
    displayName: 'UnifiedArrowIcon'
}) `
  transform: rotate(-45deg);
`;
const UnifiedProductCardPrice = styled(BaseText).withConfig({
    displayName: 'UnifiedProductCardPrice'
}) `
  ${({ theme }) => `  ${getColorStyles(theme, 'color', isInverted(theme)
    ? 'colors.consumption.body.inverted.body'
    : 'colors.consumption.body.standard.subhed')};
  `};

  ${({ isCttEnabled }) => isCttEnabled &&
    getTypographyStyles('typography.definitions.commerce.call-to-action')}
`;
UnifiedProductCardPrice.defaultProps = {
    as: 'span',
    colorToken: 'colors.consumption.body.standard.link',
    typeIdentity: 'typography.definitions.utility.button-utility'
};
const UnifiedProductCardOffer = styled(BaseText).withConfig({
    displayName: 'UnifiedProductCardOffer'
}) `
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0;

  .upcRetailerNameWrapper > a {
    transition: text-decoration 1s ease;
    text-decoration: underline solid transparent;
    text-underline-offset: 2px;
  }

  ${minMaxScreen(0, BREAKPOINTS.md)} {
    .upcRetailerNameWrapper > a {
      text-decoration: underline;
    }

    .upcicons {
      position: relative;
      transform: translate(0, -2px);
    }
  }

  &:hover {
    .upcicons {
      transform: translate(2px, -2px);
    }

    .upcRetailerNameWrapper > a {
      text-decoration: underline;
    }
  }
`;
UnifiedProductCardOffer.defaultProps = {
    as: 'div'
};
const UnifiedProductCardPriceWrapper = styled(BaseText).withConfig({
    displayName: 'UnifiedProductCardPriceWrapper'
}) `
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  padding: 0;
  width: 100%;
  min-height: ${calculateSpacing(2)};

  overflow: hidden;
  gap: ${calculateSpacing(0.5)};

  a {
    text-decoration: none;
  }

  ${({ isCttEnabled }) => isCttEnabled &&
    getTypographyStyles('typography.definitions.commerce.call-to-action')}
`;
UnifiedProductCardPriceWrapper.defaultProps = {
    as: 'div',
    colorToken: 'colors.interactive.base.black',
    typeIdentity: 'typography.definitions.utility.button-core'
};
const UnifiedProductCardNameWrapper = styled(BaseText).withConfig({
    displayName: 'UnifiedProductCardNameWrapper'
}) `
  display: flex;
  padding: ${calculateSpacing(0.5)} 0 ${calculateSpacing(1)} 0;

  h2 {
    font-weight: bold;
  }

  ${({ isLandscapeProductCard }) => isLandscapeProductCard &&
    `
    justify-content: center;
    padding-bottom: ${calculateSpacing(2)};
  `}

  h3 {
    ${getTypographyStyles('typography.definitions.globalEditorial.context-secondary')}
  }

  ${({ isCttEnabled }) => isCttEnabled &&
    getTypographyStyles('typography.definitions.commerce.product-title')}
`;
UnifiedProductCardNameWrapper.defaultProps = {
    as: 'div',
    colorToken: 'colors.consumption.body.standard.link',
    typeIdentity: 'typography.definitions.utility.button-utility'
};
const ProductCardContainer = styled.div.withConfig({
    displayName: 'UnifiedProductCardBody'
}) ``;
ProductCardContainer.defaultProps = {
    as: 'div'
};
const UnifiedProductCardBrandName = styled(BaseText).withConfig({
    displayName: 'UnifiedProductCardBrandName'
}) `
  ${({ totalCount }) => !totalCount &&
    `
      margin-top: ${calculateSpacing(1)} !important;
  `}

  padding: ${calculateSpacing(1)} 0 0 0;
  width: 100%;
  height: ${calculateSpacing(3.5)};
  min-height: ${calculateSpacing(3)};
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  ${({ hasProductHeight }) => hasProductHeight &&
    `
    line-height: ${calculateSpacing(2)};
  `}
  ${({ isLandscapeProductCard }) => isLandscapeProductCard &&
    `
    text-align: center;
    padding: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: auto;
    max-height: 2lh;
    min-height: ${calculateSpacing(1)};
    white-space: normal;
  `}

  ${({ isCttEnabled }) => isCttEnabled &&
    getTypographyStyles('typography.definitions.commerce.brand-name')}
`;
UnifiedProductCardBrandName.defaultProps = {
    colorToken: 'colors.interactive.base.black',
    typeIdentity: 'typography.definitions.globalEditorial.context-primary'
};
const UnifiedProductCardName = styled(BaseText).withConfig({
    displayName: 'UnifiedProductCardName'
}) `
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  height: 2lh;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  ${({ isLandscapeProductCard }) => isLandscapeProductCard &&
    `
      text-align: center;
      height: auto;
      max-height: 3lh;
      -webkit-line-clamp: 3;
    `}

  && {
    ${({ isCttEnabled }) => isCttEnabled &&
    getTypographyStyles('typography.definitions.commerce.product-title')}
    margin:0;
  }
`;
UnifiedProductCardName.defaultProps = {
    colorToken: 'colors.interactive.base.black',
    typeIdentity: 'typography.definitions.globalEditorial.context-secondary'
};
const UnifiedProductCardClampedDescription = styled(Clamp).withConfig({
    displayName: 'UnifiedProductCardClampedDescription'
}) `
  && {
    ${ButtonWrapper} {
      transform-origin: center;
      margin: ${calculateSpacing(1)} 0 0;
      padding: 0;
      min-width: auto;
      height: 24px;
      gap: ${calculateSpacing(0.5)};
    }
    ${ButtonLabel} {
      padding: 0;
      width: 100%;
      text-align: left;
      ${getTypographyStyles('typography.definitions.utility.button-bulletin')};
      ${({ theme }) => `  ${getColorStyles(theme, 'color', 'colors.interactive.base.black')};`};
    }
  }
  ${ButtonIconWrapper} {
    svg {
      width: 24px;
      height: 24px;
    }
    padding: 0;
  }
`;
const UnifiedProductCardDescriptionWrapper = styled(BaseText).withConfig({
    displayName: 'UnifiedProductCardDescriptionWrapper'
}) `
  &&& {
    margin-top: 1rem;
  }
  padding: 0;
  width: 100%;

  p {
    margin-block-start: ${calculateSpacing(2)};
    margin-block-end: ${calculateSpacing(2)};
  }

  p:last-of-type {
    margin-block-start: ${calculateSpacing(2)};
    margin-block-end: 0;
  }

  p:first-of-type {
    margin-block-start: 0;
    margin-block-end: ${calculateSpacing(2)};
  }

  p:first-of-type:last-of-type {
    margin-block-start: 0;
    margin-block-end: 0;
  }

  a:not(.button):link,
  a:not(.button):visited,
  a:not(.button):hover,
  a:not(.button):focus,
  a:not(.button):active {
    text-decoration: underline;
  }

  ${({ showLess, showClampedProductDescription, productDescriptionLineLength }) => showClampedProductDescription &&
    `
    ${showLess
        ? `overflow: hidden;`
        : `
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: ${productDescriptionLineLength};
  `}
`}

  ${({ isCttEnabled }) => isCttEnabled &&
    getTypographyStyles('typography.definitions.commerce.product-description')}
`;
UnifiedProductCardDescriptionWrapper.defaultProps = {
    as: 'div',
    colorToken: 'colors.consumption.body.standard.body',
    typeIdentity: 'typography.definitions.consumptionEditorial.description-embed'
};
const UnifiedProductCardBody = styled.div.withConfig({
    displayName: 'UnifiedProductCardBody'
}) `
  display: grid;
  width: 100%;
  text-align: left;
`;
const UnifiedProductCardImageWrapper = styled.div.withConfig({
    displayName: 'UnifiedProductCardImageWrapper'
}) `
  display: grid;
  position: relative;
  padding-bottom: ${({ aspectRatio }) => (aspectRatio[1] / aspectRatio[0]) * 100}%;
  width: 100%;
  height: 0;
  place-items: center;

  &::before {
    display: inline-block;
    ${({ theme }) => getColorStyles(theme, 'background-color', 'colors.consumption.body.standard.bg-card')};
    padding-top: ${({ aspectRatio }) => (aspectRatio[1] / aspectRatio[0]) * 100}%;
    ${minScreen(BREAKPOINTS.md)} {
      padding-top: ${({ aspectRatio }) => (aspectRatio[1] / aspectRatio[0]) * 100}%;
    }
    content: '';
  }
  overflow: hidden;

  picture,
  img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    background-color: ${({ theme }) => `${getColorToken(theme, 'colors.consumption.body.standard.bg-card')}`};
    max-width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .cne-player-container {
    /* stylelint-disable-next-line declaration-no-important */
    position: inherit !important;
  }

  .video-js {
    /* stylelint-disable-next-line declaration-no-important */
    padding-top: 0 !important;
  }

  &&&& ${ResponsiveClipVideoContainer} {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    cursor: default;

    video {
      width: 100%;
      object-fit: contain;
    }
    ${ButtonIcon} {
      width: auto;
      height: auto;
    }
  }

  ${ResponsiveClipWrapper} {
    position: inherit;
  }

  ${({ hasMultipleImageSupport, hasImageCreditText }) => !hasImageCreditText && hasMultipleImageSupport && `margin-bottom: 0.5rem`}
`;
const UnifiedProductCardHeader = styled.div.withConfig({
    displayName: 'UnifiedProductCardHeader'
}) `
  position: relative;
`;
const UnifiedProductCardObject = styled.div.withConfig({
    displayName: 'UnifiedProductCardObject'
}) `
  display: flex;
  flex-direction: column;
  border: 1px solid;
  border-color: transparent;
`;
const UnifiedProductCardWrapper = styled.div.withConfig({
    displayName: 'UnifiedProductCardWrapper'
}) `
  position: relative;
  margin: 0;

  ${({ type, isSlide }) => type === 'embed' &&
    `
      margin: 0 auto ${calculateSpacing(6)};
      max-width: ${isSlide ? calculateSpacing(48) : calculateSpacing(70)};
      ${BodyWrapper} > .body__inner-container > && {
        ${minScreen(BREAKPOINTS.md)} {
          margin-right: auto;
          margin-left: auto;
        }
      }
  `}
`;
const UnifiedProductCardSlideNumber = styled.span.withConfig({
    displayName: 'UnifiedProductCardSlideNumber'
}) `
  display: flex;
  flex-direction: column;
  align-items: ${({ isLandscapeProductCard }) => isLandscapeProductCard ? 'center' : 'flex-start'};
  margin-top: ${({ isLandscapeProductCard }) => isLandscapeProductCard ? '0' : '16px'};
  padding: ${({ isLandscapeProductCard }) => isLandscapeProductCard
    ? `${calculateSpacing(0)} ${calculateSpacing(0)} ${calculateSpacing(1)}`
    : '0'};

  ${({ isCttEnabled }) => isCttEnabled
    ? getTypographyStyles('typography.definitions.commerce.label')
    : getTypographyStyles('typography.definitions.globalEditorial.numerical-small')}
  ${({ theme }) => `  ${getColorStyles(theme, 'color', 'colors.consumption.body.standard.body-deemphasized')};
  `};
`;
const UnifiedProductCardOfferWrapper = styled.div.withConfig({
    displayName: 'UnifiedProductCardOfferWrapper'
}) `
  padding: 0;

  .product-offer__cta-block {
    display: grid;
  }

  div:last-of-type {
    margin-bottom: 0;
  }
`;
const UnifiedProductCardOfferContainer = styled.div.withConfig({
    displayName: 'UnifiedProductCardOfferContainer'
}) `
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  gap: ${calculateSpacing(8)};
  ${UnifiedProductCardOfferWrapper} {
    width: 100%;
  }
`;
const UnifiedProductEmbedImageLink = styled(BaseLink).withConfig({
    displayName: 'UnifiedProductEmbedImageLink'
}) `
  grid-area: product-image;
  grid-column: 1/2;
  grid-row: 1/2;
  ${({ isCNEVideo }) => isCNEVideo &&
    `
     width: 100%;
  `}

  ${({ hasGallerySlideBackground }) => !hasGallerySlideBackground && `padding-left: ${calculateSpacing(2)};`}

  &&&& {
    text-decoration: none;
  }
  ${minScreen(BREAKPOINTS.md)} {
    grid-row: 1/-1;
    padding-left: 0;
  }
  ${({ isClipType }) => isClipType && `padding-left: 0;`}
`;
const UnifiedProductCardImageCarousel = styled.div.withConfig({
    displayName: 'UnifiedProductCardImageCarousel'
}) `
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  ${({ isLandscapeProductCard }) => isLandscapeProductCard && `flex: 1;  margin: 0;`}

  ${CarouselWrapper} {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  ${CarouselListWrapper} {
    width: 100%;
    height: 100%;
  }

  ${CarouselListButton} {
    ${({ showImageCreditText }) => showImageCreditText &&
    `
    top: calc(50% - 20px);
    `}
  }

  &&& {
    ${ButtonIconWrapper} {
      .ButtonIcon {
        &&&& {
          width: 32px;
          height: 32px;
        }
      }

      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        width: 16px;
        height: 16px;
      }
    }
  }

  ${CarouselFooter} {
    margin: 0;

    ${CarouselFooterItemDots} {
      svg {
        path {
          stroke: ${getColorToken('colors.interactive.base.dark')};
        }
      }
    }
  }
  && ${CarouselControlButton} {
    &:active::before {
      width: auto;
      height: auto;
    }
  }
`;
const UnifiedProductCardVariantImage = styled.div.withConfig({
    displayName: 'UnifiedProductCardVariantImage'
}) `
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  picture,
  img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    background-color: ${({ theme }) => `${getColorToken(theme, 'colors.consumption.body.standard.bg-card')}`};
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    height: 100%;
  }
`;
const UnifiedProductCardImageCreditText = styled.div.withConfig({
    displayName: 'UnifiedProductCardImageCreditText'
}) `
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  margin-top: ${calculateSpacing(0.75)};
  height: 2lh;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  ${getTypographyStyles('typography.definitions.globalEditorial.context-tertiary')};
  ${({ theme }) => `  ${getColorStyles(theme, 'color', 'colors.consumption.body.standard.body')};`};
  overflow-wrap: anywhere;
`;
UnifiedProductCardImageCreditText.defaultProps = {
    colorToken: 'colors.consumption.body.standard.body',
    typeIdentity: 'typography.definitions.globalEditorial.context-tertiary'
};
const UpcSingleImageWrapper = styled.div.withConfig({
    displayName: 'upcSingleImageWrapper'
}) `
  ${({ isLandscapeProductCard }) => isLandscapeProductCard && `flex: 1;`}

  ${({ isCoupledWithMultiImageProduct, hasImageCreditText }) => isCoupledWithMultiImageProduct &&
    `margin-bottom: ${!hasImageCreditText ? 2 : 1.5}rem`}
`;
const UnifiedProductCardSuperlative = styled(BaseText).withConfig({
    displayName: 'UnifiedProductCardSuperlative'
}) `
  max-height: 3lh;
  overflow: hidden;

  ${({ isLandscapeProductCard }) => isLandscapeProductCard
    ? `margin-bottom: ${calculateSpacing(1)};`
    : `margin-bottom: ${calculateSpacing(1.25)};`}
`;
UnifiedProductCardSuperlative.defaultProps = {
    as: 'h2',
    colorToken: 'colors.interactive.base.black',
    typeIdentity: 'typography.definitions.consumptionEditorial.subhed-break-primary'
};
const UnifiedProductCardProConsAccordionContainer = styled.div.withConfig({
    displayName: 'UnifiedProductCardProConsAccordionContainer'
}) `
  margin-top: ${calculateSpacing(1.5)};
  border-top: 0.5px solid;

  ${({ isLandscapeProductCard, showRatingData }) => isLandscapeProductCard &&
    showRatingData &&
    `border-top: unset; margin-top: 0;`}

  border-bottom: 0.5px solid;
  overflow: hidden;
  ${({ theme }) => `${getColorStyles(theme, 'border-bottom-color', 'colors.consumption.body.standard.divider')};
    ${getColorStyles(theme, 'border-top-color', 'colors.consumption.body.standard.divider')};`}

  svg {
    float: right;
    fill: black;
    transform-origin: center;
    transition: all ${animationSpeed} ease-in-out;
    width: ${calculateSpacing(1.25)};
    height: ${calculateSpacing(1.25)};
  }
`;
const UnifiedProductCardProConsAccordionItemContainerLabel = styled.div.withConfig({
    displayName: 'UnifiedProductCardProConsAccordionItemContainerLabel'
}) `
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.black')};
  ${getTypographyStyles('typography.definitions.discovery.hed-bulletin-secondary')};
`;
UnifiedProductCardProConsAccordionItemContainerLabel.defaultProps = {
    typeIdentity: 'typography.definitions.discovery.hed-bulletin-secondary'
};
const UnifiedProductCardProConsAccordionLabelContainer = styled.div.withConfig({
    displayName: 'UnifiedProductCardProConsAccordionLabelContainer'
}) `
  display: inline-flex;
`;
const UnifiedProductCardProConsAccordionItemContainerContent = styled.div.withConfig({
    displayName: 'UnifiedProductCardProConsAccordionItemContainerContent'
}) `
  ${({ isActive }) => isActive
    ? `
      overflow: hidden;
      max-height: 1000px;
      transition: ${animationSpeed} linear;
      padding-bottom: ${calculateSpacing(2)};
     `
    : `
     max-height: 0px;
     transition: all ${animationSpeed};
     `}

  ${({ theme }) => getColorStyles(theme, 'color', 'colors.consumption.lead.standard.description')};
`;
const UnifiedProductCardProConsAccordionItemContainer = styled.div.withConfig({
    displayName: 'UnifiedProductCardProConsAccordionItemContainer'
}) `
  margin-top: 0.75rem;
  line-height: normal;
  ${({ isActive }) => !isActive && `margin-bottom: 0.75rem;`}
`;
const UnifiedProductCardProConsAccordionItemContainerButton = styled(Button.Utility).withConfig({
    displayName: 'UnifiedProductCardProConsAccordionItemContainerButton'
}) `
  fill: #615f66;
  float: right;
  transition: all 0.2s ease;
  padding: ${calculateSpacing(1)} ${calculateSpacing(0.5)};

  &,
  &:focus,
  &:hover {
    border: 0;
    background-color: transparent;
  }
  ${({ isActive }) => isActive && `transform: rotate(180deg);`}
`;
const UnifiedProductCardProConsAccordionItemContainerTitle = styled.div.withConfig({
    displayName: 'UnifiedProductCardProConsAccordionItemContainerTitle'
}) `
  ${({ isActive, isLandscapeProductCard }) => isActive &&
    `
    margin-top: ${isLandscapeProductCard ? calculateSpacing(1.5) : calculateSpacing(2)};
    padding-bottom: ${calculateSpacing(1)};
    `}

  ${getTypographyStyles('typography.definitions.discovery.hed-bulletin-secondary')};

  ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.black')};
`;
const UnifiedProductCardProConsAccordionItemContainerData = styled.li.withConfig({
    displayName: 'UnifiedProductCardProConsAccordionItemContainerData'
}) `
  ${({ isCttEnabled }) => getTypographyStyles(isCttEnabled
    ? 'typography.definitions.commerce.product-description'
    : 'typography.definitions.consumptionEditorial.description-embed')}
`;
const UnifiedProductCardProConsAccordionItemContainerDataUl = styled.ul.withConfig({
    displayName: 'UnifiedProductCardProConsAccordionItemContainerDataUl'
}) `
  &&& {
    margin: 0;
    list-style-type: disc;

    ${({ isSlide, isMobileView }) => {
    if (isSlide)
        return `&&&& { padding-inline-start: 20px; }`;
    if (isMobileView)
        return `&&&& { padding-inline-start: 5px; }`;
    return '';
}}
  }
  ${({ maxProsConsHeight }) => `max-height: ${maxProsConsHeight}em;`}
  overflow: hidden;
`;
const UnifiedProductCardRatingLabel = styled.div.withConfig({
    displayName: 'UnifiedProductCardRatingLabel'
}) `
  margin: ${calculateSpacing(1.5)} 0 0 0;

  ${({ isLandscapeProductCard }) => isLandscapeProductCard &&
    `
       margin: ${calculateSpacing(1.5)} 0;
       height: 1lh;
    `}

  ${getTypographyStyles('typography.definitions.discovery.hed-bulletin-secondary')};
  ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.black')};
  ${({ showProsConsData }) => !showProsConsData &&
    `
       margin-bottom:${calculateSpacing(1.5)};
    `}
`;
const UnifiedProductCardRatingWrapper = styled.div.withConfig({
    displayName: 'UnifiedProductCardRatingWrapper'
}) `
  margin-top: ${calculateSpacing(2)};
  border-top: 0.5px solid;
  ${({ theme }) => `${getColorStyles(theme, 'border-bottom-color', 'colors.consumption.body.standard.divider')};
  ${getColorStyles(theme, 'border-top-color', 'colors.consumption.body.standard.divider')};`}

  ${({ isLandscapeProductCard, showProsConsData, theme }) => (isLandscapeProductCard || !showProsConsData) &&
    `
    border-bottom: 0.5px solid;
    ${getColorStyles(theme, 'border-bottom-color', 'colors.consumption.body.standard.divider')};
  `}
`;
const UnifiedLandscapeProductCardWrapper = styled.div.withConfig({
    displayName: 'UnifiedLandscapeProductCardWrapper'
}) `
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto ${calculateSpacing(4.5)};
  border: 1px solid;
  padding: ${calculateSpacing(2)};
  max-width: none;
  ${({ theme }) => `${getColorStyles(theme, 'border-color', 'colors.consumption.body.standard.divider')};
   `};
`;
const UnifiedProductCardContainer = styled.div.withConfig({
    displayName: 'UnifiedProductCardContainer'
}) `
  display: inline-flex;
  gap: ${calculateSpacing(1)};
`;
const UnifiedProductCardDetailsContainer = styled.div.withConfig({
    displayName: 'UnifiedProductCardDetailsContainer'
}) `
  display: block;
  flex: 1;
  align-content: center;
`;
const UnifiedProductCardDetails = styled.div.withConfig({
    displayName: 'UnifiedProductCardDetails'
}) `
  display: grid;
  justify-items: center;
  align-items: center;
  width: 100%;
`;
const UnifiedLandscapeProductCardDescDetails = styled.div.withConfig({
    displayName: 'UnifiedLandscapeProductCardDescDetails'
}) ``;
UnifiedLandscapeProductCardDescDetails.defaultProps = {
    as: 'div'
};
const UnifiedProductCardReviewSection = styled.div.withConfig({
    displayName: 'UnifiedProductCardReviewSection'
}) ``;
UnifiedProductCardReviewSection.defaultProps = {
    as: 'div'
};
const UnifiedProductCardDetailsWrapper = styled.div.withConfig({
    displayName: 'UnifiedProductCardDetailsWrapper'
}) `
  ${({ hasImageCreditText, hasMultipleImage }) => {
    if (!hasMultipleImage && !hasImageCreditText) {
        return `
      margin-bottom: 0px;
    `;
    }
    if (hasMultipleImage && hasImageCreditText) {
        return `
      margin-bottom: ${calculateSpacing(7.5)};
    `;
    }
    if (!hasMultipleImage && hasImageCreditText) {
        return `
      margin-bottom: ${calculateSpacing(5)};
    `;
    }
    if (hasMultipleImage && !hasImageCreditText) {
        return `
      margin-bottom: ${calculateSpacing(3.75)};
    `;
    }
    return '';
}}
`;
UnifiedProductCardDetailsWrapper.defaultProps = {
    as: 'div'
};
module.exports = {
    ProductCardContainer,
    UnifiedProductCardWrapper,
    UnifiedProductCardObject,
    UnifiedProductCardHeader,
    UnifiedProductCardImageWrapper,
    UnifiedProductCardBody,
    UnifiedProductCardBrandName,
    UnifiedProductCardOffer,
    UnifiedProductCardName,
    UnifiedProductCardNameWrapper,
    UnifiedProductCardPrice,
    UnifiedProductCardRetailerName,
    UnifiedProductCardSalePrice,
    UnifiedArrow,
    UnifiedProductCardDescriptionWrapper,
    UnifiedProductCardClampedDescription,
    UnifiedProductCardPriceWrapper,
    UnifiedProductCardSlideNumber,
    UnifiedProductCardOfferWrapper,
    UnifiedProductCardOfferContainer,
    UnifiedProductEmbedImageLink,
    UnifiedProductCardSuperlative,
    UnifiedProductCardImageCarousel,
    UnifiedProductCardVariantImage,
    UnifiedProductCardImageCreditText,
    UnifiedProductCardProConsAccordionContainer,
    UnifiedProductCardProConsAccordionItemContainer,
    UnifiedProductCardProConsAccordionLabelContainer,
    UnifiedProductCardProConsAccordionItemContainerButton,
    UnifiedProductCardProConsAccordionItemContainerContent,
    UnifiedProductCardProConsAccordionItemContainerLabel,
    UnifiedProductCardProConsAccordionItemContainerTitle,
    UnifiedProductCardProConsAccordionItemContainerData,
    UnifiedProductCardProConsAccordionItemContainerDataUl,
    UnifiedProductCardRatingLabel,
    UnifiedProductCardRatingWrapper,
    UpcSingleImageWrapper,
    UnifiedLandscapeProductCardWrapper,
    UnifiedProductCardContainer,
    UnifiedProductCardDetailsContainer,
    UnifiedProductCardDetails,
    UnifiedLandscapeProductCardDescDetails,
    UnifiedProductCardReviewSection,
    UnifiedProductCardDetailsWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 1889:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
const react_intl_1 = __webpack_require__(46984);
exports["default"] = (0, react_intl_1.defineMessages)({
    defaultOfferCtaText: {
        id: 'UnifiedProductCard.DefaultOfferCtaText',
        defaultMessage: 'Shop Now',
        description: 'UPC default CTA text for Card variation'
    },
    UnifiedProductCardRatingTitle: {
        id: 'UnifiedProductCard.UnifiedProductCardRatingTitle',
        defaultMessage: 'OUR RATING:',
        description: 'UPC rating title'
    },
    UnifiedProductCardProsConsTitle: {
        id: 'UnifiedProductCard.UnifiedProductCardProsConsTitle',
        defaultMessage: 'Pros & Cons',
        description: 'UPC pros cons title'
    },
    UnifiedProductCardProsLabel: {
        id: 'UnifiedProductCard.UnifiedProductCardProsLabel',
        defaultMessage: 'Pros',
        description: 'UPC pros label'
    },
    UnifiedProductCardConsLabel: {
        id: 'UnifiedProductCard.UnifiedProductCardConsLabel',
        defaultMessage: 'Cons',
        description: 'UPC cons label'
    },
    UnifiedProductCardDiscountPercentageLabel: {
        id: 'UnifiedProductCard.UnifiedProductCardDiscountPercentageLabel',
        defaultMessage: '{percentage}% off',
        description: 'UPC Discount Percentage label'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 11763:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asVariation } = __webpack_require__(81372);
const UnifiedProductCard = __webpack_require__(66678);
UnifiedProductCard.Card = asVariation(UnifiedProductCard, 'Card', {
    type: 'card'
});
UnifiedProductCard.Embed = asVariation(UnifiedProductCard, 'Embed', {
    type: 'embed'
});
module.exports = UnifiedProductCard;
//# sourceMappingURL=variations.js.map

/***/ }),

/***/ 75019:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { TrackComponentChannel } = __webpack_require__(78788);
const { asConfiguredComponent } = __webpack_require__(12892);
const SectionTitle = __webpack_require__(35864);
const { EmbedWrapper, EmbedWrapperHed, EmbedWrapperDek, EmbedBody, GridWrapper } = __webpack_require__(99585);
/**
 * VersoEmbed component
 *
 * @param {object} props - React props
 * @param {Array} [props.body] - Required body formatted as JsonML document.
 * @param {string} [props.copilotId] - Optional top-level class to add
 * @param {string} [props.dangerousDek] - Optional HTML Dek.
 * @param {string} [props.dangerousHed] - Optional HTML Hed.
 * @param {string} [props.gridVariationForEmbed] - Sets the grid variation as wrapper for verso-embed
 * @param {bool} [props.isEmbedWrapperFullBleed] - Optional boolean if embed wrapper is full bleed
 * @param {string} [props.sectionTitleVariation] - Optional variation of SectionTitle to use, defaults to `LineAboveLineBelowTextCenter`
 * @param {bool} [props.shouldUseConstrainedParagraph] - constrain width of <p> tag in verso-embed
 * @param {bool} [props.shouldUseGridForEmbed] - Use Grid wrapper for verso-embed
 * @param {bool} [props.shouldUseGridWrapperForEmbed] - should use Grid(scaffolding) component as wrapper with different variations for embed
 *
 * @returns {ReactElement} <div>
 */
const VersoEmbed = ({ body, copilotId, dangerousDek, dangerousHed, gridVariationForEmbed = 'NarrowContentWithWideAdRail', isEmbedWrapperFullBleed = false, sectionTitleVariation = 'LineAboveLineBelowTextCenter', shouldUseConstrainedParagraph, shouldUseGridForEmbed = true, shouldUseGridWrapperForEmbed = false }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'VersoEmbed'
        });
    }, []);
    const SectionTitleComponent = SectionTitle[sectionTitleVariation];
    const GridWrapperComponent = GridWrapper[gridVariationForEmbed];
    const embedBody = (React.createElement(EmbedBody, { constrainPagragraph: shouldUseConstrainedParagraph, body: body, className: "verso-embed-container", shouldDisableMaxWidth: true }));
    const embedHeader = (React.createElement(React.Fragment, null,
        dangerousHed && (React.createElement(EmbedWrapperHed, { as: SectionTitleComponent, dangerousHed: dangerousHed })),
        dangerousDek && (React.createElement(EmbedWrapperDek, { dangerouslySetInnerHTML: { __html: dangerousDek } }))));
    return (React.createElement(React.Fragment, null,
        shouldUseGridWrapperForEmbed && (React.createElement(GridWrapperComponent, null,
            React.createElement(React.Fragment, null,
                embedHeader,
                embedBody))),
        shouldUseGridForEmbed && (React.createElement(EmbedWrapper, { copilotId: copilotId, isEmbedWrapperFullBleed: isEmbedWrapperFullBleed },
            embedHeader,
            embedBody)),
        !shouldUseGridForEmbed && !shouldUseGridWrapperForEmbed && (React.createElement(React.Fragment, null,
            embedHeader,
            embedBody))));
};
VersoEmbed.propTypes = {
    body: PropTypes.array,
    copilotId: PropTypes.string,
    dangerousDek: PropTypes.string,
    dangerousHed: PropTypes.string,
    gridVariationForEmbed: PropTypes.string,
    isEmbedWrapperFullBleed: PropTypes.bool,
    sectionTitleVariation: PropTypes.string,
    shouldUseConstrainedParagraph: PropTypes.bool,
    shouldUseGridForEmbed: PropTypes.bool,
    shouldUseGridWrapperForEmbed: PropTypes.bool
};
VersoEmbed.displayName = 'VersoEmbed';
module.exports = asConfiguredComponent(VersoEmbed, 'VersoEmbed');
//# sourceMappingURL=VersoEmbed.js.map

/***/ }),

/***/ 90111:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(75019);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 99585:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { BREAKPOINTS } = __webpack_require__(96472);
const { applyGridSpacing, cssVariablesGrid } = __webpack_require__(1123);
const { calculateSpacing, minScreen, getColorToken, getTypographyStyles, firstLetterDropCap } = __webpack_require__(26865);
const { BaseText } = __webpack_require__(76955);
const Grid = __webpack_require__(86659);
const Body = __webpack_require__(22652);
const commonStyle = `
  ${cssVariablesGrid()}
  ${applyGridSpacing('padding')}

  margin: 0 auto;
  width: 100%;
  max-width: ${BREAKPOINTS.xxl};
`;
const EmbedWrapper = styled.div.withConfig({
    displayName: 'EmbedWrapper'
}) `
  ${commonStyle}

  ${({ isEmbedWrapperFullBleed }) => isEmbedWrapperFullBleed &&
    css `
      padding-right: 0;
      padding-left: 0;
      max-width: 100%;
    `}
`;
const EmbedWrapperHed = styled.div.withConfig({
    displayName: 'EmbedWrapperHed'
}) `
  margin-bottom: ${calculateSpacing(2)};
`;
const EmbedWrapperDek = styled(BaseText).withConfig({
    displayName: 'EmbedWrapperDek'
}) `
  margin: 0 auto ${calculateSpacing(2)};
  padding-right: ${calculateSpacing(1)};
  padding-left: ${calculateSpacing(1)};
  max-width: ${calculateSpacing(75)};
  text-align: center;
  ${getTypographyStyles('typography.definitions.consumptionEditorial.description-core')}
`;
const GridWrapper = styled(Grid).withConfig({
    displayName: 'GridWrapper'
}) `
  ${commonStyle}
`;
const EmbedBody = styled(Body).withConfig({
    displayName: 'EmbedBody'
}) `
  p.has-dropcap {
    margin-top: ${calculateSpacing(4, 'px')};

    &::first-letter {
      ${firstLetterDropCap};
    }

    &.has-dropcap__lead-standard-heading {
      &::first-letter {
        padding: 0.1em 0.05em 0 0;
        color: ${getColorToken('colors.consumption.lead.standard.heading')};
      }
    }
  }
  ${({ constrainPagragraph }) => constrainPagragraph &&
    `
      inline-embed{
        display: block;
        p {
          display:inline-block;
          max-width: ${calculateSpacing(40.875)};
          ${minScreen(BREAKPOINTS.lg)} {
            max-width: ${calculateSpacing(91.5)};
          }
        }
      }
    `}
`;
module.exports = {
    EmbedWrapper,
    EmbedWrapperHed,
    EmbedWrapperDek,
    EmbedBody,
    GridWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 44103:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(73210)/* ["default"] */ .A);
const useLazyLoadComponent = __webpack_require__(70920);
const { ExternalContainer, VisualStorySingleCardContainer, InfoWrapper, Bubble } = __webpack_require__(23464);
const ResponsiveAsset = __webpack_require__(73275);
/**
 * VisualStorySingleCard component
 *
 * @param {string} [channel] - Required channel for firework.
 * @param {string} [caption] - Optional caption used by title
 * @param {string} [className] - Optional top-level class to add
 * @param {boolean} [props.hasDividerAbove] - Optional, to show or hide the top divider
 * @param {boolean} [props.hasDividerBelow] - Optional, to show or hide the bottom divider
 * @param {string} url - Required url reference for firework.
 * @returns {ReactElement} <blockquote>
 */
const VisualStorySingleCard = ({ dangerousHed = '', lede = {}, tout = {}, url = {} }) => {
    const { formatMessage } = useIntl();
    const [lazyLoadElementRef] = useLazyLoadComponent();
    if (!tout || !tout.sources || !lede || !lede.sources) {
        return null;
    }
    return (React.createElement(ExternalContainer, null,
        React.createElement(VisualStorySingleCardContainer, { href: url, ref: lazyLoadElementRef },
            React.createElement(ResponsiveAsset, { ...lede }),
            React.createElement(InfoWrapper, null,
                React.createElement("span", { className: "spacer" },
                    React.createElement(Bubble, null,
                        React.createElement(ResponsiveAsset, { ...tout })),
                    React.createElement("p", { className: "title", dangerouslySetInnerHTML: { __html: dangerousHed } }),
                    React.createElement("p", { className: "cta", dangerouslySetInnerHTML: {
                            __html: formatMessage(translations.exploreTheStory)
                        } }))))));
};
VisualStorySingleCard.propTypes = {
    className: PropTypes.string,
    dangerousHed: PropTypes.string,
    lede: PropTypes.object,
    tout: PropTypes.object,
    url: PropTypes.string
};
VisualStorySingleCard.displayName = 'VisualStorySingleCard';
module.exports = VisualStorySingleCard;
//# sourceMappingURL=VisualStorySingleCard.js.map

/***/ }),

/***/ 47660:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const { asThemedComponent } = __webpack_require__(20223);
const VisualStorySingleCard = __webpack_require__(44103);
module.exports = asThemedComponent(asConfiguredComponent(VisualStorySingleCard, 'VisualStorySingleCard'));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 23464:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BREAKPOINTS } = __webpack_require__(96472);
const { getColorToken, getTypographyStyles, calculateSpacing } = __webpack_require__(26865);
const CARD_MIN_SIZE = '160px';
const CARD_MAX_SIZE = '327px';
const MARGIN_SIZE = '16px';
const BALOON_SMALL = '70px';
const BALOON_MEDIUM = '85px';
const BALOON_BIG = '105px';
const ExternalContainer = styled.div.withConfig({
    displayName: 'ExternaContainer'
}) `
  .Content-card & {
    @media (min-width: ${BREAKPOINTS.md}) {
      position: relative;
      background: var(
        --bg,
        linear-gradient(
          104deg,
          #fff 25.08%,
          ${getColorToken('colors.background.brand')} 74.24%,
          #000 107.26%
        )
      );

      padding: 24px;

      &::before {
        position: absolute;
        top: 0;
        left: 0;

        box-shadow: 0 0 50px -25px rgba(0, 0, 0, 0.5);

        background: linear-gradient(
          109deg,
          rgba(0, 0, 0, 0.6) 0%,
          rgba(0, 0, 0, 0.6) 29.35%,
          rgba(0, 0, 0, 0.6) 100%
        );
        width: 100%;
        height: 100%;
        content: '';
        backdrop-filter: blur(80px);
      }
    }
  }
`;
const VisualStorySingleCardContainer = styled.a.withConfig({
    displayName: 'VisualStorySingleCardContainer'
}) `
  display: grid;
  position: relative;
  grid-auto-flow: column;
  z-index: 0;
  padding: 0 24px;
  min-width: ${CARD_MIN_SIZE};

  @media (min-width: ${BREAKPOINTS.md}) {
    margin: 0 auto;
    padding: 0;
    width: ${CARD_MAX_SIZE};
  }

  [data-testid='GenericCallout'] & {
    display: block;
    margin-top: ${calculateSpacing(-2)};
    width: 100%;
    @media (min-width: ${BREAKPOINTS.md}) {
      max-width: ${CARD_MAX_SIZE};
    }
  }

  .Content-card & {
    padding: 0;
  }

  .responsive-asset {
    border-radius: ${MARGIN_SIZE};
    height: auto;
    aspect-ratio: 9 / 16;

    picture {
      height: 100%;
    }

    &&& {
      figure.cne-video-embed {
        display: block;
        width: 100%;
        max-width: inherit; /* reset max-width in cnevideoembed component */
        height: 100%;
        overflow: hidden;

        .video-container {
          width: 100%;
          height: 100%;
        }
      }
    }

    img,
    .responsive-clip {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
`;
const InfoWrapper = styled.div.withConfig({
    displayName: 'InfoWrapper'
}) `
  position: absolute;
  bottom: ${MARGIN_SIZE};
  left: 0;
  z-index: 2000;
  outline: none;
  padding: 0 calc(${MARGIN_SIZE} + 24px);
  width: 100%;
  line-height: 1;

  @media (min-width: ${BREAKPOINTS.md}) {
    padding: 0 ${MARGIN_SIZE};
  }

  .Content-card & {
    padding: 0 ${MARGIN_SIZE};
  }

  [data-testid='GenericCallout'] & {
    @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
      bottom: 0;
      padding: calc(${MARGIN_SIZE} / 2);
    }
  }

  .spacer {
    display: block;
    border-radius: ${MARGIN_SIZE};
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    padding: ${MARGIN_SIZE};
    width: 100%;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    backdrop-filter: blur(10px);

    [data-testid='GenericCallout'] & {
      @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
        padding: calc(${MARGIN_SIZE} / 2);
      }
    }

    p.title {
      display: -webkit-box; /* stylelint-disable-line */
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      margin: 8px 0 4px 0;
      overflow: hidden;
      line-height: 1;
      color: ${getColorToken('colors.interactive.base.white')};
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-bulletin-primary')};

      @media (min-width: ${BREAKPOINTS.md}) {
        ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-primary')};
      }

      [data-testid='GenericCallout'] & {
        @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
          ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-bulletin-primary')};
        }
      }
    }

    p.cta {
      margin: 0;
      text-transform: uppercase;
      color: ${getColorToken('colors.interactive.base.white')};
      font-size: 12px;
      font-weight: 600;
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.utility.button-utility')};

      a {
        text-decoration: none;
        pointer-events: none;
        color: ${getColorToken('colors.interactive.base.white')};
      }

      [data-testid='GenericCallout'] & {
        @media (min-width: ${BREAKPOINTS.md}) and (max-width: ${BREAKPOINTS.lg}) {
          display: none;
        }
      }
    }

    &:hover {
      p.cta {
        text-decoration: underline;
      }
    }
  }
`;
const Bubble = styled.div.withConfig({
    displayName: 'bubble'
}) `
  .responsive-asset {
    margin: 3px auto;
    border: 3px solid transparent;
    border-radius: 50%;
    box-shadow: 0 0 0 2px ${getColorToken('colors.interactive.base.white')};
    background: none;
    width: ${BALOON_MEDIUM};
    height: ${BALOON_MEDIUM};
    overflow: hidden;

    ${({ theme }) => getColorToken(theme, 'colors.interactive.base.brand-primary')};

    @media (min-width: ${BREAKPOINTS.md}) {
      width: ${BALOON_BIG};
      height: ${BALOON_BIG};

      [data-testid='GenericCallout'] & {
        width: ${BALOON_SMALL};
        height: ${BALOON_SMALL};
      }
    }

    @media (min-width: ${BREAKPOINTS.lg}) {
      [data-testid='GenericCallout'] & {
        width: ${BALOON_MEDIUM};
        height: ${BALOON_MEDIUM};
      }
    }

    img {
      transition: transform 0.5s ease-in-out;

      &:hover {
        transform: scale(1.3);
      }
    }
  }
`;
module.exports = {
    ExternalContainer,
    VisualStorySingleCardContainer,
    InfoWrapper,
    Bubble
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 73210:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    exploreTheStory: {
        id: 'visualStorySingleCard.exploreTheStory',
        defaultMessage: 'Explore the story',
        description: 'Call to action to view the visual story experience'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 99685:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const get = __webpack_require__(58156);
const { useState, useRef, useEffect, useMemo } = React;
const { useResizeObserver } = __webpack_require__(70251);
const ResponsiveAsset = __webpack_require__(73275);
const { appendQueryToURI } = __webpack_require__(12311);
const { connector } = __webpack_require__(57744);
const { trackNavigationEvent } = __webpack_require__(14307);
const { enrichStoriesData, useVastParameter, getVideoId, usePausableTimeout, useWindowVisibility } = __webpack_require__(31105);
const StoryProgress = __webpack_require__(43590);
const StorySlide = __webpack_require__(45908);
const StoryActions = __webpack_require__(43266);
const StoryRecirculation = __webpack_require__(93833);
const StoryAdv = __webpack_require__(43488);
const { StoryContainer, StoryHeader, CNEVideoEmbedWrapper } = __webpack_require__(32124);
const videoQueryParams = {
    hideControls: true,
    aspectRatio: '9x16'
};
const viewedPositionAdv = [];
const adsGap = 5;
let vpmute = 1;
let injectedFix = false;
/**
 * A component that renders a visual story with slides and navigation
 *
 * @param {string} dangerousHed - The title of the story
 * @param {boolean} isMobileDevice - Check if it's a mobile device or not
 * @param {boolean} [isNoAds] - True if no ads should render, false otherwise
 * @param {Array} items - An array of slides (can contains CNE Videos, clips or images)
 * @param {Function} onSlideChange - A function executed every time a slide changes
 * @param {number} currentIndex - WThe starting slide index
 * @param {number} defaultDuration - default duration of a slide, if duration is missing in the properties
 * @param {Array} recirculation - An array with visual story recirculation items
 * @param {boolean} shouldPauseSlideWhenInActiveWindow - Pause the slide change if unfocused
 *
 * @returns {JSX.Element} Story component
 */
const Story = ({ componentConfig = {}, dangerousHed = '', isMobileDevice = true, isNoAds = false, items = [], onSlideChange = () => { }, currentIndex = 0, copilotCode = '', defaultDuration = 10000, recirculation = [], shouldPauseSlideWhenInActiveWindow = true }) => {
    const firstSlideIndex = 0;
    const itemsWithIndex = useMemo(() => {
        return enrichStoriesData(items, defaultDuration);
    }, [items, defaultDuration]);
    const lastSlideIndex = itemsWithIndex.length - 1;
    const [selectedSlide, setSelectedSlide] = useState(itemsWithIndex[firstSlideIndex]);
    const [isAdvVisibile, setIsAdvVisibile] = useState(false);
    const [isPaused, setIsPaused] = useState(false);
    const [shouldMute, setShouldMute] = useState(true);
    const [showRecirculationSLide, setShowRecirculationSLide] = useState(false);
    const paddingTopBottom = 64; // 32px padding top and bottom
    const minimumHeight = 550; // 550px is the minimum height for desktop
    const maximumHeight = 1011; // 1011px is the maximum height for desktop
    const [height, setHeight] = useState(isMobileDevice ? minimumHeight : maximumHeight);
    // vastParameter is used in the ADV calls
    const vastParameter = useRef(null);
    vastParameter.current = useVastParameter(copilotCode);
    /**
     * callSnowplowEvent
     * @param {string} type - type of action
     * @param {string} url - the url of cta (if present)
     * @param {string} label - the label of anchor into the cta card (if present)
     */
    /* istanbul ignore next */
    const callSnowplowEvent = (type, url, label) => {
        let visualStoryItemData;
        switch (type) {
            case 'impression':
            case 'forward':
            case 'back':
                visualStoryItemData = {
                    type,
                    subject: 'visual_story',
                    index: selectedSlide?.index,
                    total_index: lastSlideIndex + 1
                };
                trackNavigationEvent(visualStoryItemData);
                if (type === 'forward' || type === 'back') {
                    vpmute = 0;
                }
                break;
            case 'CTA':
                visualStoryItemData = {
                    type: 'impression',
                    subject: 'visual_story_cta',
                    index: selectedSlide?.index,
                    total_index: lastSlideIndex + 1,
                    items: [
                        {
                            content_url: url
                        }
                    ]
                };
                trackNavigationEvent(visualStoryItemData);
                break;
            case 'CTAlabel':
                visualStoryItemData = {
                    type: 'click',
                    subject: 'visual_story_cta',
                    index: selectedSlide?.index,
                    total_index: lastSlideIndex + 1,
                    items: [
                        {
                            content_url: url
                        }
                    ],
                    label
                };
                trackNavigationEvent(visualStoryItemData);
                break;
            case 'close':
            case 'unmute':
            case 'mute':
            case 'play':
            case 'pause':
                visualStoryItemData = {
                    type,
                    subject: 'visual_story'
                };
                trackNavigationEvent(visualStoryItemData);
                vpmute = 0;
                break;
            default:
        }
    };
    const noADVOnCopilotPreview = () => {
        const { hostname } = window.location;
        return (hostname !== 'stg-copilot-app.condenast.io' &&
            hostname !== 'copilot-app.condenast.io');
    };
    /**
     * This function manage the visibility of ads inside the visual story.
     * It checks if the ads is enable and if the current index is a multiple of adsGap.
     * If these conditions are true, it sets the state setIsAdvVisibile to true and setIsPaused to true,
     * and add the class "adv-visible" to the container element.
     * @param {number} index - the current index of the slide
     */
    const manageAdv = (index) => {
        /* check if current index is correct position and if current index is never used to swow ads */
        if (index % adsGap === 0 &&
            !viewedPositionAdv.includes(index) &&
            index <= lastSlideIndex &&
            vastParameter.current !== null &&
            !isNoAds &&
            noADVOnCopilotPreview()) {
            viewedPositionAdv.push(index);
            setIsAdvVisibile(true);
            setIsPaused(true);
            document
                .getElementsByClassName('StoryContainer')[0]
                .classList.add('adv-visible');
        }
    };
    /**
     * Function to close the visual story ads
     * It sets the state setIsAdvVisibile to false and setIsPaused to false,
     * and remove the class "adv-visible" to the container element.
     * @param {boolean} delay - if true the layer disapper after 2500 millisecond
     */
    const closeVisualStoryAdv = (delay) => {
        setTimeout(() => {
            window.adPlayerPro.remove();
            setIsAdvVisibile(false);
            setIsPaused(false);
            document
                .getElementsByClassName('StoryContainer')[0]
                .classList.remove('adv-visible');
        }, delay === true ? 2500 : 0);
    };
    useEffect(() => {
        window.closeVisualStoryAdv = closeVisualStoryAdv;
    }, []);
    /**
     * Extracts the script URL of the fallback video and its video ID.
     *
     * Finds the first video in the `itemsWithIndex` array with a content type of 'cnevideo'
     * and retrieves its script URL. If no such video exists, `fallBackVideo` is set to null.
     * The video ID is then extracted from this URL using the `getVideoId` function.
     */
    const fallBackVideo = itemsWithIndex.find((element) => element && element.contentType === 'cnevideo')?.image?.scriptUrl || null;
    const [extractedId, setExtractedId] = useState(getVideoId(fallBackVideo));
    useEffect(() => {
        const slide = itemsWithIndex[currentIndex];
        if (slide) {
            setSelectedSlide(slide);
        }
    }, [currentIndex, items, itemsWithIndex]);
    /**
     * Advances to the next slide in the story. If the current slide is the last one and looping
     * is enabled, it pauses the story and shows the recirculation slide. Updates the `selectedSlide`
     * to the next slide in the sequence or loops back to the first slide if at the end.
     */
    const handleNextClick = () => {
        if (isAdvVisibile) {
            closeVisualStoryAdv();
            return;
        }
        if (selectedSlide?.index === lastSlideIndex) {
            setIsPaused(true);
            setShowRecirculationSLide(true);
        }
        setSelectedSlide((prev) => {
            if (!prev) {
                return itemsWithIndex[0];
            }
            let newIndex = prev.index + 1 || 0;
            manageAdv(newIndex);
            if (selectedSlide?.index === lastSlideIndex)
                newIndex = firstSlideIndex;
            return itemsWithIndex[newIndex];
        });
    };
    /**
     * Navigates to the previous slide in the story. If the current slide is the first one,
     * it does nothing. Updates the `selectedSlide` to the previous slide in the sequence.
     */
    const handlePrevClick = () => {
        if (isAdvVisibile) {
            closeVisualStoryAdv();
            return;
        }
        if (selectedSlide?.index === firstSlideIndex) {
            return;
        }
        setSelectedSlide((prev) => {
            if (!prev) {
                return itemsWithIndex[0];
            }
            const newIndex = prev.index - 1 || 0;
            // manageAdv(newIndex);
            return itemsWithIndex[newIndex];
        });
    };
    /**
     * Navigates to a specific slide in the story based on the provided index.
     * Updates the `selectedSlide` to the slide corresponding to the given index.
     *
     * @param {number} index - The index of the slide to navigate to.
     */
    const handleGotoClick = (index) => {
        setSelectedSlide(() => {
            return itemsWithIndex[index];
        });
    };
    /**
     * Resets the story to the first slide when the user closes the recirculation card.
     * This method is called when the user clicks the close button in the recirculation card.
     */
    const closeRecirculation = () => {
        setShowRecirculationSLide(false);
        setSelectedSlide(itemsWithIndex[lastSlideIndex]);
        setIsPaused(false);
    };
    /**
     * Toggles the paused state of the story.
     *
     * If `forcePause` is true, the story is paused regardless of its current state.
     * Otherwise, the paused state is toggled between paused and unpaused.
     *
     * @param {boolean} forcePause - A flag indicating whether to forcibly pause the story.
     */
    const handlePause = (forcePause) => {
        if (forcePause) {
            setIsPaused(true);
        }
        else
            setIsPaused(!isPaused);
        callSnowplowEvent(isPaused ? 'play' : 'pause');
    };
    /**
     * Toggles the the volume state of the story.
     *
     * If `forceVolumeStatus` is passed as parameter, then that parameter is set, otherwise, the status is toggled.
     *
     * @param {boolean} forceVolumeStatus - A flag indicating whether to forcibly turn on or off the volume.
     */
    const handleVolume = (forceVolumeStatus) => {
        if (forceVolumeStatus) {
            setShouldMute(forceVolumeStatus);
        }
        else
            setShouldMute(!shouldMute);
        callSnowplowEvent(shouldMute ? 'unmute' : 'mute');
    };
    /**
     * Returns the script URL of the current slide's video.
     *
     * If the current slide has an image prop with a script URL, that URL is returned.
     * If the current slide does not have an image with a script URL, the fallBackVideo
     * URL is returned.
     *
     * In both cases, the videoQueryParams are appended to the URL.
     *
     * If the current slide does not have an image with a script URL and fallBackVideo
     * is not defined, null is returned.
     *
     * @returns {string|null} URL of the current slide's video or null.
     */
    const currentScriptUrl = () => {
        if (selectedSlide?.image?.scriptUrl)
            return appendQueryToURI(selectedSlide?.image.scriptUrl, videoQueryParams);
        if (fallBackVideo)
            return appendQueryToURI(fallBackVideo, videoQueryParams);
        return null;
    };
    /**
     * Filters out the current story from the recirculation items.
     *
     * @returns {Array} An array of recirculation items excluding the current story.
     */
    const recirculationItemsExeptCurrentStory = () => {
        return recirculation.filter((recircItem) => {
            return recircItem.url !== window.location.href;
        });
    };
    useEffect(() => {
        if (selectedSlide) {
            onSlideChange(selectedSlide?.index);
            if (selectedSlide?.contentType === 'cnevideo') {
                const nextExtractedId = getVideoId(selectedSlide?.image.scriptUrl);
                if (!selectedSlide?.image.scriptUrl.includes(extractedId))
                    setExtractedId(nextExtractedId);
            }
        }
    }, [extractedId, onSlideChange, selectedSlide]);
    // add script for player ADV
    useEffect(() => {
        if (!isNoAds && !document.getElementById('AdPlayerPro')) {
            const script = document.createElement('script');
            script.id = 'AdPlayerPro';
            script.src = 'https://static.adplayer.pro/player/AdPlayerPro.js';
            script.async = true;
            document.body.appendChild(script);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    usePausableTimeout(() => {
        handleNextClick();
    }, selectedSlide?.calculatedDuration ?? null, isPaused);
    /*  istanbul ignore next */
    useWindowVisibility((isWindowInFocus) => {
        if (shouldPauseSlideWhenInActiveWindow) {
            // setIsPaused(!isWindowInFocus);
            if (isAdvVisibile)
                setIsPaused(true);
            else
                setIsPaused(!isWindowInFocus);
        }
    });
    /**
     * Calculate the height of the StoryContainer element. The height is calculated by
     * subtracting the padding from the clientHeight and then taking the minimum
     * value between the calculated height and the maximumHeight.
     */
    const calculateHeight = () => {
        const element = document.getElementsByClassName('visual-story-page');
        if (!element || !element[0]) {
            return;
        }
        let calculatedHeight = Math.min(element[0].clientHeight - paddingTopBottom, maximumHeight);
        if (calculatedHeight < minimumHeight)
            calculatedHeight = minimumHeight;
        setHeight(calculatedHeight);
    };
    useResizeObserver(() => calculateHeight());
    useEffect(() => {
        calculateHeight();
    }, []);
    /*  istanbul ignore next */
    const injectedFunction = () => {
        if (!injectedFix) {
            injectedFix = true;
            const styles = `video::cue {visibility: hidden;}`;
            const styleSheet = document.createElement('style');
            styleSheet.textContent = styles;
            document
                .querySelector('#video-container iframe')
                ?.contentDocument?.head?.appendChild(styleSheet);
        }
    };
    const bubbleFontSetting = get(componentConfig, 'VisualStoryCarousel.settings.bubbleFont');
    const bubbleFont = bubbleFontSetting ||
        'typography.definitions.globalEditorial.context-tertiary';
    // workaround to force retriggering of scroll event on load for cnevideo
    if (selectedSlide?.contentType === 'cnevideo' &&
        "object" !== 'undefined') {
        window.dispatchEvent(new Event('scroll'));
    }
    return (React.createElement(StoryContainer, { height: Math.round(height), width: Math.round((height / 16) * 9), className: "StoryContainer", isRecirculationSlide: showRecirculationSLide, "data-testid": "story-container" },
        React.createElement(StoryHeader, { isRecirculationSlide: showRecirculationSLide, "data-testid": "story-header" },
            !showRecirculationSLide && (React.createElement("h1", { "data-testid": "story-title", dangerouslySetInnerHTML: { __html: dangerousHed } })),
            showRecirculationSLide && (React.createElement("h4", { "data-testid": "recirculation-title" }, "More Stories"))),
        !showRecirculationSLide && (React.createElement(StoryProgress, { "data-testid": "story-progress", activeSlideIndex: selectedSlide?.index, defaultDuration: defaultDuration, isPaused: isPaused, items: itemsWithIndex, onGotoClick: handleGotoClick })),
        !showRecirculationSLide && (React.createElement(StorySlide, { "data-testid": "story-slide", key: selectedSlide?.index, isFirstSlide: selectedSlide?.index === firstSlideIndex, isPaused: isPaused, shouldMute: shouldMute, slide: selectedSlide, trackingHandler: callSnowplowEvent, isAdvVisibile: isAdvVisibile })),
        extractedId && (React.createElement(CNEVideoEmbedWrapper, { "data-testid": "cne-video-embed-wrapper", hasCompanion: false, onVideoLoad: injectedFunction, showVideo: selectedSlide?.contentType === 'cnevideo' && !showRecirculationSLide, shouldAutoplay: true, shouldDisableAds: true, shouldEnableExternalControl: true, shouldPlayContinuously: false, scriptUrl: currentScriptUrl(), shouldPause: selectedSlide?.contentType === 'cnevideo' ? isPaused : true, shouldMute: selectedSlide?.contentType === 'cnevideo' ? shouldMute : true, videoIdToLoad: extractedId })),
        showRecirculationSLide && recirculation?.length > 0 && (React.createElement(StoryRecirculation, { "data-testid": "story-recirculation", items: recirculationItemsExeptCurrentStory(), bubbleFont: bubbleFont })),
        React.createElement(StoryActions, { "data-testid": "story-actions", closeRecirculation: closeRecirculation, isCNEVideo: selectedSlide?.contentType === 'cnevideo', isFirstSlide: selectedSlide?.index === firstSlideIndex, isLastSlide: selectedSlide?.index === lastSlideIndex, isPaused: isPaused, onNextClick: handleNextClick, onPrevClick: handlePrevClick, onTogglePause: handlePause, onToggleVolume: handleVolume, shouldMute: shouldMute, showRecirculationSLide: showRecirculationSLide, trackingHandler: callSnowplowEvent }),
        isAdvVisibile && vastParameter.current && (React.createElement(StoryAdv, { "data-testid": "story-adv", vastParameter: vastParameter.current, vpmute: vpmute }))));
};
Story.propTypes = {
    componentConfig: PropTypes.object,
    copilotCode: PropTypes.string,
    currentIndex: PropTypes.number,
    dangerousHed: PropTypes.string,
    defaultDuration: PropTypes.number,
    isMobileDevice: PropTypes.bool,
    isNoAds: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape(ResponsiveAsset.propTypes))
        .isRequired,
    onSlideChange: PropTypes.func,
    recirculation: PropTypes.array,
    shouldPauseSlideWhenInActiveWindow: PropTypes.bool
};
module.exports = connector(Story, {
    keysToPluck: ['isNoAds', 'componentConfig']
});
//# sourceMappingURL=Story.js.map

/***/ }),

/***/ 43266:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState, useRef, useEffect } = React;
const CloseIcon = __webpack_require__(80046);
const PlayIcon = __webpack_require__(11118);
const PauseIcon = __webpack_require__(13148);
const VolumeHighIcon = __webpack_require__(29186);
const VolumeMuteIcon = __webpack_require__(3711);
const ChevronFill = __webpack_require__(32586);
const Arrow = __webpack_require__(69571);
const { storageFactory } = __webpack_require__(60663);
const sessionStore = storageFactory(() => window.sessionStorage);
const { StoryNavigation, ButtonSlideLeft, ButtonSlideRight, StoryButtons, ButtonClose, ButtonPlayPause, ButtonVolume, ButtonBack } = __webpack_require__(32124);
const StoryActions = ({ closeRecirculation, isFirstSlide = true, isCNEVideo = false, isPaused = false, onNextClick, onPrevClick, onTogglePause, onToggleVolume, shouldMute, showRecirculationSLide = false, trackingHandler }) => {
    const EVENT_REGION = Object.freeze({
        LEFT: 'left',
        RIGHT: 'right'
    });
    const [isSlidePaused, setIsSlidePaused] = useState(false);
    // adding pause timer because we want to debouce pause interaction
    // because mouse down is called with mouse up immediately
    const pauseTimerRef = useRef(null);
    function handlePause(event) {
        event.cancelable && event.preventDefault();
        event.cancelable && event.stopPropagation();
        clearTimeout(pauseTimerRef.current);
        // delay this transaction
        pauseTimerRef.current = setTimeout(() => {
            onTogglePause(true);
            setIsSlidePaused(true);
        }, 200);
    }
    function handleInteractions(region, event) {
        event.cancelable && event.stopPropagation();
        event.cancelable && event.preventDefault();
        // clear any pending timeout
        clearTimeout(pauseTimerRef.current);
        if (isSlidePaused) {
            onTogglePause();
            setIsSlidePaused(false);
            return;
        }
        if (region === EVENT_REGION.LEFT) {
            trackingHandler('back');
            onPrevClick();
            return;
        }
        trackingHandler('forward');
        onNextClick();
    }
    function getEvents(region) {
        return {
            onMouseUp: (e) => handleInteractions(region, e),
            onTouchEnd: (e) => handleInteractions(region, e),
            onTouchStart: (e) => handlePause(e),
            onMouseDown: (e) => handlePause(e)
        };
    }
    const onCloseDiscovery = () => {
        trackingHandler('close');
        const visual_story_origin = sessionStore.getItem('visual_story_origin');
        if (!visual_story_origin) {
            window.location.href = '/';
        }
        else {
            sessionStore.removeItem('visual_story_origin');
            window.location.href = visual_story_origin;
        }
    };
    const togglePause = () => {
        onTogglePause();
    };
    const toggleVolume = () => {
        onToggleVolume();
    };
    useEffect(() => {
        const onKeyDown = (evt) => {
            switch (evt.code) {
                case 'Space':
                    onTogglePause();
                    break;
                case 'ArrowRight':
                    handleInteractions(EVENT_REGION.RIGHT, evt);
                    break;
                case 'ArrowLeft':
                    handleInteractions(EVENT_REGION.LEFT, evt);
                    break;
                case 'ArrowUp':
                    onToggleVolume(false);
                    break;
                case 'ArrowDown':
                    onToggleVolume(true);
                    break;
                case 'Escape':
                    onCloseDiscovery();
                    break;
                default:
                    break;
            }
        };
        document.addEventListener('keydown', onKeyDown);
        return () => document.removeEventListener('keydown', onKeyDown);
    });
    return (React.createElement("div", { "data-testid": "story-actions-container" },
        !showRecirculationSLide && (React.createElement(StoryNavigation, null,
            !isFirstSlide ? (React.createElement("div", { ...getEvents(EVENT_REGION.LEFT), className: "previousWrapper", "data-testid": "story-prev-button story-left-region" },
                React.createElement(ButtonSlideLeft, { label: "Go to previous slide", ariaLabel: "Go to previous slide", btnStyle: "text", ButtonIcon: ChevronFill, isIconButton: true, shouldEnableClickTracking: false }))) : (React.createElement("div", null)),
            React.createElement("div", { ...getEvents(EVENT_REGION.RIGHT), className: "nextWrapper", "data-testid": "story-next-button story-right-region" },
                React.createElement(ButtonSlideRight, { label: "Go to next slide", ariaLabel: "Go to next slide", btnStyle: "text", ButtonIcon: ChevronFill, isIconButton: true, shouldEnableClickTracking: false })))),
        React.createElement(StoryButtons, { isRecirculationSlide: showRecirculationSLide },
            React.createElement(ButtonClose, { isRecirculationSlide: showRecirculationSLide, label: "Close Visual Story", ariaLabel: "Close Visual Story", btnStyle: "text", ButtonIcon: CloseIcon, isIconButton: true, onClickHandler: onCloseDiscovery, shouldEnableClickTracking: false, "data-testid": "story-close-button" }),
            !showRecirculationSLide && (React.createElement(ButtonPlayPause, { label: "Toggle play on/off", ariaLabel: "Toggle play on/off", btnStyle: "text", ButtonIcon: isPaused ? PlayIcon : PauseIcon, isIconButton: true, onClickHandler: togglePause, shouldEnableClickTracking: false, "data-testid": "story-pause-button" })),
            isCNEVideo && !showRecirculationSLide && (React.createElement(ButtonVolume, { label: "Toggle sound on/off", ariaLabel: "Toggle sound on/off", btnStyle: "text", ButtonIcon: shouldMute ? VolumeMuteIcon : VolumeHighIcon, isIconButton: true, onClickHandler: toggleVolume, shouldEnableClickTracking: false, "data-testid": "story-volume-button" }))),
        showRecirculationSLide && (React.createElement(ButtonBack, { ariaLabel: "Back to slides", label: "Back to slides", btnStyle: "text", ButtonIcon: Arrow, isIconButton: true, onClickHandler: closeRecirculation, shouldEnableClickTracking: false }))));
};
StoryActions.propTypes = {
    closeRecirculation: PropTypes.func,
    isCNEVideo: PropTypes.bool,
    isFirstSlide: PropTypes.bool,
    isLastSlide: PropTypes.bool,
    isPaused: PropTypes.bool,
    onNextClick: PropTypes.func,
    onPrevClick: PropTypes.func,
    onTogglePause: PropTypes.func,
    onToggleVolume: PropTypes.func,
    shouldMute: PropTypes.bool,
    showRecirculationSLide: PropTypes.bool,
    trackingHandler: PropTypes.func
};
StoryActions.displayName = 'StoryActions';
module.exports = StoryActions;
//# sourceMappingURL=StoryActions.js.map

/***/ }),

/***/ 43488:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useEffect } = React;
const { useInView } = __webpack_require__(26855);
const { getCookie } = __webpack_require__(56892);
const { StoryAdvWrapper } = __webpack_require__(32124);
const StoryAdv = ({ vastParameter, vpmute = 0 }) => {
    useEffect(() => {
        /* retrieve value for GAM attribute */
        let addtl_consent = '';
        if (typeof window.__tcfapi !== 'undefined') {
            window.__tcfapi('getTCData', 2, (tcData, success) => {
                if (success) {
                    addtl_consent = tcData.addtlConsent;
                }
            });
        }
        let correlator = '$$RANDOM_10$$';
        if (typeof window.googletag?.pubads !== 'undefined' &&
            typeof window.googletag.pubads().getCorrelator !== 'undefined') {
            correlator = window.googletag.pubads().getCorrelator();
        }
        const infinityId = getCookie('CN_xid', '');
        const ppid = infinityId ? infinityId.replace(/-/g, '') : '';
        // we need to replace the last slash in the URL (if any) and get the final part of the URL
        const slug = window.location.pathname.replace(/\/+$/, '').split('/').pop();
        const vastUrl = `https://pubads.g.doubleclick.net/gampad/ads?iu=${vastParameter}&ad_rule=0&tfcd=0&npa=0&sz=9x16&max_ad_duration=60000&gdfp_req=1&unviewed_position_start=1&correlator=${correlator}&hl=en&vpos=preroll&output=vast&env=vp&vpmute=${vpmute}&vpa=auto&gdpr=$$GDPR$$&gdpr_consent=$$GDPR_CONSENT$$&plcmt=3&addtl_consent=${addtl_consent}&ppid=${ppid}&description_url=$$REFERER$$&url=$$REFERER$$&cust_params=IAB_player_type%3DInterstitial%26ctx_page_slug%3D${slug}`;
        // eslint-disable-next-line no-undef
        window.adPlayerPro = AdPlayerPro('divAdPlayerPro').setup({
            placementId: 'E4PwNl4FEpNx',
            muted: false,
            autoStart: true,
            width: '300',
            height: '600',
            type: 'inPage',
            advertising: {
                tag: [
                    {
                        url: vastUrl
                    }
                ]
            }
        });
        // eslint-disable-next-line no-undef
        window.adPlayerPro.on('AdVideoComplete', () => {
            window.closeVisualStoryAdv(true);
        });
        window.adPlayerPro.on('AdError', () => {
            window.closeVisualStoryAdv();
        });
        window.adPlayerPro.on('AdSkipped', () => {
            window.closeVisualStoryAdv();
        });
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [vpmute]);
    const { ref: advOverlayRef, entry: entryAdvOverlay } = useInView({
        threshold: 0.2,
        trackVisibility: true,
        delay: 100,
        triggerOnce: true
    });
    useEffect(() => {
        if (entryAdvOverlay?.isIntersecting) {
            // console.log('impression advOverlay');
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [entryAdvOverlay]);
    return (React.createElement(StoryAdvWrapper, { ref: advOverlayRef, "data-testid": "story-adv-wrapper" },
        React.createElement("div", { id: "divAdPlayerPro", className: "divAdPlayerPro", "data-testid": "story-adv-player" })));
};
StoryAdv.propTypes = {
    vastParameter: PropTypes.string,
    vpmute: PropTypes.number
};
module.exports = StoryAdv;
//# sourceMappingURL=StoryAdv.js.map

/***/ }),

/***/ 43590:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { ProgressBarContainer } = __webpack_require__(32124);
const StoryProgressBar = __webpack_require__(53029);
const prevNextIcon = '<svg width="24" height="3" xmlns="http://www.w3.org/2000/svg"><rect width="6" height="3" x="0" y="0" rx="1" ry="3" fill="#FFFFFF" /><rect width="6" height="3" x="9" y="0" rx="1" ry="3" fill="#FFFFFF" /><rect width="6" height="3" x="18" y="0" rx="1" ry="3" fill="#FFFFFF" /></svg>';
const itemsPerPage = 12;
const newItemAdded = 4;
let lowerIndex = 1;
let upperIndex = itemsPerPage;
let showPrevIcon = false;
let showNextIcon = false;
let enableToolbar = false;
const StoryProgress = ({ activeSlideIndex = 0, defaultDuration = 10000, isPaused = false, onGotoClick = () => { }, items = [] }) => {
    const currentItem = activeSlideIndex + 1;
    const totalItem = items.length;
    const maxItemVisibile = totalItem <= itemsPerPage ? totalItem : itemsPerPage;
    if (totalItem > itemsPerPage) {
        enableToolbar = true;
    }
    if (enableToolbar) {
        if (currentItem === 1) {
            lowerIndex = 1;
            upperIndex = itemsPerPage - 1;
            showPrevIcon = false;
            showNextIcon = maxItemVisibile !== totalItem;
        }
        if (currentItem === upperIndex + 1) {
            let delta = 2;
            showPrevIcon = true;
            const newItemTotal = totalItem - currentItem + 1;
            let newItem = newItemTotal > newItemAdded ? newItemAdded : newItemTotal;
            if (newItemTotal === newItemAdded + 1) {
                showNextIcon = false;
                newItem++;
            }
            else if (newItemTotal > newItem) {
                showNextIcon = true;
                delta++;
            }
            else {
                showNextIcon = false;
            }
            upperIndex += newItem;
            lowerIndex = upperIndex - itemsPerPage + delta;
        }
        if (currentItem === lowerIndex - 1 && lowerIndex !== 1) {
            let delta = 2;
            showNextIcon = true;
            const newItemTotal = lowerIndex - 1;
            let newItem = newItemTotal > newItemAdded ? newItemAdded : newItemTotal;
            if (newItemTotal === newItemAdded + 1) {
                showPrevIcon = false;
                newItem++;
            }
            else if (newItemTotal > newItem) {
                showPrevIcon = true;
                delta++;
            }
            else {
                showPrevIcon = false;
            }
            lowerIndex -= newItem;
            upperIndex = lowerIndex + itemsPerPage - delta;
        }
    }
    return (React.createElement(ProgressBarContainer, { columns: items.length, maxItemVisibile: maxItemVisibile, lowerIndex: lowerIndex, upperIndex: upperIndex, showPrevIcon: showPrevIcon, showNextIcon: showNextIcon, "data-testid": "story-progress-container" },
        React.createElement("div", { className: "prevIcon iconPrevNext", "data-testid": "story-progress-prev-icon", dangerouslySetInnerHTML: { __html: prevNextIcon } }),
        items &&
            items.map((slide, index) => (React.createElement(StoryProgressBar, { index: index, key: slide.index, defaultDuration: defaultDuration, hasSlidePassed: slide.index < activeSlideIndex, isActive: slide.index === activeSlideIndex, isPaused: slide.index === activeSlideIndex && isPaused, onGotoClick: onGotoClick, slide: slide }))),
        React.createElement("div", { className: "nextIcon iconPrevNext", "data-testid": "story-progress-next-icon", dangerouslySetInnerHTML: { __html: prevNextIcon } })));
};
StoryProgress.propTypes = {
    activeSlideIndex: PropTypes.number,
    defaultDuration: PropTypes.number,
    isPaused: PropTypes.bool,
    items: PropTypes.array,
    onGotoClick: PropTypes.func
};
StoryProgress.displayName = 'StoryProgress';
module.exports = StoryProgress;
//# sourceMappingURL=StoryProgress.js.map

/***/ }),

/***/ 53029:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState, useEffect, useRef } = React;
// const { asConfiguredComponent } = require('../../helpers/configured-component');
const { useAnimationFrame } = __webpack_require__(31105);
const { ProgressBar, ProgressBarActive } = __webpack_require__(32124);
let barWidth = 0; // declaring it here to avoid variable creating in a loop. this will improve memory utilization.
let step = 0.1;
const StoryProgressBar = ({ defaultDuration, hasSlidePassed, isActive, isPaused, onGotoClick, slide }) => {
    const progressBarActiveRef = useRef(null);
    const progressBarRef = useRef(null);
    const [shouldAnimate, setShouldAnimate] = useState(false);
    // set animations
    useEffect(() => {
        if (isPaused || !isActive) {
            setShouldAnimate(false);
            return;
        }
        if (isActive) {
            setShouldAnimate(true);
            return;
        }
        setShouldAnimate(false);
    }, [isActive, isPaused]);
    useEffect(() => {
        if (!progressBarActiveRef.current) {
            return;
        }
        if (hasSlidePassed) {
            progressBarActiveRef.current.style.width = `${progressBarRef?.current?.offsetWidth}px`;
            return;
        }
        progressBarActiveRef.current.style.width = '0px';
    }, [hasSlidePassed, isActive]);
    useAnimationFrame((time) => {
        if (!progressBarActiveRef.current || !progressBarRef.current) {
            return;
        }
        barWidth =
            Number((progressBarActiveRef.current.style.width || '1px').slice(0, progressBarActiveRef.current.style.width.length - 2)) || 0;
        if (barWidth > progressBarRef.current.offsetWidth) {
            setShouldAnimate(false);
            return;
        }
        step =
            progressBarRef.current.offsetWidth /
                ((slide.duration || defaultDuration) / time);
        progressBarActiveRef.current.style.width = `${barWidth + step}px`;
    }, shouldAnimate);
    return (React.createElement(ProgressBar, { ref: progressBarRef, onClick: () => {
            onGotoClick(slide.index);
        } },
        React.createElement(ProgressBarActive, { ref: progressBarActiveRef })));
};
StoryProgressBar.propTypes = {
    defaultDuration: PropTypes.number,
    hasSlidePassed: PropTypes.bool,
    isActive: PropTypes.bool,
    isPaused: PropTypes.bool,
    onGotoClick: PropTypes.func,
    slide: PropTypes.shape({
        index: PropTypes.number.isRequired,
        duration: PropTypes.number
    }).isRequired
};
StoryProgressBar.displayName = 'StoryProgressBar';
module.exports = StoryProgressBar;
//# sourceMappingURL=StoryProgressBar.js.map

/***/ }),

/***/ 93833:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useInView } = __webpack_require__(26855);
const ResponsiveAsset = __webpack_require__(73275);
const { RecirculationGrid, RecirculationItem } = __webpack_require__(32124);
const StoryRecirculation = ({ items = [], bubbleFont }) => {
    const { ref: storyRecirculationRef } = useInView({
        threshold: 0.2,
        trackVisibility: true,
        delay: 100,
        triggerOnce: true
    });
    const recirculationLoop = items.map((item, index) => {
        return (item &&
            item.image && (React.createElement(RecirculationItem, { key: index, href: item.url, bubbleFont: bubbleFont },
            React.createElement(ResponsiveAsset, { ...item.image, isLazy: false, shouldYieldControlOfVideoPlayPause: true, shouldDisableAds: true }),
            React.createElement("p", { dangerouslySetInnerHTML: { __html: item.dangerousHed } }))));
    });
    return (React.createElement(RecirculationGrid, { ref: storyRecirculationRef, className: "recirculationWrapper", "data-testid": "story-recirculation-grid" }, recirculationLoop));
};
StoryRecirculation.propTypes = {
    bubbleFont: PropTypes.string,
    items: PropTypes.array
};
StoryRecirculation.displayName = 'StoryReccomandations';
module.exports = StoryRecirculation;
//# sourceMappingURL=StoryRecirculation.js.map

/***/ }),

/***/ 45908:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useRef, useState, useEffect, useCallback } = React;
const { useInView } = __webpack_require__(26855);
const ResponsiveAsset = __webpack_require__(73275);
const LiveIndicator = __webpack_require__(77938);
const { SlideInfoWrapper, SlideTitle, SlideCredits, MarqueeText, Tracker } = __webpack_require__(32124);
const regex = /href=(["'])(.*?)(["'])/;
const StorySlide = ({ isAdvVisibile = false, isFirstSlide = false, isPaused = false, shouldMute = false, slide = {}, trackingHandler = null }) => {
    const marqueeText = useRef(null);
    const [scrollWidth, setScrollWidth] = useState(0);
    const [offsetWidth, setOffsetWidth] = useState(0);
    const hasCtaValidLink = (ctaLink) => {
        if (ctaLink.match(regex)) {
            return true;
        }
        return false;
    };
    const calculateCreditLength = () => {
        return offsetWidth - scrollWidth;
    };
    useEffect(() => {
        if (marqueeText.current) {
            setScrollWidth(marqueeText.current.scrollWidth);
            setOffsetWidth(marqueeText.current.offsetWidth);
        }
    }, [isPaused]);
    const { ref: slideItemRef, entry: entrySlide } = useInView({
        threshold: 0.2,
        trackVisibility: true,
        delay: 100,
        triggerOnce: true
    });
    const { ref: ctaItemRef, entry: entryCta } = useInView({
        threshold: 0.2,
        trackVisibility: true,
        delay: 100,
        triggerOnce: true
    });
    useEffect(() => {
        if (entrySlide?.isIntersecting) {
            trackingHandler('impression');
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [entrySlide]);
    useEffect(() => {
        if (entryCta?.isIntersecting) {
            const ctaUrl = slide.slideCtaLink?.match(/href="([^"]+)"/);
            trackingHandler('CTA', ctaUrl ? ctaUrl[1] : null);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [entryCta]);
    const handleSlideClick = useCallback((e, element, trackingHandler) => {
        e.preventDefault();
        const firstLink = element.querySelector('a[href]');
        if (!firstLink)
            return;
        const firstLinkHref = firstLink.getAttribute('href');
        const firstLinkTarget = firstLink.getAttribute('target');
        try {
            trackingHandler('CTAlabel', firstLinkHref, firstLink.textContent);
            if (firstLinkTarget) {
                window.open(firstLinkHref, firstLinkTarget);
            }
            else {
                window.location.href = firstLinkHref;
            }
        }
        catch (error) {
            console.error('Error handling slide click:', error);
        }
    }, []);
    useEffect(() => {
        const element = window?.document?.querySelector('.slideInfoWrapper');
        if (!element)
            return () => { };
        const clickHandler = (e) => handleSlideClick(e, element, trackingHandler);
        element.addEventListener('click', clickHandler);
        // Cleanup function to remove event listener
        return () => {
            element.removeEventListener('click', clickHandler);
        };
    }, [trackingHandler, handleSlideClick]);
    return (React.createElement(React.Fragment, null,
        !isAdvVisibile && React.createElement(Tracker, { ref: slideItemRef }),
        slide.slideTitle && (React.createElement(SlideTitle, { dangerouslySetInnerHTML: { __html: slide.slideTitle } })),
        slide.contentType !== 'cnevideo' && (React.createElement(ResponsiveAsset, { ...slide.image, isLazy: !isFirstSlide, shouldEnableExternalControl: true, shouldPause: isPaused, shouldYieldControlOfVideoPlayPause: true, shouldMute: shouldMute, shouldDisableAds: true })),
        !isAdvVisibile &&
            slide.slideCtaLink &&
            hasCtaValidLink(slide.slideCtaLink) && (React.createElement(SlideInfoWrapper, { ref: ctaItemRef, className: "slideInfoWrapper" },
            React.createElement("span", null,
                slide.slideCtaHeadline && (React.createElement("p", { className: "title", dangerouslySetInnerHTML: { __html: slide.slideCtaHeadline } })),
                slide.slideCtaLink && hasCtaValidLink(slide.slideCtaLink) && (React.createElement("p", { className: "cta", dangerouslySetInnerHTML: { __html: slide.slideCtaLink } }))))),
        !isAdvVisibile && !slide.isLive && slide.dangerousCredit && (React.createElement(SlideCredits, null,
            React.createElement("div", { className: "marquee" },
                React.createElement(MarqueeText, { ref: marqueeText, shouldPause: isPaused, calculatedCreditLenght: calculateCreditLength(), dangerouslySetInnerHTML: { __html: slide.dangerousCredit } })))),
        !isAdvVisibile && slide.isLive && (React.createElement(SlideCredits, { liveIndicator: true },
            React.createElement(LiveIndicator, { variation: "DiscoveryCard", hasBackground: true, isDiscovery: true, shouldEnableAnimation: true, shouldUseRubricColor: true })))));
};
StorySlide.propTypes = {
    isAdvVisibile: PropTypes.bool,
    isFirstSlide: PropTypes.bool,
    isPaused: PropTypes.bool,
    shouldMute: PropTypes.bool,
    slide: PropTypes.object,
    trackingHandler: PropTypes.func
};
StorySlide.displayName = 'StorySlide';
module.exports = StorySlide;
//# sourceMappingURL=StorySlide.js.map

/***/ }),

/***/ 32124:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { BREAKPOINTS } = __webpack_require__(96472);
const Button = __webpack_require__(73730);
const { getColorToken, getColorStyles, getTypographyStyles } = __webpack_require__(26865);
const CNEVideoEmbed = __webpack_require__(64930);
const BUTTON_SIZE = '24px';
const ARROW_SIZE = '32px';
const MARGIN_SIZE = '16px';
const Z_INDEX = 10;
const StoryContainer = styled.div.withConfig({
    displayName: 'StoryContainer'
}) `
  display: block;
  position: relative;
  margin: 0 auto;
  background-color: ${getColorToken('colors.interactive.base.black')};
  width: 100vw;
  height: 100%;

  ${({ isRecirculationSlide }) => {
    return (isRecirculationSlide &&
        `
      overflow: hidden;
      background-color: inherit;
      @media (min-width: 480px) {
        background-color: black;
      }
    `);
}};

  @media (min-width: 480px) {
    ${({ width, height }) => {
    return `
        border-radius: ${MARGIN_SIZE};
        width: ${width}px;
        height: ${height}px;`;
}};
  }

  .responsive-asset {
    height: 100%;

    @media (min-width: 480px) {
      border-radius: ${MARGIN_SIZE};
    }

    picture {
      height: 100%;
    }

    &&& {
      figure.cne-video-embed {
        display: block;
        border-radius: ${MARGIN_SIZE};
        width: 100%;
        max-width: inherit; /* reset max-width in cnevideoembed component */
        height: 100%;
        overflow: hidden;

        .video-container {
          width: 100%;
          height: 100%;
        }
      }
    }

    img,
    .responsive-clip {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
`;
const StoryHeader = styled.div.withConfig({
    displayName: 'StoryHeader'
}) `
  position: absolute;
  top: 0;
  left: 0;
  z-index: ${Z_INDEX};
  background: linear-gradient(
    0deg,
    rgba(80, 80, 80, 0) 19.64%,
    rgba(0, 0, 0, 0.4) 79.47%
  );
  ${({ isRecirculationSlide }) => {
    return isRecirculationSlide && `background: none;`;
}};

  width: 100%;
  height: 200px;
  text-align: center;

  @media (min-width: 480px) {
    border-radius: ${MARGIN_SIZE};
  }

  h1 {
    position: absolute;
    top: calc((${MARGIN_SIZE} * 2) + 3px);
    right: calc((${MARGIN_SIZE} * 2) + ${BUTTON_SIZE});
    left: ${MARGIN_SIZE};
    margin: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    line-height: 20px;
    white-space: nowrap;
    color: ${getColorToken('colors.interactive.base.white')};
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-bulletin-secondary')};
    font-size: 16px;
  }

  h4 {
    display: block;
    position: relative;
    margin-top: ${MARGIN_SIZE};
    margin-bottom: ${BUTTON_SIZE};
    padding-top: 4px;
    height: 24px;
    color: ${getColorToken('colors.interactive.base.white')};
    ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-tertiary')};
  }
`;
const CNEVideoEmbedWrapper = styled(CNEVideoEmbed).withConfig({
    displayName: 'CNEVideoEmbedWrapper'
}) `
  display: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: inherit; /* reset max-width in cnevideoembed component */
  height: 100%;
  object-fit: cover;

  ${({ showVideo }) => showVideo && `display: block;`}

  iframe {
    width: 100%;
    height: 100%;
    @media (min-width: 480px) {
      border-radius: 12px;
    }
  }
`;
const SlideInfoWrapper = styled.div.withConfig({
    displayName: 'SlideInfoWrapper'
}) `
  position: absolute;
  bottom: 20px;
  z-index: ${Z_INDEX + 10};
  outline: none;
  padding: ${MARGIN_SIZE};
  width: 100%;
  line-height: 1;

  span {
    display: block;
    border-radius: ${MARGIN_SIZE};
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    padding: ${MARGIN_SIZE};
    width: 100%;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    backdrop-filter: blur(10px);

    p.title {
      display: -webkit-box; /* stylelint-disable-line */
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      margin: 0 0 4px 0;
      overflow: hidden;
      line-height: 1;
      color: ${getColorToken('colors.interactive.base.white')};
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-bulletin-primary')};
      font-size: ${MARGIN_SIZE};
    }

    p.cta {
      margin: 0;
      text-transform: uppercase;
      color: ${getColorToken('colors.interactive.base.white')};
      font-size: 12px;
      font-weight: 600;
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.utility.button-utility')};

      a {
        text-decoration: none;
        pointer-events: none;
        color: ${getColorToken('colors.interactive.base.white')};
      }
    }

    &:hover {
      p.cta {
        text-decoration: underline;
      }
    }
  }
`;
const SlideTitle = styled.h2.withConfig({
    displayName: 'SlideTitle'
}) `
  position: absolute;
  top: 63px;
  right: calc((${MARGIN_SIZE} * 2) + ${BUTTON_SIZE});
  left: ${MARGIN_SIZE};
  z-index: ${Z_INDEX};
  margin: 0;
  display: -webkit-box; /* stylelint-disable-line */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
  color: ${getColorToken('colors.interactive.base.white')};
  font-size: ${MARGIN_SIZE};
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.description-core')};
`;
const SlideCredits = styled.div.withConfig({
    displayName: 'SlideCredits'
}) `
  display: grid;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  align-items: end;
  justify-content: start;
  z-index: ${Z_INDEX};
  background: linear-gradient(
    180deg,
    rgba(80, 80, 80, 0) 19.64%,
    rgba(0, 0, 0, 0.4) 79.47%
  );
  height: 140px;

  ${({ liveIndicator }) => {
    return liveIndicator && `justify-content: center;`;
}};

  @media (min-width: 480px) {
    border-radius: ${MARGIN_SIZE};
  }

  .marquee {
    display: inline-block;
    margin: 6px ${MARGIN_SIZE} 2px ${MARGIN_SIZE};
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
  }
`;
const MarqueeText = styled.p.withConfig({
    displayName: 'MarqueeText'
}) `
  ${({ calculatedCreditLenght }) => {
    return (calculatedCreditLenght < 0 &&
        `
          animation-name: marquee;
          animation-duration: 10s;
          animation-iteration-count: 1;
          animation-timing-function: linear;
          animation-fill-mode: forwards;
          animation-play-state: play;
          animation-direction: normal;
          animation-delay: 1s;
          `);
}};
  ${({ shouldPause }) => {
    return (shouldPause &&
        `
          animation-play-state: paused;
          `);
}};

  color: rgba(
    ${getColorToken('colors.interactive.base.white', { rgbOnly: true })},
    0.5
  );

  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.accreditation-core')};

  /* Make it move */
  @keyframes marquee {
    ${({ calculatedCreditLenght }) => {
    return (calculatedCreditLenght < 0 &&
        `
        0% {
          transform: translateX(0);
        }

          100% {
            transform: translateX(calc(-100%));
          }
          `);
}};
  }
`;
// PROGRESS BAR
const ProgressBarContainer = styled.div.withConfig({
    displayName: 'ProgressBarContainer'
}) `
  display: grid;
  position: absolute;
  top: ${MARGIN_SIZE};
  right: ${MARGIN_SIZE};
  left: ${MARGIN_SIZE};
  grid-gap: 5px;

  grid-template-columns: ${({ maxItemVisibile }) => maxItemVisibile && `repeat(${maxItemVisibile}, 1fr);`};
  z-index: ${Z_INDEX};

  height: 3px;

  > div:nth-child(-n + ${({ lowerIndex }) => lowerIndex && `${lowerIndex}`}) {
    display: none;
  }
  > div:nth-child(
      n + ${({ upperIndex }) => upperIndex && `${upperIndex + 2}`}
    ) {
    display: none;
  }

  .iconPrevNext {
    text-align: center;
    line-height: 0px;
    font-size: 0;
  }

  .prevIcon {
    display: ${({ showPrevIcon }) => showPrevIcon ? 'block !important' : 'none !important'};
  }

  .nextIcon {
    display: ${({ showNextIcon }) => showNextIcon ? 'block !important' : 'none !important'};

    svg {
      rect {
        fill: rgba(
          ${getColorToken('colors.interactive.base.white', { rgbOnly: true })},
          0.6
        );
      }
    }
  }
`;
const ProgressBar = styled.div.withConfig({
    displayName: 'ProgressBar'
}) `
  position: relative;
  border-radius: 3px;

  background-color: rgba(
    ${getColorToken('colors.interactive.base.white', { rgbOnly: true })},
    0.6
  );
  cursor: pointer;
  height: 3px;
`;
const ProgressBarActive = styled.div.withConfig({
    displayName: 'ProgressBarActive'
}) `
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 3px;
  background-color: ${getColorToken('colors.interactive.base.white')};
  cursor: pointer;
  width: ${({ width }) => width && `${width}px;`};
  height: 3px;
`;
// BUTTONS and NAVIGATION
const StoryNavigation = styled.div.withConfig({
    displayName: 'StoryNavigation'
}) `
  display: flex;
  position: absolute;
  top: 0;
  align-items: center;
  justify-content: center;
  z-index: ${Z_INDEX + 1};
  width: 100%;
  height: 100%;

  @media (min-width: ${BREAKPOINTS.md}) {
    top: 0;
    left: calc(-${ARROW_SIZE} - ${MARGIN_SIZE});
    margin: 0 auto;
    width: calc(100% + (${ARROW_SIZE} * 2) + (${MARGIN_SIZE} * 2));
    height: 100%;
  }

  div {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 50%;
    height: 100%;
    font-size: 0;

    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    @media (min-width: ${BREAKPOINTS.md}) {
      width: ${ARROW_SIZE};
      height: ${ARROW_SIZE};
      color: ${getColorToken('colors.interactive.base.white')};

      &:nth-child(1) {
        position: absolute;
        left: 0;

        .button__icon-container {
          position: relative;
        }
      }

      &:nth-child(2) {
        position: absolute;
        right: 0;

        .button__icon-container {
          position: relative;
        }
      }
    }
  }

  .adv-visible & {
    @media (max-width: ${BREAKPOINTS.md}) {
      position: static;

      div.previousWrapper {
        position: absolute;
        top: 25%;
        left: 0;
        z-index: ${Z_INDEX + 30};
        width: 25%;
        height: 50%;
      }

      div.nextWrapper {
        position: absolute;
        top: 25%;
        right: 0;
        z-index: ${Z_INDEX + 30};
        width: 25%;
        height: 50%;
      }
    }
  }
`;
const ButtonSlideRight = styled(Button.Primary).withConfig({
    displayName: 'ButtonSlideRight'
}) `
  display: flex;
  justify-content: center;
  outline: none;
  border: none;
  background: none;
  cursor: pointer;
  width: ${ARROW_SIZE};
  height: ${ARROW_SIZE};
  font-size: 24px;

  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  svg {
    display: block;

    rect {
      fill: ${({ theme }) => getColorStyles(theme, 'fill', 'colors.interactive.base.white')};
    }

    path {
      ${({ theme }) => getColorStyles(theme, 'fill', 'colors.interactive.base.black')};
    }
  }

  &:hover {
    border: unset;
    background: none;
  }
`;
const ButtonSlideLeft = styled(ButtonSlideRight).withConfig({
    displayName: 'ButtonSlideLeft'
}) `
  svg {
    transform: rotate(180deg);
  }
`;
const StoryButtons = styled.div.withConfig({
    displayName: 'StoryButtons'
}) `
  position: absolute;
  top: 36px;
  right: ${MARGIN_SIZE};
  z-index: ${Z_INDEX + 2};

  ${({ isRecirculationSlide }) => {
    return (!isRecirculationSlide &&
        `
      @media (min-width: ${BREAKPOINTS.md}) {
        top: 0;
        right: calc(-${MARGIN_SIZE} - ${BUTTON_SIZE} - 4px);
      }`);
}};

  ${({ isRecirculationSlide }) => {
    return (isRecirculationSlide &&
        `
      top: ${MARGIN_SIZE};
      right: ${MARGIN_SIZE};
    `);
}};

  .adv-visible & {
    display: none;
  }
`;
const ButtonClose = styled(Button.Primary).withConfig({
    displayName: 'ButtonClose'
}) `
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  width: ${BUTTON_SIZE};
  height: ${BUTTON_SIZE};

  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  &,
  &:focus,
  &:hover {
    outline: 0;
    border: unset;
    background: none;
  }

  svg {
    path,
    stroke {
      ${({ theme }) => getColorStyles(theme, 'fill', 'colors.interactive.base.white')};
    }
  }

  .button-icon {
    width: ${BUTTON_SIZE};
    height: ${BUTTON_SIZE};
  }

  ${({ isRecirculationSlide }) => {
    return (isRecirculationSlide &&
        `
       width: ${MARGIN_SIZE};
        height: ${MARGIN_SIZE};
        margin-top: 4px;
        .button-icon {
          width: ${MARGIN_SIZE};
          height: ${MARGIN_SIZE};
        }
    `);
}};
`;
const ButtonPlayPause = styled(ButtonClose).withConfig({
    displayName: 'ButtonPlayPause'
}) `
  margin-top: ${BUTTON_SIZE};
`;
const ButtonVolume = styled(ButtonClose).withConfig({
    displayName: 'ButtonVolume'
}) `
  margin-top: ${BUTTON_SIZE};
`;
const ButtonBack = styled(ButtonClose).withConfig({
    displayName: 'ButtonBack'
}) `
  position: absolute;
  top: ${MARGIN_SIZE};
  left: ${MARGIN_SIZE};
  z-index: ${Z_INDEX + 2};

  svg {
    transform: rotate(180deg);

    rect {
      fill: ${({ theme }) => getColorStyles(theme, 'fill', 'colors.interactive.base.white')};
    }

    path {
      ${({ theme }) => getColorStyles(theme, 'fill', 'colors.interactive.base.white')};
    }
  }
`;
const RecirculationGrid = styled.div.withConfig({
    displayName: 'RecirculationGrid'
}) `
  display: flex;
  position: absolute;
  top: 70px;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  z-index: ${Z_INDEX + 10};
  padding: 0 ${MARGIN_SIZE};
  width: 100%;
  height: calc(100% - 70px);
  overflow-y: scroll;

  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-track {
    background-color: transparent;
  }

  ::-webkit-scrollbar-thumb {
    border: 1px solid transparent;
    border-radius: 20px;
    background-clip: content-box;
    background-color: ${getColorToken('colors.interactive.base.deemphasized')};
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: ${getColorToken('colors.interactive.base.deemphasized')};
  }
`;
const RecirculationItem = styled.a.withConfig({
    displayName: 'RecirculationItem'
}) `
  margin: 0 1% ${BUTTON_SIZE} 1%;
  width: 31%;
  max-height: 180px;
  overflow: hidden;
  text-align: center;
  text-decoration: none;

  .responsive-asset {
    margin: 0 auto;
    padding: 0 calc(${MARGIN_SIZE} / 2);
    max-width: 130px;
    height: fit-content;
    max-height: 130px;

    img {
      margin: 3px auto;
      border: 3px solid transparent;
      border-radius: 50%;
      box-shadow: 0 0 0 2px
        ${({ theme }) => getColorToken(theme, 'colors.interactive.base.white')};
    }
  }

  p {
    ${({ theme, bubbleFont }) => getTypographyStyles(theme, bubbleFont)};
    display: -webkit-box; /* stylelint-disable-line */
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: center;
    color: ${getColorToken('colors.interactive.base.white')};
  }
`;
const StoryAdvWrapper = styled.div.withConfig({
    displayName: 'ads-wrapper'
}) `
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  flex-direction: column;
  justify-content: center;
  z-index: ${Z_INDEX + 10};

  background: #000000;
  width: 100%;
  height: 100%;
  @media (min-width: 480px) {
    border-radius: 16px;
  }

  .divAdPlayerPro {
    @media (min-width: 480px) {
      border-radius: 16px;
    }
    /* stylelint-disable-next-line declaration-no-important */
    height: 100% !important;

    > div.orp-player-wrapper {
      @media (min-width: 480px) {
        border-radius: 16px;
      }
    }
  }

  .divAdPlayerPro .orp-player-wrapper {
    /* stylelint-disable-next-line declaration-no-important */
    width: 100% !important;
    /* stylelint-disable-next-line declaration-no-important */
    height: 100% !important;
  }

  .orp-force-hide-player::before {
    /* stylelint-disable-next-line declaration-no-important */
    background: #000000 !important;
  }
`;
const Tracker = styled.div.withConfig({
    displayName: 'tracker'
}) `
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  z-index: 0;
  width: 100%;
  height: 100%;
`;
module.exports = {
    StoryContainer,
    StoryHeader,
    SlideTitle,
    SlideCredits,
    MarqueeText,
    CNEVideoEmbedWrapper,
    SlideInfoWrapper,
    ProgressBar,
    ProgressBarContainer,
    ProgressBarActive,
    StoryNavigation,
    ButtonSlideLeft,
    ButtonSlideRight,
    StoryButtons,
    ButtonClose,
    ButtonPlayPause,
    ButtonVolume,
    ButtonBack,
    RecirculationGrid,
    RecirculationItem,
    StoryAdvWrapper,
    Tracker
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 31105:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.useVastParameter = exports.getVideoId = exports.useWindowVisibility = exports.useAnimationFrame = exports.usePausableTimeout = exports.enrichStoriesData = void 0;
const React = __webpack_require__(96540);
const { useEffect, useRef } = React;
function getTimeDelta(precision = 4) {
    return Number(Math.random().toFixed(precision));
}
/**
 * Enriches an array of story items with additional metadata such as index, duration, and calculatedDuration.
 *
 * @param {Array} items - The array of story items to enrich. Each item should be an object containing metadata about a slide.
 * @param {number} defaultDuration - The default duration to use for slides that do not have a specified duration.
 * @returns {Array} An array of enriched story items where each item includes the index, duration, and calculatedDuration properties.
 *
 * Note: The calculatedDuration is generated using a random time delta to avoid collisions with the previous slide's duration.
 * If a collision occurs, the time delta is regenerated with higher precision.
 */
function enrichStoriesData(items = [], defaultDuration = 10000) {
    let lastCalculatedDuration = 0;
    return items.map((slide, index) => {
        let { duration } = slide;
        if (!duration) {
            if (slide.contentType === 'cnevideo') {
                // eslint-disable-next-line prefer-destructuring
                duration = slide.image?.duration ?? defaultDuration;
                if (slide.isLive)
                    duration = defaultDuration * 3;
            }
            else
                duration = defaultDuration;
        }
        duration = Math.min(duration, defaultDuration * 3);
        let calculatedDuration = duration + getTimeDelta();
        /*
         * it is possible that there is a collision in delta time generated.
         * in that case we are storing last calculatedDuration and comparing it
         * on each iteration with next calculated duration.
         * if collision occured and we got same duration we are re generating the time delta
         * with a different precision. slightly higer then default
         * */
        if (calculatedDuration === lastCalculatedDuration) {
            calculatedDuration = duration + getTimeDelta(6);
        }
        lastCalculatedDuration = calculatedDuration;
        return {
            ...slide,
            index,
            duration,
            calculatedDuration
        };
    });
}
exports.enrichStoriesData = enrichStoriesData;
/**
 * Custom hook that sets up a timeout with the ability to pause and resume.
 *
 * @param {Function} callback - The function to be executed after the timeout.
 * @param {number} delay - The delay in milliseconds for the timeout.
 * @param {boolean} pause - A boolean indicating whether the timeout should be paused.
 *
 * This hook uses the useRef and useEffect hooks to manage the timeout state.
 * When the delay or pause changes, the timeout is recalculated. If pause is true,
 * the remaining time is adjusted, allowing the timeout to be resumed later.
 */
function usePausableTimeout(callback, delay, pause) {
    const savedCallback = useRef();
    const timeRemaining = useRef(delay);
    const startTimeRef = useRef(Date.now());
    // Remember the latest callback.
    useEffect(() => {
        savedCallback.current = callback;
    }, [callback]);
    // reset time remaining everytime delay changes
    useEffect(() => {
        timeRemaining.current = delay;
    }, [delay]);
    // Set up the interval.
    useEffect(() => {
        function tick() {
            savedCallback.current();
        }
        if (delay !== null && pause === false) {
            startTimeRef.current = Date.now();
            const timerId = setTimeout(tick, timeRemaining.current);
            return () => {
                clearTimeout(timerId);
            };
        }
        return () => { };
    }, [delay, pause]);
    useEffect(() => {
        if (pause) {
            timeRemaining.current -= Date.now() - startTimeRef.current;
        }
    }, [pause]);
}
exports.usePausableTimeout = usePausableTimeout;
/**
 * Custom hook that provides a way to run animations using
 * requestAnimationFrame.
 *
 * @param {Function} callback - A function to be executed on each frame.
 * Receives the time difference (deltaTime) since the last frame as an argument.
 * @param {boolean} start - A boolean indicating whether the animation loop should start.
 * If set to false, the animation loop will not run.
 *
 * This hook uses `requestAnimationFrame` to provide smooth animations. The
 * callback function is called with the time difference between frames, allowing
 * for frame-based calculations. The animation loop can be started or stopped by
 * toggling the `start` parameter. The hook cleans up the animation frame when
 * the component using it is unmounted or when `start` is set to false.
 */
function useAnimationFrame(callback, start) {
    const requestRef = useRef();
    const previousTimeRef = useRef();
    const callBackRef = useRef(callback);
    useEffect(() => {
        callBackRef.current = callback;
    }, [callback]);
    useEffect(() => {
        function animate(time) {
            if (previousTimeRef.current !== undefined &&
                previousTimeRef.current !== null) {
                const deltaTime = time - previousTimeRef.current;
                callBackRef.current(deltaTime);
            }
            previousTimeRef.current = time;
            requestRef.current = requestAnimationFrame(animate);
        }
        if (start !== false) {
            requestRef.current = requestAnimationFrame(animate);
            return () => {
                cancelAnimationFrame(requestRef.current);
                requestRef.current = null;
                previousTimeRef.current = null;
            };
        }
        return () => {
            if (requestRef.current) {
                requestRef.current = null;
            }
            cancelAnimationFrame(requestRef.current);
            previousTimeRef.current = null;
        };
    }, [start]);
}
exports.useAnimationFrame = useAnimationFrame;
/**
 * Custom hook that tracks the visibility of the browser window.
 *
 * @param {Function} callback - A function that receives a boolean value indicating
 * whether the window is in focus (true) or not (false).
 *
 * This hook sets up event listeners for 'focus' and 'blur' events on the window,
 * calling the provided callback with true when the window gains focus and false
 * when it loses focus. The event listeners are cleaned up when the component using
 * this hook is unmounted.
 */
function useWindowVisibility(callback) {
    const callBackRef = useRef(callback);
    useEffect(() => {
        callBackRef.current = callback;
    }, [callback]);
    useEffect(() => {
        /*
        function handleActive() {
          callBackRef.current(true);
        }
        */
        function handleInActive() {
            callBackRef.current(false);
        }
        // window.addEventListener('focus', handleActive);
        window.addEventListener('blur', handleInActive);
        return () => {
            // window.removeEventListener('focus', handleActive);
            window.removeEventListener('blur', handleInActive);
        };
    }, []);
}
exports.useWindowVisibility = useWindowVisibility;
/**
 * Extracts the video id from a given url.
 *
 * The url is expected to be in the format
 * 'https://player.cnevids.com/video/{videoId}.js'
 *
 * @param {string} url - The url to extract the video id from.
 * @returns {string|null} The video id if the url is in the correct format, null otherwise.
 */
function getVideoId(url) {
    if (url) {
        const regex = /video\/(.*)\.js/;
        const match = url.match(regex);
        if (match && match[1]) {
            return match[1];
        }
    }
    return null;
}
exports.getVideoId = getVideoId;
/**
 * return IU param for ADV associated with the brandSlug.
 *
 * @param {string} copilotCode - The code used in copilot to identify the brand
 * @returns {string|null} the IU parameter associated with the brandSlug.
 */
function useVastParameter(copilotCode) {
    const networkSlot = useRef(null);
    if ( true && window.cns) {
        networkSlot.current = window.cns.config?.config?.network;
    }
    if (networkSlot.current === null || networkSlot.current === undefined) {
        return null;
    }
    return `/${networkSlot.current}/conde.verticaldiscovery/${copilotCode}`;
}
exports.useVastParameter = useVastParameter;
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 29076:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const Button = __webpack_require__(73730);
const { VotingWrapper, VotingPrompt, VotingButtons } = __webpack_require__(61333);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * Voting component
 *
 * @param {object} props - React props
 * @param {Array} [props.answers] - an array of buttons
 * @param {bool} [props.hasVoted] - set when a vote has been cast
 * @param {Function} [props.onVoteCast] - voting callback
 * @param {string} [props.prompt] - voting question
 * @param {string} [props.votedMessage] - message to display after voting
 *
 * @returns {ReactElement} <div>
 */
const Voting = ({ answers = [], onVoteCast, prompt, hasVoted = false, votedMessage }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'Voting'
        });
    }, []);
    if (!answers.length) {
        return null;
    }
    return (React.createElement(VotingWrapper, { "data-testid": "voting" },
        hasVoted ? (React.createElement(VotingPrompt, { "data-testid": "response" }, votedMessage)) : (React.createElement(VotingPrompt, { "data-testid": "prompt" }, prompt)),
        React.createElement(VotingButtons, { "data-testid": "voting-button" }, answers.map((answer) => {
            const btnStyle = answer.selected ? 'filled' : 'outlined';
            const onVote = () => {
                !answer.selected && onVoteCast({ value: answer.value });
            };
            return (React.createElement(Button.Utility, { key: answer.text, type: "button", btnStyle: btnStyle, "data-testid": "answer", onClickHandler: onVote, selected: answer.selected, label: answer.text }));
        }))));
};
Voting.propTypes = {
    answers: PropTypes.array,
    hasVoted: PropTypes.bool,
    onVoteCast: PropTypes.func,
    prompt: PropTypes.string,
    votedMessage: PropTypes.string
};
module.exports = Voting;
//# sourceMappingURL=Voting.js.map

/***/ }),

/***/ 14155:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(29076);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 61333:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { BaseText } = __webpack_require__(76955);
const { calculateSpacing } = __webpack_require__(26865);
const VotingWrapper = styled.div.withConfig({
    displayName: 'VotingWrapper'
}) `
  margin-bottom: ${calculateSpacing(2)};
`;
const VotingPrompt = styled(BaseText).withConfig({
    displayName: 'VotingPrompt'
}) `
  margin-top: ${calculateSpacing(2)};
  margin-bottom: ${calculateSpacing(2)};
`;
VotingPrompt.defaultProps = {
    colorToken: 'colors.interactive.base.black',
    typeIdentity: 'typography.definitions.utility.button-utility'
};
const VotingButtons = styled.div.withConfig({
    displayName: 'VotingButtons'
}) `
  display: flex;

  > * {
    width: 50%;
    max-width: 165px;

    &:first-child {
      margin-right: ${calculateSpacing(1)};
    }

    &:last-child {
      margin-left: ${calculateSpacing(1)};
    }
  }
`;
module.exports = {
    VotingButtons,
    VotingPrompt,
    VotingWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 63761:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ContentLangProvider = exports.ContentLangContext = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const prop_types_1 = __importDefault(__webpack_require__(5556));
const i18n_1 = __webpack_require__(18106);
exports.ContentLangContext = react_1.default.createContext({});
const ContentLangProvider = ({ lang, children }) => (react_1.default.createElement(exports.ContentLangContext.Provider, { value: lang || i18n_1.DEFAULT_LANG }, children));
exports.ContentLangProvider = ContentLangProvider;
exports.ContentLangProvider.propTypes = {
    children: prop_types_1.default.node,
    lang: prop_types_1.default.string
};
exports.ContentLangProvider.displayName = 'ContentLangProvider';
//# sourceMappingURL=ContentLangProvider.js.map

/***/ }),

/***/ 76573:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

// Editors have the ability to set a `lang` property on content (e.g. articles)
// we may want to access lang e.g. in embed properties within the article
// this provider allows us to grab `lang` from any component using a `useLang()` hook
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ContentLangProvider = exports.ContentLangContext = exports.useContentLang = void 0;
var useContentLang_1 = __webpack_require__(34549);
Object.defineProperty(exports, "useContentLang", ({ enumerable: true, get: function () { return useContentLang_1.useContentLang; } }));
var ContentLangProvider_1 = __webpack_require__(63761);
Object.defineProperty(exports, "ContentLangContext", ({ enumerable: true, get: function () { return ContentLangProvider_1.ContentLangContext; } }));
Object.defineProperty(exports, "ContentLangProvider", ({ enumerable: true, get: function () { return ContentLangProvider_1.ContentLangProvider; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 34549:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.useContentLang = void 0;
const react_1 = __webpack_require__(96540);
const ContentLangProvider_1 = __webpack_require__(63761);
const i18n_1 = __webpack_require__(18106);
const useContentLang = () => (0, react_1.useContext)(ContentLangProvider_1.ContentLangContext) || i18n_1.DEFAULT_LANG;
exports.useContentLang = useContentLang;
//# sourceMappingURL=useContentLang.js.map

/***/ }),

/***/ 59531:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { connect: connectToStore } = __webpack_require__(67851);
const ErrorBoundary = __webpack_require__(89568);
/**
 * ConnectedErrorBoundary component
 *
 * @param {object} state - Required state via Redux Provider store
 *
 * @returns {ReactElement} <header>
 */
const ConnectedErrorBoundary = connectToStore((state) => {
    const { sentry } = state;
    return {
        sentryDSN: sentry && sentry.dsn
    };
})(ErrorBoundary);
module.exports = ConnectedErrorBoundary;
//# sourceMappingURL=ConnectedErrorBoundary.js.map

/***/ }),

/***/ 89568:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { injectIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(61726)/* ["default"] */ .A);
const { TrackComponentChannel } = __webpack_require__(78788);
const catpureSentryException = (error, extraData) => {
    Sentry.withScope((scope) => {
        scope.setTags(extraData.tags);
        scope.setExtras(extraData.extra);
        Sentry.captureException(error, extraData);
    });
};
/**
 * Inject raven script into browser
 *
 * @param {string} sentryDSN - use for endpoint for logging
 * @param {object} error - errors from errorboundary componentDidCatch
 * @param {object} extraData - extra info to pass to raven
 * @returns {undefined} - undefined
 */
const injectScript = (sentryDSN, error, extraData) => {
    const script = document.createElement('script');
    script.setAttribute('async', 'async');
    script.id = 'error-boundary-sentry-logging';
    script.integrity =
        'sha384-aUot8tg7PBjpaNw1irUMJOYjTkC/Acnd2QwobKnxvPf97XlMHI4w3aO7zDWPRKfp';
    script.crossOrigin = 'anonymous';
    script.src = 'https://browser.sentry-cdn.com/7.17.3/bundle.es5.min.js';
    script.onload = () => {
        Sentry.init({ dsn: sentryDSN, defaultIntegrations: false });
        catpureSentryException(error, extraData);
    };
    document.body.appendChild(script);
};
/**
 * Error boundary component based on React docs
 * https://reactjs.org/docs/error-boundaries.html
 */
class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            hasError: false
        };
    }
    componentDidMount() {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'ErrorBoundary'
        });
    }
    static getDerivedStateFromError() {
        return { hasError: true };
    }
    componentDidCatch(error, info) {
        const { sentryDSN } = this.props;
        if (!sentryDSN) {
            return;
        }
        const timestamp = new Date().getTime();
        const metadata = {
            extra: info,
            tags: {
                timestamp,
                errorContext: 'client',
                source: 'ErrorBoundary'
            }
        };
        // Wait until an error actually happens before loading Sentry.
        if (typeof Sentry !== 'undefined') {
            catpureSentryException(error, metadata);
        }
        else {
            injectScript(sentryDSN, error, metadata);
        }
    }
    render() {
        const { intl } = this.props;
        if (this.state.hasError) {
            return (React.createElement("div", { className: "error-boundary" }, intl.formatMessage(translations.errorMessage)));
        }
        return this.props.children;
    }
}
ErrorBoundary.propTypes = {
    children: PropTypes.node,
    intl: PropTypes.object,
    sentryDSN: PropTypes.string
};
module.exports = injectIntl(ErrorBoundary);
//# sourceMappingURL=ErrorBoundary.js.map

/***/ }),

/***/ 48496:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(59531);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 61726:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    errorMessage: {
        id: 'ErrorBoundary.ErrorMessage',
        defaultMessage: 'An error occurred.',
        description: 'Error message'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 16751:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { TrackComponentChannel } = __webpack_require__(78788);
const { InterstitialWrapper } = __webpack_require__(97607);
const Interstitial = ({ children }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'Interstitial'
        });
    }, []);
    return React.createElement(InterstitialWrapper, null, children);
};
Interstitial.propTypes = {
    children: PropTypes.node
};
module.exports = Interstitial;
//# sourceMappingURL=Interstitial.js.map

/***/ }),

/***/ 2245:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(16751);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 97607:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { ZINDEX_MAP } = __webpack_require__(96472);
const InterstitialWrapper = styled.div.withConfig({
    displayName: 'InterstitialWrapper'
}) `
  position: fixed;
  z-index: ${ZINDEX_MAP.interstitialLayer};
`;
module.exports = {
    InterstitialWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 12969:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.withLightbox = exports.Lightbox = void 0;
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState, useEffect } = __webpack_require__(96540);
const ReactModal = __webpack_require__(20312);
const classnames = __webpack_require__(32485);
const clamp = __webpack_require__(78659);
const findIndex = __webpack_require__(24713);
const some = __webpack_require__(42426);
const { useIntl } = __webpack_require__(46984);
const translations = (__webpack_require__(65780)/* ["default"] */ .A);
const LightboxContext = __webpack_require__(82185);
const LightboxSlide = __webpack_require__(97723);
const CloseIcon = __webpack_require__(76399);
const { TrackComponentChannel } = __webpack_require__(78788);
const { trackNavigationEvent } = __webpack_require__(14307);
const { GalleryEmbedContainer, LightboxCloseButtonIcon, LightboxGlobalStyles, LightboxSlidesWrapper, LightboxSwipe, LightboxWrapper } = __webpack_require__(88258);
const GalleryEmbed = __webpack_require__(75966);
const PaletteProvider = __webpack_require__(49235);
const fadeTime = 200;
let lightbox;
/**
 * Lightbox component
 *
 * @param {object} props - React props
 * @param {node} props.children - Child components to render
 * @param {boolean} props.hasDisabledCloseOnClickForLightbox - Optional boolean to disable closing lightbox on click
 * @param {boolean} props.hasPortraitOnlyImages - Optional boolean to set the height of the Lightbox image when all images are known to be portrait
 * @param {boolean} props.hasPhotoBookmark - Optional boolean to enable photo bookmarking
 * @param {boolean} props.hasSlideShow - Optional boolean to have lightbox enable slideshow
 * @param {Function} props.onExpand - Optional callback function called when an image is expanded
 * @param {boolean} props.shouldHoldImageSpace - Optional boolean, set to true to hold image space using image aspect ratio
 * @param {boolean} props.showEnlargeIcon - Optional boolean to show an enlarge icon over the ResponsiveImage when expandable
 * @param {Array} props.slides - Array of slide data
 * @param {string} props.slideShowVariation - Optional string used to set variation of slideshow
 * @param {string} props.theme - Optional theme name
 * @param {string} props.variationName - Name of the variation to use ('Default' or 'GalleryEmbed')
 *
 * @returns {ReactElement} <div>
 */
const Lightbox = ({ children, hasDisabledCloseOnClickForLightbox = false, hasPortraitOnlyImages = false, hasPhotoBookmark = false, hasSlideShow, onExpand, shouldHoldImageSpace = false, showEnlargeIcon = false, slides, slideShowVariation, theme = 'standard', variationName = 'Default' }) => {
    const shouldUseGalleryEmbed = variationName === 'GalleryEmbed';
    const hasGalleryEmbedListicleLayout = slideShowVariation === 'listicle';
    const disableLinksTab = (lightboxRef) => {
        const anchorTags = lightboxRef?.querySelectorAll('a');
        anchorTags?.forEach((anchor) => {
            anchor.setAttribute('tabindex', '-1');
        });
    };
    const trackSnowplowEvent = () => {
        const eventData = {
            type: 'close',
            subject: 'lightbox_gallery_slide'
        };
        const options = { skipDuplicateEvent: false };
        trackNavigationEvent(eventData, null, options);
    };
    const [slide, setSlide] = useState(-1);
    const [selectedSlideId, setSelectedSlideId] = useState('');
    const [isModalClosed, setisModalClosed] = useState(true);
    const { formatMessage } = useIntl();
    const advance = (amount) => hasSlideShow && setSlide(clamp(slide + amount, 0, slides.length - 1));
    const imageOrCaptionTouched = (element) => element.tagName === 'IMG' || element.tagName === 'SPAN';
    const expanded = slide > -1;
    const close = (e) => {
        if (e === 'swipeClose' || !imageOrCaptionTouched(e.target)) {
            setSlide(undefined);
        }
        setisModalClosed(true);
        trackSnowplowEvent();
    };
    const shiftToLeft = slideShowVariation === 'listicle' ? '0' : (-100.0 * slide) / slides.length;
    const leftDistanceStyle = {
        transform: `translate(${shiftToLeft}%)`
    };
    const setLightboxRef = (element) => {
        if (element) {
            lightbox = element;
        }
    };
    const onAfterOpen = () => {
        setisModalClosed(false);
        if (shouldUseGalleryEmbed && selectedSlideId) {
            const elementId = `lightbox-gallery-${selectedSlideId}`;
            const element = document.getElementById(elementId);
            if (element) {
                element.scrollIntoView();
            }
        }
    };
    const onRequestClose = () => {
        setSlide(undefined);
        setisModalClosed(true);
        trackSnowplowEvent();
    };
    useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'LightBox',
            variation: variationName
        });
    });
    useEffect(() => {
        if (expanded && !hasGalleryEmbedListicleLayout) {
            setTimeout(() => {
                disableLinksTab(lightbox);
            }, 50);
        }
    }, [expanded, hasGalleryEmbedListicleLayout]);
    const lightboxCloseEventProps = (action, events) => hasDisabledCloseOnClickForLightbox
        ? {}
        : events.reduce((acc, item) => ({ ...acc, [item]: (e) => close(action || e) }), {});
    return (React.createElement(PaletteProvider, { palette: theme },
        React.createElement(LightboxWrapper, null,
            React.createElement(LightboxContext.Provider, { value: {
                    expandHandler: (id) => {
                        const slideIndex = findIndex(slides, { id });
                        setSlide(slideIndex);
                        setSelectedSlideId(id);
                        onExpand?.();
                    },
                    isInSlides: (id) => some(slides, { id }),
                    showEnlargeIcon
                } }, children),
            React.createElement(ReactModal, { className: classnames(`lightbox ${slideShowVariation ? `${slideShowVariation}-variation` : ''}`), overlayClassName: {
                    base: classnames('lightbox__overlay'),
                    afterOpen: 'lightbox__overlay--open',
                    beforeClose: 'lightbox__overlay--closing'
                }, bodyOpenClassName: "body__lightbox--open", isOpen: expanded, onAfterOpen: onAfterOpen, onRequestClose: onRequestClose, contentRef: setLightboxRef, closeTimeoutMS: fadeTime, contentLabel: formatMessage(translations.contentLabel) },
                React.createElement(LightboxCloseButtonIcon, { ButtonIcon: CloseIcon, isGalleryEmbedVariation: shouldUseGalleryEmbed, isIconButton: true, dataAttrs: { 'data-action': 'close' }, label: formatMessage(translations.closeButtonIconLabel), onClickHandler: close, role: "button", ariaLabel: formatMessage(translations.closeButtonIconLabel) }),
                shouldUseGalleryEmbed && (React.createElement(GalleryEmbedContainer, { isListicleLayout: hasGalleryEmbedListicleLayout, tabIndex: hasGalleryEmbedListicleLayout ? '0' : '-1', hasPortraitOnlyImages: hasPortraitOnlyImages },
                    React.createElement(GalleryEmbed, { controlsIcon: "Arrow", gallerySlideVariation: "ItemLeft", hasPhotoBookmark: hasPhotoBookmark, indexToStartOn: slide, isListicleLayout: hasGalleryEmbedListicleLayout, isInLightbox: true, shouldHoldImageSpace: shouldHoldImageSpace, showGalleryEmbedCaption: false, showGallerySlideCaptionOrTitle: true, showZoomedImage: true, slides: slides, isModal: true, isModalClosed: isModalClosed }))),
                !shouldUseGalleryEmbed && (React.createElement(LightboxSwipe, { ...lightboxCloseEventProps('swipeClose', [
                        'onSwipeDown',
                        'onSwipeUp'
                    ]), onSwipeRight: () => advance(-1), onSwipeLeft: () => advance(1), shouldPreventDefaultEvent: true },
                    React.createElement(LightboxSlidesWrapper, { className: slideShowVariation
                            ? `${slideShowVariation}-variation-slide-wrapper`
                            : '', style: leftDistanceStyle, ...lightboxCloseEventProps('', ['onMouseDown', 'onTouchEnd']) }, slides.map((lightBoxSlide) => (React.createElement(LightboxSlide
                    // LightboxSlide requires an altText but not all gallery images have altText set
                    // It would be good to make sure they do and remove this default text
                    , { 
                        // LightboxSlide requires an altText but not all gallery images have altText set
                        // It would be good to make sure they do and remove this default text
                        altText: lightBoxSlide.image?.altText || 'an image in a lightbox', ...lightBoxSlide, className: slideShowVariation
                            ? `${slideShowVariation}-variation-slide`
                            : '', key: lightBoxSlide.id })))))),
                React.createElement(LightboxGlobalStyles, null)))));
};
exports.Lightbox = Lightbox;
exports.Lightbox.propTypes = {
    children: PropTypes.node.isRequired,
    hasDisabledCloseOnClickForLightbox: PropTypes.bool,
    hasPhotoBookmark: PropTypes.bool,
    hasPortraitOnlyImages: PropTypes.bool,
    hasSlideShow: PropTypes.bool,
    onExpand: PropTypes.func,
    shouldHoldImageSpace: PropTypes.bool,
    showEnlargeIcon: PropTypes.bool,
    slides: PropTypes.array.isRequired,
    slideShowVariation: PropTypes.string,
    theme: PropTypes.string,
    variationName: PropTypes.oneOf(['GalleryEmbed', 'Default'])
};
// This is a HOC that takes a component as an argument
const withLightbox = ({ Component, ...rest }) => (props) => (React.createElement(exports.Lightbox, { ...rest },
    React.createElement(Component, { ...props })));
exports.withLightbox = withLightbox;
//# sourceMappingURL=Lightbox.js.map

/***/ }),

/***/ 97723:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const Caption = __webpack_require__(14760);
const ResponsiveAsset = __webpack_require__(73275);
const ResponsiveImage = __webpack_require__(43608);
const { LightboxSlideWrapper, LightboxSlideTopSpacer, LightboxSlideImageCaptionOuter, LightboxSlideCaptionContainer } = __webpack_require__(88258);
const LightboxSlide = ({ caption, className, credit, dangerousCredit, dangerousCaption, ...image }) => {
    const [orientation, setOrientation] = React.useState('landscape');
    const resolveOrientation = ({ width, height }) => {
        if (width < height)
            setOrientation('portrait');
        else if (width > height)
            setOrientation('landscape');
        else if (width === height)
            setOrientation('square');
    };
    return (React.createElement(LightboxSlideWrapper, { className: className, screenOrientation: orientation },
        React.createElement(LightboxSlideTopSpacer, null),
        React.createElement(LightboxSlideImageCaptionOuter, null,
            React.createElement(ResponsiveAsset, { ...image, contentType: "photo", onAssetLoaded: resolveOrientation }),
            React.createElement(LightboxSlideCaptionContainer, null,
                React.createElement(Caption, { dangerousCaptionText: caption || dangerousCaption, dangerousCredit: credit || dangerousCredit, hasLinebreak: orientation === 'portrait' })))));
};
LightboxSlide.propTypes = {
    ...ResponsiveImage.propTypes,
    caption: PropTypes.string,
    credit: PropTypes.string,
    dangerousCaption: PropTypes.string,
    dangerousCredit: PropTypes.string
};
module.exports = LightboxSlide;
//# sourceMappingURL=LightboxSlide.js.map

/***/ }),

/***/ 83726:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(12969);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 88258:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { createGlobalStyle } = __webpack_require__(92168);
const Button = __webpack_require__(73730);
const { CaptionWrapper, CaptionText } = __webpack_require__(38860);
const { calculateSpacing, getColorStyles, getColorToken, getLinkStyles, getTypographyStyles, getZIndex, isInverted, minScreen } = __webpack_require__(26865);
const Swipe = __webpack_require__(39767);
const { BREAKPOINTS } = __webpack_require__(96472);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const { GallerySlideFigure, GallerySlideAssetWrapper, GallerySlideFigCaptionWrapper, GallerySlideFigCaption, GallerySlideCaptionOffers, GallerySlideCaptionCtaBlock, GallerySlideCaptionCreditWrapper, GallerySlideCaptionDek, GallerySlideCaptionHed, GallerySlideWrapper, GallerySlideCaptionBrandNameClickable, GallerySlideCaptionSeasonName } = __webpack_require__(55082);
const { GalleryEmbedSlideList, GalleryEmbedSwipe, GalleryEmbedControlsAdTitle, GalleryEmbedControlsStyles, GalleryEmbedControlsCounter, GalleryEmbedControlsController, GalleryEmbedControlsButton, GalleryEmbedWrapper } = __webpack_require__(56082);
const { PhotoBookmarkButton, PhotoBookmarkWrapper } = __webpack_require__(62389);
const { BookmarkWrapper } = __webpack_require__(55082);
const LightboxGlobalStyles = createGlobalStyle `

  .body__lightbox--open {
    overflow: hidden;
  }
  
  .lightbox__overlay {
    position: fixed; 
    top: 0;
    left: 0;
    transition: opacity 0.2s;
    opacity: 0;
    z-index: ${getZIndex('interstitialLayer')};
    background-color: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.standard.background')};
    
    ${({ theme }) => isInverted(theme) &&
    getColorStyles('background-color', 'colors.background.black')};
    
    &.lightbox__overlay--open {
      opacity: 1;

      &.lightbox__overlay--closing {
        opacity: 0;
      }
    }
  }

  .lightbox {
    width: 100vw;
    height: 100dvh;
  }

  .listicle-variation {
    overflow-y: scroll;
  }
`;
// ReactModal applies theses classes below to the body element when modal opens and depending on state
const LightboxWrapper = styled.div.withConfig({
    displayName: 'LightboxWrapper'
}) `
  grid-column-start: main;
`;
const LightboxSwipe = styled(Swipe).withConfig({
    displayName: 'LightboxSwipe'
}) `
  display: flex;
  width: 100%;
  height: 100%;
`;
const LightboxCloseButtonIcon = styled(Button.Utility).withConfig({
    displayName: 'LightboxCloseButtonIcon'
}) `
  position: fixed;
  top: ${calculateSpacing(0.5)};
  right: ${calculateSpacing(0.5)};
  z-index: 1;
  cursor: pointer;
  padding: 8px;
  line-height: 0;

  .icon-close {
    padding: 8px;
    fill: ${({ theme }) => getColorToken(theme, 'colors.interactive.base.dark')};

    g {
      ${({ theme }) => isInverted(theme) &&
    getColorStyles('stroke', 'colors.interactive.base.white')};
    }
  }

  &,
  &:focus,
  &:hover {
    border: 1px solid
      ${({ theme }) => getColorToken(theme, 'colors.interactive.base.white')};
    background-color: ${({ theme }) => getColorToken(theme, 'colors.interactive.base.white')};

    ${({ theme }) => isInverted(theme) &&
    `
      border: none;
      background-color: rgba(
        ${getColorToken(theme, 'colors.interactive.base.black', {
        rgbOnly: true
    })},
        0.4
      );

      ${minScreen(BREAKPOINTS.md)} {
        background-color: ${getColorToken(theme, 'colors.interactive.base.black')};
      }
    `}
  }

  &:focus {
    border: 1px solid
      ${({ theme }) => getColorToken(theme, 'colors.interactive.base.brand-primary')};

    ${({ theme }) => isInverted(theme) && `border: none;`}
  }

  @media (min-width: ${BREAKPOINTS.md}) {
    top: ${calculateSpacing(2)};
    right: ${calculateSpacing(2)};
  }

  ${({ isGalleryEmbedVariation }) => isGalleryEmbedVariation &&
    `
    & {
      top: ${calculateSpacing(3)};
      right: ${calculateSpacing(3)};
      padding: 0;
    }
  `}
`;
const LightboxSlidesWrapper = styled.div.withConfig({
    displayName: 'LightboxSlidesWrapper'
}) `
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  transition: transform 0.4s ease-in-out;
  height: 100%;

  &.listicle-variation-slide-wrapper {
    display: block;
  }
`;
const LightboxSlideTopSpacer = styled.div.withConfig({
    displayName: 'LightboxSlideTopSpacer'
}) ``;
const LightboxSlideImageCaptionOuter = styled.div.withConfig({
    displayName: 'LightboxSlideImageCaptionOuter'
}) ``;
const LightboxSlideCaptionContainer = styled.div.withConfig({
    displayName: 'LightboxSlideCaptionContainer'
}) ``;
const LightboxSlideWrapper = styled.div.withConfig({
    displayName: 'LightboxSlideWrapper'
}) `
  background-color: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.standard.background')};
  width: 100vw;

  &.listicle-variation-slide {
    background-color: ${({ theme }) => getColorToken(theme, 'colors.interactive.base.white')};
    padding: ${calculateSpacing(3)} ${calculateSpacing(9)};

    ${CaptionWrapper} {
      margin-bottom: 0;
      background-color: ${({ theme }) => getColorToken(theme, 'colors.interactive.base.white')};
    }
  }

  ${CaptionWrapper} {
    background-color: ${({ theme }) => getColorToken(theme, 'colors.consumption.lead.standard.background')};
    text-align: initial;

    ${CaptionText} {
      ${({ theme }) => getLinkStyles(theme, 'colors.consumption.lead.standard.description', null)}

      &:hover {
        text-decoration: none;
      }
    }
  }

  ${({ screenOrientation }) => screenOrientation === 'landscape' ||
    screenOrientation === 'portrait' ||
    screenOrientation === 'square'
    ? `
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;

    ${LightboxSlideImageCaptionOuter} {
      display: contents;
    }

    .responsive-image {
      display: flex;
      flex-direction: column;

      ${ResponsiveImageContainer} {
        max-height: 85vh;
        object-fit: contain;
      }
    }

    ${LightboxSlideCaptionContainer} {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }

    ${CaptionWrapper} {
      margin: ${calculateSpacing(2)} ${calculateSpacing(2)} ${calculateSpacing(5)};
    }

    @media (min-width: ${BREAKPOINTS.md}) {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: ${calculateSpacing(4)};
      height: initial;

      ${LightboxSlideTopSpacer} {
        display: none;
      }

      ${LightboxSlideImageCaptionOuter} {
        display: block;
      }

      .responsive-asset {
        display: table-cell;
      }

      ${LightboxSlideCaptionContainer} {
        display: table-caption;
        caption-side: bottom;
      }

      ${CaptionWrapper} {
        margin: 0;
        margin-top: ${calculateSpacing(1)};
      }
    }

    ${screenOrientation === 'portrait'
        ? `
      @media (min-width: ${BREAKPOINTS.lg}) {
        display: flex;
        flex-direction: row;
        height: 100%;

        ${LightboxSlideTopSpacer} {
          display: none;
        }

        ${LightboxSlideImageCaptionOuter} {
          display: contents;
        }

        .responsive-asset {
          display: flex;
          height: 100%;

          .responsive-image {
            height: 100%;

            ${ResponsiveImageContainer} {
              height: 100%;
              max-height: initial;
            }
          }
        }

        ${LightboxSlideCaptionContainer} {
          display: flex;
          flex-direction: column;
          align-self: flex-end;
        }

        ${CaptionWrapper} {
          margin: 0;
          margin-bottom: ${calculateSpacing(6)};
          margin-left: ${calculateSpacing(2)};
          max-width: 180px;
        }
      }
    `
        : ``}
  `
    : ``}
`;
const GalleryEmbedContainer = styled.div.withConfig({
    displayName: 'GalleryEmbedContainer'
}) `
  &&& {
    ${GalleryEmbedSwipe} {
      background-color: inherit;
    }

    ${GalleryEmbedWrapper} {
      margin: unset;
    }

    .gallery__slides__slide {
      margin-bottom: unset;
    }

    ${GallerySlideWrapper} {
      margin-bottom: unset;
    }

    ${GallerySlideFigure} {
      display: grid;
      grid-template-areas:
        'left-col image right-col'
        'left-col caption right-col';
      grid-template-columns: 1fr auto 1fr;
      grid-template-rows: auto;
      align-items: center;
      justify-items: center;
    }

    ${GallerySlideAssetWrapper} {
      grid-column: left-col / right-col;
      grid-row: 1;

      img {
        width: 100%;
        min-width: unset;
        max-height: 100%;
      }

      ${minScreen(BREAKPOINTS.md)} {
        grid-area: image;
        grid-column: 2;
      }
    }

    ${GallerySlideFigCaptionWrapper} {
      grid-column: left-col / right-col;
      grid-row: 2;
      margin: 0;
      padding: ${calculateSpacing(2)} ${calculateSpacing(3)}
        ${calculateSpacing(3)};
      width: min-content;
      min-width: 93%;
      ${minScreen(BREAKPOINTS.md)} {
        min-width: 100%;
      }

      ${GallerySlideCaptionDek}, ${GallerySlideCaptionHed}, a {
        ${({ theme }) => isInverted(theme) &&
    getColorStyles('color', 'colors.interactive.base.white')};

        ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.foundation.link-secondary')};
        margin-bottom: ${calculateSpacing(1)};
      }

      ${GallerySlideCaptionCreditWrapper} {
        ${({ theme }) => isInverted(theme) &&
    getColorStyles('color', 'colors.interactive.base.white')};
        ${getTypographyStyles('typography.definitions.globalEditorial.context-tertiary')}
        margin-bottom: ${calculateSpacing(0.89)};
        padding-top: 0;
      }

      ${GallerySlideCaptionSeasonName} {
        ${({ theme }) => isInverted(theme) &&
    getColorStyles('color', 'colors.interactive.base.white')};
        ${getTypographyStyles('typography.definitions.globalEditorial.context-primary')}
        margin: 0 ${calculateSpacing(1)} ${calculateSpacing(1)} 0;
      }

      ${GallerySlideCaptionBrandNameClickable} {
        ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.subhed-aux-secondary')};
        ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.white')};
        margin-bottom: ${calculateSpacing(1)};
      }
      ${PhotoBookmarkButton} {
        min-width: unset;
        height: auto;
      }

      ${BookmarkWrapper} {
        position: absolute;
        top: 0;
        right: 0;
        ${minScreen(BREAKPOINTS.md)} {
          position: relative;
          right: ${calculateSpacing(0.5)};
        }
      }

      ${PhotoBookmarkWrapper} {
        .icon-bookmark-outline path {
          ${({ theme }) => isInverted(theme) &&
    getColorStyles('stroke', 'colors.interactive.base.white')}
        }

        .icon-bookmark-fill path {
          ${({ theme }) => isInverted(theme) &&
    getColorStyles('stroke', 'colors.interactive.base.white')}
          ${({ theme }) => isInverted(theme) &&
    getColorStyles('fill', 'colors.interactive.base.white')}
        }
      }

      ${GallerySlideFigCaption} {
        display: flex;
        position: relative;
        grid-template-columns: 4fr 1fr;
        flex-direction: column-reverse;
      }

      ${GallerySlideCaptionOffers}, ${GallerySlideCaptionCtaBlock} {
        margin: unset;
      }

      ${GallerySlideCaptionDek} {
        margin: unset;

        p {
          margin: unset;
        }
      }
    }

    ${({ isListicleLayout, hasPortraitOnlyImages }) => isListicleLayout &&
    `
      padding: 0;

      ${minScreen(BREAKPOINTS.md)} {
        padding: ${calculateSpacing(3)};
      }

      ${GallerySlideWrapper} {
        ${minScreen(BREAKPOINTS.md)} {
          margin-bottom: ${calculateSpacing(3)};
        }
      }

      ${GallerySlideAssetWrapper} {
       /*
        * Width must be set to prevent aspect ratio
        * container from collapsing to 0x0 when using shouldHoldImageSpace
        */
        width: 100%;

      ${hasPortraitOnlyImages &&
        `height: 70vh;
      
        ${minScreen(BREAKPOINTS.md)} {
          height: unset;
        }`}

        picture,
        img {
          min-width: unset;
          height: 100%;
          max-height: 100%;

          ${minScreen(BREAKPOINTS.md)} {
            width: auto;
            height: 49vh;
            max-height: unset;
          }
          ${minScreen(BREAKPOINTS.lg)} {
            height: 55vh;
          }
          ${minScreen(BREAKPOINTS.xl)} {
            height: 70vh;
          }
          ${hasPortraitOnlyImages &&
        `
            width: auto;
            height: 70vh;
            ${minScreen(BREAKPOINTS.xl)} { 
              height: 90vh; 
            }
            `}
        }
      }

      ${GallerySlideFigCaptionWrapper} {
        grid-column: 1 / -1;
        grid-template-columns: 1fr auto 1fr;
          width: 100%;
          padding:  ${calculateSpacing(2)} ${calculateSpacing(3)} ${calculateSpacing(3)};
        ${minScreen(BREAKPOINTS.md)} {
          padding-right: ${calculateSpacing(4)};
          grid-area: right-col;
          grid-row: 1;
        }
      }
  `}

    ${({ isListicleLayout }) => !isListicleLayout &&
    `
      padding: ${calculateSpacing(10)} 0 ${calculateSpacing(2)};
      height: 100vh;

      ${GalleryEmbedSlideList} {
        height: min-content;
        max-height: 80vh;
        ${minScreen(BREAKPOINTS.md)} {
          height: 100vh;
        }
      }

      ${GallerySlideWrapper} {
        display: flex;
        align-items: center;
        overflow-y: scroll;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch
      }

      ${GallerySlideFigure} {
        max-height: 80vh;
      }

      ${GallerySlideAssetWrapper} {
        img {
          ${minScreen(BREAKPOINTS.md)} {
            height: ${calculateSpacing(67)};
            display: block;
            max-width: 100vw;
            width: auto;
          }
        }
      }

      ${GallerySlideFigCaptionWrapper} {
        ${minScreen(BREAKPOINTS.md)} {
          grid-area: caption;
          grid-column: 2;
          grid-row: 2; 
          padding: ${calculateSpacing(2)} 0 ${calculateSpacing(3)};
        }
      }

    ${GalleryEmbedControlsStyles} {
      display: flex;
      flex-direction: column;
      justify-content: center; 
      padding: 0;
      position: fixed;
      bottom: ${calculateSpacing(2)};

      ${minScreen(BREAKPOINTS.md)} {
        position: unset;
      }

      ${GalleryEmbedControlsCounter} {
        display: none;
      }

      ${GalleryEmbedControlsController} {
        display: flex;
        column-gap: ${calculateSpacing(5)};

        ${GalleryEmbedControlsButton} {
          margin: 0;
          border: none;
          background-color: transparent;

          &[aria-disabled='true'],
          &[aria-disabled='true']:focus,
          &[aria-disabled='true']:active { 
            opacity: 0.5;
          }
        }

        ${minScreen(BREAKPOINTS.md)} {
          position: absolute;
          top: 50%;
          width: 100vw;
          justify-content: space-between;
          padding: 0 ${calculateSpacing(3)};
        }
      }
    }
  `}

    ${GalleryEmbedControlsStyles} ${GalleryEmbedControlsAdTitle} {
      padding: ${calculateSpacing(2)} 0 ${calculateSpacing(1)};

      ${({ theme }) => isInverted(theme) &&
    getColorStyles('color', 'colors.interactive.base.white')};
    }

    ${GalleryEmbedControlsButton} svg {
      width: fit-content;
      height: fit-content;

      ${({ theme }) => isInverted(theme) &&
    getColorStyles('fill', 'colors.interactive.base.white')};
    }
  }
`;
module.exports = {
    GalleryEmbedContainer,
    LightboxSwipe,
    LightboxCloseButtonIcon,
    LightboxGlobalStyles,
    LightboxSlideImageCaptionOuter,
    LightboxSlideCaptionContainer,
    LightboxWrapper,
    LightboxSlideTopSpacer,
    LightboxSlidesWrapper,
    LightboxSlideWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 65780:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    contentLabel: {
        id: 'Lightbox.ContentLabel',
        defaultMessage: 'Photo Gallery',
        description: 'Lightbox component content label'
    },
    closeButtonIconLabel: {
        id: 'Lightbox.CloseButtonIconLabel',
        defaultMessage: 'Close Lightbox',
        description: 'Lightbox component close button icon label'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 62408:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const debounce = __webpack_require__(38221);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { PersistentAsideWrapper } = __webpack_require__(19577);
const getBound = __webpack_require__(23148);
const StickyBox = __webpack_require__(28433);
const { TrackComponentChannel } = __webpack_require__(78788);
const { calculateSpacing } = __webpack_require__(26865);
/* globals MutationObserver */
const positionPropMap = {
    bottom: 'anchorBottom',
    top: 'anchorTop'
};
/**
 * PersistentAside component
 *
 * @param {object} props - React props
 * @param {object} [props.align] - Optional attributes to add attachment side modificator.
 * @param {object} props.anchorBottom - An object with bottom anchors with specified selector(s) and anchoring edge
 * @param {object} props.anchorTop - An object with top anchors with specified selector(s) and anchoring edge
 * @param {object} [props.attributes] - Optional attributes to add top level i.e. aria-*, role, etc.
 * @param {object} props.children - React nodes of the content
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.fullWidthSelector] - Optional prop to passthru to StickyBox
 * @param {boolean} [props.hasStickyBoxIndexPosition] - Feature flag to enable index position of Stickybox
 * @param {object} props.style - Optional prop for styling the wrapper
 * @returns {ReactElement} <div>
 */
class PersistentAside extends React.PureComponent {
    constructor(props) {
        super(props);
        this.setStyleRef = (node) => {
            if (node) {
                this.element.current = node;
                this.updateBounds(); // Update bounds when the ref is set
            }
        };
        this.updateBounds = () => {
            const topAnchor = this.resolveAnchor('top');
            const bottomAnchor = this.resolveAnchor('bottom');
            const bounds = {
                top: getBound(topAnchor.node, topAnchor.edge),
                bottom: getBound(bottomAnchor.node, bottomAnchor.edge)
            };
            this.updateDOMElementObservers([topAnchor.node, bottomAnchor.node]);
            if (this.element.current && !this.props.shouldRemoveAbsolute) {
                this.element.current.style.top = `${bounds.top}px`;
                this.element.current.style.height = `${Math.abs(bounds.top - bounds.bottom)}px`;
            }
        };
        /**
         * Update mutation listener for DOM changes prompting boundary updates
         *
         * @param {Array} nodes - array of DOM nodes which we hook to
         * @returns {undefined} undefined
         */
        this.updateDOMElementObservers = (nodes) => {
            if (!this.observer) {
                this.observer = new MutationObserver(this.updateBounds);
            }
            this.observer.disconnect();
            // Include ad and image nodes explicitly, since they're targets for mutations.
            const adNodesArray = [].slice.call(document.querySelectorAll('.ad, .responsive-image, .clamp'));
            const nodesWithAds = nodes.concat(adNodesArray);
            nodesWithAds.forEach((element) => {
                this.observer.observe(element, {
                    attributes: true,
                    childList: true,
                    characterData: true,
                    subtree: true
                });
            });
        };
        this.debouncedUpdateBounds = debounce(this.updateBounds, 50);
        this.element = React.createRef();
    }
    componentDidMount() {
        document.addEventListener('DOMContentLoaded', this.updateBounds);
        window.addEventListener('load', this.updateBounds);
        window.addEventListener('resize', this.debouncedUpdateBounds);
        this.updateBounds();
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'PersistentAside'
        });
    }
    componentDidUpdate(prevProps) {
        const { anchorBottom, anchorTop } = this.props;
        if (anchorTop === prevProps.anchorTop &&
            anchorBottom === prevProps.anchorBottom) {
            return;
        }
        this.updateBounds();
    }
    componentWillUnmount() {
        document.removeEventListener('DOMContentLoaded', this.updateBounds);
        window.removeEventListener('load', this.updateBounds);
        window.removeEventListener('resize', this.debouncedUpdateBounds);
        // Putting this in a try/catch, because `if (this.observer)` is hard to
        // test due to StickyBox's parallel dependency on MutationObserver.
        try {
            this.observer.disconnect();
            this.observer = null;
        }
        catch (e) {
            // MutationObserver probably undefined
        }
    }
    resolveAnchor(anchorName) {
        let node;
        let edge;
        let currentAnchor;
        const anchor = this.props[positionPropMap[anchorName]]; // 'anchorTop' || 'anchorBottom'
        const anchorArray = Array.isArray(anchor)
            ? anchor.slice(0) // clone to avoid mutating
            : [anchor];
        const currentElement = this.element.current;
        while (anchorArray.length && !node) {
            currentAnchor = anchorArray.shift();
            node = document.querySelector(currentAnchor.selector);
            edge = currentAnchor.edge || anchorName;
        }
        if (!node) {
            // fall back to the parent or the body element, to ensure we hook on _somewhere_
            node = currentElement
                ? currentElement.parentElement
                : document.querySelector('body');
        }
        return {
            node,
            edge
        };
    }
    render() {
        const { align, attributes, className, children, fullWidthSelector, style, hasStickyBoxIndexPosition, shouldRemoveAbsolute } = this.props;
        let wrapperStyle = {
            ...style,
            position: 'absolute',
            top: 'auto',
            height: 'auto'
        };
        if (shouldRemoveAbsolute) {
            wrapperStyle = {
                ...style,
                top: calculateSpacing(18),
                marginBottom: calculateSpacing(5),
                position: 'sticky',
                height: 'unset !important'
            };
        }
        return (React.createElement(PersistentAsideWrapper, { className: classnames('persistent-aside', {
                [`persistent-aside--align-${align}`]: align
            }), isAlignedToLeft: align === 'left', isAlignedLeftLeadAsset: align === 'left-lead-asset', hasStickyBoxIndexPosition: hasStickyBoxIndexPosition, ref: this.setStyleRef, style: wrapperStyle, "data-testid": "PersistentAsideWrapper" },
            React.createElement(StickyBox, { ...attributes, tagName: "div", fullWidthSelector: fullWidthSelector, hasStickyBoxIndexPosition: hasStickyBoxIndexPosition, className: className }, children)));
    }
}
const anchorPropType = PropTypes.shape({
    selector: PropTypes.string,
    edge: PropTypes.oneOf(['top', 'bottom'])
});
PersistentAside.propTypes = {
    align: PropTypes.string,
    anchorBottom: PropTypes.oneOfType([
        PropTypes.arrayOf(anchorPropType),
        anchorPropType
    ]),
    anchorTop: PropTypes.oneOfType([
        PropTypes.arrayOf(anchorPropType),
        anchorPropType
    ]),
    attributes: PropTypes.object,
    children: PropTypes.node,
    className: PropTypes.string,
    fullWidthSelector: PropTypes.string,
    hasStickyBoxIndexPosition: PropTypes.bool,
    shouldRemoveAbsolute: PropTypes.bool,
    style: PropTypes.object
};
module.exports = PersistentAside;
//# sourceMappingURL=PersistentAside.js.map

/***/ }),

/***/ 40855:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(62408);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 19577:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const styled = (__webpack_require__(92168)["default"]);
const { ZINDEX_MAP } = __webpack_require__(96472);
const PersistentAsideWrapper = styled.aside.withConfig({
    displayName: 'PersistentAsideWrapper'
}) `
  top: 0;
  transition: top 0.2s ease-out;
  z-index: ${({ hasStickyBoxIndexPosition }) => hasStickyBoxIndexPosition ? `auto` : ZINDEX_MAP.navFixed};
  /*
    it seems like this should be:
    z-index: ${ZINDEX_MAP.persistentAsideLayer}; ?

    however first rule of converting to styled components
    is not to change things like that so, should fix later
  */

  ${({ isAlignedToLeft, isAlignedLeftLeadAsset }) => {
    if (isAlignedToLeft) {
        return `left: 0;`;
    }
    if (isAlignedLeftLeadAsset) {
        return `left: 20px;`;
    }
    return '';
}}

  @media print {
    display: none;
  }
`;
module.exports = {
    PersistentAsideWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 85207:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const get = __webpack_require__(58156);
const React = __webpack_require__(96540);
const { DEFAULT_LOCALE } = __webpack_require__(18106);
const getRecommendations = __webpack_require__(86399);
const { mapChannelName } = __webpack_require__(39104);
const RecircContext = React.createContext();
/**
 * Wrapped component with Provider.
 *
 * @param {ReactElement} Wrapped - Component to be wrapped with a Provider. Should be a HOC component as a BasePage.
 *
 * @returns {ReactElement} - Wrapped component
 */
const withRecircContextProvider = (Wrapped) => {
    let isMostPopularInProgress = false;
    let isInlineRecircInProgress = false;
    return (props) => {
        const [mostPopularItems, setMostPopularItems] = React.useState([]);
        const [inlineRecircItems, setInlineRecircItems] = React.useState([]);
        const featureFlags = get(props, 'featureFlags') || {};
        const recommendations = get(props, 'config.recommendations', {});
        const useTrailingSlash = get(props, 'useTrailingSlash', false);
        const channelMap = get(props, 'channelMap') || {};
        const language = get(props, 'lang', DEFAULT_LOCALE);
        const shouldPersonalizeMostPopular = get(props, 'featureFlags.personalizeRecircMostPopular', false);
        const shouldPersonalizeInlineRecirc = get(props, 'featureFlags.personalizeRecircInlineRecirc', false);
        const onViewportIntersectionMostPopular = async (properties) => {
            if (mostPopularItems.length === 0 && !isMostPopularInProgress) {
                isMostPopularInProgress = true;
                properties.language = language;
                const items = await getRecommendations(properties, shouldPersonalizeMostPopular, 'mostPopular', featureFlags, {}, properties.useTrailingSlash, // eslint-disable-line react/prop-types
                recommendations);
                setMostPopularItems(items.map((item) => ({
                    ...item,
                    rubric: mapChannelName(item.rubric, channelMap)
                })));
                isMostPopularInProgress = false;
            }
        };
        const onViewportIntersectionInlineRecirc = async (properties) => {
            if (inlineRecircItems.length === 0 && !isInlineRecircInProgress) {
                isInlineRecircInProgress = true;
                properties.language = language;
                const items = await getRecommendations(properties, shouldPersonalizeInlineRecirc, 'inlineRecirc', featureFlags, {}, useTrailingSlash, recommendations);
                setInlineRecircItems(items.map((item) => ({
                    ...item,
                    rubric: mapChannelName(item.rubric, channelMap)
                })));
                isInlineRecircInProgress = false;
            }
        };
        const value = {
            RecircMostPopular: {
                items: mostPopularItems,
                onViewportIntersection: onViewportIntersectionMostPopular
            },
            InlineRecirc: {
                items: inlineRecircItems,
                onViewportIntersection: onViewportIntersectionInlineRecirc
            }
        };
        return (React.createElement(RecircContext.Provider, { value: value },
            React.createElement(Wrapped, { ...props })));
    };
};
const withRecircContextConsumer = (Wrapped) => {
    return (props) => (React.createElement(RecircContext.Consumer, null, (providerValue) => {
        // TODO: refactoring: use Wrapper.displayName after
        // https://cnissues.atlassian.net/browse/MT-4431 is merged
        let items;
        let onViewportIntersection;
        if (Wrapped.displayName.includes('RecircMostPopular')) {
            ({ items = [], onViewportIntersection = () => { } } = get(providerValue, 'RecircMostPopular', {}));
        }
        if (Wrapped.displayName.includes('InlineRecirc')) {
            ({ items = [], onViewportIntersection = () => { } } = get(providerValue, 'InlineRecirc', {}));
        }
        return (React.createElement(Wrapped, { ...props, items: items, onIntersectionViewportCallback: onViewportIntersection }));
    }));
};
module.exports = {
    withRecircContextProvider,
    withRecircContextConsumer,
    RecircContext
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 15595:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { TrackComponentChannel } = __webpack_require__(78788);
const Slot = ({ children, name }) => {
    React.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'Slot'
        });
    }, []);
    if (!name)
        throw new Error(`A slot must contain a name!`);
    return children;
};
Slot.propTypes = {
    children: PropTypes.node.isRequired,
    name: PropTypes.string.isRequired
};
const getSlots = (children, slotNames = []) => {
    const slotKeys = new Set(slotNames);
    const slots = {};
    let slotName;
    const urlData = [];
    React.Children.forEach(children, (child) => {
        slotName = child.props.name;
        urlData.push(child.props.url);
        if (child.type === Slot && slotName) {
            if (slotKeys.size === 0 || slotKeys.has(slotName)) {
                slots[slotName] = child;
            }
        }
    });
    return { slots, urlData };
};
module.exports = { Slot, getSlots };
//# sourceMappingURL=Slot.js.map

/***/ }),

/***/ 50035:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(15595);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 1329:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { TrackComponentChannel } = __webpack_require__(78788);
/**
 * Swipe component
 *
 * @param {object} props - React props
 * @param {node} [props.children] - children components to wrap for swipe listening
 * @param {string} [props.className] - Optional top-level class to add
 * @param {number} [props.delta] - Number of pixels traveled before swipe event is called
 * @param {boolean} [props.shouldPreventDefaultEvent] - Calls prevent default method on swipe events
 * @param {Function} [props.onSwipeDown] - Function called when swipe down occurs
 * @param {Function} [props.onSwipeLeft] - Function called when swipe left occurs
 * @param {Function} [props.onSwipeRight] - Function called when swipe right occurs
 * @param {Function} [props.onSwipeUp] - Function called when swipe up occurs
 * @param {object} [props.style] - Style object to pass wrapper span
 *
 *
 * @returns {ReactElement} <div>
 */
class Swipe extends React.Component {
    /**
     * Static - for retrieving clientX from touches event
     *
     * @param {object} e - Synthetic Touch event;
     * @returns {number} X position of start touch event
     */
    static getStartTouchX(e) {
        return e.clientX || e.touches[0].clientX;
    }
    /**
     * Static - for retrieving clientY from touches event
     *
     * @param {object} e - Synthetic Touch event;
     * @returns {number} Y position of start touch event
     */
    static getStartTouchY(e) {
        return e.clientY || e.touches[0].clientY;
    }
    /**
     * Static - for retrieving clientX from changedTouches event
     *
     * @param {object} e - Synthetic Touch event;
     * @returns {number} X position of updated touch event
     */
    static getChangedTouchesX(e) {
        return e.clientX || e.changedTouches[0].clientX;
    }
    /**
     * Static - for retrieving clientY from changedTouches event
     *
     * @param {object} e - Synthetic Touch event;
     * @returns {number} Y position of updated touch event
     */
    static getChangedTouchesY(e) {
        return e.clientY || e.changedTouches[0].clientY;
    }
    constructor(props, context) {
        super(props, context);
        /**
         * Returns method to call from swipe calculation
         *
         * @param {number} currentX - Current X position of touch event
         * @param {number} currentY - Current Y position of touch event
         * @returns {Function} Function to call if swipe conditions are met or false if no conditions
         * are met
         */
        this.getSwipeFunction = (currentX, currentY) => {
            const { delta = 10 } = this.props;
            const offsetX = currentX - this.state.x;
            const offsetY = currentY - this.state.y;
            if (Math.abs(offsetX) >= delta && Math.abs(offsetX) >= Math.abs(offsetY)) {
                if (offsetX > delta) {
                    return this.props.onSwipeRight;
                }
                return this.props.onSwipeLeft;
            }
            else if (Math.abs(offsetY) >= delta) {
                if (offsetY > delta) {
                    return this.props.onSwipeUp;
                }
                return this.props.onSwipeDown;
            }
            return false;
        };
        /**
         * Handles calling preventDefault Event
         *
         * @param {object} e - Synthetic Touch event;
         * @returns {undefined} undefined
         */
        this.handlePreventDefault = (e) => {
            const shouldPreventDefaultEvent = this.props.shouldPreventDefaultEvent ?? false;
            if (shouldPreventDefaultEvent) {
                e.preventDefault();
            }
        };
        /**
         * Sets state when touch event starts
         *
         * @param {object} e - Synthetic Touch event;
         * @returns {undefined} undefined
         */
        this.handleTouchStart = (e) => {
            this.handlePreventDefault(e);
            this.setState({
                x: Swipe.getStartTouchX(e),
                y: Swipe.getStartTouchY(e),
                isPolling: true
            });
        };
        /**
         * Called when touch event travels and is updated
         *
         * @param {object} e - Synthetic Touch event;
         * @returns {undefined} undefined
         */
        this.handleTouchMove = (e) => {
            if (!this.state.isPolling) {
                return;
            }
            this.handlePreventDefault(e);
            const currentX = Swipe.getChangedTouchesX(e);
            const currentY = Swipe.getChangedTouchesY(e);
            const swipeFunction = this.getSwipeFunction(currentX, currentY);
            if (swipeFunction) {
                swipeFunction(true);
                this.setState({ isPolling: false });
            }
        };
        /**
         * Called when touch event ends / user lifts finger from device
         * Sets polling state to false
         *
         * @param {object} e - Synthetic Touch event;
         * @returns {undefined} undefined
         */
        this.handleTouchEnd = (e) => {
            this.handlePreventDefault(e);
            this.setState({ x: 0, y: 0, isPolling: false });
        };
        this.state = { x: 0, y: 0, isPolling: false };
    }
    componentDidMount() {
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'Swipe'
        });
    }
    render() {
        const { children, className } = this.props;
        const childProps = {
            className,
            style: { touchAction: 'none' },
            onTouchStart: this.handleTouchStart,
            onTouchMove: this.handleTouchMove,
            onTouchEnd: this.handleTouchEnd
        };
        return React.createElement("span", { ...childProps }, children);
    }
}
Swipe.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    delta: PropTypes.number,
    onSwipeDown: PropTypes.func,
    onSwipeLeft: PropTypes.func,
    onSwipeRight: PropTypes.func,
    onSwipeUp: PropTypes.func,
    shouldPreventDefaultEvent: PropTypes.bool
};
module.exports = Swipe;
//# sourceMappingURL=Swipe.js.map

/***/ }),

/***/ 39767:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(1329);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 47821:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const isEmpty = __webpack_require__(62193);
const { StickyHeroAd } = __webpack_require__(19607);
const { connector } = __webpack_require__(57744);
const Interstitial = __webpack_require__(2245);
const MessageBanner = __webpack_require__(62282);
const { PaymentGateway } = __webpack_require__(92807);
const { PaywallConductor } = __webpack_require__(46944);
const ConsumerMarketingUnit = __webpack_require__(71284);
const JourneyPaywallBar = __webpack_require__(86281);
const JourneyPaywallBarThin = __webpack_require__(97986);
const ExpandedCanvas = __webpack_require__(23043);
const ContentBar = __webpack_require__(48536);
const ConsentTargeting = __webpack_require__(55482);
const { ParselyScript } = __webpack_require__(66366);
const SnowplowScript = __webpack_require__(1241);
const UserContextScript = __webpack_require__(68787);
const PaywallBar = __webpack_require__(51810);
const PaywallModal = __webpack_require__(97438);
const PersistentBottom = __webpack_require__(23074);
const Row = __webpack_require__(66657);
const SiteFooterWithStore = __webpack_require__(98928);
const ThemingContext = __webpack_require__(2820);
const { scrollToAnchor } = __webpack_require__(759);
const ConnectedNavigation = __webpack_require__(10980);
const { HasScrolledProvider } = __webpack_require__(52064);
const { ContentLangProvider } = __webpack_require__(76573);
const { LOCALES, DEFAULT_LANG } = __webpack_require__(18106);
const OpenAIModal = __webpack_require__(31173);
const { FullBarrier, RegistrationGate, Ticker } = __webpack_require__(12501);
const ResponsiveAsset = __webpack_require__(73275);
const EventBanner = __webpack_require__(36897);
const { getOverrideBehaviour } = __webpack_require__(68089);
const { disableAnonymousTracking, trackNavigationEvent, initializeSnowplowTracker, trackClickEvent, findNearestAnchor, trackConsentPending, trackCeros, hasTargetConsentFromCookie, getUserConsentPreferences, dynamicConsentSlugs, testingBrands } = __webpack_require__(14307);
const { fidesExtractConsentGroupsAsOtArray } = __webpack_require__(34854);
const { FingerprintJS } = __webpack_require__(13446);
const { isRedirectedInternallyForFirstTime } = __webpack_require__(89143);
const { TrackComponentChannel } = __webpack_require__(78788);
const { setupTrackingSync } = __webpack_require__(57541);
const LinkBanner = __webpack_require__(82873);
const CrashDetection = __webpack_require__(51355);
const { BasePageWrapper, BasePageMainContent, BasePageNavigationBackgroundFiller, BasePageSkipLink, BasePageSiteFooterRow, BasePageMainFooterFiller, BasePageAd, BasePageSiteFooterRowGrid } = __webpack_require__(4081);
const { Footer } = __webpack_require__(12501);
const { getContentFooter } = __webpack_require__(40510);
const { useClientStatus } = __webpack_require__(8877);
const { NotificationBanner } = __webpack_require__(39471);
const { InteractiveOverrideContainer } = __webpack_require__(37759);
const HeroAdSpacer = __webpack_require__(83258);
// `theme` is configured in Copilot and is used to invert only the content header;
// `fullPageTheme` is used to invert the entire page's theme, including the header,
// so `fullPageTheme` takes precedence over `theme`
const getHeaderTheme = ({ fullPageTheme, theme }) => fullPageTheme !== 'standard' ? fullPageTheme : theme;
const getPageFooter = (hideFooter, hasFooterMargins, fullPageTheme, hasConsistentSpacing) => {
    if (!hideFooter) {
        return (React.createElement(BasePageSiteFooterRow, { hasMargins: hasFooterMargins, noFooterMargin: fullPageTheme === 'inverted', hasConsistentSpacing: hasConsistentSpacing },
            React.createElement(BasePageSiteFooterRowGrid, null,
                React.createElement(SiteFooterWithStore, null))));
    }
    return null;
};
/**
 * BasePage component
 *
 * @param {object} [attributes] - Optional attributes to add top level i.e. aria-*, role, etc.
 * @param {object} [additionalNavigation] - Optional rendered component with additional navigation
 * @param {object} children - Required page content to wrap
 * @param {string} [className] - Optional top-level class to add
 * @param {Array} crossDomainLinks - cross domain links of brand
 * @param {string} [hasContentHeaderLogo] - Optional prop to check if the content header variation has logo
 * @param {string} [hasEventBannerHidden] - Optional prop to hide the banner via a functional tag
 * @param {boolean} [hasTopStory] - TopStory module will be present when the value is true
 * @param {object} [coreDataLayer] - Contains tags required to reference for <EventBanner />
 * @param {string} deepLinkImageId - Optional image id of a shared image
 * @param {object} [featureFlags] - Optional feature flags
 * @param {object} [featureFlags.hasRiser] - Optional setting whether to use a non-paywall riser
 * @param {object} [featureFlags.showRedirectMsg] - Optional setting whether to show redirect msg
 * @param {string} [featureFlags.enableUserContext] - Feature flag to enable/disable user-context on a brand
 * @param {string} [fullPageTheme] - Optional prop to apply an inverted (dark) theme to the entire page
 * @param {object} [isHeroAdVisible] - Optional whether to show the hero ad
 * @param {string} [redirectMsg] - Optional redirect msg
 * @param {boolean} [showContentFooterWithHeaderOverride] - Optional whether should display default footer or override it
 * @param {boolean} [showNavWithHeaderOverride] - Optional whether should display the default nav or override it
 * @param {string} [theme] - Optional value to theme the BasePage
 * @param {boolean} [hasFooterAd] - Optional value to to skip rendering footer ad.
 * @param {boolean} [shouldPrioritizeSeriesPagination] - Optional to priortize series pagination
 * @param {object} [seriesData] - Optional seriesData
 * @param {object} [linkBannerData] - Optional linkbanner data
 * @param {object} [globalMessage] - Optional data to display message on all pages
 * @param {string} globalMessage.text - message to display, required if globalMessage is set in tenant
 * @param {number} [globalMessage.delayDuration] - optional timeout in milliseconds the message will be hide after
 * @param {boolean} [showBackgroundGradientColor] - optional flag to show background color gradient
 * @param {boolean} [fourd.enableFourdUser] - Flag to enable loading user data from 4d
 * @param {boolean} [hasLinkbannerCrossSlideAnimation] - Enable/Disable Header cross slide animation
 * @param {string} [snowplow.collectorURL] - Snowplow collector URL for sending events on snowplow
 * @param {string} [snowplow.slug] - Slug of the brand to pass to snoplow initialiser
 * @param {string} [snowplow.enableSnowplow] - Feature flag to enable/disable snowplow on a brand
 * @param {string} [snowplow.appInfoObj] - App Info
 * @param {object} [mainRef] - Optional data to point reference to main element
 * @param {object} [fingerprint] - FingerPrint Api Key
 * @param {boolean} [shouldScrollToTopStory] - Scroll to top story when it is available
 * @param {boolean} [hasExtraMarginForHeader] - Optional flag to add extra top margin when Base Ad is absent and link banner is present
 * @param {boolean} [props.hasConsistentSpacing] - defines whether the consistent spacing is needed or not
 * @param {object} [aiChatBotConfig] - Optional data to provide more content to AI chat bot
 * @param {object} [engagementChatbotConfig] - Optional data to configure the engagement chat bot
 * @returns {ReactElement} <div>
 */
/* eslint-disable complexity */
const BasePage = ({ attributes, additionalNavigation = null, children, className, componentConfig, config, crossDomainLinks, crashDetectionScriptPath, hasBaseAds = false, hasContentHeaderLogo, hasFooterAdsMargins = false, hasFooterMargins = true, hasEventBannerHidden, hasInvertedHeadertheme = false, hasTopStory = false, hideFooter = false, hideHeader = false, coreDataLayer, deepLinkImageId, engagementChatbotConfig, featureFlags, featureValue, fullPageTheme = 'standard', isHeroAdVisible = true, interactiveOverride, redirectMsg, showContentFooterWithHeaderOverride = false, showNavWithHeaderOverride = true, theme = 'standard', hasFooterAd = true, shouldPrioritizeSeriesPagination = false, seriesData, linkBannerData, globalMessage = null, showBackgroundGradientColor = false, fourd, hasLinkbannerCrossSlideAnimation = false, snowplow, mainRef = null, fingerprint, idmapper, shouldScrollToTopStory, hasExtraMarginForHeader = false, user, lang = DEFAULT_LANG, parsely, shouldBeStickyVideo = false, shouldEnableFullArticleInverted, hasConsistentSpacing, aiChatBotConfig }) => {
    let is25PercentLogged = false;
    let is50PercentLogged = false;
    let is75PercentLogged = false;
    let is100PercentLogged = false;
    let scrollableTableContainers = [];
    const scrollLeftButtonRefs = [];
    const scrollRightButtonRefs = [];
    const scrollArrowsContainers = [];
    const fingerprintInstance = React.useRef();
    const [isRedirectedInternally, setIsRedirectedInternally] = React.useState(false);
    const [journeyRibbonHeight, setJourneyRibbonHeight] = React.useState(0);
    const callSnowplowEvent = (scrollPercentage) => {
        trackNavigationEvent({
            type: 'scroll',
            placement: 'vertical',
            index: scrollPercentage
        });
    };
    const isClient = useClientStatus();
    const initialiseSnowplowOnConsentUpdate = () => {
        const consent = getUserConsentPreferences?.();
        const { collectorURL, slug, enableSnowplow, appInfoObj } = snowplow;
        // eslint-disable-next-line react/prop-types
        const siteEnv = coreDataLayer?.site?.env;
        if ((siteEnv === 'staging' || dynamicConsentSlugs.includes(slug)) &&
            (consent?.C0009 || consent?.C0004) &&
            !window.__snowplowAlreadyInitialized) {
            window.__snowplowAlreadyInitialized = true;
            if (snowplow) {
                if (enableSnowplow) {
                    const globalSnowplowContext = [coreDataLayer, user];
                    initializeSnowplowTracker(collectorURL, slug, globalSnowplowContext, appInfoObj, crossDomainLinks);
                }
            }
        }
    };
    const getOtActiveGroupsFromOtEvent = (event) => Array.isArray(event?.detail) ? event?.detail : [];
    const onConsentUpdated = (event) => {
        const otActiveGroups = window.Fides
            ? fidesExtractConsentGroupsAsOtArray()
            : getOtActiveGroupsFromOtEvent(event);
        const nonAnonymousConsentGroups = ['C0004'];
        const hasNonAnonymousConsent = !!otActiveGroups.some((item) => nonAnonymousConsentGroups.includes(item));
        fingerprintInstance.current.updateConsent(otActiveGroups);
        const dataLayer = window?.dataLayer.find((item) => item.event === 'data-layer-loaded');
        const env = dataLayer?.site?.env;
        disableAnonymousTracking(hasTargetConsentFromCookie() || hasNonAnonymousConsent, env, snowplow?.slug);
        initialiseSnowplowOnConsentUpdate();
    };
    const handleScroll = () => {
        const scrollHeight = window && window.document && window.document.documentElement.scrollHeight;
        const scrollTop = window && window.pageYOffset;
        const viewportHeight = window && window.innerHeight;
        const scrollPercentage = (scrollTop / (scrollHeight - viewportHeight)) * 100;
        if (scrollPercentage >= 25 && !is25PercentLogged) {
            callSnowplowEvent(25);
            trackConsentPending();
            is25PercentLogged = true;
        }
        if (scrollPercentage >= 50 && !is50PercentLogged) {
            callSnowplowEvent(50);
            trackConsentPending();
            is50PercentLogged = true;
        }
        if (scrollPercentage >= 75 && !is75PercentLogged) {
            callSnowplowEvent(75);
            trackConsentPending();
            is75PercentLogged = true;
        }
        if (scrollPercentage >= 100 && !is100PercentLogged) {
            callSnowplowEvent(100);
            trackConsentPending();
            is100PercentLogged = true;
        }
    };
    const handleScrollTo = () => {
        if (deepLinkImageId) {
            const searchParams = new URLSearchParams(window.location.search);
            const imageId = searchParams.get('image');
            // If no image query param is found then we don't want the scroll behavior
            if (!imageId) {
                return;
            }
            const imageRef = document.getElementById(deepLinkImageId);
            // If an image query param is defined its scroll behavior takes precedence
            if (imageRef) {
                // Set Scroll to the correct slide when page loads completely.
                setTimeout(() => {
                    imageRef.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center',
                        inline: 'center'
                    });
                }, 1);
            }
        }
        else {
            scrollToAnchor(window.location.hash);
        }
    };
    const handleScrollLeft = (scrollableContainer) => () => {
        scrollableContainer.scrollBy({
            left: -300,
            behavior: 'smooth'
        });
        trackNavigationEvent({
            type: 'back',
            subject: 'table',
            placement: 'mid-content'
        });
    };
    const handleScrollRight = (scrollableContainer) => () => {
        scrollableContainer.scrollBy({
            left: 300,
            behavior: 'smooth'
        });
        trackNavigationEvent({
            type: 'forward',
            subject: 'table',
            placement: 'mid-content'
        });
    };
    const handleTableScroll = (scrollableContainer, scrollLeftButton, scrollRightButton) => () => {
        const { scrollLeft, scrollWidth, clientWidth } = scrollableContainer;
        const isAtStart = scrollLeft === 0;
        const isAtEnd = scrollLeft >= scrollWidth - clientWidth;
        scrollLeftButton.disabled = isAtStart;
        scrollRightButton.disabled = isAtEnd;
        if (isAtEnd) {
            scrollableContainer.classList.remove('has-shadow');
        }
        else {
            scrollableContainer.classList.add('has-shadow');
        }
    };
    const handleRemovingTableScrollListeners = () => {
        scrollableTableContainers.forEach((scrollableContainer, index) => {
            const scrollLeftButton = scrollLeftButtonRefs[index];
            const scrollRightButton = scrollRightButtonRefs[index];
            const scrollArrowsContainer = scrollArrowsContainers[index];
            scrollLeftButton.removeEventListener('click', handleScrollLeft(scrollableContainer));
            scrollRightButton.removeEventListener('click', handleScrollRight(scrollableContainer));
            scrollableContainer.removeEventListener('scroll', handleTableScroll(scrollableContainer, scrollLeftButton, scrollRightButton));
            if (scrollArrowsContainer) {
                scrollArrowsContainer.remove();
            }
        });
    };
    const wrapTableWithContainers = (table) => {
        const parentDiv = table.parentElement;
        if (parentDiv &&
            parentDiv.classList.contains('scrollable-table-container')) {
            return parentDiv;
        }
        const tableContainer = document.createElement('div');
        tableContainer.className = 'table-container';
        const scrollableContainer = document.createElement('div');
        scrollableContainer.className = 'scrollable-table-container';
        if (!table.classList.contains('simple-table')) {
            table.classList.add('simple-table');
        }
        table.parentNode.insertBefore(tableContainer, table);
        tableContainer.appendChild(scrollableContainer);
        scrollableContainer.appendChild(table);
        return scrollableContainer;
    };
    const initializeScrollableTableContainers = () => {
        const allTables = document.querySelectorAll('table');
        const wrappedContainers = [];
        if (allTables.length > 0) {
            allTables.forEach((table) => {
                const scrollableContainer = wrapTableWithContainers(table);
                if (scrollableContainer &&
                    !wrappedContainers.includes(scrollableContainer)) {
                    wrappedContainers.push(scrollableContainer);
                }
            });
            scrollableTableContainers = document.querySelectorAll('.scrollable-table-container');
            scrollableTableContainers.forEach((scrollableContainer, index) => {
                const scrollArrowsContainer = document.createElement('div');
                const scrollLeftButton = document.createElement('button');
                const scrollRightButton = document.createElement('button');
                const hasHorizontalScroll = scrollableContainer.scrollWidth > scrollableContainer.clientWidth;
                scrollLeftButtonRefs[index] = scrollLeftButton;
                scrollRightButtonRefs[index] = scrollRightButton;
                scrollArrowsContainers[index] = scrollArrowsContainer;
                if (hasHorizontalScroll) {
                    scrollableContainer.classList.add('has-shadow');
                    scrollArrowsContainer.classList.add('scroll-arrows');
                    scrollLeftButton.classList.add('chevron', 'left');
                    scrollRightButton.classList.add('chevron', 'right');
                    scrollLeftButton.disabled = true;
                    scrollArrowsContainer.appendChild(scrollLeftButton);
                    scrollArrowsContainer.appendChild(scrollRightButton);
                    scrollableContainer.parentElement.insertAdjacentElement('afterend', scrollArrowsContainer);
                    scrollLeftButton.addEventListener('click', handleScrollLeft(scrollableContainer));
                    scrollRightButton.addEventListener('click', handleScrollRight(scrollableContainer));
                    scrollableContainer.addEventListener('scroll', handleTableScroll(scrollableContainer, scrollLeftButton, scrollRightButton));
                }
                else {
                    scrollableContainer.parentElement.classList.add('has-bottom-margin');
                    scrollableContainer.classList.remove('has-shadow');
                }
            });
        }
    };
    React.useEffect(() => {
        fingerprintInstance.current = new FingerprintJS(fingerprint);
        if (!window.Fides) {
            window.addEventListener('OneTrustGroupsUpdated', onConsentUpdated);
        }
        window.addEventListener('FidesUpdated', onConsentUpdated);
        window.addEventListener('scroll', handleScroll);
        window.addEventListener('load', () => {
            initializeScrollableTableContainers();
            handleScrollTo();
        });
        if (featureFlags.showRedirectMsg &&
            redirectMsg &&
            isRedirectedInternallyForFirstTime()) {
            setIsRedirectedInternally(true);
        }
        // Snowplow tracker
        if (snowplow) {
            const { collectorURL, slug, enableSnowplow, appInfoObj } = snowplow;
            if (enableSnowplow) {
                const links = window.document.getElementsByTagName('a');
                for (let i = 0; i < links.length; i++) {
                    links[i].addEventListener('click', (e) => {
                        const anchorElement = findNearestAnchor(e.target);
                        if (anchorElement) {
                            trackClickEvent(anchorElement);
                        }
                    });
                }
                const globalSnowplowContext = [coreDataLayer, user];
                initializeSnowplowTracker(collectorURL, slug, globalSnowplowContext, appInfoObj, crossDomainLinks);
                document?.body?.addEventListener('ceros-analytics-event', trackCeros);
            }
        }
        window.Kendra.TRACK_COMPONENT.broadcast(TrackComponentChannel.RENDER, {
            name: 'BasePage'
        });
        // Set up tracking data sync to dataLayer when page is completely ready
        setupTrackingSync();
        return () => {
            window.removeEventListener('load', () => {
                initializeScrollableTableContainers();
                handleScrollTo();
            });
            window.removeEventListener('OneTrustGroupsUpdated', onConsentUpdated);
            window.removeEventListener('FidesUpdated', onConsentUpdated);
            window.removeEventListener('scroll', handleScroll);
            handleRemovingTableScrollListeners();
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    React.useEffect(() => {
        window.cnBus.on('journey.unit.render.end', () => {
            const journeyUnit = document.querySelector('.journey-unit__container .NewsletterRibbonComponent');
            if (journeyUnit) {
                setJourneyRibbonHeight(journeyUnit.offsetHeight);
            }
        });
    }, []);
    const { bannerType } = linkBannerData;
    const isVisualLinkBanner = bannerType === 'visual-link-banner';
    const showVisualLinkBanner = isVisualLinkBanner && !hasContentHeaderLogo;
    const { publicKey: parselyApiKey, shouldRenderParsely = true } = parsely || {};
    const pageTags = coreDataLayer?.content?.tags || '';
    const isHeaderOverride = getOverrideBehaviour(interactiveOverride) === 'header';
    const isTotalOverride = getOverrideBehaviour(interactiveOverride) === 'all';
    const enableFourdUser = fourd ? fourd.enableFourdUser : null;
    if (isTotalOverride) {
        return (React.createElement(React.Fragment, null,
            parselyApiKey && shouldRenderParsely && (React.createElement(ParselyScript, { apiKey: parselyApiKey })),
            React.createElement(InteractiveOverrideContainer, { canonicalUrl: coreDataLayer?.page?.canonical || '', className: "interactive-override-container interactive-override-container--all", markup: interactiveOverride.markup }),
            snowplow?.enableSnowplow && (React.createElement(SnowplowScript, { brand: snowplow.slug || '', testingBrand: testingBrands })),
            React.createElement(CrashDetection, { isEnabled: true }),
            React.createElement(ConsentTargeting, { shouldEnableFourdUser: enableFourdUser, shouldEnableInfinityId: featureFlags.enableInfinityId, idmConfig: idmapper })));
    }
    const isNavigationVisible = (showNavWithHeaderOverride || !isHeaderOverride) && !hideHeader;
    const prioritizeSeriesPagination = shouldPrioritizeSeriesPagination &&
        seriesData &&
        linkBannerData.links.length > 0;
    const navPattern = componentConfig?.ConnectedNavigation?.settings?.navPattern || '';
    const hasAIChatbotEnabled = engagementChatbotConfig?.enableChatBot || false;
    const navVariation = (!prioritizeSeriesPagination && componentConfig?.[navPattern]?.variation) ||
        '';
    const isUsingOneNav = navPattern === 'OneNav';
    const footerAdMargins = hasFooterAdsMargins ? 6 : 0;
    const headerTheme = hasInvertedHeadertheme
        ? 'inverted'
        : getHeaderTheme({ fullPageTheme, theme });
    const themes = { fullPageTheme, theme: headerTheme };
    const skipLinkId = 'main-content';
    const topStoryLinkId = 'topstory-content';
    const pageContents = (React.createElement(BasePageWrapper, { ...attributes, className: classnames('page', `page-theme-${headerTheme}`, { 'page-prioritize-series-pagination': prioritizeSeriesPagination }, className), hasConsistentSpacing: hasConsistentSpacing, hasFooterMargins: hasFooterMargins && fullPageTheme !== 'inverted', hasContentHeaderLogo: hasContentHeaderLogo, isNavigationHidden: !isNavigationVisible, shouldBeStickyVideo: shouldBeStickyVideo, showScrolledLinkBannerSpacing: hasLinkbannerCrossSlideAnimation, isVisualLinkBanner: isVisualLinkBanner, hasExtraMarginForHeader: hasExtraMarginForHeader, journeyRibbonHeight: journeyRibbonHeight },
        isRedirectedInternally && (React.createElement(MessageBanner, { contentAlign: "center", isFixed: true, delayDuration: 10000 },
            React.createElement("p", null, redirectMsg))),
        hasAIChatbotEnabled && React.createElement(OpenAIModal, { aiChatBotConfig: aiChatBotConfig }),
        featureFlags.showGlobalMessage && globalMessage && (React.createElement(MessageBanner, { contentAlign: "center", delayDuration: globalMessage.delayDuration },
            React.createElement("p", null, globalMessage.text))),
        parselyApiKey && shouldRenderParsely && (React.createElement(ParselyScript, { apiKey: parselyApiKey })),
        React.createElement(ThemingContext.Provider, { value: themes },
            React.createElement(BasePageNavigationBackgroundFiller, { isNavigationHidden: !isNavigationVisible, palette: headerTheme }),
            hasBaseAds && (React.createElement(PaymentGateway, { group: "ads" },
                React.createElement(BasePageAd, { position: "out-of-page" }),
                React.createElement(BasePageAd, { position: "outstream" }),
                React.createElement(BasePageAd, { position: "overlay" }))),
            React.createElement(BasePageSkipLink, { href: shouldScrollToTopStory ? `#${topStoryLinkId}` : `#${skipLinkId}`, "data-testid": "BasePageSkipLink" }, "Skip to main content"),
            React.createElement(Interstitial, null,
                React.createElement(PaymentGateway, { group: "paywall" },
                    React.createElement(PaywallModal, { className: "paywall-modal--paywall", position: "paywall-modal-full-barrier" }),
                    React.createElement(PaywallConductor, { name: "incognito-modal", component: PaywallModal, className: "paywall-modal--incognito" })),
                React.createElement(FullBarrier, null)),
            isNavigationVisible && (React.createElement(ConnectedNavigation, { featureValue: featureValue, hasContentHeaderLogo: hasContentHeaderLogo, shouldEnableFullArticleInverted: shouldEnableFullArticleInverted, hasLinkbannerCrossSlideAnimation: hasLinkbannerCrossSlideAnimation, journeyRibbonHeight: journeyRibbonHeight })),
            showVisualLinkBanner && React.createElement(LinkBanner, { hasDivider: isVisualLinkBanner }),
            additionalNavigation,
            React.createElement(PersistentBottom, null,
                React.createElement(RegistrationGate, null),
                React.createElement(PaymentGateway, { group: "paywall" },
                    React.createElement(PaywallBar, null)),
                React.createElement(JourneyPaywallBar, null),
                React.createElement(JourneyPaywallBarThin, null),
                React.createElement(ExpandedCanvas, null),
                React.createElement(ContentBar, null),
                featureFlags.hasRiser && (React.createElement(ConsumerMarketingUnit, { position: "cm-riser" }))),
            (navPattern === 'StackedNavigation' ||
                navPattern === 'StandardNavigation') && React.createElement(HeroAdSpacer, null),
            !isUsingOneNav &&
                hasBaseAds &&
                isHeroAdVisible &&
                !isHeaderOverride && (React.createElement(StickyHeroAd, { navVariation: navVariation, shouldHoldSpace: true })),
            React.createElement(NotificationBanner, { experimentFlags: featureValue }),
            React.createElement(BasePageMainContent, { id: skipLinkId, tabIndex: "-1" // fixes bug in IE with skiplink
                , isInverted: fullPageTheme === 'inverted', className: "page__main-content", hasTopStory: hasTopStory, showBackgroundGradientColor: showBackgroundGradientColor, ref: mainRef, hasConsistentSpacing: hasConsistentSpacing },
                !hasTopStory && React.createElement(Ticker, null),
                !isEmpty(config.eventBanner) && !hasEventBannerHidden && (React.createElement(EventBanner, { "data-testid": "EventBanner", className: "page__event_banner", pageTags: pageTags })),
                isHeaderOverride ? (React.createElement(React.Fragment, null,
                    React.createElement(InteractiveOverrideContainer, { canonicalUrl: coreDataLayer?.page?.canonical || '', className: "interactive-override-container interactive-override-container--header", markup: interactiveOverride.markup }),
                    showContentFooterWithHeaderOverride &&
                        getContentFooter(children))) : (children)),
            React.createElement(BasePageMainFooterFiller, { className: "page__main-footer-filler" }),
            hasBaseAds && hasFooterAd && (React.createElement(Row, { topSpacing: footerAdMargins },
                isClient && React.createElement(Footer, null),
                React.createElement(PaymentGateway, { group: "consumer-marketing" },
                    React.createElement(ConsumerMarketingUnit, { position: "cm-footer" })))),
            getPageFooter(hideFooter, hasFooterMargins, fullPageTheme, hasConsistentSpacing)),
        React.createElement(ConsentTargeting, { shouldEnableFourdUser: enableFourdUser, shouldEnableInfinityId: featureFlags.enableInfinityId, idmConfig: idmapper }),
        featureFlags.enableUserContext && React.createElement(UserContextScript, null),
        snowplow?.enableSnowplow && (React.createElement(SnowplowScript, { brand: snowplow.slug || '', testingBrand: testingBrands })),
        React.createElement(CrashDetection, { isEnabled: true, scriptPath: crashDetectionScriptPath })));
    return (React.createElement(HasScrolledProvider, null,
        React.createElement(ContentLangProvider, { lang: lang }, pageContents)));
};
/* eslint-enable complexity */
BasePage.propTypes = {
    additionalNavigation: PropTypes.node,
    aiChatBotConfig: PropTypes.object,
    attributes: PropTypes.object,
    children: PropTypes.node.isRequired,
    className: PropTypes.string,
    componentConfig: PropTypes.shape({
        ConnectedNavigation: PropTypes.shape({
            settings: PropTypes.shape({
                navPattern: PropTypes.string
            })
        })
    }),
    config: PropTypes.shape({ eventBanner: PropTypes.object }),
    coreDataLayer: PropTypes.shape({
        content: PropTypes.shape({
            tags: PropTypes.string,
            contentType: PropTypes.string
        }),
        page: PropTypes.shape({
            canonical: PropTypes.string
        })
    }),
    crashDetectionScriptPath: PropTypes.string,
    crossDomainLinks: PropTypes.array,
    deepLinkImageId: PropTypes.string,
    engagementChatbotConfig: PropTypes.object,
    eventBannerTags: PropTypes.array,
    featureFlags: PropTypes.shape({
        hasRiser: PropTypes.bool,
        showRedirectMsg: PropTypes.bool,
        showGlobalMessage: PropTypes.bool,
        enableInfinityId: PropTypes.bool,
        enableUserContext: PropTypes.bool
    }),
    featureValue: PropTypes.object,
    fingerprint: PropTypes.object,
    fourd: PropTypes.shape({
        enableFourdUser: PropTypes.bool
    }),
    fullPageTheme: PropTypes.oneOf(['standard', 'inverted']),
    globalMessage: PropTypes.shape({
        text: PropTypes.string.isRequired,
        delayDuration: PropTypes.number
    }),
    hasBaseAds: PropTypes.bool,
    hasConsistentSpacing: PropTypes.bool,
    hasContentHeaderLogo: PropTypes.bool,
    hasEventBannerHidden: PropTypes.bool,
    hasExtraMarginForHeader: PropTypes.bool,
    hasFooterAd: PropTypes.bool,
    hasFooterAdsMargins: PropTypes.bool,
    hasFooterMargins: PropTypes.bool,
    hasInvertedHeadertheme: PropTypes.bool,
    hasLinkbannerCrossSlideAnimation: PropTypes.bool,
    hasTopStory: PropTypes.bool,
    hideFooter: PropTypes.bool,
    hideHeader: PropTypes.bool,
    idmapper: PropTypes.shape({
        isEnabled: PropTypes.bool,
        publicKey: PropTypes.string
    }),
    interactiveOverride: PropTypes.shape({
        markup: PropTypes.string,
        behavior: PropTypes.string
    }),
    isHeroAdVisible: PropTypes.bool,
    lang: PropTypes.oneOf(LOCALES),
    linkBannerData: PropTypes.shape({
        bannerType: PropTypes.string,
        hed: PropTypes.hed,
        dek: PropTypes.dek,
        image: PropTypes.shape(ResponsiveAsset.propTypes),
        links: PropTypes.arrayOf(PropTypes.shape({
            url: PropTypes.string,
            text: PropTypes.string,
            isExternal: PropTypes.bool
        })),
        tracking: PropTypes.shape(LinkBanner.propTypes.tracking)
    }),
    mainRef: PropTypes.object,
    parsely: PropTypes.shape({
        publicKey: PropTypes.string,
        shouldRenderParsely: PropTypes.bool
    }),
    redirectMsg: PropTypes.string,
    seriesData: PropTypes.shape({
        hed: PropTypes.string,
        dek: PropTypes.string,
        image: PropTypes.object,
        links: PropTypes.arrayOf(PropTypes.shape({
            hed: PropTypes.string,
            dek: PropTypes.string,
            image: PropTypes.object,
            isPublished: PropTypes.bool,
            promoHed: PropTypes.string,
            url: PropTypes.string
        }))
    }),
    shouldBeStickyVideo: PropTypes.bool,
    shouldEnableFullArticleInverted: PropTypes.bool,
    shouldPrioritizeSeriesPagination: PropTypes.bool,
    shouldScrollToTopStory: PropTypes.bool,
    showBackgroundGradientColor: PropTypes.bool,
    showContentFooterWithHeaderOverride: PropTypes.bool,
    showNavWithHeaderOverride: PropTypes.bool,
    snowplow: PropTypes.shape({
        collectorURL: PropTypes.string,
        enableSnowplow: PropTypes.bool,
        slug: PropTypes.string,
        appInfoObj: PropTypes.object
    }),
    theme: PropTypes.oneOf(['standard', 'inverted', 'special']),
    user: PropTypes.object
};
BasePage.displayName = 'BasePage';
module.exports = connector(BasePage, {
    keysToPluck: [
        'config',
        'redirectMsg',
        'componentConfig',
        'coreDataLayer',
        'crashDetectionScriptPath',
        'deepLinkImageId',
        'featureFlags',
        'hasTopStory',
        'parsely',
        'seriesData',
        'linkBannerData',
        'globalMessage',
        'snowplow',
        'fourd',
        'user',
        'fingerprint',
        'idmapper',
        'crossDomainLinks',
        'engagementChatbotConfig'
    ]
});
//# sourceMappingURL=BasePage.js.map

/***/ }),

/***/ 40510:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const ContentFooter = __webpack_require__(61127);
/**
 * Search children nodes for the <ContentFooter /> component.
 * We need to adjust our search based on whether the page is wrapped with a
 * <I18nProvider />. These pages that include this are article and gallery.
 *
 * @param {object} children - React nodes
 *
 * @returns {object|null} The <ContentFooter /> or nothing
 */
const getContentFooter = (children) => {
    let searchChildren = children;
    if (Array.isArray(children)) {
        searchChildren = children.find(({ type }) => type && type.displayName === 'I18nProvider');
        return searchChildren.props.children.find((child) => {
            if (child && child.type?.displayName === 'ArticlePageContentFooterGrid') {
                return React.createElement(ContentFooter, { ...child.props });
            }
            return null;
        });
    }
    else if (children && children.props) {
        return children;
    }
    return null;
};
// Cache for DOM elements and last calculated height
let elementCache = null;
let lastCalculatedHeight = 0;
/**
 * Get cached DOM elements or query them if not cached
 */
const getElements = () => {
    if (!elementCache) {
        elementCache = {
            stickyHeroAdWrapper: document.querySelector('[class*="StickyHeroAdWrapper"]'),
            adsSpacer: document.querySelector('[class*="AdsSpacer"]'),
            navbar: document.querySelector('header, nav'),
            linkBanner: document.getElementById('link-banner'),
            mainContent: document.getElementById('main-content')
        };
    }
    return elementCache;
};
/**
 * Clear the element cache (call when DOM structure changes)
 */
const clearElementCache = () => {
    elementCache = null;
    lastCalculatedHeight = 0;
};
/**
 * Set CSS height property on target elements
 * @param {string} name - CSS property name
 * @param {number} height - Height value in pixels
 */
const setHeightProperty = (name, height) => {
    const elements = getElements();
    const heightValue = `${Math.round(height)}px`;
    try {
        if (elements.stickyHeroAdWrapper) {
            elements.stickyHeroAdWrapper.style.setProperty(name, heightValue);
        }
        if (elements.adsSpacer) {
            elements.adsSpacer.style.setProperty(name, heightValue);
        }
    }
    catch (error) {
        console.warn('Error setting height property:', error);
        clearElementCache(); // Clear cache on error to retry with fresh elements
    }
};
/**
 * Calculate the height of the link banner excluding padding and borders
 * Only includes height when banner is visible (not scrolled out of view)
 * @param {HTMLElement} linkBanner - Link banner element
 */
const calculateBannerHeight = (linkBanner) => {
    if (!linkBanner)
        return 0;
    try {
        // Check if banner has 'visual-link-banner--is-scrolled' class (indicates it's scrolled out of view)
        if (linkBanner.classList.contains('visual-link-banner--is-scrolled')) {
            return 0;
        }
        const style = window.getComputedStyle(linkBanner);
        const paddingTop = parseFloat(style.paddingTop) || 0;
        const paddingBottom = parseFloat(style.paddingBottom) || 0;
        const borderTop = parseFloat(style.borderTopWidth) || 0;
        const borderBottom = parseFloat(style.borderBottomWidth) || 0;
        const calculatedHeight = Math.max(0, linkBanner.offsetHeight -
            paddingTop -
            paddingBottom -
            borderTop -
            borderBottom);
        return calculatedHeight;
    }
    catch (error) {
        console.warn('Error calculating banner height:', error);
        return 0;
    }
};
/**
 * Calculate the visible height of the header/navigation element
 * @param {HTMLElement} navbar - Header or nav element
 */
const calculateHeaderHeight = (navbar) => {
    if (!navbar)
        return 0;
    try {
        // Special case for nav elements - only count height if position is fixed
        if (navbar.tagName && navbar.tagName.toLowerCase() === 'nav') {
            const { position } = window.getComputedStyle(navbar);
            if (position === 'relative') {
                return 0; // Nav with relative/static position doesn't affect hero ad positioning
            }
        }
        const fullHeight = navbar.offsetHeight || 0;
        const hiddenPart = Math.abs(navbar.offsetTop || 0); // to check when negative top is used to hide a part of the header
        return Math.max(0, fullHeight - hiddenPart);
    }
    catch (error) {
        console.warn('Error calculating header height:', error);
        return 0;
    }
};
/**
 * Adjusts the position of the hero ad based on the height of the header and banner
 */
const adjustHeroAdPosition = () => {
    try {
        const { navbar, linkBanner, mainContent } = getElements();
        let headerHeight = 0;
        let bannerHeight = 0;
        // Early return if navbar is inside main content
        if (mainContent && navbar && mainContent.contains(navbar)) {
            setHeightProperty('--header-height', headerHeight); // when hero Ad sits inside main content, no need to adjust its position
            return;
        }
        // Calculate banner height if banner exists and is outside header
        if (linkBanner && navbar && !navbar.contains(linkBanner)) {
            bannerHeight = calculateBannerHeight(linkBanner);
            headerHeight = bannerHeight;
        }
        // Add navbar height
        headerHeight += calculateHeaderHeight(navbar);
        // Set banner-specific properties
        if (bannerHeight > 0 && linkBanner) {
            const bannerSpecificHeight = headerHeight - bannerHeight;
            try {
                linkBanner.style.setProperty('--header-height', `${Math.round(bannerSpecificHeight)}px`);
                setHeightProperty('--banner-height', bannerSpecificHeight);
            }
            catch (error) {
                console.warn('Error setting banner properties:', error);
            }
        }
        // Only update if height has changed to avoid unnecessary DOM updates
        // Always update on first call or when height changes significantly
        if (lastCalculatedHeight === 0 ||
            Math.abs(headerHeight - lastCalculatedHeight) > 0.5) {
            setHeightProperty('--header-height', headerHeight);
            lastCalculatedHeight = headerHeight;
        }
    }
    catch (error) {
        console.error('Error in adjustHeroAdPosition:', error);
        clearElementCache(); // Clear cache on error
    }
};
// Expose cache clearing method for when DOM structure changes
adjustHeroAdPosition.clearCache = clearElementCache;
module.exports = {
    adjustHeroAdPosition,
    getContentFooter
};
//# sourceMappingURL=helpers.js.map

/***/ }),

/***/ 30543:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { asConfiguredComponent } = __webpack_require__(12892);
const BasePage = __webpack_require__(47821);
const { withExperimentHook } = __webpack_require__(63190);
module.exports = asConfiguredComponent(withExperimentHook(BasePage), 'BasePage');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 4081:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { BaseLink } = __webpack_require__(76955);
const { hideVisuallyFocusable } = __webpack_require__(52813);
const Row = __webpack_require__(66657);
const { BREAKPOINTS } = __webpack_require__(96472);
const Ad = __webpack_require__(19607);
const Grid = __webpack_require__(86659);
const { GridItem } = __webpack_require__(40653);
const { getColorToken, calculateSpacing, getZIndex, minScreen, maxScreen, getTypographyStyles } = __webpack_require__(26865);
const { getSectionSpacingStyling } = __webpack_require__(16800);
const { SplitScreenContentHeaderSocialIcons } = __webpack_require__(67040);
const { ContentHeaderPersistentAside } = __webpack_require__(88317);
const { SplitScreenContentHeaderPersistentAside } = __webpack_require__(9481);
const { ContentHeaderSocialIcons } = __webpack_require__(50130);
const { TickerContainer } = __webpack_require__(66228);
const { createMultipackageContainerStyles } = __webpack_require__(89085);
const { MultiPackageContainer } = __webpack_require__(67275);
const BasePageSiteFooterRow = styled(Row).withConfig({
    displayName: 'BasePageSiteFooterRow'
}) `
  background-color: ${getColorToken('colors.foundation.footer.bg')};

  ${({ noFooterMargin }) => noFooterMargin && `margin-top: 0;`}

  ${({ hasMargins, hasConsistentSpacing, noFooterMargin, theme }) => {
    if (hasMargins && !noFooterMargin) {
        return hasConsistentSpacing &&
            getSectionSpacingStyling(theme, 'padding-top-md') !== '0px'
            ? `margin-top: ${calculateSpacing(0)};`
            : `margin-top: ${calculateSpacing(6)};`;
    }
    return ``;
}}
`;
const standardnavigationSiteNavigation = `
  .standardnavigation-site-navigation[class*='link-banner'] & {
    &.page {
      .grid-layout__aside {
        .sticky-box {
          @media (min-width: ${BREAKPOINTS.md}) {
            top: ${calculateSpacing(20)};
          }
        }
      }

      .ad-stickymidcontent {
        .ad.ad--mid-content {
          @media (max-width: ${BREAKPOINTS.md}) {
            top: ${calculateSpacing(15.7, 'px')};
          }
        }
      }
    }
    &.page-prioritize-series-pagination {
      padding-top: ${calculateSpacing(7)};
    }
  }
`;
const fixedHeaderLogoWithSearchBarNavVariation = `
  .fixed-header-logo-with-search-bar-nav-variation & {
    .ad-stickymidcontent {
      .ad.ad--mid-content {
        @media (max-width: ${BREAKPOINTS.md}) {
          top: ${calculateSpacing(15.5, 'px')};
        }
      }
    }

    &.homepage {
      .sticky-box {
        top: ${calculateSpacing(20)};
      }
    }

    .grid-layout__aside {
      .sticky-box {
        @media (min-width: ${BREAKPOINTS.md}) {
          top: ${calculateSpacing(17)};
        }
      }
    }
  }
`;
const commentSectionNoPrint = css `
  @media print {
    .CommentingMainContent {
      display: none;
    }
  }
`;
const BasePageMainContent = styled.div.withConfig({
    displayName: 'BasePageMainContent'
}) `
  ${createMultipackageContainerStyles(MultiPackageContainer)}
  ${MultiPackageContainer} {
    ${({ hasConsistentSpacing, theme }) => {
    const gapMd = getSectionSpacingStyling(theme, 'gap-md');
    return hasConsistentSpacing && gapMd !== '0px'
        ? `gap: ${gapMd};
       margin-bottom: ${getSectionSpacingStyling(theme, 'padding-bottom-md')};`
        : null;
}}

    @media (max-width: ${BREAKPOINTS.md}) {
      ${({ hasConsistentSpacing, theme }) => {
    const gapSm = getSectionSpacingStyling(theme, 'gap-sm');
    return hasConsistentSpacing && gapSm !== '0px'
        ? `gap: ${gapSm};
            margin-bottom: ${getSectionSpacingStyling(theme, 'padding-bottom-sm')};`
        : null;
}}
    }
  }

  &:focus {
    outline: unset;
  }
  background: ${({ isInverted, theme, showBackgroundGradientColor }) => isInverted &&
    !showBackgroundGradientColor &&
    getColorToken(theme, 'colors.consumption.lead.inverted.background')};

  ${({ hasTopStory }) => !hasTopStory &&
    css `
      ${TickerContainer} {
        margin: 16px auto;
      }
    `}

  ${({ hasConsistentSpacing, theme }) => {
    return hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px'
        ? `
        margin-top: ${getSectionSpacingStyling(theme, 'padding-top-md')};
        margin-bottom: ${getSectionSpacingStyling(theme, 'padding-bottom-md')};
        @media (max-width: ${BREAKPOINTS.md}) {
          margin-top: ${getSectionSpacingStyling(theme, 'padding-top-sm')};
          margin-bottom: ${getSectionSpacingStyling(theme, 'padding-bottom-sm')};
        `
        : null;
}}

  /* Added this to remove margin-bottom at RowWrapper at Ad Footer just before Page footer on pages with consistent spacing */
  [class*='RowWrapper-']:has(> .ad--footer) {
    ${({ hasConsistentSpacing, theme }) => {
    if (hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
        return `margin-bottom: 0px;`;
    }
    return ``;
}}
  }

  /* Added this to add a margin bottom to ContentFooterWrapper on pages with consistent spacing */
  [class*='ContentFooterWrapper-'] {
    ${({ hasConsistentSpacing, theme }) => {
    if (hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
        return `
          margin-bottom: ${getSectionSpacingStyling(theme, 'gap-md')};
          @media (max-width: ${BREAKPOINTS.md}) {
            margin-bottom: ${getSectionSpacingStyling(theme, 'gap-sm')};
          }
        `;
    }
    return '';
}}
  }

  /* Added this to remove the extra padding from top and bottom from Section Header in a Curated Show */
  [class*='RowWrapper-']
    [data-testid='CuratedShowsSection']
    [class*='CuratedShowsSectionTitle-'] {
    ${({ hasConsistentSpacing, theme }) => {
    if (hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
        return `
            padding-top: 0;
            padding-bottom: 0;
          `;
    }
    return '';
}}
  }

  &&&&& {
    figure.asset-embed {
      ${({ hasConsistentSpacing, theme }) => hasConsistentSpacing &&
    getSectionSpacingStyling(theme, 'gap-md') !== '0px'
    ? `
            margin: 0px auto;

            ${maxScreen(`calc(${BREAKPOINTS.md} - 1px)`)} {
              margin: 16px auto;
            }
          `
    : null}
    }
  }
`;
BasePageMainContent.defaultProps = {
    as: 'main'
};
const BasePageWrapper = styled.div.withConfig({
    displayName: 'BasePageWrapper'
}) `
  [class*='SectionHeaderWrapper-'] + [class*='MultiPackageContainer-'],
  [class*='BundleHeaderWrapper-'] + [class*='MultiPackageContainer-'] {
    ${({ hasConsistentSpacing, theme }) => {
    return hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px'
        ? `margin-top: ${getSectionSpacingStyling(theme, 'padding-top-md')};
        
        @media (max-width: ${BREAKPOINTS.md}) {
            margin-top: ${getSectionSpacingStyling(theme, 'padding-top-sm')};
          }
        `
        : null;
}}
  }

  [class*='SectionHeaderWrapper-'] + [class*='NavWrapper-'],
  [class*='SectionHeaderWrapper-'] + * + [class*='NavWrapper-'] {
    ${({ hasConsistentSpacing, theme }) => {
    return hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px'
        ? `margin-top: 24px;
          margin-bottom: ${getSectionSpacingStyling(theme, 'padding-bottom-md')};
          @media (max-width: ${BREAKPOINTS.md}) {
              margin-top: 12px;
              margin-bottom: ${getSectionSpacingStyling(theme, 'padding-bottom-sm')};
          }`
        : null;
}}
  }

  && {
    .fixed-header-nav-variation & {
      .grid-layout__aside {
        .sticky-box {
          @media (min-width: ${BREAKPOINTS.md}) {
            top: ${calculateSpacing(15)};
          }
        }
      }
    }

    .stackednavigation-site-navigation.fixed-header-nav-variation {
      ${ContentHeaderPersistentAside}, ${SplitScreenContentHeaderPersistentAside} {
        ${minScreen(BREAKPOINTS.lg)} {
          top: ${calculateSpacing(15)};
        }
      }
    }

    .stackednavigation-site-navigation.fixed-header-with-link-banner-nav-variation {
      ${ContentHeaderPersistentAside}, ${SplitScreenContentHeaderPersistentAside} {
        ${minScreen(BREAKPOINTS.lg)} {
          top: ${calculateSpacing(19)};
        }
      }
    }

    .standardnavigation-site-navigation[class*='link-banner'] {
      ${ContentHeaderPersistentAside}, ${SplitScreenContentHeaderPersistentAside} {
        ${minScreen(BREAKPOINTS.lg)} {
          top: ${calculateSpacing(23)};
          z-index: 1;
        }
      }
    }

    ${({ hasExtraMarginForHeader }) => hasExtraMarginForHeader &&
    `
          padding-top: ${calculateSpacing(13)};
          
          ${minScreen(BREAKPOINTS.lg)} {
            padding-top: ${calculateSpacing(26)};
          }
        `}

    ${ContentHeaderPersistentAside}, ${SplitScreenContentHeaderPersistentAside} {
      display: inline;

      ${minScreen(BREAKPOINTS.lg)} {
        display: block;
        top: ${calculateSpacing(16)};
        margin: 0;
      }

      ${ContentHeaderSocialIcons},${SplitScreenContentHeaderSocialIcons} {
        margin: 0 auto;
        ${minScreen(BREAKPOINTS.lg)} {
          margin: 0;
        }
      }
    }

    .fixed-header-with-link-banner-nav-variation & {
      padding-top: ${calculateSpacing(14)};
      ${minScreen(BREAKPOINTS.lg)} {
        padding-top: ${({ isVisualLinkBanner }) => !isVisualLinkBanner && calculateSpacing(15.5)};
      }
    }

    .fixed-header-with-link-banner-nav-variation &,
    .fixed-header-large-logo-nav-variation & {
      .grid-layout__aside {
        .sticky-box {
          @media (min-width: ${BREAKPOINTS.md}) {
            top: ${({ shouldBeStickyVideo }) => shouldBeStickyVideo
    ? calculateSpacing(36)
    : calculateSpacing(19)};
          }
        }
      }
    }

    ${standardnavigationSiteNavigation}

    .logo-center-with-search-bar-nav-variation & {
      &.page {
        padding-top: ${calculateSpacing(15.5)};

        @media (min-width: ${BREAKPOINTS.lg}) {
          padding-top: ${calculateSpacing(7, 'px')};
        }
      }
    }

    ${fixedHeaderLogoWithSearchBarNavVariation}

    .table-container.has-bottom-margin {
      margin: ${calculateSpacing(3)} 0;
    }

    .table-container {
      position: relative;
      margin-top: ${calculateSpacing(3)};
      margin-bottom: 0;
      border: 1px solid
        ${getColorToken('colors.consumption.body.standard.divider')};
      border-radius: 4px;
      width: 100%;
      overflow: hidden;

      .has-shadow::after {
        position: absolute;
        top: 0;
        left: 100%;
        box-shadow: -15px 0 10px rgba(0, 0, 0, 0.05);
        width: ${calculateSpacing(6.25)};
        height: 100%;
        content: '';
      }

      > div {
        overflow-x: auto;
      }

      > div::-webkit-scrollbar {
        border-radius: ${calculateSpacing(6.25)};
        height: 3px;
      }

      > div::-webkit-scrollbar-thumb {
        background-color: black;
      }

      > div::-webkit-scrollbar-track {
        background: rgba(236, 236, 236, 0.5);
      }

      .simple-table {
        width: 100%;
        border-collapse: unset;

        thead th,
        tbody td {
          padding: ${calculateSpacing(2)};
          min-width: ${calculateSpacing(18.75)};
          max-width: ${calculateSpacing(25)};
          text-align: left;
          color: ${getColorToken('colors.interactive.base.body')};
          ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.utility.body')};
          font-size: ${calculateSpacing(1.75)};
        }

        thead th {
          border: none;
          border-bottom: 1px solid
            ${getColorToken('colors.consumption.body.standard.divider')};
          background-color: ${getColorToken('colors.interactive.base.highlight')};
          font-weight: bold;
        }

        tbody td {
          border: none;
          border-bottom: 1px solid
            ${getColorToken('colors.consumption.body.standard.divider')};
          background: #ffffff;
        }

        tbody tr:last-child td {
          border-bottom: none;
        }
      }
    }

    .scroll-arrows {
      display: none;
    }
    @media only screen and (min-width: 768px) {
      .scroll-arrows {
        display: flex;
        justify-content: flex-end;
        margin-bottom: ${calculateSpacing(3)};

        button {
          margin: 0 ${calculateSpacing(1)};
          background: none;
        }

        button[disabled] {
          opacity: 0.2;
          pointer-events: none;
        }

        .chevron::before {
          display: inline-block;
          position: relative;
          top: 0.8em;
          left: 0.1em;
          transform: rotate(-135deg);
          border-width: 2px 2px 0 0;
          border-style: solid;
          width: ${calculateSpacing(1)};
          height: ${calculateSpacing(1)};
          vertical-align: top;
          content: '';
        }

        .chevron.right::before {
          left: 0;
          transform: rotate(45deg);
        }
      }
    }
  }

  ${({ hasContentHeaderLogo }) => hasContentHeaderLogo &&
    `
        padding-top: 0px!important;
      `}

  ${({ isNavigationHidden }) => isNavigationHidden ? `&&&, &&&.homepage { padding-top: 0; }` : ``}

  ${commentSectionNoPrint}

  [data-testid="RowWrapper"] > .consumer-marketing-unit > .journey-unit:not(:empty) {
    ${({ hasConsistentSpacing, theme }) => {
    if (hasConsistentSpacing &&
        getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
        return `padding-bottom: ${getSectionSpacingStyling(theme, 'gap-md')};`;
    }
    return ``;
}}
  }

  [data-testid='RowWrapper'] > .journey-unit__container {
    ${({ hasConsistentSpacing, hasFooterMargins, theme }) => {
    if (!hasFooterMargins ||
        (hasConsistentSpacing &&
            getSectionSpacingStyling(theme, 'gap-md') !== '0px')) {
        return `padding-bottom: ${calculateSpacing(6)};`;
    }
    return ``;
}}
  }
`;
const BasePageNavigationBackgroundFiller = styled.div.withConfig({
    displayName: 'BasePageNavigationBackgroundFiller'
}) `
  display: ${({ isNavigationHidden }) => isNavigationHidden ? `none` : `block`};
  position: absolute;
  top: 0;

  background: ${({ palette, theme }) => {
    if (palette === 'inverted') {
        return getColorToken(theme, 'colors.consumption.lead.inverted.background');
    }
    else if (palette === 'special') {
        return getColorToken(theme, 'colors.consumption.lead.special.background');
    }
    return getColorToken(theme, 'colors.consumption.lead.standard.background');
}};
  width: 100%;
  height: 0;

  .fixed-header-nav-variation & {
    @media (min-width: ${BREAKPOINTS.lg}) {
      height: ${calculateSpacing(14, 'px')};
    }
  }

  @media print {
    display: none;
  }
`;
const BasePageSkipLink = styled(BaseLink).withConfig({
    displayName: 'BasePageSkipLink'
}) `
  ${hideVisuallyFocusable}

  &:hover,
  &:focus {
    position: fixed;
    z-index: ${getZIndex('skipLink')};
    background-color: white;
    color: black;
  }
`;
const BasePageMainFooterFiller = styled.div.withConfig({
    displayName: 'BasePageMainFooterFiller'
}) ``;
/*
  Currently out-of-the-page ad is showing empty space due to padding issue.
  This is to make sure out-of-the-page ad doesn't show empty space
  According to the ad ops team, out-of-the-page ad is not a typical ad.
  They reach outside of the div and add things to the page
*/
const BasePageAd = styled(Ad).withConfig({
    displayName: 'BasePageAd'
}) `
  position: absolute;
  z-index: -1;
`;
const BasePageSiteFooterRowGrid = styled(Grid.WithMargins).withConfig({
    displayName: 'BasePageSiteFooterRowGrid'
}) `
  ${GridItem} {
    grid-column: 1 / -1;
  }
`;
module.exports = {
    BasePageWrapper,
    BasePageMainContent,
    BasePageNavigationBackgroundFiller,
    BasePageSiteFooterRow,
    BasePageSkipLink,
    BasePageMainFooterFiller,
    BasePageAd,
    BasePageSiteFooterRowGrid
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 18284:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const classnames_1 = __importDefault(__webpack_require__(32485));
const react_1 = __importStar(__webpack_require__(96540));
const prop_types_1 = __importDefault(__webpack_require__(5556));
const context_1 = __importDefault(__webpack_require__(2820));
const redux_1 = __webpack_require__(57744);
const snowplow_tracking_1 = __webpack_require__(14307);
const HasScrolledProvider_1 = __webpack_require__(52064);
const ContentLangProvider_1 = __webpack_require__(76573);
const styles_1 = __webpack_require__(4081);
const i18n_1 = __webpack_require__(18106);
const responsive_asset_1 = __importDefault(__webpack_require__(73275));
const snowplow_script_1 = __importDefault(__webpack_require__(1241));
const link_banner_1 = __importDefault(__webpack_require__(82873));
const consent_targeting_1 = __importDefault(__webpack_require__(55482));
const user_context_1 = __importDefault(__webpack_require__(68787));
const tools_1 = __webpack_require__(34854);
// `theme` is configured in Copilot and is used to invert only the content header;
// `fullPageTheme` is used to invert the entire page's theme, including the header,
// so `fullPageTheme` takes precedence over `theme`
const getHeaderTheme = ({ fullPageTheme, theme }) => fullPageTheme !== 'standard' ? fullPageTheme : theme;
/**
 * DynamicBasePage component
 *
 * @param {object} props - React props
 * @param {object} [props.coreDataLayer] - Optional Data Layer object
 * @param {Array} crossDomainLinks - cross domain links of brand
 * @param {object} props.children - Required page content to wrap
 * @param {string} [props.fullPageTheme] - Optional prop to apply an inverted (dark) theme to the entire page
 * @param {string} [props.lang] - Optional prop to set the language for the content
 * @param {string} [props.theme] - Optional value to theme the BasePage
 * @param {boolean} [props.hasBaseAds] - shows base ads
 * @param {object} [props.snowplow] - Optional Snowplow configuration
 * @param {object} [props.user] - Optional User info
 * @returns {ReactElement} <div>
 */
class DynamicBasePage extends react_1.Component {
    constructor(props) {
        super(props);
        this.onConsentUpdated = (event) => {
            const otActiveGroups = window.Fides
                ? (0, tools_1.fidesExtractConsentGroupsAsOtArray)()
                : this.getOtActiveGroupsFromOtEvent(event);
            const nonAnonymousConsentGroups = ['C0004'];
            const hasNonAnonymousConsent = !!otActiveGroups.some((item) => nonAnonymousConsentGroups.includes(item));
            (0, snowplow_tracking_1.disableAnonymousTracking)((0, snowplow_tracking_1.hasTargetConsentFromCookie)() || hasNonAnonymousConsent);
        };
        this.getOtActiveGroupsFromOtEvent = (event) => Array.isArray(event?.detail) ? event?.detail : [];
        this.callSnowplowEvent = (scrollPercentage) => {
            (0, snowplow_tracking_1.trackNavigationEvent)({
                type: 'scroll',
                placement: 'vertical',
                index: scrollPercentage
            });
        };
        this.handleScroll = this.handleScroll.bind(this);
        this.is25PercentLogged = false;
        this.is50PercentLogged = false;
        this.is75PercentLogged = false;
        this.is100PercentLogged = false;
    }
    componentDidMount() {
        if (!window.Fides) {
            window.addEventListener('OneTrustGroupsUpdated', this.onConsentUpdated);
        }
        window.addEventListener('scroll', this.handleScroll);
        // Snowplow tracker
        function findNearestAnchor(initialElement) {
            let element = initialElement;
            while (element && element.tagName !== 'A') {
                element = element.parentElement;
            }
            return element;
        }
        // Snowplow tracker
        if (this.props.snowplow && window && window.dataLayer) {
            const { snowplow, coreDataLayer, user, crossDomainLinks } = this.props;
            const { collectorURL, slug, enableSnowplow, appInfoObj } = snowplow;
            // Below condition checks if `enableSnowplow` is true|false for a brand
            if (enableSnowplow) {
                const links = window.document.getElementsByTagName('a');
                for (let i = 0; i < links.length; i++) {
                    links[i].addEventListener('click', (e) => {
                        const anchorElement = findNearestAnchor(e.target);
                        if (anchorElement) {
                            (0, snowplow_tracking_1.trackClickEvent)(e, anchorElement);
                        }
                    });
                }
                const globalSnowplowContext = [coreDataLayer, user];
                (0, snowplow_tracking_1.initializeSnowplowTracker)(collectorURL, slug, globalSnowplowContext, appInfoObj, crossDomainLinks);
            }
        }
    }
    componentWillUnmount() {
        window.removeEventListener('OneTrustGroupsUpdated', this.onConsentUpdated);
        window.removeEventListener('scroll', this.handleScroll);
    }
    handleScroll() {
        const scrollHeight = window && window.document && window.document.documentElement.scrollHeight;
        const scrollTop = window && window.pageYOffset;
        const viewportHeight = window && window.innerHeight;
        const scrollPercentage = (scrollTop / (scrollHeight - viewportHeight)) * 100;
        if (scrollPercentage >= 25 && !this.is25PercentLogged) {
            this.callSnowplowEvent(25);
            this.is25PercentLogged = true;
        }
        if (scrollPercentage >= 50 && !this.is50PercentLogged) {
            this.callSnowplowEvent(50);
            this.is50PercentLogged = true;
        }
        if (scrollPercentage >= 75 && !this.is75PercentLogged) {
            this.callSnowplowEvent(75);
            this.is75PercentLogged = true;
        }
        if (scrollPercentage >= 100 && !this.is100PercentLogged) {
            this.callSnowplowEvent(100);
            this.is100PercentLogged = true;
        }
    }
    render() {
        const { attributes, children, className, fullPageTheme = 'standard', hasContentHeaderLogo, lang = i18n_1.DEFAULT_LANG, theme = 'standard', snowplow, shouldBeStickyVideo, hasLinkbannerCrossSlideAnimation, hasExtraMarginForHeader, shouldScrollToTopStory, featureFlags, fourd = {
            enableFourdUser: false
        } } = this.props;
        const headerTheme = getHeaderTheme({ fullPageTheme, theme });
        const themes = { fullPageTheme, theme: headerTheme };
        const skipLinkId = 'main-content';
        const topStoryLinkId = 'topstory-content';
        const pageContent = (react_1.default.createElement(styles_1.BasePageWrapper, { ...attributes, className: (0, classnames_1.default)('page', 'dynamic-page', `page-theme-${headerTheme}`, className), hasContentHeaderLogo: hasContentHeaderLogo, shouldBeStickyVideo: shouldBeStickyVideo, showScrolledLinkBannerSpacing: hasLinkbannerCrossSlideAnimation, hasExtraMarginForHeader: hasExtraMarginForHeader },
            react_1.default.createElement(context_1.default.Provider, { value: themes },
                react_1.default.createElement(styles_1.BasePageSkipLink, { href: shouldScrollToTopStory ? `#${topStoryLinkId}` : `#${skipLinkId}`, "data-testid": "BasePageSkipLink" }, "Skip to main content"),
                children),
            react_1.default.createElement(consent_targeting_1.default, { shouldEnableFourdUser: fourd.enableFourdUser, shouldEnableInfinityId: featureFlags.enableInfinityId }),
            featureFlags.enableUserContext && react_1.default.createElement(user_context_1.default, null),
            snowplow?.enableSnowplow && (react_1.default.createElement(snowplow_script_1.default, { brand: snowplow.slug || '', testingBrand: snowplow_tracking_1.testingBrands }))));
        return (react_1.default.createElement(HasScrolledProvider_1.HasScrolledProvider, null,
            react_1.default.createElement(ContentLangProvider_1.ContentLangProvider, { lang: lang }, pageContent)));
    }
}
DynamicBasePage.propTypes = {
    additionalNavigation: prop_types_1.default.node,
    attributes: prop_types_1.default.object,
    children: prop_types_1.default.node.isRequired,
    className: prop_types_1.default.string,
    componentConfig: prop_types_1.default.shape({
        ConnectedNavigation: prop_types_1.default.shape({
            settings: prop_types_1.default.shape({
                navPattern: prop_types_1.default.string
            })
        })
    }),
    coreDataLayer: prop_types_1.default.shape({
        content: prop_types_1.default.shape({
            tags: prop_types_1.default.string,
            contentType: prop_types_1.default.string
        })
    }),
    crossDomainLinks: prop_types_1.default.array,
    deepLinkImageId: prop_types_1.default.string,
    eventBannerTags: prop_types_1.default.array,
    featureFlags: prop_types_1.default.shape({
        hasRiser: prop_types_1.default.bool,
        showRedirectMsg: prop_types_1.default.bool,
        showGlobalMessage: prop_types_1.default.bool,
        enableInfinityId: prop_types_1.default.bool,
        enableUserContext: prop_types_1.default.bool
    }),
    fingerprint: prop_types_1.default.object,
    fourd: prop_types_1.default.shape({
        enableFourdUser: prop_types_1.default.bool
    }),
    fullPageTheme: prop_types_1.default.oneOf(['standard', 'inverted']),
    globalMessage: prop_types_1.default.shape({
        text: prop_types_1.default.string.isRequired,
        delayDuration: prop_types_1.default.number
    }),
    hasBaseAds: prop_types_1.default.bool,
    hasContentHeaderLogo: prop_types_1.default.bool,
    hasEventBannerHidden: prop_types_1.default.bool,
    hasExtraMarginForHeader: prop_types_1.default.bool,
    hasFooterAd: prop_types_1.default.bool,
    hasFooterAdsMargins: prop_types_1.default.bool,
    hasFooterMargins: prop_types_1.default.bool,
    hasInvertedHeadertheme: prop_types_1.default.bool,
    hasLinkbannerCrossSlideAnimation: prop_types_1.default.bool,
    hasTopStory: prop_types_1.default.bool,
    hideFooter: prop_types_1.default.bool,
    hideHeader: prop_types_1.default.bool,
    interactiveOverride: prop_types_1.default.shape({
        markup: prop_types_1.default.string,
        behavior: prop_types_1.default.string
    }),
    lang: prop_types_1.default.oneOf(i18n_1.LOCALES),
    linkBannerData: prop_types_1.default.shape({
        bannerType: prop_types_1.default.string,
        // eslint-disable-next-line react/no-typos
        hed: prop_types_1.default.hed,
        // eslint-disable-next-line react/no-typos
        dek: prop_types_1.default.dek,
        image: prop_types_1.default.shape(responsive_asset_1.default.propTypes),
        links: prop_types_1.default.arrayOf(prop_types_1.default.shape({
            url: prop_types_1.default.string,
            text: prop_types_1.default.string,
            isExternal: prop_types_1.default.bool
        })),
        tracking: prop_types_1.default.shape(link_banner_1.default.propTypes.tracking)
    }),
    mainRef: prop_types_1.default.object,
    parsely: prop_types_1.default.shape({
        publicKey: prop_types_1.default.string,
        shouldRenderParsely: prop_types_1.default.bool
    }),
    redirectMsg: prop_types_1.default.string,
    seriesData: prop_types_1.default.shape({
        hed: prop_types_1.default.string,
        dek: prop_types_1.default.string,
        image: prop_types_1.default.object,
        links: prop_types_1.default.arrayOf(prop_types_1.default.shape({
            hed: prop_types_1.default.string,
            dek: prop_types_1.default.string,
            image: prop_types_1.default.object,
            isPublished: prop_types_1.default.bool,
            promoHed: prop_types_1.default.string,
            url: prop_types_1.default.string
        }))
    }),
    shouldBeStickyVideo: prop_types_1.default.bool,
    shouldEnableFullArticleInverted: prop_types_1.default.bool,
    shouldPrioritizeSeriesPagination: prop_types_1.default.bool,
    shouldScrollToTopStory: prop_types_1.default.bool,
    showBackgroundGradientColor: prop_types_1.default.bool,
    showContentFooterWithHeaderOverride: prop_types_1.default.bool,
    showNavWithHeaderOverride: prop_types_1.default.bool,
    snowplow: prop_types_1.default.shape({
        collectorURL: prop_types_1.default.string,
        enableSnowplow: prop_types_1.default.bool,
        slug: prop_types_1.default.string,
        appInfoObj: prop_types_1.default.object
    }),
    theme: prop_types_1.default.oneOf(['standard', 'inverted', 'special']),
    user: prop_types_1.default.object
};
DynamicBasePage.displayName = 'DynamicBasePage';
exports["default"] = (0, redux_1.connector)(DynamicBasePage, {
    keysToPluck: [
        'redirectMsg',
        'componentConfig',
        'coreDataLayer',
        'deepLinkImageId',
        'featureFlags',
        'hasTopStory',
        'parsely',
        'seriesData',
        'linkBannerData',
        'globalMessage',
        'snowplow',
        'fourd',
        'user',
        'fingerprint',
        'crossDomainLinks'
    ]
});
//# sourceMappingURL=DynamicBasePage.js.map

/***/ }),

/***/ 94748:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const classnames_1 = __importDefault(__webpack_require__(32485));
const prop_types_1 = __importDefault(__webpack_require__(5556));
const react_1 = __importDefault(__webpack_require__(96540));
const channel_navigation_1 = __importDefault(__webpack_require__(71656));
const redux_1 = __webpack_require__(57744);
const sponsored_content_header_1 = __importDefault(__webpack_require__(31411));
const track_component_1 = __webpack_require__(78788);
const styles_1 = __webpack_require__(94631);
const dynamic_multi_packages_1 = __importDefault(__webpack_require__(55717));
/**
 * DynamicHomePage component
 *
 * @param {object} props - All the props.
 * @param {object} [props.attributes] - Optional attributes to add top level i.e. aria-*, role, etc.
 * @param {string} [props.backgroundColorSettingForNewsletter] - Optional to use background color from component settings for setting newsletter background
 * @param {string} [props.bundleTitle] - Optional bundleTitle for displaying in a header
 * @param {Array} [props.channelFilter] - Optional filter param of the channel page fetched from the ChannelFilter component
 * @param {Array} [props.channelItems] - Optional array of content items fetched from the ChannelFilter component
 * @param {Array} [props.channelItemsTotal] - Optional total number of content items fetched from the ChannelFilter component
 * @param {string} [props.className] - Optional top-level class to add
 * @param {string} [props.dangerousBundleDek] - Optional bundleDek for displaying in a header
 * @param {object} props.featureFlags - Object containing tenant feature flags
 * @param {Bool} [props.featureFlags.hideHomepageHeader] - Show or hide Homepage Header
 * @param {string} [props.fullPageTheme] - Optional prop to apply an inverted (dark) theme to the entire page
 * @param {boolean} [props.hasBackground] - Apply background to the entire page
 * @param {boolean} [props.hasFullBleedBackground] - Apply hasFullBleedBackground to the newsletter on home page
 * @param {boolean} [props.hasDisclaimerBackground] - Optional. Set to `true` for disclaimer background to be set
 * @param {boolean} [props.hasDisclaimerBorderBottom] - Optional. Set to `false` for displaying bottom border for disclaimer
 * @param {boolean} [props.hasReducedMargin] - Optional. Set to `true` for no margin spacing
 * @param {boolean} [props.tickerMarginTopType] - string (defaults to small) for controlling top margin of Ticker component as supported by Ticker component
 * @param {boolean} [props.hideErrorTextPadding] - Optional prop to hide padding for error text message in newsletter
 * @param {boolean} [props.hasVersoFeaturesReducedMargin] - Optional prop for tighter spacing between verso feature rows on homepage
 * @param {boolean} [props.isNewsletterDisclaimerCenterAligned] - Optional. If set to `true`, newsletter disclaimer aligns to center
 * @param {boolean} [props.shouldHideSidePadding] - Optional. Set for side margin spacing
 * @param {boolean} [props.isPaddingRequired] - Optional top-level class to add
 * @param {boolean} [props.lede] - Optional prop to display a top image
 * @param {object} props.newsletter - Object containing newsletter data
 * @param {boolean} [props.isSponsored] - Optional prop for show or hide native byline on bundles
 * @param {string} [props.seoHiddenHeader] - Optional prop for rendering seo header content in homepage DOM but content stays hidden
 * @param {boolean} [props.shouldCenterBundleBodyContent] - Optional to center the content of bundled body
 * @param {boolean} [props.shouldEnableSubNavigation] - Optional prop to enable display of sub-navigation
 * @param {boolean} [props.shouldHidePaddingBottom] - Optional to show padding bottom
 * @param {boolean} [props.shouldOverrideColorToken] - Optional to override color token
 * @param {boolean} [props.showSubChannelHed] - Optional to show subchannel hed
 * @param {boolean} [props.shouldUseBundleHeader] - Optional to show bundle header
 * @param {boolean} [props.showBundleBody] - Optional to show bundle body
 * @param {boolean} [props.shouldShowFooterAdPadding] - optional to show footer Ad padding
 * @param {boolean} [props.shouldUseSectionTitle] - optional to section title with icon in header
 * @param {object} [props.headerIcon] - optional props for assets of header icon
 *
 * @param {boolean} [props.hasTopStory] - Will true when TopStory module is available
 * @param {boolean} [props.hasEvenSpacing] - flag for setting even spacing between child elements
 * @param {boolean} [props.shouldHideAds] - flag for hiding ads slots
 * @param {object} [props.featureValue] - growthbook experiment data
 * @param {ReactElement} [props.children] - Optional children to render
 * @param {boolean} [props.hasConsistentSpacing] - defines whether the consistent spacing is needed or not
 * @returns {ReactElement} <div>
 */
/* eslint-disable-next-line complexity */
const DynamicHomePage = (props) => {
    react_1.default.useEffect(() => {
        window.Kendra.TRACK_COMPONENT.broadcast(track_component_1.TrackComponentChannel.RENDER, {
            name: 'DynamicHomePage'
        });
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    const { attributes, backgroundColorSettingForNewsletter, bundleProps, className, isPaddingRequired, dispatch, hasBackground = false, hasFullBleedBackground = false, hideErrorTextPadding = false, isNewsletterDisclaimerCenterAligned = false, shouldHideSidePadding = false, fullPageTheme = 'standard', navigation: { hasChannelNavigation }, shouldHidePadding, shouldHidePaddingBottom = false, shouldShowFooterAdPadding = false, shouldOverrideColorToken = false, hasTopStory = false, hasEvenSpacing = false, shouldHideAds = false, children, featureFlags, hasVersoFeaturesReducedMargin, tickerMarginTopType, hasReducedMargin, hasConsistentSpacing } = props;
    const { isSponsored, seoHiddenHeader, sponsoredContentHeaderProps = {} } = bundleProps ?? {};
    // To add the class padding value only on basis of props
    let alteredClassName = className;
    alteredClassName =
        isPaddingRequired && alteredClassName
            ? alteredClassName.replace('ad--mid-content', 'ad--mid-content-with-padding')
            : className;
    if (featureFlags.excludedParams &&
        "object" !== 'undefined' &&
        typeof URLSearchParams !== 'undefined') {
        // Feature not supported in iOS Safari 9.3
        // eslint-disable-next-line compat/compat
        const urlParams = new URLSearchParams(window.location.search);
        featureFlags.excludedParams.forEach((param) => urlParams.delete(param));
        const filteredUri = urlParams.toString() !== '' // if there are still params
            ? `${window.location.pathname}?${urlParams.toString()}`
            : window.location.pathname;
        window.history.replaceState({}, document.title, filteredUri);
    }
    // Update store with homepage flag
    dispatch({
        type: 'SET_KEY',
        key: 'isHomepage',
        value: true
    });
    /** TODO: need to pass this component props to some children
     * ex: MultiPackages expects below props from homepage wrapper
     * <MultiPackages
     *     ....
     *    hasVersoFeaturesReducedMargin={hasVersoFeaturesReducedMargin}
     *    tickerMarginTopType={tickerMarginTopType}
     *    hasReducedMargin={hasReducedMargin}
     *    hasEvenSpacingMultiPackageRow={hasEvenSpacing}
     *  />
     *  */
    return (react_1.default.createElement(styles_1.DynamicHomepageWrapper, { ...attributes, className: (0, classnames_1.default)('homepage', alteredClassName), additionalNavigation: hasChannelNavigation ? react_1.default.createElement(channel_navigation_1.default, null) : null, fullPageTheme: fullPageTheme, hasBackground: hasBackground, hasFullBleedBackground: hasFullBleedBackground, hideHeader: hasChannelNavigation || hasTopStory, hideErrorTextPadding: hideErrorTextPadding, isNewsletterDisclaimerCenterAligned: isNewsletterDisclaimerCenterAligned, shouldHideSidePadding: shouldHideSidePadding, shouldHidePadding: shouldHidePadding || hasTopStory, shouldOverrideColorToken: shouldOverrideColorToken, backgroundColorSettingForNewsletter: backgroundColorSettingForNewsletter, shouldHidePaddingBottom: shouldHidePaddingBottom, shouldShowFooterAdPadding: shouldShowFooterAdPadding, isHeroAdVisible: !hasTopStory, hasEvenSpacing: hasEvenSpacing, shouldHideAds: shouldHideAds, shouldScrollToTopStory: hasTopStory },
        isSponsored && (react_1.default.createElement(sponsored_content_header_1.default, { ...sponsoredContentHeaderProps, className: "light-theme" })),
        seoHiddenHeader && (react_1.default.createElement(styles_1.HomepageHiddenContent, null, seoHiddenHeader)),
        react_1.default.createElement(dynamic_multi_packages_1.default, { hasVersoFeaturesReducedMargin: hasVersoFeaturesReducedMargin, tickerMarginTopType: tickerMarginTopType, hasReducedMargin: hasReducedMargin, hasEvenSpacingMultiPackageRow: hasEvenSpacing, hasConsistentSpacing: hasConsistentSpacing, bundleProps: props }, children)));
};
DynamicHomePage.propTypes = {
    attributes: prop_types_1.default.object,
    backgroundColorSettingForNewsletter: prop_types_1.default.string,
    bundleProps: prop_types_1.default.shape({
        isSponsored: prop_types_1.default.bool,
        seoHiddenHeader: prop_types_1.default.string,
        sponsoredContentHeaderProps: prop_types_1.default.object
    }),
    bundleTitle: prop_types_1.default.string,
    channelFilter: prop_types_1.default.string,
    channelItems: prop_types_1.default.shape({
        list: prop_types_1.default.array,
        searchUrl: prop_types_1.default.string
    }),
    channelItemsTotal: prop_types_1.default.number,
    children: prop_types_1.default.node,
    className: prop_types_1.default.string,
    dangerousBundleDek: prop_types_1.default.string,
    dispatch: prop_types_1.default.func,
    featureFlags: prop_types_1.default.object,
    featureValue: prop_types_1.default.object,
    fullPageTheme: prop_types_1.default.oneOf(['standard', 'inverted']),
    hasBackground: prop_types_1.default.bool,
    hasConsistentSpacing: prop_types_1.default.bool,
    hasDisclaimerBackground: prop_types_1.default.bool,
    hasDisclaimerBorderBottom: prop_types_1.default.bool,
    hasEvenSpacing: prop_types_1.default.bool,
    hasFullBleedBackground: prop_types_1.default.bool,
    hasReducedMargin: prop_types_1.default.bool,
    hasTopStory: prop_types_1.default.bool,
    hasVersoFeaturesReducedMargin: prop_types_1.default.bool,
    headerIcon: prop_types_1.default.object,
    hideErrorTextPadding: prop_types_1.default.bool,
    isNewsletterDisclaimerCenterAligned: prop_types_1.default.bool,
    isPaddingRequired: prop_types_1.default.bool,
    lede: prop_types_1.default.object,
    navigation: prop_types_1.default.shape({
        subchannelLinks: prop_types_1.default.arrayOf(prop_types_1.default.object),
        hasChannelNavigation: prop_types_1.default.bool
    }).isRequired,
    newsletter: prop_types_1.default.object,
    shouldCenterBundleBodyContent: prop_types_1.default.bool,
    shouldHideAds: prop_types_1.default.bool,
    shouldHidePadding: prop_types_1.default.bool,
    shouldHidePaddingBottom: prop_types_1.default.bool,
    shouldHideSidePadding: prop_types_1.default.bool,
    shouldOverrideColorToken: prop_types_1.default.bool,
    shouldShowChannelFilter: prop_types_1.default.bool,
    shouldShowFooterAdPadding: prop_types_1.default.bool,
    shouldUseBundleHeader: prop_types_1.default.bool,
    shouldUseSectionTitle: prop_types_1.default.bool,
    showBundleBody: prop_types_1.default.bool,
    showSearchFilter: prop_types_1.default.bool,
    showSubChannelHed: prop_types_1.default.bool,
    spacingAboveAd: prop_types_1.default.number,
    tickerMarginTopType: prop_types_1.default.oneOf(['small', 'none', 'large'])
};
DynamicHomePage.displayName = 'DynamicHomePage';
const ConnectedDynamicHomePage = (0, redux_1.connector)(DynamicHomePage, {
    keysToPluck: [
        'channelFilter',
        'channelItems',
        'channelItemsTotal',
        'featureFlags',
        'navigation',
        'newsletter',
        'hasTopStory'
    ]
});
exports["default"] = ConnectedDynamicHomePage;
//# sourceMappingURL=DynamicHomePage.js.map

/***/ }),

/***/ 75945:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const configured_component_1 = __webpack_require__(12892);
const DynamicHomePage_1 = __importDefault(__webpack_require__(94748));
exports["default"] = (0, configured_component_1.asConfiguredComponent)(DynamicHomePage_1.default, 'HomePage');
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 70462:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Slot = exports.MessageText = exports.ErrorMessageWrapper = exports.SlotContainer = void 0;
const styled_components_1 = __importStar(__webpack_require__(92168));
const layout_1 = __webpack_require__(1123);
const utils_1 = __webpack_require__(26865);
const constants_1 = __webpack_require__(96472);
const base_1 = __webpack_require__(76955);
const applyDefaultGridStyles = (screen = {}) => screen.display === 'grid' && (0, layout_1.applyGridSpacing)();
// Container which holds the styles for different screens
exports.SlotContainer = styled_components_1.default.div.withConfig({
    displayName: 'SlotContainer'
}) `
  ${({ stylesConfig = {} }) => {
    const { mobile = {}, tablet = {}, desktop = {} } = stylesConfig;
    return (0, styled_components_1.css) `
      ${mobile}
      ${applyDefaultGridStyles(mobile)}

      // childStylesConfig are required in here to
      // put up styles for direct slot component
      & > :first-child {
        ${mobile.childStylesConfig ?? {}}
      }

      ${(0, utils_1.minScreen)(constants_1.BREAKPOINTS.md)} {
        ${tablet}
        ${applyDefaultGridStyles(tablet)}

        & > :first-child {
          ${tablet.childStylesConfig ?? {}}
        }
      }

      ${(0, utils_1.minScreen)(constants_1.BREAKPOINTS.lg)} {
        ${desktop}
        ${applyDefaultGridStyles(desktop)}

        & > :first-child {
          ${desktop.childStylesConfig ?? {}}
        }
      }
    `;
}};
`;
exports.ErrorMessageWrapper = (0, styled_components_1.default)(base_1.BaseWrap).withConfig({
    displayName: 'FallbackWrapper'
}) `
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 0.5px dotted;
  padding: 0.5rem;
  height: 100vh;
`;
exports.MessageText = (0, styled_components_1.default)(base_1.BaseText).withConfig({
    displayName: 'MessageText'
}) ``;
exports.Slot = styled_components_1.default.div.withConfig({
    displayName: 'Slot'
}) ``;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 68955:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { useState } = __webpack_require__(96540);
const { useInView } = __webpack_require__(26855);
const { asConfiguredComponent } = __webpack_require__(12892);
const { googleAnalytics } = __webpack_require__(90090);
const { withRecircContextConsumer } = __webpack_require__(85207);
const ConnectedInlineRecirc = withRecircContextConsumer(__webpack_require__(71436));
const ConsumerMarketingUnit = __webpack_require__(71284);
const { PaymentGateway } = __webpack_require__(92807);
const Ad = __webpack_require__(19607);
const GallerySlide = __webpack_require__(63510);
const AwardsListSlide = __webpack_require__(96637);
const CNEInterludeEmbed = __webpack_require__(96303);
const GalleryVotingSlide = __webpack_require__(19146);
const UnifiedProductCard = __webpack_require__(51125);
const { trackNavigationEvent } = __webpack_require__(14307);
const { checkImageCreditText } = __webpack_require__(5344);
const { handleSnowplowSearchFilterEvent } = __webpack_require__(11869);
const { InContentBarrier } = __webpack_require__(12501);
// Logic to determine which slide type to display
const SLIDE_FORMATS = {
    'award-list': AwardsListSlide
};
let hasBeenCalled = false;
const trackSnowplowEvent = (item) => {
    const eventData = {
        type: 'impression',
        subject: 'gallery_image',
        index: item.order,
        total_index: item.totalCount,
        placement: 'vertical'
    };
    const lightboxEventTracking = item.isInLightbox;
    const searchFilterEventData = item?.image?.searchFilterEventData;
    if (!lightboxEventTracking) {
        trackNavigationEvent({
            ...eventData,
            label: item.dangerousHed || ''
        });
        // Early return for production where lightbox is not enabled
        return;
    }
    // Proceed with execution only for lightbox tracking in GalleryPage
    if (!searchFilterEventData) {
        const imageSource = item?.image?.segmentedSources;
        const trackImageUrl = imageSource ? imageSource.lg[0].url : '';
        const scrollEventData = {
            items: [
                {
                    content_title: item.dangerousHed,
                    content_type: 'photo',
                    content_id: item.id,
                    content_url: trackImageUrl
                }
            ],
            index: item.index,
            total_index: item.totalItemCount
        };
        trackNavigationEvent({
            ...eventData,
            ...scrollEventData,
            subject: 'lightbox_gallery_slide_image'
        });
        return;
    }
    // Proceed with execution for tracking searchFilterEvent in ImageArchivePage
    if (!hasBeenCalled) {
        handleSnowplowSearchFilterEvent(searchFilterEventData);
        hasBeenCalled = true;
    }
    else {
        handleSnowplowSearchFilterEvent({
            ...searchFilterEventData,
            type: 'result_in_view'
        });
    }
};
// Handle URL updates when slide is in view
const handleUrlUpdate = (item, slideInView) => {
    const requestSearch = new URLSearchParams(window.location.search);
    const currUrl = window.location.pathname;
    const urlHash = window.location.hash;
    const setParams = () => {
        const searchString = requestSearch.toString();
        window.history.replaceState({}, '', `${currUrl}${searchString && `?${searchString}`}${urlHash}`);
    };
    if (slideInView) {
        requestSearch.set('image', item.id);
        setParams();
    }
    else if (requestSearch.get('image') === item.id) {
        requestSearch.delete('image');
        setParams();
    }
};
// Handle analytics tracking when slide is in view
const handleAnalyticsTracking = (item, setGAFired, totalItemCount, isInLightbox) => {
    setGAFired(true);
    const payload = {
        'gallery-item-number': `image-${item.order + 1}`,
        'gallery-item-name': item.dangerousHed || '',
        'gallery-length': item.totalCount
    };
    trackSnowplowEvent({ ...item, totalItemCount, isInLightbox });
    googleAnalytics.emitGoogleTrackingEvent('vertical-gallery-view', payload);
};
/**
 * Depending on whether slideVariation is ordered or not, uses accompanying html tag
 *
 * @param {object} props - React Props
 * @param {string} [props.alternateVotingPrompt] - Alternate voting question
 * @param {Array} props.chunk - Required array of items
 * @param {string} [props.className] - Optional classname
 * @param {number} [props.chunksCount] - Optional count of chunks array
 * @param {string} [props.defaultVotingPrompt] - Default question, also determines if voting is enable
 * @param {Function} [props.getRef] - Method passing from parent to get refs from Child component
 * @param {boolean} [props.isInContentSlot] - flag to show in-content Ad
 * @param {boolean} [props.hasPhotoBookmark] - Optional flag to enable bookmarking a photo.
 * @param {boolean} [props.hasCM] - Optional if the Slide has consumer marketing
 * @param {object} [props.interlude] - Optional interlude info
 * @param {boolean} [props.isLazy] - Optional if the image is lazy loaded
 * @param {object} [props.item] - Slide content
 * @param {boolean} [props.shouldHoldImageSpace] - Optional prop, set to true to hold image space based on image aspect ratio
 * @param {boolean} [props.shouldShowCM] - Optional flag to show a CM unit on the first slide in the list
 * @param {boolean} [props.showOfferUrl] - Optional flag to show a Offer Url
 * @param {boolean} [props.shouldUpdateUrl] - Optional flag to update the URL with item ID on scroll
 * @param {boolean} [props.slideFormat] - Optional flag that determines which gallery slide type to display
 * @param {string} [props.slideVariation] - variation name for GallerySlide
 * @param {boolean} [props.shouldEnableCommentsCount] - optional flag to enable comments count
 * @param {boolean} [props.shouldEnableCardLevelBookmark] - optinal flag to enable bookmark for individual gallery Item
 * @param {bool} [props.isInLightbox] - Optional prop to set if the embed is rendered from the Lightbox
 * @param {boolean} [props.showGallerySlideCaptionOrTitle] - Optional prop, set to true to show the caption OR title within GallerySlideCaption instead of both.
 * @param {boolean} [props.showZoomedImage] - Optional boolean to add a wrapper around responsive image to zoom in on hover
 * @param {number} [props.totalItemCount] - Total number of items/images
 * @param {boolean} [props.shouldEnableBookmarkDrawers] - flag to enable bookmark drawer functionality
 * @param {boolean} [props.isModalClosed] - Optional boolean to parent modal is closed
 */
const GalleryItem = ({ alternateVotingPrompt, className, defaultVotingPrompt, getRef, hasCM, hasPhotoBookmark, showOfferUrl, interlude, isInContentSlot, slideFormat, isLazy, isModalClosed, item, shouldHoldImageSpace = false, shouldUpdateUrl = false, shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark, shouldEnableCommentsCount, isInLightbox, showGallerySlideCaptionOrTitle, showZoomedImage, totalItemCount }) => {
    const productId = item && item.contentType === 'product' ? `${item.id}` : '';
    const hasImageCreditText = checkImageCreditText(item.image);
    const [slideRef, slideInView] = useInView({
        threshold: 0.5
    });
    const [isGAFired, setGAFired] = useState(false);
    const SlideComponent = item.isUpcEnabled &&
        ['commerce-product', 'product'].includes(item.contentType)
        ? UnifiedProductCard
        : SLIDE_FORMATS[slideFormat] || GallerySlide;
    if (!isGAFired && slideInView) {
        handleAnalyticsTracking(item, setGAFired, totalItemCount, isInLightbox);
    }
    if (isModalClosed) {
        hasBeenCalled = false;
    }
    if (shouldUpdateUrl && "object" !== 'undefined') {
        handleUrlUpdate(item, slideInView);
    }
    const data_item = { ...item, layout: 'ProductEmbed' };
    return (React.createElement("li", { ref: (el) => getRef(el, item.id, slideInView), className: className, id: isInLightbox ? `lightbox-gallery-${item.id}` : item.id },
        React.createElement("div", { ref: slideRef },
            !item?.isMidGalleryAd && (React.createElement(SlideComponent, { ...item, defaultVotingPrompt: defaultVotingPrompt, showOfferUrl: showOfferUrl, isLazy: item.isUpcEnabled ? true : isLazy, hasPhotoBookmark: hasPhotoBookmark, productId: productId, data_item: data_item, hasImpressionTracking: true, hasImageCreditText: hasImageCreditText, shouldEnableBookmarkDrawers: shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark: shouldEnableCardLevelBookmark, shouldEnableCommentsCount: shouldEnableCommentsCount, shouldHoldImageSpace: shouldHoldImageSpace, showGallerySlideCaptionOrTitle: showGallerySlideCaptionOrTitle, showZoomedImage: showZoomedImage })),
            defaultVotingPrompt && (React.createElement(GalleryVotingSlide, { imageId: item.id, alternateVotingPrompt: alternateVotingPrompt, defaultVotingPrompt: defaultVotingPrompt })),
            hasCM && (React.createElement(PaymentGateway, { group: "consumer-marketing" },
                React.createElement("div", { className: "gallery-slide__cm-container" },
                    React.createElement(ConsumerMarketingUnit, { position: "gallery-slide", secondPosition: "in-content" }),
                    React.createElement(InContentBarrier, null)))),
            item?.isMidGalleryAd && (React.createElement(PaymentGateway, { group: "ads" },
                React.createElement(Ad, { position: "mid-gallery", className: "gallery__item__slide--mid-gallery-ad", shouldHoldSpace: true, index: item.midGalleryAdIndex }))),
            isInContentSlot && (React.createElement(PaymentGateway, { group: "ads" },
                React.createElement(Ad, { position: "in-content", shouldDisplayLabel: true, instance: 0, index: 0 }))),
            interlude.include && (React.createElement("div", null,
                React.createElement(CNEInterludeEmbed, { ...interlude }))),
            item.recirc && item.recirc.include && (React.createElement(ConnectedInlineRecirc, { reelId: item.recirc.reelId })))));
};
GalleryItem.propTypes = {
    alternateVotingPrompt: PropTypes.string,
    className: PropTypes.string,
    defaultVotingPrompt: PropTypes.string,
    getRef: PropTypes.func,
    hasCM: PropTypes.bool,
    hasPhotoBookmark: PropTypes.bool,
    interlude: PropTypes.shape({
        ...CNEInterludeEmbed.propTypes,
        include: PropTypes.bool
    }),
    isInContentSlot: PropTypes.bool,
    isInLightbox: PropTypes.bool,
    isLazy: PropTypes.bool,
    isModalClosed: PropTypes.bool,
    isNative: PropTypes.bool,
    item: PropTypes.shape(GallerySlide.propTypes).isRequired,
    shouldEnableBookmarkDrawers: PropTypes.bool,
    shouldEnableCardLevelBookmark: PropTypes.bool,
    shouldEnableCommentsCount: PropTypes.bool,
    shouldHoldImageSpace: PropTypes.bool,
    shouldUpdateUrl: PropTypes.bool,
    showGallerySlideCaptionOrTitle: PropTypes.bool,
    showOfferUrl: PropTypes.bool,
    showZoomedImage: PropTypes.bool,
    slideFormat: PropTypes.string,
    totalItemCount: PropTypes.number
};
GalleryItem.displayName = 'GalleryItem';
module.exports = asConfiguredComponent(GalleryItem, 'GalleryItem');
//# sourceMappingURL=GalleryItem.js.map

/***/ }),

/***/ 42434:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const { useInView } = __webpack_require__(26855);
const PropTypes = __webpack_require__(5556);
const debounce = __webpack_require__(38221);
const { buildThresholdArray } = __webpack_require__(26695);
const PLPProductCard = __webpack_require__(67611);
const Grid = __webpack_require__(86659);
const { imageTransformToPlpCardImage } = __webpack_require__(34120);
const { formatGtmData, productImpressionTracking } = __webpack_require__(60162);
/**
 * GalleryShopViewPage component
 *
 * @param {object} props - React props
 * @param {boolean}  [props.hasProductPriceColor] - its boolean value productprice color can be there or not based on flag
 * @param {boolean} [props.hasProductNewPriceColor] - its boolean value for showing color for new price
 * @param {boolean} [props.isProductCardName] - whether we need to pass product card name based on flag
 * @param {Array} [props.dropShipSellers] - seller name in an array
 * @param {Array} [props.chunk] - its array which is required inorder to show products
 * @param {boolean} [props.hasImageGrid] - its boolean value to show images in grid format
 * @returns {ReactElement} <div>
 */
const GalleryShopViewPage = ({ hasImageGrid, hasProductPriceColor, hasProductNewPriceColor, isProductCardName, chunk, dropShipSellers }) => {
    const layout = 'GalleryShopView';
    const [setNode, , entry] = useInView({
        threshold: buildThresholdArray()
    });
    const [hasBeenSeen, setHasBeenSeen] = React.useState(false);
    React.useEffect(() => {
        if (!hasBeenSeen && entry && entry.intersectionRatio) {
            if ( true && window.dataLayer) {
                setHasBeenSeen(true);
                setTimeout(() => {
                    productImpressionTracking(layout, document.getElementsByClassName(`impressionTracking`));
                }, 1000);
            }
        }
        window.addEventListener('scroll', debounce(() => productImpressionTracking(layout, document.getElementsByClassName('impressionTracking')), 1000));
    }, [layout, entry, hasBeenSeen]);
    return (React.createElement("div", { ref: setNode }, chunk && (React.createElement(Grid.EvenTwo, null, chunk.map((item, itemIndex) => {
        const brand = {
            name: item?.brand || ''
        };
        let modifiedOffer = [];
        if (item.offers && item.offers.length) {
            // eslint-disable-next-line guard-for-in
            for (const newOffers in item.offers) {
                modifiedOffer = [
                    {
                        purchaseUri: item?.offers[newOffers]?.offerUrl || '',
                        price: item?.offers[newOffers]?.price || '',
                        currency: item?.offers[newOffers]?.currency || '',
                        shortUrl: item?.offers[newOffers]?.purchaseUri || '',
                        sellerName: item?.offers[newOffers]?.sellerName || '',
                        comparisonPrice: item?.offers[newOffers]?.reducedPrice || ''
                    }
                ];
            }
        }
        else {
            modifiedOffer = [
                {
                    purchaseUri: '',
                    price: '',
                    currency: '',
                    shortUrl: '',
                    sellerName: '',
                    comparisonPrice: ''
                }
            ];
        }
        const image = imageTransformToPlpCardImage(item);
        /*
In a given string, The regular expression (/&#{0,1}[a-z0-9]+;/ig, "") this looks for html-entities like &amp etc
In a given string, The regular expression (/(<([^>]+)>)/gi, '') this expression helps in removing
html elements like <p>, <strong> etc
*/
        let dangerousHedChunk = '';
        if (item && item.dangerousHed) {
            dangerousHedChunk = item.dangerousHed
                .replace(/&#{0,1}[a-z0-9]+;/gi, '')
                .replace(/(<([^>]+)>)/gi, '');
        }
        const productDataForTracking = {
            ...item,
            dangerousHed: dangerousHedChunk
        };
        return (React.createElement(PLPProductCard, { hasImageGrid: hasImageGrid, hasProductPriceColor: hasProductPriceColor, hasProductNewPriceColor: hasProductNewPriceColor, isProductCardName: isProductCardName, dangerousHed: dangerousHedChunk, image: image, offers: modifiedOffer, contentId: item.id, brand: brand, item: item, key: item.id || itemIndex, isDropshipProduct: true, dropShipSellers: dropShipSellers, data_item: productDataForTracking, layout: layout, hasImpressionTracking: true, onClick: (e, actionId) => {
                formatGtmData({
                    window,
                    product: productDataForTracking,
                    index: itemIndex,
                    actionId,
                    layout,
                    event: e
                });
            } }));
    })))));
};
GalleryShopViewPage.propTypes = {
    chunk: PropTypes.array.isRequired,
    dropShipSellers: PropTypes.arrayOf(PropTypes.string),
    hasImageGrid: PropTypes.bool,
    hasProductNewPriceColor: PropTypes.bool,
    hasProductPriceColor: PropTypes.bool,
    isProductCardName: PropTypes.bool
};
GalleryShopViewPage.displayName = 'GalleryShopViewPage';
module.exports = GalleryShopViewPage;
//# sourceMappingURL=GalleryShopViewPage.js.map

/***/ }),

/***/ 15564:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
module.exports = React.createContext();
//# sourceMappingURL=GalleryVotingContext.js.map

/***/ }),

/***/ 19146:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const throttle = __webpack_require__(7350);
const { asConfiguredComponent } = __webpack_require__(12892);
const { connector } = __webpack_require__(57744);
let Voting = __webpack_require__(14155);
const GalleryVotingContext = __webpack_require__(15564);
const { GalleryVotingSlideWrapper } = __webpack_require__(64763);
const MIN_VOTING_MESSAGE_THRESHOLD = 5;
Voting = React.memo(Voting);
/**
 * GalleryVotingSlide component
 *
 * @param {object} props - props for the component
 * @param {string} props.alternateVotingPrompt - use the alternative voting prompt
 * @param {string} props.defaultVotingPrompt - default voting prompt
 * @param {string} props.imageId - Unique id of the gallery item image
 * @param {boolean} props.hasBottomDivider - adds divider at the bottom of the slide
 * @param {boolean} props.shouldShowPercentVotedMessage - show a percentage calculation
 * @param {object} props.votingProps - voting question and answers
 * @returns {ReactElement} <div>
 */
const GalleryVotingSlide = ({ alternateVotingPrompt, defaultVotingPrompt, hasBottomDivider, imageId, shouldShowPercentVotedMessage, votingProps = {}, options }) => {
    const contextData = React.useContext(GalleryVotingContext);
    const onVoteCast = contextData?.onVoteCast;
    const imageVote = contextData?.votes?.find((vote) => vote.imageId === imageId);
    const votesOnImage = contextData?.allVotes.find((vote) => vote.imageId === imageId);
    const hasVoted = !!imageVote;
    let { votedMessage } = votingProps;
    const { percentVotedMessage } = votingProps;
    // actually need to count all the .count in tallyResults
    if (hasVoted && shouldShowPercentVotedMessage && votesOnImage) {
        const positiveResults = votesOnImage.tallyResults.find((res) => res?.result === true);
        const votesPerImage = votesOnImage.tallyResults.reduce((initialValue, image) => {
            return initialValue + image.count;
        }, 0);
        if (positiveResults?.percentage &&
            votesPerImage > MIN_VOTING_MESSAGE_THRESHOLD) {
            const percent = `${Math.round(positiveResults.percentage)}%`;
            votedMessage = percentVotedMessage.replace('{percent}', `${percent}`);
        }
    }
    const prompt = alternateVotingPrompt || defaultVotingPrompt;
    const votingOptions = options || votingProps?.answers;
    const getAnswers = () => votingOptions?.map((answer) => {
        return {
            ...answer,
            selected: hasVoted ? answer.value === imageVote?.result : false
        };
    });
    const answers = React.useMemo(getAnswers, [
        votingOptions,
        hasVoted,
        imageVote?.result
    ]);
    const throttleOnVoteCast = throttle(({ value }) => onVoteCast({ value, imageId }), 500);
    const memoizedOnVoteCast = React.useCallback(({ value }) => {
        throttleOnVoteCast({ value, imageId });
    }, 
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [imageId, onVoteCast]);
    return (React.createElement(GalleryVotingSlideWrapper, { hasBottomDivider: hasBottomDivider },
        React.createElement(Voting, { ...votingProps, answers: answers, hasVoted: hasVoted, onVoteCast: memoizedOnVoteCast, votedMessage: votedMessage, prompt: prompt })));
};
GalleryVotingSlide.propTypes = {
    alternateVotingPrompt: PropTypes.string,
    defaultVotingPrompt: PropTypes.string,
    hasBottomDivider: PropTypes.bool,
    imageId: PropTypes.string,
    options: PropTypes.object,
    shouldShowPercentVotedMessage: PropTypes.bool,
    votingProps: PropTypes.object
};
GalleryVotingSlide.displayName = 'GalleryVotingSlide';
module.exports = connector(asConfiguredComponent(GalleryVotingSlide, 'GalleryVotingSlide'), {
    keysToSpread: ['pollConfig']
});
//# sourceMappingURL=GalleryVotingSlide.js.map

/***/ }),

/***/ 70497:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const classnames = __webpack_require__(32485);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { connect: connectToStore } = __webpack_require__(67851);
const CNEInterludeEmbed = __webpack_require__(96303);
const Ad = __webpack_require__(19607);
const { PaymentGateway } = __webpack_require__(92807);
const { useOnAdFilled } = __webpack_require__(1184);
const GalleryItem = __webpack_require__(68955);
const GalleryShopViewPage = __webpack_require__(42434);
const ORDERED_VARIATIONS = new Set([
    'ItemOrderedLeft',
    'ItemOrderedCenter',
    'CardOrderedLeft',
    'CardOrderedCenter'
]);
const SlimNewsletterWrapper = __webpack_require__(72159);
/**
 * Depending on whether slideVariation is ordered or not, uses accompanying html tag
 *
 * @param {object} props - React Props
 * @param {string} [props.alternateVotingPrompt] - Alternate voting question
 * @param {Array} props.chunk - Required array of items
 * @param {string} [props.className] - Optional classname
 * @param {number} [props.chunksCount] - Optional count of chunks array
 * @param {string} [props.defaultVotingPrompt] - Default voting question, also checks to enable voting or not
 * @param {Array} [props.dropShipSellers] - seller name in an array
 * @param {Function} [props.getRef] - Method passing from parent to get refs from Child component
 * @param {boolean} [props.inContentChunkIndex] - Chunk index where in-content Ad should be inserted
 * @param {boolean} [props.hasPhotoBookmark] - Optional flag to enable bookmarking a photo
 * @param {boolean} [props.inContentAdItemIndex] - Index of the chunk item that should render an incontent ad
 * @param {number} [props.index] - Optional index of chunk
 * @param {object} [props.interlude] - Optional interlude info
 * @param {boolean} [props.shouldIncludeInterlude] - Optional flag to enable interlude
 * @param {object} [props.newslettersInline] - A list of newsletters for use as slim inline newsletter
 * @param {number} [props.nodeIndexForNewsletterPosition] - slide position to inject a newsletter form
 * @param {boolean} [props.shouldLoadOnScroll] - Optional load Images On user Scroll
 * @param {boolean} [props.showVirtuosoGallery] - Optional boolean to render the virtusos on the gallery
 * @param {boolean} [props.isInLightbox] - Optional prop to scroll to clicked image in listicle view in lightbox
 * @param {boolean} [props.shouldShowCM] - Optional flag to show a CM unit on the first slide in the list
 * @param {boolean} [props.showOfferUrl] - Optional flag to show Offer Url
 * @param {boolean} [props.slideFormat] - Optional flag that determines which gallery slide type to display
 * @param {string} [props.slideVariation] - variation name for GallerySlide
 * @param {boolean}props.isReadViewShopViewEnabled - this is boolean value which helps to show shopView and ReadView
 * @param {string}props.shopTypeView -shopTypeView will be either read or shop
 * @param {boolean} props.hasProduct - boolean value based on whether product is present or not
 * @param {boolean} props.sponsoredProductChunkIndex - Chunk index where sponsored-product Ad should be inserted
 * @param {number} props.sponsorProductIndex - index where sponsor-product should be rendered
 * @param {boolean} [props.newsletterPosition] - Identify where to place the newsletter
 * @param {boolean} [props.isFinalChunkSet] - Identify if this is final chunk of page
 * @param {boolean} [props.shouldEnableCommentsCount] - optional flag to enable comments count
 * @param {boolean} [props.shouldEnableCardLevelBookmark] - optinal flag to enable bookmark for individual gallery Item
 * @param {boolean} [props.shouldEnableBookmarkDrawers] - flag to enable bookmark drawer functionality
 * @param {boolean} [props.shouldHoldImageSpace] - Optional prop, set to true to hold image space based on image aspect ratio
 * @param {boolean} [props.showGallerySlideCaptionOrTitle] - Optional prop, set to true to show the caption OR title within GallerySlideCaption instead of both.
 * @param {boolean} [props.showZoomedImage] - Optional boolean to add a wrapper around responsive image to zoom in on hover
 * @param {boolean} [props.isModalClosed] - Optional boolean to know if modal is closed
 *
 * @returns {Array} array of gallery-chunk ReactElements
 */
const ListWrapper = ({ alternateVotingPrompt, chunk, className, defaultVotingPrompt, dropShipSellers, getRef = () => { }, hasPhotoBookmark, inContentChunkIndex, inContentAdItemIndex, index, isReadViewShopViewEnabled = false, sponsoredProductChunkIndex, sponsorProductIndex, interlude = {}, shouldIncludeInterlude, isModalClosed, hasProduct, newslettersInline, nodeIndexForNewsletterPosition, shouldHoldImageSpace = false, slideFormat, showVirtuosoGallery = false, shouldLoadOnScroll = false, isInLightbox, shouldShowCM, showGallerySlideCaptionOrTitle, showOfferUrl, slideVariation, shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark, shouldEnableCommentsCount, showZoomedImage, shopTypeView }) => {
    const ListType = ORDERED_VARIATIONS.has(slideVariation) ? 'ol' : 'ul';
    const [, productAdClass, onProductAdFilled] = useOnAdFilled();
    const newsletterProps = {
        newsletterType: 'slim-newsletter',
        newsletters: newslettersInline
    };
    const normalGallerySlideView = () => {
        return (React.createElement(React.Fragment, null, chunk.map((item, itemIndex) => {
            let isSponsoredProductSlot = false;
            if (itemIndex === sponsorProductIndex &&
                sponsoredProductChunkIndex === index) {
                isSponsoredProductSlot = true;
            }
            let isInContentSlot = false;
            if (itemIndex === inContentAdItemIndex &&
                inContentChunkIndex === index) {
                isInContentSlot = true;
            }
            const hasNewsletterForm = itemIndex === nodeIndexForNewsletterPosition &&
                newslettersInline?.length >= 1;
            const isLazy = shouldLoadOnScroll
                ? !shouldLoadOnScroll
                : !(index === 0 && itemIndex === 0);
            const isMidwayThroughChunk = itemIndex === Math.floor((chunk.length - 1) / 2);
            // sponsorProductGalleryPosition is relative to entire gallery array, not just one chunk
            return (React.createElement(React.Fragment, { key: item.id || itemIndex },
                newslettersInline && hasNewsletterForm && (React.createElement(SlimNewsletterWrapper, { ...newsletterProps })),
                React.createElement(GalleryItem, { alternateVotingPrompt: alternateVotingPrompt, defaultVotingPrompt: defaultVotingPrompt, totalItemCount: chunk.length, isInLightbox: isInLightbox, shouldHoldImageSpace: shouldHoldImageSpace, getRef: getRef, hasCM: shouldShowCM && itemIndex === 0, showOfferUrl: showOfferUrl, isInContentSlot: isInContentSlot, hasPhotoBookmark: hasPhotoBookmark, interlude: {
                        ...interlude,
                        include: shouldIncludeInterlude
                            ? shouldIncludeInterlude && isMidwayThroughChunk
                            : interlude.include && isMidwayThroughChunk
                    }, slideFormat: slideFormat, item: item, isLazy: showVirtuosoGallery ? !showVirtuosoGallery : isLazy, shouldEnableBookmarkDrawers: shouldEnableBookmarkDrawers, shouldEnableCardLevelBookmark: shouldEnableCardLevelBookmark, shouldEnableCommentsCount: shouldEnableCommentsCount, showGallerySlideCaptionOrTitle: showGallerySlideCaptionOrTitle, showZoomedImage: showZoomedImage, className: classnames('gallery__slides__slide', {
                        'gallery__slides__slide--rca': slideFormat === 'award-list'
                    }), isModalClosed: isModalClosed }),
                isSponsoredProductSlot && (React.createElement("li", { className: classnames('gallery__slides__slide', productAdClass) },
                    React.createElement(PaymentGateway, { group: "ads" },
                        React.createElement(Ad, { position: "sponsor-product", className: classnames('gallery-slide'), onFilled: onProductAdFilled, index: 0 }))))));
        })));
    };
    const shopTypeViewOrReadView = () => {
        if (shopTypeView === 'shop') {
            return (React.createElement(GalleryShopViewPage, { hasImageGrid: true, hasProductPriceColor: true, hasProductNewPriceColor: true, isProductCardName: true, chunk: chunk, dropShipSellers: dropShipSellers }));
        }
        return normalGallerySlideView();
    };
    return (React.createElement(ListType, { className: className }, isReadViewShopViewEnabled && hasProduct
        ? shopTypeViewOrReadView()
        : normalGallerySlideView()));
};
ListWrapper.propTypes = {
    alternateVotingPrompt: PropTypes.string,
    chunk: PropTypes.array.isRequired,
    className: PropTypes.string,
    defaultVotingPrompt: PropTypes.string,
    dropShipSellers: PropTypes.arrayOf(PropTypes.string),
    getRef: PropTypes.func,
    hasPhotoBookmark: PropTypes.bool,
    hasProduct: PropTypes.bool,
    inContentAdItemIndex: PropTypes.number,
    inContentChunkIndex: PropTypes.number,
    index: PropTypes.number,
    interlude: PropTypes.shape({
        ...CNEInterludeEmbed.propTypes,
        include: PropTypes.bool
    }),
    isInLightbox: PropTypes.bool,
    isModalClosed: PropTypes.bool,
    isReadViewShopViewEnabled: PropTypes.bool,
    newslettersInline: PropTypes.array,
    nodeIndexForNewsletterPosition: PropTypes.number,
    shopTypeView: PropTypes.string,
    shouldEnableBookmarkDrawers: PropTypes.bool,
    shouldEnableCardLevelBookmark: PropTypes.bool,
    shouldEnableCommentsCount: PropTypes.bool,
    shouldHoldImageSpace: PropTypes.bool,
    shouldIncludeInterlude: PropTypes.bool,
    shouldLoadOnScroll: PropTypes.bool,
    shouldShowCM: PropTypes.bool,
    showGallerySlideCaptionOrTitle: PropTypes.bool,
    showOfferUrl: PropTypes.bool,
    showVirtuosoGallery: PropTypes.bool,
    showZoomedImage: PropTypes.bool,
    slideFormat: PropTypes.string,
    slideVariation: PropTypes.string.isRequired,
    sponsoredProductChunkIndex: PropTypes.number,
    sponsorProductIndex: PropTypes.number
};
function mapStateToProps(state) {
    return {
        slideVariation: state.componentConfig?.GallerySlide?.variation
    };
}
const ReduxConnectedListWrapper = connectToStore(mapStateToProps)(ListWrapper);
module.exports = ReduxConnectedListWrapper;
//# sourceMappingURL=ListWrapper.js.map

/***/ }),

/***/ 21159:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.jsonmlToReact = void 0;
const { default: JsonmlToReact } = __webpack_require__(1165);
const ButtonGroupCallout = __webpack_require__(62839);
const ExternalLink = __webpack_require__(39832);
/**
 * Return object used by `jsonmltoreact` to render links. Result includes
 * a ReactComponent (type) and the properties it should be rendered with (props)
 *
 * @param {object} props - props set on the link node
 * @returns {object} - Component to be rendered and properties to give it
 */
function mapLinks(props) {
    const { isExternal, ...linkProps } = props;
    return {
        type: isExternal ? ExternalLink : 'a',
        props: linkProps
    };
}
const embeds = {
    'callout:button-group': ButtonGroupCallout
};
const mapInlineEmbeds = (jsonMLAttributes) => ({
    type: embeds[jsonMLAttributes.type],
    props: jsonMLAttributes.props
});
exports.jsonmlToReact = new JsonmlToReact({
    a: mapLinks,
    'inline-embed': mapInlineEmbeds
});
//# sourceMappingURL=helpers.js.map

/***/ }),

/***/ 11869:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.handleSnowplowSearchFilterEvent = void 0;
const { trackSearchFilterEvent } = __webpack_require__(14307);
const handleSnowplowSearchFilterEvent = ({ label, type, subject, index, no_of_results_returned, result_type, content_id, content_title, content_type, setFilters = [], search_keyword } = {}) => {
    const data = {
        ...(label && { label }),
        ...(type && { type }),
        ...(subject && { subject }),
        ...(setFilters.length && { criteria: { filter: setFilters } }),
        ...(index !== undefined && { index }),
        platform: 'verso',
        ...(no_of_results_returned !== null && { no_of_results_returned }),
        ...((content_id || content_title || content_type) && {
            items: [{ content_id, content_title, content_type }]
        }),
        ...(no_of_results_returned !== null && {
            results_content: [{ result_type, no_of_results_returned }]
        }),
        ...(search_keyword && {
            criteria: { search_keyword }
        })
    };
    trackSearchFilterEvent(data);
};
exports.handleSnowplowSearchFilterEvent = handleSnowplowSearchFilterEvent;
//# sourceMappingURL=tracking.js.map

/***/ }),

/***/ 34120:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.imageTransformToPlpCardImage = void 0;
const imageTransformToPlpCardImage = (item) => {
    return {
        altText: item?.image?.altText,
        sources: {
            sm: item?.image?.segmentedSources?.sm
                ? {
                    aspectRatio: '1:1',
                    width: item?.image?.segmentedSources.sm[(item?.image?.segmentedSources?.sm?.length ?? 0) - 1].width,
                    url: item?.image?.segmentedSources.sm[(item?.image?.segmentedSources?.sm?.length ?? 0) - 1].url,
                    srcset: item?.image?.segmentedSources.sm
                        .map((src) => `${src.url} ${src.width}w`)
                        .join(', ')
                }
                : {},
            lg: item?.image?.segmentedSources?.lg
                ? {
                    aspectRatio: '1:1',
                    width: item?.image?.segmentedSources.lg[(item?.image?.segmentedSources?.lg?.length ?? 0) - 1].width,
                    url: item?.image?.segmentedSources.lg[(item?.image?.segmentedSources?.lg?.length ?? 0) - 1].url,
                    srcset: item?.image?.segmentedSources.lg
                        .map((src) => `${src.url} ${src.width}w`)
                        .join(', ')
                }
                : {}
        }
    };
};
exports.imageTransformToPlpCardImage = imageTransformToPlpCardImage;
//# sourceMappingURL=util.js.map

/***/ }),

/***/ 64763:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(92168);
const { BREAKPOINTS } = __webpack_require__(96472);
const { calculateSpacing, minScreen, getColorToken } = __webpack_require__(26865);
const GalleryVotingSlideWrapper = styled.div.withConfig({
    displayName: 'GalleryVotingSlideWrapper'
}) `
  ${({ hasBottomDivider, theme }) => hasBottomDivider &&
    `
    border-bottom: 1px solid ${getColorToken(theme, 'colors.consumption.body.standard.divider')};;
  `};
  margin: 0 0 ${calculateSpacing(5)};
  ${minScreen(BREAKPOINTS.lg)} {
    margin: 0 0 ${calculateSpacing(5)};
  }
`;
module.exports = {
    GalleryVotingSlideWrapper
};
//# sourceMappingURL=voting.styles.js.map

/***/ }),

/***/ 48887:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const isEqual = __webpack_require__(2404);
const PropTypes = __webpack_require__(5556);
const React = __webpack_require__(96540);
const { default: JsonmlToReact } = __webpack_require__(1165);
const CNEInterludeEmbed = __webpack_require__(96303);
const { shouldRenderNothing } = __webpack_require__(29670);
const { connectDomain } = __webpack_require__(57744);
const connectPayment = connectDomain('payment');
const connectFeatureFlags = connectDomain('featureFlags');
const Row = __webpack_require__(66657);
const StickyBox = __webpack_require__(28433);
const { getInterludePosition, reviewStrategies } = __webpack_require__(15316);
// embeds
const Ad = __webpack_require__(19607);
const BlockquoteEmbed = __webpack_require__(57885);
const { PaymentGateway } = __webpack_require__(92807);
const SidebarHeading = __webpack_require__(36382);
const mapInlineEmbeds = __webpack_require__(51009);
// other body components
const ExternalLink = __webpack_require__(39832);
const { HomepageChannelBody, HomepageSummaryListAside } = __webpack_require__(94631);
function mapSidebarHeadings(jsonMLAttributes = {}) {
    if (jsonMLAttributes.type === 'sidebar:heading') {
        return { type: SidebarHeading, props: jsonMLAttributes.props };
    }
    return jsonMLAttributes;
}
/**
 * Return object used by `jsonmltoreact` to render links. Result includes
 * a ReactComponent (type) and the properties it should be rendered with (props)
 *
 * @param {object} props - props set on the link node
 * @param {boolean|undefined} props.isExternal - true if opens an external link
 * @param {object} props.linkProps - link data produced for the client
 * @returns {object} - Component to be rendered and properties to give it
 */
function mapLinks(props) {
    const { isExternal, ...linkProps } = props;
    return {
        type: isExternal ? ExternalLink : 'a',
        props: linkProps
    };
}
// Create instance with custom converters
const jsonmlToReact = new JsonmlToReact({
    a: mapLinks,
    h2: mapSidebarHeadings,
    'inline-embed': mapInlineEmbeds,
    blockquote: ({ props }) => ({ type: BlockquoteEmbed, props })
});
/**
 * Returns true if node is a jsonml element
 *
 * @param {Array} node - jsonml node
 * @returns {bool} - should the node be a jsonml element
 */
function isJsonMLElement(node) {
    return Array.isArray(node) && typeof node[0] === 'string';
}
/**
 * Returns jsonML Children
 *
 * @param {Array} node - jsonml node
 * @returns {object} - jsonml object
 */
function getJsonMLChildren(node) {
    return isJsonMLElement(node) &&
        node[1] &&
        typeof node[1] === 'object' &&
        !Array.isArray(node[1])
        ? node.slice(2)
        : node.slice(1);
}
const getInterludeJsonML = ({ brand, interludeOverrideId, playerBase, isRailEligible, isTitleLinkDisabled }) => {
    return [
        'inline-embed',
        {
            type: 'cneinterlude',
            props: {
                brand,
                interludeOverrideId,
                playerBase,
                isRailEligible,
                isRightRail: false,
                isTitleLinkDisabled
            }
        }
    ];
};
/**
 * Determines if a node should be wrapped with a full-bleed content wrapper component
 *
 * @param {Array} node - Jsonml node
 * @returns {bool} - should the node be considered full-bleed
 */
function isNodeFullSize(node) {
    const tagName = node[0];
    const props = node[1] || {};
    const isLargeFeatureCallout = tagName === 'inline-embed' && props.type === 'callout:feature-large';
    const isMediumFeatureCallout = tagName === 'inline-embed' && props.type === 'callout:feature-medium';
    const isMidContentAd = tagName === 'ad';
    return isLargeFeatureCallout || isMediumFeatureCallout || isMidContentAd;
}
// avoids eslint warnings and constructs key in consistent fashion
// there isn't much to key on with the JSONML other than index
function getKey(type, index) {
    return `${type}-${index}`;
}
/**
 * Add sticky rail components in between midcontent ads.
 * Chunk jsonml nodes so full-bleed midcontent ads can be rendered between groups of content nodes.
 */
class Chunker {
    /**
     * Create a chunker with specified rail content and content wrappers
     *
     * @param {Function | object} GeneralContentWrapper - Component to wrap groups of content nodes
     * @param {Function | object} FullBleedContentWrapper - Component to wrap full-bleed content nodes
     * @param {Function} RailContent - Component to be rendered on the right rail
     */
    constructor({ GeneralContentWrapper = () => null, FullBleedContentWrapper = () => null, RailContent = () => null, payment, featureFlags, interlude, shouldUsePaddingTopForHomePageBody }) {
        this.interludeProps = interlude;
        this.interludePosition =
            interlude?.strategy && getInterludePosition(interlude, reviewStrategies);
        this.GeneralContentWrapper = GeneralContentWrapper;
        this.FullBleedContentWrapper = FullBleedContentWrapper;
        this.shouldUsePaddingTopForHomePageBody =
            shouldUsePaddingTopForHomePageBody;
        this.RailContent = RailContent;
        this.chunkCount = 0;
        this.shouldRenderMidContent = !shouldRenderNothing('ads', payment, featureFlags);
    }
    /**
     * Wrap a group of nodes before a node of type 'ad' is encountered, so full-bleed ad components are rendered between groups of nodes
     *
     * @param {Array} smallGroup - Accumulated nodes to be grouped with a wrapper component
     * @param {Array} containers - Group containers of the content
     * @param {number} index - index of jsonml child, used for unique keying of react components
     * @returns {Array} - All node containers of the content
     */
    closeSmallGroup(smallGroup, containers, index) {
        let concat_containers = containers;
        if (smallGroup.length > 0) {
            ++this.chunkCount;
            const HomepageBodyWrapperGrid = this.GeneralContentWrapper;
            concat_containers = [
                ...containers,
                React.createElement(HomepageBodyWrapperGrid, { shouldUsePaddingTopForHomePageBody: this.shouldUsePaddingTopForHomePageBody, key: getKey('small-group', index) },
                    React.createElement(HomepageChannelBody, { className: "body__container article__body", shouldEnableDataJourneyHook: false }, jsonmlToReact.convert([
                        'div',
                        { className: 'body__inner-container' },
                        ...smallGroup
                    ])),
                    React.createElement(HomepageSummaryListAside, null,
                        React.createElement(StickyBox, null, this.RailContent(this.chunkCount))))
            ];
        }
        return concat_containers;
    }
    /**
     * Wrap a node with a full-bleed container instead of adding it to a wrapped group of nodes
     *
     * @param {Array} node - jsonml node to wrap
     * @param {Array} containers - Group containers of the content
     * @param {number} index - index of jsonml child, used for unique keying of react components
     * @returns {Array} - All node containers of the content
     */
    wrapInFullSizeContainer(node, containers, index) {
        const HomepageBodyWrapper = this.FullBleedContentWrapper;
        return [
            ...containers,
            React.createElement(HomepageBodyWrapper, { key: getKey('full', index) },
                React.createElement(HomepageChannelBody, { className: "channel--body body__container", shouldEnableDataJourneyHook: false }, jsonmlToReact.convert(node)))
        ];
    }
    /**
     * Chunk jsonml content with containers
     *
     * @param node - Jsonml node
     * @returns {Array} - All node containers of the content
     */
    visit(node) {
        const children = getJsonMLChildren(node);
        let containers = [];
        let smallGroup = [];
        this.isSingleChunk = !children.some((node) => node[0] === 'ad');
        this.finalAdSet = false;
        children.forEach((node, index) => {
            const [nodeTagName] = node;
            if (nodeTagName === 'ad') {
                if (this.shouldRenderMidContent) {
                    containers = this.closeSmallGroup(smallGroup, containers, index);
                    smallGroup = [];
                    containers = [
                        ...containers,
                        React.createElement(Row, { className: "full-bleed-ad row-mid-content-ad", key: getKey('ad', index) },
                            React.createElement(PaymentGateway, { group: "ads" },
                                React.createElement(Ad, { position: "mid-content", shouldDisplayLabel: true, shouldHoldSpace: true })))
                    ];
                }
                // else we don't render the 'ad' tag at all.
            }
            else if (isNodeFullSize(node)) {
                // We only have 1 column so these can be full size
                containers = this.closeSmallGroup(smallGroup, containers, index);
                smallGroup = [];
                // Note: order is important! (full-size must come after small container closed)
                containers = this.wrapInFullSizeContainer(node, containers, index);
            }
            else {
                smallGroup = [...smallGroup, node];
            }
            if (this.interludePosition === index) {
                if (isNodeFullSize(node) || nodeTagName === 'ad') {
                    containers = [
                        ...containers,
                        React.createElement(CNEInterludeEmbed, { ...this.interludeProps, isRightRail: false })
                    ];
                }
                else {
                    const interludeJsonML = getInterludeJsonML({
                        ...this.interludeProps,
                        isRightRail: false
                    });
                    smallGroup = [...smallGroup, interludeJsonML];
                }
            }
        });
        containers = this.closeSmallGroup(smallGroup, containers, 'final');
        this.finalAdSet = true;
        return containers;
    }
}
/**
 * Body component renders body formated as JsonML as react components
 *
 * @param {Function | object} FullBleedContentWrapper - full bleed wrapper component
 * @param {Function | object} GeneralContentWrapper - wrapper component for non-full-bleed content
 * @param {Function} RailContent - component to render in the right rail
 * @param {Array} jsonml - jsonml content
 * @param {object} payment - connected payment
 * @param {object} featureFlags - connected feature flags
 * @param {bool} shouldUsePaddingTopForHomePageBody - optional boolean to give padding top for body
 *
 * @returns {ReactElement} <div>
 */
const Chunks = ({ FullBleedContentWrapper, GeneralContentWrapper, RailContent, jsonml, payment, featureFlags, interlude, shouldUsePaddingTopForHomePageBody }) => {
    const chunker = new Chunker({
        FullBleedContentWrapper,
        GeneralContentWrapper,
        RailContent,
        jsonml,
        payment,
        featureFlags,
        interlude,
        shouldUsePaddingTopForHomePageBody
    });
    return chunker.visit(jsonml);
};
Chunks.propTypes = {
    className: PropTypes.string,
    featureFlags: PropTypes.object,
    FullBleedContentWrapper: PropTypes.oneOfType([
        PropTypes.func,
        PropTypes.object
    ]),
    GeneralContentWrapper: PropTypes.oneOfType([
        PropTypes.func,
        PropTypes.object
    ]),
    interlude: PropTypes.object,
    jsonml: PropTypes.array.isRequired,
    payment: PropTypes.object,
    RailContent: PropTypes.func
};
module.exports = React.memo(connectPayment(connectFeatureFlags(Chunks)), isEqual);
module.exports.Chunks = Chunks;
//# sourceMappingURL=Chunks.js.map

/***/ }),

/***/ 94631:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { calculateSpacing, minScreen, getLinkStyles, getTypographyStyles, getColorToken, getColorStyles } = __webpack_require__(26865);
const { getSectionSpacingStyling } = __webpack_require__(16800);
const SectionHeader = __webpack_require__(95291);
const Body = __webpack_require__(22652);
const { getPattern } = __webpack_require__(30);
const { INTERACTIVE } = __webpack_require__(96472);
const { BREAKPOINTS } = __webpack_require__(96472);
const { EventsListWrapper } = __webpack_require__(66472);
const { BasePageMainContent } = __webpack_require__(4081);
const { SectionHeaderSubhed } = __webpack_require__(57221);
const BasePage = __webpack_require__(30543);
const { default: DynamicBasePage } = __webpack_require__(18284);
const { asConfiguredComponent } = __webpack_require__(12892);
const { Disclaimer } = __webpack_require__(74307);
const { SectionTitleHed } = __webpack_require__(33500);
const { BundleBodyContainer } = __webpack_require__(62077);
const { MultiPackageContainer, NewsletterWrapper } = __webpack_require__(67275);
const { SummaryCollectionGridDek } = __webpack_require__(4534);
const { SummaryCollageThreeWrapper, SummaryCollageThreeItemWrapper } = __webpack_require__(85095);
const { NewsletterSubscribeFormWrapper, NewsletterSubscribeFormDek, NewsletterSubscribeFormDisclaimer, NewsletterSubscribeFormValidation, NewsletterSubscribeFormInputsWrapper, NewsletterSubscribeFormHedDekWrapper } = __webpack_require__(69817);
const { ProductEmbedWrapper, ProductEmbedContent, ProductEmbedHed, ProductEmbedCTA } = __webpack_require__(53985);
const { ProductOfferListWrapper } = __webpack_require__(94037);
const { ProductOfferCtaBlock, ProductOfferWrapper, ProductOfferPriceBlock } = __webpack_require__(61366);
const { UtilityValidationDescriptionWrapper } = __webpack_require__(69195);
const { ButtonLabel } = __webpack_require__(18974);
const { universalGridCore } = __webpack_require__(89085);
const { applyGridSpacing } = __webpack_require__(1123);
const Grid = __webpack_require__(86659);
const { RowWrapper } = __webpack_require__(20139);
const SectionTitle = __webpack_require__(35864);
const BreadcrumbTrail = __webpack_require__(6538);
const { BreadcrumbTrailItem } = __webpack_require__(61670);
const HomepageHiddenContent = styled('h1').withConfig({
    displayName: 'HomepageHiddenContent'
}) `
  display: none;
`;
const HomepageHeader = styled(SectionHeader).withConfig({
    displayName: 'HomepageHeader'
}) `
  .news-feed-row {
    /* If homepage header and news feed is first section bypass header styles */
    .navigation--section {
      margin-top: -${calculateSpacing(5)};
      border-top: 0;
    }
  }
`;
const HomepageSubHeader = styled(SectionHeader).withConfig({
    displayName: 'HomepageHeader'
}) ``;
const HomePageDisclaimerWrapper = styled.div.withConfig({
    displayName: 'HomePageDisclaimerWrapper'
}) `
  padding: 1rem;

  .disclaimer {
    padding: 0;
  }
  ${({ hasGridFourColumnsLayout, hasDisclaimerBackground, theme }) => hasGridFourColumnsLayout &&
    css `
      ${hasDisclaimerBackground
        ? getColorStyles(theme, 'background-color', 'colors.background.light')
        : null};
      margin-top: ${calculateSpacing(-7)};
      padding-bottom: ${calculateSpacing(3)};
      ${minScreen(BREAKPOINTS.md)} {
        margin-top: ${calculateSpacing(-5)};
      }
    `}
`;
const HomePageDisclaimer = styled(asConfiguredComponent(Disclaimer.TextCenterNoTopRule, 'Disclaimer')).withConfig({
    displayName: 'HomePageDisclaimer'
}) `
  grid-column: 1 / -1;
  justify-content: center;
  font-style: italic;

  p {
    ${getColorToken('colors.interactive.base.black')};
    ${getTypographyStyles('typography.definitions.globalEditorial.context-secondary')};
    padding: 0;
    line-height: 1.125rem;
  }

  ${minScreen(BREAKPOINTS.md)} {
    grid-column: 3 / span 8;
  }
`;
const HomePageDisclaimerBorder = styled.div.withConfig({
    displayName: 'HomePageDisclaimerBorder'
}) `
  margin: ${calculateSpacing(4)} ${calculateSpacing(2)} ${calculateSpacing(1)};
  border-bottom: 1px solid
    ${getColorToken('colors.discovery.body.white.divider')};

  @media (min-width: 0) and (max-width: ${BREAKPOINTS.md}) {
    margin: ${calculateSpacing(4)} ${calculateSpacing(1)} ${calculateSpacing(1)};
  }
`;
const HomepageChannelBody = styled(Body).withConfig({
    displayName: 'HomepageChannelBody'
}) `
  grid-column: 1/-1;
  margin-bottom: 1rem;

  ${minScreen(BREAKPOINTS.md)} {
    grid-column: 3/11;
  }
`;
const HomepageSummaryListAside = styled('aside').withConfig({
    displayName: 'HomepageSummaryListAside'
}) `
  height: 100%;
`;
const productCarouselUlStyle = `
  ul {
    position: initial;
    z-index: 2;
    overflow-x: auto;
    li {
      @media (min-width: 0) and (max-width: ${BREAKPOINTS.md}) {
        margin: 0 10px 0 10px;
      }
      .product__carousel__card {
        margin-bottom: 0;
        width: 100%;
        height: 100%;
        ${ProductEmbedContent} {
          ${ProductEmbedHed} {
            overflow: hidden;
            ${ProductOfferListWrapper} > ${ProductOfferWrapper} {
              ${ProductOfferCtaBlock} > a {
                ${ButtonLabel} {
                  ${getTypographyStyles('typography.definitions.foundation.link-primary')};
                }
              }
            }
          }
          ${ProductEmbedCTA} {
            margin-right: 0;
            margin-left: 0;
            ${minScreen(BREAKPOINTS.md)} {
              margin-right: 0;
              margin-left: 0;
            }
          }
        }
      }
    }
    @media (min-width: 0) and (max-width: ${BREAKPOINTS.md}) {
      li:first-of-type {
        margin: 0 10px 0 0;
      }
      li:last-of-type {
        margin: 0 0 0 10px;
      }
      li {
        margin: 0 10px 0 10px;
      }
    }
  }
`;
const homepageWrapperCss = css `
  .homepage__half-column-row--with-border {
    ${minScreen(BREAKPOINTS.lg)} {
      &:not(:last-of-type) {
        border-right: 1px solid
          ${getColorToken('colors.discovery.lead.secondary.divider')};
      }
      /* catch-all to prevent a right border from showing
       if two half columns sit beside each other */
      + .homepage__half-column-row--with-border {
        border-right: none;
      }
    }
  }

  .homepage__native-ad .ad--promo .ad__slot--promo {
    display: block;
  }

  .homepage__plp-filterable-row {
    background: ${getColorToken('colors.discovery.body.light.background')};
  }

  .homepage__newsletter-row {
    background: ${getColorToken('colors.discovery.body.light.background')};
    ${({ hasFullBleedBackground, theme }) => !hasFullBleedBackground &&
    `
     background: none;
     ${({ theme, hasConsistentSpacing }) => {
        if (hasConsistentSpacing &&
            getSectionSpacingStyling(theme, 'gap-md') !== '0px') {
            return `margin-bottom: 0px;`;
        }
        return `margin-top: ${calculateSpacing(8)};`;
    }};
     ${NewsletterWrapper} {
       background-color: ${getColorToken(theme, 'colors.consumption.body.special.bg-card')};
        ${minScreen(BREAKPOINTS.lg)} {
          ${NewsletterSubscribeFormWrapper} {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            ${NewsletterSubscribeFormHedDekWrapper} {
              grid-column: 3 / span 8;
            }
            ${NewsletterSubscribeFormInputsWrapper} {
              grid-column: 4 / span 6;
            }
          }
        }
       }
   `};

    ${NewsletterSubscribeFormWrapper} {
      ${NewsletterSubscribeFormInputsWrapper} {
        ${NewsletterSubscribeFormValidation} {
          ${UtilityValidationDescriptionWrapper} {
            ${({ hideErrorTextPadding }) => hideErrorTextPadding &&
    ` padding: 0;
         `};
          }
          ${NewsletterSubscribeFormDisclaimer} {
            ${({ isNewsletterDisclaimerCenterAligned }) => isNewsletterDisclaimerCenterAligned &&
    `
             text-align: center;
           `};
            ${({ shouldOverrideColorToken, theme }) => shouldOverrideColorToken &&
    `
             color: ${getColorToken(theme, 'colors.discovery.body.light.description')};
             a {
               color: ${getColorToken(theme, 'colors.discovery.body.light.description')};
             }
           `};
          }
        }
      }
    }
  }

  .homepage__related-row {
    background-color: ${getColorToken('colors.discovery.body.light.background')};
  }

  .newletter-container-layout {
    display: grid;
    ${({ theme, backgroundColorSettingForNewsletter }) => backgroundColorSettingForNewsletter
    ? `background-color: ${getColorToken(theme, `colors.discovery.body.${backgroundColorSettingForNewsletter}.background`)}`
    : `${getColorToken('colors.background.light')}`};

    .newsletter-subscribe-form {
      grid-column: 1 / span 6;
      margin: 0 auto;
    }
  }

  .homepage__half-column-row {
    &:not(:last-of-type) {
      ${minScreen(BREAKPOINTS.lg)} {
        ${SectionTitleHed} {
          ${getTypographyStyles('typography.definitions.discovery.subhed-section-secondary')};
        }
        width: 50%;
        max-width: ${calculateSpacing(100, 'px')};
      }

      > .grid {
        ${minScreen(BREAKPOINTS.lg)} {
          padding-right: var(--grid-gap);
        }
      }
    }
  }

  ${EventsListWrapper} {
    background: transparent;

    .recirc-list.recirc-list--text-overlay {
      margin-top: 0;
    }
  }

  ${({ theme }) => getPattern(theme, 'main-background')}
  .ad__slot--hero .cns-ads-stage {
    ${({ shouldHidePaddingBottom }) => !shouldHidePaddingBottom && `padding-bottom: 0;`}
  }

  ${SectionHeaderSubhed},
  ${SummaryCollectionGridDek} {
    a {
      ${({ theme }) => getLinkStyles(theme, 'colors.consumption.body.standard.link', 'colors.consumption.body.standard.link-hover')};
      transition: color ${INTERACTIVE.timingLinkDefault} ease;
    }
    text-align: center;
  }
  ${SectionHeaderSubhed} {
    padding-right: ${({ shouldHideSidePadding }) => shouldHideSidePadding ? 0 : calculateSpacing(3)};
    padding-left: ${({ shouldHideSidePadding }) => shouldHideSidePadding ? 0 : calculateSpacing(3)};
  }
  ${NewsletterSubscribeFormWrapper} {
    ${NewsletterSubscribeFormInputsWrapper} {
      text-align: left;
    }
    grid-column: 1 / -1;

    ${minScreen(BREAKPOINTS.md)} {
      grid-column: 3 / span 8;
    }

    ${minScreen(BREAKPOINTS.lg)} {
      grid-column: 4 / span 6;
    }
  }

  .newsletter-subscribe-form__hed {
    margin-top: 0;
    margin-bottom: ${calculateSpacing(2)};
    ${({ shouldOverrideColorToken }) => shouldOverrideColorToken &&
    `
 color: ${getColorToken('colors.discovery.body.light.heading')};`};
    ${minScreen(BREAKPOINTS.md)} {
      margin-bottom: ${calculateSpacing(2)};
    }
  }
  ${NewsletterSubscribeFormDek} {
    margin-top: 0;
    margin-bottom: ${calculateSpacing(2)};
    ${({ shouldOverrideColorToken, theme }) => shouldOverrideColorToken &&
    `
 color: ${getColorToken(theme, 'colors.discovery.body.light.description')};
  a {
   color: ${getColorToken(theme, 'colors.discovery.body.light.description')};
 }`};

    ${minScreen(BREAKPOINTS.md)} {
      margin-bottom: ${calculateSpacing(4)};
    }
  }
  ${BasePageMainContent} {
    &::before {
      display: block;
      ${({ shouldHidePadding }) => !shouldHidePadding && `height: ${calculateSpacing(1, 'px')};`}
      content: '';
    }

    .channelfilter-wrapper {
      grid-template-columns: 1fr;
    }
    ${MultiPackageContainer} {
      > .product__list {
        margin-right: ${calculateSpacing(7)};
        margin-left: ${calculateSpacing(7)};
        @media (min-width: 0) and (max-width: ${BREAKPOINTS.md}) {
          margin-right: ${calculateSpacing(3)};
          margin-left: ${calculateSpacing(3)};
        }

        .callout--group {
          margin: auto;
          > ${ProductEmbedWrapper} {
            ${ProductEmbedContent} > ${ProductOfferListWrapper} {
              ${ProductOfferWrapper} > ${ProductOfferCtaBlock} {
                a > ${ButtonLabel} {
                  ${getTypographyStyles('typography.definitions.foundation.link-primary')};
                }
              }
            }
          }
        }
      }

      .cm-unit-row {
        margin-bottom: ${calculateSpacing(2)};

        ${({ hasEvenSpacing }) => hasEvenSpacing &&
    css `
            margin-top: ${calculateSpacing(6)};
            margin-bottom: 0;
            ${minScreen(BREAKPOINTS.md)} {
              margin-top: ${calculateSpacing(7)};
              margin-bottom: 0;
            }
          `}

        .consumer-marketing-unit {
          grid-column: 1 / -1;
          border-top: 1px solid
            ${getColorToken('colors.discovery.body.white.divider')};
          padding-top: ${calculateSpacing(2)};

          ${minScreen(BREAKPOINTS.md)} {
            margin-top: ${calculateSpacing(2)};
          }
        }
      }

      > .product__carousel {
        max-width: 1600px;

        div {
          > button.carousel-control-button--back {
            box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.15);
          }

          > button.carousel-control-button--forward {
            box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.15);
          }
        }

        ${productCarouselUlStyle}
      }

      > div > div[data-testid='SummaryRiverWrapper'] {
        section[data-testid='SummaryRiverSection'] .summary-item--bundle {
          grid-column-gap: var(--grid-gap);
          margin: 0;
        }
      }
    }

    ${({ hasEvenSpacing }) => hasEvenSpacing &&
    css `
        ~ ${RowWrapper}:not(:empty) {
          margin-top: ${calculateSpacing(6)};
          ${minScreen(BREAKPOINTS.md)} {
            margin-top: ${calculateSpacing(7)};
          }
        }
      `}
  }

  .summary-item--bundle {
    .summary-item__content {
      @media (min-width: ${BREAKPOINTS.sm}) {
        width: auto;
      }
      @media (min-width: ${BREAKPOINTS.md}) {
        padding-right: 0;
        padding-left: 0;
      }

      @media (min-width: ${BREAKPOINTS.md}) {
        margin: 0;
      }
    }

    .summary-item__hed,
    .summary-item__byline {
      @media (min-width: ${BREAKPOINTS.md}) {
        margin: 0;
      }
    }
  }

  .summary-collage-five {
    .summary-item--bundle {
      @media (min-width: ${BREAKPOINTS.md}) {
        .summary-item__hed {
          margin-bottom: ${calculateSpacing(2)};
          width: unset;
        }

        .summary-item__hed--no-margin-bottom {
          margin-bottom: 0;
          width: unset;
        }
      }
    }
  }

  .summary-collection-grid--four-columns,
  .summary-collage-one,
  ${SummaryCollageThreeWrapper} ${SummaryCollageThreeItemWrapper}:first-child {
    .summary-item__image {
      display: block;

      &.responsive-asset {
        margin-right: 0;
        margin-left: 0;
      }

      @media (min-width: ${BREAKPOINTS.md}) {
        margin-right: 0;
        margin-left: 0;
      }
    }

    .responsive-clip {
      margin-right: 0;
      margin-left: 0;
    }
  }

  .ad-container.ad-container-reduced-margin {
    .ad--mid-content {
      @media (min-width: ${BREAKPOINTS.md}) {
        margin-bottom: ${calculateSpacing(2)};
        padding: 0 0 0 0;
      }
    }
  }

  .ad-container {
    .ad--mid-content {
      margin-bottom: ${calculateSpacing(2)};
      padding: 0 0 0 0;
    }
  }

  .ad-container.ad-container-reduced-margin {
    .ad--mid-content-with-padding {
      @media (min-width: ${BREAKPOINTS.md}) {
        padding: 0 0 ${calculateSpacing(2)} 0;
      }
    }
  }

  .ticker-view--has-special-theme {
    background-color: ${({ theme }) => getColorToken(theme, 'colors.consumption.body.special.bg-photo')};
  }

  ${({ shouldShowFooterAdPadding }) => !shouldShowFooterAdPadding &&
    `.cns-ads-slot-type-footer {
  padding: 0;
}`}

  ${ProductEmbedContent} {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
  ${ProductOfferPriceBlock} {
    justify-content: left;
    margin-left: 0;
  }

  .footer-toggle-chip-links {
    padding-bottom: 30px;

    .section-header__container--minimal-padding {
      padding: ${calculateSpacing(2)} 0 0;
    }
  }

  ${({ hasBackground, theme }) => hasBackground && theme && getPattern(theme, 'page-background')};

  .plp-storefornt_breadcrumb {
    ${BreadcrumbTrailItem} {
      text-transform: capitalize;

      &:last-of-type {
        a {
          ${({ theme }) => getColorStyles(theme, 'color', 'colors.interactive.base.black')};
        }
      }
    }
  }
`;
const DynamicHomepageWrapper = styled(DynamicBasePage).withConfig({
    displayName: 'HomepageWrapper'
}) `
  ${homepageWrapperCss}
`;
const HomepageWrapper = styled(BasePage).withConfig({
    displayName: 'HomepageWrapper'
}) `
  ${homepageWrapperCss}
`;
const HomepageBodyWrapperGrid = styled.div.withConfig({
    displayName: 'HomepageBodyWrapperGrid'
}) `
  ${universalGridCore()}
  ${applyGridSpacing('padding')}
`;
const HomePageGridNarrowContentWithWideAdRail = styled(Grid.NarrowContentWithWideAdRail).withConfig({
    displayName: 'HomePageGridNarrowContentWithWideAdRail'
}) `
  ${({ shouldUsePaddingTopForHomePageBody }) => shouldUsePaddingTopForHomePageBody &&
    `padding-top: ${calculateSpacing(4)};
`}
`;
const HomepageBundleBody = styled.div.withConfig({
    displayName: 'HomepageBundleBody'
}) `
  ${BundleBodyContainer} {
    margin-top: ${calculateSpacing(5)};
    margin-bottom: ${calculateSpacing(5)};

    @media (min-width: ${BREAKPOINTS.lg}) {
      margin-top: ${calculateSpacing(6)};
      margin-bottom: ${calculateSpacing(6)};
    }

    p:first-child {
      margin-top: 0;
      padding-top: 0;
      @media (min-width: ${BREAKPOINTS.lg}) {
        padding-top: 0;
      }
    }

    p:last-child {
      margin-bottom: 0;
    }
  }
`;
const HomepageSectionTitle = styled(SectionTitle.IconAbove).withConfig({
    displayName: 'HomepageSectionTitle'
}) ``;
const BreadcrumbTrailComponent = styled(BreadcrumbTrail).withConfig({
    displayName: 'BreadcrumbTrailComponent'
}) ``;
BreadcrumbTrailItem.defaultProps = {
    colorToken: 'colors.interactive.base.deemphasized',
    typeIdentity: 'typography.definitions.utility.input-core'
};
module.exports = {
    HomepageWrapper,
    HomepageHiddenContent,
    HomepageHeader,
    HomepageSubHeader,
    HomepageChannelBody,
    HomepageSummaryListAside,
    HomepageBodyWrapperGrid,
    HomePageDisclaimerWrapper,
    HomePageDisclaimer,
    HomePageDisclaimerBorder,
    HomePageGridNarrowContentWithWideAdRail,
    HomepageBundleBody,
    HomepageSectionTitle,
    BreadcrumbTrailComponent,
    DynamicHomepageWrapper
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 23273:
/***/ ((module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.areArraysEqual = exports.getSearchInputForApiCall = exports.processSearchTextAndFilters = exports.getMatchingSeasonFiltersDetails = exports.getSeasonYearListFromSearchText = exports.removeDuplicateFilters = exports.removeFilterLabelsFromText = exports.getMatchingSeasonFilters = exports.getMatchingFilters = exports.snowplowDataRestructure = exports.getAllFilterValues = exports.fetchImages = void 0;
const URL = '/fashion-shows/image-archive';
const SUFFIX_TO_URL = '&format=json';
const addParamsToUrl = (url, suffixToUrl, params) => {
    const searchParams = new URLSearchParams();
    Object.keys(params).forEach((key) => {
        const value = params[key];
        if (value !== undefined && value !== null) {
            searchParams.set(key, value);
        }
    });
    return `${url}?${searchParams.toString()}${suffixToUrl}`;
};
const fetchImages = async ({ pageNumber, searchInput, filters }) => {
    let images = [];
    let availableFilters;
    let unavailableFilters;
    let totalImagesCount;
    let statusCode = null;
    let fetchError = null;
    try {
        const fetchUri = addParamsToUrl(URL, SUFFIX_TO_URL, {
            page: pageNumber,
            ...(searchInput && { query: JSON.stringify(searchInput) }),
            filter: JSON.stringify(filters)
        });
        const response = await fetch(fetchUri);
        const responseJson = await response.json();
        availableFilters =
            responseJson.latestRunwayImagesContent.availableFilters || {};
        unavailableFilters =
            responseJson.latestRunwayImagesContent.unavailableFilters || {};
        totalImagesCount =
            responseJson.latestRunwayImagesContent.totalImagesCount || 0;
        images = responseJson.latestRunwayImagesContent.fashionMomentsImages || [];
        statusCode = response.status;
    }
    catch (error) {
        fetchError = {
            message: 'Something went wrong. Refresh the page to try again.'
        };
        console.error(`Error encountered retrieving image archive. ${error}, HTTP Response Code: ${statusCode}`);
    }
    return {
        images,
        availableFilters,
        unavailableFilters,
        totalImagesCount,
        statusCode,
        fetchError
    };
};
exports.fetchImages = fetchImages;
/*
** getAllFilterValues **
* returns filters object by categorizing by dropdownName
 {
   brandName: [...],
   annualSeasonCode: [...],
   seasonType: [...],
   location: [...]
 }
*/
const getAllFilterValues = (filters) => {
    const allFilterValues = filters.reduce((res, obj) => {
        const key = obj.dropdownName;
        if (!res[key]) {
            res[key] = [];
        }
        res[key].push(obj.value);
        return res;
    }, {});
    return allFilterValues;
};
exports.getAllFilterValues = getAllFilterValues;
const snowplowDataRestructure = (arr) => {
    return arr.map((item) => ({
        name: item.dropdownName,
        label: item.value
    }));
};
exports.snowplowDataRestructure = snowplowDataRestructure;
/**
 * Normalizes a string by converting to lowercase and removing diacritics
 * @param {string|number} str - The string or number to normalize
 * @returns {string} - The normalized string
 */
const normalizeString = (str) => {
    if (str === null || str === undefined || !String(str))
        return '';
    return (String(str)
        .toLowerCase()
        .normalize('NFD')
        // remove diacritics
        .replace(/[\u0300-\u036f]/g, '')
        // Handle specific Nordic characters that don't normalize properly
        .replace(/ø/g, 'o')
        // Handle apostrophes: remove them so "l'agence" becomes "lagence"
        .replace(/['']/g, '')
        // Replace curly quotes with straight apostrophe
        .replace(/[’‘]/g, ' ')
        // Normalize separators: convert &, +, =, /, and other separators to spaces
        .replace(/[&+=/]/g, ' ')
        // Clean up multiple spaces
        .replace(/\s+/g, ' ')
        .trim());
};
/**
 * Escapes special characters in a string to make it safe for use in a regular expression pattern
 * @param {string} str - The string to escape for regex use
 * @returns {string} - The string with regex special characters escaped
 */
const escapeStringForRegex = (str) => str.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
/**
 * Creates a regex pattern that matches a word as a complete word (not as part of another word)
 * Ignores punctuation directly before/after the word
 * @param {string} word - The word to match as a whole word
 * @returns {RegExp} - A regex that matches the word only when it appears as a complete word
 */
const createCompleteWordMatchPattern = (word) => {
    return new RegExp(`(^|\\s|[^\\w])${escapeStringForRegex(word)}(\\s|[^\\w]|$)`, 'gi');
};
/**
 * Helper function to split text into words, filtering out empty strings
 * @param {string} text - The text to split
 * @returns {Array<string>} - Array of non-empty words
 */
const getWordsFromText = (text) => {
    return text.split(/\s+/).filter((word) => word.length > 0);
};
/**
 * Helper function to remove separators from brand label
 * @param {string} brandLabel - The brand label to process
 * @returns {string} - Brand label with periods, spaces, and hyphens removed
 */
const removeBrandSeparators = (brandLabel) => {
    return brandLabel.replace(/[.\s-]/g, '');
};
/**
 * Checks if a spaced-out input matches a separated brand name (periods, hyphens, spaces)
 * @param {string} input - The input string (e.g., "a m g" or "a cold wall")
 * @param {string} brandLabel - The brand label (e.g., "A.M.G" or "A-Cold-Wall")
 * @returns {boolean} - True if the spaced input matches the brand
 */
const matchesIgnoringSeparators = (input, brandLabel) => {
    const normalizedInput = normalizeString(input).replace(/\s+/g, '');
    const normalizedBrand = removeBrandSeparators(normalizeString(brandLabel));
    return normalizedInput === normalizedBrand;
};
/**
 * Checks if a filter's label exists as a whole word in the normalized input
 * @param {object} filter - The filter object to check
 * @param {string} normalizedInput - The normalized input string to match against
 * @returns {boolean} - True if the filter matches, false otherwise
 */
const isFilterMatchingInput = (filter, normalizedInput) => {
    if (!filter.label)
        return false;
    const normalizedLabel = normalizeString(filter.label);
    // Check for exact word match first
    if (createCompleteWordMatchPattern(normalizedLabel).test(normalizedInput)) {
        return true;
    }
    // Check for spaced-out acronym match (e.g., "a m g" matching "A.M.G")
    const inputWords = getWordsFromText(normalizedInput);
    // Try different combinations of consecutive words
    for (let startIndex = 0; startIndex < inputWords.length; startIndex++) {
        for (let endIndex = startIndex + 1; endIndex <= inputWords.length; endIndex++) {
            const wordSequence = inputWords.slice(startIndex, endIndex).join(' ');
            if (matchesIgnoringSeparators(wordSequence, filter.label)) {
                return true;
            }
        }
    }
    return false;
};
/**
 * Finds matching filters within a single filter category
 * @param {Array} filterCategory - Array of filter objects in a category
 * @param {string} normalizedInput - The normalized input string to match against
 * @returns {Array} - Array of matching filter objects from this category
 */
const getMatchingFiltersFromCategory = (filterCategory, normalizedInput) => {
    if (!Array.isArray(filterCategory) || filterCategory.length === 0) {
        return [];
    }
    return filterCategory.filter((filter) => isFilterMatchingInput(filter, normalizedInput));
};
/**
 * Finds matching filters based on the input value
 * @param {string} filterValue - The input value to match against filter labels
 * @param {object} filters - Object containing filter categories with arrays of filter objects
 * @returns {Array} - Array of matching filter objects
 */
const getMatchingFilters = (filterValue, filters) => {
    if (!filterValue || !filters || Object.keys(filters).length === 0) {
        return [];
    }
    const normalizedInput = normalizeString(filterValue);
    if (!normalizedInput) {
        return [];
    }
    const matchingFilters = Object.values(filters).flatMap((filterCategory) => getMatchingFiltersFromCategory(filterCategory, normalizedInput));
    return matchingFilters;
};
exports.getMatchingFilters = getMatchingFilters;
/**
 * Finds matching season filters based on a list of years
 * @param {Array} yearsList - List of years to match against season filters
 * @param {object} filters - Object containing filter categories
 * @returns {Array} - Array of matching season filter objects
 */
const getMatchingSeasonFilters = (yearsList, filters) => {
    if (!yearsList || !yearsList.length || !filters?.annualSeasonTypeDropdown) {
        return [];
    }
    return yearsList.flatMap((year) => filters.annualSeasonTypeDropdown.filter((season) => season.label.includes(year)));
};
exports.getMatchingSeasonFilters = getMatchingSeasonFilters;
/**
 * Helper function to remove exact word matches from text
 * @param {string} text - The text to process
 * @param {string} normalizedLabel - The normalized filter label
 * @returns {string} - Text with exact matches removed
 */
const removeExactWordMatches = (text, normalizedLabel) => {
    const exactMatcher = createCompleteWordMatchPattern(normalizedLabel);
    return text.replaceAll(exactMatcher, '$1$2');
};
/**
 * Helper function to remove spaced-out brand matches from text
 * @param {string} text - The text to process
 * @param {string} normalizedLabel - The normalized filter label
 * @returns {string} - Text with spaced matches removed, or original text if no match
 */
const removeSpacedBrandMatches = (text, normalizedLabel) => {
    const inputWords = getWordsFromText(text);
    const brandWithoutSeparators = removeBrandSeparators(normalizedLabel);
    const brandLength = brandWithoutSeparators.length;
    // Early exit if brand is longer than all input combined
    if (brandLength > normalizeString(text).replace(/\s+/g, '').length) {
        return text;
    }
    // Look for spaced-out version of the brand
    for (let startIndex = 0; startIndex < inputWords.length; startIndex++) {
        // Optimize: limit endIndex based on remaining words and brand length
        const searchLimit = Math.min(inputWords.length, startIndex + brandLength) + 1;
        for (let endIndex = startIndex + 1; endIndex <= searchLimit; endIndex++) {
            const wordSequence = inputWords.slice(startIndex, endIndex);
            // Quick length check before expensive operations
            const totalChars = wordSequence.join('').length;
            if (totalChars !== brandLength)
                continue;
            const sequenceWithoutSpaces = normalizeString(wordSequence.join(''));
            if (sequenceWithoutSpaces === brandWithoutSeparators) {
                // Return text with this sequence removed
                return [
                    ...inputWords.slice(0, startIndex),
                    ...inputWords.slice(endIndex)
                ].join(' ');
            }
        }
    }
    return text; // No match found, return original text
};
/**
 * Helper function to process text by removing a single filter label
 * @param {string} text - The text to process
 * @param {object} filter - The filter object with label property
 * @returns {string} - Processed text with filter label removed
 */
const processTextForSingleFilter = (text, filter) => {
    if (!filter.label)
        return text;
    const normalizedLabel = normalizeString(filter.label);
    // First try exact word match removal
    const afterExactRemoval = removeExactWordMatches(text, normalizedLabel);
    // Then try spaced-out removal
    return removeSpacedBrandMatches(afterExactRemoval, normalizedLabel);
};
/**
 * Removes matching text from a string based on an array of filter objects
 * @param {string} inputText - The original text to process
 * @param {Array} matchingFilters - Array of filter objects with label property
 * @returns {string} - The text with matching values removed
 */
const removeFilterLabelsFromText = (inputText, matchingFilters) => {
    if (!inputText || !matchingFilters || matchingFilters.length === 0) {
        return inputText || '';
    }
    const processedText = matchingFilters.reduce((currentText, filter) => processTextForSingleFilter(currentText, filter), normalizeString(inputText));
    return processedText.replace(/\s+/g, ' ').trim();
};
exports.removeFilterLabelsFromText = removeFilterLabelsFromText;
/**
 * Removes duplicate filters based on value and dropdownName properties
 * @param {Array} filters - Array of filter objects to deduplicate
 * @returns {Array} - Array with duplicate filters removed (keeps first occurrence)
 */
const removeDuplicateFilters = (filters) => {
    const seen = new Set();
    return filters.filter((filter) => {
        const key = `${filter.value}|${filter.dropdownName}`;
        if (seen.has(key)) {
            return false;
        }
        seen.add(key);
        return true;
    });
};
exports.removeDuplicateFilters = removeDuplicateFilters;
/**
 * Combines selected filters with filters extracted from search text
 * @param {Array} selectedFilters - Currently selected filters from UI
 * @param {Array} searchTextFilters - Filters found in search text
 * @returns {Array} - Combined and deduplicated filters
 */
const combineAndDeduplicateFilters = (selectedFilters, searchTextFilters) => {
    const combinedFilters = [...selectedFilters, ...searchTextFilters];
    return (0, exports.removeDuplicateFilters)(combinedFilters);
};
/**
 * Extracts season years from search text within a specified range
 * @param {string} searchText - The search text to extract years from
 * @param {number} minYear - Minimum valid year (default: 1988)
 * @param {number} maxYear - Maximum valid year (default: 2050)
 * @returns {Array} - Array of valid year strings found in the search text
 */
const getSeasonYearListFromSearchText = (searchText, minYear = 1988, maxYear = 2050) => {
    if (!searchText)
        return [];
    const words = searchText.split(' ');
    return words.filter((value) => /^\d{4}$/.test(value) &&
        Number(value) >= minYear &&
        Number(value) <= maxYear);
};
exports.getSeasonYearListFromSearchText = getSeasonYearListFromSearchText;
/**
 * Gets matching season filter details for a list of years
 * @param {Array} seasonYearList - List of year strings to match
 * @param {object} availableFilters - Available filters object
 * @returns {object} - Object with isSeasonYearAvailableInSeasonFilters and selectionSeasonsForTextSearch
 */
const getMatchingSeasonFiltersDetails = (seasonYearList, availableFilters) => {
    const selectionSeasonsForTextSearch = (0, exports.getMatchingSeasonFilters)(seasonYearList, availableFilters);
    return {
        isSeasonYearAvailableInSeasonFilters: selectionSeasonsForTextSearch.length > 0,
        selectionSeasonsForTextSearch
    };
};
exports.getMatchingSeasonFiltersDetails = getMatchingSeasonFiltersDetails;
/**
 * Processes search text and filters to determine which filters to apply and what text remains.
 * This function handles both regular filter matching and season year matching, where standalone
 * years (e.g., "2025") are matched against season filters (e.g., "Spring 2025", "Resort 2025").
 *
 * @param {object} params - Parameters object
 * @param {string} params.searchText - The search text to process
 * @param {Array} params.selectedFilters - Currently selected filters from UI
 * @param {object} params.availableFilters - Available filters object with filter categories
 * @returns {object} - Object containing searchTextMinusAppliedFilters and selectionOptionsForTextSearch
 * @returns {string} returns.searchTextMinusAppliedFilters - Search text with matched filter terms removed
 * @returns {Array} returns.selectionOptionsForTextSearch - Combined filters including matched season years
 */
/**
 * Checks if input matches the first letters of brand parts (acronym matching)
 * Example: "apc" matches "A.P.C" because "apc" starts with "apc" (first letters: a, p, c)
 * @param {string} inputWord - The input word to check
 * @param {Array<string>} brandParts - Array of brand parts
 * @returns {boolean} - True if input matches first letters of parts
 */
const matchesFirstLettersOfParts = (inputWord, brandParts) => {
    const acronym = brandParts.map((part) => part.charAt(0)).join('');
    return acronym.startsWith(inputWord);
};
/**
 * Checks if input matches concatenated brand parts
 * Example: "apc" matches "A.P.C" because "apc" starts with "apc" (concatenated: "APC")
 * @param {string} inputWord - The input word to check
 * @param {Array<string>} brandParts - Array of brand parts
 * @returns {boolean} - True if input matches concatenated parts
 */
const matchesConcatenatedParts = (inputWord, brandParts) => {
    const concatenated = brandParts.join('');
    return concatenated.startsWith(inputWord);
};
/**
 * Enhanced filtering for dropdowns that supports acronym-style searches and diacritic matching
 * When user types "a" then "p" then "c", it should progressively filter to show "A.P.C"
 * When user types "A Detacher", it should match "A Détacher"
 * When user types "A company", it should match "A--Company"
 * @param {object} option - The dropdown option with label property
 * @param {string} input - The user's input string
 * @returns {boolean} - True if the option should be shown
 */
const matchBrandFilterOptions = (option, input) => {
    if (!input || !option.label)
        return true;
    // Normalize both input and label to handle diacritics and case
    const normalizedInput = normalizeString(input.trim());
    const normalizedLabel = normalizeString(option.label);
    // For empty input, show all options
    if (!normalizedInput)
        return true;
    // Split brand label by common separators (periods, hyphens, spaces, ampersands, plus signs, equals, slashes, quotes)
    const brandParts = normalizedLabel
        .split(/[.,;:!?\-_\s&+=/'']+/)
        .filter(Boolean);
    // Split input by spaces to handle multi-word searches like "a detacher"
    const inputWords = getWordsFromText(normalizedInput);
    // Check if input matches the start of the brand name (regular matching)
    if (normalizedLabel.startsWith(normalizedInput)) {
        return true;
    }
    // Check if any brand part starts with the input (word-level matching)
    if (brandParts.some((part) => part.startsWith(normalizedInput))) {
        return true;
    }
    // Multi-word matching: check if consecutive input words match consecutive brand parts
    // For "a detacher" to match "A Détacher"
    if (inputWords.length > 1) {
        for (let i = 0; i <= brandParts.length - inputWords.length; i++) {
            const consecutiveBrandParts = brandParts.slice(i, i + inputWords.length);
            const allMatch = inputWords.every((word, index) => consecutiveBrandParts[index] &&
                consecutiveBrandParts[index].startsWith(word));
            if (allMatch)
                return true;
        }
    }
    // Single-word acronym-style matching: check if input matches first letters of brand parts
    // For "apc" to match "A.P.C", check if "apc" matches the concatenated first letters
    if (inputWords.length === 1 && brandParts.length > 1) {
        const inputWord = inputWords[0];
        if (matchesFirstLettersOfParts(inputWord, brandParts)) {
            return true;
        }
        // Also check if input matches concatenated parts (for brands like "A.P.C" → "apc")
        if (matchesConcatenatedParts(inputWord, brandParts)) {
            return true;
        }
    }
    return false;
};
const processSearchTextAndFilters = ({ searchText, selectedFilters, availableFilters }) => {
    const searchTextFilters = (0, exports.getMatchingFilters)(searchText, availableFilters);
    let selectionOptionsForTextSearch = combineAndDeduplicateFilters(selectedFilters, searchTextFilters);
    let searchTextMinusAppliedFilters = (0, exports.removeFilterLabelsFromText)(searchText, selectionOptionsForTextSearch);
    // Handle season year matching (e.g., "2025" matching "Spring 2025", "Resort 2025")
    if (searchTextMinusAppliedFilters) {
        const seasonYearListInSearchText = (0, exports.getSeasonYearListFromSearchText)(searchTextMinusAppliedFilters);
        if (seasonYearListInSearchText.length > 0) {
            const { isSeasonYearAvailableInSeasonFilters, selectionSeasonsForTextSearch } = (0, exports.getMatchingSeasonFiltersDetails)(seasonYearListInSearchText, availableFilters);
            if (isSeasonYearAvailableInSeasonFilters) {
                selectionOptionsForTextSearch = (0, exports.removeDuplicateFilters)([
                    ...selectionSeasonsForTextSearch,
                    ...selectionOptionsForTextSearch
                ]);
                // Remove matched years from the remaining search text
                seasonYearListInSearchText.forEach((seasonYear) => {
                    searchTextMinusAppliedFilters = searchTextMinusAppliedFilters.replace(new RegExp(seasonYear, 'gi'), '');
                    searchTextMinusAppliedFilters = searchTextMinusAppliedFilters
                        .replace(/\s+/g, ' ')
                        .trim();
                });
            }
        }
    }
    return {
        searchTextMinusAppliedFilters,
        selectionOptionsForTextSearch
    };
};
exports.processSearchTextAndFilters = processSearchTextAndFilters;
/**
 * Determines the appropriate searchInput parameter for API calls based on whether
 * the search text contains terms beyond the applied filters
 * @param {string} searchText - The current search input text
 * @param {Array} selectedFilters - Currently selected filters
 * @param {object} availableFilters - Available filters object
 * @returns {string} - Either the original search text or empty string for API calls
 */
const getSearchInputForApiCall = (searchText, selectedFilters, availableFilters) => {
    if (!searchText) {
        return '';
    }
    const { searchTextMinusAppliedFilters } = (0, exports.processSearchTextAndFilters)({
        searchText,
        selectedFilters,
        availableFilters
    });
    return searchTextMinusAppliedFilters ? searchText : '';
};
exports.getSearchInputForApiCall = getSearchInputForApiCall;
const areArraysEqual = (arr1, arr2) => {
    if (arr1.length !== arr2.length) {
        return false;
    }
    return arr1.every((value, index) => value === arr2[index]);
};
exports.areArraysEqual = areArraysEqual;
// Export for CommonJS compatibility
module.exports = {
    ...module.exports,
    matchBrandFilterOptions
};
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 52643:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled, css } = __webpack_require__(92168);
const { calculateSpacing, minScreen, maxScreen, getColorToken, getTypographyStyles } = __webpack_require__(26865);
const Body = __webpack_require__(22652);
const { getPattern } = __webpack_require__(30);
const { BREAKPOINTS } = __webpack_require__(96472);
const { BasePageMainContent } = __webpack_require__(4081);
const Clamp = __webpack_require__(48286);
const BasePage = __webpack_require__(30543);
const { BaseText } = __webpack_require__(18730);
const { maxThresholds } = __webpack_require__(99906);
const SummaryRiver = __webpack_require__(84311);
const SummaryItem = __webpack_require__(74992);
const { SummaryListWrapper } = __webpack_require__(63637);
const { SummaryRiverSection, SummaryRiverTitleWrapper } = __webpack_require__(15641);
const { SummaryItemHedLink, SummaryItemAssetContainer, SummaryItemContent, SummaryItemContextualHeader, SummaryItemRubric } = __webpack_require__(68116);
const { SummaryItemImageLink } = __webpack_require__(14207);
const { SummaryItemCTAPodcastWrapper } = __webpack_require__(30854);
const { SummaryItemHedBase } = __webpack_require__(36211);
const { universalGridCore } = __webpack_require__(89085);
const { applyGridSpacing } = __webpack_require__(1123);
const Grid = __webpack_require__(86659);
const { GridItem } = __webpack_require__(40653);
const { ContentHeaderAccreditation } = __webpack_require__(80607);
const { PodcastContentHeaderDivider } = __webpack_require__(88317);
const { RubricName } = __webpack_require__(6613);
const PodcastDetailChannelBody = styled(Body).withConfig({
    displayName: 'PodcastDetailChannelBody'
}) `
  grid-column: 1/-1;
  margin-bottom: 1rem;

  ${minScreen(BREAKPOINTS.md)} {
    grid-column: 3 / span 8;
  }
`;
const PodcastDetailContentHeader = styled('div').withConfig({
    displayName: 'PodcastDetailContentHeader'
}) ``;
const PodcastDetailBodyWrapperGrid = styled('div').withConfig({
    displayName: 'PodcastDetailBodyWrapperGrid'
}) `
  ${universalGridCore()}
  ${applyGridSpacing('padding')}
    padding-bottom: ${calculateSpacing(2)};
`;
const DekWrapper = styled('div').withConfig({ displayName: 'DekWrapper' }) `
  ${universalGridCore()}
  ${applyGridSpacing('padding')}
  padding-top:${calculateSpacing(5)};

  > * {
    grid-column: 1 / -1;
    margin-top: ${calculateSpacing(2)};
    margin-bottom: ${calculateSpacing(2)};
  }

  a,
  a:not(.button):link {
    color: ${getColorToken('colors.consumption.body.standard.link')};
  }

  a:not(.button):hover {
    color: ${getColorToken('colors.consumption.lead.standard.link-hover')};
  }
`;
const DekClamp = styled(Clamp).withConfig({ displayName: 'DekClamp' }) `
  ${({ breakpoint }) => breakpoint &&
    css `
      ${minScreen(BREAKPOINTS[breakpoint])} {
        button {
          display: none;
        }
      }
      @media (min-width: ${BREAKPOINTS.lg}) {
        grid-column: 3 / span 8;
      }
      text-align: center;
      ${maxScreen(`${maxThresholds.md}px`)} {
        width: 100%;
      }
    `}
`;
const Dek = styled('div').withConfig({ displayName: 'Dek' }) ``;
const PodcastDetailPageWrapper = styled(BasePage).withConfig({
    displayName: 'PodcastDetailPageWrapper'
}) `
  ${({ podcastContentHeaderTheme }) => podcastContentHeaderTheme === 'inverted' &&
    css `
      ${ContentHeaderAccreditation} {
        padding-top: ${calculateSpacing(1.5)};
      }
      ${PodcastContentHeaderDivider} {
        display: none;
      }
    `}
  ${({ theme }) => getPattern(theme, 'main-background')}
  .ad__slot--hero .cns-ads-stage {
    ${({ shouldHidePaddingBottom }) => !shouldHidePaddingBottom && `padding-bottom: 0;`}
  }
  ${BasePageMainContent} {
    &::before {
      display: block;
      ${({ shouldHidePadding }) => !shouldHidePadding && `height: ${calculateSpacing(1, 'px')};`}
      content: '';
    }
  }

  .ad-container.ad-container-reduced-margin {
    .ad--mid-content {
      @media (min-width: ${BREAKPOINTS.md}) {
        margin-bottom: ${calculateSpacing(2)};
        padding: 0 0 0 0;
      }
    }
  }

  .ad-container {
    .ad--mid-content {
      @media (min-width: ${BREAKPOINTS.md}) {
        margin-bottom: ${calculateSpacing(2)};
        padding: 0 0 0 0;
      }
    }
  }

  .ad-container.ad-container-reduced-margin {
    .ad--mid-content-with-padding {
      @media (min-width: ${BREAKPOINTS.md}) {
        padding: 0 0 ${calculateSpacing(2)} 0;
      }
    }
  }

  .cns-ads-slot-type-footer {
    padding: 0;
  }
  ${({ hasBackground, theme }) => hasBackground && theme && getPattern(theme, 'page-background')}
`;
const PodcastDetailPageRecircWrapper = styled('div').withConfig({
    displayName: 'PodcastDetailPageRecircWrapper'
}) `
  --grid-margin: ${calculateSpacing(6)};
  padding-top: calc(1 * var(--grid-margin));
  padding-right: calc(1 * var(--grid-margin));
  padding-left: calc(1 * var(--grid-margin));

  ${SummaryItemCTAPodcastWrapper} {
    @media (max-width: calc(${BREAKPOINTS.md} - 1px)) {
      display: grid;
    }

    a {
      max-width: ${calculateSpacing(25)};
      @media (max-width: calc(${BREAKPOINTS.md} - 1px)) {
        grid-column: 3/5;
        max-width: ${calculateSpacing(22.5)};
      }
    }
  }

  ${SummaryItemAssetContainer} {
    align-self: baseline;
    max-width: 100%;
    @media (max-width: calc(${BREAKPOINTS.md} - 1px)) {
      display: grid;
    }
  }

  ${SummaryItemImageLink} {
    @media (max-width: calc(${BREAKPOINTS.md} - 1px)) {
      grid-column: 3/5;
      width: ${calculateSpacing(19.375)};
      height: ${calculateSpacing(19.375)};
    }
  }

  ${SummaryItemContent} {
    padding: 0;
    @media (max-width: calc(${BREAKPOINTS.md} - 1px)) {
      text-align: center;
    }

    ${RubricName} {
      color: ${getColorToken('colors.discovery.body.white.context-signature')};
      ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.globalEditorial.context-primary')};
    }
  }
  ${SummaryItemContextualHeader} {
    @media (max-width: calc(${BREAKPOINTS.md} - 1px)) {
      display: none;
    }
  }
  ${SummaryItemRubric} {
    @media (max-width: calc(${BREAKPOINTS.md} - 1px)) {
      margin-bottom: ${calculateSpacing(0.5)};
      padding-top: ${calculateSpacing(2.5)};
      max-width: 100%;
    }
  }
`;
const PodcastDetailPageRecircItem = styled(SummaryItem.PodcastRecirc).withConfig({
    displayName: 'PodcastDetailPageRecircItem'
}) `
  ${SummaryItemHedLink} {
    &::after {
      border-bottom: 0;
    }
  }
  > ${GridItem} {
    grid-column: 1 / -1;
    @media (min-width: ${BREAKPOINTS.lg}) {
      grid-column: 3 / span 8;
    }
  }
`;
const PodcastDetailPageSummaryRiver = styled(SummaryRiver).withConfig({
    displayName: 'PodcastDetailPageSummaryRiver'
}) `
  .grid {
    row-gap: 0.25rem;
  }
  ${minScreen(BREAKPOINTS.lg)} {
    .grid {
      row-gap: 0.75rem;
    }
    ${SummaryRiverSection}:first-child ${SummaryListWrapper}::before {
      grid-column: 1/-5;
    }
    && ${SummaryListWrapper} {
      .grid-layout__content {
        grid-column: 1/-4;
      }
    }
    ${SummaryListWrapper} {
      grid-template-columns: repeat(12, 1fr);

      .summary-item--layout-placement-side-by-side-desktop-only {
        grid-template-columns: repeat(9, 1fr);

        .summary-item__content {
          grid-column: 4/-1;
        }

        .summary-item__asset-container {
          grid-column: 1/-7;
          align-self: baseline;
        }
      }
    }
    ${SummaryItemHedLink} {
      ${SummaryItemHedBase} {
        ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.discovery.hed-core-primary')};
      }
    }
    ${SummaryRiverTitleWrapper} {
      ${applyGridSpacing('padding')};
      margin-bottom: 0;
      padding: ${calculateSpacing(8)} ${calculateSpacing(6)}
        ${calculateSpacing(8)} ${calculateSpacing(6)};
    }
  }
`;
const PodcastDetailPageGrid = styled(Grid.NoMargins).withConfig({
    displayName: 'PodcastDetailPageGrid'
}) `
  > ${GridItem} {
    grid-column: 1 / -1;
    @media (min-width: ${BREAKPOINTS.lg}) {
      grid-column: 3 / span 8;
    }
    @media (max-width: ${BREAKPOINTS.lg}) {
      margin-top: ${calculateSpacing(4)};
    }
  }
`;
const PodcastRecircContextualHeader = styled(BaseText).withConfig({
    displayName: 'PodcastRecircContextualHeader'
}) `
  padding-bottom: ${calculateSpacing(2.5)};
  text-align: center;
  @media (min-width: ${BREAKPOINTS.md}) {
    display: none;
  }
`;
PodcastRecircContextualHeader.defaultProps = {
    as: 'div',
    colorToken: 'colors.discovery.body.white.description',
    typeIdentity: 'typography.definitions.globalEditorial.context-primary'
};
module.exports = {
    PodcastDetailPageWrapper,
    PodcastDetailBodyWrapperGrid,
    PodcastDetailChannelBody,
    PodcastDetailContentHeader,
    PodcastRecircContextualHeader,
    PodcastDetailPageRecircWrapper,
    PodcastDetailPageSummaryRiver,
    PodcastDetailPageRecircItem,
    PodcastDetailPageGrid,
    DekWrapper,
    Dek,
    DekClamp
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 40133:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";
var __webpack_unused_export__;

__webpack_unused_export__ = ({ value: true });
const react_intl_1 = __webpack_require__(46984);
exports.A = (0, react_intl_1.defineMessages)({
    relatedArticleHed: {
        id: 'PodcastDetailedPage.relatedArticleHed',
        defaultMessage: 'Related Articles',
        description: 'Default section hed text for PodcastDetailedPage page summary river'
    },
    contextualHeader: {
        id: 'PodcastDetailedPage.contextualHeader',
        defaultMessage: 'You Might Like This',
        description: 'Contextual Header for podcast recirc unit'
    },
    primaryCTALabel: {
        id: 'PodcastDetailedPage.primaryCTALabel',
        defaultMessage: 'Start Listening Now',
        description: 'Default CTA text for Start Listening Now button'
    }
});
//# sourceMappingURL=translations.js.map

/***/ }),

/***/ 30258:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
const PropTypes = __webpack_require__(5556);
const { injectIntl } = __webpack_require__(46984);
const { connector } = __webpack_require__(57744);
const ContentHeader = __webpack_require__(69389);
const ResponsiveImage = __webpack_require__(43608);
const ResponsiveAsset = __webpack_require__(73275);
const VisualStory = __webpack_require__(99685);
const { VisualStoryPageStyle, VisualStoryPageLogo } = __webpack_require__(86584);
/**
 * VisualStoryPage component
 *
 * This component renders a visual story page with a given list of items, header and logo.
 * The component also handles the current index of the story and the default duration of the story.
 *
 * @param {object} props - The props object
 * @param {string} [props.copilotCode] - The copilotCode of a current page. Default: ''
 * @param {boolean} [props.isMobileDevice] - Whether the component should be rendered in a mobile device. Default: true
 * @param {Array} [props.items] - The list of items to be rendered in the story. Default: []
 * @param {object} [props.header] - The header object with the title of the story. Default: {}
 * @param {object} [props.logo] - The logo object with the logo image. Default: null
 * @param {number} [props.defaultDuration] - The default duration of the story. Default: 10000
 * @param {object} props.recirculation - The list of items for recirculatuion slide. Default: {items: []}
 *
 * @returns {ReactElement} The rendered visual story page
 */
const VisualStoryPage = ({ copilotCode = '', defaultDuration = 10000, header = {}, isMobileDevice = true, items = [], logo = null, recirculation = { items: [] } }) => {
    const storyItems = items;
    const storyHeader = header;
    const storyLogo = logo;
    const initialIndex = 0;
    const itemsLength = storyItems.length;
    const currentIndex = (() => {
        if (false)
            {}
        const hash = decodeURIComponent(window.location.hash);
        if (!hash)
            return initialIndex;
        const index = parseInt(hash.substring(1), 10);
        if (isNaN(index))
            return initialIndex;
        const newIndex = Math.max(Math.min(index, itemsLength - 1), 0);
        return newIndex;
    })();
    return (itemsLength && (React.createElement(VisualStoryPageStyle, { className: "visual-story-page", "data-testid": "visual-story-page" },
        storyLogo && (React.createElement(VisualStoryPageLogo, { href: "/", "data-testid": "visual-story-logo" },
            React.createElement(ResponsiveImage, { ...storyLogo }))),
        React.createElement(VisualStory, { copilotCode: copilotCode, currentIndex: currentIndex, dangerousHed: storyHeader.dangerousHed, defaultDuration: defaultDuration, isMobileDevice: isMobileDevice, items: storyItems, recirculation: recirculation.items }))));
};
VisualStoryPage.propTypes = {
    copilotCode: PropTypes.string,
    defaultDuration: PropTypes.number,
    header: PropTypes.shape(ContentHeader.propTypes).isRequired,
    isMobileDevice: PropTypes.bool,
    items: PropTypes.arrayOf(PropTypes.shape(ResponsiveAsset.propTypes))
        .isRequired,
    logo: PropTypes.object.isRequired,
    recirculation: PropTypes.shape({ items: PropTypes.array })
};
VisualStoryPage.displayName = 'VisualStoryPage';
// Export the raw component for testing
module.exports = connector(injectIntl(VisualStoryPage), {
    keysToPluck: []
});
// Export the raw component for PropTypes testing
module.exports.WrappedComponent = VisualStoryPage;
//# sourceMappingURL=VisualStoryPage.js.map

/***/ }),

/***/ 67228:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(30258);
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 86584:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { default: styled } = __webpack_require__(50435);
const { BREAKPOINTS } = __webpack_require__(96472);
const { getColorToken, calculateSpacing } = __webpack_require__(26865);
const MARGIN_TOPBOTTOM = '32px';
const MARGIN_LEFTRIGHT = '48px';
const VisualStoryPageStyle = styled.div.withConfig({
    displayName: 'VisualStoryPageStyle'
}) `
  display: grid;
  position: relative;
  grid-column-gap: 0;
  grid-template-columns: 1fr;
  grid-template-rows: 100dvh;
  grid-row-gap: 0;
  align-content: center;
  align-items: center;
  justify-content: center;
  background: var(
    --bg,
    linear-gradient(
      104deg,
      #fff 25.08%,
      ${getColorToken('colors.background.brand')} 74.24%,
      #000 107.26%
    )
  );
  overflow: hidden;

  @media (orientation: landscape) and (max-device-width: 480px) {
    grid-template-rows: initial;
  }

  @media (min-width: 480px) {
    grid-template-rows: calc(100dvh - (${MARGIN_TOPBOTTOM} * 2));
    padding: ${MARGIN_TOPBOTTOM} 0;
    min-height: 550px;
  }

  @media (min-width: ${BREAKPOINTS.lg}) {
    padding: ${MARGIN_TOPBOTTOM} ${MARGIN_LEFTRIGHT};
  }

  &::before {
    position: absolute;
    top: 0;
    left: 0;

    box-shadow: 0 0 50px -25px rgba(0, 0, 0, 0.5);

    background: linear-gradient(
      109deg,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0.6) 29.35%,
      rgba(0, 0, 0, 0.6) 100%
    );
    width: 100%;
    height: 100%;
    content: '';
    backdrop-filter: blur(80px);
  }

  /* a lot of fix to remove white space inherit from base-page */
  .standardnavigation-site-navigation[class*='link-banner'] & {
    margin-top: -${calculateSpacing(14.5)};
  }

  .header-with-gql-link-banner.link-banner-visual-link-banner &,
  .fixed-header-large-logo-nav-variation.header-with-gql-link-banner.link-banner-visual-link-banner
    & {
    margin-top: -${calculateSpacing(6.5)};
    @media (min-width: ${BREAKPOINTS.lg}) {
      margin-top: -${calculateSpacing(19.5)} !important;
    }
  }
`;
const VisualStoryPageLogo = styled.a.withConfig({
    displayName: 'Logo'
}) `
  display: none;
  position: absolute;
  top: 36px;
  left: 36px;
  filter: brightness(0) invert(1);
  text-decoration: none;

  @media (min-width: ${BREAKPOINTS.lg}) {
    display: block;
  }

  img {
    width: 128px;
  }
`;
module.exports = {
    VisualStoryPageStyle,
    VisualStoryPageLogo
};
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 208:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.AbstractStyleGenerator = void 0;
const types_1 = __webpack_require__(19635);
const breakpoints_1 = __webpack_require__(99906);
/** Abstract class that generate media queries for different breakpoint. */
class AbstractStyleGenerator {
    generateStyleForBreakpoints() {
        const styles = [];
        for (const breakpoint of Object.values(types_1.Breakpoints)) {
            styles.push(this.getElementStyles(breakpoint));
        }
        return styles.join('\n');
    }
    getElementStyles(breakpoint) {
        const styles = this.getStyleForBreakpoint(breakpoint);
        return this.generateCSSMediaQueries(styles, breakpoint);
    }
    generateCSSMediaQueries(cssPropertiesValues, breakpoint) {
        const styles = cssPropertiesValues
            .map(([cssProperty, cssValue]) => `${cssProperty.toString()}: ${cssValue};`)
            .join('\n');
        // Create CSS media query and add support for mobile first design
        return `
    ${breakpoint === types_1.Breakpoints.SM ? styles : ''}
    @media (min-width: ${breakpoints_1.minThresholds[breakpoint]}px) {
      ${styles}
    }`;
    }
}
exports.AbstractStyleGenerator = AbstractStyleGenerator;
//# sourceMappingURL=AbstractStyleGenerator.js.map

/***/ }),

/***/ 29334:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CSSPropertyStyleGenerator = void 0;
const AbstractStyleGenerator_1 = __webpack_require__(208);
class CSSPropertyStyleGenerator extends AbstractStyleGenerator_1.AbstractStyleGenerator {
    constructor(cssProperty, cssDefaultValue, cssMediaQueryValues) {
        super();
        this.cssProperty = cssProperty;
        this.cssDefaultValue = cssDefaultValue;
        this.cssMediaQueryValues = cssMediaQueryValues;
    }
    getStyleForBreakpoint(breakpoint) {
        return [
            [
                this.cssProperty,
                this.cssMediaQueryValues?.[breakpoint] ?? this.cssDefaultValue
            ]
        ];
    }
}
exports.CSSPropertyStyleGenerator = CSSPropertyStyleGenerator;
//# sourceMappingURL=CSSPropertyStyleGenerator.js.map

/***/ }),

/***/ 17054:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Breakpoints = exports.CSSPropertyStyleGenerator = exports.AbstractStyleGenerator = void 0;
var AbstractStyleGenerator_1 = __webpack_require__(208);
Object.defineProperty(exports, "AbstractStyleGenerator", ({ enumerable: true, get: function () { return AbstractStyleGenerator_1.AbstractStyleGenerator; } }));
var CSSPropertyStyleGenerator_1 = __webpack_require__(29334);
Object.defineProperty(exports, "CSSPropertyStyleGenerator", ({ enumerable: true, get: function () { return CSSPropertyStyleGenerator_1.CSSPropertyStyleGenerator; } }));
var types_1 = __webpack_require__(19635);
Object.defineProperty(exports, "Breakpoints", ({ enumerable: true, get: function () { return types_1.Breakpoints; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 19635:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Breakpoints = void 0;
var Breakpoints;
(function (Breakpoints) {
    Breakpoints["SM"] = "sm";
    Breakpoints["MD"] = "md";
    Breakpoints["LG"] = "lg";
    Breakpoints["XL"] = "xl";
    Breakpoints["XXL"] = "xxl";
    Breakpoints["XXXL"] = "xxxl";
})(Breakpoints = exports.Breakpoints || (exports.Breakpoints = {}));
//# sourceMappingURL=types.js.map

/***/ }),

/***/ 7550:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.AnimationStyleGenerator = void 0;
class AnimationStyleGenerator {
    static generateTransitionStyle(animations) {
        if (animations.isOpen) {
            return [
                this.generateTransitionRule(animations.enter),
                this.generateReducedMotionTransitionRule(animations.reducedMotionEnter)
            ].join('\n');
        }
        return [
            this.generateTransitionRule(animations.exit),
            this.generateReducedMotionTransitionRule(animations.reducedMotionExit)
        ].join('\n');
    }
    static generateReducedMotionTransitionRule(animation) {
        if (animation === undefined) {
            return '';
        }
        return `@media (prefers-reduced-motion: reduce) {
      ${this.generateTransitionRule(animation)}
    }`;
    }
    static generateTransitionRule(animation) {
        if (animation === undefined) {
            return '';
        }
        const { animatedProperties, durations, easingFunctions, delays } = animation;
        return `transition: ${animation.animatedProperties
            .map((_, index) => `
         ${animatedProperties[index]} ${durations[index]}
          cubic-bezier(${easingFunctions[index]}) ${delays?.[index] ?? '0ms'}
      `)
            .join(',\n')};`;
    }
}
exports.AnimationStyleGenerator = AnimationStyleGenerator;
//# sourceMappingURL=AnimationStyleGenerator.js.map

/***/ }),

/***/ 83158:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.AnimationStyleGenerator = void 0;
var AnimationStyleGenerator_1 = __webpack_require__(7550);
Object.defineProperty(exports, "AnimationStyleGenerator", ({ enumerable: true, get: function () { return AnimationStyleGenerator_1.AnimationStyleGenerator; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 74877:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ErrorBoundary = void 0;
const react_1 = __webpack_require__(96540);
class ErrorBoundary extends react_1.Component {
    constructor() {
        super(...arguments);
        this.state = {
            errorMessage: null
        };
    }
    static getDerivedStateFromError(error) {
        return { errorMessage: error.message };
    }
    componentDidCatch(error, errorInfo) {
        console.error('Uncaught error: ', error, errorInfo.componentStack);
    }
    render() {
        if (this.state.errorMessage !== null) {
            return null;
        }
        return this.props.children;
    }
}
exports.ErrorBoundary = ErrorBoundary;
//# sourceMappingURL=ErrorBoundary.js.map

/***/ }),

/***/ 45193:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ErrorBoundary = void 0;
var ErrorBoundary_1 = __webpack_require__(74877);
Object.defineProperty(exports, "ErrorBoundary", ({ enumerable: true, get: function () { return ErrorBoundary_1.ErrorBoundary; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 73394:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.FocusTrap = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const hooks_1 = __webpack_require__(53577);
const styles_1 = __webpack_require__(22431);
/**
 * Provides a wrapper component, that provides A11y features.
 *
 * The ability to make the content not focusable if it is not active.
 * The ability to trap focus when interacting with the component.
 * The ability to do an action when the Esc key pressed.
 *
 * Elements within the FocusTrap should have tab-index property with a value higher than -1.
 * Otherwise, those elements will not be accessible.
 *
 * After reaching the last element, we go back to the first element and vice versa.
 * */
function FocusTrap({ children, isActive, onEscPress, hasContentObservation, theme }) {
    const focusTrapRef = (0, react_1.useRef)(null);
    (0, hooks_1.useInertAttribute)(focusTrapRef, isActive);
    (0, hooks_1.useFocusTrap)(focusTrapRef, isActive, onEscPress, hasContentObservation);
    return (react_1.default.createElement(styles_1.FocusTrapContainer, { ref: focusTrapRef, className: theme }, children));
}
exports.FocusTrap = FocusTrap;
//# sourceMappingURL=FocusTrap.js.map

/***/ }),

/***/ 3476:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.DIV_NODE_TYPE = exports.FOCUSABLE_ELEMENTS_SELECTOR = void 0;
exports.FOCUSABLE_ELEMENTS_SELECTOR = `[tabindex]:not([tabindex="-1"])`;
exports.DIV_NODE_TYPE = 'DIV';
//# sourceMappingURL=constants.js.map

/***/ }),

/***/ 53577:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.useInertAttribute = exports.useFocusTrap = void 0;
const react_1 = __webpack_require__(96540);
const constants_1 = __webpack_require__(3476);
const constants_2 = __webpack_require__(96472);
function useFocusTrap(focusTrapRef, isActive, onEscPress, hasContentObservation) {
    /** Random number state to trigger rerender. */
    const [isContentChanged, setIsContentChanged] = (0, react_1.useState)(0);
    const previousActiveElement = (0, react_1.useRef)();
    /** When the container gets closed, send the focus back to the initiator element. */
    (0, react_1.useEffect)(() => {
        if (isActive) {
            previousActiveElement.current = document.activeElement;
        }
        else {
            previousActiveElement.current?.focus();
        }
    }, [isActive]);
    /** If the content change, the observer changes the state, then focusable elements will be fetched. */
    (0, react_1.useEffect)(() => {
        if (!hasContentObservation) {
            return;
        }
        const observer = new MutationObserver((mutationsList) => {
            mutationsList.forEach((mutation) => {
                /** Only satisfied state change, if the node is not a span, like icon.
                 * To prevent activation of state change on changes like accordion open/close.
                 * */
                if (mutation.target.nodeName !== constants_1.DIV_NODE_TYPE) {
                    return;
                }
                setIsContentChanged((v) => v + 1);
            });
        });
        observer.observe(focusTrapRef.current, {
            childList: true,
            subtree: true
        });
        // eslint-disable-next-line consistent-return
        return () => observer.disconnect();
    }, [focusTrapRef, hasContentObservation]);
    (0, react_1.useEffect)(() => {
        const focusableElements = focusTrapRef.current?.querySelectorAll(constants_1.FOCUSABLE_ELEMENTS_SELECTOR);
        if (focusableElements == null || focusableElements.length === 0) {
            return;
        }
        const firstElement = focusableElements[0];
        const lastElement = focusableElements[focusableElements.length - 1];
        const handleKeyDownEvent = (event) => handleKeyDown(event, firstElement, lastElement, onEscPress);
        if (isActive) {
            /** If we try to focus too early (before the element is mounted or visible), without setTimeout, it might fail. */
            setTimeout(() => {
                firstElement.focus();
            }, 10);
            document.addEventListener('keydown', handleKeyDownEvent);
        }
        // eslint-disable-next-line consistent-return
        return () => document.removeEventListener('keydown', handleKeyDownEvent);
    }, [focusTrapRef, isActive, isContentChanged, onEscPress]);
}
exports.useFocusTrap = useFocusTrap;
function handleKeyDown(event, firstElement, lastElement, onEscPress) {
    const isEscapeKey = event.key === constants_2.ACCESSIBILITY.KEY_ESCAPE;
    const shouldExecuteEscAction = isEscapeKey && onEscPress;
    if (shouldExecuteEscAction) {
        onEscPress();
        return;
    }
    const isTabKey = event.key === constants_2.ACCESSIBILITY.KEY_TAB;
    if (!isTabKey) {
        return;
    }
    if (event.shiftKey && document.activeElement === firstElement) {
        event.preventDefault();
        lastElement.focus();
    }
    if (!event.shiftKey && document.activeElement === lastElement) {
        event.preventDefault();
        firstElement.focus();
    }
}
/** The "inert" attribute not supported by React 18.
 * As soon as we migrated to React 19, this code could be removed, and we can use the "inert" attribute without this hack.
 * */
function useInertAttribute(focusTrapRef, isActive) {
    (0, react_1.useEffect)(() => {
        if (focusTrapRef.current) {
            if (!isActive) {
                focusTrapRef.current.setAttribute('inert', '');
            }
            else {
                focusTrapRef.current.removeAttribute('inert');
            }
        }
    }, [focusTrapRef, isActive]);
}
exports.useInertAttribute = useInertAttribute;
//# sourceMappingURL=hooks.js.map

/***/ }),

/***/ 53373:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.FocusTrap = void 0;
var FocusTrap_1 = __webpack_require__(73394);
Object.defineProperty(exports, "FocusTrap", ({ enumerable: true, get: function () { return FocusTrap_1.FocusTrap; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 22431:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.FocusTrapContainer = void 0;
const styled_components_1 = __importDefault(__webpack_require__(92168));
const design_1 = __webpack_require__(75163);
exports.FocusTrapContainer = styled_components_1.default.div.withConfig({
    displayName: 'FocusTrapContainer',
    className: 'standard'
}) `
  &.standard,
  .standard & {
    ${({ theme }) => (0, design_1.shim)(theme, {
    [design_1.Design.Color.Surface]: 'colors.navigation.standard.background-primary',
    [design_1.Design.Color.SurfaceNavigationOverlay]: 'colors.navigation.standard.overlay',
    [design_1.Design.Color.SurfaceNavigationElevated]: 'colors.navigation.standard.background-tertiary',
    [design_1.Design.Color.BorderNavigation]: 'colors.navigation.standard.border'
})}
  }

  &.inverted,
  .inverted & {
    ${({ theme }) => (0, design_1.shim)(theme, {
    [design_1.Design.Color.Surface]: 'colors.navigation.inverted.background-primary',
    [design_1.Design.Color.SurfaceNavigationOverlay]: 'colors.navigation.inverted.overlay',
    [design_1.Design.Color.SurfaceNavigationElevated]: 'colors.navigation.inverted.background-tertiary',
    [design_1.Design.Color.BorderNavigation]: 'colors.navigation.inverted.border'
})}
  }
`;
//# sourceMappingURL=styles.js.map

/***/ }),

/***/ 98166:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.TypographyUtils = void 0;
const index_1 = __webpack_require__(26865);
class TypographyUtils {
    static getFluidTypographStyles(theme, tokenPath) {
        const typographyObject = (0, index_1.getThemeValue)(theme, tokenPath);
        const fontVariantToken = (0, index_1.getThemeValue)(theme, `typography.typefaces.${typographyObject.family}`);
        const fontVariantValue = fontVariantToken?.fontvariant?.slice(1, -1) || '';
        const textTransform = `text-transform: ${typographyObject.case};`;
        const fontFamily = TypographyUtils.getFontFamilyValue(theme, typographyObject);
        const fontStyle = `font-style: ${typographyObject.style};`;
        const letterSpacing = `letter-spacing: ${typographyObject['letter-spacing']};`;
        const ligatures = `font-variant-ligatures: ${typographyObject.ligatures};`;
        const fontVariant = `font-variant: ${fontVariantValue};`;
        const fontWeight = `font-weight: ${typographyObject.weight};`;
        const lineHeight = TypographyUtils.getClampValue('line-height', typographyObject['line-height']);
        const fontSize = TypographyUtils.getClampValue('font-size', typographyObject['font-size']);
        return `
      ${textTransform}
      ${fontFamily}
      ${fontStyle}
      ${letterSpacing}
      ${ligatures}
      ${fontVariant}
      ${fontWeight}
      ${lineHeight}
      ${fontSize}
    `;
    }
    static getFontFamilyValue(theme, typographyObject) {
        const fallbackFamilyToken = (0, index_1.getThemeValue)(theme, `typography.typefaces.${typographyObject.family}`);
        const fallbackFamily = fallbackFamilyToken?.fallback?.slice(1, -1) || '';
        return `font-family: ${typographyObject.family}, ${fallbackFamily};`;
    }
    static getClampValue(cssProperty, fluidTypographyValues) {
        return `${cssProperty}: clamp(${fluidTypographyValues.min}, ${fluidTypographyValues['clamp-ratio']}, ${fluidTypographyValues.max});`;
    }
}
exports.TypographyUtils = TypographyUtils;
//# sourceMappingURL=TypographyUtils.js.map

/***/ }),

/***/ 49716:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.TypographyUtils = void 0;
var TypographyUtils_1 = __webpack_require__(98166);
Object.defineProperty(exports, "TypographyUtils", ({ enumerable: true, get: function () { return TypographyUtils_1.TypographyUtils; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 13738:
/***/ ((module) => {

/**
 * Act on specifc mouse coordinates
 *
 * @param {object} [node] - contains x and y coordinates and their max values
 */
const reviseMaxValues = (x, xmax, y, ymax) => {
    // max values will be reset to Integer max value if the coordinate alone passed without its max value
    let rxmax = xmax;
    let rymax = ymax;
    if (x !== -1 && xmax === -1)
        rxmax = Number.MAX_SAFE_INTEGER;
    if (y !== -1 && ymax === -1)
        rymax = Number.MAX_SAFE_INTEGER;
    return { revisedXmax: rxmax, revisedYmax: rymax };
};
const actOnMousePosition = (paramObject) => {
    const { xval = -1, xmax = -1, yval = -1, ymax = -1, func } = paramObject; // the duplicate values ensures to execute func if the coordinate and its max value are not passed
    const { revisedXmax, revisedYmax } = reviseMaxValues(xval, xmax, yval, ymax);
    if (xval >= revisedXmax && yval >= revisedYmax)
        func && func();
};
module.exports = actOnMousePosition;
//# sourceMappingURL=act-on-mousePosition.js.map

/***/ }),

/***/ 23148:
/***/ ((module) => {

/**
 * Retrieve an edge bound from a DOM node
 *
 * @param {object} [node] - DOM node
 * @param {string} [edge] - Name of the edge (top, bottom)
 * @returns {number} Boundary value
 */
const getBound = (node, edge) => {
    const edgeMappers = {
        top: (rect) => rect.top + window.pageYOffset,
        bottom: (rect) => rect.top + rect.height + window.pageYOffset
    };
    return edgeMappers[edge](node.getBoundingClientRect());
};
module.exports = getBound;
//# sourceMappingURL=get-bound.js.map

/***/ }),

/***/ 30:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const has = __webpack_require__(61448);
const get = __webpack_require__(58156);
/// Generate gradient
/// @param {string} gradientType
/// @param {string} gradientAngle
/// @param {string} gradientColorStops
/// @returns {background}
const generateColorGradient = (gradientType, gradientColorStops, gradientAngle = null) => {
    if (gradientAngle === null) {
        return `${gradientType}-gradient(${gradientColorStops})`;
    }
    return `${gradientType}-gradient(${gradientAngle}, ${gradientColorStops})`;
};
/// Get gradient from color palette
/// @param {string} gradientData
const generateGradientPattern = (gradientData) => {
    const gradientType = get(gradientData, 'gradient-style');
    const gradientColorStops = get(gradientData, 'color-stops');
    let gradientAngle = get(gradientData, 'angle');
    if (gradientType === 'radial') {
        gradientAngle = null;
    }
    const background = generateColorGradient(gradientType, gradientColorStops, gradientAngle);
    return `background: ${background}; position: sticky;`;
};
/// Generate image pattern
/// @param {string} backgroundUrl
/// @param {string} backgroundRepeat
/// @param {string} backgroundPosition
/// @param {string} backgroundSize
/// @param {string} backgroundAttachment
/// @param {string} backgroundColor
const generateImageBackground = (backgroundUrl, backgroundRepeat = 'no-repeat', backgroundPosition = 'center', backgroundSize = 'cover', backgroundAttachment = 'scroll', backgroundColor = 'transparent') => {
    let backgroundImage;
    let cssStr = '';
    if (backgroundUrl !== null) {
        backgroundImage = backgroundUrl;
    }
    cssStr = `background-image:${backgroundImage};
      background-attachment:${backgroundAttachment};
      background-color:${backgroundColor};
      background-repeat:${backgroundRepeat};
      background-position:${backgroundPosition};`;
    if (typeof backgroundSize === 'string') {
        cssStr += `background-size:${backgroundSize};`;
    }
    else {
        const background = [];
        backgroundSize.forEach((item) => {
            background.push(item);
        });
        cssStr += `background-size:${backgroundSize.toString()};`;
    }
    return cssStr;
};
/// Generate imge pattern
/// @param {string} imageBackgroundData
const generateImageBackgroundPattern = (imageBackgroundData) => {
    const backgroundUrl = get(imageBackgroundData, 'url');
    const backgroundRepeat = get(imageBackgroundData, 'repeat');
    const backgroundColor = get(imageBackgroundData, 'color');
    const backgroundAttachment = get(imageBackgroundData, 'attachment');
    const backgroundSize = get(imageBackgroundData, 'size');
    const backgroundPosition = get(imageBackgroundData, 'position');
    return generateImageBackground(backgroundUrl, backgroundRepeat, backgroundPosition, backgroundSize, backgroundAttachment, backgroundColor);
};
/// Generate solid color
/// @param {string} solidBackgroundData
const generateSolidBackgroundPattern = (solidBackgroundData) => {
    return `background-color:${get(solidBackgroundData, 'color')};`;
};
const generatePattern = (pattern) => {
    if (has(pattern, 'gradient')) {
        return generateGradientPattern(get(pattern, 'gradient'));
    }
    else if (has(pattern, 'image')) {
        return generateImageBackgroundPattern(get(pattern, 'image'));
    }
    else if (has(pattern, 'solid')) {
        return generateSolidBackgroundPattern(get(pattern, 'solid'));
    }
    return `background: none;`;
};
/// Get Pattern based on container-styles
/// @param {string} theme
/// @param {string} container
const getPattern = (theme, container) => {
    let containerType;
    if (!theme || Object.keys(theme).length === 0 || !container) {
        return `background: none;`;
    }
    if (has(theme, 'container-styles')) {
        const containerStyles = theme['container-styles'];
        if (!containerStyles[container])
            return `background: none;`;
        containerType = containerStyles[container];
        const patterns = has(containerType, 'pattern')
            ? containerType.pattern
            : null;
        if (patterns && patterns.length) {
            let background = '';
            if (patterns.length >= 2) {
                patterns.forEach((pattern, index) => {
                    let idx = index;
                    if (has(pattern, 'gradient')) {
                        background += generateGradientPattern(get(pattern, 'gradient'));
                    }
                    else if (has(pattern, 'image')) {
                        const image = get(pattern, 'image');
                        let url = '';
                        if (image.size)
                            url = get(pattern, 'url');
                        if (url.size) {
                            background += `'url(${url})'`;
                        }
                        else {
                            idx = patterns.length;
                        }
                        generateImageBackgroundPattern(get(pattern, 'image'));
                    }
                    else if (has(pattern, 'solid')) {
                        const solid = get(pattern, 'solid');
                        if (solid)
                            background += get(solid, 'color');
                    }
                    if (idx !== patterns.length - 1) {
                        background += ',';
                    }
                });
                return background.toString();
            }
            return generatePattern(patterns[0]);
        }
    }
    return `background: none;`;
};
module.exports = {
    getPattern
};
//# sourceMappingURL=get-container-styles.js.map

/***/ }),

/***/ 94409:
/***/ ((module) => {

const getElDimensions = (el) => {
    if (!window)
        return {};
    const { bottom, left, right, top } = el.getBoundingClientRect();
    const elStyle = el.currentStyle || window.getComputedStyle(el);
    const elMarginBottom = parseFloat(elStyle.marginBottom);
    const elMarginLeft = parseFloat(elStyle.marginLeft);
    const elMarginRight = parseFloat(elStyle.marginRight);
    const elMarginTop = parseFloat(elStyle.marginTop);
    return {
        bottom: bottom + elMarginBottom,
        left: left - elMarginLeft,
        right: right + elMarginRight,
        top: top - elMarginTop
    };
};
module.exports = getElDimensions;
//# sourceMappingURL=get-el-dimensions.js.map

/***/ }),

/***/ 48419:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getMotionAnimationValues = void 0;
const { getThemeValue } = __webpack_require__(26865);
/**
 * Returns the CSS values for animtions to be used in the components.
 *
 * How to use this function
 * The main aim of this function is to provide the CSS syntax for animation/transition to be used in the styled-components based
 * on the pattern or individual token passed to it. This function consumes an optional prop `theme` object which can be skipped as
 * it has been curried if not present still ideally it should be passed to the component, a string props `token` which can be the name of
 * a pre-defined pattern of animation or the single token and another optional prop `isAniamtion` which decides whether the function is
 * being used for animation or transition and returns CSS syntax accordingly.
 *
 * To use this in a styled component we can use the function as follows,
 * Case With Pattern:
 * .some_class {
 *    animation-name: aniamtionName;
 *    ${getMotionAnimationValues(theme, 'move-in')}
 *    animation-iteration-count: infinite;
 * }
 *
 * keyframes aniamtionName {
 *    from {background-color: red;}
 *    to {background-color: yellow;}
 * }
 *
 * Case With Individual Token:
 * .some_class {
 *    animation-name: aniamtionName;
 *    ${getMotionAnimationValues(theme, 'standard-in-and-out')}
 *    animation-duration: 1.2s;
 *    animation-iteration-count: infinite;
 * }
 *
 * keyframes aniamtionName {
 *    from {background-color: red;}
 *    to {background-color: yellow;}
 * }
 *
 * Case With Transition:
 * .some_class {
 *    transition-name: aniamtionName;
 *    ${getMotionAnimationValues(theme, 'standard-in-and-out', true)}
 *    transition-duration: 1.2s;
 *    transition-iteration-count: infinite;
 * }
 *
 * keyframes aniamtionName {
 *    from {background-color: red;}
 *    to {background-color: yellow;}
 * }
 *
 * Case in Animation where CSS Syntax is written in one sentence:
 * .some_class {
 *    animation: aniamtionName ${getMotionAnimationValues(theme, 'move-in')["animation-duration"]} ${getMotionAnimationValues(theme, 'move-in')["animation-timing-function"]} infinite;
 * }
 *
 * keyframes aniamtionName {
 *    from {background-color: red;}
 *    to {background-color: yellow;}
 * }
 *
 * For more information check out, https://cnissues.atlassian.net/wiki/spaces/CEX/pages/16189030524/Motion+Tokens+in+Verso.
 *
 * @param {...(string|object)} args - The list of arguments passed into the function.
 * @param {object} args[0] - Either the theme object or the token string.
 * @param {string} args[1] - Token string like "move", "move-enter", "move-exit", etc.
 * @param {boolean} args[2] - A booleand value that defines whether the value is to be used in an animation or transition.
 * @returns {string} - CSS styling containing mostly the margin top and bottom.
 */
const getMotionAnimationValues = (...args) => {
    // currying the function in case the theme object is not passed
    if (typeof args[0] === 'string') {
        return ({ theme }) => (0, exports.getMotionAnimationValues)(theme, ...args);
    }
    const defaultValue = {
        delay: [],
        duration: {},
        easing: {},
        pattern: {}
    };
    const [theme, token, isAnimation = true] = args;
    const { delay, duration, easing, pattern } = getThemeValue(theme, 'motion') || defaultValue;
    const cssProperty = isAnimation ? 'animation' : 'transition';
    // Check if the token matches the pred-defined patterns
    if (pattern[token]) {
        const additionalProps = {};
        if (pattern[token].duration)
            additionalProps[`${cssProperty}-duration`] =
                duration[pattern[token].duration.split('.')[1]];
        if (pattern[token].delay)
            additionalProps[`${cssProperty}-delay`] =
                delay[pattern[token].delay.split('.')[1]];
        return {
            [`${cssProperty}-timing-function`]: `cubic-bezier(${easing[pattern[token].easing]})`,
            ...additionalProps
        };
    }
    // Check if the input matches a easing value
    if (easing[token]) {
        return {
            [`${cssProperty}-timing-function`]: `cubic-bezier(${easing[token]})`
        };
    }
    // Check if the input matches a propertyB or propertyC value
    const [prop, val] = token.split('-');
    if (prop === 'duration' && duration[val]) {
        return { [`${cssProperty}-duration`]: duration[val] };
    }
    else if (prop === 'delay' && delay[val]) {
        return { [`${cssProperty}-delay`]: delay[val] };
    }
    // If the input does not match any pattern or property value, return an error
    return {
        error: 'Invalid input, no matching pattern or property value found.'
    };
};
exports.getMotionAnimationValues = getMotionAnimationValues;
//# sourceMappingURL=get-motion-tokens.js.map

/***/ }),

/***/ 56341:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getSiteNavigationMenuStyles = void 0;
const { css } = __webpack_require__(92168);
const { getColorToken, calculateSpacing } = __webpack_require__(26865);
const { hideVisually } = __webpack_require__(52813);
/**
 * getSiteNavigationMenuStyles
 *
 * @param {object} theme - Theme object, which comes from our ThemeProvider
 * @param {boolean} hasIcon - flag to determine if button has icon
 * @param {string} color - svg path color
 * @param {string} hoverAndFocusColor - svg path color when hovered or focused
 *
 * @returns {string} - returns CSS for navigation menu
 */
function getSiteNavigationMenuStyles(theme, hasIcon = true, color = 'colors.foundation.collapsed-menu.nav-link.default', hoverAndFocusColor = 'colors.foundation.collapsed-menu.nav-link.hover') {
    const hasIconStyles = hasIcon ? 'justify-content: flex-start;' : '';
    return css `
    display: flex;
    position: relative;
    align-items: center;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    padding: 0 ${calculateSpacing(1)};
    width: 100%;
    min-width: ${calculateSpacing(5)};
    height: 100%;
    ${hasIconStyles}

    svg {
      display: block;
      width: 100%;
      height: 100%;

      path {
        fill: ${getColorToken(theme, color)};
      }
    }

    &:focus,
    &:hover {
      border: 0;
      background-color: transparent;

      svg path {
        fill: ${getColorToken(theme, hoverAndFocusColor)};
      }
    }

    .button__icon-container {
      width: ${calculateSpacing(4)};
      height: ${calculateSpacing(4)};
    }

    .button__label {
      ${hideVisually()}
    }
  `;
}
exports.getSiteNavigationMenuStyles = getSiteNavigationMenuStyles;
//# sourceMappingURL=get-site-navigation-menu-styles.js.map

/***/ }),

/***/ 49829:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.SiteNavigationSearch = void 0;
const { css } = __webpack_require__(92168);
const { calculateSpacing, getColorToken, minScreen } = __webpack_require__(26865);
const { BREAKPOINTS } = __webpack_require__(96472);
const { ButtonIcon, ButtonIconWrapper } = __webpack_require__(18974);
// Helper function for site navigation search
function SiteNavigationSearch() {
    return css `
    display: flex;
    position: relative;
    margin: 0 ${calculateSpacing(2)} 0 auto;
    border: 0;
    background-color: transparent;
    padding: 0;
    width: ${calculateSpacing(4)};

    ${minScreen(BREAKPOINTS.md)} {
      margin: 0 ${calculateSpacing(3)} 0 ${calculateSpacing(2)};
    }

    &:hover,
    &:focus {
      border: 0;
      background-color: transparent;

      svg path {
        fill: ${getColorToken('colors.foundation.icon.hover')};
      }
    }

    ${ButtonIconWrapper} {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: ${calculateSpacing(4)};
      height: 100%;

      ${ButtonIcon} {
        width: 100%;
        height: auto;
      }
    }

    svg path {
      fill: ${getColorToken('colors.foundation.icon.default')};
    }
  `;
}
exports.SiteNavigationSearch = SiteNavigationSearch;
//# sourceMappingURL=get-site-navigation-search.js.map

/***/ }),

/***/ 95788:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.isBannerIntoView = exports.getComponentPosition = void 0;
const getComponentPosition = (bannerRef) => {
    const bannerAbsolutePosition = (bannerRef.current?.getBoundingClientRect().top ?? 0) + window.pageYOffset;
    const { scrollHeight } = document.documentElement;
    if (bannerAbsolutePosition < scrollHeight / 3) {
        return 'top';
    }
    if (bannerAbsolutePosition > scrollHeight / 1.5) {
        return 'bottom';
    }
    return '';
};
exports.getComponentPosition = getComponentPosition;
const isBannerIntoView = (bannerRef) => {
    const bannerRelativePosition = (bannerRef.current?.getBoundingClientRect().top ?? 0) +
        (bannerRef.current?.getBoundingClientRect().height ?? 0);
    return (bannerRelativePosition >= 0 && bannerRelativePosition <= window.innerHeight);
};
exports.isBannerIntoView = isBannerIntoView;
//# sourceMappingURL=scroll-handling.js.map

/***/ }),

/***/ 54495:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const React = __webpack_require__(96540);
/**
 * Enhances React children by conditionally applying hideLandscapeLayout prop
 * to product items when UPC (Unified Product Card) is enabled.
 * Also tracks if any children are Unified Product Cards.
 *
 * @param {React.ReactNode} children - The React children to enhance
 * @returns {object} - Object containing enhanced children and hasUnifiedProductCard flag
 */
const enhanceChildrenForUpc = (children) => {
    let hasUnifiedProductCard = false;
    const enhancedChildren = React.Children.map(children, (child) => {
        if (React.isValidElement(child) &&
            child.props.contentType === 'product' &&
            child.props.isUpcEnabled) {
            hasUnifiedProductCard = true;
            return React.cloneElement(child, { hideLandscapeLayout: true });
        }
        return child;
    });
    return {
        enhancedChildren,
        hasUnifiedProductCard
    };
};
module.exports = {
    enhanceChildrenForUpc
};
//# sourceMappingURL=upc-landscape-helpers.js.map

/***/ }),

/***/ 15822:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.proxyApiRoutes = void 0;
exports["default"] = Object.freeze({
    oidcAuth: '/auth/initiate',
    oidcAuthSessionEnd: '/auth/session/end',
    oidcAuthRestart: '/auth/restart',
    oidcAccountSignOut: '/auth/end',
    oidcExchange: '/auth/exchange',
    oidcForgotPassword: '/auth/forgot',
    oidcLanding: '/auth/complete',
    oidcMagicLink: '/auth/request-link',
    oidcRefresh: '/auth/refresh',
    oidcRefreshRedirect: '/auth/refresh-redirect',
    oauth: {
        jwks: '/.well-known/jwks',
        oidcConfig: '/.well-known/openid-configuration',
        authorizationGrant: '/api/utility/oauth/authorization',
        tokenExchange: '/api/utility/oauth/token'
    }
});
exports.proxyApiRoutes = Object.freeze({
    authenticate: '/v2/authenticate',
    googleAuthenticate: '/v2/sso/google',
    marketingPermissions: '/v2/marketing-permissions',
    newsletterSubscriptions: '/v2/newsletter-subscriptions',
    sailthruNewsletterSubscriptions: '/v2/newsletter/sailthru',
    swgAuthenticate: '/v2/swg/authenticate',
    swgSubscribe: '/v2/swg/subscription',
    userDetails: '/v2/users',
    userLookup: '/v2/users/lookup'
});
//# sourceMappingURL=apiRoutes.js.map

/***/ }),

/***/ 94776:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.RIVER_LAYOUTS = void 0;
exports.RIVER_LAYOUTS = {
    Paginated: {
        isPaginated: true,
        isGrid: false,
        hasRail: true,
        map: false
    },
    PaginatedOneColumn: {
        isPaginated: true,
        isGrid: false,
        hasRail: true,
        map: false
    },
    PaginatedThreeColumns: {
        isPaginated: true,
        isGrid: true,
        hasRail: true,
        map: false
    },
    OneColumn: {
        isPaginated: false,
        isGrid: false,
        hasRail: true,
        map: false
    },
    ThreeColumns: {
        isPaginated: false,
        isGrid: true,
        hasRail: true,
        map: false
    },
    OneColumnAlternating: {
        isPaginated: false,
        isGrid: false,
        hasRail: false,
        map: ['SideBySideCenterImageLeft', 'SideBySideCenterImageRight']
    }
};
//# sourceMappingURL=river-layouts.js.map

/***/ }),

/***/ 31042:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.DefaultPage = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
/**
 * DefaultPage used by PageFactory if no component is provided
 */
const DefaultPage = () => {
    return (react_1.default.createElement("h1", null, "Fallback Page. This page should be replaced by a Presenter's component"));
};
exports.DefaultPage = DefaultPage;
DefaultPage.displayName = 'DefaultPage';
//# sourceMappingURL=DefaultPage.js.map

/***/ }),

/***/ 24755:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.PageFactory = void 0;
const get_1 = __importDefault(__webpack_require__(58156));
const query_string_1 = __webpack_require__(86663);
const react_1 = __importDefault(__webpack_require__(96540));
const react_redux_1 = __webpack_require__(67851);
const redux_1 = __webpack_require__(82960);
const extension_1 = __webpack_require__(93719);
const react_gateway_1 = __webpack_require__(10103);
const utils_1 = __webpack_require__(85554);
const ThemeContext_1 = __webpack_require__(48171);
const SignInModalActions_1 = __webpack_require__(22509);
const OpenAIModalActions_1 = __webpack_require__(44354);
const UserNameModalActions_1 = __webpack_require__(61057);
const redux_2 = __webpack_require__(57744);
const cookies_1 = __importDefault(__webpack_require__(53788));
const get_substring_after_character_occurence_1 = __webpack_require__(16529);
const LiveReloadClient_1 = __webpack_require__(7117);
const AnalyticsClient_1 = __webpack_require__(71557);
const dataGateway_1 = __importDefault(__webpack_require__(48336));
const dataGateway_2 = __importDefault(__webpack_require__(69858));
const gateway_1 = __importDefault(__webpack_require__(80246));
const gateway_2 = __importDefault(__webpack_require__(4926));
const SwgClient_1 = __webpack_require__(26138);
const SegmentationClient_1 = __webpack_require__(93595);
const PermutiveSegmentationClient_1 = __webpack_require__(46664);
const SegmentatorRuClient_1 = __webpack_require__(10524);
const UserAuthenticationClient_1 = __webpack_require__(22214);
const ParselyClient_1 = __webpack_require__(5413);
const accessNegotiation_1 = __webpack_require__(27311);
const client_1 = __webpack_require__(45831);
const perf_tooling_1 = __webpack_require__(56822);
const yield_main_1 = __webpack_require__(56187);
const tracking_1 = __webpack_require__(75454);
const analytics_helpers_1 = __webpack_require__(56552);
const DefaultPage_1 = __webpack_require__(31042);
const cookie_1 = __webpack_require__(56892);
const bucket_1 = __webpack_require__(1915);
const i18n_provider_1 = __webpack_require__(20539);
const StylesProvider_1 = __webpack_require__(76700);
const ConsentProvider_1 = __webpack_require__(85438);
const chrome_extension_utils_1 = __webpack_require__(89240);
const boomerang_1 = __webpack_require__(9267);
const determineIfTheUserIsEntitled_1 = __webpack_require__(98937);
const snowplow_tracking_1 = __webpack_require__(14307);
const DynamicLayoutConfigManager_1 = __importDefault(__webpack_require__(96691));
const DynamicLayoutConfigProvider_1 = __webpack_require__(57819);
const ExperimentsProvider_1 = __webpack_require__(85878);
const { googleAnalytics } = __webpack_require__(90090);
const bookmarkHelpers = __webpack_require__(48373);
const { amgPartnerCookieName, authCookieName, authCompleteCookieName, authTrackingCookieName, oidcCookies: { id: idTokenName } } = cookies_1.default;
// We store the theme in redux as it allows us to "hot-reload" the brand
// identity through a Chrome extension
const ConnectedStylesProvider = (0, redux_2.connector)(({ children, scTheme }) => {
    return (react_1.default.createElement(StylesProvider_1.StylesProvider, { theme: scTheme },
        react_1.default.createElement(ThemeContext_1.ThemeProvider, { theme: (scTheme && scTheme.themeName) || 'standard' }, children)));
}, { keysToPluck: ['scTheme'] });
exports.PageFactory = {
    /**
     * Creates a PageComponent given a plugin.
     *
     * @param plugin - constructs a Page using the `component` and `reduce` phase operations
     * @returns PageComponent wrapped with redux store
     */
    create(PageComponent) {
        const ResolvedPageComponent = PageComponent || DefaultPage_1.DefaultPage;
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        return class Page extends react_1.default.Component {
            constructor(props) {
                super(props);
                const { componentConfig, config, renditions, transformed, featureFlags } = this.props;
                LiveReloadClient_1.LiveReloadClient.listenForReload();
                let { user } = transformed;
                // some plugin might have already resolved user authentication state
                if (!user?.isAuthResolved) {
                    const decodedToken = UserAuthenticationClient_1.UserAuthenticationClient.getDecodedAuthToken();
                    const isAuthenticated = UserAuthenticationClient_1.UserAuthenticationClient.isTokenValid(decodedToken);
                    const decodedIDtoken = UserAuthenticationClient_1.UserAuthenticationClient.getDecodedToken(idTokenName);
                    user = {
                        amguuid: decodedToken.sub,
                        email: decodedIDtoken.email || '',
                        hasUserAuthCheck: '',
                        isAuthResolved: false,
                        isAuthenticated,
                        xid: decodedIDtoken.xid || ''
                    };
                }
                // provides empty values for which would be later fulfilled by initUserData
                if (!user?.geo) {
                    user.geo = { countryCode: '' };
                }
                if (!Number.isInteger(user?.bucketNumber)) {
                    user.bucketNumber = 100;
                }
                const hasSearch = (0, get_1.default)(transformed, 'navigationSearch', true);
                const templateConfig = (0, get_1.default)(transformed, 'capabilityConfig', {
                    name: '',
                    layout: {
                        slots: []
                    }
                });
                this.dynamicLayoutConfigInstance = new DynamicLayoutConfigManager_1.default({
                    templateConfig
                });
                const state = {
                    config,
                    ...transformed,
                    hasSearch,
                    renditions,
                    componentConfig,
                    featureFlags,
                    user,
                    expDataLayerUpdated: false,
                    interactiveElementsState: {
                        accountLinkingPageAddressForm: {
                            errors: [],
                            isPending: false,
                            isSuccessful: false
                        },
                        accountLinkingPageNumberForm: {
                            errors: [],
                            isPending: false,
                            isSuccessful: false
                        },
                        redirect: {
                            isRedirecting: false
                        }
                    },
                    pageState: {
                        account: { linking: { shouldShowNumberForm: true } },
                        bookmarkStatus: { bookmarkId: null, isUrlBookmark: null }
                    },
                    onboarding: {
                        bookmarks: { onboardingStep: 'bookmarkAwareness' }
                    }
                };
                this.store = (0, redux_1.createStore)((0, redux_2.createRootReducer)(state), (0, extension_1.devToolsEnhancer)({}));
            }
            async componentDidMount() {
                client_1.cytokine.initialize(this.store);
                window.journeyDataGateway = (0, dataGateway_1.default)(this.store);
                window.dfpDataGateway = (0, dataGateway_2.default)(this.store);
                window.paymentGateway = (0, gateway_1.default)(this.store);
                window.paywallGateway = (0, gateway_2.default)(this.store);
                this.initUserData();
                const { transformed: { boomerang: boomerangOptions }, featureFlags } = this.props;
                ParselyClient_1.ParselyClient.initialize(this.store);
                // This sets a dispatcher for a globally available modal component that can be triggered via helper dispatcher methods
                (0, SignInModalActions_1.setModalDispatcher)(this.store.dispatch);
                (0, OpenAIModalActions_1.setOpenAIModalDispatcher)(this.store.dispatch);
                (0, UserNameModalActions_1.setUserNameModalDispatcher)(this.store.dispatch);
                const isBrowser = "object" === 'object';
                const deployEnv = this.store.getState()?.['ads.page']?.server;
                if (isBrowser && deployEnv !== 'production') {
                    (0, chrome_extension_utils_1.initializeExtensionCommunication)(window, this.store);
                }
                if (window.cnBus) {
                    window.cnBus.on('journey.client.state.update', this.journeyCallback.bind(this));
                    window.cnBus.emit('journey.ready');
                }
                await (0, yield_main_1.interactionResponse)();
                const { access } = this.store.getState();
                if (access && access.isAccessNegotiationEnabled) {
                    accessNegotiation_1.AccessNegotiationClient.initialize(this.store);
                }
                // This is always going to fire as every brand by default enables analytics
                AnalyticsClient_1.AnalyticsClient.initialize(this.store);
                (0, boomerang_1.initializeBoomerang)({ ...boomerangOptions });
                if (featureFlags.google?.swgEnabled) {
                    SwgClient_1.SwgClient.initialize(this.store);
                }
                SegmentationClient_1.SegmentationClient.initialize(this.store);
                if (featureFlags.enablePermutiveSegmentation) {
                    PermutiveSegmentationClient_1.PermutiveSegmentationClient.initialize(this.store);
                }
                if (featureFlags.enableSegmentatorRu) {
                    SegmentatorRuClient_1.SegmentatorRuClient.initialize(this.store);
                }
            }
            /**
             * Helper to get bookmarked status of an article page.
             * Called but not awaited in `initUserData` so that it doesn't block page
             * rendering.
             *
             * @returns undefined
             */
            async getPageBookmarkedStatus({ isAuthenticated, amgUUID }) {
                const { transformed, featureFlags } = this.props;
                const nativePageTypeMapping = {
                    nativegallery: 'gallery',
                    nativearticle: 'article'
                };
                const pageType = transformed['head.pageType'];
                const contentType = nativePageTypeMapping[pageType] || pageType;
                const hasBookmarkFeature = (0, get_1.default)(transformed, `${contentType}.showBookmark`) || false;
                const isUserAddingBookmark = window.location.search.includes('action=addBookmark');
                if (isAuthenticated && hasBookmarkFeature && !isUserAddingBookmark) {
                    const { coreDataLayer: { content: { contentId: copilotID }, page: { canonical: documentUrl }, site: { orgId: organizationID } }, userPlatform: { siteCode, userPlatformProxy, xClientID, federatedGraphqlUrl } } = transformed;
                    const shouldUseBookmarkV3 = featureFlags.shouldUseBookmarkV3 || false;
                    const bookmarkHelper = bookmarkHelpers(shouldUseBookmarkV3);
                    const bookmarkStatus = await bookmarkHelper.getBookmarkStatus({
                        amgUUID,
                        copilotID,
                        documentUrl,
                        organizationID,
                        siteCode,
                        userPlatformProxy,
                        xClientID,
                        federatedGraphqlUrl
                    });
                    this.store.dispatch({
                        type: 'SET_KEY',
                        key: 'pageState.bookmarkStatus',
                        value: { ...bookmarkStatus, isBookmarkLoading: false }
                    });
                }
            }
            /**
             * Called when receiving a state update message from journey.
             *
             * @returns undefined
             */
            journeyCallback({ key = '', value = '' } = {}) {
                if (key !== '')
                    this.store.dispatch({ type: 'SET_KEY', key, value });
            }
            // eslint-disable-next-line complexity
            initUserData() {
                const getCookie = (0, get_1.default)(window, 'cookie.get') ||
                    UserAuthenticationClient_1.UserAuthenticationClient.getDocumentCookie;
                const { user: { isAuthResolved, isAuthenticated }, martechPlatform: martechConfig } = this.store.getState();
                const { config } = this.props;
                let amgUUID = '';
                if (!isAuthResolved) {
                    const decodedToken = UserAuthenticationClient_1.UserAuthenticationClient.getDecodedAuthToken();
                    amgUUID = decodedToken.sub;
                    const isAuthenticated = UserAuthenticationClient_1.UserAuthenticationClient.isTokenValid(decodedToken);
                    const domain = (0, cookie_1.getCookieDomainFromHostname)();
                    if (!isAuthenticated) {
                        (0, cookie_1.deleteCookie)(authCookieName, domain);
                    }
                    const hasUserAuthCheck = UserAuthenticationClient_1.UserAuthenticationClient.getCookieValue(authTrackingCookieName);
                    const decodedIDtoken = UserAuthenticationClient_1.UserAuthenticationClient.getDecodedToken(idTokenName);
                    const isAuthComplete = UserAuthenticationClient_1.UserAuthenticationClient.getCookieValue(authCompleteCookieName);
                    if (isAuthComplete && isAuthenticated) {
                        googleAnalytics.emitUniqueGoogleTrackingEvent('auth-complete');
                        if (config?.snowplow?.enableSnowplow) {
                            const { featured = 'false', source = 'id.condenast.com' } = (0, utils_1.getParamsAsObjectFromURL)({
                                searchParams: window.location.search
                            });
                            const authData = {
                                type: 'complete',
                                subject: 'login',
                                platform: 'Verso',
                                source_type: source,
                                ...(0, tracking_1.getPlacementData)(featured === 'true')
                            };
                            (0, snowplow_tracking_1.trackUserAccountEvent)(authData);
                        }
                    }
                    (0, cookie_1.deleteCookie)(authCompleteCookieName, domain);
                    this.store.dispatch({
                        type: 'MERGE_KEY',
                        key: 'user',
                        value: {
                            amguuid: decodedToken.sub,
                            email: decodedIDtoken.email || '',
                            hasUserAuthCheck,
                            isAuthResolved: true,
                            isAuthenticated,
                            xid: decodedIDtoken.xid || '',
                            isEntitled: (0, determineIfTheUserIsEntitled_1.checkAccess)(martechConfig)
                        }
                    });
                    this.getPageBookmarkedStatus({
                        isAuthenticated,
                        amgUUID
                    });
                }
                this.store.dispatch({
                    type: 'MERGE_KEY',
                    key: 'user',
                    value: {
                        bucketNumber: (0, bucket_1.getBucketNumber)(getCookie('CN_xid')),
                        geo: { countryCode: getCookie('CN_geo_country_code') || '' }
                    }
                });
                // Split _gq cookie after second period for gaClientId
                const gaCookie = getCookie('_ga') || '';
                const gaClientId = (0, get_substring_after_character_occurence_1.subStrAfterCharacterOccurrence)(gaCookie, '.', 2);
                if (Array.isArray(window.dataLayer) &&
                    typeof window.dataLayer[0] === 'object') {
                    const { scopedForm: paymentMethod = '' } = (0, get_1.default)(this.props.transformed, 'payment', {});
                    const [contentID = ''] = (0, get_1.default)(this.store.getState()['ads.page'], 'keywords.copilotid', []);
                    const mdwId = (0, query_string_1.parse)(window.location.search.toLowerCase())?.cndid ||
                        '';
                    const user = {
                        account: {
                            amgUserId: amgUUID || getCookie(amgPartnerCookieName) || '',
                            loginStatus: isAuthenticated
                        },
                        gaClientId,
                        contentVisits: (0, analytics_helpers_1.getContentVisitsCount)(contentID),
                        xId: getCookie('CN_xid') || '',
                        mdwId,
                        monthlyVisits: (0, analytics_helpers_1.getMonthVisitsCount)(),
                        paymentMethod,
                        sparrowSessionId: getCookie('sID') || '',
                        sparrowUserId: getCookie('CN_sp') || '',
                        ...(0, snowplow_tracking_1.getSubscriptionData)()
                    };
                    const originalDataLayer = window.dataLayer[0];
                    window.dataLayer[0] = {
                        ...originalDataLayer,
                        user
                    };
                    // updating user context when dataLayer updates
                    window.cnBus?.emit('user.context.updated');
                }
            }
            render() {
                const { locale, transformed } = this.props;
                const translations = (0, get_1.default)(transformed, 'translations', {});
                const hydratePerformance = () => {
                    (0, perf_tooling_1.perfMark)('react-hydrate-end');
                    (0, perf_tooling_1.perfMeasure)('react-hydrate', 'react-hydrate-start', 'react-hydrate-end');
                };
                return (react_1.default.createElement(i18n_provider_1.I18nProvider, { locale: locale, translations: translations },
                    react_1.default.createElement(ConsentProvider_1.ConsentProvider, { isEnabled: transformed.consentEnabled },
                        react_1.default.createElement(react_redux_1.Provider, { store: this.store },
                            react_1.default.createElement(ExperimentsProvider_1.ExperimentsProvider, { config: this.props.config, store: this.store },
                                react_1.default.createElement(react_gateway_1.GatewayProvider, null,
                                    react_1.default.createElement(ConnectedStylesProvider, null,
                                        react_1.default.createElement(DynamicLayoutConfigProvider_1.DynamicLayoutConfigProvider, { instance: this.dynamicLayoutConfigInstance },
                                            react_1.default.createElement("div", { ref: hydratePerformance },
                                                react_1.default.createElement(ResolvedPageComponent, null))))))))));
            }
        };
    }
};
//# sourceMappingURL=PageFactory.js.map

/***/ }),

/***/ 56552:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getContentVisitsCount = exports.getMonthVisitsCount = void 0;
const MONTH_VISITS_STORE = 'month-visits';
const CONTENT_IDS_STORE = 'content-ids';
const local_storage_error_boundary_1 = __webpack_require__(60663);
const localStore = (0, local_storage_error_boundary_1.storageFactory)(() => window.localStorage);
/**
 * Get registered last visit based on localStorage.
 *
 * @returns {string} last visit as a number since unix epoch.
 */
const getLastVisit = () => {
    if (false) {}
    const visits = localStore.getItem(MONTH_VISITS_STORE) || '';
    return visits.split(',').pop();
};
/**
 * Check if the last visit is one the same month of the current one and indicate reset.
 *
 * @returns {boolean} true if the monthly count should be reset.
 */
const isMonthlyReset = () => {
    const lastVisitStr = getLastVisit() || '';
    const lastVisit = parseInt(lastVisitStr, 10);
    const lastDate = new Date(lastVisit);
    const current = new Date();
    return (lastDate.getFullYear() !== current.getFullYear() ||
        lastDate.getMonth() !== current.getMonth());
};
/**
 * Check if the last visit is one on the same day of the current one and indicate increment.
 *
 * @returns {boolean} true if the daily increment should be done.
 */
const isDailyIncrement = () => {
    const lastVisitStr = getLastVisit() || '';
    const lastVisit = parseInt(lastVisitStr, 10);
    const lastDate = new Date(lastVisit);
    const current = new Date();
    return (lastDate.getFullYear() !== current.getFullYear() ||
        lastDate.getMonth() !== current.getMonth() ||
        lastDate.getDate() !== current.getDate());
};
/**
 * Get the number of views in a certain month.
 *
 * @returns {number} number of monthly visits.
 */
const getMonthVisitsCount = () => {
    if (false) {}
    const monthlyVisits = localStore.getItem(MONTH_VISITS_STORE) || '';
    const now = Date.now().toString();
    if (!monthlyVisits || isMonthlyReset()) {
        localStore.setItem(MONTH_VISITS_STORE, now);
        return 1;
    }
    const visits = monthlyVisits.split(',').filter(String);
    if (isDailyIncrement()) {
        visits.push(now);
    }
    localStore.setItem(MONTH_VISITS_STORE, visits.join(','));
    return visits.length;
};
exports.getMonthVisitsCount = getMonthVisitsCount;
const getContentVisitsCount = (contentID) => {
    if (false) {}
    const contentVisits = localStore.getItem(CONTENT_IDS_STORE) || '';
    if (!contentVisits || isMonthlyReset()) {
        try {
            localStore.setItem(CONTENT_IDS_STORE, contentID);
            return 1;
        }
        catch (error) {
            return 0;
        }
    }
    const visitedContent = contentVisits.split(',').filter(String);
    if (visitedContent.every((id) => id !== contentID)) {
        visitedContent.push(contentID);
    }
    try {
        localStore.setItem(CONTENT_IDS_STORE, visitedContent.join(','));
        return visitedContent.length;
    }
    catch (error) {
        return 0;
    }
};
exports.getContentVisitsCount = getContentVisitsCount;
//# sourceMappingURL=analytics-helpers.js.map

/***/ }),

/***/ 89240:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.initializeExtensionCommunication = exports.handleMessages = void 0;
const handleMessages = (store, orginalTheme) => (event) => {
    if (event.data.namespace === 'verso-bi-extension') {
        const { payload } = event.data;
        if (payload.type === 'REVERT_THEME') {
            const revertThemeAction = {
                type: 'MERGE_KEY',
                key: 'scTheme',
                value: orginalTheme
            };
            store.dispatch(revertThemeAction);
        }
        // This is mostly for security, so the targeted message
        // can only target the styled component theme and not modify other
        // parts of the store for now.
        payload.key = 'scTheme';
        store.dispatch(payload);
    }
};
exports.handleMessages = handleMessages;
const initializeExtensionCommunication = (window, store) => {
    if (typeof window === 'object') {
        const orginalTheme = store.getState().scTheme; // enable this to get access to redux store
        const messageHandler = (0, exports.handleMessages)(store, orginalTheme);
        window.addEventListener('message', messageHandler, false);
        window.versoThemerExtensionInitialized = true;
    }
};
exports.initializeExtensionCommunication = initializeExtensionCommunication;
//# sourceMappingURL=chrome-extension-utils.js.map

/***/ }),

/***/ 69750:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getComponentConfigFromExperimentsPayload = exports.getConfigurationContentType = void 0;
const get_1 = __importDefault(__webpack_require__(58156));
const merge_1 = __importDefault(__webpack_require__(55364));
const get_content_type_1 = __importDefault(__webpack_require__(14515));
/**
 * The configuration includes all the normal content types as path plus homepages and channels which are bundles.
 */
const getConfigurationContentType = (workflowContext) => {
    const defaultContentType = (0, get_content_type_1.default)(workflowContext);
    const useHomepageConfigOnChannels = (0, get_1.default)(workflowContext, 'appConfig.tenant.bundle.useHomepageConfigOnChannels', true);
    const homepageRegex = useHomepageConfigOnChannels
        ? /homepage|channel/i
        : /homepage/i;
    const isHomepage = defaultContentType === 'bundle' &&
        (0, get_1.default)(workflowContext, 'fetched.primary.bundleType').match(homepageRegex);
    const adjustedContentType = isHomepage ? 'homepage' : defaultContentType;
    return adjustedContentType;
};
exports.getConfigurationContentType = getConfigurationContentType;
/**
 * Parse experiments assignments and return componentConfig object.
 *
 * @param experiments assignments
 * @returns componentConfig object
 */
function getComponentConfigFromExperimentsPayload(payload, contentType) {
    let mergedConfig = {};
    try {
        if (payload && payload.client && contentType) {
            const { client } = payload;
            Object.keys(client).forEach((key) => {
                const name = `${contentType}PageContext`.toLowerCase();
                if (name && name.includes(key.toLowerCase().replace('Context', ''))) {
                    mergedConfig = (0, merge_1.default)({}, mergedConfig, client[key]);
                }
            });
        }
    }
    catch (e) {
        return mergedConfig;
    }
    return mergedConfig;
}
exports.getComponentConfigFromExperimentsPayload = getComponentConfigFromExperimentsPayload;
//# sourceMappingURL=config-resolver-utils.js.map

/***/ }),

/***/ 85878:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ExperimentsProvider = exports.GrowthBookReadyContext = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const GrowthBookClient_1 = __webpack_require__(23882);
const perf_tooling_1 = __webpack_require__(56822);
exports.GrowthBookReadyContext = (0, react_1.createContext)({ isGBInitialized: false });
const ExperimentsProvider = ({ children, config, store }) => {
    const [isGBInitialized, setIsGBInitialized] = (0, react_1.useState)(false);
    const enableScript = !!( true
        ? new URLSearchParams(window.location.search).get('GBScript-tag') || ''
        : 0);
    (0, react_1.useEffect)(() => {
        const growthbookClient = new GrowthBookClient_1.GrowthBookClient(enableScript, config, store);
        const initializeExperiments = async () => {
            if (!enableScript) {
                (0, perf_tooling_1.perfMark)('growthbook-react-initialize-start');
                await growthbookClient.initialize(navigator);
                (0, perf_tooling_1.perfMark)('growthbook-react-initialize-end');
                (0, perf_tooling_1.perfMeasure)('growthbook-react-initialize', 'growthbook-react-initialize-start', 'growthbook-react-initialize-end');
            }
            (0, perf_tooling_1.perfMark)('growthbook-experiments-start');
            growthbookClient.runExperiments();
            (0, perf_tooling_1.perfMark)('growthbook-experiments-end');
            (0, perf_tooling_1.perfMeasure)('growthbook-experiments', 'growthbook-experiments-start', 'growthbook-experiments-end');
            setIsGBInitialized(true);
        };
        initializeExperiments().catch((err) => {
            console.error('Error initializing Experiments', err);
            setIsGBInitialized(false);
        });
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    return (react_1.default.createElement(exports.GrowthBookReadyContext.Provider, { value: { isGBInitialized } }, children));
};
exports.ExperimentsProvider = ExperimentsProvider;
//# sourceMappingURL=ExperimentsProvider.js.map

/***/ }),

/***/ 23882:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.GrowthBookClient = void 0;
const GrowthBookReactClient_1 = __webpack_require__(10329);
const GrowthBookScriptClient_1 = __webpack_require__(81805);
class GrowthBookClient {
    constructor(enableScript, config, store) {
        this.enableScript = enableScript;
        this.config = config;
        this.client = this.createClient(enableScript, config, store);
    }
    createClient(enableScript, config, store) {
        if (enableScript && window._growthbook) {
            return new GrowthBookScriptClient_1.GrowthBookScriptClient(store, window._growthbook);
        }
        return new GrowthBookReactClient_1.GrowthBookReactClient(config, store);
    }
    async initialize(navigator) {
        if (!this.enableScript &&
            this.client instanceof GrowthBookReactClient_1.GrowthBookReactClient &&
            this.client.initGrowthBook) {
            if (GrowthBookReactClient_1.GrowthBookReactClient.canCreate(this.config, navigator)) {
                try {
                    await this.client.initGrowthBook(navigator);
                }
                catch (err) {
                    console.error('Error initializing Experiments', err);
                }
            }
        }
    }
    runExperiments() {
        this.client.runExperiments();
    }
}
exports.GrowthBookClient = GrowthBookClient;
//# sourceMappingURL=GrowthBookClient.js.map

/***/ }),

/***/ 10329:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.GrowthBookReactClient = void 0;
const growthbook_react_1 = __webpack_require__(63066);
const cookie_1 = __webpack_require__(56892);
const local_storage_error_boundary_1 = __webpack_require__(60663);
const config_resolver_utils_1 = __webpack_require__(69750);
const helpers_1 = __webpack_require__(23914);
const device_detection_1 = __webpack_require__(72362);
const is_bot_1 = __webpack_require__(9170);
const types_1 = __webpack_require__(84410);
const types_2 = __webpack_require__(96693);
const perf_tooling_1 = __webpack_require__(56822);
class GrowthBookReactClient {
    /**
     * Create an instance that connect to the redis service at the given hostname.
     * Create promise versions of a few instance methods.
     *
     * @param config - This has the growthbook configuration coming from verso config
     * @param store - This is the redux global store to add growthbookClient after growthbook has been setup
     */
    constructor(config, store) {
        this.config = config;
        this.store = store;
        this.localStorage = (0, local_storage_error_boundary_1.storageFactory)(() => window.localStorage);
    }
    getGbInstance() {
        return this.gb;
    }
    /**
     * Check if GrowthBookReactClient can instantiate
     *
     * @param config - This has the growthbook configuration coming from verso config
     * @returns boolean
     */
    static canCreate(config, navigator) {
        if (window.cnBus && navigator && !(0, is_bot_1.isBot)(navigator.userAgent)) {
            return !!(config.growthbook.enableClient &&
                config.growthbook.apiHost &&
                config.growthbook.clientSdkKey);
        }
        return false;
    }
    async initGrowthBook(navigator) {
        const amgUserPartner = (0, cookie_1.getCookie)('amg_user_partner');
        const cnDebug = (0, cookie_1.getCookie)('cn-debug');
        const expId = (0, cookie_1.getCookie)('CN_xid');
        const segment = (0, cookie_1.getCookie)('CN_segments');
        const { apiHost, clientSdkKey: growthbookSdk } = this.config.growthbook;
        const { userAgent } = navigator;
        const { user, coreDataLayer } = this.store.getState();
        const { section, contentType, hasBuyButtons, brandSlug } = coreDataLayer.content;
        const stickyBrands = ['tatler', 'woi'];
        const stickyBucketService = new growthbook_react_1.LocalStorageStickyBucketService({
            prefix: 'gbStickyBuckets__'
        });
        const isStickyBucketingEnabled = stickyBrands.includes(brandSlug) && !!expId;
        if (isStickyBucketingEnabled) {
            this.localStorageXidCleanUp('gbStickyBuckets__', expId);
        }
        this.gb = new growthbook_react_1.GrowthBook({
            apiHost: apiHost,
            clientKey: growthbookSdk,
            enableDevMode: cnDebug === 'true',
            stickyBucketService: isStickyBucketingEnabled
                ? stickyBucketService
                : undefined,
            attributes: {
                userAgent,
                id: expId,
                url: window.location.href,
                isMobile: !(0, device_detection_1.isDesktopBrowser)(),
                loggedIn: user && user.isAuthenticated,
                segment,
                section,
                contentType,
                hasBuyButtons: hasBuyButtons === 'true',
                amgUserPartner
            }
        });
        this.gb.setTrackingCallback((experiment, result) => {
            (0, perf_tooling_1.perfMark)('growthbook-react-assignment-start');
            const expDataLayer = [];
            let gbAssignment;
            if (result.featureId) {
                gbAssignment = this.gb.evalFeature(result.featureId);
            }
            else {
                gbAssignment = { ...result, experiment_key: experiment?.key || '' };
            }
            const currentExp = this.createSnowplowExp(gbAssignment);
            expDataLayer.push(currentExp);
            this.store.dispatch({
                type: types_2.ReduxActionTypes.MERGE_KEY,
                key: types_2.ReduxKeyTypes.EXPERIMENT_DATA,
                value: currentExp
            });
            this.setupDataLayerExperiments(expDataLayer);
            (0, perf_tooling_1.perfMark)('growthbook-react-assignment-end');
            (0, perf_tooling_1.perfMeasure)('growthbook-react-assignment', 'growthbook-react-assignment-start', 'growthbook-react-assignment-end');
        });
        await this.gb.init({ streaming: false });
    }
    /**
     * This does the component swapping on verso by dispatching the data to be swapped and the content type
     * @param experimentsData - This is the experiment result from growthbook. The result is based on the bucket you fall in
     */
    updateComponentBeforeRendering(experimentsData) {
        const state = this.store.getState();
        const contentType = state['head.pageType'];
        this.store.dispatch({
            type: types_2.ReduxActionTypes.MERGE_KEY,
            key: types_2.ReduxKeyTypes.COMPONENT_CONFIG,
            value: (0, config_resolver_utils_1.getComponentConfigFromExperimentsPayload)(experimentsData, contentType)
        });
    }
    /**
     * Removes Growthbook local storage keys that are not related to the current users xid
     * @param prefix - Local Storage Prefix e.g. gbStickyBuckets__
     * @param xid - User xid
     * @returns void
     */
    localStorageXidCleanUp(prefix, xid) {
        if (!xid) {
            return;
        }
        const keysToRemove = [];
        for (let i = 0; i < this.localStorage.length; i++) {
            const key = this.localStorage.key(i);
            if (key && key.startsWith(prefix) && !key.includes(xid)) {
                keysToRemove.push(key);
            }
        }
        keysToRemove.forEach((key) => this.localStorage.removeItem(key));
    }
    /**
     * Adds assignments to window.dataLayer
     * @param assignments - This is an array of SnowplowExp
     */
    setupDataLayerExperiments(assignments) {
        if (Array.isArray(window.dataLayer) &&
            typeof window.dataLayer[0] === 'object' &&
            assignments.length > 0) {
            window.dataLayer[0].experiments = (0, helpers_1.mergeAssignments)(assignments, window.dataLayer[0].experiments || []);
            if (window.cns) {
                const { experiments } = window.dataLayer[0];
                const { pageContext } = window.cns;
                pageContext.experiments = (0, helpers_1.formatExperimentsForPageContext)(experiments);
            }
            window.cnBus?.emit('experiments.assignments.processed');
        }
    }
    /**
     * This creates SnowplowExp object
     *
     * @param gbAssignment - This is the experiment result from growthbook
     * @returns SnowplowExp object
     */
    createSnowplowExp(gbAssignment) {
        function isFeatureResult(assignment) {
            return 'experiment' in assignment;
        }
        let experiment_id;
        let feature_id;
        let variation;
        let variation_name;
        let payload = {};
        if (isFeatureResult(gbAssignment)) {
            experiment_id = gbAssignment.experiment?.key || '';
            feature_id = gbAssignment.experimentResult?.featureId || '';
            variation = gbAssignment.experimentResult?.variationId?.toString() || '';
            variation_name = gbAssignment.experimentResult?.name || '';
            payload = gbAssignment.experimentResult?.value || {};
        }
        else {
            experiment_id = gbAssignment.experiment_key || '';
            feature_id = gbAssignment.featureId || '';
            variation = gbAssignment.variationId?.toString() || '';
            variation_name = gbAssignment.name || '';
            payload = gbAssignment.value || {};
        }
        const dataLayer = {
            experiment_id,
            status: types_1.ExperimentAssignmentTypes.CLIENT_ASSIGNMENT,
            feature_id,
            variation,
            variation_name,
            payload
        };
        this.store.dispatch({
            type: types_2.ReduxActionTypes.MERGE_KEY,
            key: types_2.ReduxKeyTypes.EXPERIMENT_DATA,
            value: dataLayer
        });
        return dataLayer;
    }
    makeExperimentAssignments(features) {
        const assignments = [];
        if (Object.keys(features).length > 0) {
            const experiments = Object.keys(features);
            for (const experiment of experiments) {
                const gbAssignment = this.gb.evalFeature(experiment);
                if (gbAssignment.source !== 'defaultValue') {
                    assignments.push(gbAssignment);
                }
            }
        }
        return assignments;
    }
    updateComponentsWithAssignments(assignments) {
        assignments.forEach((assignment) => {
            this.updateComponentBeforeRendering(assignment.value || {});
        });
    }
    runExperiments() {
        const features = this.gb.getFeatures();
        const assignments = this.makeExperimentAssignments(features);
        this.updateComponentsWithAssignments(assignments);
    }
}
exports.GrowthBookReactClient = GrowthBookReactClient;
//# sourceMappingURL=GrowthBookReactClient.js.map

/***/ }),

/***/ 81805:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.GrowthBookScriptClient = void 0;
const config_resolver_utils_1 = __webpack_require__(69750);
const types_1 = __webpack_require__(96693);
class GrowthBookScriptClient {
    /**
     * Create an instance that uses an existing GrowthBook instance from the script tag.
     *
     * @param store - Redux global store for dispatching experiment data
     * @param growthbook - Pre-initialized GrowthBook instance from window._growthbook
     */
    constructor(store, growthbook) {
        this.growthbook = growthbook;
        this.store = store;
    }
    /**
     * This does the component swapping on verso by dispatching the data to be swapped and the content type
     * @param experimentsData - This is the experiment result from growthbook. The result is based on the bucket you fall in
     */
    updateComponentBeforeRendering(experimentsData) {
        const state = this.store.getState();
        const contentType = state['head.pageType'];
        this.store.dispatch({
            type: types_1.ReduxActionTypes.MERGE_KEY,
            key: types_1.ReduxKeyTypes.COMPONENT_CONFIG,
            value: (0, config_resolver_utils_1.getComponentConfigFromExperimentsPayload)(experimentsData, contentType || 'default')
        });
    }
    updateComponentsWithAssignments(assignments) {
        assignments.forEach((assignment) => {
            this.updateComponentBeforeRendering(assignment.value || {});
        });
    }
    makeExperimentAssignments(features) {
        const assignments = [];
        if (Object.keys(features).length > 0) {
            const experiments = Object.keys(features);
            for (const experiment of experiments) {
                const gbAssignment = this.growthbook.evalFeature(experiment);
                if (gbAssignment.source !== 'defaultValue') {
                    assignments.push(gbAssignment);
                }
            }
        }
        return assignments;
    }
    runExperiments() {
        try {
            const features = this.growthbook.getFeatures();
            const assignments = this.makeExperimentAssignments(features);
            this.updateComponentsWithAssignments(assignments);
        }
        catch (error) {
            console.error('Error running experiments:', error);
        }
    }
}
exports.GrowthBookScriptClient = GrowthBookScriptClient;
//# sourceMappingURL=GrowthBookScriptClient.js.map

/***/ }),

/***/ 63190:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.withExperimentHook = void 0;
const growthbook_react_1 = __webpack_require__(63066);
const react_1 = __importStar(__webpack_require__(96540));
const redux_1 = __webpack_require__(57744);
// Function for merging props and modifiedProps
function deepMerge(target, source) {
    for (const key in source) {
        if (source[key] &&
            typeof source[key] === 'object' &&
            !Array.isArray(source[key])) {
            target[key] = deepMerge(target[key] ? { ...target[key] } : {}, source[key]);
        }
        else {
            target[key] = source[key];
        }
    }
    return target;
}
const withExperimentHook = (Component) => {
    const ExperimentHoc = (props) => {
        const { growthbook } = (0, react_1.useContext)(growthbook_react_1.GrowthBookContext);
        let exps = {};
        let modifiedProps = {};
        let gb;
        if ( true && window?._growthbook) {
            gb = window._growthbook;
        }
        else {
            gb = growthbook;
        }
        if (gb) {
            const experiments = Object.keys(gb.getFeatures());
            if (experiments.length > 0) {
                const componentName = Component.displayName || '?';
                for (const exp of experiments) {
                    const featureValue = gb.getFeatureValue(exp, {});
                    const { targets } = featureValue;
                    if (targets &&
                        targets.includes(componentName) &&
                        featureValue.props) {
                        modifiedProps = deepMerge(modifiedProps, featureValue.props);
                    }
                    exps = {
                        ...exps,
                        [exp]: featureValue
                    };
                }
            }
        }
        const finalProps = deepMerge({ ...props }, modifiedProps);
        return react_1.default.createElement(Component, { ...finalProps, featureValue: exps });
    };
    return (0, redux_1.connector)(ExperimentHoc, { keysToPluck: [] });
};
exports.withExperimentHook = withExperimentHook;
//# sourceMappingURL=experiment-hook.js.map

/***/ }),

/***/ 23914:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.formatExperimentsForPageContext = exports.updateAttrBasedOnExp = exports.mergeAssignments = void 0;
/**
 * Produces the `experiments` event, from page's final transformed state after all transformers were run.
 * Note: This function will mutate "coreDataLayer" state.
 */
const mergeAssignments = function (newAssignments = [], existingAssignments = []) {
    const merge = [...existingAssignments, ...newAssignments];
    const uniqueAssignments = new Map();
    merge.forEach((item) => {
        const existing = uniqueAssignments.get(item.experiment_id);
        if (!existing ||
            (item.status === 'CLIENT_ASSIGNMENT' &&
                existing.status === 'EDGE_ASSIGNMENT')) {
            uniqueAssignments.set(item.experiment_id, item);
        }
    });
    // Return the values of the map as the final result
    return Array.from(uniqueAssignments.values());
};
exports.mergeAssignments = mergeAssignments;
const updateAttrBasedOnExp = function (features) {
    if (true) {
        if (features) {
            Object.keys(features).forEach((featureId) => {
                const assignment = features[featureId];
                const isValidPayload = assignment.attribute &&
                    assignment.attributeValue &&
                    assignment.targetAttribute &&
                    assignment.targetAttributeValue;
                if (isValidPayload) {
                    const elements = document.querySelectorAll(`[${assignment.targetAttribute}=${assignment.targetAttributeValue}]`);
                    elements.forEach((element) => {
                        element[assignment.attribute] = assignment.attributeValue;
                    });
                }
            });
        }
    }
};
exports.updateAttrBasedOnExp = updateAttrBasedOnExp;
/**
 * Formats the client side experiments for the window.cns.pageContext object
 */
const formatExperimentsForPageContext = function (experiments) {
    if (!experiments || !experiments.length) {
        return {};
    }
    const bucketLabel = [];
    const experimentLabel = [];
    const payloadArray = [];
    experiments &&
        experiments.forEach((experiment) => {
            const { variation_name, experiment_id, payload } = experiment;
            bucketLabel.push(`${variation_name}`);
            experimentLabel.push(`${experiment_id}`);
            // Include payload as object in array
            // If payload is an array, spread it; otherwise push as single object
            if (Array.isArray(payload)) {
                payloadArray.push(...payload);
            }
            else if (payload) {
                payloadArray.push(payload);
            }
        });
    return {
        bucketLabel,
        experimentLabel,
        payload: payloadArray
    };
};
exports.formatExperimentsForPageContext = formatExperimentsForPageContext;
//# sourceMappingURL=helpers.js.map

/***/ }),

/***/ 67506:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.isValidCategory = exports.checkFilterApplied = exports.flatCategoryList = exports.checkAndMapFilterParamValue = exports.mapTypeCategoryAndValue = exports.convertStringAsSlug = exports.queryParamsForPagination = exports.convertQueryParamToApiParam = exports.extractCommerceProductKeyfromIdentifier = exports.isCommerceProduct = void 0;
const QUERY_PARAM_LABEL = ['Type'];
const FILTERABLE_PARAMS = ['category', 'color', 'brand'];
const FILTER_SORTING_PARAMS = ['category', 'color', 'brand', 'sort'];
const { parseQueryParams } = __webpack_require__(12311);
const isCommerceProduct = (item) => {
    if (item.metadata &&
        item.metadata.contentType === 'contentreference' &&
        item.provider === 'commerce-tools') {
        return true;
    }
    return false;
};
exports.isCommerceProduct = isCommerceProduct;
const extractCommerceProductKeyfromIdentifier = (product) => {
    const [_, ...identifier] = product.identifier.split(':');
    const exractedKey = identifier.join(':');
    return exractedKey;
};
exports.extractCommerceProductKeyfromIdentifier = extractCommerceProductKeyfromIdentifier;
const convertQueryParamToApiParam = (filterParams) => {
    if (!filterParams)
        return '';
    const paramsKeyValueArray = filterParams.split('&');
    const parsedQueryParams = [];
    paramsKeyValueArray.forEach((element) => {
        const [paramKey, queryParamValue] = element.split('=');
        if (FILTERABLE_PARAMS.includes(paramKey)) {
            const decodedParamValue = decodeURIComponent(queryParamValue);
            // to handle pagination encoded multi params separated by space
            const multiParamValueCheck = decodedParamValue.replace(/ /g, '+');
            const paramValue = multiParamValueCheck.split('+');
            if (paramKey !== 'category') {
                parsedQueryParams.push(`${paramKey}::${paramValue.join()}`);
                // To handle the bundle category query params on bundle when category=PIM PLP
            }
            else if (paramKey === 'category' && decodedParamValue !== 'PIM PLP') {
                parsedQueryParams.push(`${paramKey}::${paramValue.join()}`);
            }
        }
    });
    return parsedQueryParams.join('|');
};
exports.convertQueryParamToApiParam = convertQueryParamToApiParam;
const queryParamsForPagination = (filterParams) => {
    if (!filterParams)
        return '';
    const paramsKeyValueArray = filterParams.replace('?', '').split('&');
    const parsedQueryParams = [];
    let sort = '';
    let page = '';
    paramsKeyValueArray.forEach((element) => {
        const [paramKey, queryParamValue] = element.split('=');
        if (FILTERABLE_PARAMS.includes(paramKey)) {
            const decodeParamValue = decodeURIComponent(queryParamValue).replace(/ /g, '+');
            parsedQueryParams.push(`${paramKey}=${decodeParamValue}`);
        }
        else if (paramKey === 'sort') {
            sort = decodeURIComponent(queryParamValue);
        }
        else if (paramKey === 'page') {
            page = queryParamValue;
        }
    });
    return {
        queryString: parsedQueryParams.join('&'),
        sort,
        page
    };
};
exports.queryParamsForPagination = queryParamsForPagination;
const convertStringAsSlug = (str) => {
    return str
        .toLowerCase()
        .replace(/[^\w ]+/g, '')
        .replace(/ +/g, '-');
};
exports.convertStringAsSlug = convertStringAsSlug;
const mapTypeCategoryAndValue = ({ key, value }, filterData) => {
    const filterCategory = filterData.find((item) => item.label.toLowerCase() === key.toLowerCase());
    const filterValues = filterCategory &&
        filterCategory.children
            .filter((child) => value.includes((0, exports.convertStringAsSlug)(child.label)))
            .map((item) => item.value);
    return {
        key: filterCategory?.value || key,
        value: filterValues
    };
};
exports.mapTypeCategoryAndValue = mapTypeCategoryAndValue;
const checkAndMapFilterParamValue = (queryParams, filterData, directUrlCategory = '') => {
    const paramsKeyValueArray = queryParams.replace('?', '').split('&');
    const updatedQueryParams = [];
    paramsKeyValueArray.forEach((element) => {
        const [paramKey, queryParamValue] = element.split('=');
        const multiParamValueCheck = queryParamValue
            ? decodeURIComponent(queryParamValue).replace(/ /g, '+')
            : '';
        const paramValue = multiParamValueCheck.split('+');
        const allowedFitlterLabels = QUERY_PARAM_LABEL.map((item) => item.toLowerCase());
        // Map 'category' URL parameter to 'Type' label for processing
        const paramKeyForLabel = paramKey === 'category' ? 'type' : paramKey;
        if (paramValue &&
            paramKey &&
            allowedFitlterLabels.includes(paramKeyForLabel.toLowerCase())) {
            if (directUrlCategory === 'category') {
                const categoryIds = filterData
                    .filter((item) => paramValue.includes((0, exports.convertStringAsSlug)(item.label)))
                    .map((item) => item.value);
                categoryIds.length &&
                    updatedQueryParams.push(`categoryId::${categoryIds.join()}`);
            }
        }
        else if (paramKey && FILTERABLE_PARAMS.includes(paramKey)) {
            updatedQueryParams.push(`${paramKey}::${paramValue.join()}`);
        }
    });
    return updatedQueryParams.join('|');
};
exports.checkAndMapFilterParamValue = checkAndMapFilterParamValue;
const flatCategoryList = (categories) => {
    let children = [];
    const flattenCategory = categories.map((item) => {
        if (item.children && item.children.length) {
            children = [...children, ...item.children];
        }
        return item;
    });
    return flattenCategory.concat(children.length ? (0, exports.flatCategoryList)(children) : children);
};
exports.flatCategoryList = flatCategoryList;
const checkFilterApplied = (queryParams) => {
    if (!queryParams)
        return false;
    const queryParamObj = parseQueryParams(queryParams);
    return FILTER_SORTING_PARAMS.find((param) => param in queryParamObj);
};
exports.checkFilterApplied = checkFilterApplied;
const isValidCategory = (categoryIdFromFacets, categoryInfoFromCategoryApi, collectionCategory) => {
    const isCurrentCategoryValid = !categoryInfoFromCategoryApi.key.startsWith('gpc-') &&
        !(collectionCategory && collectionCategory.id === categoryIdFromFacets) &&
        categoryInfoFromCategoryApi.id === categoryIdFromFacets;
    return isCurrentCategoryValid;
};
exports.isValidCategory = isValidCategory;
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 9267:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.initializeBoomerang = exports.getBoomerangConfig = void 0;
const get_1 = __importDefault(__webpack_require__(58156));
const autopilot_components_boomerang_1 = __webpack_require__(69006);
function getBoomerangConfig(workflowContext) {
    const shouldSampleBoom = (0, get_1.default)(workflowContext, 'request.query.boom-sample');
    const brand = (0, get_1.default)(workflowContext, 'config.brand.deprecatedSlug');
    const contentType = (0, get_1.default)(workflowContext, 'fetched.primary.meta.modelName') || 'unknown';
    const sample = shouldSampleBoom ||
        (0, get_1.default)(workflowContext, 'fetched.primary.meta.boomerangSample') ||
        undefined;
    return {
        tags: {
            brand,
            contentType,
            brand_slug: brand,
            content_type: contentType
        },
        sample
    };
}
exports.getBoomerangConfig = getBoomerangConfig;
function initializeBoomerang(config) {
    if (config && config.tags && config.tags.brand) {
        (0, autopilot_components_boomerang_1.loadBoomerang)(config);
    }
}
exports.initializeBoomerang = initializeBoomerang;
//# sourceMappingURL=boomerang.js.map

/***/ }),

/***/ 16529:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.subStrAfterCharacterOccurrence = void 0;
/**
 * Allows us to return a substring from a string after a set amount occurrences of a character
 *
 * @param str - string
 * @param character - string to use for dividing substring
 * @param occurence - number of times for character
 * @returns {string} - substring or empty string
 */
function subStrAfterCharacterOccurrence(str, character, occurence) {
    if (typeof str != 'string') {
        return '';
    }
    const splitString = str.split(character) || [];
    if (splitString.length < occurence) {
        return '';
    }
    let strPrefix = '';
    splitString.forEach((splitStr, index) => {
        if (index < occurence) {
            strPrefix += `${splitStr}${character}`;
        }
    });
    const splitStrByPrefix = str.split(strPrefix);
    return splitStrByPrefix[1] || '';
}
exports.subStrAfterCharacterOccurrence = subStrAfterCharacterOccurrence;
//# sourceMappingURL=get-substring-after-character-occurence.js.map

/***/ }),

/***/ 92704:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Consent = exports.ConsentChannel = void 0;
const event_1 = __webpack_require__(53836);
var ConsentChannel;
(function (ConsentChannel) {
    ConsentChannel["CONSENT_ACCEPTED"] = "CONSENT_ACCEPTED";
    ConsentChannel["CONSENT_REJECTED"] = "CONSENT_REJECTED";
    ConsentChannel["CONSENT_UPDATED"] = "CONSENT_UPDATED";
})(ConsentChannel = exports.ConsentChannel || (exports.ConsentChannel = {}));
class Consent extends event_1.Event {
    constructor() {
        super(10); // Keep last 10 consent events
    }
}
exports.Consent = Consent;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 89245:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.registerKendraEvents = void 0;
const consent_1 = __webpack_require__(92704);
const track_component_1 = __webpack_require__(78788);
const window_event_1 = __webpack_require__(51735);
const xid_1 = __webpack_require__(78724);
/**
 * Initializes Kendra by registering all event classes from the event-registry directory
 */
const registerKendraEvents = () => {
    const kendra = window.Kendra;
    kendra.register('CONSENT', new consent_1.Consent());
    kendra.register('TRACK_COMPONENT', new track_component_1.TrackComponent());
    kendra.register('WINDOW_EVENT', new window_event_1.WindowEvent());
    kendra.register('XID', new xid_1.Xid());
    // Freeze Kendra to prevent further modifications
    freezeKendra();
};
exports.registerKendraEvents = registerKendraEvents;
const freezeKendra = () => {
    Object.defineProperty(window, 'Kendra', {
        value: window.Kendra,
        writable: false,
        configurable: false
    });
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 78724:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Xid = exports.XidChannel = void 0;
const event_1 = __webpack_require__(53836);
var XidChannel;
(function (XidChannel) {
    XidChannel["SET"] = "SET";
})(XidChannel = exports.XidChannel || (exports.XidChannel = {}));
class Xid extends event_1.Event {
    constructor() {
        super(2);
    }
}
exports.Xid = Xid;
//# sourceMappingURL=xid.js.map

/***/ }),

/***/ 7117:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.LiveReloadClient = void 0;
const liveReloadConfig_json_1 = __importDefault(__webpack_require__(18315));
class LiveReloadClient {
    static listenForReload() {
        if (false) {}
    }
}
LiveReloadClient.url = `http://localhost:${liveReloadConfig_json_1.default.socket_port}`;
exports.LiveReloadClient = LiveReloadClient;
//# sourceMappingURL=LiveReloadClient.js.map

/***/ }),

/***/ 57819:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.DynamicLayoutConfigProvider = exports.DynamicLayoutConfigContext = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const prop_types_1 = __importDefault(__webpack_require__(5556));
exports.DynamicLayoutConfigContext = (0, react_1.createContext)({
    instance: undefined
});
const DynamicLayoutConfigProvider = ({ children, instance }) => {
    return (react_1.default.createElement(exports.DynamicLayoutConfigContext.Provider, { value: { instance } }, children));
};
exports.DynamicLayoutConfigProvider = DynamicLayoutConfigProvider;
exports.DynamicLayoutConfigProvider.propTypes = {
    children: prop_types_1.default.node.isRequired,
    instance: prop_types_1.default.any
};
exports.DynamicLayoutConfigProvider.displayName = 'DynamicLayoutConfigProvider';
//# sourceMappingURL=DynamicLayoutConfigProvider.js.map

/***/ }),

/***/ 58201:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const react_1 = __webpack_require__(96540);
const PluginStore_1 = __importDefault(__webpack_require__(77423));
const ComponentStore_1 = __importDefault(__webpack_require__(73651));
class PluginSystem {
    constructor() {
        this.pluginStore = new PluginStore_1.default();
        this.componentStore = new ComponentStore_1.default();
    }
    registerPlugin(ComponentPlugin) {
        this.pluginStore.registerPlugin(new ComponentPlugin(this));
    }
    getFallbackComponent() {
        return this.componentStore.getFallbackComponent();
    }
    registerComponent(component) {
        this.componentStore.registerComponent(component);
    }
    getComponentDefinition(name) {
        return this.componentStore.getComponentDefinition(name);
    }
    renderComponent(slotMappingId, componentName, componentConfig) {
        const { component, props } = this.componentStore.getComponentWithProps(slotMappingId, componentName, componentConfig);
        return (0, react_1.createElement)(component, props);
    }
    getComponentWithProps(slotMappingId, componentName, componentConfig) {
        return this.componentStore.getComponentWithProps(slotMappingId, componentName, componentConfig);
    }
    getAllComponents() {
        return this.componentStore.getAllComponents();
    }
    bootPlugins() {
        this.pluginStore.registeredPlugins.forEach((plugin) => {
            plugin.boot();
            this.pluginStore.bootedPlugins.push(plugin);
        });
    }
}
exports["default"] = PluginSystem;
//# sourceMappingURL=PluginSystem.js.map

/***/ }),

/***/ 58157:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const PluginSystem_1 = __importDefault(__webpack_require__(58201));
const plugins_1 = __importDefault(__webpack_require__(5492));
const PluginSystemInstance = new PluginSystem_1.default();
plugins_1.default.forEach((plugin) => {
    PluginSystemInstance.registerPlugin(plugin);
});
PluginSystemInstance.bootPlugins();
exports["default"] = PluginSystemInstance;
//# sourceMappingURL=bootstrap.js.map

/***/ }),

/***/ 73651:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
const redux_1 = __webpack_require__(57744);
/**
 * Represents a component store that manages registered components and provides methods for interacting with them.
 */
class ComponentStore {
    constructor() {
        this.registeredComponents = {};
    }
    getFallbackComponent() {
        return this.registeredComponents.fallback.component;
    }
    registerComponent(component) {
        this.registeredComponents[component.name] = component;
    }
    getComponentDefinition(name) {
        return (this.registeredComponents[name] || this.registeredComponents.fallback);
    }
    getAllComponents() {
        // eslint-disable-next-line consistent-this
        const that = this;
        const ret = {};
        Object.keys(this.registeredComponents).forEach((key) => {
            ret[key] = that.registeredComponents[key].component;
        });
        return ret;
    }
    /**
     * Retrieves a component with its props based on the provided parameters.
     * @param slotMappingId - The ID of the slot mapping.
     * @param compName - The name of the component.
     * @param componentConfig - The configuration of the component.
     * @returns An object containing the component and its props
     */
    getComponentWithProps(slotMappingId, compName, componentSettings) {
        const component = this.registeredComponents[compName] || {};
        if (typeof component.component !== 'undefined') {
            const { componentConfig = {
                variation: 'default',
                settings: {}
            } } = componentSettings;
            const { settings = {} } = componentConfig;
            const Component = component.component;
            const ConnectedComponent = (0, redux_1.connector)(Component, {
                keysToSpread: [`capability.${slotMappingId}`]
            });
            return {
                component: ConnectedComponent,
                props: {
                    key: compName,
                    ...settings
                }
            };
        }
        return {
            component: this.registeredComponents.fallback.component,
            props: { message: `The component ${compName} is not found!` }
        };
    }
}
exports["default"] = ComponentStore;
//# sourceMappingURL=ComponentStore.js.map

/***/ }),

/***/ 96691:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const bootstrap_1 = __importDefault(__webpack_require__(58157));
class DynamicLayoutConfigManager {
    constructor({ templateConfig }) {
        const { name: capability = '', layout = { slots: [] } } = templateConfig;
        this.slots = layout.slots;
        this.templateName = capability.split(/\s/g).join('-');
        this.pluginSystemInstance = bootstrap_1.default;
    }
    get slotList() {
        return this.slots;
    }
    get pluginSystem() {
        return this.pluginSystemInstance;
    }
}
exports["default"] = DynamicLayoutConfigManager;
//# sourceMappingURL=DynamicLayoutConfigManager.js.map

/***/ }),

/***/ 79352:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.PlaceholderTypes = void 0;
var PlaceholderTypes;
(function (PlaceholderTypes) {
    PlaceholderTypes["ActionBar"] = "ActionBar";
    PlaceholderTypes["Ad"] = "Ad";
    PlaceholderTypes["Body"] = "Body";
    PlaceholderTypes["ChunkWrapper"] = "ChunkWrapper";
    PlaceholderTypes["ConsumerMarketingUnit"] = "ConsumerMarketingUnit";
    PlaceholderTypes["Header"] = "Header";
    PlaceholderTypes["Container"] = "Container";
    PlaceholderTypes["Error"] = "Error";
    PlaceholderTypes["Fallback"] = "Fallback";
    PlaceholderTypes["Footer"] = "Footer";
    PlaceholderTypes["Navigation"] = "Navigation";
    PlaceholderTypes["Recommendation"] = "Recommendation";
    PlaceholderTypes["MultiPackagesWrapper"] = "MultiPackagesWrapper";
    PlaceholderTypes["MainContentWrapper"] = "MainContentWrapper";
    PlaceholderTypes["BodyWrapper"] = "BodyWrapper";
    PlaceholderTypes["PageWrapper"] = "PageWrapper";
    PlaceholderTypes["RailWrapper"] = "RailWrapper";
    PlaceholderTypes["Paywall"] = "Paywall";
    PlaceholderTypes["SignInModal"] = "SignInModal";
    PlaceholderTypes["VisualStory"] = "VisualStory";
})(PlaceholderTypes = exports.PlaceholderTypes || (exports.PlaceholderTypes = {}));
//# sourceMappingURL=IComponentDefinition.js.map

/***/ }),

/***/ 77060:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
class Plugin {
    constructor(pluginSystem) {
        this.pluginSystem = pluginSystem;
    }
    boot() {
        throw new Error('Method not implemented. This method should be overridden by the plugin.');
    }
}
exports["default"] = Plugin;
//# sourceMappingURL=Plugin.js.map

/***/ }),

/***/ 77423:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
class PluginStore {
    constructor() {
        this.registeredPlugins = [];
        this.bootedPlugins = [];
    }
    registerPlugin(plugin) {
        this.registeredPlugins.push(plugin);
    }
}
exports["default"] = PluginStore;
//# sourceMappingURL=PluginStore.js.map

/***/ }),

/***/ 79912:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.isFirstProductContainer = exports.hasItems = void 0;
/**
 * hasItems
 *
 * Checks the container object for the items' existence.
 * Sometimes we don't want to render the container when there are no items.
 *
 * @param {object} container - container object
 * @returns {boolean} - if the container has items
 */
const hasItems = (container) => !!container?.items?.length;
exports.hasItems = hasItems;
/**
 * isFirstProductContainer
 *
 * Checks if the first container is a product
 *
 * @param {object} container - container object
 * @param {Array} ProductListingCarouselContainersData - products
 * @returns {boolean} - if first container is a product
 */
const isFirstProductContainer = (container, ProductListingCarouselContainersData) => {
    return ((ProductListingCarouselContainersData &&
        ProductListingCarouselContainersData[0]) === container);
};
exports.isFirstProductContainer = isFirstProductContainer;
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 86307:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const IComponentDefinition_1 = __webpack_require__(79352);
const Plugin_1 = __importDefault(__webpack_require__(77060));
const action_bar_wrapper_1 = __importDefault(__webpack_require__(90532));
/**
 * Represents a plugin for handling error content.
 */
class ActionBarPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'action-bar-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'ActionBar',
            component: action_bar_wrapper_1.default,
            type: IComponentDefinition_1.PlaceholderTypes.ActionBar,
            dataProcessor: {
                fetchers: [],
                transformer: 'ActionBarTransformer'
            }
        });
    }
}
exports["default"] = ActionBarPlugin;
//# sourceMappingURL=ActionBar.js.map

/***/ }),

/***/ 74996:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.AdFooter = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const ad_1 = __importDefault(__webpack_require__(19607));
const row_1 = __importDefault(__webpack_require__(66657));
const AdFooter = () => {
    return (react_1.default.createElement(row_1.default, { bottomSpacing: 7 },
        react_1.default.createElement(ad_1.default, { position: "footer", shouldHoldSpace: true })));
};
exports.AdFooter = AdFooter;
/**
 * Represents a plugin that handles AdFooter components.
 */
class AdFooterPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'ad-footer-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'AdFooter',
            component: exports.AdFooter,
            type: IComponentDefinition_1.PlaceholderTypes.Ad
        });
    }
}
exports["default"] = AdFooterPlugin;
//# sourceMappingURL=AdFooter.js.map

/***/ }),

/***/ 31515:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const IComponentDefinition_1 = __webpack_require__(79352);
const Plugin_1 = __importDefault(__webpack_require__(77060));
const ad_1 = __webpack_require__(19607);
class AdHeroPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'ad-hero-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'AdHero',
            component: ad_1.StickyHeroAd,
            type: IComponentDefinition_1.PlaceholderTypes.Ad
        });
    }
}
exports["default"] = AdHeroPlugin;
//# sourceMappingURL=AdHero.js.map

/***/ }),

/***/ 39988:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.AdMidContent = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const classnames_1 = __importDefault(__webpack_require__(32485));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const ad_1 = __importDefault(__webpack_require__(19607));
const payment_gateway_1 = __webpack_require__(92807);
const AdMidContent = (props) => {
    return (
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    react_1.default.createElement("div", { "data-journey-hook": props.dataJourneyHook, className: (0, classnames_1.default)('ad-container', {
            'ad-container-reduced-margin': props.hasReducedMargin
        }) },
        react_1.default.createElement(payment_gateway_1.PaymentGateway, { group: "ads" },
            react_1.default.createElement(ad_1.default, { position: "mid-content", shouldHoldSpace: true, shouldDisplayLabel: true }))));
};
exports.AdMidContent = AdMidContent;
/**
 * Represents a plugin that handles AdMidContent components.
 */
class AdMidContentPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'ad-mid-content-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'AdMidContent',
            component: exports.AdMidContent,
            type: IComponentDefinition_1.PlaceholderTypes.Ad
        });
    }
}
exports["default"] = AdMidContentPlugin;
//# sourceMappingURL=AdMidContent.js.map

/***/ }),

/***/ 40675:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.AdRail = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const ad_1 = __importDefault(__webpack_require__(19607));
const payment_gateway_1 = __webpack_require__(92807);
const AdRail = () => {
    return (react_1.default.createElement(payment_gateway_1.PaymentGateway, { group: "ads" },
        react_1.default.createElement(ad_1.default, { position: "rail" })));
};
exports.AdRail = AdRail;
/**
 * Represents a plugin that handles AdRail components.
 */
class AdRailPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'ad-rail-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'AdRail',
            component: exports.AdRail,
            type: IComponentDefinition_1.PlaceholderTypes.Ad
        });
    }
}
exports["default"] = AdRailPlugin;
//# sourceMappingURL=AdRail.js.map

/***/ }),

/***/ 70306:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.BaseAd = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const payment_gateway_1 = __webpack_require__(92807);
const styles_1 = __webpack_require__(4081);
const BaseAd = () => {
    return (react_1.default.createElement(payment_gateway_1.PaymentGateway, { group: "ads" },
        react_1.default.createElement(styles_1.BasePageAd, { position: "out-of-page" }),
        react_1.default.createElement(styles_1.BasePageAd, { position: "outstream" }),
        react_1.default.createElement(styles_1.BasePageAd, { position: "overlay" })));
};
exports.BaseAd = BaseAd;
/**
 * Represents a plugin that handles BaseAd components.
 */
class BaseAdPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'base-ad-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'BaseAd',
            component: exports.BaseAd,
            type: IComponentDefinition_1.PlaceholderTypes.Ad
        });
    }
}
exports["default"] = BaseAdPlugin;
//# sourceMappingURL=BaseAd.js.map

/***/ }),

/***/ 69449:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Body = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const styles_1 = __webpack_require__(70462);
const Body = ({ children, chunks, ...otherProps }) => {
    const { 'data-testid': dataTestId, stylesConfig } = otherProps;
    return (react_1.default.createElement(styles_1.SlotContainer, { "data-testid": dataTestId, stylesConfig: stylesConfig }, react_1.Children.map(children, (child) => {
        return (0, react_1.cloneElement)(child, { content: chunks });
    })));
};
exports.Body = Body;
/**
 * Represents a plugin that handles Body components.
 */
class BodyContentPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'body-content-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'BodyContent',
            component: exports.Body,
            type: IComponentDefinition_1.PlaceholderTypes.Body,
            dataProcessor: {
                fetchers: ['GetReviewFetcher'],
                transformer: 'BodyTransformer'
            }
        });
    }
}
exports["default"] = BodyContentPlugin;
//# sourceMappingURL=BodyContent.js.map

/***/ }),

/***/ 66148:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CMUFooter = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const row_1 = __importDefault(__webpack_require__(66657));
const payment_gateway_1 = __webpack_require__(92807);
const consumer_marketing_unit_1 = __importDefault(__webpack_require__(71284));
const components_1 = __webpack_require__(12501);
const CMUFooter = () => {
    return (react_1.default.createElement(row_1.default, null,
        react_1.default.createElement(components_1.Footer, null),
        react_1.default.createElement(payment_gateway_1.PaymentGateway, { group: "consumer-marketing" },
            react_1.default.createElement(consumer_marketing_unit_1.default, { position: "cm-footer" }))));
};
exports.CMUFooter = CMUFooter;
/**
 * Represents a plugin that handles ConsumerMarketingUnit components.
 */
class CMUFooterPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'cmu-footer-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'CMUFooter',
            component: exports.CMUFooter,
            type: IComponentDefinition_1.PlaceholderTypes.ConsumerMarketingUnit
        });
    }
}
exports["default"] = CMUFooterPlugin;
//# sourceMappingURL=CMUFooter.js.map

/***/ }),

/***/ 81638:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const react_1 = __importDefault(__webpack_require__(96540));
const map_inline_embeds_1 = __importDefault(__webpack_require__(51009));
const ExternalLink_1 = __importDefault(__webpack_require__(9573));
const styles_1 = __webpack_require__(29912);
const { default: JsonmlToReact } = __webpack_require__(1165);
function mapLinks(props) {
    const { isExternal, ...linkProps } = props;
    return {
        type: isExternal ? ExternalLink_1.default : 'a',
        props: linkProps
    };
}
const jsonmlToReact = new JsonmlToReact({
    a: mapLinks,
    'inline-embed': map_inline_embeds_1.default
});
const Chunk = ({ content, index }) => {
    return (react_1.default.createElement(styles_1.BodyWrapper, { className: "body body__container", "data-testid": "BodyWrapper" }, jsonmlToReact.convert([
        'div',
        { className: 'chunk' },
        ...content[index]
    ])));
};
exports["default"] = Chunk;
//# sourceMappingURL=Chunk.js.map

/***/ }),

/***/ 56282:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ChunkWrapper = void 0;
const react_1 = __importStar(__webpack_require__(96540));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const Chunk_1 = __importDefault(__webpack_require__(81638));
const styles_1 = __webpack_require__(70462);
const ChunkWrapper = ({ children, content, ...otherProps }) => {
    const { 'data-testid': dataTestId, stylesConfig } = otherProps;
    const chunkIndex = parseInt(dataTestId.match(/\d+/g), 10) - 1;
    return (react_1.default.createElement(styles_1.SlotContainer, { "data-testid": dataTestId, stylesConfig: stylesConfig }, react_1.Children.map(children, (child) => {
        const { key, props: { id, stylesConfig: chunkStylesConfig } } = child;
        if (key.includes('chunk')) {
            return (react_1.default.createElement(styles_1.SlotContainer, { "data-testid": `${id}__container`, key: id, stylesConfig: chunkStylesConfig },
                react_1.default.createElement(Chunk_1.default, { content: content, index: chunkIndex })));
        }
        return child;
    })));
};
exports.ChunkWrapper = ChunkWrapper;
/**
 * Represents a plugin that handles ChunkWrapper components.
 */
class ChunkWrapperPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'chunk-wrapper-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'ChunkWrapper',
            component: exports.ChunkWrapper,
            type: IComponentDefinition_1.PlaceholderTypes.ChunkWrapper
        });
    }
}
exports["default"] = ChunkWrapperPlugin;
//# sourceMappingURL=ChunkWrapper.js.map

/***/ }),

/***/ 20394:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ContentFooterWrapper = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const content_footer_1 = __importDefault(__webpack_require__(61127));
const grid_1 = __importDefault(__webpack_require__(86659));
const ContentFooterWrapper = (contentFooterWrapperProps) => {
    return (react_1.default.createElement(content_footer_1.default
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    , { 
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        ContentWrapper: grid_1.default.ContentWithAdRailNarrow, ...contentFooterWrapperProps }));
};
exports.ContentFooterWrapper = ContentFooterWrapper;
class ContentFooterPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'content-footer-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'ContentFooter',
            component: exports.ContentFooterWrapper,
            type: IComponentDefinition_1.PlaceholderTypes.Footer,
            dataProcessor: {
                fetchers: [
                    'GetReviewFetcher',
                    'GetRelatedContentFetcher',
                    'GetMostPopularContentFetcher'
                ],
                transformer: 'ContentFooterTransformer'
            }
        });
    }
}
exports["default"] = ContentFooterPlugin;
//# sourceMappingURL=ContentFooter.js.map

/***/ }),

/***/ 60404:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ContentHeaderWrapper = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const content_header_1 = __importDefault(__webpack_require__(69389));
const multi_review_content_header_1 = __importDefault(__webpack_require__(55182));
const ContentHeaderWrapper = (props) => {
    if (!props) {
        return null;
    }
    return props.useMultiReviewHeader ? (react_1.default.createElement(multi_review_content_header_1.default, { ...props })) : (react_1.default.createElement(content_header_1.default, { ...props }));
};
exports.ContentHeaderWrapper = ContentHeaderWrapper;
class ContentHeaderPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'content-header-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'ContentHeader',
            component: exports.ContentHeaderWrapper,
            type: IComponentDefinition_1.PlaceholderTypes.Header,
            dataProcessor: {
                fetchers: [
                    'GetReviewFetcher',
                    'GetRelatedContentFetcher',
                    'GetMostPopularContentFetcher'
                ],
                transformer: 'ContentHeaderTransformer'
            } // Separate transformers should be defined for recipes & reviews
        });
    }
}
exports["default"] = ContentHeaderPlugin;
//# sourceMappingURL=ContentHeader.js.map

/***/ }),

/***/ 24376:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.CustomDeviceErrorContent = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const IComponentDefinition_1 = __webpack_require__(79352);
const Plugin_1 = __importDefault(__webpack_require__(77060));
const device_detection_1 = __webpack_require__(72362);
const button_1 = __importDefault(__webpack_require__(73730));
const { default: styled, css } = __webpack_require__(92168);
const { trackNavigationEvent } = __webpack_require__(14307);
const { calculateSpacing, getColorToken, getTypographyStyles, minScreen, getColorStyles } = __webpack_require__(26865);
const { applyGridSpacing, cssVariablesGrid } = __webpack_require__(1123);
const { BaseText } = __webpack_require__(76955);
const { BREAKPOINTS } = __webpack_require__(96472);
const LeadAsset = __webpack_require__(92027);
const { ResponsiveImageContainer } = __webpack_require__(7228);
const { ContentHeaderResponsiveAsset } = __webpack_require__(5239);
const CustomErrorWrapper = styled.header.withConfig({
    displayName: 'CustomErrorWrapper'
}) `
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  bottom: ${`-${parseFloat(calculateSpacing(6))}rem`};

  position: relative;
`;
const CustomErrorSection = styled(LeadAsset).withConfig({
    displayName: 'CustomErrorSection'
}) `
  grid-column: 1;
  grid-row: 1;
  background: ${({ theme }) => getColorToken(theme, 'colors.background.light')};

  ${({ shouldApplyDarkBackground, theme }) => shouldApplyDarkBackground &&
    `
      background: ${getColorToken(theme, 'colors.consumption.lead.inverted.background')};
    `}

  ${({ hasTopMargin }) => hasTopMargin &&
    `
    ${minScreen(BREAKPOINTS.lg)} {
      margin-top: -8%;
    }
  `}
    
  ${({ overlayType }) => {
    if (overlayType === 'gradient') {
        return css `
        &:after {
          background: linear-gradient(to top, rgb(0, 0, 0) 0, transparent 65%);
          content: '';
          height: 100%;
          left: 0;
          position: absolute;
          top: 0;
          width: 100%;
        }
      `;
    }
    else if (overlayType === 'solid') {
        return css `
        &:after {
          background-color: rgba(
            ${getColorToken('colors.interactive.base.black', {
            rgbOnly: true
        })},
            0.35
          );
          content: '';
          height: 100%;
          left: 0;
          position: absolute;
          top: 0;
          width: 100%;
        }
      `;
    }
    return '';
}}

  .lead-asset__content__photo,
  ${ContentHeaderResponsiveAsset} ${ResponsiveImageContainer} {
    ${minScreen(BREAKPOINTS.md)} {
      max-height: none;
    }
  }

  ${ContentHeaderResponsiveAsset},
  ${ResponsiveImageContainer} {
    width: 100%;
  }
`;
const CustomErrorHedDekGrid = styled.div.withConfig({
    displayName: 'CustomErrorHedDekGrid'
}) `
  ${cssVariablesGrid()}
  display: grid;
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--grid-gap);
  z-index: 1;
  width: 100%;
  row-gap: var(--grid-gap);
  ${({ isInverted, theme }) => isInverted &&
    `
      background: ${getColorToken(theme, 'colors.consumption.lead.inverted.background')};
    `}

  ${applyGridSpacing('padding')}
  ${({ headerPosition }) => headerPosition === 'center'
    ? `place-items: center center;`
    : `place-items: start center;`}

  ${minScreen(BREAKPOINTS.md)} {
    grid-template-columns: repeat(12, 1fr);
  }
`;
const CustomDeviceHedDekBlock = styled.div.withConfig({
    displayName: 'CustomDeviceHedDekBlock'
}) `
  grid-column: 1 / -1;
  text-align: center;
  @media (min-width: ${BREAKPOINTS.lg}) {
    ${({ isDirectoryBundle }) => isDirectoryBundle ? `grid-column: 4 / 10` : `grid-column: 1 / -1;`}
    ${({ showHeaderOnTop, showHeaderOnBottom }) => (showHeaderOnTop || showHeaderOnBottom) &&
    `
        grid-column: 3 / -3;
      `}
  }
`;
const CustomErrorHed = styled(BaseText).withConfig({
    displayName: 'CustomErrorHed'
}) `
  margin-top: ${calculateSpacing(14)};
  margin-bottom: ${calculateSpacing(4)};
  ${({ theme, shouldDecorateHeader }) => shouldDecorateHeader
    ? `text-decoration: underline; text-decoration-color: ${getColorToken(theme, 'colors.discovery.lead.primary.accent')};`
    : 'text-decoration: none'};
  ${({ theme }) => getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.display-small')};

  @media (max-width: ${BREAKPOINTS.lg}) {
    margin-top: ${calculateSpacing(6.2)};
  }
`;
CustomErrorHed.defaultProps = {
    as: 'h1',
    colorToken: 'colors.consumption.body.standard.body',
    typeIdentity: 'typography.definitions.consumptionEditorial.body-core'
};
const CustomDeviceDekText = styled(BaseText).withConfig({
    displayName: 'CustomDeviceDekText'
}) `
  ${({ isDestinationBundle, shouldOverrideDirectoryBundle, theme }) => isDestinationBundle || shouldOverrideDirectoryBundle
    ? getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.description-core')
    : getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.subhed-aux-secondary')};
  ${({ shouldOverrideDirectoryBundle, isDirectoryBundle, theme }) => !shouldOverrideDirectoryBundle &&
    (isDirectoryBundle
        ? getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.subhed-break-secondary')
        : getTypographyStyles(theme, 'typography.definitions.consumptionEditorial.subhed-aux-secondary'))};

  margin-top: 0;
  color: ${({ isDestinationBundle, theme }) => isDestinationBundle
    ? getColorToken(theme, 'colors.discovery.body.black.description')
    : getColorToken(theme, 'colors.discovery.body.white.description')};

  ${({ shouldOverrideDirectoryBundle, theme }) => shouldOverrideDirectoryBundle &&
    `
        ${getColorStyles(theme, 'color', 'colors.consumption.body.inverted.body-deemphasized')}
    `}
`;
const AppRedirectButton = styled(button_1.default).withConfig({
    displayName: 'AppRedirectButton'
}) `
  margin-bottom: ${calculateSpacing(3)};
  bottom: ${`-${parseFloat(calculateSpacing(7))}rem`};
`;
const CustomDeviceErrorContent = (props) => {
    const { appStoreRedirectUri = null, desktopBannerImg404 = null, mobileBannerImg404 = null, dangerousDek, dangerousHed, buttonLabel = null } = props;
    const [redirectUri, setRedirectUri] = react_1.default.useState('');
    const [lede, setPhotoLede] = react_1.default.useState((0, device_detection_1.isDesktopBrowser)() ? desktopBannerImg404 : mobileBannerImg404);
    react_1.default.useEffect(() => {
        const redirectToDeviceStore = (appStoreRedirectUri) => {
            const { appleStoreAppUri, playStoreAppUri } = appStoreRedirectUri || {};
            const isMacMobile = (0, device_detection_1.isIOSDevice)();
            if (isMacMobile && appleStoreAppUri) {
                return appleStoreAppUri;
            }
            else if (!isMacMobile && playStoreAppUri) {
                return playStoreAppUri;
            }
            return '';
        };
        // Do not redirect to app listing on desktop or if the redirect source is from the app
        if (!(0, device_detection_1.isDesktopBrowser)() && appStoreRedirectUri) {
            setRedirectUri(redirectToDeviceStore(appStoreRedirectUri));
            setPhotoLede(mobileBannerImg404);
        }
    }, [appStoreRedirectUri, mobileBannerImg404]);
    const handleAcceptClick = () => {
        const eventData = {
            type: 'click',
            label: buttonLabel,
            subject: 'custom_device_error_content',
            placement: 'middle'
        };
        trackNavigationEvent(eventData);
        window.open(redirectUri, '_self');
    };
    const headerHedDek = (react_1.default.createElement(CustomErrorHedDekGrid, { isInverted: false },
        react_1.default.createElement(CustomDeviceHedDekBlock, { showHeaderOnTop: true, isInverted: false },
            dangerousHed && (react_1.default.createElement(CustomErrorHed, { shouldDecorateHeader: false, shouldOverrideTypeToken: true, dangerouslySetInnerHTML: { __html: dangerousHed } })),
            dangerousDek && (react_1.default.createElement(CustomDeviceDekText, { isDestinationBundle: false, isDirectoryBundle: false, dangerouslySetInnerHTML: {
                    __html: (0, device_detection_1.isDesktopBrowser)()
                        ? dangerousDek
                        : 'Discover the latest posts from your favorite contributors, shop like a <i>Vogue</i> editor and connect with fashion enthusiasts—all in <br>the <i>Vogue </i>app.'
                }, showHeaderOnTop: true, isInverted: false, shouldAddBottomSpacing: false })),
            redirectUri && (react_1.default.createElement(AppRedirectButton, { inputKind: "link", onClickHandler: () => handleAcceptClick(), key: "app-store-redirect", dataAttrs: { 'data-test-id': `app-store-redirect-button` }, label: buttonLabel, shouldUseFullWidth: true })))));
    return (react_1.default.createElement(react_1.default.Fragment, null,
        headerHedDek,
        react_1.default.createElement(CustomErrorWrapper, { "data-testid": "CustomError", isFullBleedForXXXL: true, isInverted: false }, lede && react_1.default.createElement(CustomErrorSection, { lede: lede, hasTopMargin: false }))));
};
exports.CustomDeviceErrorContent = CustomDeviceErrorContent;
/**
 * Represents a plugin for handling error content.
 */
class CustomDeviceErrorContentPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'custom-device-error-content-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'CustomDeviceErrorContent',
            component: exports.CustomDeviceErrorContent,
            type: IComponentDefinition_1.PlaceholderTypes.Error,
            dataProcessor: {
                fetchers: [],
                transformer: 'ErrorContentTransformer'
            }
        });
    }
}
exports["default"] = CustomDeviceErrorContentPlugin;
//# sourceMappingURL=CustomDeviceErrorContent.js.map

/***/ }),

/***/ 4053:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const IComponentDefinition_1 = __webpack_require__(79352);
const error_content_1 = __importDefault(__webpack_require__(1898));
const Plugin_1 = __importDefault(__webpack_require__(77060));
/**
 * Represents a plugin for handling error content.
 */
class ErrorContentPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'error-content-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'ErrorContent',
            component: error_content_1.default,
            type: IComponentDefinition_1.PlaceholderTypes.Error,
            dataProcessor: {
                fetchers: [],
                transformer: 'ErrorContentTransformer'
            }
        });
    }
}
exports["default"] = ErrorContentPlugin;
//# sourceMappingURL=ErrorContent.js.map

/***/ }),

/***/ 33428:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.Fallback = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styled_components_1 = __importDefault(__webpack_require__(92168));
const base_1 = __webpack_require__(76955);
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const FallbackWrapper = (0, styled_components_1.default)(base_1.BaseWrap).withConfig({
    displayName: 'FallbackWrapper'
}) `
  display: flex;
  justify-content: center;
  border-bottom: 0.5px dotted;
  padding: 0.5rem;
`;
const Fallback = ({ message, className }) => {
    const displayMessage = message || 'Plugin component is not configured';
    return (react_1.default.createElement(FallbackWrapper, { className: className },
        react_1.default.createElement(base_1.BaseText, null, displayMessage)));
};
exports.Fallback = Fallback;
/**
 * Represents a plugin that handles fallback components.
 */
class FallbackPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'fallback-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'fallback',
            component: exports.Fallback,
            type: IComponentDefinition_1.PlaceholderTypes.Fallback
        });
    }
}
exports["default"] = FallbackPlugin;
//# sourceMappingURL=Fallback.js.map

/***/ }),

/***/ 64143:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
// eslint-disable-next-line eslint-comments/disable-enable-pair
/* eslint-disable react/prop-types */
const react_1 = __importDefault(__webpack_require__(96540));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const dynamic_home_page_1 = __importDefault(__webpack_require__(75945));
const DynamicHomePageWrapper = ({ children, className, multiPackageValues }) => {
    const { bundleProps } = multiPackageValues;
    return (
    /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
    /* @ts-ignore */
    react_1.default.createElement(dynamic_home_page_1.default, { bundleProps: {
            isSponsored: bundleProps.bundle.isSponsored,
            seoHiddenHeader: bundleProps.bundle.seoHiddenHeader,
            sponsoredContentHeaderProps: bundleProps.bundle.sponsoredContentHeaderProps
        }, className: className }, children));
};
/**
 * Represents a plugin that handles the page wrapper component.
 * We are defining this wrapper is to match with current static template structure.
 * Example:
 * |-HomePageWrapper
 * |---Header
 * |---BundlePageWrapper
 * |------<Child components>
 * |---Footer
 */
class HomePageWrapperPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'home-page-wrapper-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'HomePageWrapper',
            component: DynamicHomePageWrapper,
            type: IComponentDefinition_1.PlaceholderTypes.PageWrapper,
            dataProcessor: {
                fetchers: [],
                transformer: 'HomePageTransformer'
            }
        });
    }
}
exports["default"] = HomePageWrapperPlugin;
//# sourceMappingURL=HomePageWrapper.js.map

/***/ }),

/***/ 96589:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const IComponentDefinition_1 = __webpack_require__(79352);
const Plugin_1 = __importDefault(__webpack_require__(77060));
const summary_collection_grid_1 = __importDefault(__webpack_require__(91706));
class MostRecentContentPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'most-recent-content-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'MostRecentContent',
            component: summary_collection_grid_1.default,
            type: IComponentDefinition_1.PlaceholderTypes.Recommendation,
            dataProcessor: {
                fetchers: ['MostRecentContentFetcher'],
                transformer: 'MostRecentContentTransformer'
            }
        });
    }
}
exports["default"] = MostRecentContentPlugin;
//# sourceMappingURL=MostRecentContent.js.map

/***/ }),

/***/ 22514:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
// eslint-disable-next-line eslint-comments/disable-enable-pair
/* eslint-disable react/prop-types */
const dynamic_multi_packages_1 = __importDefault(__webpack_require__(55717));
const IComponentDefinition_1 = __webpack_require__(79352);
const Plugin_1 = __importDefault(__webpack_require__(77060));
class MultiPackagePlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'multi-package-wrapper-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'MultiPackageWrapper',
            component: dynamic_multi_packages_1.default,
            type: IComponentDefinition_1.PlaceholderTypes.MultiPackagesWrapper,
            dataProcessor: {
                fetchers: [],
                transformer: 'MultiPackageTransformer'
            }
        });
    }
}
exports["default"] = MultiPackagePlugin;
//# sourceMappingURL=MultiPackageWrapper.js.map

/***/ }),

/***/ 32248:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.PersistentBottomPaywall = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const IComponentDefinition_1 = __webpack_require__(79352);
const Plugin_1 = __importDefault(__webpack_require__(77060));
const persistent_bottom_1 = __importDefault(__webpack_require__(23074));
const components_1 = __webpack_require__(12501);
const payment_gateway_1 = __webpack_require__(92807);
const ExpandedCanvas_1 = __importDefault(__webpack_require__(23043));
const paywall_bar_1 = __importDefault(__webpack_require__(51810));
const consumer_marketing_unit_1 = __importDefault(__webpack_require__(71284));
const PaywallBar_1 = __importDefault(__webpack_require__(86281));
const ContentBar_1 = __importDefault(__webpack_require__(48536));
const PersistentBottomPaywall = ({ hasRiser }) => {
    return (react_1.default.createElement(persistent_bottom_1.default, null,
        react_1.default.createElement(components_1.RegistrationGate, null),
        react_1.default.createElement(payment_gateway_1.PaymentGateway, { group: "paywall" },
            react_1.default.createElement(paywall_bar_1.default, null)),
        react_1.default.createElement(PaywallBar_1.default, null),
        react_1.default.createElement(ExpandedCanvas_1.default, null),
        react_1.default.createElement(ContentBar_1.default, null),
        hasRiser && react_1.default.createElement(consumer_marketing_unit_1.default, { position: "cm-riser" })));
};
exports.PersistentBottomPaywall = PersistentBottomPaywall;
class RecircListPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'persistent-bottom-paywall-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'PersistentBottomPaywall',
            component: exports.PersistentBottomPaywall,
            type: IComponentDefinition_1.PlaceholderTypes.Paywall,
            dataProcessor: {
                fetchers: [],
                transformer: 'FeatureFlagsTransformer'
            }
        });
    }
}
exports["default"] = RecircListPlugin;
//# sourceMappingURL=PersistentBottomPaywall.js.map

/***/ }),

/***/ 45432:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const IComponentDefinition_1 = __webpack_require__(79352);
const Plugin_1 = __importDefault(__webpack_require__(77060));
const recirc_list_1 = __importDefault(__webpack_require__(10281));
class RecircListPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'recirc-list-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'RecircList',
            component: recirc_list_1.default,
            type: IComponentDefinition_1.PlaceholderTypes.Recommendation,
            dataProcessor: {
                fetchers: ['RecircListFetcher'],
                transformer: 'RecircListTransformer'
            }
        });
    }
}
exports["default"] = RecircListPlugin;
//# sourceMappingURL=RecircList.js.map

/***/ }),

/***/ 77246:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const IComponentDefinition_1 = __webpack_require__(79352);
const Plugin_1 = __importDefault(__webpack_require__(77060));
const recirc_most_popular_1 = __importDefault(__webpack_require__(69234));
class RecircMostPopularPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'recirc-most-popular-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'RecircMostPopular',
            component: recirc_most_popular_1.default,
            type: IComponentDefinition_1.PlaceholderTypes.Recommendation,
            dataProcessor: {
                fetchers: ['GetMostPopularContentFetcher'],
                transformer: 'MostPopularContentTransformer'
            }
        });
    }
}
exports["default"] = RecircMostPopularPlugin;
//# sourceMappingURL=RecircMostPopular.js.map

/***/ }),

/***/ 96343:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.SignInModalWrapper = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const sign_in_modal_1 = __importDefault(__webpack_require__(14935));
const SignInModalWrapper = ({ showBookmark = false }) => (showBookmark ? react_1.default.createElement(sign_in_modal_1.default, null) : null);
exports.SignInModalWrapper = SignInModalWrapper;
class SignInModalPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'sign-in-modal-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'SignInModal',
            component: exports.SignInModalWrapper,
            type: IComponentDefinition_1.PlaceholderTypes.SignInModal,
            dataProcessor: {
                fetchers: [
                    'GetReviewFetcher',
                    'GetRelatedContentFetcher',
                    'GetMostPopularContentFetcher'
                ],
                transformer: 'SignInModalTransformer'
            }
        });
    }
}
exports["default"] = SignInModalPlugin;
//# sourceMappingURL=SignInModal.js.map

/***/ }),

/***/ 50806:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.SiteFooter = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styled_components_1 = __importDefault(__webpack_require__(92168));
const site_footer_with_store_1 = __importDefault(__webpack_require__(98928));
const grid_1 = __importDefault(__webpack_require__(86659));
const styles_1 = __webpack_require__(40653);
const row_1 = __importDefault(__webpack_require__(66657));
const utils_1 = __webpack_require__(26865);
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const BasePageSiteFooterRow = (0, styled_components_1.default)(row_1.default).withConfig({
    displayName: 'BasePageSiteFooterRow'
}) `
  background-color: ${(0, utils_1.getColorToken)('colors.foundation.footer.bg')};

  ${({ noFooterMargin }) => noFooterMargin && `margin-top: 0;`}

  ${({ hasMargins, noFooterMargin }) => hasMargins && !noFooterMargin && `margin-top: ${(0, utils_1.calculateSpacing)(6)};`}
`;
const BasePageSiteFooterRowGrid = (0, styled_components_1.default)(grid_1.default.WithMargins).withConfig({
    displayName: 'BasePageSiteFooterRowGrid'
}) `
  ${styles_1.GridItem} {
    grid-column: 1 / -1;
  }
`;
const SiteFooter = ({ hasFooterMargins = true, fullPageTheme = 'standard' }) => (react_1.default.createElement(BasePageSiteFooterRow, { hasMargins: hasFooterMargins, noFooterMargin: fullPageTheme === 'inverted' },
    react_1.default.createElement(BasePageSiteFooterRowGrid, null,
        react_1.default.createElement(site_footer_with_store_1.default, null))));
exports.SiteFooter = SiteFooter;
class SiteFooterPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'site-footer-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'SiteFooter',
            component: exports.SiteFooter,
            type: IComponentDefinition_1.PlaceholderTypes.Footer
        });
    }
}
exports["default"] = SiteFooterPlugin;
//# sourceMappingURL=SiteFooter.js.map

/***/ }),

/***/ 70975:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const connected_navigation_1 = __importDefault(__webpack_require__(10980));
const IComponentDefinition_1 = __webpack_require__(79352);
class StackedNavigationPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'stacked-navigation-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'StackedNavigation',
            component: connected_navigation_1.default,
            type: IComponentDefinition_1.PlaceholderTypes.Navigation
        });
    }
}
exports["default"] = StackedNavigationPlugin;
//# sourceMappingURL=StackedNavigation.js.map

/***/ }),

/***/ 14557:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.StickyRail = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const styles_1 = __webpack_require__(70462);
const sticky_box_1 = __importDefault(__webpack_require__(28433));
const StickyRail = ({ children, chunks, ...otherProps }) => {
    const { 'data-testid': dataTestId, stylesConfig } = otherProps;
    return (react_1.default.createElement(styles_1.SlotContainer, { "data-testid": dataTestId, stylesConfig: stylesConfig },
        react_1.default.createElement(sticky_box_1.default, null, children)));
};
exports.StickyRail = StickyRail;
/**
 * Represents a plugin that handles StickyRail components.
 */
class StickyRailPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'sticky-rail-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'StickyRail',
            component: exports.StickyRail,
            type: IComponentDefinition_1.PlaceholderTypes.RailWrapper
        });
    }
}
exports["default"] = StickyRailPlugin;
//# sourceMappingURL=StickyRail.js.map

/***/ }),

/***/ 93702:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.SummaryCarouselWrapper = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const MultiPackageRow_1 = __importDefault(__webpack_require__(3771));
const summary_carousel_1 = __importDefault(__webpack_require__(43709));
const utils_1 = __webpack_require__(79912);
const SummaryCarouselWrapper = ({ container, multiPackageValues }) => {
    // get the additional props from the context which are passed from the parent component (MultiPackageWrapper)
    const { additionalProps, dataJourneyHook } = multiPackageValues;
    // TODO: cleanup spacing related props, once we have spacing tokens
    const { hasNoTopBottomMarginOnMobile, hasNoBottomMargin, hasConsistentSpacing, shouldEnableBundleComponentAnalytics } = additionalProps;
    if (!(0, utils_1.hasItems)(container)) {
        return null;
    }
    return (
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    react_1.default.createElement(MultiPackageRow_1.default, { dataJourneyHook: dataJourneyHook, hasNoBottomMargin: hasNoBottomMargin, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, hasConsistentSpacing: hasConsistentSpacing },
        react_1.default.createElement(summary_carousel_1.default
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        , { ...container, shouldEnableBundleComponentAnalytics: shouldEnableBundleComponentAnalytics, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, href: "/video", inputKind: "link" })));
};
exports.SummaryCarouselWrapper = SummaryCarouselWrapper;
class SummaryCarouselPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'summary-carousel-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'SummaryCarousel',
            component: exports.SummaryCarouselWrapper,
            type: IComponentDefinition_1.PlaceholderTypes.Container,
            dataProcessor: {
                fetchers: ['GetBundleFetcher', 'GetRelatedFetcher'],
                transformer: 'SharedBundleContainerTransformer'
            }
        });
    }
}
exports["default"] = SummaryCarouselPlugin;
//# sourceMappingURL=SummaryCarousel.js.map

/***/ }),

/***/ 20028:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.TickerComponent = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const IComponentDefinition_1 = __webpack_require__(79352);
const Plugin_1 = __importDefault(__webpack_require__(77060));
const components_1 = __webpack_require__(12501);
const TickerComponent = () => {
    return react_1.default.createElement(components_1.Ticker, null);
};
exports.TickerComponent = TickerComponent;
class TickerPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'ticker-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'Ticker',
            component: exports.TickerComponent,
            type: IComponentDefinition_1.PlaceholderTypes.ConsumerMarketingUnit
        });
    }
}
exports["default"] = TickerPlugin;
//# sourceMappingURL=Ticker.js.map

/***/ }),

/***/ 42408:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.VersoCNEVideo = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const MultiPackageRow_1 = __importDefault(__webpack_require__(3771));
const cne_video_1 = __importDefault(__webpack_require__(86630));
const VersoCNEVideo = ({ container, multiPackageValues }) => {
    const { additionalProps, dataJourneyHook } = multiPackageValues;
    const { hasMarginTopMultiPackageRow, hasMediumMargin, hasNoBottomMargin, hasNoTopBottomMarginOnMobile } = additionalProps;
    return (
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    react_1.default.createElement(MultiPackageRow_1.default, { className: "verso-bundle-cne-embed", dataJourneyHook: dataJourneyHook, hasMarginTopMultiPackageRow: hasMarginTopMultiPackageRow, hasMediumMargin: hasMediumMargin, hasNoBottomMargin: container.isSpecialTheme && hasNoBottomMargin, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile },
        react_1.default.createElement(cne_video_1.default, { ...container, shouldHaveTeaser: true })));
};
exports.VersoCNEVideo = VersoCNEVideo;
class VersoCNEVideoPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'verso-cne-video';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'VersoCNEVideo',
            component: exports.VersoCNEVideo,
            type: IComponentDefinition_1.PlaceholderTypes.Container,
            dataProcessor: {
                fetchers: ['GetBundleFetcher', 'GetRelatedFetcher'],
                transformer: 'SharedBundleContainerTransformer'
            }
        });
    }
}
exports["default"] = VersoCNEVideoPlugin;
//# sourceMappingURL=VersoCNEVideo.js.map

/***/ }),

/***/ 23638:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.VersoEmbedWrapper = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const MultiPackageRow_1 = __importDefault(__webpack_require__(3771));
const MultiPackages_1 = __webpack_require__(97737);
const VersoEmbedWrapper = ({ container, multiPackageValues }) => {
    const { additionalProps, dataJourneyHook, isInvertedTheme } = multiPackageValues;
    const { hasMarginTopMultiPackageRow, hasMediumMargin, shouldShowAdsInMultiPackageBody, shouldUseGridForEmbed, shouldUseJumpLinksSectionStyleForEmbed = false } = additionalProps;
    return (
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    react_1.default.createElement(MultiPackageRow_1.default, { className: "verso-embed-row", dataJourneyHook: dataJourneyHook, hasMarginTopMultiPackageRow: hasMarginTopMultiPackageRow, hasMediumMargin: hasMediumMargin, isInvertedTheme: isInvertedTheme }, (0, MultiPackages_1.getEmbedView)(container, {
        shouldShowAdsInMultiPackageBody,
        shouldUseGridForEmbed,
        shouldUseJumpLinksSectionStyleForEmbed
    })));
};
exports.VersoEmbedWrapper = VersoEmbedWrapper;
class VersoEmbedPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'verso-embed-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'VersoEmbed',
            component: exports.VersoEmbedWrapper,
            type: IComponentDefinition_1.PlaceholderTypes.Container,
            dataProcessor: {
                fetchers: ['GetBundleFetcher', 'GetRelatedFetcher'],
                transformer: 'SharedBundleContainerTransformer'
            }
        });
    }
}
exports["default"] = VersoEmbedPlugin;
//# sourceMappingURL=VersoEmbed.js.map

/***/ }),

/***/ 80428:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.VersoFeaturesWrapper = void 0;
// eslint-disable-next-line eslint-comments/disable-enable-pair
/* eslint-disable react/prop-types */
const react_1 = __importDefault(__webpack_require__(96540));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const MultiPackageRow_1 = __importDefault(__webpack_require__(3771));
const verso_features_1 = __importDefault(__webpack_require__(46793));
const utils_1 = __webpack_require__(79912);
const VersoFeaturesWrapper = ({ container, multiPackageValues }) => {
    // get the additional props from the context which are passed from the parent component (MultiPackageWrapper)
    const { additionalProps, dataJourneyHook, minimalSpacingConfig, bundleProps } = multiPackageValues;
    // TODO: cleanup spacing related props, once we have spacing tokens
    const { hasReducedMargin, lowestHierarchy, hasNoTopBottomMarginOnMobile, shouldPreferCollectionGrid, hasVersoFeaturesIncreasedVerticalPaddingTop, hasMarginBottomMultiPackageRow, hasMarginTopMultiPackageRow, hasVersoFeaturesIncreasedVerticalPadding } = additionalProps;
    const { hasVersoFeaturesReducedMargin, shouldUseCustomMargin } = minimalSpacingConfig;
    if (!(0, utils_1.hasItems)(container)) {
        return null;
    }
    return (
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    react_1.default.createElement(MultiPackageRow_1.default, { dataJourneyHook: dataJourneyHook, hasNoBottomMargin: true, hasNoTopMargin: !!hasVersoFeaturesReducedMargin, hasMarginBottomMultiPackageRow: hasMarginBottomMultiPackageRow, hasMarginTopMultiPackageRow: hasMarginTopMultiPackageRow, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile },
        react_1.default.createElement(verso_features_1.default
        /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
        /* @ts-ignore */
        , { 
            /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
            /* @ts-ignore */
            container: container, hasIncreasedVerticalPadding: hasVersoFeaturesIncreasedVerticalPadding, hasIncreasedVerticalPaddingTop: hasVersoFeaturesIncreasedVerticalPaddingTop, hasMinimalVerticalSpacing: hasVersoFeaturesReducedMargin, lowestHierarchy: bundleProps.bundle.isDestinationBundle ? lowestHierarchy : '', shouldPreferCollectionGrid: shouldPreferCollectionGrid, shouldUseAdInCollectionGrid: bundleProps.featureFlags.shouldUseAdInCollectionGrid, isDestinationBundle: bundleProps.bundle.isDestinationBundle, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, hasReducedMargin: hasReducedMargin, shouldUseCustomMargin: shouldUseCustomMargin })));
};
exports.VersoFeaturesWrapper = VersoFeaturesWrapper;
class VersoFeaturePlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'verso-feature-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'VersoFeatures',
            component: exports.VersoFeaturesWrapper,
            type: IComponentDefinition_1.PlaceholderTypes.Container,
            dataProcessor: {
                fetchers: ['GetBundleFetcher', 'GetRelatedFetcher'],
                transformer: 'SharedBundleContainerTransformer'
            }
        });
    }
}
exports["default"] = VersoFeaturePlugin;
//# sourceMappingURL=VersoFeatures.js.map

/***/ }),

/***/ 67165:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.VersoFeaturesRowsWrapper = void 0;
// eslint-disable-next-line eslint-comments/disable-enable-pair
/* eslint-disable react/prop-types */
const react_1 = __importDefault(__webpack_require__(96540));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const MultiPackageRow_1 = __importDefault(__webpack_require__(3771));
const verso_features_1 = __importDefault(__webpack_require__(46793));
const utils_1 = __webpack_require__(79912);
const VersoFeaturesRowsWrapper = ({ container, multiPackageValues }) => {
    // get the additional props from the context which are passed from the parent component (MultiPackageWrapper)
    const { additionalProps, dataJourneyHook, minimalSpacingConfig, bundleProps } = multiPackageValues;
    // TODO: cleanup spacing related props, once we have spacing tokens
    const { hasReducedMargin, lowestHierarchy, hasNoTopBottomMarginOnMobile, shouldPreferCollectionGrid, hasVersoFeaturesIncreasedVerticalPaddingTop, hasMarginBottomMultiPackageRow, hasMarginTopMultiPackageRow, hasVersoFeaturesIncreasedVerticalPadding } = additionalProps;
    const { hasVersoFeaturesReducedMargin, shouldUseCustomMargin } = minimalSpacingConfig;
    if (!(0, utils_1.hasItems)(container)) {
        return null;
    }
    return (
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    react_1.default.createElement(MultiPackageRow_1.default, { dataJourneyHook: dataJourneyHook, hasNoBottomMargin: true, hasNoTopMargin: !!hasVersoFeaturesReducedMargin, hasMarginBottomMultiPackageRow: hasMarginBottomMultiPackageRow, hasMarginTopMultiPackageRow: hasMarginTopMultiPackageRow, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile },
        react_1.default.createElement(verso_features_1.default
        /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
        /* @ts-ignore */
        , { 
            /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
            /* @ts-ignore */
            container: container, hasIncreasedVerticalPadding: hasVersoFeaturesIncreasedVerticalPadding, hasIncreasedVerticalPaddingTop: hasVersoFeaturesIncreasedVerticalPaddingTop, hasMinimalVerticalSpacing: hasVersoFeaturesReducedMargin, lowestHierarchy: bundleProps.bundle.isDestinationBundle ? lowestHierarchy : '', shouldPreferCollectionGrid: shouldPreferCollectionGrid, shouldUseAdInCollectionGrid: bundleProps.featureFlags.shouldUseAdInCollectionGrid, isDestinationBundle: bundleProps.bundle.isDestinationBundle, summaryCollageVariation: "RowsWithDekAndItemsBelow", hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, hasReducedMargin: hasReducedMargin, shouldUseCustomMargin: shouldUseCustomMargin })));
};
exports.VersoFeaturesRowsWrapper = VersoFeaturesRowsWrapper;
class VersoFeaturesRowsPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'verso-features-rows-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'VersoFeaturesRows',
            component: exports.VersoFeaturesRowsWrapper,
            type: IComponentDefinition_1.PlaceholderTypes.Container,
            dataProcessor: {
                fetchers: ['GetBundleFetcher', 'GetRelatedFetcher'],
                transformer: 'SharedBundleContainerTransformer'
            }
        });
    }
}
exports["default"] = VersoFeaturesRowsPlugin;
//# sourceMappingURL=VersoFeaturesRows.js.map

/***/ }),

/***/ 25161:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.FilterableSummaryList = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const classnames_1 = __importDefault(__webpack_require__(32485));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const MultiPackageRow_1 = __importDefault(__webpack_require__(3771));
const verso_filterable_summary_list_1 = __importDefault(__webpack_require__(10220));
const utils_1 = __webpack_require__(79912);
const FilterableSummaryList = ({ container, multiPackageValues }) => {
    const { additionalProps, dataJourneyHook, hasConsistentSpacing, minimalSpacingConfig, bundleProps } = multiPackageValues;
    // TODO: cleanup spacing related props, once we have spacing tokens
    const { hasCarouselSliderPagination, hasPlpFilterableContainerBackgroundColor, ProductListingCarouselContainersData } = additionalProps;
    const { hasNoBottomMargin, hasNoTopMargin } = minimalSpacingConfig;
    const bookmark = bundleProps.config?.account?.bookmark;
    const enableCardLevelBookmark = bookmark?.enableCardLevelBookmark || false;
    const enableCommentsCount = bundleProps.config?.commenting?.enableCommentsCount;
    return (
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    react_1.default.createElement(MultiPackageRow_1.default, { dataJourneyHook: dataJourneyHook, className: (0, classnames_1.default)({
            'homepage__plp-filterable-row': hasPlpFilterableContainerBackgroundColor && !container?.isGrid
        }), hasNoTopMargin: !!hasNoTopMargin, hasNoBottomMargin: !!hasNoBottomMargin, hasIncreasedVerticalPadding: true, hasConsistentSpacing: hasConsistentSpacing },
        react_1.default.createElement(verso_filterable_summary_list_1.default
        /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
        /* @ts-ignore */
        , { ...container, hasCarouselSliderPagination: hasCarouselSliderPagination, isFirstProductListingContainer: (0, utils_1.isFirstProductContainer)(container, ProductListingCarouselContainersData) && !bundleProps.bundle.hasDefaultAffiliateDisclaimer, affiliateDisclaimer: bundleProps.bundle.affiliateDisclaimer, showDisclaimer: bundleProps.bundle.showDisclaimer, shouldEnableBookmarkDrawers: bundleProps.featureFlags.enableBookmarkDrawers, shouldEnableCardLevelBookmark: enableCardLevelBookmark, shouldEnableCommentsCount: enableCommentsCount })));
};
exports.FilterableSummaryList = FilterableSummaryList;
class VersoFilterableSummaryListPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'verso-filterable-summary-list-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'VersoFilterableSummaryList',
            component: exports.FilterableSummaryList,
            type: IComponentDefinition_1.PlaceholderTypes.Container,
            dataProcessor: {
                fetchers: ['GetBundleFetcher', 'GetRelatedFetcher'],
                transformer: 'SharedBundleContainerTransformer'
            }
        });
    }
}
exports["default"] = VersoFilterableSummaryListPlugin;
//# sourceMappingURL=VersoFilterableSummaryList.js.map

/***/ }),

/***/ 94879:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.VersoHeroCuratedFeature = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const utils_1 = __webpack_require__(79912);
const MultiPackageRow_1 = __importDefault(__webpack_require__(3771));
const best_stories_1 = __importDefault(__webpack_require__(31498));
const VersoHeroCuratedFeature = ({ container, multiPackageValues }) => {
    const { additionalProps } = multiPackageValues;
    const { hasMarginBottomMultiPackageRow, hasMarginTopMultiPackageRow } = additionalProps;
    if (!(0, utils_1.hasItems)(container)) {
        return null;
    }
    return (
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    react_1.default.createElement(MultiPackageRow_1.default, { className: "verso-best-stories-package", hasMarginBottomMultiPackageRow: hasMarginBottomMultiPackageRow, hasMarginTopMultiPackageRow: hasMarginTopMultiPackageRow },
        react_1.default.createElement(best_stories_1.default, { ...container })));
};
exports.VersoHeroCuratedFeature = VersoHeroCuratedFeature;
class VersoHeroCuratedFeaturePlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'verso-hero-curated-feature';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'VersoHeroCuratedFeature',
            component: exports.VersoHeroCuratedFeature,
            type: IComponentDefinition_1.PlaceholderTypes.Container,
            dataProcessor: {
                fetchers: ['GetBundleFetcher', 'GetRelatedFetcher'],
                transformer: 'SharedBundleContainerTransformer'
            }
        });
    }
}
exports["default"] = VersoHeroCuratedFeaturePlugin;
//# sourceMappingURL=VersoHeroCuratedFeature.js.map

/***/ }),

/***/ 49233:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.VersoNativeAd = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const MultiPackageRow_1 = __importDefault(__webpack_require__(3771));
const payment_gateway_1 = __webpack_require__(92807);
const ad_1 = __importDefault(__webpack_require__(19607));
const VersoNativeAd = ({ multiPackageValues }) => {
    const { additionalProps, dataJourneyHook, minimalSpacingConfig } = multiPackageValues;
    const { hasMediumMargin, hasReducedMargin, hasNoTopBottomMarginOnMobile, hasConsistentSpacing } = minimalSpacingConfig;
    if (additionalProps.shouldHideAds) {
        return null;
    }
    return (
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    react_1.default.createElement(MultiPackageRow_1.default, { dataJourneyHook: dataJourneyHook, className: "homepage__native-ad", hasReducedMargin: hasReducedMargin, hasMediumMargin: hasMediumMargin, hasNoTopBottomMarginOnMobile: hasNoTopBottomMarginOnMobile, hasConsistentSpacing: hasConsistentSpacing, isNativeAd: true },
        react_1.default.createElement(payment_gateway_1.PaymentGateway, { group: "ads" },
            react_1.default.createElement(ad_1.default, { position: "promo" }))));
};
exports.VersoNativeAd = VersoNativeAd;
class VersoNativeAdPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'verso-native-ad-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'VersoNativeAd',
            component: exports.VersoNativeAd,
            type: IComponentDefinition_1.PlaceholderTypes.Ad,
            dataProcessor: {
                fetchers: ['GetBundleFetcher'],
                transformer: 'VersoNativeTransformer'
            }
        });
    }
}
exports["default"] = VersoNativeAdPlugin;
//# sourceMappingURL=VersoNativeAd.js.map

/***/ }),

/***/ 43056:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.VersoRelated = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const classnames_1 = __importDefault(__webpack_require__(32485));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const IComponentDefinition_1 = __webpack_require__(79352);
const MultiPackageRow_1 = __importDefault(__webpack_require__(3771));
const summary_collection_row_1 = __importDefault(__webpack_require__(35862));
const utils_1 = __webpack_require__(79912);
const VersoRelated = ({ container, multiPackageValues, componentConfigOverride, shouldUseSmartItem }) => {
    const { additionalProps, dataJourneyHook, minimalSpacingConfig } = multiPackageValues;
    const { hasRelatedContainerBackgroundColor, hasMarginBottomMultiPackageRow, hasMarginTopMultiPackageRow, nativeTrendingPosition } = additionalProps;
    const { hasMediumMargin, hasNoBottomMargin } = minimalSpacingConfig;
    if (!(0, utils_1.hasItems)(container)) {
        return null;
    }
    return (
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    react_1.default.createElement(MultiPackageRow_1.default, { dataJourneyHook: dataJourneyHook, className: (0, classnames_1.default)({
            'homepage__related-row': hasRelatedContainerBackgroundColor,
            'summary-collection-row': true
        }), hasMarginBottomMultiPackageRow: hasMarginBottomMultiPackageRow, hasMarginTopMultiPackageRow: hasMarginTopMultiPackageRow, hasNoBottomMargin: hasNoBottomMargin, hasMediumMargin: hasMediumMargin },
        react_1.default.createElement(summary_collection_row_1.default, { ...container, hasBackgroundColor: hasRelatedContainerBackgroundColor, nativeTrendingPosition: nativeTrendingPosition, shouldTrackSnowplowRecircEvent: true, componentConfigOverride: componentConfigOverride, shouldUseSmartItem: shouldUseSmartItem })));
};
exports.VersoRelated = VersoRelated;
class VersoRelatedPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'verso-related-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'VersoRelated',
            component: exports.VersoRelated,
            type: IComponentDefinition_1.PlaceholderTypes.Container,
            dataProcessor: {
                fetchers: ['GetBundleFetcher', 'GetRelatedFetcher'],
                transformer: 'SharedBundleContainerTransformer'
            }
        });
    }
}
exports["default"] = VersoRelatedPlugin;
//# sourceMappingURL=VersoRelated.js.map

/***/ }),

/***/ 91957:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.VersoSubtopics = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const styled_components_1 = __importDefault(__webpack_require__(92168));
const Plugin_1 = __importDefault(__webpack_require__(77060));
const subtopic_discovery_1 = __importDefault(__webpack_require__(13478));
const IComponentDefinition_1 = __webpack_require__(79352);
const MultiPackageRow_1 = __importDefault(__webpack_require__(3771));
const layout_1 = __webpack_require__(1123);
const grid_1 = __webpack_require__(89085);
const constants_1 = __webpack_require__(96472);
const utils_1 = __webpack_require__(26865);
const utils_2 = __webpack_require__(79912);
const SubTopicDiscoveryWrapper = styled_components_1.default.div.withConfig({
    displayName: 'SubTopicDiscoveryWrapper'
}) `
  ${(0, grid_1.universalGridCore)(true)}
  ${(0, layout_1.applyGridSpacing)('padding')}

  margin: 0 auto;
  width: 100%;
  max-width: ${constants_1.BREAKPOINTS.xxl};

  ${(0, utils_1.minScreen)(constants_1.BREAKPOINTS.lg)} {
    padding-right: var(--grid-margin);
    padding-left: var(--grid-margin);
  }
`;
const VersoSubtopics = ({ container, multiPackageValues }) => {
    const { additionalProps, dataJourneyHook } = multiPackageValues;
    const { hasMarginBottomMultiPackageRow, hasMarginTopMultiPackageRow } = additionalProps;
    if (!(0, utils_2.hasItems)(container)) {
        return null;
    }
    return (
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    react_1.default.createElement(MultiPackageRow_1.default, { className: "verso-subtopic-discovery-row", hasMarginBottomMultiPackageRow: hasMarginBottomMultiPackageRow, hasMarginTopMultiPackageRow: hasMarginTopMultiPackageRow, dataJourneyHook: dataJourneyHook },
        react_1.default.createElement(SubTopicDiscoveryWrapper, null,
            react_1.default.createElement(subtopic_discovery_1.default, { ...container }))));
};
exports.VersoSubtopics = VersoSubtopics;
class VersoSubtopicsPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'verso-subtopics-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'VersoSubtopics',
            component: exports.VersoSubtopics,
            type: IComponentDefinition_1.PlaceholderTypes.Container,
            dataProcessor: {
                fetchers: ['GetBundleFetcher', 'GetRelatedFetcher'],
                transformer: 'SharedBundleContainerTransformer'
            }
        });
    }
}
exports["default"] = VersoSubtopicsPlugin;
//# sourceMappingURL=VersoSubtopics.js.map

/***/ }),

/***/ 3113:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.VersoTicker = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const classnames_1 = __importDefault(__webpack_require__(32485));
const styled_components_1 = __importDefault(__webpack_require__(92168));
const IComponentDefinition_1 = __webpack_require__(79352);
const Plugin_1 = __importDefault(__webpack_require__(77060));
const MultiPackages_1 = __webpack_require__(97737);
const consumer_marketing_unit_1 = __importDefault(__webpack_require__(71284));
const constants_1 = __webpack_require__(96472);
const layout_1 = __webpack_require__(1123);
const commonStyle = `
  ${(0, layout_1.cssVariablesGrid)()}
  ${(0, layout_1.applyGridSpacing)('padding')}

  margin: 0 auto;
  width: 100%;
  max-width: ${constants_1.BREAKPOINTS.xxl};
`;
const TickerWrapper = styled_components_1.default.div.withConfig({ displayName: 'TickerWrapper' }) `
  ${({ isInvertedTheme }) => {
    if (isInvertedTheme) {
        return `
        ${(0, layout_1.cssVariablesGrid)()}
        ${(0, layout_1.applyGridSpacing)('padding', true)}`;
    }
    return `${commonStyle}`;
}}
`;
const VersoTicker = ({ container, multiPackageValues }) => {
    const { additionalProps, minimalSpacingConfig, bundleProps } = multiPackageValues;
    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('ticker-view', {
            'ticker-view--has-special-theme': additionalProps.hasTickerSpecialTheme
        }) },
        react_1.default.createElement(TickerWrapper, null,
            react_1.default.createElement(consumer_marketing_unit_1.default, { position: "cm-ticker" })),
        (0, MultiPackages_1.getTickerView)(
        // hardcoding index to have MultiPackageRow
        // wrapper for TickerWrapper
        1, bundleProps.bundle.isInvertedTheme, container, minimalSpacingConfig)));
};
exports.VersoTicker = VersoTicker;
class VersoTickerPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'verso-ticker-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'VersoTicker',
            component: exports.VersoTicker,
            type: IComponentDefinition_1.PlaceholderTypes.ConsumerMarketingUnit,
            dataProcessor: {
                fetchers: ['GetBundleFetcher', 'GetRelatedFetcher'],
                transformer: 'SharedBundleContainerTransformer'
            }
        });
    }
}
exports["default"] = VersoTickerPlugin;
//# sourceMappingURL=VersoTicker.js.map

/***/ }),

/***/ 71453:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.VisualStoryComponent = void 0;
const react_1 = __importDefault(__webpack_require__(96540));
const IComponentDefinition_1 = __webpack_require__(79352);
const Plugin_1 = __importDefault(__webpack_require__(77060));
const visual_story_page_1 = __importDefault(__webpack_require__(67228));
const VisualStoryComponent = (inputData) => {
    return react_1.default.createElement(visual_story_page_1.default, { ...inputData });
};
exports.VisualStoryComponent = VisualStoryComponent;
class VisualStoryPlugin extends Plugin_1.default {
    constructor() {
        super(...arguments);
        this.name = 'visual-story-plugin';
    }
    boot() {
        this.pluginSystem.registerComponent({
            name: 'VisualStory',
            // If we need to register already available
            // component, just import and add it in here
            component: exports.VisualStoryComponent,
            type: IComponentDefinition_1.PlaceholderTypes.VisualStory,
            dataProcessor: {
                // add fetchers in here once you have query ready and configured
                fetchers: ['VisualStoryFetcher', 'MostRecentVisualStoryFetcher'],
                // add transformer in here once you need some logic in corresponding transformer
                transformer: 'VisualStoryTransformer'
            }
        });
    }
}
exports["default"] = VisualStoryPlugin;
//# sourceMappingURL=VisualStory.js.map

/***/ }),

/***/ 5492:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const ActionBar_1 = __importDefault(__webpack_require__(86307));
const AdFooter_1 = __importDefault(__webpack_require__(74996));
const AdHero_1 = __importDefault(__webpack_require__(31515));
const AdMidContent_1 = __importDefault(__webpack_require__(39988));
const AdRail_1 = __importDefault(__webpack_require__(40675));
const BodyContent_1 = __importDefault(__webpack_require__(69449));
const CMUFooter_1 = __importDefault(__webpack_require__(66148));
const ContentHeader_1 = __importDefault(__webpack_require__(60404));
const ContentFooter_1 = __importDefault(__webpack_require__(20394));
const ErrorContent_1 = __importDefault(__webpack_require__(4053));
const ChunkWrapper_1 = __importDefault(__webpack_require__(56282));
const CustomDeviceErrorContent_1 = __importDefault(__webpack_require__(24376));
const Fallback_1 = __importDefault(__webpack_require__(33428));
const MostRecentContent_1 = __importDefault(__webpack_require__(96589));
const RecircList_1 = __importDefault(__webpack_require__(45432));
const RecircMostPopular_1 = __importDefault(__webpack_require__(77246));
const SiteFooter_1 = __importDefault(__webpack_require__(50806));
const StackedNavigation_1 = __importDefault(__webpack_require__(70975));
const StickyRail_1 = __importDefault(__webpack_require__(14557));
const SummaryCarousel_1 = __importDefault(__webpack_require__(93702));
const Ticker_1 = __importDefault(__webpack_require__(20028));
const VersoCNEVideo_1 = __importDefault(__webpack_require__(42408));
const VersoEmbed_1 = __importDefault(__webpack_require__(23638));
const VersoFeatures_1 = __importDefault(__webpack_require__(80428));
const VersoFeaturesRows_1 = __importDefault(__webpack_require__(67165));
const VersoFilterableSummaryList_1 = __importDefault(__webpack_require__(25161));
const VersoHeroCuratedFeature_1 = __importDefault(__webpack_require__(94879));
const VersoRelated_1 = __importDefault(__webpack_require__(43056));
const VersoSubtopics_1 = __importDefault(__webpack_require__(91957));
const MultiPackageWrapper_1 = __importDefault(__webpack_require__(22514));
const VersoTicker_1 = __importDefault(__webpack_require__(3113));
const HomePageWrapper_1 = __importDefault(__webpack_require__(64143));
const BaseAd_1 = __importDefault(__webpack_require__(70306));
const PersistentBottomPaywall_1 = __importDefault(__webpack_require__(32248));
const SignInModal_1 = __importDefault(__webpack_require__(96343));
const VersoNativeAd_1 = __importDefault(__webpack_require__(49233));
const VisualStory_1 = __importDefault(__webpack_require__(71453));
const PluginComponents = [
    ActionBar_1.default,
    AdFooter_1.default,
    AdHero_1.default,
    AdMidContent_1.default,
    AdRail_1.default,
    BaseAd_1.default,
    BodyContent_1.default,
    ChunkWrapper_1.default,
    CMUFooter_1.default,
    ContentHeader_1.default,
    ContentFooter_1.default,
    ErrorContent_1.default,
    CustomDeviceErrorContent_1.default,
    Fallback_1.default,
    HomePageWrapper_1.default,
    MostRecentContent_1.default,
    MultiPackageWrapper_1.default,
    PersistentBottomPaywall_1.default,
    RecircList_1.default,
    RecircMostPopular_1.default,
    SiteFooter_1.default,
    StackedNavigation_1.default,
    StickyRail_1.default,
    SummaryCarousel_1.default,
    Ticker_1.default,
    SignInModal_1.default,
    VersoCNEVideo_1.default,
    VersoEmbed_1.default,
    VersoFeatures_1.default,
    VersoFeaturesRows_1.default,
    VersoFilterableSummaryList_1.default,
    VersoHeroCuratedFeature_1.default,
    VersoNativeAd_1.default,
    VersoRelated_1.default,
    VersoSubtopics_1.default,
    VersoTicker_1.default,
    VisualStory_1.default
];
exports["default"] = PluginComponents;
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 27311:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.AccessNegotiationClient = exports.NO_CN_ACCESS_COOKIE = exports.UNRESTRICTED_CONTENT = exports.ACTIVE_SUBSCRIPTION_FOUND = exports.MISSING_SUBSCRIPTION = exports.MISSING_MATRIX = void 0;
const isEmpty_1 = __importDefault(__webpack_require__(62193));
const flatten_1 = __importDefault(__webpack_require__(35970));
const values_1 = __importDefault(__webpack_require__(35880));
const decode_jwt_1 = __importDefault(__webpack_require__(79712));
const userPlatformFetch_1 = __webpack_require__(91250);
const cookie_1 = __webpack_require__(56892);
const cookies_1 = __importDefault(__webpack_require__(53788));
const MAX_TIMEOUT = 5000;
let accessNegotiation = {
    accessGranted: false,
    reason: ''
};
exports.MISSING_MATRIX = 'missing matrix';
exports.MISSING_SUBSCRIPTION = 'missing subscription';
exports.ACTIVE_SUBSCRIPTION_FOUND = 'active subscription found';
exports.UNRESTRICTED_CONTENT = 'unrestricted content';
exports.NO_CN_ACCESS_COOKIE = 'cookie does not exist';
const ACCESS_GRANTED_TRUE = true;
const ACCESS_GRANTED_FALSE = false;
class AccessNegotiationClient {
    /**
     * initialize - extracts active subscription from cookie and checks for access negotiation
     *
     * @param store - the redux store
     * @returns accessGranted
     */
    static async initialize(store) {
        try {
            const checkAccess = async () => {
                const { access } = store.getState();
                const { contentRestricted, accessMatrix, content } = access;
                if (!contentRestricted) {
                    return setAccessNegotiation(ACCESS_GRANTED_TRUE, exports.UNRESTRICTED_CONTENT);
                }
                const cookieValue = (0, cookie_1.getCookie)(cookies_1.default.accessCookie);
                if (!cookieValue) {
                    return setAccessNegotiation(ACCESS_GRANTED_FALSE, exports.NO_CN_ACCESS_COOKIE);
                }
                const subscribedProducts = await getSubscriptionsFromToken();
                if ((0, isEmpty_1.default)(subscribedProducts)) {
                    return setAccessNegotiation(ACCESS_GRANTED_FALSE, exports.MISSING_SUBSCRIPTION);
                }
                return performAccessNegotiation(content, subscribedProducts, accessMatrix);
            };
            store.dispatch({
                type: 'MERGE_KEY',
                key: 'access',
                value: {
                    accessNegotiation: await checkAccess()
                }
            });
        }
        catch (error) {
            console.error('error in access negotiation', error);
        }
    }
}
exports.AccessNegotiationClient = AccessNegotiationClient;
const performAccessNegotiation = (content, UserAccess, accessMatrix) => {
    const selectedUserMatrix = UserAccess.reduce((memo, item) => {
        if (item in accessMatrix) {
            memo.push(accessMatrix[item]);
        }
        return memo;
    }, []);
    if ((0, isEmpty_1.default)(selectedUserMatrix)) {
        return setAccessNegotiation(ACCESS_GRANTED_FALSE, exports.MISSING_MATRIX);
    }
    return findMatchedAccess(selectedUserMatrix, content);
};
const findMatchedAccess = (matrix, content) => {
    const isMatched = matrix.some((consumables) => {
        return consumables.some((consumable) => {
            const { name, ...trimmedConsumable } = consumable;
            return Object.keys(trimmedConsumable).every((key) => {
                const matching_obj = trimmedConsumable[key];
                const matching_content_obj = content[key];
                let result = false;
                if (typeof matching_obj === 'string' &&
                    matching_obj === matching_content_obj) {
                    result = true;
                }
                if (typeof matching_obj === 'object' &&
                    matching_obj.includes(matching_content_obj)) {
                    result = true;
                }
                return result;
            });
        });
    });
    if (isMatched) {
        accessNegotiation = {
            ...accessNegotiation,
            accessGranted: true,
            reason: exports.ACTIVE_SUBSCRIPTION_FOUND
        };
        return setAccessNegotiation(ACCESS_GRANTED_TRUE, exports.ACTIVE_SUBSCRIPTION_FOUND);
    }
    return setAccessNegotiation(ACCESS_GRANTED_FALSE, exports.MISSING_SUBSCRIPTION);
};
const setAccessNegotiation = (accessGranted, reason) => {
    accessNegotiation.accessGranted = accessGranted;
    accessNegotiation.reason = reason;
    return accessNegotiation;
};
const revalidateAccessToken = async () => {
    const token = getDecodedAccessToken();
    if (!token?.exp || Date.now() < (token?.exp || 0) * 1000) {
        return;
    }
    // make a fetch call to access conde to get new access token
    const url = `/api/access/revalidate`;
    const fetchParams = {
        credentials: 'include',
        mode: 'cors',
        headers: {
            'Content-Type': 'application/json',
            'User-Agent': 'verso-access-sphere'
        }
    };
    await (0, userPlatformFetch_1.fetchWithTimeout)(url, fetchParams, MAX_TIMEOUT);
};
const getDecodedAccessToken = () => {
    const cookieValue = (0, cookie_1.getCookie)(cookies_1.default.accessCookie);
    if (!cookieValue) {
        return {};
    }
    return (0, decode_jwt_1.default)(cookieValue);
};
const getSubscriptionsFromToken = async () => {
    await revalidateAccessToken();
    const token = getDecodedAccessToken();
    return (0, flatten_1.default)((0, values_1.default)(token?.fct));
};
//# sourceMappingURL=accessNegotiation.js.map

/***/ }),

/***/ 71557:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.AnalyticsClient = void 0;
const actors_1 = __webpack_require__(31089);
const redux_1 = __webpack_require__(57744);
/**
 * Initializes and manages tracking data.
 */
class AnalyticsClient {
    /**
     * @param store - the redux store
     */
    static initialize(store) {
        const analytics = new this();
        analytics.initialize(store);
    }
    constructor() { }
    initialize(store) {
        const { googleTagManagerId: tag, googleTagManagerToken: token } = store.getState();
        const container = document.head;
        const tokenList = token?.split('~');
        const gtmToken = tokenList ? tokenList[0] : '';
        const gtmPreview = tokenList ? tokenList[1] : '';
        const authToken = token
            ? `&gtm_auth=${gtmToken}&gtm_preview=env-${gtmPreview}&gtm_cookies_win=x`
            : ``;
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'gtm.start': new Date().getTime(),
            event: 'gtm.js'
        });
        if (tag) {
            const gtmScript = document.createElement('script');
            gtmScript.src = `https://www.googletagmanager.com/gtm.js?id=GTM-${tag}${authToken}&l=dataLayer`;
            container.appendChild(gtmScript);
        }
        (0, redux_1.bindActorToStore)(actors_1.updateUserSubscriptionStatus, store);
    }
}
exports.AnalyticsClient = AnalyticsClient;
//# sourceMappingURL=AnalyticsClient.js.map

/***/ }),

/***/ 31089:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.updateUserSubscriptionStatus = void 0;
var updateUserSubscriptionStatus_1 = __webpack_require__(82672);
Object.defineProperty(exports, "updateUserSubscriptionStatus", ({ enumerable: true, get: function () { return updateUserSubscriptionStatus_1.updateUserSubscriptionStatus; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 82672:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.updateUserSubscriptionStatus = void 0;
const get_1 = __importDefault(__webpack_require__(58156));
exports.updateUserSubscriptionStatus = {
    scopes: {
        watch: ['user.isAuthenticated', 'user.isEntitled'],
        input: ['user.isAuthenticated', 'user.isEntitled'],
        output: []
    },
    perform: (state) => {
        const { isAuthenticated, isEntitled } = state.user;
        // user's entitlement status has not been determined yet
        if (isEntitled === undefined)
            return;
        const dataLayer = (0, get_1.default)(window, 'dataLayer');
        if (dataLayer) {
            dataLayer.push({
                event: 'subscription-status-updated',
                user: {
                    account: {
                        subscriptionStatus: isAuthenticated && isEntitled ? 'active' : 'not active'
                    }
                }
            });
        }
    }
};
//# sourceMappingURL=updateUserSubscriptionStatus.js.map

/***/ }),

/***/ 69858:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const cloneDeep_1 = __importDefault(__webpack_require__(88055));
const flow_1 = __importDefault(__webpack_require__(49870));
const pick_1 = __importDefault(__webpack_require__(44383));
const domains = ['payment', 'user', 'segmentation'];
const deepCopyOf = (0, flow_1.default)([pick_1.default, cloneDeep_1.default]);
/**
 * Factory method that creates a data gateway. The gateway exposes a portion
 * of the redux store in a read-only manner. The gateway is intended to be
 * used to expose store data to javascript run in script tags contained
 * within DFP units. A deep copy is made, rather than a reference, so that
 * the store data is not available for modification by DFP units.
 *
 * @param store - a redux Store
 * @returns a DataGateway
 */
exports["default"] = (store) => ({
    fetch: () => deepCopyOf(store.getState(), domains)
});
//# sourceMappingURL=dataGateway.js.map

/***/ }),

/***/ 26138:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.SwgClient = void 0;
const redux_1 = __webpack_require__(57744);
const actors_1 = __webpack_require__(34861);
const swg_1 = __importDefault(__webpack_require__(20494));
const utils_1 = __webpack_require__(91287);
class SwgClient {
    static initialize(store) {
        const { google, payment = {}, user, userPlatform } = store.getState();
        const { processEntitlementResponse } = google.entitlement;
        const subscriptionContext = (0, utils_1.createSubscriptionContext)(google, payment, user, userPlatform);
        if (user.isAuthenticated) {
            swg_1.default.registerSwgAccountLinkCTA(user.amguuid, google, subscriptionContext);
        }
        swg_1.default.registerSwgSubscribeCTA(google.swgSku);
        swg_1.default.registerOnEntitlementsResponseHandler(subscriptionContext, processEntitlementResponse);
        swg_1.default.registerOnSubscribeResponseHandler(subscriptionContext);
        (0, redux_1.bindActorToStore)(actors_1.googleRegisterLwgCTA, store);
    }
}
exports.SwgClient = SwgClient;
//# sourceMappingURL=SwgClient.js.map

/***/ }),

/***/ 10435:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.googleRegisterLwgCTA = void 0;
const swg_1 = __importDefault(__webpack_require__(20494));
exports.googleRegisterLwgCTA = {
    scopes: {
        watch: ['payment.sample'],
        input: ['payment.sample', 'google', 'userPlatform'],
        output: []
    },
    perform: (state) => {
        const { google, payment, userPlatform } = state;
        const platformData = {
            registrationSourceCode: google.registrationSourceCode,
            siteCode: userPlatform.siteCode,
            userPlatformProxy: userPlatform.userPlatformProxy,
            xClientID: userPlatform.xClientID
        };
        swg_1.default.registerLwgCTA(platformData, payment);
    }
};
//# sourceMappingURL=googleRegisterLwgCTA.js.map

/***/ }),

/***/ 34861:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.googleRegisterLwgCTA = void 0;
var googleRegisterLwgCTA_1 = __webpack_require__(10435);
Object.defineProperty(exports, "googleRegisterLwgCTA", ({ enumerable: true, get: function () { return googleRegisterLwgCTA_1.googleRegisterLwgCTA; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 81741:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.deferredAccountCreation = exports.authenticateUserByEntitlementsToken = void 0;
const { googleAnalytics } = __webpack_require__(90090);
const authHelper = __webpack_require__(86969);
const subscriptionHandler = __webpack_require__(94010);
/**
 * Authenticates a user using a Google provided entitlements token
 *
 * @param {object} subscriptionContext - subscription configuration and application state
 * @param {object} entitlements - Google provided entitlements payload.
 * See https://github.com/subscriptions-project/swg-js/blob/master/docs/entitlements-flow.md#entitlement-response
 *
 * @returns {Promise} - true if the user was found and authenticated; false otherwise
 */
const authenticateUserByEntitlementsToken = async (subscriptionContext, entitlements) => {
    const { siteCode, userPlatformProxy, xClientID } = subscriptionContext;
    // Check first if the user has entitlements via a publisher-entitled account
    // If this is the case, the subscriptionToken should be a valid User Platform
    // token and we can log the user in with that.
    if (entitlements.entitlements) {
        const condeEntitlement = entitlements.entitlements.find((entitlementObject) => {
            return (entitlementObject.source === subscriptionContext.swgPublicationId &&
                !!entitlementObject.subscriptionToken);
        });
        if (condeEntitlement) {
            return authHelper
                .swgAuthenticate({
                payload: {
                    condeSubscriptionToken: condeEntitlement.subscriptionToken,
                    persistSession: true,
                    siteCode
                },
                userPlatformProxy,
                xClientID
            })
                .then((response) => {
                if (response.ok) {
                    googleAnalytics.emitGoogleTrackingEvent('swg-entitlements-authenticate-success', {
                        tokenType: 'conde subscription token'
                    });
                    return true;
                }
                googleAnalytics.emitGoogleTrackingEvent('swg-entitlements-authenticate-failure', {
                    tokenType: 'conde subscription token'
                });
                return false;
            });
        }
    }
    // Default to attempting to authenticate with the raw entitlement response from
    // Google, the most likely case for when the entitlements are provided via SwG
    return authHelper
        .swgAuthenticate({
        payload: {
            entitlementsToken: entitlements.raw,
            persistSession: true,
            siteCode
        },
        userPlatformProxy,
        xClientID
    })
        .then((response) => {
        if (response.ok) {
            googleAnalytics.emitGoogleTrackingEvent('swg-entitlements-authenticate-success', {
                tokenType: 'entitlements token'
            });
            return true;
        }
        googleAnalytics.emitGoogleTrackingEvent('swg-entitlements-authenticate-failure', {
            tokenType: 'entitlements token'
        });
        return false;
    });
};
exports.authenticateUserByEntitlementsToken = authenticateUserByEntitlementsToken;
/**
 * Creates a user account along with a subscription using a
 * Google provided id token and entitlements token
 *
 * @param {object} swgClient - subscribe with google client
 * @param {object} subscriptionContext - subscription configuration and application state
 * @param {object} entitlements - Google provided entitlements payload
 *
 * @returns {Promise} - resolves when the account is created
 */
const deferredAccountCreation = async (swgClient, subscriptionContext, entitlements) => {
    googleAnalytics.emitGoogleTrackingEvent('subscription-defer-account-creation-attempt', {
        subscriptionSource: 'verso-subscribe-with-google'
    });
    let subscribeResponse;
    try {
        subscribeResponse = await swgClient.completeDeferredAccountCreation({
            entitlements,
            consent: true
        });
        googleAnalytics.emitGoogleTrackingEvent('subscription-defer-account-creation-complete', {
            subscriptionSource: 'verso-subscribe-with-google'
        });
    }
    catch (error) {
        googleAnalytics.emitGoogleTrackingEvent('subscription-defer-account-creation-failure', {
            subscriptionSource: 'verso-subscribe-with-google',
            user: {
                account: {
                    loginFailureMessage: error.toString()
                }
            }
        });
    }
    await subscriptionHandler.handleSubscription(subscriptionContext, subscribeResponse);
};
exports.deferredAccountCreation = deferredAccountCreation;
//# sourceMappingURL=entitlementsClient.js.map

/***/ }),

/***/ 2208:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.storeSubscription = exports.authenticateUser = void 0;
const userHelper = __webpack_require__(86969);
const { proxyApiRoutes } = __webpack_require__(15822);
/**
 * Authenticates a user using a Google provided id token if the user
 * is not already authenticated
 *
 * @param {object} subscriptionContext - subscription configuration and application state
 * @param {object} subscribeResponse - Google provided subscription payload
 *
 * @returns {Promise} - resolves when the user is authenticated
 */
const authenticateUser = async (subscriptionContext, subscribeResponse) => {
    if (subscriptionContext.isLoggedIn) {
        return;
    }
    const { registrationSourceCode, siteCode, userPlatformProxy, xClientID } = subscriptionContext;
    const authResult = await userHelper.googleAuthenticate({
        googleIdToken: subscribeResponse.userData.idToken,
        registrationSourceCode,
        siteCode,
        source: 'verso-swg-flow',
        userPlatformProxy,
        xClientID
    });
    if (authResult === 'error') {
        throw new Error('authentication failed');
    }
};
exports.authenticateUser = authenticateUser;
/**
 * Stores a subscription in CNEE via User Platform Gateway
 *
 * @param {object} subscriptionContext - subscription configuration and application state
 * @param {object} subscribeResponse - Google provided subscription payload
 *
 * @returns {Promise} - resolves when the subscription is stored with purchase data
 * See https://developers.google.com/android-publisher/api-ref/purchases/subscriptions
 */
const storeSubscription = (subscriptionContext, subscribeResponse) => {
    const { siteCode, userPlatformProxy, xClientID } = subscriptionContext;
    return fetch(`${userPlatformProxy}${proxyApiRoutes.swgSubscribe}`, {
        body: JSON.stringify({
            signature: subscribeResponse.purchaseData.signature,
            siteCode,
            subscriptionToken: subscribeResponse.purchaseData.raw
        }),
        credentials: 'include',
        headers: {
            'Content-Type': 'application/json',
            'x-client': xClientID
        },
        method: 'POST'
    }).then((response) => {
        if (response.status !== 200) {
            throw new Error(`failed to send subscription. response status: ${response.status}`);
        }
        return response.json();
    });
};
exports.storeSubscription = storeSubscription;
//# sourceMappingURL=subscriptionClient.js.map

/***/ }),

/***/ 29538:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const isEmpty = __webpack_require__(62193);
const set = __webpack_require__(63560);
const subscriptionHandler = __webpack_require__(94010);
const entitlementsHandler = __webpack_require__(48637);
const googleApi = __webpack_require__(99167);
const _internals = {};
/**
 * Adds a isReadyToPay flag to the window.CN.user object,
 * if the user has no entitlements but has a credit card on file.
 *
 * @param {object} entitlementsResponse - the entitlement object from Google
 * @returns {undefined}
 */
_internals.handleReadyToPay = function (entitlementsResponse) {
    const { entitlements: userEntitlements = [], isReadyToPay } = entitlementsResponse || {};
    // Only set window.CN.user.isReadyToPay to true when the user has no entitlements coming back
    set(window, 'CN.user.isReadyToPay', (userEntitlements.length <= 0 && isReadyToPay) || false);
    if (isReadyToPay) {
        window.dataLayer.push({
            event: 'swg-readytopay',
            user: { swgReadyToPay: true }
        });
    }
};
/**
 * Calls the SwG account linking window based upon certain conditions listed:
 * 1. User has to be logged into our site
 * 2. Logged in user has to has to have valid Condé entitlements
 * 3. User is logged into Google
 * 4. User's Google account does not have a Condé subscription
 * 5. Has the swglinking param in the URL
 *
 * @param {object} swgEntitlements - entitlement response object from Google
 * @param {object} subscriptionContext - our subscription context
 * @returns {Promise<void>} - promise can be ignored as we don't need the return value
 */
_internals.linkAccount = async function (swgEntitlements, subscriptionContext) {
    const { entitlements } = swgEntitlements;
    const { acceptableFormsOfTenderedPayment = [], isLoggedIn } = subscriptionContext;
    const hasNotSeenLinkAccountCTA = !document.cookie.includes('CN_userLinkAccountCTA');
    const hasSwGLinkingParam = new URLSearchParams(window.location.search).has('swglinking');
    if (hasSwGLinkingParam &&
        isLoggedIn &&
        isEmpty(entitlements) &&
        acceptableFormsOfTenderedPayment.includes('sub') &&
        hasNotSeenLinkAccountCTA) {
        googleApi.getGoogleApi().then((gapi) => {
            gapi.load('client:auth2', () => {
                gapi.auth2.init({}).then(() => {
                    const isSignedIn = gapi.auth2.getAuthInstance().isSignedIn.get();
                    if (isSignedIn) {
                        // Hardcoding Google's clientId,
                        // because it's the only one used to authorize consent for Google
                        window.postMessage({
                            type: 'swglinkingcta',
                            clientId: 'google.production.w0obnuvb21refjgr0g6y1d1jrd7uvt43'
                        });
                    }
                });
            });
        });
    }
};
/**
 * Creates a function that receives a Google provided subscriptionPromise.
 * This function is used as the Google subscription callback and is invoked by
 * Google when a successful subscription takes place.
 *
 * The returned function receives a single argument - subscriptionPromise -
 * which is a promise that returns the purchase payload when it resolves.
 *
 * @param {object} subscriptionContext - subscription configuration and application state
 *
 * @returns {Function} - function that is used as a callback to a Google successful purchase
 */
const createOnSubscribeResponseHandler = (subscriptionContext) => async (subscriptionPromise) => {
    const subscribeResponse = await subscriptionPromise;
    await subscriptionHandler.handleSubscription(subscriptionContext, subscribeResponse);
};
/**
 * Creates a function that receives a Google provided entitlementsPromise.
 * This function is used as the Google entitlements check callback and is invoked by
 * Google when a successful entitlements check takes place.
 *
 * The returned function receives a single argument - entitlementsPromise -
 * which is a promise that returns the entitlements payload when it resolves.
 *
 * If the user is entitled to see the content [entitlements.enablesThis() == true]
 * and if the entitlements response should be processed in this page view
 * [processEntitlementResponse == true] it proceeds to call entitlementsHandler.handleEntitlements()
 * in order to process the received entitlements payload.
 *
 * @param {object} swgClient - subscribe with Google client
 * @param {object} subscriptionContext - subscription configuration and application state
 * @param {boolean} processEntitlementResponse - whether to process entitlements check response
 *
 * @returns {Function} - function that is used as a callback to a Google successful entitlement check
 */
const createOnEntitlementsResponseHandler = (swgClient, subscriptionContext, processEntitlementResponse) => async (entitlementsPromise) => {
    const entitlements = await entitlementsPromise;
    _internals.handleReadyToPay(entitlements);
    _internals.linkAccount(entitlements, subscriptionContext);
    if (processEntitlementResponse && entitlements.enablesThis()) {
        try {
            await entitlementsHandler.handleEntitlements(entitlements, swgClient, subscriptionContext);
        }
        catch (err) {
            console.error(`Failed to process entitlements: ${err.message}`);
        }
    }
};
module.exports = {
    _internals,
    createOnSubscribeResponseHandler,
    createOnEntitlementsResponseHandler
};
//# sourceMappingURL=swgEventHandlerFactory.js.map

/***/ }),

/***/ 83139:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const GoogleSwg = __webpack_require__(42131);
const swgEventHandlerFactory = __webpack_require__(29538);
/**
 * Registers the callback that is called when a Google subscription
 * takes place - swgClient.setOnSubscribeResponse()
 *
 * The callback registration is triggered by the Google subscribe
 * button component: GoogleSubscribeButton
 *
 * @param {object} subscriptionContext - subscription configuration
 *
 * @returns {Promise} - resolves when the handler is registsred
 */
const registerOnSubscribeResponseHandler = async (subscriptionContext) => {
    const swgClient = await GoogleSwg.getWindowSwg();
    swgClient.setOnSubscribeResponse(swgEventHandlerFactory.createOnSubscribeResponseHandler(subscriptionContext));
};
/**
 * Registers the callback that is called when a Google entitlements
 * check takes place - swgClient.setOnEntitlementsResponse()
 *
 * The callback registration is triggered by the Google entitlements
 * check component: GoogleEntitlementCheck
 *
 * @param {object} subscriptionContext - subscription configuration
 * @param {boolean} processEntitlementResponse - whether to process entitlements check response
 *
 * @returns {Promise} - resolves when the handler is registsred
 */
const registerOnEntitlementsResponseHandler = async (subscriptionContext, processEntitlementResponse) => {
    const swgClient = await GoogleSwg.getWindowSwg();
    swgClient.setOnEntitlementsResponse(swgEventHandlerFactory.createOnEntitlementsResponseHandler(swgClient, subscriptionContext, processEntitlementResponse));
};
module.exports = {
    registerOnEntitlementsResponseHandler,
    registerOnSubscribeResponseHandler
};
//# sourceMappingURL=swgEventHandlerRegister.js.map

/***/ }),

/***/ 48637:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.handleEntitlements = void 0;
const entitlementsClient = __webpack_require__(81741);
const swgUtils = __webpack_require__(91287);
/**
 * Google entitlements handler.
 *
 * This handler is called after a successful Google entitlements fetch, which
 * takes place when a user that is not entitled to see content accesses an article
 * page and happens to be signed-in in the browser in his Google account.
 *
 * The entitlements processing steps are the following:
 *
 *  - Try to authenticate the user by calling
 * entitlementsClient.authenticateUserByEntitlementsToken() and passing the
 * entitlements token, which can be used to identify a unique user subscription.
 * If the subscription is found, the user is authenticated as the user that is
 * associated with the subscription and the processing is finished. The entitlements
 * are acknowledged by calling entitlements.ack()
 *
 * - If a matching subscription is not found, then an account will be created for
 * the user along with the subscription granted by the current entitlements
 * verification. The entitlements are acknowledged by calling entitlements.ack()
 *
 * @param {object} entitlements - the entitlements payload
 * @param {object} swgClient - subscribe with google client
 * @param {object} subscriptionContext - subscription configuration and application state
 *
 * @returns {Promise} - true if the user is entitled to see content: false otherwise
 */
const handleEntitlements = async (entitlements, swgClient, subscriptionContext) => {
    const accountLookupPromise = entitlementsClient.authenticateUserByEntitlementsToken(subscriptionContext, entitlements);
    await swgClient
        .waitForSubscriptionLookup(accountLookupPromise)
        .then((hasAccount) => {
        if (hasAccount) {
            return swgClient.showLoginNotification().then(() => {
                return swgUtils.setSubscriptionCookie(subscriptionContext);
            });
        }
        return entitlementsClient.deferredAccountCreation(swgClient, subscriptionContext, entitlements);
    })
        .then(() => {
        entitlements.ack();
        swgUtils.postEntitlementsActions();
    });
};
exports.handleEntitlements = handleEntitlements;
//# sourceMappingURL=entitlementsHandler.js.map

/***/ }),

/***/ 94010:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.handleSubscription = void 0;
const subscriptionClient = __webpack_require__(2208);
const swgUtils = __webpack_require__(91287);
/**
 * Google subscriptions handler.
 *
 * This handler is called after a successful Google subscription purchase.
 * It receives a subscriptionContext, which is a placeholder for configuration
 * plus user and application state, and a subscribeResponse, which is
 * the subscription payload that is handled by Google.
 *
 * The subscription process steps are the following:
 *
 *  - Call subscriptionClient.authenticateUser(), which will authenticate the
 * user if not already authenticated. If there is no account in the system
 * for the subscribing user, an account will be created using the user's
 * profile data that is included in the subscribeResponse payload.
 *
 *  - Call subscriptionClient.storeSubscription() in order to store the
 * subscription information in CNEE, via User Platform Gateway, for further usage.
 *
 *  - Call swgUtils.setSubscriptionCookie() to set the subscription cookie
 *
 * - Call swgUtils.emitTransactionEvent() to fire a GA event to indicate a
 * subscription was created.
 *
 * - Call subscribeResponse.complete() to trigger an update in the SwG dialog.
 * This will inform the user that their subscription was stored correctly and
 * prompt them to click "continue".
 *
 *  - Call swgUtils.postPurchaseActions() to refresh the current page
 * and access the paywalled content (the refresh will send the subscription token
 * so the content will be returned)
 *
 * @param {object} subscriptionContext - subscription configuration and application state
 * @param {object} subscribeResponse - Google provided subscription payload
 *
 * @returns {Promise} - resolves when the Google originated purchase has finished processing
 */
const handleSubscription = async (subscriptionContext, subscribeResponse) => {
    let purchaseData = {};
    try {
        await subscriptionClient.authenticateUser(subscriptionContext, subscribeResponse);
        purchaseData = await subscriptionClient.storeSubscription(subscriptionContext, subscribeResponse);
        await swgUtils.setSubscriptionCookie(subscriptionContext);
    }
    catch (e) {
        console.error('Error encountered attempting to authenticate SwG user');
        console.error(e);
    }
    await swgUtils.emitTransactionEvent(purchaseData, subscribeResponse, subscriptionContext);
    await subscribeResponse.complete();
    swgUtils.postPurchaseActions();
};
exports.handleSubscription = handleSubscription;
//# sourceMappingURL=subscriptionHandler.js.map

/***/ }),

/***/ 42131:
/***/ ((module) => {

/**
 * @description Returns a Promise that resolves as the SWG object.
 * @param {Window} [context] - global context where SWG will be loaded, defaults to window
 * @returns {Promise} a Promise that will only resolve once SwG is loaded.
 */
const getWindowSwg = (context = window) => {
    return new Promise((resolve, _reject) => {
        // SWG (global): represents an array of handlers that are called back
        // with a reference to the Subscriptions API once the library is loaded.
        (context.SWG = context.SWG || []).push((swg) => resolve(swg));
    });
};
module.exports = {
    getWindowSwg
};
//# sourceMappingURL=getWindowSwg.js.map

/***/ }),

/***/ 20494:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const { getWindowSwg } = __webpack_require__(42131);
const { registerSwgSubscribeCTA } = __webpack_require__(54520);
const { registerSwgAccountLinkCTA } = __webpack_require__(1965);
const { registerLwgCTA } = __webpack_require__(77309);
const { registerOnEntitlementsResponseHandler, registerOnSubscribeResponseHandler } = __webpack_require__(83139);
module.exports = {
    getWindowSwg,
    registerLwgCTA,
    registerSwgSubscribeCTA,
    registerSwgAccountLinkCTA,
    registerOnEntitlementsResponseHandler,
    registerOnSubscribeResponseHandler
};
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 77309:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const get = __webpack_require__(58156);
const googleApi = __webpack_require__(99167);
const { googleAnalytics } = __webpack_require__(90090);
const GoogleSignIn = __webpack_require__(26820);
const googleSignInTracking = __webpack_require__(26830);
const userHelpers = __webpack_require__(86969);
const _internals = {};
/**
 *
 * Trigger the LwG login/registration flow when a postMessage is recieved with the
 * correct data payload
 *
 * @param {object} event - An event dispatched via window.postMessage
 * in a DFP-served iframe. The data in the event should have the following
 * shape: {type: 'lwgtca', pawallSource: 'source for tracking analytics', registrationSourceCode: 'name of source code to track on user platform db'}
 *
 * @returns {undefined} undefined - returns nothing
 */
_internals.receiveLwgMessage = function receiveLwgMessage(event) {
    const successfulResponses = ['login', 'registration'];
    if (event && event.data && event.data.type && event.data.type === 'lwgcta') {
        const { paywallSource, registrationSourceCode } = event.data;
        // `registrationSourceCode` coming from the CTA that emitted the message
        _internals.platformData.registrationSourceCode = registrationSourceCode;
        _internals.platformData.source = paywallSource;
        googleSignInTracking.trackGoogleSignInAttempt({ paywallSource });
        googleApi.getGoogleApi().then((gapi) => {
            gapi.load('client:auth2', () => {
                gapi.auth2
                    .init({})
                    .signIn()
                    .then(async (user) => {
                    const { payment, platformData } = _internals;
                    const response = await GoogleSignIn.googleSignIn(user, platformData, { paywallSource });
                    const { loginResult } = response;
                    if (successfulResponses.indexOf(loginResult) > -1) {
                        googleAnalytics.emitGoogleTrackingEvent(`${loginResult}-complete`, {
                            user: {
                                account: {
                                    authProvider: 'google'
                                }
                            },
                            paywallSource
                        });
                        // This whole if section will be removed after the gating experiment is done.
                        const iss = get(payment, 'sample.iss');
                        if (iss === 'wir_high_prop' ||
                            iss === 'wir_reg_gate' ||
                            iss === 'vf_high_prop' ||
                            iss === 'vf_reg_gate' ||
                            iss === 'tny_high_prop' ||
                            iss === 'tny_reg_gate') {
                            await userHelpers.resetEntitlementSampleMax({ iss });
                        }
                        if (loginResult === 'registration') {
                            // Send a message back to the DFP unit that initiated this flow
                            // This is for the unit to choose how to react to new users,
                            // eg: show a newsletter confirmation page
                            window.postMessage({ type: 'lwg-registration' }, window.origin);
                        }
                        else {
                            window.location.reload();
                        }
                    }
                })
                    .catch((err) => {
                    googleSignInTracking.trackGoogleSignInFailure({
                        paywallSource,
                        user: {
                            account: {
                                loginFailureMessage: err && err.error
                            }
                        }
                    });
                });
            });
        });
    }
};
/**
 * Register a postMessage event listener on the window. This listener is
 * intended to be called from an iframe served via DFP to trigger the
 * Login/Register with Google (LwG) flow.
 *
 * @param {object} platformData - Object with the shape of
 * { xClientID, siteCode, userPlatformProxy, registrationSourceCode }
 * @param {object} payment - the payment state
 *
 * @returns {undefined} undefined - Async function resolves once swgClient is found
 */
const registerLwgCTA = (platformData, payment) => {
    _internals.platformData = platformData;
    _internals.payment = payment;
    window.addEventListener('message', _internals.receiveLwgMessage);
};
module.exports = {
    _internals,
    registerLwgCTA
};
//# sourceMappingURL=registerLwgCTA.js.map

/***/ }),

/***/ 1965:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const GoogleSwg = __webpack_require__(42131);
const oauth = __webpack_require__(73506);
const _internals = {};
/**
 * Update user's consent after account linking. At this point, the user should have already granted consent to Google.
 *
 * @param {string} clientId - Google's clientId used for consent purposes.
 * @returns {Promise<Response>} the promise of a response
 */
_internals.updateConsent = function (clientId) {
    const { amguuid, siteCode, userPlatformProxy, xClientID } = _internals;
    const consentUpdates = [
        {
            clientId,
            consentScopeName: 'entitlements:read',
            consentStatus: true,
            siteCode
        }
    ];
    return oauth.updateUserConsent({
        amgUUID: amguuid,
        body: consentUpdates,
        userPlatformProxy,
        xClientID
    });
};
/**
 * This is the event handler for when the account linking CTA has been triggered
 *
 * @param {object} event - the event
 * @returns {undefined} nothing
 */
_internals.receiveAccountLinkingMessage = function (event) {
    if (!event ||
        !event.data ||
        !event.data.type ||
        !event.data.clientId ||
        event.data.type !== 'swglinkingcta') {
        return;
    }
    const opts = {
        amguuid: _internals.amguuid,
        siteCode: _internals.siteCode,
        clientId: event.data.clientId,
        xClientID: _internals.xClientID,
        userPlatformProxy: _internals.userPlatformProxy
    };
    // We're fetching the access_token prior to getting consent.
    // It's okay to give the token before consent has been given,
    // because it won't be valid until after we've updated the consent,
    // which will be triggered after we get a successful response back from Google.
    const fetchedTokenPromise = oauth
        .proxyGetOAuthToken(opts)
        .then((responseBody) => {
        const { data: { access_token: token } } = responseBody;
        // fetched account token now return it in the promise
        return { token };
    });
    _internals.swgClient
        .saveSubscription(() => fetchedTokenPromise)
        .then((result) => {
        if (result) {
            // The result will return true from Google if a user has consented and account has been linked successfully.
            // Update user consent here in order to make the entitlement access token valid
            _internals.updateConsent(event.data.clientId);
        }
        document.cookie = `CN_userLinkAccountCTA=1; domain=${_internals.domain}; path=/; max-age=31536000;`;
    })
        .catch(() => {
        // We'll just fail silently on error
    });
};
const registerSwgAccountLinkCTA = async function (amguuid, _googleContext, subscriptionContext) {
    const swgClient = await GoogleSwg.getWindowSwg();
    _internals.swgClient = swgClient;
    _internals.siteCode = subscriptionContext.siteCode;
    _internals.userPlatformProxy = subscriptionContext.userPlatformProxy;
    _internals.amguuid = amguuid;
    _internals.domain = subscriptionContext.domain;
    _internals.xClientID = subscriptionContext.xClientID;
    window.addEventListener('message', _internals.receiveAccountLinkingMessage);
};
module.exports = {
    _internals,
    registerSwgAccountLinkCTA
};
//# sourceMappingURL=registerSwgAccountLinkCTA.js.map

/***/ }),

/***/ 54520:
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

const GoogleSwg = __webpack_require__(42131);
const _internals = {};
/**
 *
 * Trigger the SwG subscribe flow when a postMessage is recieved with the
 * correct data payload
 *
 * @param {object} event - An event dispatched via window.postMessage
 * in a DFP-served iframe. The data in the event should have the following
 * shape: {type: 'swgtca', sku: <optional SwG sku to override default>}
 *
 * @returns {undefined} undefined - returns nothing
 */
_internals.receiveSwgMessage = function receiveSwgMessage(event) {
    if (!event ||
        !event.data ||
        !event.data.type ||
        event.data.type !== 'swgcta') {
        return;
    }
    const targetSku = event.data.sku || _internals.defaultSku;
    _internals.swgClient.subscribe(targetSku);
};
/**
 * Register a postMessage event listener on the window. This listener is
 * intended to be called from an iframe served via DFP to trigger the
 * Subscribe with Google (SwG) subscribe flow.
 *
 * @param {string} defaultSku - The default sku to use for the SwG subscribe
 * flow if none is provided via the triggered postMessage call.
 *
 * @returns {undefined} undefined - Async function resolves once swgClient is found
 */
const registerSwgSubscribeCTA = async (defaultSku) => {
    const swgClient = await GoogleSwg.getWindowSwg();
    _internals.defaultSku = defaultSku;
    _internals.swgClient = swgClient;
    window.addEventListener('message', _internals.receiveSwgMessage);
};
module.exports = {
    _internals,
    registerSwgSubscribeCTA
};
//# sourceMappingURL=registerSwgSubscribeCTA.js.map

/***/ }),

/***/ 91287:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.createSubscriptionContext = exports.setSubscriptionCookie = exports.postEntitlementsActions = exports.postPurchaseActions = exports.emitTransactionEvent = void 0;
const { validateEntitlement } = __webpack_require__(79577);
const { googleAnalytics } = __webpack_require__(90090);
/**
 * Emits a Google Tracking Event when subscription completes.
 *
 * @param {object} purchaseData - data about the purchase, with a structure detailed here:
 *  https://developers.google.com/android-publisher/api-ref/purchases/subscriptions
 * @param {object} subscribeResponse - Google provided subscription payload
 *  https://github.com/subscriptions-project/swg-js/blob/master/docs/subscribe-flow.md#example-response
 * @param {object} subscriptionContext - subscription configuration and application state
 *
 * @returns {Promise<void>} - a promise that resolves to void
 */
const emitTransactionEvent = async (purchaseData, subscribeResponse, subscriptionContext) => {
    const responseData = JSON.parse(subscribeResponse.purchaseData.raw);
    const { orderId, productId } = responseData;
    const { siteCode, xClientID } = subscriptionContext;
    const { introductoryPriceInfo: { introductoryPriceCurrencyCode, introductoryPriceAmountMicros } = {}, priceCurrencyCode, priceAmountMicros, subscriptionLength = 12, subscriptionType = 'Bundle', subscriptionValue = 9.99 } = purchaseData;
    const currency = introductoryPriceCurrencyCode || priceCurrencyCode || '';
    const cost = introductoryPriceAmountMicros && priceAmountMicros
        ? (introductoryPriceAmountMicros || priceAmountMicros) / 1000000
        : undefined;
    const brandName = xClientID.slice(6); // slices off Verso- prefix from sdk.client
    googleAnalytics.emitUniqueGoogleTrackingEvent('transaction', {
        ecommerce: {
            currencyCode: currency,
            purchase: {
                actionField: {
                    id: orderId,
                    affiliation: brandName,
                    revenue: cost,
                    tax: '',
                    coupon: '',
                    paymentType: 'Subscribe with Google',
                    keycode: '',
                    source: '' // optional so leaving as blank
                },
                products: [
                    {
                        id: siteCode,
                        name: brandName,
                        brand: '',
                        price: cost,
                        category: '',
                        variant: '',
                        quantity: '1',
                        coupon: '',
                        sku: productId,
                        dimension94: subscriptionLength,
                        dimension95: cost,
                        dimension96: '',
                        dimension100: subscriptionType,
                        dimension101: subscriptionLength,
                        dimension102: subscriptionValue // Subscription Value
                    }
                ]
            }
        }
    });
};
exports.emitTransactionEvent = emitTransactionEvent;
/**
 * Post purchase actions
 *
 * Upon successful completion of a SwG purchase, reload the current page
 * to bring down the paywall
 *
 * @returns {undefined}
 */
const postPurchaseActions = () => {
    window.location.assign(window.location.href);
};
exports.postPurchaseActions = postPurchaseActions;
/**
 * Post entitlements flow actions
 *
 * @returns {undefined}
 */
const postEntitlementsActions = () => {
    window.location.reload(true);
};
exports.postEntitlementsActions = postEntitlementsActions;
/**
 * Calls the validation service in order to get subscription related tokens
 *
 * @param {object} subscriptionContext - subscription configuration and application state
 * @param {string} subscriptionContext.domain - the domain
 * @param {string} subscriptionContext.server - the server
 * @param {Array} subscriptionContext.acceptableForms - list of acceptable forms of payment
 * @param {Array} subscriptionContext.acceptableScopes - list of acceptable scopes of payment
 *
 * @returns {Promise} - resolves when subscription tokens are set
 */
const setSubscriptionCookie = ({ domain, server, acceptableForms, acceptableScopes }) => validateEntitlement.validatePayment({
    acceptableForms,
    acceptableScopes,
    entitlement: {
        domain,
        enabled: true,
        server
    }
});
exports.setSubscriptionCookie = setSubscriptionCookie;
/**
 * Creates the subscription context
 *
 * @param {object} google - google domain
 * @param {object} payment - payment domain
 * @param {object} user - user domain
 * @param {object} userPlatform - User Platform domain
 *
 * @returns {object} - the subscription context
 */
const createSubscriptionContext = (google, payment, user, userPlatform) => {
    const { acceptableForms = [], acceptableFormsOfTenderedPayment = [], acceptableScopes = [], entitlement: paymentConfig = {} } = payment;
    return {
        acceptableForms,
        acceptableFormsOfTenderedPayment,
        acceptableScopes,
        domain: paymentConfig.domain || '',
        isLoggedIn: user.isAuthenticated,
        registrationSourceCode: google.registrationSourceCode,
        server: paymentConfig.server || '',
        siteCode: userPlatform.siteCode,
        swgPublicationId: google.swgPublicationId,
        userPlatformProxy: userPlatform.userPlatformProxy,
        xClientID: userPlatform.xClientID
    };
};
exports.createSubscriptionContext = createSubscriptionContext;
//# sourceMappingURL=utils.js.map

/***/ }),

/***/ 48336:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
const cloneDeep_1 = __importDefault(__webpack_require__(88055));
const flow_1 = __importDefault(__webpack_require__(49870));
const pick_1 = __importDefault(__webpack_require__(44383));
const domains = ['payment', 'user', 'segmentation'];
const deepCopyOf = (0, flow_1.default)([pick_1.default, cloneDeep_1.default]);
exports["default"] = (store) => ({
    fetch: () => deepCopyOf(store.getState(), domains)
});
//# sourceMappingURL=dataGateway.js.map

/***/ }),

/***/ 56687:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.BANNER_STYLE_FIELDS = exports.BANNER_DATE_FIELDS = exports.ConfigPath = exports.RibbonBannerType = exports.EventBannerStatus = exports.NodeType = exports.OneNavContainerType = exports.LinkStyle = void 0;
var LinkStyle;
(function (LinkStyle) {
    LinkStyle["HIGHLIGHTED"] = "highlighted";
})(LinkStyle = exports.LinkStyle || (exports.LinkStyle = {}));
var OneNavContainerType;
(function (OneNavContainerType) {
    OneNavContainerType["TOP"] = "top";
    OneNavContainerType["DRAWER"] = "drawer";
})(OneNavContainerType = exports.OneNavContainerType || (exports.OneNavContainerType = {}));
var NodeType;
(function (NodeType) {
    NodeType["LINK"] = "link";
    NodeType["ACCORDION"] = "accordion";
    NodeType["SEQ_LEVEL"] = "seqLevel";
    NodeType["CTA"] = "cta";
    NodeType["TRIGGER"] = "trigger";
})(NodeType = exports.NodeType || (exports.NodeType = {}));
var EventBannerStatus;
(function (EventBannerStatus) {
    EventBannerStatus["AFTER"] = "after";
    EventBannerStatus["BEFORE"] = "before";
    EventBannerStatus["WAITING"] = "waiting";
    EventBannerStatus["LIVE"] = "live";
})(EventBannerStatus = exports.EventBannerStatus || (exports.EventBannerStatus = {}));
var RibbonBannerType;
(function (RibbonBannerType) {
    RibbonBannerType["EVENT"] = "event";
    RibbonBannerType["PROMOTION"] = "promotion";
})(RibbonBannerType = exports.RibbonBannerType || (exports.RibbonBannerType = {}));
var ConfigPath;
(function (ConfigPath) {
    ConfigPath["ONE_NAV"] = "OneNav";
    ConfigPath["TRIGGERABLE_CONTAINERS"] = "TriggerableContainers";
})(ConfigPath = exports.ConfigPath || (exports.ConfigPath = {}));
exports.BANNER_DATE_FIELDS = {
    ENABLE_DATE: 'enableDate',
    DISABLE_DATE: 'disableDate',
    EVENT_START_TIME: 'eventStartTime',
    EVENT_END_TIME: 'eventEndTime'
};
exports.BANNER_STYLE_FIELDS = {
    THEME: 'theme'
};
//# sourceMappingURL=types.js.map

/***/ }),

/***/ 5413:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.ParselyClient = void 0;
const redux_1 = __webpack_require__(57744);
const actors_1 = __webpack_require__(20837);
class ParselyClient {
    /**
     * initialize - binds the parselyTrackPageView actor
     * to the store when parsely is enabled.
     *
     * @param store - the redux store
     * @returns undefined
     */
    static initialize(store) {
        const { parsely = {} } = store.getState();
        if (parsely.isEnabled) {
            (0, redux_1.bindActorToStore)(actors_1.parselyTrackPageView, store);
        }
    }
}
exports.ParselyClient = ParselyClient;
//# sourceMappingURL=ParselyClient.js.map

/***/ }),

/***/ 20837:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.parselyTrackPageView = void 0;
var parselyTrackPageView_1 = __webpack_require__(83880);
Object.defineProperty(exports, "parselyTrackPageView", ({ enumerable: true, get: function () { return parselyTrackPageView_1.parselyTrackPageView; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 83880:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.parselyTrackPageView = void 0;
const get_1 = __importDefault(__webpack_require__(58156));
/**
 * parselyTrackPageView Actor
 *
 * This actor is responsible for sending a
 * Parsely trackPageView event when the user
 * state is updated with the isEntitled property.
 *
 * PARSELY.ready is a promise that will resolve
 * once the Parsely Script is injected to the page.
 */
exports.parselyTrackPageView = {
    scopes: {
        watch: ['user.isEntitled'],
        input: ['user.isEntitled'],
        output: []
    },
    perform: (state) => {
        const { PARSELY } = window;
        if (!PARSELY) {
            return;
        }
        const isEntitled = (0, get_1.default)(state, 'user.isEntitled');
        PARSELY.ready.then(() => {
            PARSELY.updateDefaults({
                data: {
                    plan: isEntitled ? 'Active' : 'Not Active'
                }
            });
            PARSELY.beacon.trackPageView();
        });
    }
};
//# sourceMappingURL=parselyTrackPageView.js.map

/***/ }),

/***/ 80246:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
/**
 * Factory method that creates a gateway to control payment system
 * from external services, e.g., the Journey service.
 *
 * @param store - a redux Store
 * @returns a PaymentGateway
 */
exports["default"] = (store) => ({
    configure: ({ groupsToRender } = {}) => store.dispatch({
        type: 'MERGE_KEY',
        key: 'payment',
        value: {
            gateway: {
                groupsToRender
            }
        }
    })
});
//# sourceMappingURL=gateway.js.map

/***/ }),

/***/ 4926:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
/**
 * Factory method that creates a gateway to control the paywall
 * from external services, e.g., the Journey service.
 *
 * @param store - a redux Store
 * @returns a PaywallGateway
 */
exports["default"] = (store) => ({
    truncateContent: ({ paragraphs, slides } = {}) => store.dispatch({
        type: 'MERGE_KEY',
        key: 'paywall',
        value: {
            gateway: {
                shouldTruncate: true,
                paragraphLimit: paragraphs,
                gallerySlideLimit: slides
            }
        }
    })
});
//# sourceMappingURL=gateway.js.map

/***/ }),

/***/ 46664:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.PermutiveSegmentationClient = void 0;
class PermutiveSegmentationClient {
    /**
     * initialize - extracts segments from permutive and updates the store
     *
     * @param store - the redux store
     * @returns Promise<SegmentationState> - updated segmentation data
     */
    static initialize(store) {
        const getPermutiveSegments = () => {
            return new Promise((resolve) => {
                const { permutive } = window;
                if (permutive) {
                    // https://developer.permutive.com/page/the-permutive-javascript-sdk#callback-functions
                    // "realtime" callback - the Pageview event has been triggered and segmentation based on that event has happened
                    permutive.ready(() => {
                        window.permutive?.segments(resolve);
                    }, 'realtime');
                }
                else {
                    resolve([]);
                }
            });
        };
        const updateSegmentation = async () => {
            const permutiveSegments = await getPermutiveSegments();
            const updatedState = { permutiveSegments };
            store.dispatch({
                type: 'MERGE_KEY',
                key: 'segmentation',
                value: updatedState
            });
            if (window.cnBus) {
                window.cnBus.emit('permutiveSegments.updated');
            }
            return updatedState;
        };
        return Promise.resolve(updateSegmentation());
    }
}
exports.PermutiveSegmentationClient = PermutiveSegmentationClient;
//# sourceMappingURL=PermutiveSegmentationClient.js.map

/***/ }),

/***/ 93595:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.SegmentationClient = void 0;
const trim_1 = __importDefault(__webpack_require__(44826));
const analytics_1 = __webpack_require__(90090);
const redux_1 = __webpack_require__(57744);
const cookie_1 = __webpack_require__(56892);
const actors_1 = __webpack_require__(49083);
// /**
//  * updateGoogleAnalytics - emits a GA event with the segments information:
//  * @param data - the segmentation state
//  * @return undefined
//  */
function updateGoogleAnalytics(data) {
    analytics_1.googleAnalytics.emitGoogleTrackingEvent('segments-loaded', data);
}
class SegmentationClient {
    /**
     * initialize - extracts segments from cookie and updates the store
     *
     * @param store - the redux store
     * @returns Promise<SegmentationState> - updated segmentation data
     */
    static initialize(store) {
        const updateSegmentation = () => {
            const value = (0, cookie_1.getCookie)('CN_segments');
            const segments = value ? value.split('|').map(trim_1.default) : [];
            const updatedState = { segments };
            store.dispatch({
                type: 'UPDATE_KEY',
                key: 'segmentation',
                value: updatedState
            });
            updateGoogleAnalytics(updatedState);
            return updatedState;
        };
        if (window.cnBus) {
            window.cnBus.on('segments.updated', updateSegmentation);
        }
        const { martechPlatform } = store.getState();
        if (!martechPlatform || !martechPlatform.isAccessCookieEnabled) {
            (0, redux_1.bindActorToStore)(actors_1.determineIfTheUserIsEntitled, store);
        }
        return Promise.resolve(updateSegmentation());
    }
}
exports.SegmentationClient = SegmentationClient;
//# sourceMappingURL=SegmentationClient.js.map

/***/ }),

/***/ 12436:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.determineIfTheUserIsEntitled = void 0;
const segmentedEntitlement_1 = __webpack_require__(56237);
exports.determineIfTheUserIsEntitled = {
    scopes: {
        watch: ['segmentation'],
        input: ['segmentation', 'payment.products'],
        output: ['user.isEntitled']
    },
    perform: (state) => {
        const { segmentation = {}, payment: { products = [] } = {} } = state;
        const isEntitled = (0, segmentedEntitlement_1.isUserEntitled)(segmentation, products);
        return {
            user: {
                isEntitled
            }
        };
    }
};
//# sourceMappingURL=determineIfTheUserIsEntitled.js.map

/***/ }),

/***/ 49083:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.determineIfTheUserIsEntitled = void 0;
var determineIfTheUserIsEntitled_1 = __webpack_require__(12436);
Object.defineProperty(exports, "determineIfTheUserIsEntitled", ({ enumerable: true, get: function () { return determineIfTheUserIsEntitled_1.determineIfTheUserIsEntitled; } }));
//# sourceMappingURL=index.js.map

/***/ }),

/***/ 56237:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.isUserEntitled = exports.getUserSegmentedBrandEntitlements = void 0;
const pick = __webpack_require__(44383);
const zipObject = __webpack_require__(47248);
/**
 * entitlementFormat
 *
 * Regular Expression to capture segmentation segments
 * that refer to brand entitlements. While the fist (slug)
 * group specifies a code for a tenant-supported payment
 * product, the latter (status) can have three values:
 * 'a' (Active), 'c' (Cancelled), and 'e' (Expired).
 *
 * @constant
 * @type {RegExp}
 */
const entitlementFormat = /en\.([a-z]+)\.([ace])/;
const entitlementKeys = ['slug', 'status'];
const segmentIsAnEntitlement = (segment) => entitlementFormat.test(segment);
const convertSegmentToEntitlement = (segment) => pick(zipObject([null, ...entitlementKeys], segment.match(entitlementFormat)), entitlementKeys);
const isEntitlementAnyOf = (products) => (entitlement) => products.some((product) => product.slug === entitlement.slug);
const isActive = (ent) => ent.status === 'a';
/**
 * Converts entitlement segments from the segmentation client
 * to brand-specific entitlement objects, which include a
 * slug, and a status key.
 *
 * @param {object} segmentation - segmentation object returned from the segmentation client
 * @param {Array} products - tenant entitlement products returned from the payment state
 * @returns {Array} entitlement objects
 */
const getUserSegmentedBrandEntitlements = (segmentation, products) => {
    const { segments } = segmentation;
    return segments
        .filter(segmentIsAnEntitlement)
        .map(convertSegmentToEntitlement)
        .filter(isEntitlementAnyOf(products));
};
exports.getUserSegmentedBrandEntitlements = getUserSegmentedBrandEntitlements;
/**
 * Checks for entitlement status from the entitlement segments
 *
 * @param {object} segmentation - segmentation object returned from the segmentation client
 * @param {Array} products - tenant entitlement products returned from the payment state
 * @returns {boolean} true if a user is entitled to any brand product
 */
const isUserEntitled = (segmentation, products) => {
    const entitlements = (0, exports.getUserSegmentedBrandEntitlements)(segmentation, products);
    return entitlements.some(isActive);
};
exports.isUserEntitled = isUserEntitled;
//# sourceMappingURL=segmentedEntitlement.js.map

/***/ }),

/***/ 10524:
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.SegmentatorRuClient = void 0;
const { fetchWithTimeout } = __webpack_require__(57743);
const { getCookie } = __webpack_require__(56892);
class SegmentatorRuClient {
    /**
     * initialize - extracts segments from Segmentator and updates the store
     *
     * @param store - the redux store
     * @returns Promise<SegmentationState> - updated segmentation data
     */
    static initialize(store) {
        const getSegmentatorSegments = async () => {
            const { content, page } = store.getState()?.coreDataLayer ?? {};
            const pageUrl = new URL(page.canonical);
            const { protocol, hostname } = pageUrl;
            const domain = hostname.split('.').splice(-2).join('.');
            const origin = `${protocol}//${hostname}`;
            const guid = content.contentId;
            const body = JSON.stringify({ domain, path: guid });
            try {
                const gcnid = getCookie('G_CNID') || null;
                const rawResponse = await fetchWithTimeout(`https://segmentator.condenast.ru/api/get_segment_names/0.1/`, {
                    body,
                    headers: {
                        origin,
                        Accept: 'application/json',
                        'Content-Type': 'application/json',
                        'x-g-cnid': gcnid
                    },
                    method: 'POST'
                }, 1000);
                if (rawResponse.ok) {
                    const data = await rawResponse.json();
                    const { response_map: { segment_names = [] } } = data;
                    if (Array.isArray(segment_names)) {
                        if (window.cns) {
                            window.cns.pageContext.keywords.interests = segment_names;
                        }
                        return segment_names;
                    }
                }
            }
            catch (e) {
                return [];
            }
            return [];
        };
        const updateSegmentation = async () => {
            const interests = await getSegmentatorSegments();
            const updatedState = { interests };
            store.dispatch({
                type: 'MERGE_KEY',
                key: 'segmentation',
                value: updatedState
            });
            if (window.cnBus) {
                window.cnBus.emit('ruSegmentator.componentDidUpdate.segmentsFetched');
            }
            return updatedState;
        };
        return Promise.resolve(updateSegmentation());
    }
}
exports.SegmentatorRuClient = SegmentatorRuClient;
//# sourceMappingURL=SegmentatorRuClient.js.map

/***/ }),

/***/ 98937:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.checkAccess = void 0;
const flatten_1 = __importDefault(__webpack_require__(35970));
const includes_1 = __importDefault(__webpack_require__(79859));
const isEmpty_1 = __importDefault(__webpack_require__(62193));
const some_1 = __importDefault(__webpack_require__(42426));
const values_1 = __importDefault(__webpack_require__(35880));
const decode_jwt_1 = __importDefault(__webpack_require__(79712));
const cookie_1 = __webpack_require__(56892);
const cookies_1 = __importDefault(__webpack_require__(53788));
const checkAccess = (martechState) => {
    const { products, isAccessCookieEnabled } = martechState;
    if (!isAccessCookieEnabled)
        return false;
    const accessCookieValue = (0, cookie_1.getCookie)(cookies_1.default.accessCookie);
    if (!accessCookieValue)
        return false;
    const isEntitled = checkIsEntitled(products, accessCookieValue);
    return isEntitled;
};
exports.checkAccess = checkAccess;
const checkIsEntitled = (martechProducts, accessCookieValue) => {
    if ((0, isEmpty_1.default)(martechProducts))
        return false;
    if (!accessCookieValue)
        return false;
    const subscribedProducts = getSubscriptionsFromToken(accessCookieValue);
    if ((0, isEmpty_1.default)(subscribedProducts))
        return false;
    const isEntitled = (0, some_1.default)(martechProducts, (i) => (0, includes_1.default)(subscribedProducts, i));
    return isEntitled;
};
const getSubscriptionsFromToken = (accessCookieValue) => {
    const payload = (0, decode_jwt_1.default)(accessCookieValue);
    const fct = payload?.fct || {};
    return (0, flatten_1.default)((0, values_1.default)(fct));
};
//# sourceMappingURL=determineIfTheUserIsEntitled.js.map

/***/ }),

/***/ 62067:
/***/ ((module) => {

module.exports = (dispatch) => {
    const setShopifyCartItems = (value) => {
        dispatch({
            type: 'SET_KEY',
            key: 'shopifyCartItems',
            value
        });
    };
    const setShopifyWidgetState = (value) => {
        dispatch({
            type: 'SET_KEY',
            key: 'isShopifyCartWidgetOpen',
            value
        });
    };
    return {
        setShopifyCartItems,
        setShopifyWidgetState
    };
};
//# sourceMappingURL=actions.js.map

/***/ }),

/***/ 14920:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.convertRubric = void 0;
const capitalize_1 = __importDefault(__webpack_require__(14792));
const get_1 = __importDefault(__webpack_require__(58156));
const get_content_type_1 = __webpack_require__(14515);
const secondaryTypeMap = new Map([
    ['ACTIVE_FITNESS', 'Active Fitness'],
    ['BEACH', 'Beach'],
    ['CINEMA', 'Cinema'],
    ['COMEDY', 'Comedy'],
    ['CONCERT', 'Concert'],
    ['GALLERY', 'Gallery'],
    ['FARM', 'Farm'],
    ['LANDMARK', 'Landmark'],
    ['MINDFULNESS', 'Mindfulness'],
    ['MOUNTAIN', 'Mountain'],
    ['MUSEUM', 'Museum'],
    ['NATIONAL_PARK', 'National Park'],
    ['PARK_GARDEN', 'Parks & Gardens'],
    ['SPA', 'Spa'],
    ['SPORTS', 'Sports'],
    ['THEATER', 'Theater'],
    ['TOUR', 'Tour'],
    ['WELLNESS', 'Wellness'],
    ['RETREAT', 'Retreat'],
    ['YOGA', 'Yoga']
]);
const subtypeMap = new Map([
    ['FoodHall', 'Food Hall'],
    ['CocktailBar', 'Cocktail Bar'],
    ['CommonBar', 'Bar'],
    ['CoffeeTeaBar', 'Coffee/Tea Bar'],
    ['DepartmentStore', 'Department Store'],
    ['SpecialtyShop', 'Specialty'],
    ['StreetFood', 'Street Food'],
    ['RooftopBar', 'Rooftop Bar'],
    ['HotelBar', 'Hotel Bar'],
    ['DiveBar', 'Dive Bar'],
    ['JuiceBar', 'Juice Bar'],
    ['SportsBar', 'Sports Bar']
]);
/**
 * Converts rubric specific to contentTypes video, CNEvideo, CNT Venues.
 *
 * @param {string} contentType - is item type of content
 * @param {object} rubric - is object with rubric
 * @param {object} item - item that contains the rubric
 * @param {object} workflowContext - WorkflowContext instance
 * @returns {object|undefined} - rubric name
 */
function convertRubric(contentType, rubric, item, workflowContext) {
    if (rubric) {
        return rubric;
    }
    // if the item.contentType is one of the CNT venue values from get-venue-types
    // set rubric based on venue type
    // for Hotel types, we want to hide rubric data
    if (get_content_type_1.venueTypes.includes(contentType)) {
        switch (contentType) {
            case 'restaurant':
            case 'bar':
            case 'shop':
            case 'spa':
                return { name: subtypeMap.get(item?.subtype) || item?.subtype };
            case 'activity':
                return {
                    name: secondaryTypeMap.get(item?.secondaryType) || 'activity'
                };
            default:
                return undefined;
        }
    }
    if (contentType === 'review' && !rubric && item?.genre?.length) {
        const useMultipleGenre = (0, get_1.default)(workflowContext, `appConfig.channel.features.useMultipleGenre`, false);
        if (useMultipleGenre) {
            return item.genre;
        }
        return { name: item?.genre[0].name, url: item?.genre[0].url };
    }
    if (contentType === 'contributor' && !rubric) {
        const contributorRubric = item?.contextualDek || item?.channelName || '';
        return { name: contributorRubric.replace(/\w+/g, capitalize_1.default) };
    }
    return contentType && contentType.includes('video')
        ? { name: 'Video' }
        : undefined;
}
exports.convertRubric = convertRubric;
//# sourceMappingURL=convertRubric.js.map

/***/ }),

/***/ 14515:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.venueTypes = void 0;
const get_1 = __importDefault(__webpack_require__(58156));
exports.venueTypes = [
    'activity',
    'bar',
    'hotel',
    'restaurant',
    'ship',
    'shop',
    'spa',
    'skiresort'
];
const subtypeMap = new Map([
    ['skiresort', 'SkiResort'],
    ['Resort', 'Resort'],
    ['cafe', 'Cafe'],
    ['Club', 'Club'],
    ['club', 'Club'],
    ['Bar', 'CommonBar'],
    ['Ship', 'CommonShip'],
    ['ship', 'CommonShip'],
    ['Ocean', 'OceanShip'],
    ['River', 'RiverShip'],
    ['Expedition', 'CommonShip'],
    ['Health-Wellness', 'HealthAndWellness'],
    ['Performance', 'PerformanceVenue'],
    ['Park-Garden', 'ParkGarden'],
    ['park-garden', 'ParkGarden'],
    ['Outdoors', 'SportsAndOutdoors'],
    ['outdoors', 'SportsAndOutdoors'],
    ['Performance-Venue', 'PerformanceVenue'],
    ['Sports-Outdoors', 'SportsAndOutdoors'],
    ['Theme-Park', 'ThemePark'],
    ['tour', 'Tour'],
    ['Tour', 'Tour'],
    ['Winery-Brewery-Distillery', 'WineryBreweryDistillery'],
    ['winery-brewery-distillery', 'WineryBreweryDistillery'],
    ['Beach', 'Beach'],
    ['Sports-Venue', 'SportsVenue'],
    ['Studio-Workshop', 'StudioWorkshop'],
    ['performance-venue', 'PerformanceVenue'],
    ['sports-venue', 'SportsVenue'],
    ['beach', 'Beach'],
    ['theme-park', 'ThemePark'],
    ['studio-workshop', 'StudioWorkshop'],
    ['Farm', 'Farm'],
    ['Health and Wellness', 'HealthAndWellness'],
    ['Cinema', 'Cinema'],
    ['farm', 'Farm'],
    ['cinema', 'Cinema'],
    ['Coffee/Tea Bar', 'CoffeeTeaBar'],
    ['Specialty', 'SpecialtyShop'],
    ['common-ship', 'CommonShip'],
    ['common-bar', 'CommonBar'],
    ['historic-landmark', 'HistoricLandmark'],
    ['Bed and Breakfast', 'BedAndBreakfast'],
    ['Private Rental', 'PrivateRental'],
    ['Destination Spa', 'DestinationSpa'],
    ['Street Food', 'StreetFood'],
    ['spa', 'Spa'],
    ['spas', 'Spa'],
    ['Cafe', 'Cafe'],
    ['Cocktail Bar', 'CocktailBar'],
    ['Dive Bar', 'DiveBar'],
    ['Hotel Bar', 'HotelBar'],
    ['Juice Bar', 'JuiceBar'],
    ['Rooftop Bar', 'RooftopBar'],
    ['Sports Bar', 'SportsBar'],
    ['Hotel', 'Hotel'],
    ['SportsAndOutdoors', 'SportsAndOutdoors'],
    ['Culture', 'Culture'],
    ['ThemePark', 'ThemePark'],
    ['HealthAndWellness', 'HealthAndWellness'],
    ['HistoricLandmark', 'HistoricLandmark'],
    ['Food Hall', 'FoodHall'],
    ['Spa', 'Spa'],
    ['Restaurant', 'Restaurant'],
    ['Shop', 'Shop'],
    ['Bakery', 'Bakery'],
    ['Department Store', 'DepartmentStore'],
    ['Mall', 'Mall'],
    ['Market', 'Market'],
    ['Shop', 'Shop']
]);
const subTypes = [
    'cafe',
    'Culture',
    'Hotel',
    'Cocktail Bar',
    'Dive Bar',
    'Hotel Bar',
    'Juice Bar',
    'Rooftop Bar',
    'Sports Bar',
    'Cafe',
    'Bar',
    'Expedition',
    'Resort',
    'Market',
    'Mall',
    'Shop',
    'Ship',
    'ship',
    'Club',
    'Ocean',
    'River',
    'Health-Wellness',
    'Performance',
    'performance-venue',
    'Park-Garden',
    'park-garden',
    'Sports-Outdoors',
    'SportsAndOutdoors',
    'ThemePark',
    'Sports-Venue',
    'Winery-Brewery-Distillery',
    'winery-brewery-distillery',
    'Studio-Workshop',
    'Theme-Park',
    'theme-park',
    'Farm',
    'farm',
    'Coffee/Tea Bar',
    'Specialty',
    'common-ship',
    'common-bar',
    'historic-landmark',
    'Bed and Breakfast',
    'Private Rental',
    'Destination Spa',
    'Street Food',
    'spa',
    'spas',
    'HealthAndWellness',
    'HistoricLandmark',
    'Food Hall',
    'Spa',
    'Restaurant',
    'Shop',
    'Bakery',
    'Department Store'
];
function getSubtype(modelName) {
    if (modelName === 'hotel') {
        return 'BoutiqueHotel';
    }
    else if (modelName === 'shop') {
        return 'BoutiqueRetail';
    }
    return modelName;
}
/**
 * Check the contentType against an array of venue types
 *
 * @param workflowContext - the context
 * @returns contentType - transformed contentType if it is a venue type
 */
function getContentType(workflowContext) {
    const contentType = (0, get_1.default)(workflowContext, 'fetched.primary.meta.modelName', '');
    if (exports.venueTypes.includes(contentType)) {
        const { subtype } = (0, get_1.default)(workflowContext, 'fetched.primary', '');
        if (subtype === 'Boutique') {
            return getSubtype(contentType);
        }
        if (subTypes.includes(subtype)) {
            return subtypeMap.get(subtype);
        }
    }
    return contentType;
}
exports["default"] = getContentType;
//# sourceMappingURL=get-content-type.js.map

/***/ }),

/***/ 60595:
/***/ ((__unused_webpack_module, exports) => {

"use strict";

Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.getSignage = exports.getSignageFromFunctionalTags = void 0;
/**
 * returns a signage based on functional tags
 */
function getSignageFromFunctionalTags(functionalTags, signageMapper) {
    const fTag = functionalTags?.filter((functionalTag) => signageMapper[functionalTag.slug])[0]?.slug;
    return fTag ? signageMapper[fTag] : null;
}
exports.getSignageFromFunctionalTags = getSignageFromFunctionalTags;
/**
 * @param signageBy the string for which to fetch signage
 * @param signageMapper a mapper object to map to signages
 * @param signageOption array of options used to build signage lofic
 * @returns a signage string
 */
function getSignage(signageBy = '', signageMapper = {}, signageOption = []) {
    switch (signageBy) {
        case 'FunctionalTags': {
            return getSignageFromFunctionalTags(signageOption, signageMapper);
        }
        default:
            return null;
    }
}
exports.getSignage = getSignage;
//# sourceMappingURL=get-signage.js.map

/***/ }),

/***/ 44860:
/***/ (function(__unused_webpack_module, exports, __webpack_require__) {

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", ({ value: true }));
exports.addTrailingSlashToUrl = exports.shouldUseTrailingSlash = void 0;
const get_1 = __importDefault(__webpack_require__(58156));
const shouldUseTrailingSlash = (workflowContext) => {
    return (0, get_1.default)(workflowContext, `appConfig.tenant.seo.useTrailingSlash`, false);
};
exports.shouldUseTrailingSlash = shouldUseTrailingSlash;
const addTrailingSlashToUrl = (uri = '') => {
    // we have to take care of anchors AND params
    const [baseUrl, separator] = uri.split(/([?#])/);
    const normalizedBaseUrl = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
    return separator
        ? normalizedBaseUrl + separator + uri.split(separator)[1]
        : normalizedBaseUrl;
};
exports.addTrailingSlashToUrl = addTrailingSlashToUrl;
//# sourceMappingURL=trailing-slash.js.map

/***/ }),

/***/ 18315:
/***/ ((module) => {

"use strict";
module.exports = /*#__PURE__*/JSON.parse('{"server_port":3000,"socket_port":3001}');

/***/ })

}]);