@widgetic/design-system 0.5.22 → 0.5.24

package/dist/components/CopyableHeader.svelte

@@ -2,467 +2,279 @@
 /**
  * CopyableHeader Component
  * 
- * A reusable header component for displaying content that can be copied to clipboard:
- * - One-click copy functionality with visual feedback
- * - Optional help icon with tooltip
- * - Configurable header text and content
- * - Consistent styling with the design system
+ * Figma: Embed Code Header (title row, code card, help row — no drag handle).
+ * Displays copyable content with icon or text copy control, loading/error card states, optional help link row.
  * 
  * Usage:
  * ```svelte
  * <CopyableHeader
  *   headerText="Embed code"
  *   content="<widgetic id='123' width='350' height='50'></widgetic>"
- *   helpText="Read more about embedding"
+ *   helpPrompt="Not sure how embedding works?"
+ *   helpText="Learn more"
  *   helpUrl="/embed"
  * />
  * ```
  *
- * The words of the pop-up that says whether the copy worked are props too (`copiedTitle`, `copiedDescription`,
- * `copyFailedTitle`, `copyFailedDescription`), so a page in another language can give them. A page that shows its own pop-up
- * on the `copy` and `copyError` events passes `showInternalToast={false}` instead.
+ * Toast copy strings are props (`copiedTitle`, `copiedDescription`, …). Pass `showInternalToast={false}` when the host shows toasts on `copy` / `copyError`.
  */
  -->
 <script lang="ts">
