lutra 0.0.33 → 0.1.0

package/dist/display/chart.js

@@ -1,212 +0,0 @@
-export function scale(domain, range) {
-    const m = (range[1] - range[0]) / (domain[1] - domain[0]);
-    return (num) => range[0] + m * (num - domain[0]);
-}
-export function makeScale(numbers, itemsToReturn) {
-    const min = 0;
-    const max = Math.max(...numbers);
-    const interval = Math.ceil(max / itemsToReturn);
-    const getRoundedInterval = (value) => {
-        const power = Math.floor(Math.log10(value));
-        const factor = Math.pow(10, power);
-        if (value / factor <= 2) {
-            return 2 * factor;
-        }
-        else if (value / factor <= 5) {
-            return 5 * factor;
-        }
-        else {
-            return 10 * factor;
-        }
-    };
-    const roundedInterval = getRoundedInterval(interval);
-    const maxOutputValue = Math.ceil(max / roundedInterval) * roundedInterval;
-    const outputLength = maxOutputValue / roundedInterval + 1;
-    const output = new Array(outputLength)
-        .fill(0)
-        .map((_, index) => index * roundedInterval);
-    return output;
-}
-export function getShortKValue(num) {
-    if (num >= 1000000) {
-        const shortMValue = (num / 1000000).toFixed(1);
-        if (shortMValue.endsWith('.0')) {
-            return shortMValue.slice(0, -2) + 'M';
-        }
-        else {
-            return shortMValue + 'M';
-        }
-    }
-    else if (num >= 1000) {
-        const shortKValue = (num / 1000).toFixed(1);
-        if (shortKValue.endsWith('.0')) {
-            return shortKValue.slice(0, -2) + 'K';
-        }
-        else {
-            return shortKValue + 'K';
-        }
-    }
-    else {
-        return num.toString();
-    }
-}
-/**
-* Interpolates a Catmull-Rom Spline through a series of x/y points
-* Converts the CR Spline to Cubic Beziers for use with SVG items
-*
-* If 'alpha' is 0.5 then the 'Centripetal' variant is used
-* If 'alpha' is 1 then the 'Chordal' variant is used
-*
-* @param  {Array} data - Array of points, each point in object literal holding x/y values
-* @return {String} d - SVG string with cubic bezier curves representing the Catmull-Rom Spline
-*/
-export function catmullRomBase(data, alpha) {
-    if (alpha == 0 || alpha === undefined) {
-        throw new Error('Alpha value must be greater than 0');
-    }
-    else {
-        let pointsData = [];
-        var p0, p1, p2, p3, bp1, bp2, d1, d2, d3, A, B, N, M;
-        var d3powA, d2powA, d3pow2A, d2pow2A, d1pow2A, d1powA;
-        var d = Math.round(data[0].x) + ',' + Math.round(data[0].y) + ' ';
-        var length = data.length;
-        for (var i = 0; i < length - 1; i++) {
-            p0 = i == 0 ? data[0] : data[i - 1];
-            p1 = data[i];
-            p2 = data[i + 1];
-            p3 = i + 2 < length ? data[i + 2] : p2;
-            d1 = Math.sqrt(Math.pow(p0.x - p1.x, 2) + Math.pow(p0.y - p1.y, 2));
-            d2 = Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
-            d3 = Math.sqrt(Math.pow(p2.x - p3.x, 2) + Math.pow(p2.y - p3.y, 2));
-            // Catmull-Rom to Cubic Bezier conversion matrix
-            // A = 2d1^2a + 3d1^a * d2^a + d3^2a
-            // B = 2d3^2a + 3d3^a * d2^a + d2^2a
-            // [   0             1            0          0          ]
-            // [   -d2^2a /N     A/N          d1^2a /N   0          ]
-            // [   0             d3^2a /M     B/M        -d2^2a /M  ]
-            // [   0             0            1          0          ]
-            d3powA = Math.pow(d3, alpha);
-            d3pow2A = Math.pow(d3, 2 * alpha);
-            d2powA = Math.pow(d2, alpha);
-            d2pow2A = Math.pow(d2, 2 * alpha);
-            d1powA = Math.pow(d1, alpha);
-            d1pow2A = Math.pow(d1, 2 * alpha);
-            A = 2 * d1pow2A + 3 * d1powA * d2powA + d2pow2A;
-            B = 2 * d3pow2A + 3 * d3powA * d2powA + d2pow2A;
-            N = 3 * d1powA * (d1powA + d2powA);
-            if (N > 0) {
-                N = 1 / N;
-            }
-            M = 3 * d3powA * (d3powA + d2powA);
-            if (M > 0) {
-                M = 1 / M;
-            }
-            bp1 = {
-                x: (-d2pow2A * p0.x + A * p1.x + d1pow2A * p2.x) * N,
-                y: (-d2pow2A * p0.y + A * p1.y + d1pow2A * p2.y) * N
-            };
-            bp2 = {
-                x: (d3pow2A * p1.x + B * p2.x - d2pow2A * p3.x) * M,
-                y: (d3pow2A * p1.y + B * p2.y - d2pow2A * p3.y) * M
-            };
-            if (bp1.x == 0 && bp1.y == 0) {
-                bp1 = p1;
-            }
-            if (bp2.x == 0 && bp2.y == 0) {
-                bp2 = p2;
-            }
-            //d += 'C' + bp1.x + ',' + bp1.y + ' ' + bp2.x + ',' + bp2.y + ' ' + p2.x + ',' + p2.y + ' ';
-            pointsData.push({
-                p1: p1,
-                p2: p2,
-                bp1: bp1,
-                bp2: bp2
-            });
-        }
-        return pointsData;
-    }
-}
-;
-/**
-* Returns the SVG path for Catmull-Rom spline interpolation
-*/
-export function catmullRomToSVG(pointsData, alpha, firstValue) {
-    //const pointsData = catmullRomBase(data, alpha);
-    if (!pointsData)
-        return false;
-    let d = Math.round(firstValue.x) + ',' + Math.round(firstValue.y) + ' ';
-    //let d = '';
-    pointsData.forEach(({ p1, p2, bp1, bp2 }) => {
-        d += 'C' + bp1.x + ',' + bp1.y + ' ' + bp2.x + ',' + bp2.y + ' ' + p2.x + ',' + p2.y + ' ';
-    });
-    return d;
-}
-/**
-* Returns the Y coordinate for the given X value on the Catmull-Rom spline
-*/
-export function catmullRomGetY(pointsData, alpha, xValue, yPadding) {
-    if (!pointsData)
-        return false;
-    // Find the minimum and maximum Y values
-    let minY = pointsData[0].p1.y;
-    let maxY = pointsData[0].p1.y;
-    for (const { p1, p2, bp1, bp2 } of pointsData) {
-        minY = Math.min(minY, p1.y, p2.y, bp1.y, bp2.y);
-        maxY = Math.max(maxY, p1.y, p2.y, bp1.y, bp2.y);
-    }
-    // Calculate the range and padding for Y values
-    const yRange = maxY - minY;
-    const yOffset = minY + yPadding * yRange / 2;
-    const yScale = 1 - yPadding;
-    let resultY;
-    for (let i = 0; i < pointsData.length; i++) {
-        const { p1, p2, bp1, bp2 } = pointsData[i];
-        // Scale Y coordinates of the points based on the yPadding
-        const scaledP1 = { ...p1, y: yOffset + (p1.y - minY) * yScale };
-        const scaledP2 = { ...p2, y: yOffset + (p2.y - minY) * yScale };
-        const scaledBp1 = { ...bp1, y: yOffset + (bp1.y - minY) * yScale };
-        const scaledBp2 = { ...bp2, y: yOffset + (bp2.y - minY) * yScale };
-        if (xValue >= p1.x && xValue <= p2.x) {
-            // Use the de Casteljau's algorithm to find the Y coordinate for the given X value
-            const t = (xValue - p1.x) / (p2.x - p1.x);
-            const q0 = lerp(scaledP1, scaledBp1, t);
-            const q1 = lerp(scaledBp1, scaledBp2, t);
-            const q2 = lerp(scaledBp2, scaledP2, t);
-            const r0 = lerp(q0, q1, t);
-            const r1 = lerp(q1, q2, t);
-            const resultPoint = lerp(r0, r1, t);
-            // Rescale the resulting Y coordinate back to its original range
-            resultY = minY + (resultPoint.y - yOffset) / yScale;
-            break;
-        }
-    }
-    return resultY;
-}
-/**
-* Linear interpolation helper function
-*/
-export function lerp(point1, point2, t) {
-    return {
-        x: point1.x + (point2.x - point1.x) * t,
-        y: point1.y + (point2.y - point1.y) * t,
-    };
-}
-export function getSVGSize(svg) {
-    const rect = svg.getBoundingClientRect();
-    const styles = window.getComputedStyle(svg);
-    const padding = {
-        left: parseFloat(styles.paddingLeft),
-        right: parseFloat(styles.paddingRight),
-        top: parseFloat(styles.paddingTop),
-        bottom: parseFloat(styles.paddingBottom),
-    };
-    const innerWidth = rect.width - padding.left - padding.right;
-    const innerHeight = rect.height - padding.top - padding.bottom;
-    return {
-        innerWidth: innerWidth,
-        innerHeight: innerHeight,
-        width: rect.width,
-        height: rect.height,
-        padding: padding,
-    };
-}

