@likable-hair/svelte 0.0.77 → 1.0.0

package/README.md

@@ -23,4 +23,4 @@ To publish the package make the following steps:
 
 - edit the package.json version, then commit all the changes
 - run `npm run package`, svelte will generate a package folder with all the necessary stuff inside
-- make sure you're logged in with your npm account, then run `npm publish ./package --access=public`
+- make sure you're logged in with your npm account, then run `npm publish ./package --access=public`

package/dist/buttons/Button.svelte

@@ -0,0 +1,142 @@
+<script>export let type = "default", active = false, loading = false, icon = void 0, iconSize = 15, clazz = "", maxWidth = void 0, maxHeight = void 0, minWidth = void 0, minHeight = void 0, width = void 0, height = void 0, textAlign = "center", cursor = "pointer", padding = "5px", fontSize = void 0, color = void 0, display = void 0, justifyContent = void 0, alignItems = void 0, backgroundColor = void 0, hoverBackgroundColor = "#88888847", activeBackgroundColor = hoverBackgroundColor, borderRadius = void 0, border = void 0, boxShadow = void 0, loaderHeight = void 0, loaderWidth = void 0, disabled = false;
+export { clazz as class };
+import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+function handleClick(event) {
+  if (disabled)
+    return;
+  dispatch("click", {
+    nativeEvent: event
+  });
+}
+function handleKeyPress(event) {
+  if (disabled)
+    return;
+  dispatch("keypress", {
+    nativeEvent: event
+  });
+}
+$:
+  defaultBorderRadius = type == "icon" ? "50%" : "5px";
+$:
+  position = $$slots.append ? "relative" : void 0;
+import Icon from "../media/Icon.svelte";
+import CircularLoader from "../loaders/CircularLoader.svelte";
+</script>
+
+<div
+  style:width
+  style:max-width={maxWidth}
+  style:min-width={minWidth}
+  style:height
+  style:max-height={maxHeight}
+  style:min-height={minHeight}
+  style:text-align={textAlign}
+  style:position
+  style:cursor
+  style:padding
+  style:font-size={fontSize}
+  style:color
+  style:display
+  style:justify-content={justifyContent}
+  style:align-items={alignItems}
+  style:--button-border={border}
+  style:--button-border-radius={borderRadius
+    ? borderRadius
+    : defaultBorderRadius}
+  style:--button-background-color={active
+    ? activeBackgroundColor
+    : backgroundColor}
+  style:--button-hover-background-color={hoverBackgroundColor}
+  style:--button-box-shadow={boxShadow}
+  style:--button-icon-height={iconSize + 5 + "pt"}
+  style:--button-icon-width={iconSize + 5 + "pt"}
+  class="button no-select {clazz}"
+  class:button-default={type === "default"}
+  class:button-text={type === "text"}
+  class:button-icon={type === "icon"}
+  on:click={handleClick}
+  on:keypress={handleKeyPress}
+>
+  {#if loading}
+    <CircularLoader {color} height={loaderHeight} width={loaderWidth} />
+  {:else}
+    {#if !!icon}
+      <Icon name={icon} size={iconSize} />
+    {:else}
+      <slot />
+    {/if}
+    {#if $$slots.append}
+      <span class="append-item">
+        <slot name="append" />
+      </span>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .append-item {
+    position: absolute;
+    right: 0px;
+  }
+
+  .button {
+    overflow: hidden;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  .button-default {
+    transition: background-color 200ms;
+    background-color: var(--button-background-color);
+    outline: 0;
+    border: var(--button-border);
+    border-radius: var(--button-border-radius, 0.25rem);
+    box-shadow: var(--button-box-shadow, 0 0 0.5rem rgba(0, 0, 0, 0.3));
+  }
+
+  .button-default:hover {
+    background-color: var(
+      --button-hover-background-color,
+      var(--button-background-color)
+    );
+  }
+
+  .button-text {
+    transition: background-color 200ms;
+    text-transform: uppercase;
+    font-weight: 600;
+    outline: 0;
+    border: var(--button-border);
+    border-radius: var(--button-border-radius, 0.25rem);
+  }
+
+  .button-text:hover {
+    background-color: var(--button-hover-background-color, transparent);
+  }
+
+  .button-icon {
+    transition: background-color 200ms;
+    outline: 0;
+    border: var(--button-border);
+    border-radius: var(--button-border-radius, 50%);
+    height: var(--button-icon-height) !important;
+    width: var(--button-icon-width) !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .button-icon:hover {
+    background-color: var(--button-hover-background-color, transparent);
+  }
+
+  .no-select {
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Old versions of Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently
+                                    supported by Chrome, Edge, Opera and Firefox */
+  }
+</style>

package/dist/buttons/Button.svelte.d.ts

@@ -0,0 +1,54 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        type?: "default" | "text" | "icon" | undefined;
+        active?: boolean | undefined;
+        loading?: boolean | undefined;
+        icon?: string | undefined;
+        iconSize?: number | undefined;
+        class?: string | undefined;
+        maxWidth?: string | undefined;
+        maxHeight?: string | undefined;
+        minWidth?: string | undefined;
+        minHeight?: string | undefined;
+        width?: string | undefined;
+        height?: string | undefined;
+        textAlign?: string | undefined;
+        cursor?: string | undefined;
+        padding?: string | undefined;
+        fontSize?: string | undefined;
+        color?: string | null | undefined;
+        display?: string | undefined;
+        justifyContent?: string | undefined;
+        alignItems?: string | undefined;
+        backgroundColor?: string | undefined;
+        hoverBackgroundColor?: string | undefined;
+        activeBackgroundColor?: string | undefined;
+        borderRadius?: string | undefined;
+        border?: string | undefined;
+        boxShadow?: string | undefined;
+        loaderHeight?: string | undefined;
+        loaderWidth?: string | undefined;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        click: CustomEvent<{
+            nativeEvent: MouseEvent;
+        }>;
+        keypress: CustomEvent<{
+            nativeEvent: KeyboardEvent;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        append: {};
+    };
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/dist/common/Card.svelte

@@ -0,0 +1,37 @@
+<script>export let outlined = false, maxWidth = void 0, maxHeight = void 0, minWidth = void 0, minHeight = void 0, width = "fit-content", height = void 0, padding = "5px", borderRadius = "5px", backgroundColor = "rgb(252, 252, 252)", color = void 0, borderColor = void 0, borderWidth = void 0, marginBottom = void 0, marginTop = void 0, marginLeft = void 0, marginRight = void 0, boxShadow = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+</script>
+
+<div
+  style:width
+  style:max-width={maxWidth}
+  style:min-width={minWidth}
+  style:height
+  style:max-height={maxHeight}
+  style:min-height={minHeight}
+  style:padding
+  style:border-radius={borderRadius}
+  style:background-color={backgroundColor}
+  style:color
+  style:border-color={borderColor}
+  style:border-width={borderWidth}
+  style:margin-bottom={marginBottom}
+  style:margin-top={marginTop}
+  style:margin-left={marginLeft}
+  style:margin-right={marginRight}
+  style:box-shadow={boxShadow}
+  style:display="flex"
+  style:flex-direction="column"
+  on:click
+  on:keypress
+  class:border-solid={outlined}
+>
+  <div style:flex="none" class="header">
+    <slot name="header" />
+  </div>
+  <div style:flex-shrink="1" style:overflow-y="auto" class="body">
+    <slot />
+  </div>
+  <div style:flex="none" class="footer flex-none">
+    <slot name="footer" />
+  </div>
+</div>

package/dist/common/Card.svelte.d.ts

@@ -0,0 +1,40 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        outlined?: boolean | undefined;
+        maxWidth?: string | undefined;
+        maxHeight?: string | undefined;
+        minWidth?: string | undefined;
+        minHeight?: string | undefined;
+        width?: string | undefined;
+        height?: string | undefined;
+        padding?: string | undefined;
+        borderRadius?: string | undefined;
+        backgroundColor?: string | undefined;
+        color?: string | undefined;
+        borderColor?: string | undefined;
+        borderWidth?: string | undefined;
+        marginBottom?: string | undefined;
+        marginTop?: string | undefined;
+        marginLeft?: string | undefined;
+        marginRight?: string | undefined;
+        boxShadow?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        keypress: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        default: {};
+        footer: {};
+    };
+};
+export type CardProps = typeof __propDef.props;
+export type CardEvents = typeof __propDef.events;
+export type CardSlots = typeof __propDef.slots;
+export default class Card extends SvelteComponentTyped<CardProps, CardEvents, CardSlots> {
+}
+export {};

package/dist/common/Gesture.svelte

@@ -0,0 +1,57 @@
+<script>import { createEventDispatcher } from "svelte";
+const dispatch = createEventDispatcher();
+export let timeThreshold = 200, diagonalThreshold = 100;
+let lastTouch, startTouch, endTouch, startTime, endTime;
+function handleTouchStart(event) {
+  lastTouch = event.touches[0];
+  startTouch = event.touches[0];
+  startTime = new Date();
+}
+function handleTouchEnd(event) {
+  endTouch = event.changedTouches[0];
+  endTime = new Date();
+  let timeDifference = endTime.getTime() - startTime.getTime();
+  if (timeDifference < timeThreshold) {
+    let direction;
+    let xDifference = endTouch.clientX - startTouch.clientX;
+    let yDifference = endTouch.clientY - startTouch.clientY;
+    if (Math.abs(Math.abs(xDifference) - Math.abs(yDifference)) < diagonalThreshold)
+      return;
+    if (Math.abs(xDifference) > Math.abs(yDifference)) {
+      if (xDifference > 0) {
+        direction = "right";
+      } else {
+        direction = "left";
+      }
+    } else {
+      if (yDifference > 0) {
+        direction = "down";
+      } else {
+        direction = "up";
+      }
+    }
+    dispatch("swipe-" + direction, {
+      direction,
+      timeDifference,
+      xDifference,
+      yDifference
+    });
+    dispatch("swipe", {
+      direction,
+      timeDifference,
+      xDifference,
+      yDifference
+    });
+  }
+}
+function handleTouchMove(event) {
+  let currentTouch = event.changedTouches[0];
+  lastTouch = currentTouch;
+}
+</script>
+
+<svelte:window
+  on:touchstart={handleTouchStart}
+  on:touchend={handleTouchEnd}
+  on:touchmove={handleTouchMove}
+/>

package/{common → dist/common}/Gesture.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        timeThreshold?: number;
-        diagonalThreshold?: number;
+        timeThreshold?: number | undefined;
+        diagonalThreshold?: number | undefined;
     };
     events: {
         swipe: CustomEvent<any>;
@@ -11,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type GestureProps = typeof __propDef.props;
-export declare type GestureEvents = typeof __propDef.events;
-export declare type GestureSlots = typeof __propDef.slots;
+export type GestureProps = typeof __propDef.props;
+export type GestureEvents = typeof __propDef.events;
+export type GestureSlots = typeof __propDef.slots;
 export default class Gesture extends SvelteComponentTyped<GestureProps, GestureEvents, GestureSlots> {
 }
 export {};

package/dist/common/IntersectionObserver.svelte

@@ -0,0 +1,47 @@
+<script>import { onMount } from "svelte";
+export let once = false;
+export let top = 0;
+export let bottom = 0;
+export let left = 0;
+export let right = 0;
+let intersecting = false;
+let container;
+onMount(() => {
+  if (typeof IntersectionObserver !== "undefined") {
+    const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        intersecting = entries[0].isIntersecting;
+        if (intersecting && once) {
+          observer.unobserve(container);
+        }
+      },
+      {
+        rootMargin
+      }
+    );
+    observer.observe(container);
+    return () => observer.unobserve(container);
+  }
+  function handler() {
+    const bcr = container.getBoundingClientRect();
+    intersecting = bcr.bottom + bottom > 0 && bcr.right + right > 0 && bcr.top - top < window.innerHeight && bcr.left - left < window.innerWidth;
+    if (intersecting && once) {
+      window.removeEventListener("scroll", handler);
+    }
+  }
+  window.addEventListener("scroll", handler);
+  return () => window.removeEventListener("scroll", handler);
+});
+</script>
+
+<div bind:this={container}>
+  <slot {intersecting} />
+</div>
+
+<style>
+  div {
+    width: 100%;
+    height: 100%;
+  }
+</style>

package/dist/common/IntersectionObserver.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        once?: boolean | undefined;
+        top?: number | undefined;
+        bottom?: number | undefined;
+        left?: number | undefined;
+        right?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            intersecting: boolean;
+        };
+    };
+};
+export type IntersectionObserverProps = typeof __propDef.props;
+export type IntersectionObserverEvents = typeof __propDef.events;
+export type IntersectionObserverSlots = typeof __propDef.slots;
+export default class IntersectionObserver extends SvelteComponentTyped<IntersectionObserverProps, IntersectionObserverEvents, IntersectionObserverSlots> {
+}
+export {};

