ui-ingredients 0.0.61 → 0.0.63

package/dist/select/select-list.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSelectContext} from './select-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SelectListProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SelectListProps = $props();
 
   let select = getSelectContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/select/select-list.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SelectList: $$__sveltets_2_IsomorphicComponent<SelectListProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SelectList = InstanceType<typeof SelectList>;
 export default SelectList;

package/dist/select/select-positioner.svelte

@@ -10,7 +10,12 @@
   import {getPresenceContext} from '../presence/presence-context.svelte.js';
   import {getSelectContext} from './select-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SelectPositionerProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SelectPositionerProps = $props();
 
   let select = getSelectContext();
   let presence = getPresenceContext();
@@ -24,7 +29,7 @@
   {#if asChild}
     {@render asChild(mergedProps)}
   {:else}
-    <div bind:this={e} {...mergedProps}>
+    <div bind:this={ref} {...mergedProps}>
       {@render children?.()}
     </div>
   {/if}

package/dist/select/select-positioner.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SelectPositioner: $$__sveltets_2_IsomorphicComponent<SelectPositionerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SelectPositioner = InstanceType<typeof SelectPositioner>;
 export default SelectPositioner;

package/dist/select/select-root.svelte

@@ -23,7 +23,12 @@
   import {createSelect} from './create-select.svelte.js';
   import {setSelectContext} from './select-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SelectProps<T> = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SelectProps<T> = $props();
 
   let [createSelectProps, rest] = $derived(
     createSplitProps<CreateSelectProps<T>>([
@@ -80,7 +85,7 @@
 {#if asChild}
   {@render asChild(mergedProps, select)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(select)}
   </div>
 {/if}

package/dist/select/select-root.svelte.d.ts

@@ -9,7 +9,7 @@ declare class __sveltets_Render<T> {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {};
-    bindings(): "";
+    bindings(): "ref";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/select/select-trigger.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSelectContext} from './select-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SelectTriggerProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SelectTriggerProps = $props();
 
   let select = getSelectContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button bind:this={e} type="button" {...mergedProps}>
+  <button bind:this={ref} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/select/select-trigger.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SelectTrigger: $$__sveltets_2_IsomorphicComponent<SelectTriggerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SelectTrigger = InstanceType<typeof SelectTrigger>;
 export default SelectTrigger;

package/dist/select/select-value-text.svelte

@@ -10,7 +10,7 @@
   import {getSelectContext} from './select-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     placeholder,
@@ -25,7 +25,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <span bind:this={e} {...mergedProps}>
+  <span bind:this={ref} {...mergedProps}>
     {#if children}
       {@render children?.()}
     {:else if select.value.length}

package/dist/select/select-value-text.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SelectValueText: $$__sveltets_2_IsomorphicComponent<SelectValueTextProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SelectValueText = InstanceType<typeof SelectValueText>;
 export default SelectValueText;

package/dist/signature-pad/signature-pad-clear-trigger.svelte

@@ -10,7 +10,7 @@
   import {getSignaturePadContext} from './signature-pad-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -26,7 +26,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <button bind:this={e} type="button" {...mergedProps}>
+  <button bind:this={ref} type="button" {...mergedProps}>
     {@render children?.()}
   </button>
 {/if}

package/dist/signature-pad/signature-pad-clear-trigger.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SignaturePadClearTrigger: $$__sveltets_2_IsomorphicComponent<SignaturePadClearTriggerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SignaturePadClearTrigger = InstanceType<typeof SignaturePadClearTrigger>;
 export default SignaturePadClearTrigger;

package/dist/signature-pad/signature-pad-control.svelte

@@ -10,7 +10,7 @@
   import {getSignaturePadContext} from './signature-pad-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -24,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/signature-pad/signature-pad-control.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SignaturePadControl: $$__sveltets_2_IsomorphicComponent<SignaturePadControlProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SignaturePadControl = InstanceType<typeof SignaturePadControl>;
 export default SignaturePadControl;

package/dist/signature-pad/signature-pad-current-segment-path.svelte

@@ -10,7 +10,7 @@
   import {getSignaturePadContext} from './signature-pad-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -32,7 +32,7 @@
   {#if asChild}
     {@render asChild(mergedProps)}
   {:else}
-    <path bind:this={e} {...mergedProps}>
+    <path bind:this={ref} {...mergedProps}>
       {@render children?.()}
     </path>
   {/if}

package/dist/signature-pad/signature-pad-current-segment-path.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SignaturePadCurrentSegmentPath: $$__sveltets_2_IsomorphicComponent<SignaturePadCurrentSegmentPathProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SignaturePadCurrentSegmentPath = InstanceType<typeof SignaturePadCurrentSegmentPath>;
 export default SignaturePadCurrentSegmentPath;

package/dist/signature-pad/signature-pad-guide.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSignaturePadContext} from './signature-pad-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SignaturePadGuideProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SignaturePadGuideProps = $props();
 
   let signaturePad = getSignaturePadContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/signature-pad/signature-pad-guide.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SignaturePadGuide: $$__sveltets_2_IsomorphicComponent<SignaturePadGuideProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SignaturePadGuide = InstanceType<typeof SignaturePadGuide>;
 export default SignaturePadGuide;

package/dist/signature-pad/signature-pad-hidden-input.svelte

@@ -14,7 +14,7 @@
   import {getSignaturePadContext} from './signature-pad-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     value,
     asChild,
     ...props
@@ -30,5 +30,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input bind:this={e} {...mergedProps} />
+  <input bind:this={ref} {...mergedProps} />
 {/if}

package/dist/signature-pad/signature-pad-hidden-input.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SignaturePadHiddenInput: $$__sveltets_2_IsomorphicComponent<SignaturePadHiddenInputProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SignaturePadHiddenInput = InstanceType<typeof SignaturePadHiddenInput>;
 export default SignaturePadHiddenInput;

package/dist/signature-pad/signature-pad-label.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSignaturePadContext} from './signature-pad-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SignaturePadLabelProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SignaturePadLabelProps = $props();
 
   let signaturePad = getSignaturePadContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <label bind:this={e} {...mergedProps}>
+  <label bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </label>
 {/if}

package/dist/signature-pad/signature-pad-label.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SignaturePadLabel: $$__sveltets_2_IsomorphicComponent<SignaturePadLabelProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SignaturePadLabel = InstanceType<typeof SignaturePadLabel>;
 export default SignaturePadLabel;

package/dist/signature-pad/signature-pad-root.svelte

@@ -19,7 +19,12 @@
   import {createSignaturePad} from './create-signature-pad.svelte.js';
   import {setSignaturePadContext} from './signature-pad-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SignaturePadProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SignaturePadProps = $props();
 
   let [createSignaturePadProps, localProps] = $derived(
     createSplitProps<CreateSignaturePadProps>([
@@ -48,7 +53,7 @@
 {#if asChild}
   {@render asChild(mergedProps, signaturePad)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(signaturePad)}
   </div>
 {/if}

package/dist/signature-pad/signature-pad-root.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SignaturePadRoot: $$__sveltets_2_IsomorphicComponent<SignaturePadProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SignaturePadRoot = InstanceType<typeof SignaturePadRoot>;
 export default SignaturePadRoot;

package/dist/signature-pad/signature-pad-segment-path.svelte

@@ -14,7 +14,7 @@
   import {getSignaturePadContext} from './signature-pad-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     path,
     asChild,
     children,
@@ -31,7 +31,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <path bind:this={e} {...mergedProps}>
+  <path bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </path>
 {/if}

package/dist/signature-pad/signature-pad-segment-path.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SignaturePadSegmentPath: $$__sveltets_2_IsomorphicComponent<SignaturePadSegmentPathProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SignaturePadSegmentPath = InstanceType<typeof SignaturePadSegmentPath>;
 export default SignaturePadSegmentPath;

package/dist/signature-pad/signature-pad-segment.svelte

@@ -10,7 +10,7 @@
   import {getSignaturePadContext} from './signature-pad-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     asChild,
     children,
     ...props
@@ -24,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <svg bind:this={e} {...mergedProps}>
+  <svg bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </svg>
 {/if}

package/dist/signature-pad/signature-pad-segment.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SignaturePadSegment: $$__sveltets_2_IsomorphicComponent<SignaturePadSegmentProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SignaturePadSegment = InstanceType<typeof SignaturePadSegment>;
 export default SignaturePadSegment;

package/dist/slider/slider-control.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSliderContext} from './slider-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SliderControlProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SliderControlProps = $props();
 
   let slider = getSliderContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/slider/slider-control.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SliderControl: $$__sveltets_2_IsomorphicComponent<SliderControlProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SliderControl = InstanceType<typeof SliderControl>;
 export default SliderControl;

package/dist/slider/slider-hidden-input.svelte

@@ -12,7 +12,11 @@
     getSliderThumbPropsContext,
   } from './slider-context.svelte.js';
 
-  let {this: e, asChild, ...props}: SliderHiddenInputProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    ...props
+  }: SliderHiddenInputProps = $props();
 
   let slider = getSliderContext();
   let thumbProps = getSliderThumbPropsContext();
@@ -25,5 +29,5 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <input bind:this={e} {...mergedProps} />
+  <input bind:this={ref} {...mergedProps} />
 {/if}

package/dist/slider/slider-hidden-input.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SliderHiddenInput: $$__sveltets_2_IsomorphicComponent<SliderHiddenInputProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SliderHiddenInput = InstanceType<typeof SliderHiddenInput>;
 export default SliderHiddenInput;

package/dist/slider/slider-label.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSliderContext} from './slider-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SliderLabelProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SliderLabelProps = $props();
 
   let slider = getSliderContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <label bind:this={e} {...mergedProps}>
+  <label bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </label>
 {/if}

package/dist/slider/slider-label.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SliderLabel: $$__sveltets_2_IsomorphicComponent<SliderLabelProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SliderLabel = InstanceType<typeof SliderLabel>;
 export default SliderLabel;

package/dist/slider/slider-marker-group.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSliderContext} from './slider-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SliderMarkerGroupProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SliderMarkerGroupProps = $props();
 
   let slider = getSliderContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/slider/slider-marker-group.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SliderMarkerGroup: $$__sveltets_2_IsomorphicComponent<SliderMarkerGroupProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SliderMarkerGroup = InstanceType<typeof SliderMarkerGroup>;
 export default SliderMarkerGroup;

package/dist/slider/slider-marker.svelte

@@ -11,7 +11,7 @@
   import {getSliderContext} from './slider-context.svelte.js';
 
   let {
-    this: e,
+    ref = $bindable(null),
     value,
     asChild,
     children,
@@ -33,7 +33,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/slider/slider-marker.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SliderMarker: $$__sveltets_2_IsomorphicComponent<SliderMarkerProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SliderMarker = InstanceType<typeof SliderMarker>;
 export default SliderMarker;

package/dist/slider/slider-range.svelte

@@ -9,7 +9,12 @@
   import {mergeProps} from '../merge-props.js';
   import {getSliderContext} from './slider-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SliderRangeProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SliderRangeProps = $props();
 
   let slider = getSliderContext();
 
@@ -19,7 +24,7 @@
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.()}
   </div>
 {/if}

package/dist/slider/slider-range.svelte.d.ts

@@ -16,6 +16,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SliderRange: $$__sveltets_2_IsomorphicComponent<SliderRangeProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SliderRange = InstanceType<typeof SliderRange>;
 export default SliderRange;

package/dist/slider/slider-root.svelte

@@ -19,7 +19,12 @@
   import {createSlider} from './create-slider.svelte.js';
   import {setSliderContext} from './slider-context.svelte.js';
 
-  let {this: e, asChild, children, ...props}: SliderProps = $props();
+  let {
+    ref = $bindable(null),
+    asChild,
+    children,
+    ...props
+  }: SliderProps = $props();
 
   let [createSliderProps, localProps] = $derived(
     createSplitProps<CreateSliderProps>([
@@ -58,7 +63,7 @@
 {#if asChild}
   {@render asChild(mergedProps, slider)}
 {:else}
-  <div bind:this={e} {...mergedProps}>
+  <div bind:this={ref} {...mergedProps}>
     {@render children?.(slider)}
   </div>
 {/if}

package/dist/slider/slider-root.svelte.d.ts

@@ -17,6 +17,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SliderRoot: $$__sveltets_2_IsomorphicComponent<SliderProps, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
+}, {}, {}, "ref">;
 type SliderRoot = InstanceType<typeof SliderRoot>;
 export default SliderRoot;