package/dist/display/index.d.ts

@@ -1,24 +0,0 @@
-export { default as Avatar } from './Avatar.svelte';
-export { default as Badge } from './Badge.svelte';
-export { default as Callout } from './Callout.svelte';
-export { default as Close } from './Close.svelte';
-export { default as Code } from './Code.svelte';
-export { default as ContextTip } from './ContextTip.svelte';
-export { default as Details } from './Details.svelte';
-export { default as Hero } from './Hero.svelte';
-export { default as Icon } from './Icon.svelte';
-export { default as IconButton } from './IconButton.svelte';
-export { default as Image } from './Image.svelte';
-export { default as Indicator } from './Indicator.svelte';
-export { default as Inset } from './Inset.svelte';
-export { default as Notification } from './Notification.svelte';
-export { default as Popup } from './Popup.svelte';
-export { default as Stat } from './Stat.svelte';
-export { default as LineChart } from './LineChart.svelte';
-export { default as LoadingIndicator } from './LoadingIndicator.svelte';
-export { default as Modal } from './Modal.svelte';
-export { default as Table } from './Table.svelte';
-export { default as Tag } from './Tag.svelte';
-export { default as Tooltip } from './Tooltip.svelte';
-export * from './chart.js';
-export * from './notifications.svelte.js';

