negodesign 0.0.1 → 0.0.3

package/dist/components/pages/login/{admin/01 → 01}/ui/LeftHero.svelte

@@ -1,105 +1,105 @@
-<script lang="ts">
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
-  import type { CarouselProps } from "../../../../../core/carousel/data/CarouselModel";
-  import type { Snippet } from "svelte";
-  import Button from "../../../../../ui/button/button.svelte";
-
-  type Props = {
-    title?: string | Snippet;
-    variant?: "NUMBER" | "DOT";
-    autoPlayInterval?: number;
-  };
-
-  let {
-    title,
-    items = [],
-    variant = "DOT",
-    autoPlayInterval = 5000,
-  }: Props & CarouselProps = $props();
-
-  let currentIndex = $state(0);
-  let currentItem = $derived(items[currentIndex] ?? items[0]);
-
-  function goTo(index: number) {
-    currentIndex = index;
-  }
-
-  function next() {
-    if (items.length === 0) return;
-    currentIndex = (currentIndex + 1) % items.length;
-  }
-
-  $effect(() => {
-    if (items.length <= 1) return;
-    const timer = setInterval(next, autoPlayInterval);
-    return () => clearInterval(timer);
-  });
-</script>
-
-<div
-  class="relative flex flex-col justify-between overflow-hidden h-screen p-8 bg-gradient-left text-white"
->
-  <div class="flex items-center gap-2">
-    <div class="font-bold text-xl tracking-wider flex items-center gap-2">
-      {#if typeof title === "function"}
-        {@render title()}
-      {:else}
-        {title || ""}
-      {/if}
-    </div>
-  </div>
-
-  <section class="flex flex-col gap-5">
-    <div class="my-auto max-w-sm md:max-w-md">
-      {#if currentItem}
-        {#key currentIndex}
-          <div
-            class="text-xl md:text-2xl font-bold tracking-tight mb-4 leading-tight animate-in fade-in duration-300"
-          >
-            {currentItem.title}
-          </div>
-          <p
-            class=" text-sm mb-6 leading-relaxed animate-in fade-in duration-300"
-          >
-            {currentItem.description}
-          </p>
-        {/key}
-        <Button
-          variant="outline"
-          class="inline-flex items-center gap-2 text-sm font-semibold bg-primary"
-        >
-          {currentItem.buttonText}
-          <HugeiconsIcon icon={ArrowRight01Icon} size={16} />
-        </Button>
-      {/if}
-    </div>
-
-    <div class="flex items-center gap-2 mb-2">
-      {#each items as it, i (it.title)}
-        <button
-          type="button"
-          onclick={() => goTo(i)}
-          aria-label={`Ir para o item ${i + 1}`}
-          aria-current={currentIndex === i}
-          class="transition-all duration-300 focus:outline-none flex items-center justify-center {currentIndex ===
-          i
-            ? 'opacity-100 scale-110'
-            : 'opacity-50 hover:opacity-75'}"
-        >
-          {#if variant === "NUMBER"}
-            <span
-              class="w-6 h-6 text-xs font-semibold rounded-full text-primary flex items-center justify-center"
-            >
-              {i + 1}
-            </span>
-          {:else}
-            <span class="w-2 h-2 rounded-full bg-white"></span>
-          {/if}
-        </button>
-      {/each}
-    </div>
-  </section>
-</div>
-
-<aside class="absolute grid-pattern p-0 top-0 h-screen w-8/12"></aside>
+<script lang="ts">
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
+  import type { CarouselProps } from "../../../../core/carousel/data/CarouselModel";
+  import type { Snippet } from "svelte";
+  import Button from "../../../../ui/button/button.svelte";
+
+  type Props = {
+    title?: string | Snippet;
+    variant?: "NUMBER" | "DOT";
+    autoPlayInterval?: number;
+  };
+
+  let {
+    title,
+    items = [],
+    variant = "DOT",
+    autoPlayInterval = 5000,
+  }: Props & CarouselProps = $props();
+
+  let currentIndex = $state(0);
+  let currentItem = $derived(items[currentIndex] ?? items[0]);
+
+  function goTo(index: number) {
+    currentIndex = index;
+  }
+
+  function next() {
+    if (items.length === 0) return;
+    currentIndex = (currentIndex + 1) % items.length;
+  }
+
+  $effect(() => {
+    if (items.length <= 1) return;
+    const timer = setInterval(next, autoPlayInterval);
+    return () => clearInterval(timer);
+  });
+</script>
+
+<div
+  class="relative flex flex-col justify-between overflow-hidden h-screen p-8 bg-gradient-left text-white"
+>
+  <div class="flex items-center gap-2">
+    <div class="font-bold text-xl tracking-wider flex items-center gap-2">
+      {#if typeof title === "function"}
+        {@render title()}
+      {:else}
+        {title || ""}
+      {/if}
+    </div>
+  </div>
+
+  <section class="flex flex-col gap-5">
+    <div class="my-auto max-w-sm md:max-w-md">
+      {#if currentItem}
+        {#key currentIndex}
+          <div
+            class="text-xl md:text-2xl font-bold tracking-tight mb-4 leading-tight animate-in fade-in duration-300"
+          >
+            {currentItem.title}
+          </div>
+          <p
+            class=" text-sm mb-6 leading-relaxed animate-in fade-in duration-300"
+          >
+            {currentItem.description}
+          </p>
+        {/key}
+        <Button
+          variant="outline"
+          class="inline-flex items-center gap-2 text-sm font-semibold bg-primary"
+        >
+          {currentItem.buttonText}
+          <HugeiconsIcon icon={ArrowRight01Icon} size={16} />
+        </Button>
+      {/if}
+    </div>
+
+    <div class="flex items-center gap-2 mb-2">
+      {#each items as it, i (it.title)}
+        <button
+          type="button"
+          onclick={() => goTo(i)}
+          aria-label={`Ir para o item ${i + 1}`}
+          aria-current={currentIndex === i}
+          class="transition-all duration-300 focus:outline-none flex items-center justify-center {currentIndex ===
+          i
+            ? 'opacity-100 scale-110'
+            : 'opacity-50 hover:opacity-75'}"
+        >
+          {#if variant === "NUMBER"}
+            <span
+              class="w-6 h-6 text-xs font-semibold rounded-full text-primary flex items-center justify-center"
+            >
+              {i + 1}
+            </span>
+          {:else}
+            <span class="w-2 h-2 rounded-full bg-white"></span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  </section>
+</div>
+
+<aside class="absolute grid-pattern p-0 top-0 h-screen w-8/12"></aside>

package/dist/components/pages/login/{admin/01 → 01}/ui/LeftHero.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CarouselProps } from "../../../../../core/carousel/data/CarouselModel";
+import type { CarouselProps } from "../../../../core/carousel/data/CarouselModel";
 import type { Snippet } from "svelte";
 type Props = {
     title?: string | Snippet;

package/dist/components/pages/login/01/ui/PageLogin01.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import AuthCard from "./AuthCard.svelte";
+  import LeftHero from "./LeftHero.svelte";
+  import type { PageLoginProps } from "../data/page-props";
+
+  /**
+   * Variante 01 da página de login.
+   * Layout split: hero à esquerda, auth card à direita.
+   * @property {CarouselItem[]} carousel - Itens do carousel
+   * @property {string} title - Título do hero
+   * @property {AuthFormType} formType - Tipo do form de login
+   * @property {LinkProps} privacyPolicy - Config do link de privacidade
+   * @property {LinkProps} termsOfService - Config do link de termos
+   */
+  let {
+    carousel,
+    varient,
+    title,
+    formType,
+    children,
+    privacyPolicy,
+    termsOfService,
+  }: PageLoginProps = $props();
+</script>
+
+<main class="h-screen w-screen flex items-center">
+  <div class="hidden md:block md:w-8/12">
+    <LeftHero {title} varient={varient ?? "POINTER"} items={carousel ?? []} />
+  </div>
+  <div class="w-full md:px-0 md:w-4/12 border-gray-900">
+    {#if children}
+      {@render children()}
+    {:else}
+      <AuthCard {formType} {privacyPolicy} {termsOfService} />
+    {/if}
+  </div>
+</main>
+
+<style>
+  :global(.grid-pattern) {
+    background-size: 40px 40px;
+    background-image: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0.1) 1px,
+        transparent 1px
+      ),
+      linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+  }
+</style>

package/dist/components/pages/login/01/ui/PageLogin01.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { PageLoginProps } from "../data/page-props";
+declare const PageLogin01: import("svelte").Component<PageLoginProps, {}, "">;
+type PageLogin01 = ReturnType<typeof PageLogin01>;
+export default PageLogin01;

package/dist/components/pages/login/PageLogin.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { PageLoginProps } from "./01/data/page-props";
+  import PageLogin01 from "./01/ui/PageLogin01.svelte";
+
+  /**
+   * Página de login principal.
+   * @property {"01"} varient - Variante do layout de login
+   * @property {CarouselItem[]} carousel - Itens do carousel hero
+   * @property {string} title - Título do hero
+   * @property {AuthFormType} formType - Tipo do form (EMAIL_PASSWORD, USERNAME_PASSWORD, PHONE_PASSWORD)
+   * @property {LinkProps} privacyPolicy - Config do link de política de privacidade
+   * @property {LinkProps} termsOfService - Config do link de termos de serviço
+   */
+  type Props = {
+    varient?: "01";
+  };
+
+  let { ...props }: PageLoginProps & Props = $props();
+</script>
+
+<PageLogin01 {...props} />

package/dist/components/pages/login/PageLogin.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { PageLoginProps } from "./01/data/page-props";
+/**
+ * Página de login principal.
+ * @property {"01"} varient - Variante do layout de login
+ * @property {CarouselItem[]} carousel - Itens do carousel hero
+ * @property {string} title - Título do hero
+ * @property {AuthFormType} formType - Tipo do form (EMAIL_PASSWORD, USERNAME_PASSWORD, PHONE_PASSWORD)
+ * @property {LinkProps} privacyPolicy - Config do link de política de privacidade
+ * @property {LinkProps} termsOfService - Config do link de termos de serviço
+ */
+type Props = {
+    varient?: "01";
+};
+type $$ComponentProps = PageLoginProps & Props;
+declare const PageLogin: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageLogin = ReturnType<typeof PageLogin>;
+export default PageLogin;

package/dist/components/ui/badge/badge.svelte

@@ -1,49 +1,49 @@
-<script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
-
-	export const badgeVariants = tv({
-		base: "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none",
-		variants: {
-			variant: {
-				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-				secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-				destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
-				outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30",
-				ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-				link: "text-primary underline-offset-4 hover:underline",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	});
-
-	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
-</script>
-
-<script lang="ts">
-	import type { HTMLAnchorAttributes } from "svelte/elements";
-	import { cn, type WithElementRef } from "../../../utils.js";
-
-	let {
-		ref = $bindable(null),
-		href,
-		class: className,
-		variant = "default",
-		children,
-		...restProps
-	}: WithElementRef<HTMLAnchorAttributes> & {
-		variant?: BadgeVariant;
-	} = $props();
-</script>
-
-<svelte:element
-	this={href ? "a" : "span"}
-	bind:this={ref}
-	data-slot="badge"
-	{href}
-	class={cn(badgeVariants({ variant }), className)}
-	{...restProps}
->
-	{@render children?.()}
-</svelte:element>
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+				secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+				destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+				outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30",
+				ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
+		variant?: BadgeVariant;
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>

package/dist/components/ui/chart/chart-container.svelte

@@ -1,80 +1,80 @@
-<script lang="ts">
-	import { cn, type WithElementRef } from "../../../utils.js";
-	import type { HTMLAttributes } from "svelte/elements";
-	import ChartStyle from "./chart-style.svelte";
-	import { setChartContext, type ChartConfig } from "./chart-utils.js";
-
-	const uid = $props.id();
-
-	let {
-		ref = $bindable(null),
-		id = uid,
-		class: className,
-		children,
-		config,
-		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
-		config: ChartConfig;
-	} = $props();
-
-	const chartId = $derived(`chart-${id || uid.replace(/:/g, "")}`);
-
-	setChartContext({
-		get config() {
-			return config;
-		},
-	});
-</script>
-
-<div
-	bind:this={ref}
-	data-chart={chartId}
-	data-slot="chart"
-	class={cn(
-		"flex aspect-video justify-center overflow-visible text-xs",
-		// Overrides
-		//
-		// Stroke around dots/marks when hovering
-		"[&_.lc-highlight-point]:stroke-transparent",
-		// override the default stroke color of lines
-		"[&_.lc-line]:stroke-border/50",
-
-		// by default, layerchart shows a line intersecting the point when hovering, this hides that
-		"[&_.lc-highlight-line]:stroke-0",
-
-		// by default, when you hover a point on a stacked series chart, it will drop the opacity
-		// of the other series, this overrides that
-		"[&_.lc-area-path]:opacity-100 [&_.lc-highlight-line]:opacity-100 [&_.lc-highlight-point]:opacity-100 [&_.lc-spline-path]:opacity-100 [&_.lc-text]:text-xs [&_.lc-text-svg]:overflow-visible",
-
-		// We don't want the little tick lines between the axis labels and the chart, so we remove
-		// the stroke. The alternative is to manually disable `tickMarks` on the x/y axis of every
-		// chart.
-		"[&_.lc-axis-tick]:stroke-0",
-
-		// We don't want to display the rule on the x/y axis, as there is already going to be
-		// a grid line there and rule ends up overlapping the marks because it is rendered after
-		// the marks
-		"[&_.lc-rule-x-line:not(.lc-grid-x-rule)]:stroke-0 [&_.lc-rule-y-line:not(.lc-grid-y-rule)]:stroke-0",
-		"[&_.lc-grid-x-radial-line]:stroke-border [&_.lc-grid-x-radial-circle]:stroke-border",
-		"[&_.lc-grid-y-radial-line]:stroke-border [&_.lc-grid-y-radial-circle]:stroke-border",
-
-		// Legend adjustments
-		"[&_.lc-legend-swatch-button]:items-center [&_.lc-legend-swatch-button]:gap-1.5",
-		"[&_.lc-legend-swatch-group]:items-center [&_.lc-legend-swatch-group]:gap-4",
-		"[&_.lc-legend-swatch]:size-2.5 [&_.lc-legend-swatch]:rounded-[2px]",
-
-		// Labels
-		"[&_.lc-labels-text:not([fill])]:fill-foreground [&_text]:stroke-transparent",
-
-		// Tick labels on th x/y axes
-		"[&_.lc-axis-tick-label]:fill-muted-foreground [&_.lc-axis-tick-label]:font-normal",
-		"[&_.lc-tooltip-rects-g]:fill-transparent",
-		"[&_.lc-layout-svg-g]:fill-transparent",
-		"[&_.lc-root-container]:w-full",
-		className
-	)}
-	{...restProps}
->
-	<ChartStyle id={chartId} {config} />
-	{@render children?.()}
-</div>
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import ChartStyle from "./chart-style.svelte";
+	import { setChartContext, type ChartConfig } from "./chart-utils.js";
+
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		id = uid,
+		class: className,
+		children,
+		config,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		config: ChartConfig;
+	} = $props();
+
+	const chartId = $derived(`chart-${id || uid.replace(/:/g, "")}`);
+
+	setChartContext({
+		get config() {
+			return config;
+		},
+	});
+</script>
+
+<div
+	bind:this={ref}
+	data-chart={chartId}
+	data-slot="chart"
+	class={cn(
+		"flex aspect-video justify-center overflow-visible text-xs",
+		// Overrides
+		//
+		// Stroke around dots/marks when hovering
+		"[&_.lc-highlight-point]:stroke-transparent",
+		// override the default stroke color of lines
+		"[&_.lc-line]:stroke-border/50",
+
+		// by default, layerchart shows a line intersecting the point when hovering, this hides that
+		"[&_.lc-highlight-line]:stroke-0",
+
+		// by default, when you hover a point on a stacked series chart, it will drop the opacity
+		// of the other series, this overrides that
+		"[&_.lc-area-path]:opacity-100 [&_.lc-highlight-line]:opacity-100 [&_.lc-highlight-point]:opacity-100 [&_.lc-spline-path]:opacity-100 [&_.lc-text]:text-xs [&_.lc-text-svg]:overflow-visible",
+
+		// We don't want the little tick lines between the axis labels and the chart, so we remove
+		// the stroke. The alternative is to manually disable `tickMarks` on the x/y axis of every
+		// chart.
+		"[&_.lc-axis-tick]:stroke-0",
+
+		// We don't want to display the rule on the x/y axis, as there is already going to be
+		// a grid line there and rule ends up overlapping the marks because it is rendered after
+		// the marks
+		"[&_.lc-rule-x-line:not(.lc-grid-x-rule)]:stroke-0 [&_.lc-rule-y-line:not(.lc-grid-y-rule)]:stroke-0",
+		"[&_.lc-grid-x-radial-line]:stroke-border [&_.lc-grid-x-radial-circle]:stroke-border",
+		"[&_.lc-grid-y-radial-line]:stroke-border [&_.lc-grid-y-radial-circle]:stroke-border",
+
+		// Legend adjustments
+		"[&_.lc-legend-swatch-button]:items-center [&_.lc-legend-swatch-button]:gap-1.5",
+		"[&_.lc-legend-swatch-group]:items-center [&_.lc-legend-swatch-group]:gap-4",
+		"[&_.lc-legend-swatch]:size-2.5 [&_.lc-legend-swatch]:rounded-[2px]",
+
+		// Labels
+		"[&_.lc-labels-text:not([fill])]:fill-foreground [&_text]:stroke-transparent",
+
+		// Tick labels on th x/y axes
+		"[&_.lc-axis-tick-label]:fill-muted-foreground [&_.lc-axis-tick-label]:font-normal",
+		"[&_.lc-tooltip-rects-g]:fill-transparent",
+		"[&_.lc-layout-svg-g]:fill-transparent",
+		"[&_.lc-root-container]:w-full",
+		className
+	)}
+	{...restProps}
+>
+	<ChartStyle id={chartId} {config} />
+	{@render children?.()}
+</div>

package/dist/components/ui/chart/chart-style.svelte

@@ -1,37 +1,37 @@
-<script lang="ts">
-	import { THEMES, type ChartConfig } from "./chart-utils.js";
-
-	let { id, config }: { id: string; config: ChartConfig } = $props();
-
-	const colorConfig = $derived(
-		config ? Object.entries(config).filter(([, config]) => config.theme || config.color) : null
-	);
-
-	const themeContents = $derived.by(() => {
-		if (!colorConfig || !colorConfig.length) return;
-
-		const themeContents = [];
-		for (const [_theme, prefix] of Object.entries(THEMES)) {
-			let content = `${prefix} [data-chart=${id}] {\n`;
-			const color = colorConfig.map(([key, itemConfig]) => {
-				const theme = _theme as keyof typeof itemConfig.theme;
-				const color = itemConfig.theme?.[theme] || itemConfig.color;
-				return color ? `\t--color-${key}: ${color};` : null;
-			});
-
-			content += color.join("\n") + "\n}";
-
-			themeContents.push(content);
-		}
-
-		return themeContents.join("\n");
-	});
-</script>
-
-{#if themeContents}
-	{#key id}
-		<svelte:element this={"style"}>
-			{themeContents}
-		</svelte:element>
-	{/key}
-{/if}
+<script lang="ts">
+	import { THEMES, type ChartConfig } from "./chart-utils.js";
+
+	let { id, config }: { id: string; config: ChartConfig } = $props();
+
+	const colorConfig = $derived(
+		config ? Object.entries(config).filter(([, config]) => config.theme || config.color) : null
+	);
+
+	const themeContents = $derived.by(() => {
+		if (!colorConfig || !colorConfig.length) return;
+
+		const themeContents = [];
+		for (const [_theme, prefix] of Object.entries(THEMES)) {
+			let content = `${prefix} [data-chart=${id}] {\n`;
+			const color = colorConfig.map(([key, itemConfig]) => {
+				const theme = _theme as keyof typeof itemConfig.theme;
+				const color = itemConfig.theme?.[theme] || itemConfig.color;
+				return color ? `\t--color-${key}: ${color};` : null;
+			});
+
+			content += color.join("\n") + "\n}";
+
+			themeContents.push(content);
+		}
+
+		return themeContents.join("\n");
+	});
+</script>
+
+{#if themeContents}
+	{#key id}
+		<svelte:element this={"style"}>
+			{themeContents}
+		</svelte:element>
+	{/key}
+{/if}