layerchart 2.0.0-next.3 → 2.0.0-next.30

package/dist/components/tooltip/TooltipItem.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { Without } from '../../utils/types.js';
+import { type Without } from '../../utils/types.js';
 export type TooltipItemPropsWithoutHTML = {
     /**
      * The label to display in the tooltip item.
@@ -13,7 +13,7 @@ export type TooltipItemPropsWithoutHTML = {
     /**
      * Format to use when displaying the value.
      */
-    format?: FormatType;
+    format?: FormatType | FormatConfig;
     /**
      * Alignment of the value.
      *
@@ -59,7 +59,7 @@ export type TooltipItemPropsWithoutHTML = {
     colorRef?: HTMLElement;
 };
 export type TooltipItemProps = TooltipItemPropsWithoutHTML & Without<HTMLAttributes<HTMLElement>, TooltipItemPropsWithoutHTML>;
-import { type FormatType } from '@layerstack/utils';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 import type { Snippet } from 'svelte';
 declare const TooltipItem: import("svelte").Component<TooltipItemProps, {}, "ref" | "colorRef" | "labelRef" | "valueRef">;
 type TooltipItem = ReturnType<typeof TooltipItem>;

package/dist/components/tooltip/TooltipList.svelte

@@ -23,7 +23,7 @@
   bind:this={ref}
   class={cls(
     layerClass('tooltip-list'),
-    'grid grid-cols-[1fr_auto] gap-x-2 gap-y-1 items-center',
+    'grid grid-cols-[1fr_auto] gap-x-2 gap-y-1 items-start',
     className
   )}
   {...restProps}

package/dist/components/tooltip/tooltipMetaContext.d.ts

@@ -1,7 +1,7 @@
 import { type Accessor } from '../../utils/common.js';
 import type { SeriesData } from '../charts/index.js';
 import type { ChartContextValue } from '../Chart.svelte';
-import { type FormatType } from '@layerstack/utils';
+import { type FormatType, type FormatConfig } from '@layerstack/utils';
 export type SimplifiedChartType = 'bar' | 'area' | 'line' | 'pie' | 'scatter';
 export type BarTooltipMetaContextValue = {
     type: 'bar';
@@ -52,7 +52,7 @@ export type TooltipPayload = {
     chartType?: SimplifiedChartType;
     payload: any;
     rawSeriesData?: SeriesData<any, any>;
-    formatter?: FormatType;
+    formatter?: FormatType | FormatConfig;
 };
 type BasePayloadHandlerProps = {
     ctx: ChartContextValue;

package/dist/docs/Blockquote.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-  import { mdiInformation } from '@mdi/js';
-  import { Icon } from 'svelte-ux';
   import { cls } from '@layerstack/tailwind';
+
+  import LucideInfo from '~icons/lucide/info';
+
+  const { children } = $props();
 </script>
 
 <div
@@ -10,6 +12,6 @@
     '[&>a]:font-medium [&>a]:underline [&>a]:decoration-dashed [&>a]:decoration-primary/50 [&>a]:underline-offset-2'
   )}
 >
-  <Icon data={mdiInformation} class="text-primary" />
-  <slot />
+  <LucideInfo class="text-primary" />
+  {@render children()}
 </div>

package/dist/docs/Blockquote.svelte.d.ts

@@ -1,20 +1,5 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Blockquote: $$__sveltets_2_IsomorphicComponent<any, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Blockquote = InstanceType<typeof Blockquote>;
+declare const Blockquote: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type Blockquote = ReturnType<typeof Blockquote>;
 export default Blockquote;

package/dist/docs/Code.svelte

@@ -4,20 +4,28 @@
   import { CopyButton } from 'svelte-ux';
   import { cls } from '@layerstack/tailwind';
 
-  export let source: string | null = null;
-  export let language = 'svelte';
-  export let highlightedSource = source
-    ? Prism.highlight(source, Prism.languages[language] ?? Prism.languages.text, language)
-    : '';
-
-  export let classes: {
-    root?: string;
-    pre?: string;
-    code?: string;
-  } = {};
+  const {
+    source = null,
+    language = 'svelte',
+    highlightedSource = source
+      ? Prism.highlight(source, Prism.languages[language] ?? Prism.languages.text, language)
+      : '',
+    classes = {},
+    class: className,
+  }: {
+    source: string | null;
+    language?: string;
+    highlightedSource?: string;
+    classes?: {
+      root?: string;
+      pre?: string;
+      code?: string;
+    };
+    class?: string;
+  } = $props();
 </script>
 
-<div class={cls('Code', 'rounded-sm', classes.root, $$props.class)}>
+<div class={cls('Code', 'rounded-sm', classes.root, className)}>
   {#if source}
     <div class="relative">
       <pre

package/dist/docs/Code.svelte.d.ts

@@ -1,29 +1,15 @@
 import 'prism-svelte';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Code: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    source?: string | null | undefined;
-    language?: string | undefined;
-    highlightedSource?: string | undefined;
+type $$ComponentProps = {
+    source: string | null;
+    language?: string;
+    highlightedSource?: string;
     classes?: {
         root?: string;
         pre?: string;
         code?: string;
-    } | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Code = InstanceType<typeof Code>;
+    };
+    class?: string;
+};
+declare const Code: import("svelte").Component<$$ComponentProps, {}, "">;
+type Code = ReturnType<typeof Code>;
 export default Code;

package/dist/docs/Header1.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import { SectionDivider } from 'svelte-ux';
+
+  let { children, ...restProps } = $props();
 </script>
 
 <!--
@@ -9,6 +11,6 @@
       - Maybe possible to set/get props from markdown/mdsvex
         - Example: `#API { id: 'api' }
 -->
-<SectionDivider {...$$restProps}>
-  <slot />
+<SectionDivider {...restProps}>
+  {@render children()}
 </SectionDivider>

package/dist/docs/Header1.svelte.d.ts

@@ -1,29 +1,5 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Header1: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Header1 = InstanceType<typeof Header1>;
+declare const Header1: import("svelte").Component<{
+    children: any;
+} & Record<string, any>, {}, "">;
+type Header1 = ReturnType<typeof Header1>;
 export default Header1;

package/dist/docs/Json.svelte

@@ -1,12 +1,20 @@
 <script lang="ts">
+  import { type ComponentProps } from 'svelte';
   import JsonTree from 'svelte-json-tree';
   import { cls } from '@layerstack/tailwind';
 
-  export let value: any;
-  export let defaultExpandedPaths = ['$'];
+  const {
+    value,
+    defaultExpandedPaths = ['$'],
+    class: className,
+  }: {
+    value: ComponentProps<JsonTree>['value'];
+    defaultExpandedPaths?: ComponentProps<JsonTree>['defaultExpandedPaths'];
+    class?: string;
+  } = $props();
 </script>
 
-<div class={cls('overflow-auto px-4 py-2 bg-[#1e1e1e]', $$props.class)}>
+<div class={cls('overflow-auto px-4 py-2 bg-[#1e1e1e]', className)}>
   <JsonTree
     {value}
     {defaultExpandedPaths}

package/dist/docs/Json.svelte.d.ts

@@ -1,22 +1,10 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Json: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
-    value: any;
-    defaultExpandedPaths?: string[] | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Json = InstanceType<typeof Json>;
+import { type ComponentProps } from 'svelte';
+import JsonTree from 'svelte-json-tree';
+type $$ComponentProps = {
+    value: ComponentProps<JsonTree>['value'];
+    defaultExpandedPaths?: ComponentProps<JsonTree>['defaultExpandedPaths'];
+    class?: string;
+};
+declare const Json: import("svelte").Component<$$ComponentProps, {}, "">;
+type Json = ReturnType<typeof Json>;
 export default Json;

package/dist/docs/Layout.svelte

@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   // Custom components: https://mdsvex.com/docs#custom-components
   import blockquote from './Blockquote.svelte';
   import a from './Link.svelte';
@@ -8,11 +8,14 @@
 </script>
 
 <script lang="ts">
-  // frontmatter: https://mdsvex.com/docs#frontmatter-1
-  // export let name = undefined;
-  // export let sourceUrl = undefined;
-  // export let docUrl = undefined;
-  // export let description = undefined;
+  let {
+    // frontmatter: https://mdsvex.com/docs#frontmatter-1
+    // name,
+    // sourceUrl,
+    // docUrl,
+    // description,
+    children,
+  } = $props();
 </script>
 
-<slot />
+{@render children()}

package/dist/docs/Layout.svelte.d.ts

@@ -1,23 +1,8 @@
 import blockquote from './Blockquote.svelte';
 import a from './Link.svelte';
 export { a, blockquote };
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Layout: $$__sveltets_2_IsomorphicComponent<any, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Layout = InstanceType<typeof Layout>;
+declare const Layout: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type Layout = ReturnType<typeof Layout>;
 export default Layout;

package/dist/docs/Link.svelte

@@ -1,5 +1,9 @@
+<script lang="ts">
+  let { children, ...restProps } = $props();
+</script>
+
 <!-- href provided by markdown/mdsvex -->
-<!-- svelte-ignore a11y-missing-attribute -->
-<a class="text-primary font-medium" {...$$restProps}>
-  <slot />
+<!-- svelte-ignore a11y_missing_attribute -->
+<a class="text-primary font-medium" {...restProps}>
+  {@render children()}
 </a>

package/dist/docs/Link.svelte.d.ts

@@ -1,39 +1,5 @@
+declare const Link: import("svelte").Component<{
+    children: any;
+} & Record<string, any>, {}, "">;
+type Link = ReturnType<typeof Link>;
 export default Link;
-type Link = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const Link: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/docs/Preview.svelte

@@ -3,7 +3,9 @@
   // TODO: No longer copy from svelte-ux after prismjs is migrated to ESM (commonjs causes issue with Vite from another library)
   import Prism from 'prismjs';
   import 'prism-svelte';
-  import { mdiCodeTags, mdiTable } from '@mdi/js';
+
+  import LucideCode from '~icons/lucide/code';
+  import LucideTable from '~icons/lucide/table';
 
   import { Button, CopyButton, Dialog, Toggle, Tooltip } from 'svelte-ux';
   import { cls } from '@layerstack/tailwind';
@@ -68,7 +70,7 @@
 
 {#if code}
   <Button
-    icon={mdiCodeTags}
+    icon={LucideCode}
     class="text-surface-content/70 py-1"
     on:click={() => (showCode = !showCode)}
   >
@@ -78,7 +80,8 @@
 
 {#if data}
   <Toggle let:on={open} let:toggle let:toggleOff>
-    <Button icon={mdiTable} class="text-surface-content/70 py-1" on:click={toggle}>View data</Button
+    <Button icon={LucideTable} class="text-surface-content/70 py-1" on:click={toggle}
+      >View data</Button
     >
     <Dialog
       {open}

package/dist/docs/TilesetField.svelte

@@ -1,26 +1,26 @@
 <script lang="ts">
   import { SelectField, Switch } from 'svelte-ux';
 
-  export let doubleScale = devicePixelRatio > 1;
+  let { doubleScale = $bindable(devicePixelRatio > 1), serviceUrl = $bindable() } = $props();
 
   // TODO: Access via context, or possibly global state
   const ACCESS_TOKEN =
     'pk.eyJ1IjoidGVjaG5pcTM1IiwiYSI6ImNsZTR5cDd0ZjAyNm8zdnFvczhzdnFpcXkifQ.-LAr8sl5BZ3y-H0pDyD1qA';
 
   // https://docs.mapbox.com/api/maps/styles/
-  $: mapboxv1 = (style: string) => (x: number, y: number, z: number) => {
+  const mapboxv1 = $derived((style: string) => (x: number, y: number, z: number) => {
     return `https://api.mapbox.com/styles/v1/mapbox/${style}/tiles/${z}/${x}/${y}${
       doubleScale ? '@2x' : ''
     }?access_token=${ACCESS_TOKEN}`;
-  };
+  });
 
   // https://docs.mapbox.com/api/maps/raster-tiles/
   // https://docs.mapbox.com/data/tilesets/reference/mapbox-streets-v8/
-  $: mapboxv4 = (tileset: string) => (x: number, y: number, z: number) => {
+  const mapboxv4 = $derived((tileset: string) => (x: number, y: number, z: number) => {
     return `https://${'abc'[Math.abs(x + y) % 3]}.tiles.mapbox.com/v4/${tileset}/${z}/${x}/${y}${
       doubleScale ? '@2x' : ''
     }.png?access_token=${ACCESS_TOKEN}`;
-  };
+  });
 
   // https://apps.nationalmap.gov/services/
   const nationalmap = (tileset: string) => (x: number, y: number, z: number) => {
@@ -54,7 +54,7 @@
     return `https://${s}.tile.opentopomap.org/${z}/${x}/${y}.png`;
   };
 
-  $: services = {
+  const services = $derived<Record<string, Record<string, Function>>>({
     'mapbox v1': {
       'streets-v11': mapboxv1('streets-v11'),
       'light-v10': mapboxv1('light-v10'),
@@ -100,24 +100,25 @@
     // 'ArcGIS Vector': {
     // 	 'Community Map', url: arcgisVector('World_Basemap_v2'),
     // }
-  } as Record<string, Record<string, Function>>;
-
-  $: serviceOptions = Object.entries(services).flatMap(([group, service]) => {
-    return Object.entries(service).map(([label, value]) => {
-      return { label, value: `${group}:${label}`, group, serviceUrl: value };
-    });
   });
 
-  $: defaultServiceUrl = services['mapbox v1']['streets-v11'];
-  export let serviceUrl = defaultServiceUrl;
+  const serviceOptions = $derived(
+    Object.entries(services).flatMap(([group, service]) => {
+      return Object.entries(service).map(([label, value]) => {
+        return { label, value: `${group}:${label}`, group, serviceUrl: value };
+      });
+    })
+  );
 
-  $: getServiceUrl = (option: string) => {
+  const getServiceUrl = $derived((option: string) => {
     const [selectedService, selectedTileset] = selected.split(':');
     return services[selectedService][selectedTileset];
-  };
+  });
 
-  let selected = 'mapbox v1:streets-v11';
-  $: serviceUrl = getServiceUrl(selected);
+  let selected = $state('mapbox v1:streets-v11');
+  $effect(() => {
+    serviceUrl = getServiceUrl(selected);
+  });
 </script>
 
 <SelectField
@@ -128,7 +129,7 @@
   toggleIcon={null}
   stepper
 >
-  <div slot="append" on:click|stopPropagation role="none">
+  <div slot="append" onclick={(e) => e.stopPropagation()} role="none">
     <div class="text-[10px] text-surface-content/50 text-center">2x</div>
     <Switch bind:checked={doubleScale} size="md" />
   </div>

package/dist/docs/TilesetField.svelte.d.ts

@@ -1,23 +1,6 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const TilesetField: $$__sveltets_2_IsomorphicComponent<{
-    doubleScale?: boolean;
-    serviceUrl?: Function;
-}, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TilesetField = InstanceType<typeof TilesetField>;
+declare const TilesetField: import("svelte").Component<{
+    doubleScale?: any;
+    serviceUrl?: any;
+}, {}, "doubleScale" | "serviceUrl">;
+type TilesetField = ReturnType<typeof TilesetField>;
 export default TilesetField;

package/dist/docs/ViewSourceButton.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
   import type { ComponentProps } from 'svelte';
   import { Button, Dialog, Toggle, Tooltip } from 'svelte-ux';
-  import { mdiGithub } from '@mdi/js';
+  import LucideGithub from '~icons/lucide/github.svelte';
 
   import Code from './Code.svelte';
 
-  export let label: string;
-  export let source: string | undefined = undefined;
-  export let href: string | undefined = undefined;
-  export let icon: ComponentProps<Button>['icon'];
+  const {
+    label,
+    source,
+    href,
+    icon,
+  }: { label: string; source?: string; href?: string; icon: ComponentProps<Button>['icon'] } =
+    $props();
 </script>
 
 {#if source}
@@ -26,7 +29,7 @@
         </div>
 
         {#if href}
-          <Button icon={mdiGithub} variant="fill-light" color="primary" {href} target="_blank">
+          <Button icon={LucideGithub} variant="fill-light" color="primary" {href} target="_blank">
             View on Github
           </Button>
         {/if}

package/dist/docs/ViewSourceButton.svelte.d.ts

@@ -1,25 +1,11 @@
 import type { ComponentProps } from 'svelte';
 import { Button } from 'svelte-ux';
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const ViewSourceButton: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     label: string;
-    source?: string | undefined;
-    href?: string | undefined;
-    icon: ComponentProps<Button>["icon"];
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ViewSourceButton = InstanceType<typeof ViewSourceButton>;
+    source?: string;
+    href?: string;
+    icon: ComponentProps<Button>['icon'];
+};
+declare const ViewSourceButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type ViewSourceButton = ReturnType<typeof ViewSourceButton>;
 export default ViewSourceButton;

package/dist/utils/arcText.svelte.js

@@ -216,7 +216,7 @@ export function createArcTextProps(props, opts = {}, position) {
             x: x,
             y: y,
             textAnchor,
-            'dominant-baseline': 'middle',
+            dominantBaseline: 'middle',
         };
     });
     const current = $derived.by(() => {
@@ -224,21 +224,21 @@ export function createArcTextProps(props, opts = {}, position) {
             return {
                 path: innerPath.current,
                 ...sharedProps,
-                'dominant-baseline': innerDominantBaseline,
+                dominantBaseline: innerDominantBaseline,
             };
         }
         else if (position === 'outer') {
             return {
                 path: outerPath.current,
                 ...sharedProps,
-                'dominant-baseline': outerDominantBaseline,
+                dominantBaseline: outerDominantBaseline,
             };
         }
         else if (position === 'middle') {
             return {
                 path: middlePath.current,
                 ...sharedProps,
-                'dominant-baseline': 'middle',
+                dominantBaseline: 'middle',
             };
         }
         else if (position === 'centroid') {