package/dist/display/index.js

@@ -1,24 +0,0 @@
-export { default as Avatar } from './Avatar.svelte';
-export { default as Badge } from './Badge.svelte';
-export { default as Callout } from './Callout.svelte';
-export { default as Close } from './Close.svelte';
-export { default as Code } from './Code.svelte';
-export { default as ContextTip } from './ContextTip.svelte';
-export { default as Details } from './Details.svelte';
-export { default as Hero } from './Hero.svelte';
-export { default as Icon } from './Icon.svelte';
-export { default as IconButton } from './IconButton.svelte';
-export { default as Image } from './Image.svelte';
-export { default as Indicator } from './Indicator.svelte';
-export { default as Inset } from './Inset.svelte';
-export { default as Notification } from './Notification.svelte';
-export { default as Popup } from './Popup.svelte';
-export { default as Stat } from './Stat.svelte';
-export { default as LineChart } from './LineChart.svelte';
-export { default as LoadingIndicator } from './LoadingIndicator.svelte';
-export { default as Modal } from './Modal.svelte';
-export { default as Table } from './Table.svelte';
-export { default as Tag } from './Tag.svelte';
-export { default as Tooltip } from './Tooltip.svelte';
-export * from './chart.js';
-export * from './notifications.svelte.js';

package/dist/display/notifications.svelte.d.ts

