@playpilot/tpi 5.14.0 → 5.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "5.14.0",
+	"version": "5.16.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -32,6 +32,7 @@
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"svelte-preprocess": "^6.0.3",
+		"svelte-tiny-slider": "^2.3.0",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.32.1",
 		"vite": "^5.0.3",

package/src/lib/ads.ts

@@ -1,4 +1,5 @@
 import { getApiToken } from "./api"
+import { hasConsentedTo } from "./consent"
 import { apiBaseUrl } from "./constants"
 import { TrackingEvent } from "./enums/TrackingEvent"
 import { track } from "./tracking"
@@ -6,6 +7,8 @@ import type { Campaign, CampaignFormat } from "./types/campaign"
 import type { PlaylinkData } from "./types/playlink"
 
 export async function fetchAds() {
+  if (!hasConsentedTo('ads')) return
+
   const headers = new Headers({ 'Content-Type': 'application/json' })
   const apiToken = getApiToken()
 
@@ -29,6 +32,8 @@ export async function fetchAds() {
  * ad of the given format, which will likely always be the most recently added (or only) ad of that format.
  */
 export function getFirstAdOfType(format: CampaignFormat): Campaign | null {
+  if (!hasConsentedTo('ads')) return null
+
   return (window.PlayPilotLinkInjections?.ads || []).find(i => i.campaign_format === format) || null
 }
 

package/src/lib/consent.ts

@@ -0,0 +1,13 @@
+import type { ConsentKeys, ConsentOptions } from "./types/consent"
+
+export function setConsent(options: ConsentOptions): void {
+  if (!window.PlayPilotLinkInjections) return
+
+  window.PlayPilotLinkInjections.consents = options
+}
+
+export function hasConsentedTo(key: ConsentKeys): boolean {
+  if (window.PlayPilotLinkInjections.require_consent === false) return true
+
+  return !!window.PlayPilotLinkInjections.consents?.[key]
+}

package/src/lib/enums/SplitTest.ts

@@ -4,4 +4,8 @@ export const SplitTest = {
     numberOfVariants: 2,
     variantNames: ['Separated', 'Inline'] as string[]
   },
+  ParticipantPlaylinkFormat: {
+    key: 'participant_playlink_format',
+    numberOfVariants: 2,
+  }
 } as const

package/src/lib/fakeData.ts

@@ -1,5 +1,6 @@
 import type { Campaign } from "./types/campaign"
 import type { LinkInjection } from "./types/injection"
+import type { ParticipantData } from "./types/participant"
 import type { TitleData } from "./types/title"
 
 export const title: TitleData = {
@@ -71,6 +72,75 @@ export const linkInjections: LinkInjection[] = [{
   key: 'some-key-4',
 }]
 
+export const participants: ParticipantData[] = [
+  {
+    sid: 'pr5C5W',
+    name: 'James Franco',
+    birth_date: '1978-04-19',
+    death_date: null,
+    jobs: ['actor'],
+    image: null,
+    image_uuid: null,
+    gender: 'Male',
+    character: 'Will Rodman (archive footage) (uncredited)',
+  },
+  {
+    sid: 'pr8bZm',
+    name: 'Thomas Rosales Jr.',
+    birth_date: '1948-02-03',
+    death_date: null,
+    jobs: ['actor'],
+    image: null,
+    image_uuid: null,
+    gender: 'Male',
+    character: 'Old Man',
+  },
+  {
+    sid: 'pr45Dp',
+    name: 'Barack Obama',
+    birth_date: '1961-08-04',
+    death_date: null,
+    jobs: ['actor'],
+    image: null,
+    image_uuid: null,
+    gender: 'Male',
+    character: 'Self (archive footage) (uncredited)',
+  },
+  {
+    sid: 'pr6DnN',
+    name: 'Gary Oldman',
+    birth_date: '1958-03-21',
+    death_date: null,
+    jobs: ['actor'],
+    image: null,
+    image_uuid: null,
+    gender: 'Male',
+    character: 'Dreyfus',
+  },
+  {
+    sid: 'pr7GK8',
+    name: 'Michael Papajohn',
+    birth_date: '1964-11-07',
+    death_date: null,
+    jobs: ['actor'],
+    image: null,
+    image_uuid: null,
+    gender: 'Male',
+    character: 'Cannon-Gunner',
+  },
+  {
+    sid: 'pr88KG',
+    name: 'Judy Greer',
+    birth_date: '1975-07-20',
+    death_date: null,
+    jobs: ['actor'],
+    image: null,
+    image_uuid: null,
+    gender: 'Female',
+    character: 'Cornelia',
+  },
+]
+
 export const campaign: Campaign = {
   campaign_format: 'card',
   campaign_type: 'image',

package/src/lib/linkInjection.ts

@@ -1,5 +1,4 @@
 import { mount, unmount } from 'svelte'
-import TitleModal from '../routes/components/TitleModal.svelte'
 import TitlePopover from '../routes/components/TitlePopover.svelte'
 import AfterArticlePlaylinks from '../routes/components/AfterArticlePlaylinks.svelte'
 import { cleanPhrase, findNumberOfMatchesInString, findShortestMatchBetweenPhrases, findTextNodeContaining, getIndexOfPhraseInElement, getNumberOfLeadingAndTrailingSpaces, isNodeInLink, replaceBetween, replaceStartingFrom } from './text'
@@ -9,6 +8,7 @@ import { playFallbackViewTransition } from './viewTransition'
 import { prefersReducedMotion } from 'svelte/motion'
 import { getNumberOfOccurrencesInArray } from './array'
 import { mobileBreakpoint } from './constants'
+import { destroyAllModals, openModal } from './modal'
 import { isEditorialModeEnabled } from './auth'
 import { track } from './tracking'
 import { TrackingEvent } from './enums/TrackingEvent'
@@ -21,7 +21,6 @@ const linksIntersectionObserver = typeof window !== 'undefined' ? new Intersecti
 let currentlyHoveredInjection: EventTarget | null = null
 let activePopoverInsertedComponent: object | null = null
 let afterArticlePlaylinkInsertedComponent: object | null = null
-let activeModalInsertedComponent: object | null = null
 
 /**
  * Return a list of all valid text containing elements that may get injected into.
@@ -353,7 +352,7 @@ function addLinkInjectionEventListeners(injections: LinkInjection[]): void {
 
     playFallbackViewTransition(() => {
       destroyLinkPopover(false)
-      openLinkModal(event, injection)
+      openModal({ event, injection, data: injection.title_details })
     }, !prefersReducedMotion.current && window.innerWidth >= mobileBreakpoint && !window.matchMedia("(pointer: coarse)").matches)
   })
 
@@ -403,29 +402,6 @@ export function trackLinkIntersection(entries: IntersectionObserverEntry[]): voi
   })
 }
 
-/**
- * Open modal for the corresponding injection by mounting the component and saving it to a variable.
- * Ignore clicks that used modifier keys or that were not left click.
- */
-function openLinkModal(event: MouseEvent, injection: LinkInjection): void {
-  if (isHoldingSpecialKey(event)) return
-  if (activeModalInsertedComponent) return
-
-  event.preventDefault()
-
-  activeModalInsertedComponent = mount(TitleModal, { target: getPlayPilotWrapperElement(), props: { title: injection.title_details!, onclose: destroyLinkModal } })
-}
-
-/**
- * Unmount the modal, removing it from the dom
- */
-function destroyLinkModal(outro: boolean = true): void {
-  if (!activeModalInsertedComponent) return
-
-  unmount(activeModalInsertedComponent, { outro })
-  activeModalInsertedComponent = null
-}
-
 /**
  * When a link is hovered, it is shown as a popover. The component is mounted when a mouse enters the link,
  * and removed when clicked or on mouseleave.
@@ -483,7 +459,13 @@ export function insertAfterArticlePlaylinks(elements: HTMLElement[], injections:
   target.dataset.playpilotAfterArticlePlaylinks = 'true'
   insertElement.insertAdjacentElement(insertPosition, target)
 
-  afterArticlePlaylinkInsertedComponent = mount(AfterArticlePlaylinks, { target, props: { linkInjections: injections, onclickmodal: (event, injection) => openLinkModal(event, injection) } })
+  afterArticlePlaylinkInsertedComponent = mount(AfterArticlePlaylinks, {
+    target,
+    props: {
+      linkInjections: injections,
+      onclickmodal: (event, injection) => openModal({ event, injection, data: injection.title_details })
+    }
+  })
 }
 
 function clearAfterArticlePlaylinks(): void {
@@ -502,7 +484,7 @@ export function clearLinkInjections(): void {
   elements.forEach((element) => clearLinkInjection(element.getAttribute(keyDataAttribute) || ''))
 
   clearAfterArticlePlaylinks()
-  destroyLinkModal(false)
+  destroyAllModals(false)
   destroyLinkPopover(false)
 
   linksIntersectionObserver?.disconnect()
@@ -611,6 +593,6 @@ export function isEquivalentInjection(injection1: LinkInjection, injection2: Lin
   return injection1.title === injection2.title && cleanPhrase(injection1.sentence) === cleanPhrase(injection2.sentence)
 }
 
-function getPlayPilotWrapperElement(): Element {
+export function getPlayPilotWrapperElement(): Element {
   return document.querySelector('[data-playpilot-link-injections]') || document.body
 }

package/src/lib/modal.ts

@@ -0,0 +1,97 @@
+import { mount, unmount } from "svelte"
+import { isHoldingSpecialKey } from "./event"
+import TitleModal from "../routes/components/TitleModal.svelte"
+import type { LinkInjection } from "./types/injection"
+import { getPlayPilotWrapperElement } from "./linkInjection"
+import ParticipantModal from "../routes/components/ParticipantModal.svelte"
+import type { TitleData } from "./types/title"
+import type { ParticipantData } from "./types/participant"
+import { mobileBreakpoint } from "./constants"
+
+type ModalType = 'title' | 'participant'
+
+type Modal = {
+  injection?: LinkInjection | null
+  component: object
+  type: ModalType
+  data: TitleData | ParticipantData | null
+  scrollPosition?: number
+}
+
+const modals: Modal[] = []
+
+/**
+ * Open modal for the corresponding injection by mounting the component and saving it to a variable.
+ * Ignore clicks that used modifier keys or that were not left click.
+ */
+export function openModal(
+  { type = 'title', event = null, injection = null, data = null, scrollPosition = 0 }:
+  { type?: ModalType, event?: MouseEvent | null, injection?: LinkInjection | null, data?: TitleData | ParticipantData | null, scrollPosition?: number } = {}): void {
+  if (event && isHoldingSpecialKey(event)) return
+
+  event?.preventDefault()
+
+  if (modals?.length) closeCurrentModal()
+
+  const target = getPlayPilotWrapperElement()
+  const sharedProps = { initialScrollPosition: scrollPosition }
+  const component = type === 'title' ?
+    mount(TitleModal, { target, props: { title: data as TitleData, ...sharedProps } }) :
+    mount(ParticipantModal, { target, props: { participant: data as ParticipantData, ...sharedProps  } })
+
+  modals.push({ type, injection, data, scrollPosition, component })
+}
+
+/** Unmount the last modal is the list of modals but keep it in the list of active modals */
+export function closeCurrentModal(outro: boolean = true): void {
+  if (!modals.length) return
+
+  saveCurrentModalScrollPosition()
+
+  unmount(modals[modals.length - 1].component, { outro })
+}
+
+/** Unmount the last modal is the list of modals and remove it from the list */
+export function destroyCurrentModal(outro: boolean = true): void {
+  closeCurrentModal(outro)
+
+  modals.pop()
+}
+
+export function destroyAllModals(outro: boolean = true): void {
+  closeCurrentModal(outro)
+
+  while (modals.length > 0) modals.pop()
+}
+
+/** @returns The modal before the currently active modal, if any */
+export function getPreviousModal(): Modal | null {
+  return modals[modals.length - 2] || null
+}
+
+export function goBackToPreviousModal(): void {
+  if (modals.length < 2) return
+
+  destroyCurrentModal()
+
+  // Get the previous modal from the array by removing it, we're re-adding it when calling openModal
+  const previousModal = modals.pop()
+  if (!previousModal) return
+
+  openModal({ ...previousModal })
+}
+
+export function getAllModals(): Modal[] {
+  return modals
+}
+
+function saveCurrentModalScrollPosition(): void {
+  // The scrollable element differs on mobile and desktop.
+  // On desktop you scroll the entire parent but on mobile you scroll the dialog itself.
+  const selector = `[data-playpilot-link-injections] ${window.innerWidth > mobileBreakpoint ? '.modal' : '.dialog'}`
+  const element = document.querySelector(selector)
+
+  if (!element?.scrollTop) return
+
+  modals[modals.length - 1].scrollPosition = element.scrollTop
+}

package/src/lib/playlink.ts

@@ -2,11 +2,14 @@ import type { PlaylinkData } from "./types/playlink"
 
 /**
  * Merge playlinks of the same provider of BUY and RENT categories into a shared TVOD category.
+ * Also remove playlinks without logos, as these are likely sub providers.
  */
 export function mergePlaylinks(playlinks: PlaylinkData[]): PlaylinkData[] {
+  const filtered = playlinks.filter(playlink => !!playlink.logo_url)
+
   let merged: PlaylinkData[] = []
 
-  for (const playlink of playlinks) {
+  for (const playlink of filtered) {
     let newPlaylink = playlink
     const existingPlaylink = merged.find(p => p.name === newPlaylink.name)
 

package/src/lib/splitTest.ts

@@ -1,3 +1,4 @@
+import { hasConsentedTo } from "./consent"
 import { TrackingEvent } from "./enums/TrackingEvent"
 import { track } from "./tracking"
 
@@ -12,6 +13,8 @@ type SplitTest = {
  * The identifier is saved on the window object so that it is consistent across this session.
  */
 export function getSplitTestIdentifier({ key }: SplitTest): number {
+  if (!hasConsentedTo('tracking')) return 0
+
   const windowIdentifier = window.PlayPilotLinkInjections?.split_test_identifiers?.[key]
   if (windowIdentifier) return windowIdentifier
 
@@ -39,6 +42,8 @@ export function getSplitTestVariantName(test: SplitTest): string {
 }
 
 export function isInSplitTestVariant(test: SplitTest, variant = 1): boolean {
+  if (!hasConsentedTo('tracking')) return false
+
   return getSplitTestVariantIndex(test) === variant
 }
 

package/src/lib/tracking.ts

@@ -1,3 +1,4 @@
+import { hasConsentedTo } from "./consent"
 import { mobileBreakpoint } from "./constants"
 import type { TitleData } from "./types/title"
 import { getFullUrlPath } from "./url"
@@ -12,6 +13,8 @@ const baseUrl = 'https://insights.playpilot.net'
  * @param [payload] Any data that will be included with the event
  */
 export async function track(event: string, title: TitleData | null = null, payload: Record<string, any> = {}): Promise<void> {
+  if (!hasConsentedTo('tracking')) return
+
   const headers = new Headers({ 'Content-Type': 'application/json' })
 
   if (title) {

package/src/lib/types/consent.d.ts

@@ -0,0 +1,9 @@
+export type ConsentKeys = 'ads' | 'pixels' | 'tracking' | 'split_tests' | 'affiliate'
+
+export type ConsentOptions = {
+  ads: boolean
+  pixels: boolean
+  tracking: boolean
+  split_tests: boolean
+  affiliate: boolean
+}

package/src/lib/types/participant.d.ts

@@ -0,0 +1,14 @@
+export type ParticipantData = {
+  sid: string
+  name: string
+  birth_date: string
+  death_date: string | null
+  jobs: Job[]
+  image: string | null
+  image_uuid: string | null
+  gender: string
+  character?: string | null
+  bio?: string | null
+}
+
+export type Job = 'actor' | 'writer' | 'director'

package/src/lib/types/script.d.ts

@@ -1,4 +1,5 @@
 import type { Campaign } from "./campaign"
+import type { ConsentOptions } from "./consent"
 import type { LinkInjection } from "./injection"
 
 export type ScriptConfig = {
@@ -14,5 +15,7 @@ export type ScriptConfig = {
   tracked_events?: { event: string, payload: Record<string, any> }[]
   split_test_identifiers?: Record<string, number>
   evaluated_link_injections?: LinkInjection[]
+  require_consent?: boolean
+  consents?: ConsentOptions
   ads?: Campaign[]
 }

package/src/lib/types/title.d.ts

@@ -1,3 +1,4 @@
+import type { ParticipantData } from "./participant"
 import type { PlaylinkData } from "./playlink"
 
 export type TitleData = {
@@ -18,4 +19,5 @@ export type TitleData = {
   original_title: string
   length?: number
   blurb?: string
+  participants?: ParticipantData[]
 }

package/src/main.ts

@@ -2,6 +2,7 @@ import { mount } from 'svelte'
 import App from './routes/+page.svelte'
 import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, getPageText } from '$lib/linkInjection'
 import { getPageMetaData } from '$lib/meta'
+import { setConsent } from '$lib/consent'
 import type { Campaign } from '$lib/types/campaign'
 
 window.PlayPilotLinkInjections = {
@@ -18,9 +19,17 @@ window.PlayPilotLinkInjections = {
   split_test_identifiers: {},
   evaluated_link_injections: [],
   ads: [],
+  require_consent: true,
+  consents: {
+    ads: false,
+    pixels: false,
+    tracking: false,
+    split_tests: false,
+    affiliate: false,
+  },
   app: null,
 
-  initialize(config = { token: '', selector: '', after_article_selector: '', after_article_insert_position: '', language: null, organization_sid: null, domain_sid: null, editorial_token: '' }): void {
+  initialize(config = { token: '', selector: '', after_article_selector: '', after_article_insert_position: '', language: null, organization_sid: null, domain_sid: null, editorial_token: '', require_consent: true }): void {
     if (!config.token) {
       console.error('An API token is required.')
       return
@@ -34,6 +43,17 @@ window.PlayPilotLinkInjections = {
     this.language = config.language
     this.organization_sid = config.organization_sid
     this.domain_sid = config.domain_sid
+    this.require_consent = config.require_consent
+
+    if (!this.require_consent) {
+      setConsent({
+        ads: true,
+        pixels: true,
+        tracking: true,
+        split_tests: true,
+        affiliate: true,
+      })
+    }
 
     if (this.app) this.destroy()
 

package/src/routes/+layout.svelte

@@ -8,9 +8,26 @@
 
   const { children } = $props()
 
-  // This is normally given through window.PlayPilotLinkInjections.initialize({ token: 'some-token' })
-  // @ts-ignore
-  if (browser) window.PlayPilotLinkInjections = { token: 'ZoAL14yqzevMyQiwckbvyetOkeIUeEDN', selector: 'article' }
+  if (browser) {
+    // @ts-ignore
+    // This is normally given through window.PlayPilotLinkInjections.initialize({ token: 'some-token' })
+    window.PlayPilotLinkInjections = { token: 'ZoAL14yqzevMyQiwckbvyetOkeIUeEDN', selector: 'article', require_consent: true }
+
+    // @ts-ignore
+    // Fake tcfapi consent to always be true in development. This way we can write the script assuming consent
+    // windows are standard and we don't have to make exceptions. If we do want actual exceptions they can be
+    // set via the config object using `require_consent`
+    window.__tcfapi = (command, _version, callback) => {
+      if (command !== 'addEventListener') return
+
+      setTimeout(() => callback({
+        purpose: { consents: { 1: true, 2: true, 7: true, 8: true, 9: true, 10: true } },
+        eventStatus: 'tcloaded',
+      }, true), 0)
+
+      return 1
+    }
+  }
 </script>
 
 <title>PlayPilot Link Injections</title>

package/src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount } from 'svelte'
+  import { onDestroy } from 'svelte'
   import { fetchConfig, pollLinkInjections } from '$lib/api'
   import { clearLinkInjections, getLinkInjectionElements, getLinkInjectionsParentElement, getPageText, injectLinksInDocument, separateLinkInjectionTypes } from '$lib/linkInjection'
   import { setTrackingSids, track } from '$lib/tracking'
@@ -12,8 +12,10 @@
   import EditorTrigger from './components/Editorial/EditorTrigger.svelte'
   import Alert from './components/Editorial/Alert.svelte'
   import TrackingPixels from './components/TrackingPixels.svelte'
+  import Consent from './components/Consent.svelte'
   import Debugger from './components/Debugger.svelte'
   import { fetchAds } from '$lib/ads'
+  import ParticipantModal from './components/ParticipantModal.svelte';
 
   let parentElement: HTMLElement | null = $state(null)
   let elements: HTMLElement[] = $state([])
@@ -36,18 +38,18 @@
     if (isEditorialMode && !loading) rerender()
   })
 
-  onMount(() => {
-    if (isCrawler()) return
+  onDestroy(clearLinkInjections)
 
-    (async () => {
-      await initialize()
-      track(TrackingEvent.ArticlePageView)
+  // This function is called when a user has properly consented via tcfapi or if no consent is required.
+  // Both of these options go through the Consent component.
+  async function start() {
+    if (isCrawler()) return
 
-      if (aiInjections.length || manualInjections.length) window.PlayPilotLinkInjections.ads = await fetchAds()
-    })()
+    await initialize()
+    track(TrackingEvent.ArticlePageView)
 
-    return () => clearLinkInjections()
-  })
+    if (aiInjections.length || manualInjections.length) window.PlayPilotLinkInjections.ads = await fetchAds()
+  }
 
   async function initialize(): Promise<void> {
     loading = true
@@ -205,6 +207,8 @@
   <TrackingPixels pixels={response.pixels} />
 {/if}
 
+<Consent onchange={start} />
+
 <style lang="scss">
   @import url('$lib/scss/variables.scss');
   @import url('$lib/scss/global.scss');

package/src/routes/components/Consent.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { setConsent } from '$lib/consent'
+
+  interface Props {
+    onchange: () => void
+  }
+
+  const { onchange }: Props = $props()
+
+  const maxTries = 100
+
+  let currentTry = 1
+
+  listenForConsent()
+
+  function listenForConsent(): void {
+    // If require_consent has been explicitely turned off we return right away and call `onchange`.
+    // We don't need to set consent values as require_consent=false will mean all consent is true.
+    if (window.PlayPilotLinkInjections.require_consent === false) {
+      onchange()
+      return
+    }
+
+    // @ts-ignore
+    if (!window.__tcfapi) {
+      // It could be that the consent script loads after our script. It's not terribly likely since our script is deferred,
+      // but still, it's possible. We retry for a little while to see if the script loads. If it doesn't load after x tries
+      // we assume there is no consent window at all.
+      if (currentTry < maxTries) setTimeout(listenForConsent, 100)
+      currentTry++
+
+      return
+    }
+
+    // @ts-ignore
+    // '2' here is the version of tcfapi
+    window.__tcfapi('addEventListener', 2, (tcData, success) => {
+      if (!success) return
+
+      const { purpose, eventStatus } = tcData
+
+      if (eventStatus !== 'tcloaded' && eventStatus !== 'useractioncomplete') return
+
+      // Consent is given as a list of ids, each id giving consent for a certain type of data.
+      // We don't use most of these, but for future reference:
+      // 1	 Store and/or access information on a device
+      // 2	 Basic ads
+      // 3	 Create a personalised ads profile
+      // 4	 Select personalised ads
+      // 5	 Create a personalised content profile
+      // 6	 Select personalised content
+      // 7	 Measure ad performance (impressions, clicks, conversions)
+      // 8	 Measure content performance (engagement, viewability)
+      // 9	 Apply market research to generate audience insights
+      // 10  Develop and improve products (Split tests, feature measurement)
+      // 11  Ensure security, prevent fraud, and debug (bot detection, fraud prevention)
+      // When there's overlap or ambiguity we select all possibly relevant categories
+
+      const consent = (id: number) => purpose.consents[id] === true
+
+      setConsent({
+        ads: consent(1),
+        pixels: consent(1) && consent(7),
+        split_tests: consent(9) && consent(10),
+        tracking: consent(7) && consent(8),
+        affiliate: consent(1) && consent(7),
+      })
+
+      onchange()
+    })
+  }
+</script>

package/src/routes/components/Icons/IconArrow.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  interface Props {
+    direction?: 'left' | 'right'
+  }
+
+  const { direction = 'right' }: Props = $props()
+</script>
+
+<svg class="{direction}" height="16px" viewBox="0 -960 960 960" width="16px">
+  <path d="m288-96-68-68 316-316-316-316 68-68 384 384L288-96Z" fill="currentColor" />
+</svg>
+
+<style lang="scss">
+  .right {
+    margin-left: margin(0.125);
+  }
+
+  .left {
+    margin-right: margin(0.125);
+    transform: rotate(180deg);
+  }
+</style>

package/src/routes/components/Icons/IconClose.svelte

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-  <path d="M14 2L2 14M2 2L14 14" stroke="currentColor" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M14 2L2 14M2 2L14 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>