-/**
- * SVELTE IMPORTS
- */
-import { createEventDispatcher } from 'svelte';
-
-const dispatch = createEventDispatcher();
-
-/**
- * COMPONENT IMPORTS
- */
-// import { toast, Button, Tooltip, Portal } from '@widgetic/design-system/components';
-import { toast, Button, Tooltip, Portal } from './';
-import { IconCopy, IconHelp } from '@tabler/icons-svelte';
-import { sideAtEnd, sideAtStart, useTextDirection } from './textDirection.js';
-
-// The pop-ups open on a side of the screen, and the sides at the start and at the end of the line trade places on a right to left one.
-const textDirection = useTextDirection();
-
-/**
- * COMPONENT PROPS
- */
-let className = '';
-export { className as class };
-export let style = '';
-export let headerText = 'Copy content';
-export let content = '';
-export let helpText = 'Learn more';
-export let helpUrl = '';
-export let showHelp = true;
-export let monospaceContent = true;
-export let showStandaloneCopyButton = false;
-export let standaloneCopyButtonText = '';
-/** The pop-up after a copy that worked: its title and the line under it. */
-export let copiedTitle = 'Copied to clipboard';
-export let copiedDescription = 'Content copied successfully.';
-/** The pop-up after a copy that failed: its title and the line under it. */
-export let copyFailedTitle = 'Copy failed';
-export let copyFailedDescription = 'Please try manual selection';
-export let showButtonText = true;
-export let buttonClass = '';
-export let showInternalToast = true;
-export let headerTextClass = '';
-export let headerBackgroundColor = '';
-export let contentBorderColor = '';
-
-/**
- * LOCAL VARIABLES
- */
-let mouseX = 0;
-let mouseY = 0;
-let showHelpTooltip = false;
-let showCopyTooltip = false;
-let tooltipDebounce = false;
-let contentElement: HTMLDivElement | null = null;
-
-/**
- * MOUSE EVENTS HANDLERS
- */
-function handleMouseEnter(event: MouseEvent) {
-  if (tooltipDebounce) return;
-  mouseX = event.clientX;
-  mouseY = event.clientY;
-  showHelpTooltip = true;
-}
-
-function handleCopyMouseEnter(event: MouseEvent) {
-  if (tooltipDebounce) return;
-  mouseX = event.clientX;
-  mouseY = event.clientY;
-  showCopyTooltip = true;
-}
-
-function handleMouseMove(event: MouseEvent) {
-  mouseX = event.clientX;
-  mouseY = event.clientY;
-}
-
-function handleMouseLeave() {
-  showHelpTooltip = false;
-}
-
-function handleCopyMouseLeave() {
-  showCopyTooltip = false;
-}
-
-function setTooltipDebounce() {
-  tooltipDebounce = true;
-  setTimeout(() => {
-    tooltipDebounce = false;
-  }, 500); // Prevent tooltips from showing for 500ms after clicking
-}
-
-/**
- * Clipboard Interaction Handlers
- * Provides copy functionality via the copy button
- * with visual feedback via toast notifications
- */
-async function handleCopyButtonClick(e: MouseEvent) {
-  e.preventDefault();
-  e.stopPropagation();
-  
-  // Immediately hide the tooltip to prevent flickering
-  showCopyTooltip = false;
-  setTooltipDebounce();
-  
-  // Select all text in content element
-  if (contentElement) {
-    const selection = window.getSelection();
-    const range = document.createRange();
-    range.selectNodeContents(contentElement);
-    selection?.removeAllRanges();
-    selection?.addRange(range);
-  }
-  
-  try {
-    await navigator.clipboard.writeText(content);
-    if (showInternalToast) {
-      showToast('success', copiedTitle, {
-        description: copiedDescription,
-      });
-    }
-    dispatch('copy', { content });
-  } catch (err) {
-    if (showInternalToast) {
-      showToast('error', copyFailedTitle, {
-        description: copyFailedDescription,
-      });
-    }
-    dispatch('copyError', { error: err });
-  }
-}
-
-// Toast helper function
-let isToastVisible = false;
-
-function showToast(type: 'success' | 'error', message: string, options = {}) {
-  if (isToastVisible) return;
-  
-  isToastVisible = true;
-  toast[type](message, {
-    ...options,
-    duration: 5000,
-    unstyled: true,
-    classes: {
-      toast: 'copyable-header-toast flex items-center gap-3',
-      title: 'copyable-header-toast-title',
-      description: 'copyable-header-toast-description',
-      closeButton: 'copyable-header-toast-close-button'
-    },
-    onAutoClose: () => {
-      isToastVisible = false;
-    },
-    onDismiss: () => {
-      isToastVisible = false;
-    }
-  });
-}
+	import { createEventDispatcher, onDestroy } from 'svelte';
+	import { toast, Button, Tooltip, Portal, IconButton, Link, Skeleton } from './';
+	import { cn } from '../utils.js';
+	import { IconCopy, IconCheck, IconAlertTriangle } from '@tabler/icons-svelte';
+	import { sideAtStart, useTextDirection } from './textDirection.js';
+
+	const dispatch = createEventDispatcher();
+	const textDirection = useTextDirection();
+	type TriggerChildProps = { props: Record<string, unknown> & { class?: string } };
+
+	let className = '';
+	export { className as class };
+	export let style = '';
+	export let headerText = 'Copy content';
+	export let content = '';
+	export let helpText = 'Learn more';
+	export let helpUrl = '';
+	export let helpPrompt = '';
+	export let helpLinkAria = '';
+	export let showHelp = true;
+	export let monospaceContent = true;
+	export let showStandaloneCopyButton = false;
+	export let standaloneCopyButtonText = '';
+	export let copiedTitle = 'Copied to clipboard';
+	export let copiedDescription = 'Content copied successfully.';
+	export let copyFailedTitle = 'Copy failed';
+	export let copyFailedDescription = 'Please try manual selection';
+	export let showButtonText = true;
+	export let buttonClass = '';
+	export let showInternalToast = true;
+	export let headerTextClass = '';
+	export let headerBackgroundColor = '';
+	export let contentBorderColor = '';
+	export let loading = false;
+	export let errorTitle = '';
+	export let errorDetail = '';
+
+	let showCopyTooltip = false;
+	let tooltipDebounce = false;
+	let contentElement: HTMLDivElement | null = null;
+	let copied = false;
+	let copiedTimeout: ReturnType<typeof setTimeout> | undefined;
+	let isToastVisible = false;
+
+	$: showHelpRow = showHelp && !!helpUrl && (!!helpPrompt || !!helpText);
+
+	onDestroy(() => {
+		if (copiedTimeout) clearTimeout(copiedTimeout);
+	});
+
+	function setTooltipDebounce() {
+		tooltipDebounce = true;
+		setTimeout(() => {
+			tooltipDebounce = false;
+		}, 500);
+	}
+
+	async function handleCopyButtonClick(e: MouseEvent) {
+		e.preventDefault();
+		e.stopPropagation();
+		showCopyTooltip = false;
+		setTooltipDebounce();
+
+		if (contentElement) {
+			const selection = window.getSelection();
+			const range = document.createRange();
+			range.selectNodeContents(contentElement);
+			selection?.removeAllRanges();
+			selection?.addRange(range);
+		}
+
+		try {
+			await navigator.clipboard.writeText(content);
+			copied = true;
+			if (copiedTimeout) clearTimeout(copiedTimeout);
+			copiedTimeout = setTimeout(() => {
+				copied = false;
+			}, 2000);
+			if (showInternalToast) {
+				showToast('success', copiedTitle, {
+					description: copiedDescription
+				});
+			}
+			dispatch('copy', { content });
+		} catch (err) {
+			if (showInternalToast) {
+				showToast('error', copyFailedTitle, {
+					description: copyFailedDescription
+				});
+			}
+			dispatch('copyError', { error: err });
+		}
+	}
+
+	function showToast(type: 'success' | 'error', message: string, options = {}) {
+		if (isToastVisible) return;
+		isToastVisible = true;
+		toast[type](message, {
+			...options,
+			duration: 5000,
+			onAutoClose: () => {
+				isToastVisible = false;
+			},
+			onDismiss: () => {
+				isToastVisible = false;
+			}
+		});
+	}
 </script>
 
