@quintype/arrow 3.54.1-version-upgrade.1 → 3.54.1-version-upgrade.2

package/src/components/Atoms/StoryDemarcationIcon/index.js

@@ -1,127 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { PhotoIcon1, PhotoIcon2, PhotoIcon3, PhotoIcon4 } from "../../Svgs/photo-icons";
-import { VideoIcon1, VideoIcon2, VideoIcon3, VideoIcon4, VideoIcon5 } from "../../Svgs/video-icons";
-import { VisualStoryIcon1, VisualStoryIcon2, VisualStoryIcon3, VisualStoryIcon4 } from "../../Svgs/visual-story-icons";
-
-function PhotoDemarcationIcon({ iconConfig, enableDarkMode, iconColor, darkIconColor }) {
-  const { enablePhotoDemarcationIcon = false, iconStyle } = iconConfig || {};
-  if (!enablePhotoDemarcationIcon) return <></>;
-
-  const iconBackground = (enableDarkMode ? darkIconColor : iconColor) || "#000000";
-  switch (iconStyle) {
-    case "photoIcon2":
-      return <PhotoIcon2 background={iconBackground} />;
-    case "photoIcon3":
-      return <PhotoIcon3 background={iconBackground} />;
-    case "photoIcon4":
-      return <PhotoIcon4 background={iconBackground} />;
-    default:
-      return <PhotoIcon1 background={iconBackground} />;
-  }
-}
-
-function VideoDemarcationIcon({ iconConfig, enableDarkMode, iconColor, darkIconColor }) {
-  const { enableVideoDemarcationIcon = false, iconStyle } = iconConfig || {};
-  if (!enableVideoDemarcationIcon) return <></>;
-
-  const iconBackground = (enableDarkMode ? darkIconColor : iconColor) || "#000000";
-  switch (iconStyle) {
-    case "videoIcon2":
-      return <VideoIcon2 background={iconBackground} />;
-    case "videoIcon3":
-      return <VideoIcon3 background={iconBackground} />;
-    case "videoIcon4":
-      return <VideoIcon4 background={iconBackground} />;
-    case "videoIcon5":
-      return <VideoIcon5 background={iconBackground} />;
-    default:
-      return <VideoIcon1 background={iconBackground} />;
-  }
-}
-
-function VisualStoryDemarcationIcon({ iconConfig, enableDarkMode, iconColor, darkIconColor }) {
-  const { enableVisualStoryDemarcationIcon = false, iconStyle } = iconConfig || {};
-  if (!enableVisualStoryDemarcationIcon) return <></>;
-
-  const iconBackground = (enableDarkMode ? darkIconColor : iconColor) || "#000000";
-  switch (iconStyle) {
-    case "visualStoryIcon2":
-      return <VisualStoryIcon2 background={iconBackground} />;
-    case "visualStoryIcon3":
-      return <VisualStoryIcon3 background={iconBackground} />;
-    case "visualStoryIcon4":
-      return <VisualStoryIcon4 background={iconBackground} />;
-    default:
-      return <VisualStoryIcon1 background={iconBackground} />;
-  }
-}
-
-export function StoryDemarcationIcon({ storyTemplate, rowsConfig = {}, enableDarkMode }) {
-  const {
-    photoDemarcationIcon = {},
-    videoDemarcationIcon = {},
-    visualStoryDemarcationIcon = {},
-    iconColor,
-    darkIconColor
-  } = rowsConfig || {};
-
-  switch (storyTemplate) {
-    case "photo":
-      return (
-        <PhotoDemarcationIcon
-          iconConfig={photoDemarcationIcon}
-          enableDarkMode={enableDarkMode}
-          iconColor={iconColor}
-          darkIconColor={darkIconColor}
-        />
-      );
-    case "video":
-      return (
-        <VideoDemarcationIcon
-          iconConfig={videoDemarcationIcon}
-          enableDarkMode={enableDarkMode}
-          iconColor={iconColor}
-          darkIconColor={darkIconColor}
-        />
-      );
-    case "visual-story":
-      return (
-        <VisualStoryDemarcationIcon
-          iconConfig={visualStoryDemarcationIcon}
-          enableDarkMode={enableDarkMode}
-          iconColor={iconColor}
-          darkIconColor={darkIconColor}
-        />
-      );
-    default:
-      return <></>;
-  }
-}
-
-StoryDemarcationIcon.propTypes = {
-  storyTemplate: PropTypes.string,
-  rowsConfig: PropTypes.object,
-  enableDarkMode: PropTypes.bool
-};
-
-VideoDemarcationIcon.propTypes = {
-  iconConfig: PropTypes.object,
-  enableDarkMode: PropTypes.bool,
-  iconColor: PropTypes.string,
-  darkIconColor: PropTypes.string
-};
-
-VisualStoryDemarcationIcon.propTypes = {
-  iconConfig: PropTypes.object,
-  enableDarkMode: PropTypes.bool,
-  iconColor: PropTypes.string,
-  darkIconColor: PropTypes.string
-};
-
-PhotoDemarcationIcon.propTypes = {
-  iconConfig: PropTypes.object,
-  enableDarkMode: PropTypes.bool,
-  iconColor: PropTypes.string,
-  darkIconColor: PropTypes.string
-};