package/dist/common/MediaQuery.svelte

@@ -0,0 +1,40 @@
+<script>import mediaQuery from "../stores/mediaQuery";
+$:
+  xsAndDown = $mediaQuery.xs;
+$:
+  sAndDown = $mediaQuery.s || $mediaQuery.xs;
+$:
+  mAndDown = $mediaQuery.s || $mediaQuery.xs || $mediaQuery.m;
+$:
+  lAndDown = $mediaQuery.s || $mediaQuery.xs || $mediaQuery.m || $mediaQuery.l;
+$:
+  xlAndDown = $mediaQuery.s || $mediaQuery.xs || $mediaQuery.m || $mediaQuery.l || $mediaQuery.xl;
+$:
+  xlAndUp = $mediaQuery.xl;
+$:
+  lAndUp = $mediaQuery.xl || $mediaQuery.l;
+$:
+  mAndUp = $mediaQuery.xl || $mediaQuery.l || $mediaQuery.m;
+$:
+  sAndUp = $mediaQuery.xl || $mediaQuery.l || $mediaQuery.m || $mediaQuery.s || $mediaQuery.xs;
+$:
+  xsAndUp = $mediaQuery.xl || $mediaQuery.l || $mediaQuery.m || $mediaQuery.s || $mediaQuery.xs;
+</script>
+
+<slot
+  xs={$mediaQuery.xs}
+  s={$mediaQuery.s}
+  m={$mediaQuery.m}
+  l={$mediaQuery.l}
+  xl={$mediaQuery.xl}
+  {xsAndDown}
+  {sAndDown}
+  {mAndDown}
+  {lAndDown}
+  {xlAndDown}
+  {xlAndUp}
+  {lAndUp}
+  {mAndUp}
+  {sAndUp}
+  {xsAndUp}
+/>

