flowbite-svelte 1.8.6 → 1.10.0

package/dist/carousel/Carousel.svelte

@@ -4,11 +4,14 @@
   import { canChangeSlide } from "./CarouselSlide";
   import { carousel } from "./theme";
   import { type CarouselProps, type State, Slide, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   const SLIDE_DURATION_RATIO = 0.25;
 
   let { children, slide, images, index = $bindable(0), slideDuration = 1000, transition, duration = 0, "aria-label": ariaLabel = "Draggable Carousel", disableSwipe = false, imgClass = "", class: className, onchange, divClass, ...restProps }: CarouselProps = $props();
 
+  const theme = getTheme("carousel");
+
   const { set, subscribe, update } = writable<State>({ images, index: index ?? 0, forward: true, slideDuration, lastSlideChange: new Date() });
 
   setContext("state", {
@@ -166,7 +169,7 @@
 <!-- The move listeners go here, so things keep working if the touch strays out of the element. -->
 <svelte:document onmousemove={onDragMove} onmouseup={onDragStop} ontouchmove={onDragMove} ontouchend={onDragStop} />
 <div bind:this={carouselDiv} class={cn("relative", divClass)} onmousedown={onDragStart} ontouchstart={onDragStart} onmousemove={onDragMove} onmouseup={onDragStop} ontouchmove={onDragMove} ontouchend={onDragStop} role="button" aria-label={ariaLabel} tabindex="0">
-  <div {...restProps} class={cn(carousel(), activeDragGesture === undefined ? "transition-transform" : "", className)} {@attach loop}>
+  <div {...restProps} class={cn(carousel(), activeDragGesture === undefined ? "transition-transform" : "", className, theme)} {@attach loop}>
     {#if slide}
       {@render slide({ index, Slide })}
     {:else}
@@ -180,7 +183,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L411)
+[CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L405)
 ## Props
 @prop children
 @prop slide

package/dist/carousel/Carousel.svelte.d.ts

@@ -2,7 +2,7 @@ import { type CarouselProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L411)
+ * [CarouselProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L405)
  * ## Props
  * @prop children
  * @prop slide

package/dist/carousel/{Indicators.svelte → CarouselIndicators.svelte}

@@ -1,13 +1,16 @@
 <script lang="ts">
   import { getContext } from "svelte";
   import type { Writable } from "svelte/store";
-  import { indicators } from "./theme";
+  import { carouselIndicators, type CarouselIndicatorsTheme } from "./theme";
   import { Indicator, type IndicatorsProps, type State, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, activeClass, inactiveClass, position = "bottom", class: className, ...restProps }: IndicatorsProps = $props();
 
+  const theme = getTheme("indicators");
+
   const state = getContext<Writable<State>>("state");
-  const { base, indicator } = $derived(indicators({ position }));
+  const { base, indicator } = $derived(carouselIndicators({ position }));
 
   function goToIndex(newIndex: number) {
     state.update((_state) => {
@@ -23,14 +26,14 @@
   }
 </script>
 
-<div class={cn(base(), className)} {...restProps}>
+<div class={cn(base(), className, (theme as CarouselIndicatorsTheme)?.base)} {...restProps}>
   {#each $state.images as _, idx}
     {@const selected = $state.index === idx}
     <button onclick={() => goToIndex(idx)}>
       {#if children}
         {@render children({ selected, index: idx })}
       {:else}
-        <Indicator class={cn(indicator({ selected }), selected ? activeClass : inactiveClass)} />
+        <Indicator class={cn(indicator({ selected }), selected ? activeClass : inactiveClass, (theme as CarouselIndicatorsTheme)?.indicator)} />
       {/if}
     </button>
   {/each}
@@ -40,7 +43,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L425)
+[IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L419)
 ## Props
 @prop children
 @prop activeClass

package/dist/carousel/{Indicators.svelte.d.ts → CarouselIndicators.svelte.d.ts}

@@ -2,7 +2,7 @@ import { type IndicatorsProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L425)
+ * [IndicatorsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L419)
  * ## Props
  * @prop children
  * @prop activeClass
@@ -11,6 +11,6 @@ import { type IndicatorsProps } from "..";
  * @prop class: className
  * @prop ...restProps
  */
-declare const Indicators: import("svelte").Component<IndicatorsProps, {}, "">;
-type Indicators = ReturnType<typeof Indicators>;
-export default Indicators;
+declare const CarouselIndicators: import("svelte").Component<IndicatorsProps, {}, "">;
+type CarouselIndicators = ReturnType<typeof CarouselIndicators>;
+export default CarouselIndicators;

package/dist/carousel/ControlButton.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
   import { controlButton } from "./theme";
   import { type ControlButtonProps, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, forward, name, class: className, spanClass, ...restProps }: ControlButtonProps = $props();
+
+  const theme = getTheme("carouselButton");
 </script>
 
-<button type="button" class={cn(controlButton({ forward }), className)} {...restProps}>
+<button type="button" class={cn(controlButton({ forward }), className, theme)} {...restProps}>
   {#if children}
     {@render children()}
   {:else}
@@ -30,7 +33,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L432)
+[ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L426)
 ## Props
 @prop children
 @prop forward

package/dist/carousel/ControlButton.svelte.d.ts

@@ -2,7 +2,7 @@ import { type ControlButtonProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L432)
+ * [ControlButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L426)
  * ## Props
  * @prop children
  * @prop forward

package/dist/carousel/Controls.svelte

@@ -3,9 +3,12 @@
   import type { Writable } from "svelte/store";
   import { canChangeSlide } from "./CarouselSlide";
   import { type State, type ControlsProps, ControlButton, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, class: className, ...restProps }: ControlsProps = $props();
 
+  const theme = getTheme("controls");
+
   const state = getContext<Writable<State>>("state");
   const { update } = state;
 
@@ -42,15 +45,15 @@
 {#if children}
   {@render children(changeSlide)}
 {:else}
-  <ControlButton name="Previous" forward={false} onclick={() => changeSlide(false)} class={cn(className)} {...restProps} />
-  <ControlButton name="Next" forward={true} onclick={() => changeSlide(true)} class={cn(className)} {...restProps} />
+  <ControlButton name="Previous" forward={false} onclick={() => changeSlide(false)} class={cn(className, theme)} {...restProps} />
+  <ControlButton name="Next" forward={true} onclick={() => changeSlide(true)} class={cn(className, theme)} {...restProps} />
 {/if}
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L438)
+[ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L432)
 ## Props
 @prop children
 @prop class: className

package/dist/carousel/Controls.svelte.d.ts

@@ -2,7 +2,7 @@ import { type ControlsProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L438)
+ * [ControlsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L432)
  * ## Props
  * @prop children
  * @prop class: className

package/dist/carousel/Slide.svelte

@@ -4,11 +4,14 @@
   import { fly } from "svelte/transition";
   import { slide } from "./theme";
   import { type SlideProps, type State, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   const state = getContext<Writable<State>>("state");
 
   let { image, transition, class: className, ...restProps }: SlideProps = $props();
 
+  const theme = getTheme("slide");
+
   let transitionSlideIn = $derived({
     x: $state.forward ? "100%" : "-100%",
     opacity: 1,
@@ -25,7 +28,7 @@
     duration: $state.slideDuration
   });
 
-  let imgClass = cn(slide(), className);
+  let imgClass = cn(slide(), className, theme);
 </script>
 
 {#if transition}
@@ -42,7 +45,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L455)
+[SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L449)
 ## Props
 @prop image
 @prop transition

package/dist/carousel/Slide.svelte.d.ts

@@ -2,7 +2,7 @@ import { type SlideProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L455)
+ * [SlideProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L449)
  * ## Props
  * @prop image
  * @prop transition

package/dist/carousel/Thumbnail.svelte

@@ -2,17 +2,20 @@
   import { thumbnail } from "./theme";
   import { type ThumbnailProps, cn } from "..";
   import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
 
   let { selected, class: className, ...restProps }: ThumbnailProps = $props();
+
+  const theme = getTheme("thumbnail");
 </script>
 
-<img {...restProps} class={thumbnail({ selected, class: clsx(className) })} />
+<img {...restProps} class={cn(thumbnail({ selected, class: clsx(className) }), theme)} />
 
 <!--
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L442)
+[ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L436)
 ## Props
 @prop selected
 @prop class: className

package/dist/carousel/Thumbnail.svelte.d.ts

@@ -2,7 +2,7 @@ import { type ThumbnailProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L442)
+ * [ThumbnailProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L436)
  * ## Props
  * @prop selected
  * @prop class: className

package/dist/carousel/Thumbnails.svelte

@@ -4,9 +4,12 @@
   import { thumbnails } from "./theme";
   import { type ThumbnailsProps, type State, Thumbnail, cn } from "..";
   import clsx from "clsx";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, images = [], index = $bindable(), ariaLabel = "Click to view image", imgClass, throttleDelay = 650, class: className }: ThumbnailsProps = $props();
 
+  const theme = getTheme("thumbnails");
+
   const state = getContext<Writable<State>>("state");
   if (!state) {
     console.error("State is undefined. Make sure to provide state context or pass it as a prop.");
@@ -47,7 +50,7 @@
   });
 </script>
 
-<div class={cn(thumbnails(), className)}>
+<div class={cn(thumbnails(), className, theme)}>
   {#each images as image, idx}
     {@const selected = index === idx}
     <button onclick={() => btnClick(idx)} aria-label={ariaLabel}>
@@ -64,7 +67,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L446)
+[ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L440)
 ## Props
 @prop children
 @prop images = []

package/dist/carousel/Thumbnails.svelte.d.ts

@@ -2,7 +2,7 @@ import { type ThumbnailsProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L446)
+ * [ThumbnailsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L440)
  * ## Props
  * @prop children
  * @prop images = []

package/dist/carousel/index.d.ts

@@ -1,8 +1,8 @@
 export { default as Carousel } from "./Carousel.svelte";
 export { default as ControlButton } from "./ControlButton.svelte";
 export { default as Controls } from "./Controls.svelte";
-export { default as Indicators } from "./Indicators.svelte";
-export { carousel } from "./theme";
+export { default as CarouselIndicators } from "./CarouselIndicators.svelte";
+export { carousel, type CarouselTheme, carouselIndicators, type CarouselIndicatorsTheme, controlButton, type ControlButtonTheme, thumbnails, type ThumbnailsTheme, thumbnail, type ThumbnailTheme, slide, type SlideTheme } from "./theme";
 export { default as Thumbnails } from "./Thumbnails.svelte";
 export { default as Slide } from "./Slide.svelte";
 export { default as Thumbnail } from "./Thumbnail.svelte";

package/dist/carousel/index.js

@@ -1,8 +1,8 @@
 export { default as Carousel } from "./Carousel.svelte";
 export { default as ControlButton } from "./ControlButton.svelte";
 export { default as Controls } from "./Controls.svelte";
-export { default as Indicators } from "./Indicators.svelte";
-export { carousel } from "./theme";
+export { default as CarouselIndicators } from "./CarouselIndicators.svelte";
+export { carousel, carouselIndicators, controlButton, thumbnails, thumbnail, slide } from "./theme";
 export { default as Thumbnails } from "./Thumbnails.svelte";
 export { default as Slide } from "./Slide.svelte";
 export { default as Thumbnail } from "./Thumbnail.svelte";

package/dist/carousel/theme.d.ts

@@ -1,7 +1,8 @@
 import { type VariantProps } from "tailwind-variants";
 export type CarouselVariants = VariantProps<typeof carousel>;
 export declare const carousel: import("tailwind-variants").TVReturnType<{}, undefined, "grid overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "grid overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96", unknown, unknown, undefined>>;
-export declare const indicators: import("tailwind-variants").TVReturnType<{
+export type CarouselTheme = string;
+export declare const carouselIndicators: import("tailwind-variants").TVReturnType<{
     selected: {
         true: {
             indicator: string;
@@ -71,6 +72,8 @@ export declare const indicators: import("tailwind-variants").TVReturnType<{
     base: string;
     indicator: string;
 }, undefined, unknown, unknown, undefined>>;
+export type CarouselIndicatorsSlots = keyof typeof carouselIndicators.slots;
+export type CarouselIndicatorsTheme = Partial<Record<CarouselIndicatorsSlots, string>>;
 export declare const controlButton: import("tailwind-variants").TVReturnType<{
     forward: {
         true: string;
@@ -87,7 +90,9 @@ export declare const controlButton: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "flex absolute top-0 z-30 justify-center items-center px-4 h-full group focus:outline-hidden text-white dark:text-gray-300", unknown, unknown, undefined>>;
+export type ControlButtonTheme = string;
 export declare const thumbnails: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "flex flex-row justify-center bg-gray-100 w-full", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "flex flex-row justify-center bg-gray-100 w-full", unknown, unknown, undefined>>;
+export type ThumbnailsTheme = string;
 export declare const thumbnail: import("tailwind-variants").TVReturnType<{
     selected: {
         true: string;
@@ -104,4 +109,6 @@ export declare const thumbnail: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "", unknown, unknown, undefined>>;
+export type ThumbnailTheme = string;
 export declare const slide: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "absolute block w-full! h-full object-cover", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "absolute block w-full! h-full object-cover", unknown, unknown, undefined>>;
+export type SlideTheme = string;

package/dist/carousel/theme.js

@@ -1,4 +1,3 @@
-import { select } from "../forms/select";
 import { tv } from "tailwind-variants";
 export const carousel = tv({
     base: "grid overflow-hidden relative rounded-lg h-56 sm:h-64 xl:h-80 2xl:h-96",
@@ -6,7 +5,7 @@ export const carousel = tv({
     compoundVariants: [],
     defaultVariants: {}
 });
-export const indicators = tv({
+export const carouselIndicators = tv({
     slots: {
         base: "absolute start-1/2 z-30 flex -translate-x-1/2 space-x-3 rtl:translate-x-1/2 rtl:space-x-reverse",
         indicator: "bg-gray-100 hover:bg-gray-300"

package/dist/clipboard/Clipboard.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
   import Button from "../buttons/Button.svelte";
   import clsx from "clsx";
-  import type { ClipboardProps } from "..";
+  import { type ClipboardProps, cn } from "..";
   import { clipboard } from "./theme";
   import type { MouseEventHandler } from "svelte/elements";
+  import { getTheme } from "../theme/themeUtils";
 
   let { children, embedded = false, value = $bindable(""), success = $bindable(false), onclick, class: className = "", ...restProps }: ClipboardProps = $props();
 
+  const theme = getTheme("clipboard");
+
   const copyToClipboard: MouseEventHandler<HTMLButtonElement> = async (ev) => {
     onclick?.(ev);
     if (ev.defaultPrevented) return;
@@ -35,7 +38,7 @@
   };
 </script>
 
-<Button onclick={copyToClipboard} {...restProps} class={clipboard({ embedded, class: clsx(className) })}>
+<Button onclick={copyToClipboard} {...restProps} class={cn(clipboard({ embedded, class: clsx(className) }), theme)}>
   {@render children?.(success)}
 </Button>
 
@@ -43,7 +46,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L467)
+[ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L461)
 ## Props
 @prop children
 @prop embedded = false

package/dist/clipboard/Clipboard.svelte.d.ts

@@ -1,8 +1,8 @@
-import type { ClipboardProps } from "..";
+import { type ClipboardProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L467)
+ * [ClipboardProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L461)
  * ## Props
  * @prop children
  * @prop embedded = false

package/dist/clipboard/index.d.ts

@@ -1,2 +1,2 @@
 export { default as Clipboard } from "./Clipboard.svelte";
-export { clipboard } from "./theme";
+export { clipboard, type ClipboardTheme } from "./theme";

package/dist/clipboard/theme.d.ts

@@ -16,3 +16,4 @@ export declare const clipboard: import("tailwind-variants").TVReturnType<{
         false: string;
     };
 }, undefined, "gap-2", unknown, unknown, undefined>>;
+export type ClipboardTheme = string;

package/dist/darkmode/DarkMode.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
   import { darkmode } from ".";
   import { type DarkmodeProps, cn } from "..";
+  import { getTheme } from "../theme/themeUtils";
 
   // const THEME_PREFERENCE_KEY = 'color-theme';
   let { class: className, lightIcon, darkIcon, size = "md", ariaLabel = "Dark mode", ...restProps }: DarkmodeProps = $props();
 
+  const theme = getTheme("darkmode");
+
   const sizes = {
     sm: "w-4 h-4",
     md: "w-5 h-5",
@@ -30,7 +33,7 @@
   </script>
 </svelte:head>
 
-<button onclick={toggleTheme} aria-label={ariaLabel} type="button" {...restProps} class={cn(darkmode(), className)} tabindex={0}>
+<button onclick={toggleTheme} aria-label={ariaLabel} type="button" {...restProps} class={cn(darkmode(), className, theme)} tabindex={0}>
   <span class="hidden dark:block">
     {#if lightIcon}
       {@render lightIcon()}
@@ -60,7 +63,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L476)
+[DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L470)
 ## Props
 @prop class: className
 @prop lightIcon

package/dist/darkmode/DarkMode.svelte.d.ts

@@ -2,7 +2,7 @@ import { type DarkmodeProps } from "..";
 /**
  * [Go to docs](https://flowbite-svelte.com/)
  * ## Type
- * [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L476)
+ * [DarkmodeProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L470)
  * ## Props
  * @prop class: className
  * @prop lightIcon

package/dist/darkmode/index.d.ts

@@ -1,2 +1,2 @@
 export { default as DarkMode } from "./DarkMode.svelte";
-export { darkmode } from "./theme";
+export { darkmode, type DarkModeTheme } from "./theme";

package/dist/darkmode/theme.d.ts

@@ -1 +1,2 @@
 export declare const darkmode: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-hidden rounded-lg text-sm p-2.5", unknown, unknown, undefined>>;
+export type DarkModeTheme = string;