@@ -1,21 +0,0 @@
-import { type OverlayPosition } from "../layout/overlays.svelte.js";
-import type { Component, Snippet } from "svelte";
-/**
- * Add a notification to the screen.
- * @param {object} opts - The options for the notification.
- * @param {string} opts.content - The content of the notification.
- * @param {OverlayPosition} opts.position - The position of the notification.
- * @param {Snippet | Component} opts.icon - The icon of the notification.
- * @param {string} opts.title - The title of the notification.
- * @param {string} opts.stack - Group notifications together by named stacks.
- * @param {number} opts.autoClose - The time in milliseconds before the notification closes.
- * @returns {void}
- */
-export declare function addNotification(opts: {
-    content: string;
-    position?: OverlayPosition;
-    icon?: Snippet | Component;
-    title?: string;
-    stack?: string;
-    autoClose?: number;
-}): void;

package/dist/display/notifications.svelte.js

@@ -1,31 +0,0 @@
-import { createId } from "../utils/id.js";
-import { addOverlay, removeOverlay } from "../layout/overlays.svelte.js";
-import NotificationSvelte from "./Notification.svelte";
-/**
- * Add a notification to the screen.
- * @param {object} opts - The options for the notification.
- * @param {string} opts.content - The content of the notification.
- * @param {OverlayPosition} opts.position - The position of the notification.
- * @param {Snippet | Component} opts.icon - The icon of the notification.
- * @param {string} opts.title - The title of the notification.
- * @param {string} opts.stack - Group notifications together by named stacks.
- * @param {number} opts.autoClose - The time in milliseconds before the notification closes.
- * @returns {void}
- */
-export function addNotification(opts) {
-    const id = createId();
-    addOverlay({
-        id,
-        z: 100,
-        content: NotificationSvelte,
-        props: { id, ...opts },
-        stack: opts.stack,
-        position: opts.position || "bottom right",
-        layer: "notifications",
-    });
-    if (opts.autoClose) {
-        setTimeout(() => {
-            removeOverlay(id);
-        }, opts.autoClose);
-    }
-}