package/{common → dist/common}/MediaQuery.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
@@ -24,9 +24,9 @@ declare const __propDef: {
         };
     };
 };
-export declare type MediaQueryProps = typeof __propDef.props;
-export declare type MediaQueryEvents = typeof __propDef.events;
-export declare type MediaQuerySlots = typeof __propDef.slots;
+export type MediaQueryProps = typeof __propDef.props;
+export type MediaQueryEvents = typeof __propDef.events;
+export type MediaQuerySlots = typeof __propDef.slots;
 export default class MediaQuery extends SvelteComponentTyped<MediaQueryProps, MediaQueryEvents, MediaQuerySlots> {
 }
 export {};

package/dist/common/Menu.svelte

@@ -0,0 +1,120 @@
+<script>import { v4 as uuidv4 } from "uuid";
+import {
+  fly
+} from "svelte/transition";
+export let open = false, top = void 0, left = void 0, width, height, maxHeight = void 0, overflow = "auto", refreshPosition = false, boxShadow = void 0, borderRadius = void 0, activator = void 0, anchor = "bottom", closeOnClickOutside = false, inAnimation = fly, inAnimationConfig = {
+  duration: 100,
+  y: 10
+}, outAnimation = fly, outAnimationConfig = {
+  duration: 100,
+  y: 10
+}, menuElement = void 0;
+let zIndex = 50, currentUid = uuidv4();
+function calculateMenuPosition(params) {
+  if (params.menuElement) {
+    if (params.activator) {
+      if (anchor == "bottom") {
+        let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
+        let activatorHeight = params.activator.offsetHeight;
+        top = activatorTop + window.scrollY + activatorHeight;
+        left = activatorLeft + window.scrollX;
+      } else if (anchor == "bottom-center") {
+        let { left: activatorLeft, top: activatorTop } = params.activator.getBoundingClientRect();
+        let activatorHeight = params.activator.offsetHeight;
+        let activatorWidth = params.activator.offsetWidth;
+        let menuWidth = params.menuElement.offsetWidth;
+        top = activatorTop + window.scrollY + activatorHeight;
+        left = activatorLeft + window.scrollX;
+        if (menuWidth > activatorWidth) {
+          left = left - (menuWidth - activatorWidth) / 2;
+        } else {
+          left = left - (activatorWidth - menuWidth) / 2;
+        }
+      }
+    }
+    if (window.innerWidth + window.scrollX < (left || 0) + (menuElement?.offsetWidth || 0)) {
+      left = Math.max(
+        window.innerWidth + window.scrollX - (menuElement?.offsetWidth || 0),
+        0
+      );
+    }
+  }
+}
+$:
+  if (open) {
+    let otherMenus = document.querySelectorAll("[data-menu=true]");
+    let otherDialogs = document.querySelectorAll("[data-dialog=true]");
+    let maxZIndex = void 0;
+    if (otherDialogs.length > 0) {
+      otherDialogs.forEach((dialog) => {
+        if (!maxZIndex || maxZIndex < Number(dialog.style.zIndex))
+          maxZIndex = Number(dialog.style.zIndex);
+      });
+    }
+    if (otherMenus.length > 0) {
+      let maxZIndex2;
+      otherMenus.forEach((menu) => {
+        if (!maxZIndex2 || maxZIndex2 < Number(menu.style.zIndex))
+          maxZIndex2 = Number(menu.style.zIndex);
+      });
+    }
+    if (!!activator && !!menuElement)
+      calculateMenuPosition({ activator, menuElement });
+    if (maxZIndex)
+      zIndex = maxZIndex + 2;
+  }
+$:
+  if (!!width && !!activator && !!menuElement) {
+    calculateMenuPosition({ activator, menuElement });
+  }
+$:
+  if (refreshPosition && !!activator && !!menuElement) {
+    calculateMenuPosition({ activator, menuElement });
+    refreshPosition = false;
+  }
+$:
+  if (closeOnClickOutside && !!menuElement) {
+    window.addEventListener("click", () => {
+      open = false;
+    });
+    window.addEventListener("touchstart", () => {
+      open = false;
+    });
+    if (activator) {
+      activator.addEventListener("click", (event) => {
+        event.stopPropagation();
+      });
+      activator.addEventListener("touchstart", (event) => {
+        event.stopPropagation();
+      });
+    }
+    menuElement.addEventListener("click", (event) => {
+      event.stopPropagation();
+    });
+    menuElement.addEventListener("touchstart", (event) => {
+      event.stopPropagation();
+    });
+  }
+</script>
+
+{#if open}
+  <div
+    bind:this={menuElement}
+    data-menu
+    data-uid={currentUid}
+    style:z-index={zIndex}
+    style:position="absolute"
+    style:top={top + "px"}
+    style:box-shadow={boxShadow}
+    style:border-radius={borderRadius}
+    style:left={left + "px"}
+    style:height
+    style:max-height={maxHeight}
+    style:width
+    style:overflow
+    in:inAnimation={inAnimationConfig}
+    out:outAnimation={outAnimationConfig}
+  >
+    <slot />
+  </div>
+{/if}

package/dist/common/Menu.svelte.d.ts

@@ -0,0 +1,36 @@
+import { SvelteComponentTyped } from "svelte";
+import { type FadeParams, type FlyParams, type SlideParams, type TransitionConfig } from "svelte/transition";
+declare const __propDef: {
+    props: {
+        open?: boolean | undefined;
+        top?: number | undefined;
+        left?: number | undefined;
+        width: string;
+        height: string;
+        maxHeight?: string | undefined;
+        overflow?: string | undefined;
+        refreshPosition?: boolean | undefined;
+        boxShadow?: string | undefined;
+        borderRadius?: string | undefined;
+        activator?: HTMLElement | undefined;
+        anchor?: "bottom" | "bottom-center" | undefined;
+        closeOnClickOutside?: boolean | undefined;
+        inAnimation?: ((node: Element, params?: SlideParams | FlyParams | FadeParams) => TransitionConfig) | undefined;
+        inAnimationConfig?: SlideParams | FlyParams | FadeParams | undefined;
+        outAnimation?: ((node: Element, params?: SlideParams | FlyParams | FadeParams) => TransitionConfig) | undefined;
+        outAnimationConfig?: SlideParams | FlyParams | FadeParams | undefined;
+        menuElement?: HTMLElement | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type MenuProps = typeof __propDef.props;
+export type MenuEvents = typeof __propDef.events;
+export type MenuSlots = typeof __propDef.slots;
+export default class Menu extends SvelteComponentTyped<MenuProps, MenuEvents, MenuSlots> {
+}
+export {};

package/{common → dist/common}/SimpleTable.svelte

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>import { dateToString } from "../dates/utils";
-export let headers = undefined, items = undefined, backgroundColor = "rgba(255,255,255,0)", headerColor = "rgba(0,0,0,0.05)", rowSeparatorColor = headerColor, headerHeight = "30px", headerBorderRadius = "5px", rowHeight = "70px", minWidth = undefined, height = "100%", width = "100%";
+export let headers = [], items = [], backgroundColor = "rgba(255,255,255,0)", headerColor = "rgba(0,0,0,0.05)", rowSeparatorColor = headerColor, headerHeight = "30px", headerBorderRadius = "5px", rowHeight = "70px", minWidth = void 0, height = "100%", width = "100%";
 </script>
 
 {#if !!items && Array.isArray(items)}
@@ -11,8 +11,8 @@ export let headers = undefined, items = undefined, backgroundColor = "rgba(255,2
       style:width="100%"
       style:min-width={minWidth}
     >
-      <thead 
-        style:background-color={headerColor} 
+      <thead
+        style:background-color={headerColor}
         style:height={headerHeight}
         style:border-radius={headerBorderRadius}
       >