-<!-- Header Container -->
-<div 
-  class="{className ? className + ' ' : ''}copyable-header-container
-        w-full {headerBackgroundColor || 'bg-[hsl(var(--grey2))]'} widgetic-colors widgetic-radius"
-  style="z-index: 102; position: relative; {style}"
->
-  <!-- Header with Title and Copy Button -->
-  <div 
-    class="copyable-header w-full flex flex-col justify-center gap-[16px] relative"
-    style="
-      padding: 8px 24px 0px 24px;
-      z-index: 102;
-    "
-  >
-    <!-- Header Text and Copy Button -->
-    <div class="flex justify-between items-center">
-      <div class="flex items-center gap-2">
-        <div class="{headerTextClass || 'body-medium text-[hsl(var(--grey7))]'}">{headerText}</div>
-        {#if showHelp && helpUrl}
-          <Tooltip.Provider>
-            <Tooltip.Root open={showHelpTooltip}>
-              <Tooltip.Trigger class="focus:outline-hidden">
-                <a 
-                  href={helpUrl} 
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  role="button"
-                  tabindex="0"
-                  class="inline-flex items-center justify-center w-6 h-6 cursor-pointer"
-                  onmouseenter={handleMouseEnter}
-                  onmousemove={handleMouseMove}
-                  onmouseleave={handleMouseLeave}
-                  onmousedown={() => {
-                    showHelpTooltip = false;
-                    setTooltipDebounce();
-                  }}
-                  onclick={(e) => {
-                    e.preventDefault();
-                    window.open(helpUrl, '_blank', 'noopener,noreferrer');
-                  }}
-                >
-                  <IconHelp class="w-5 h-5 text-[hsl(var(--grey5))] hover:text-[hsl(var(--deep-forest-green))] transition-colors duration-200" />
-                </a>
-              </Tooltip.Trigger>
-              
-              {#if showHelpTooltip}
-                <Portal target="editor-tooltips">
-                  <Tooltip.Content 
-                    side={sideAtEnd($textDirection)} 
-                    sideOffset={5}
-                    class="bg-[hsl(var(--dark))] text-white z-200000 overflow-hidden rounded-md px-2 py-1.5 shadow-md widgetic-colors widgetic-radius"
-                  >
-                    <p class="caption text-white">{helpText}</p>
-                  </Tooltip.Content>
-                </Portal>
-              {/if}
-            </Tooltip.Root>
-          </Tooltip.Provider>
-        {/if}
-      </div>
-      {#if showStandaloneCopyButton}
-        <Tooltip.Provider>
-          <Tooltip.Root open={showCopyTooltip}>
-            <Tooltip.Trigger class="focus:outline-hidden">
-              <Button 
-                variant="default" 
-                class="h-9 w-6 {headerBackgroundColor ? headerBackgroundColor + ' text-[hsl(var(--grey7))]' : buttonClass || 'bg-[hsl(var(--dark))] hover:bg-white text-white rounded-full'} flex items-center justify-center active:scale-95 transition-transform duration-150"
-                onclick={handleCopyButtonClick}
-                onmouseenter={handleCopyMouseEnter}
-                onmousemove={handleMouseMove}
-                onmouseleave={handleCopyMouseLeave}
-                onmousedown={() => {
-                  showCopyTooltip = false;
-                  setTooltipDebounce();
-                }}
-              >
-                <IconCopy class="w-5 h-5" style="width: 20px !important; height: 20px !important;" />
-                {#if showButtonText}
-                  <span class="ms-2">{standaloneCopyButtonText}</span>
-                {/if}
-              </Button>
-            </Tooltip.Trigger>
-            
-            {#if showCopyTooltip}
-              <Portal target="editor-tooltips">
-                <Tooltip.Content 
-                  side={sideAtStart($textDirection)} 
-                  sideOffset={5}
-                  class="bg-[hsl(var(--dark))] text-white z-200000 overflow-hidden rounded-md px-3 py-1.5 shadow-md widgetic-colors widgetic-radius"
-                >
-                  <p class="caption text-white">{standaloneCopyButtonText}</p>
-                </Tooltip.Content>
-              </Portal>
-            {/if}
-          </Tooltip.Root>
-        </Tooltip.Provider>
-      {:else}
-        <Tooltip.Provider>
-          <Tooltip.Root open={showCopyTooltip}>
-            <Tooltip.Trigger class="focus:outline-hidden">
-              <Button 
-                variant="ghost" 
-                size="icon"
-                class="h-10 w-10 {headerBackgroundColor ? headerBackgroundColor : 'hover:bg-white'} active:scale-95 transition-transform duration-150 me-[-4px]"
-                onclick={handleCopyButtonClick}
-                onmouseenter={handleCopyMouseEnter}
-                onmousemove={handleMouseMove}
-                onmouseleave={handleCopyMouseLeave}
-                onmousedown={() => {
-                  showCopyTooltip = false;
-                  setTooltipDebounce();
-                }}
-                aria-label={standaloneCopyButtonText}
-              >
-                <IconCopy 
-                  class="w-[20px] h-[20px] transition-colors duration-300 text-[hsl(var(--grey5))] hover:text-[hsl(var(--grey7))]"
-                  style="width: 20px !important; height: 20px !important;"
-                />
-              </Button>
-            </Tooltip.Trigger>
-            
-            {#if showCopyTooltip}
-              <Portal target="editor-tooltips">
-                <Tooltip.Content 
-                  side={sideAtStart($textDirection)} 
-                  sideOffset={5}
-                  class="bg-[hsl(var(--dark))] text-white z-200000 overflow-hidden rounded-md px-3 py-1.5 shadow-md widgetic-colors widgetic-radius"
-                >
-                  <p class="caption text-white">{standaloneCopyButtonText}</p>
-                </Tooltip.Content>
-              </Portal>
-            {/if}
-          </Tooltip.Root>
-        </Tooltip.Provider>
-      {/if}
-    </div>
-  </div>
-
-  <!-- Content Area -->
-  <div class="px-6 pb-6">
-    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-    <div 
-      bind:this={contentElement}
-      class="copyable-content-area text-[14px] w-full text-start bg-white relative {monospaceContent ? 'font-mono' : ''}"
-      style="
-        padding: 16px;
-        min-height: 80px;
-        max-height: 141px;
-        z-index: 101;
-        line-height: 1.5;
-        border: 1px solid {contentBorderColor || 'hsl(var(--grey2))'};
-        border-radius: var(--radius-small);
-        margin: 0 -2px -2px -2px;
-        width: calc(100% + 4px);
-        cursor: text;
-        white-space: pre-wrap;
-        word-break: break-all;
-        overflow-wrap: anywhere;
-        overflow-y: auto;
-      "
-      tabindex="0"
-    >
-      {content}
-    </div>
-  </div>
+<div class={cn('copyable-header flex w-full flex-col gap-3', className)} {style}>
+	<!-- Title row: section label + copy control (Figma 32px). -->
+	<div class={cn('flex h-8 items-center justify-between gap-3', headerBackgroundColor)}>
+		<div class={cn('text-heading-section text-foreground min-w-0 truncate', headerTextClass)}>
+			{headerText}
+		</div>
+
+		{#if showStandaloneCopyButton}
+			<Tooltip.Provider>
+				<Tooltip.Root open={showCopyTooltip}>
+					<Tooltip.Trigger>
+						{#snippet child({ props }: TriggerChildProps)}
+							<Button
+								{...props}
+								variant="default"
+								class={cn(buttonClass, props.class)}
+								onclick={handleCopyButtonClick}
+								onmouseenter={() => {
+									if (!tooltipDebounce) showCopyTooltip = true;
+								}}
+								onmouseleave={() => {
+									showCopyTooltip = false;
+								}}
+								onmousedown={() => {
+									showCopyTooltip = false;
+									setTooltipDebounce();
+								}}
+							>
+								{#if copied}
+									<IconCheck class="size-4 stroke-[1.333]" />
+								{:else}
+									<IconCopy class="size-4 stroke-[1.333]" />
+								{/if}
+								{#if showButtonText}
+									<span class="ms-2">{standaloneCopyButtonText}</span>
+								{/if}
+							</Button>
+						{/snippet}
+					</Tooltip.Trigger>
+					{#if showCopyTooltip}
+						<Portal target="editor-tooltips">
+							<Tooltip.Content side={sideAtStart($textDirection)} sideOffset={5}>
+								<p class="text-caption">{standaloneCopyButtonText}</p>
+							</Tooltip.Content>
+						</Portal>
+					{/if}
+				</Tooltip.Root>
+			</Tooltip.Provider>
+		{:else}
+			<Tooltip.Provider>
+				<Tooltip.Root open={showCopyTooltip}>
+					<Tooltip.Trigger>
+						{#snippet child({ props }: TriggerChildProps)}
+							<IconButton
+								{...props}
+								variant={copied ? 'accent' : 'ghost'}
+								label={standaloneCopyButtonText || 'Copy'}
+								class={cn(headerBackgroundColor, props.class)}
+								onclick={handleCopyButtonClick}
+								onmouseenter={() => {
+									if (!tooltipDebounce) showCopyTooltip = true;
+								}}
+								onmouseleave={() => {
+									showCopyTooltip = false;
+								}}
+								onmousedown={() => {
+									showCopyTooltip = false;
+									setTooltipDebounce();
+								}}
+							>
+								{#if copied}
+									<IconCheck class="size-4 stroke-[1.333]" />
+								{:else}
+									<IconCopy class="text-muted-foreground size-4 stroke-[1.333]" />
+								{/if}
+							</IconButton>
+						{/snippet}
+					</Tooltip.Trigger>
+					{#if showCopyTooltip && standaloneCopyButtonText}
+						<Portal target="editor-tooltips">
+							<Tooltip.Content side={sideAtStart($textDirection)} sideOffset={5}>
+								<p class="text-caption">{standaloneCopyButtonText}</p>
+							</Tooltip.Content>
+						</Portal>
+					{/if}
+				</Tooltip.Root>
+			</Tooltip.Provider>
+		{/if}
+	</div>
+
+	<!-- Code card: accent surface; loading skeleton, error, or selectable snippet. -->
+	<div
+		class={cn(
+			'bg-accent flex flex-col gap-2 rounded-xl p-3',
+			contentBorderColor && 'border-border border'
+		)}
+		style={contentBorderColor && !contentBorderColor.startsWith('border')
+			? `border-color: ${contentBorderColor};`
+			: undefined}
+	>
+		{#if loading}
+			<div class="flex flex-col gap-2" aria-busy="true">
+				<Skeleton class="bg-border h-4 w-full" />
+				<Skeleton class="bg-border h-4 w-full" />
+				<Skeleton class="bg-border h-4 w-40" />
+			</div>
+		{:else if errorTitle}
+			<div class="flex flex-col items-center gap-2 py-2 text-center">
+				<div class="bg-destructive/10 flex size-10 items-center justify-center rounded-lg">
+					<IconAlertTriangle class="text-destructive size-4 stroke-[1.333]" aria-hidden="true" />
+				</div>
+				<p class="text-body-medium text-foreground">{errorTitle}</p>
+				{#if errorDetail}
+					<p class="text-caption text-muted-foreground font-mono">{errorDetail}</p>
+				{/if}
+			</div>
+		{:else}
+			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+			<div
+				bind:this={contentElement}
+				class={cn(
+					'text-code text-foreground max-h-36 w-full cursor-text overflow-y-auto text-start break-all whitespace-pre-wrap',
+					monospaceContent ? '' : 'text-body'
+				)}
+				tabindex="0"
+			>
+				{content}
+			</div>
+		{/if}
+	</div>
+
+	{#if showHelpRow}
+		<div class="flex flex-wrap items-center gap-1">
+			{#if helpPrompt}
+				<span class="text-caption text-muted-foreground">{helpPrompt}</span>
+			{/if}
+			<Link
+				href={helpUrl}
+				label={helpText}
+				size="small"
+				class="underline"
+				aria-label={helpLinkAria || helpText}
+				target="_blank"
+				rel="noopener noreferrer"
+			/>
+		</div>
+	{/if}
 </div>
-
-<style>
-  /* Style for the content area */
-  .copyable-content-area {
-    -webkit-user-select: text !important;
-    -moz-user-select: text !important;
-    -ms-user-select: text !important;
-    user-select: text !important;
-    overflow-y: auto !important;
-  }
-
-  .copyable-content-area::selection {
-    background-color: rgba(59, 130, 246, 0.2) !important;
-    color: inherit !important;
-  }
-
-  .copyable-content-area::-moz-selection {
-    background-color: rgba(59, 130, 246, 0.2) !important;
-    color: inherit !important;
-  }
-
-  /* Help icon hover styles */
-  :global(.copyable-header-container .w-6.h-6) {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    border-radius: 50% !important;
-    transition: background-color 0.2s ease !important;
-  }
-
-  /* Removed the hover background effect for the help icon */
-  /* :global(.copyable-header-container .w-6.h-6:hover) {
-    background-color: rgba(255, 255, 255, 0.5) !important;
-  } */
-
-  /* Button Press Effect */
-  :global(.copyable-header button) {
-    transition: transform 0.15s ease, background-color 0.1s ease;
-  }
-
-  /* Add hover styles for the standalone copy button */
-  :global(.copyable-header-container button[variant="default"]:hover) {
-    background-color: white !important;
-    color: hsl(var(--grey7)) !important;
-  }
-
-  /* Prevent hover background change for buttons with custom header background */
-  :global(.copyable-header-container button[class*="bg-"]:hover) {
-    background-color: inherit !important;
-  }
-
-  /* Add active scale effect for all buttons */
-  :global(.copyable-header button:active) {
-    transform: scale(0.95);
-  }
-
-  /** TOASTER STYLES **/
-  /* Toaster Positioning */
-  :global(.copyable-header-toast) {
-    position: fixed !important;
-    bottom: 20px !important;
-    inset-inline-end: 20px !important;
-    top: auto !important;
-    display: flex !important;
-    align-items: center !important;
-    gap: 12px !important;
-    padding: 16px 24px !important;
-    background: white !important;
-    border-radius: var(--radius-small) !important;
-    box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.1) !important;
-  }
-
-  /* Icon container */
-  :global(.copyable-header-toast [data-icon]) {
-    order: -1 !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    margin: 0 !important;
-  }
-
-  /* Text container */
-  :global(.copyable-header-toast [data-content]) {
-    display: flex !important;
-    flex-direction: column !important;
-    gap: 4px !important;
-    margin: 0 !important;
-  }
-
-  /* Toaster title */
-  .copyable-header-toast-title {
-    font-size: var(--h6) !important;
-    color: hsl(var(--forest)) !important;
-    font-weight: 600 !important;
-  }
-
-  /* Toaster description */
-  .copyable-header-toast-description {
-    font-size: var(--caption) !important;
-    color: hsl(var(--grey3)) !important;
-  }
-
-  /* Toaster close button */
-  :global(.copyable-header-toast-close-button) {
-    background: hsl(var(--grey7)) !important;
-    border: 1px solid hsl(var(--grey5)) !important;
-  }
-
-  :global(.copyable-header-toast-close-button:hover) {
-    background: hsl(var(--dark)) !important;
-    border: 1px solid hsl(var(--grey5)) !important;
-  }
-
-  :global(.copyable-header-toast-close-button svg) {
-    color: white !important;
-  }
-</style>