package/dist/form/Button.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">import Icon from "../display/Icon.svelte";
-import { getContext } from "svelte";
-let {
-  href,
-  type = "button",
-  class: className,
-  size = "md",
-  kind = "default",
-  disabled = false,
-  icon,
-  onclick,
-  children
-} = $props();
-const form = getContext("form");
-</script>
-
-{#if href}
-    <a class="Button Link button {size} {kind} {className}" {href} {onclick}>
-        {#if icon}
-            <Icon {icon} />
-        {/if}
-        {@render children()}
-    </a>
-{:else}
-    <button class="Button button {size} {kind} {className}" type={type} disabled={disabled || form?.state === 'loading'} {onclick}>
-        {#if icon}
-            <Icon {icon} />
-        {/if}
-        {@render children()}
-    </button>
-{/if}
-
-<style>
-    .Button {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-    }
-</style>

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

@@ -1,26 +0,0 @@
-import { type Component, type Snippet } from '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;
-    z_$$bindings?: Bindings;
-}
-declare const Button: $$__sveltets_2_IsomorphicComponent<{
-    href?: string;
-    type?: "button" | "submit" | "reset";
-    kind?: "default" | "outlined" | "secondary" | "warn";
-    size?: "sm" | "md" | "lg" | "xl";
-    class?: string;
-    disabled?: boolean;
-    icon?: string | Snippet | Component;
-    onclick?: (event: MouseEvent) => void;
-    children: Snippet;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Button = InstanceType<typeof Button>;
-export default Button;

package/dist/form/FieldActions.svelte

@@ -1,68 +0,0 @@
-<script lang="ts">import StringOrSnippet from "../utils/StringOrSnippet.svelte";
-let {
-  align = "end",
-  children,
-  info
-} = $props();
-</script>
-
-<div class="FieldActions {align}" class:hasInfo={!!info}>
-    {#if info}
-        <div class="Info">
-            <StringOrSnippet content={info} />
-        </div>
-    {/if}
-    <div class="Actions">
-        {@render children()}
-    </div>
-</div>
-
-<style>
-    .FieldActions {
-        display: grid;
-        background: color-mix(in srgb, var(--bg-subtle) calc(var(--fcc) * 100%), transparent);
-        padding: calc(1.5em * var(--fcc)) calc(3em * var(--fcc));
-        grid-column: 1 / -1;
-        grid-template-columns: subgrid;
-        border-bottom-left-radius: inherit;
-        border-bottom-right-radius: inherit;
-        align-items: center;
-    }
-    .Actions {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        gap: 1.35em;
-        grid-column: 2 / -1;
-    }
-    .FieldActions.start .Actions {
-        justify-content: start;
-        grid-column: 1 / -1;
-    }
-    .FieldActions.middle .Actions {
-        justify-content: center;
-        grid-column: 1 / -1;
-    }
-    .FieldActions.end .Actions {
-        justify-content: end;
-        grid-column: 1 / -1;
-    }
-    .FieldActions.hasInfo .Actions {
-        grid-column: 2 / -1;
-    }
-    @container (max-width: 480px) {
-        .FieldActions {
-            justify-content: center;
-            gap: 1rem;
-        }
-        .Info {
-            order: 1;
-            text-align: center;
-        }
-        .Actions {
-            order: -1;
-            flex-direction: column;
-        }
-    }
-</style>

package/dist/form/FieldActions.svelte.d.ts

@@ -1,20 +0,0 @@
-import type { Snippet } from "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;
-    z_$$bindings?: Bindings;
-}
-declare const FieldActions: $$__sveltets_2_IsomorphicComponent<{
-    align?: "justified" | "start" | "middle" | "end";
-    children: Snippet;
-    info?: string | Snippet;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type FieldActions = InstanceType<typeof FieldActions>;
-export default FieldActions;

package/dist/form/FieldContainer.svelte

@@ -1,37 +0,0 @@
-<script lang="ts">let {
-  children,
-  contained
-} = $props();
-</script>
-
-<div class="FieldContainer" class:contained style="--fcc: {contained ? 1 : 0}">
-    {@render children()}
-</div>
-
-<style>
-    .FieldContainer {
-        container-type: inline-size;
-        display: grid;
-        row-gap: 1.5em;
-        column-gap: 3em;
-        grid-template-columns: minmax(25ch, 35%) minmax(min-content, 1fr);
-        border-radius: var(--border-radius);
-        background: var(--bg, var(--form-bg));
-    }
-    .FieldContainer.contained {
-        border: var(--border);
-        gap: 0;
-    }
-    .FieldContainer :global(.FieldSection:has(+ .FieldActions)) {
-        margin-bottom: 0;
-        border-bottom: 0;
-    }
-    .FieldContainer.contained :global(.FieldSection:has(+ .FieldActions)) {
-        border-bottom: var(--border);
-    }
-    @container (max-width: 800px) {
-        .FieldContainer {
-            grid-template-columns: 1fr;
-        }
-    }
-</style>

package/dist/form/FieldContainer.svelte.d.ts

@@ -1,19 +0,0 @@
-import type { Snippet } from "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;
-    z_$$bindings?: Bindings;
-}
-declare const FieldContainer: $$__sveltets_2_IsomorphicComponent<{
-    contained?: boolean;
-    children: Snippet;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type FieldContainer = InstanceType<typeof FieldContainer>;
-export default FieldContainer;

package/dist/form/FieldContent.svelte

@@ -1,153 +0,0 @@
-<script lang="ts">import Label from "./Label.svelte";
-import FieldError from "./FieldError.svelte";
-import StringOrSnippet from "../utils/StringOrSnippet.svelte";
-let {
-  id,
-  contained,
-  prefix,
-  suffix,
-  label,
-  labelTip,
-  help,
-  type = "text",
-  direction = "column",
-  // 'row' | 'column'
-  required,
-  children,
-  field,
-  issue
-} = $props();
-</script>
-
-{#snippet _prefix()}
-    <div class="Fix Prefix">
-        <StringOrSnippet content={prefix} />
-    </div>
-{/snippet}
-
-{#snippet _suffix()}
-    <div class="Fix Suffix">
-        <StringOrSnippet content={suffix} />
-    </div>
-{/snippet}
-
-<div class="FieldContentContainer">
-    <div class="FieldContent {type} {direction}" class:contained>
-        <Label {label} tip={labelTip} {id} {required} />
-        {#if contained}
-            <div
-                class="Field"
-                class:hasPrefix={prefix}
-                class:hasSuffix={suffix}
-                class:invalid={field?.tainted && issue?.code}
-            >
-                {#if prefix}
-                    {@render _prefix()}
-                {/if}
-    
-                {@render children()}
-    
-                {#if suffix}
-                    {@render _suffix()}
-                {/if}
-            </div>
-        {:else}
-            {#if prefix}
-                {@render _prefix()}
-            {/if}
-    
-            {@render children()}
-    
-            {#if suffix}
-                {@render _suffix()}
-            {/if}
-        {/if}
-    
-    </div>
-    
-    {#if help}
-        <div class="Help">
-            <StringOrSnippet content={help} />
-        </div>
-    {/if}
-    
-    {#if field?.tainted && issue?.code}
-        <FieldError code={issue.code} message={issue.message} />
-    {/if}
-</div>
-
-<style>
-    .FieldContentContainer {
-        display: flex;
-        flex-direction: column;
-        gap: 0.75em;
-    }
-    .FieldContent {
-        display: flex;
-        gap: 0.75em;
-        flex-direction: column;
-        font-size: var(--font-size, 1em);
-    }
-    .FieldContent.row {
-        flex-direction: row-reverse;
-        justify-content: start;
-        align-items: center;
-        flex-shrink: 0;
-    }
-    .Field {
-        background-color: var(--field-bg);
-        border: var(--field-border-size) var(--field-border-style) var(--field-border-color);
-        border-radius: var(--field-radius);
-        display: flex;
-    }
-    .Field:has(input:user-invalid),
-    .Field.invalid {
-        border-color: var(--field-border-color-error);
-    }
-    .Field > *:not(input) {
-        flex-grow: 0;
-        flex-shrink: 0;
-    }
-    .Fix {
-        display: flex;
-        align-items: center;
-        padding-inline: 0.75em;
-        font-size: 1em;
-        line-height: 1.5;
-        color: var(--text-subtle);
-    }
-    .Suffix {
-        padding-inline-start: 0;
-    }
-    .Prefix {
-        padding-inline-end: 0;
-    }
-    .Field:has(input:focus-visible),
-    .Field:has(select:focus-visible),
-    .Field:has(textarea:focus-visible) {
-        outline: var(--focus-outline);
-    }
-    .Field:has(input:focus-visible:user-invalid),
-    .Field:has(select:focus-visible:user-invalid),
-    .Field:has(textarea:focus-visible:user-invalid),
-    .Field.invalid:has(input:focus-visible) {
-        outline-color: var(--focus-color-error); 
-    }
-    .Field.hasPrefix :global(input) {
-        padding-inline-start: 0.35em;
-    }
-    .Field :global(button) {
-        margin-right: 2px;
-    }
-    .Field :global(button:focus-visible) {
-        outline: var(--focus-outline);
-        outline-offset: 3px;
-        border-radius: calc(var(--field-radius) - 2px);
-    }
-    .Help {
-        font-size: 0.85em;
-        color: var(--text-subtle);
-        line-height: 1.4;
-        font-weight: 400;
-    }
-</style>