package/src/components/Atoms/StoryElements/AISummary/ai-icons.js

@@ -1,51 +0,0 @@
-import React from "react";
-
-export const AI_ICONS = {
-  star: (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-      <path
-        d="M5.825 21L7.45 13.975L2 9.25L9.2 8.625L12 2L14.8 8.625L22 9.25L16.55 13.975L18.175 21L12 17.275L5.825 21ZM17.25 7L17.775 4.775L16 3.3L18.35 3.1L19.25 1L20.15 3.1L22.5 3.3L20.725 4.775L21.25 7L19.25 5.825L17.25 7Z"
-        fill="currentColor"
-      />
-    </svg>
-  ),
-  sparkle: (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-      <g clipPath="url(#clip0_6169_488)">
-        <path
-          d="M12 0C11.4591 4.41494 11.2803 7.21839 10.2234 9.02811C8.4958 11.2775 5.50126 11.4917 0 12C5.41209 12.6548 8.33831 12.7968 10.071 14.8574C11.3655 16.6815 11.5845 19.5033 12 24C12.7057 18.168 12.8162 15.2229 15.3734 13.547C17.1915 12.6688 19.9046 12.4771 24 12C18.9219 11.3779 15.9755 11.2347 14.2214 9.68344C12.7382 7.91523 12.58 4.97914 12 0Z"
-          fill="currentColor"
-        />
-        <path d="M18 8L18.94 5.94L21 5L18.94 4.06L18 2L17.06 4.06L15 5L17.06 5.94L18 8Z" fill="currentColor" />
-      </g>
-      <defs>
-        <clipPath id="clip0_6169_488">
-          <rect width="24" height="24" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  ),
-  wand: (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path
-        d="m14.06 9.02.92.92L5.92 19H5v-.92zM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29m-3.6 3.19L3 17.25V21h3.75L17.81 9.94zM11 5l.627-1.373L13 3l-1.373-.627L11 1l-.627 1.373L9 3l1.373.627zm-5 5 .94-2.06L9 7l-2.06-.94L6 4l-.94 2.06L3 7l2.06.94zm12 5-.94 2.06L15 18l2.06.94L18 21l.94-2.06L21 18l-2.06-.94z"
-        fill="currentColor"
-      />
-    </svg>
-  ),
-  diamond: (
-    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-      <path
-        d="M9.93743 15.5C9.84815 15.1539 9.66777 14.8381 9.41505 14.5854C9.16232 14.3327 8.8465 14.1523 8.50043 14.063L2.36543 12.481C2.26076 12.4513 2.16864 12.3883 2.10304 12.3014C2.03744 12.2146 2.00195 12.1088 2.00195 12C2.00195 11.8912 2.03744 11.7854 2.10304 11.6986C2.16864 11.6118 2.26076 11.5487 2.36543 11.519L8.50043 9.93601C8.84638 9.84681 9.16212 9.66658 9.41483 9.41404C9.66754 9.16151 9.84799 8.84589 9.93743 8.50001L11.5194 2.36501C11.5488 2.25992 11.6118 2.16735 11.6987 2.1014C11.7857 2.03545 11.8918 1.99976 12.0009 1.99976C12.11 1.99976 12.2162 2.03545 12.3031 2.1014C12.39 2.16735 12.453 2.25992 12.4824 2.36501L14.0634 8.50001C14.1527 8.84608 14.3331 9.1619 14.5858 9.41462C14.8385 9.66734 15.1544 9.84773 15.5004 9.93701L21.6354 11.518C21.7409 11.5471 21.834 11.61 21.9003 11.6971C21.9666 11.7841 22.0025 11.8906 22.0025 12C22.0025 12.1094 21.9666 12.2159 21.9003 12.3029C21.834 12.39 21.7409 12.4529 21.6354 12.482L15.5004 14.063C15.1544 14.1523 14.8385 14.3327 14.5858 14.5854C14.3331 14.8381 14.1527 15.1539 14.0634 15.5L12.4814 21.635C12.452 21.7401 12.389 21.8327 12.3021 21.8986C12.2152 21.9646 12.109 22.0003 11.9999 22.0003C11.8908 22.0003 11.7847 21.9646 11.6977 21.8986C11.6108 21.8327 11.5478 21.7401 11.5184 21.635L9.93743 15.5Z"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path d="M20 3V7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M22 5H18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M4 17V19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M5 18H3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  )
-};

package/src/components/Atoms/StoryElements/AISummary/ai-summary.m.css

@@ -1,106 +0,0 @@
-/* root card container */
-.summary {
-  border: 1px solid #fff;
-  border-radius: 10px;
-  padding: var(--arrow-spacing-s);
-}
-
-/* heading */
-.heading-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.heading-left {
-  display: flex;
-  align-items: center;
-  gap: var(--arrow-spacing-xs);
-}
-
-.heading-icon {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.headline {
-  margin-bottom: 0;
-  font-size: var(--arrow-fs-xs);
-  font-weight: var(--arrow-fw-bold);
-}
-
-.subtitle {
-  font-size: var(--arrow-fs-xxs) !important;
-  margin-top: var(--arrow-spacing-xxs);
-  margin-bottom: 0;
-}
-
-.subtitle.dark {
-  color: var(--arrow-c-mono4);
-}
-
-.subtitle.light {
-  color: var(--arrow-c-invert-mono4);
-}
-
-/* separator */
-.separator {
-  border: none;
-  margin: var(--arrow-spacing-s) 0;
-}
-
-.separator.dark {
-  border-top: 1px solid var(--arrow-c-mono7);
-}
-
-.separator.light {
-  border-top: 1px solid var(--arrow-c-invert-mono7);
-}
-
-/* content */
-.content * {
-  font-size: var(--arrow-fs-xs) !important;
-}
-
-.content > * {
-  margin-bottom: 15px !important;
-  line-height: 1.5;
-}
-
-.content.light > * {
-  color: var(--arrow-c-light);
-}
-
-.content > ul {
-  list-style: initial;
-  padding: 0 var(--arrow-spacing-xl) 0 var(--arrow-spacing-xl);
-}
-
-.content > ol {
-  list-style: auto;
-  padding: 0 var(--arrow-spacing-xl) 0 var(--arrow-spacing-xl);
-}
-
-.content li {
-  margin-bottom: 15px;
-}
-
-.content a {
-  color: var(--textElementHyperlinkColor);
-  border-bottom: 1px solid var(--textElementHyperlinkColor);
-}
-
-/* theme */
-.dark {
-  color: var(--arrow-c-mono1);
-}
-
-.light {
-  color: var(--arrow-c-invert-mono1);
-}
-
-.light a {
-  color: var(--arrow-c-invert-mono1);
-  border-bottom: 1px solid var(--arrow-c-invert-mono1);
-}

package/src/components/Atoms/StoryElements/AISummary/index.js

@@ -1,206 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import PropTypes from "prop-types";
-import { useSelector } from "react-redux";
-import { withElementWrapper } from "../withElementWrapper";
-import get from "lodash/get";
-import { getTextColor, updateContentLinks } from "../../../../utils/utils";
-import { useStateValue } from "../../../SharedContext";
-import "./ai-summary.m.css";
-import { AI_ICONS } from "./ai-icons";
-
-// Walk the HTML string revealing only `charCount` visible characters while
-// keeping all tags intact so CSS rules apply consistently throughout the animation.
-function revealHtml(html, charCount) {
-  let count = 0;
-  let result = "";
-  let inTag = false;
-
-  for (let i = 0; i < html.length; i++) {
-    const char = html[i];
-    if (char === "<") {
-      inTag = true;
-      result += char;
-    } else if (char === ">") {
-      inTag = false;
-      result += char;
-    } else if (inTag) {
-      result += char;
-    } else {
-      result += char;
-      count++;
-      if (count >= charCount) break;
-    }
-  }
-  return result;
-}
-
-const Chevron = ({ isExpanded }) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style={{
-      transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
-      transition: "transform 0.2s ease",
-      flexShrink: 0
-    }}
-    aria-hidden="true">
-    <path d="M4 6L8 10L12 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
-
-const AISummaryBase = ({ element, opts = {}, css = {} }) => {
-  const isBotRequest = useSelector((state) => get(state, ["qt", "isBotRequest"], false));
-  const enableDarkMode = useSelector((state) => get(state, ["header", "isDarkModeEnabled"], false));
-  const { primaryColor = "#4860BC", darkPrimaryColor = "#4860BC" } = useSelector((state) =>
-    get(state, ["qt", "config", "pagebuilder-config", "general"], {})
-  );
-  const configData = useStateValue() || {};
-  const { isExternalLink = true, headline, iconType = "star", subtitle, expandOnStart = false } = opts;
-  const icon = AI_ICONS[iconType] || AI_ICONS.star;
-
-  // Bots start expanded (full content visible for SEO); readers start collapsed
-  const [isExpanded, setIsExpanded] = useState(isBotRequest || expandOnStart);
-  const [typedLength, setTypedLength] = useState(0);
-  const [typingDone, setTypingDone] = useState(() => isBotRequest);
-  const typingStarted = useRef(false);
-
-  const content = element.text;
-  const text = (isExternalLink && content && updateContentLinks(content)) || content || "";
-  const plainText = text.replace(/<[^>]*>/g, "");
-
-  // Reset typing state on collapse so re-expanding always starts fresh
-  useEffect(() => {
-    if (!isExpanded) {
-      typingStarted.current = false;
-      setTypedLength(0);
-      if (!isBotRequest) setTypingDone(false);
-    }
-  }, [isExpanded, isBotRequest]);
-
-  // Typing effect — only for non-bot requests, starts when the user expands
-  useEffect(() => {
-    if (!content || isBotRequest) {
-      setTypingDone(true);
-      return;
-    }
-
-    if (!isExpanded || typingStarted.current) return;
-    typingStarted.current = true;
-
-    setTypedLength(0);
-    setTypingDone(false);
-
-    let i = 0;
-    const interval = setInterval(() => {
-      i++;
-      if (i >= plainText.length) {
-        setTypingDone(true);
-        clearInterval(interval);
-      } else {
-        setTypedLength(i);
-      }
-    }, 10);
-
-    return () => clearInterval(interval);
-  }, [content, isBotRequest, plainText, isExpanded]);
-
-  if (!content) return null;
-
-  const {
-    borderColor = primaryColor,
-    backgroundColor = "#FFF",
-    iconColor = primaryColor,
-    darkBorderColor = darkPrimaryColor,
-    darkBackgroundColor = "#FFF",
-    darkIconColor = darkPrimaryColor
-  } = css;
-  const activeBorderColor = enableDarkMode ? darkBorderColor : borderColor;
-  const activeBackgroundColor = enableDarkMode ? darkBackgroundColor : backgroundColor;
-  const activeIconColor = enableDarkMode ? darkIconColor : iconColor;
-  const textInvertColor = getTextColor(activeBackgroundColor) || configData.theme;
-
-  const toggle = () => setIsExpanded((prev) => !prev);
-  const interactiveProps = !isBotRequest
-    ? {
-        onClick: toggle,
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") toggle();
-        },
-        role: "button",
-        tabIndex: 0,
-        "aria-expanded": isExpanded,
-        style: { cursor: "pointer" }
-      }
-    : {};
-
-  return (
-    <div
-      className="arr--summary-element"
-      styleName="summary"
-      data-test-id="summary"
-      style={{ borderColor: activeBorderColor, backgroundColor: activeBackgroundColor }}>
-      <div styleName={textInvertColor} data-test-id="summary-headline" {...interactiveProps}>
-        <div styleName="heading-row">
-          <div styleName="heading-left">
-            <span styleName="heading-icon" data-test-id="ai-summary-icon" style={{ color: activeIconColor }}>
-              {icon}
-            </span>
-            <div styleName={`headline ${textInvertColor}`}>{headline || "Quick Read"}</div>
-          </div>
-          {!isBotRequest && <Chevron isExpanded={isExpanded} />}
-        </div>
-        <p styleName={`subtitle ${textInvertColor}`}>{subtitle || "AI generated summary, newsroom reviewed"}</p>
-      </div>
-      {isExpanded && (
-        <>
-          <hr styleName={`separator ${textInvertColor}`} />
-          <div style={{ position: "relative" }}>
-            {/* Hidden full content reserves the final height from the first frame */}
-            <div
-              styleName={`content ${textInvertColor}`}
-              dangerouslySetInnerHTML={{ __html: text }}
-              style={!typingDone ? { visibility: "hidden" } : undefined}
-            />
-            {/* Typing overlay — removed once animation completes */}
-            {!typingDone && (
-              <div
-                styleName={`content ${textInvertColor}`}
-                dangerouslySetInnerHTML={{ __html: revealHtml(text, typedLength) }}
-                style={{ position: "absolute", top: 0, left: 0, right: 0 }}
-              />
-            )}
-          </div>
-        </>
-      )}
-    </div>
-  );
-};
-
-AISummaryBase.propTypes = {
-  element: PropTypes.shape({ text: PropTypes.string }),
-  opts: PropTypes.shape({
-    isExternalLink: PropTypes.bool,
-    headline: PropTypes.string,
-    iconType: PropTypes.oneOf(["star", "sparkle", "wand", "diamond"]),
-    subtitle: PropTypes.string,
-    expandOnStart: PropTypes.bool
-  }),
-  css: PropTypes.shape({
-    borderColor: PropTypes.string,
-    backgroundColor: PropTypes.string,
-    iconColor: PropTypes.string,
-    darkBorderColor: PropTypes.string,
-    darkBackgroundColor: PropTypes.string,
-    darkIconColor: PropTypes.string
-  })
-};
-
-Chevron.propTypes = {
-  isExpanded: PropTypes.bool
-};
-
-export { AISummaryBase };
-export const AISummary = withElementWrapper(AISummaryBase);

package/src/components/Atoms/StoryElements/AISummary/stories.js

@@ -1,27 +0,0 @@
-import React from "react";
-import { withStore } from "../../../../../storybook";
-import { generateStory, generateStoryElementData } from "../../../Fixture";
-import { AISummary } from "./index";
-import { color, text, select } from "@storybook/addon-knobs";
-
-const element = generateStoryElementData("summary");
-// Override published-at to a date after the Feb 2025 cutoff
-const story = generateStory(undefined, { "published-at": new Date("2025-03-01").getTime() });
-
-withStore("Atoms/Story Elements/AI Summary", {}, null).add("Default", () => (
-  <AISummary
-    element={element}
-    story={story}
-    opts={{
-      headline: text("Headline", "AI Summary"),
-      subtitle: text("Subtitle", "AI-generated overview for quick reading."),
-      iconType: select("Icon Type", ["star", "sparkle", "wand", "diamond"], "star"),
-      expandOnStart: true
-    }}
-    css={{
-      borderColor: color("Border Color", "#4860BC"),
-      backgroundColor: color("Background Color", "#f2f2f2"),
-      iconColor: color("Icon Color", "#4860BC")
-    }}
-  />
-));

package/src/components/Atoms/StoryElements/AlsoRead/README.md

@@ -1,49 +0,0 @@
-# AlsoRead
-
-Component to display the also read element.
-
-## Usage
-
-#### AlsoRead story element with default template
-
-```jsx
-<AlsoRead story={story} element={element} template="default" />
-```
-
-#### AlsoRead story element with image right align template
-
-```jsx
-<AlsoRead story={story} element={element} template="imageRightAlign" />
-```
-
-#### AlsoRead story element with text left align template
-
-```jsx
-<AlsoRead element={element} template="textLeftAlign" />
-```
-
-#### AlsoRead story element with custom title
-
-```jsx
-const css = { title: "Headline" };
-
-<AlsoRead story={story} element={element} template="textLeftAlign" css={css} />;
-```
-
-#### AlsoRead story element with text color
-
-```jsx
-const css = { textcolor: "#333333" };
-
-<AlsoRead story={story} element={element} template="default" css={css} />;
-```
-
-#### Replace default also read element template with custom template passed using render
-
-```jsx
-const customTemplate = ({ element }) => <h3 dangerouslySetInnerHTML={{ __html: element.text }} />;
-
-<AlsoRead element={element} render={customTemplate} />;
-```
-
-<!-- PROPS -->

package/src/components/Atoms/StoryElements/AlsoRead/also-read.m.css

@@ -1,133 +0,0 @@
-@value viewports: "../../../../../assets/stylesheets/viewports.m.css";
-@value mobile from viewports;
-
-.card-image img {
-  position: absolute;
-  top: 0;
-  height: 100%;
-}
-
-.default-text {
-  font-family: var(--arrow-typeface-secondary);
-}
-
-.alsoread-textLeftAlign .default-text,
-.alsoread-imageRightAlign .default-text {
-  font-size: var(--arrow-fs-xs);
-  font-weight: var(--arrow-fw-bold);
-  line-height: var(--arrow-lh-3);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-s);
-  }
-}
-
-.headline {
-  line-height: var(--arrow-lh-3);
-  font-weight: var(--arrow-fw-bold);
-  font-family: var(--arrow-typeface-primary);
-}
-
-.alsoread-default .headline {
-  padding-top: var(--arrow-spacing-xs);
-  font-size: var(--arrow-fs-s);
-  @media (min-width: mobile) {
-    padding-top: 0;
-    font-size: var(--arrow-fs-l);
-  }
-}
-
-.alsoread-textLeftAlign .headline {
-  margin-top: var(--arrow-spacing-xs);
-  font-size: var(--arrow-fs-m);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-l);
-  }
-}
-
-.alsoread-imageRightAlign .headline {
-  font-size: var(--arrow-fs-m);
-  margin-right: var(--arrow-spacing-m);
-  @media (min-width: mobile) {
-    font-size: var(--arrow-fs-l);
-  }
-}
-
-.card-image-wrapper {
-  position: relative;
-}
-
-.alsoread-default .card-image-wrapper {
-  @media (min-width: mobile) {
-    flex-basis: 30%;
-    margin-right: var(--arrow-spacing-m);
-  }
-}
-
-.card-image {
-  display: block;
-  position: relative;
-}
-
-.alsoread-imageRightAlign .card-image,
-.alsoread-imageRightAlign .card-image-wrapper .image {
-  padding-top: 75%;
-  @media (min-width: mobile) {
-    padding-top: 56.25%;
-  }
-}
-
-.alsoread-default {
-  border: solid 1px var(--arrow-c-brand5);
-  display: block;
-  padding: var(--arrow-spacing-m);
-  @media (min-width: mobile) {
-    display: flex;
-  }
-}
-
-.alsoread-imageRightAlign .content-wrapper {
-  display: flex;
-  margin-top: var(--arrow-spacing-xs);
-}
-
-.alsoread-default .content-wrapper {
-  @media (min-width: mobile) {
-    flex-basis: 70%;
-  }
-}
-
-.alsoread-default .card-image,
-.alsoread .card-image-wrapper .image,
-.alsoread-default .card-image-wrapper .image {
-  padding-top: 56.25%;
-}
-
-.card-image-wrapper .image div {
-  background: var(--arrow-c-mono6);
-}
-
-.alsoread-imageRightAlign .card-image-wrapper .image :global(.arr--fallback-image),
-.alsoread-imageRightAlign .card-image-wrapper .image,
-.alsoread-imageRightAlign .card-image-wrapper .card-image {
-  width: 100px;
-  height: 75px;
-  @media (min-width: mobile) {
-    width: 160px;
-    height: 90px;
-  }
-}
-html[dir="rtl"] {
-  .content-wrapper {
-    margin-right: var(--arrow-spacing-m);
-  }
-  .card-image-wrapper {
-    margin-right: 0;
-  }
-}
-
-.dark {
-  color: var(--arrow-c-mono1);
-}
-.light {
-  color: var(--arrow-c-invert-mono1);
-}