@servicetitan/anvil2 3.0.3 → 3.0.4

package/dist/Button-C_V2xQAs.js

@@ -0,0 +1,2188 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useContext, useState, useEffect, useMemo, memo, forwardRef, useCallback } from 'react';
+import { I as Icon } from './Icon-feeG7gXA.js';
+import { S as Spinner } from './Spinner-B7tTWcP6.js';
+import { w as warnOnce } from './warnOnce-Y9PRHcU4.js';
+import { u as usePrefersReducedMotion } from './usePrefersReducedMotion-DR9B_D6w.js';
+import { u as useTheme } from './useTheme-B4i6a3bM.js';
+import { d as isEasingArray, e as interpolate$1, u as useConstant, f as motionValue, M as MotionConfigContext, c as useIsomorphicLayoutEffect, g as frame, j as cancelFrame, k as collectMotionValues, r as resolveElements, l as mixNumber, n as removeItem, o as isMotionValue, q as defaultOffset, s as createGeneratorEasing, t as fillOffset, v as isGenerator, x as secondsToMilliseconds, y as invariant, z as progress, V as VisualElement, A as createBox, B as isSVGElement, C as isSVGSVGElement, S as SVGVisualElement, H as HTMLVisualElement, D as visualElementStore, E as animateSingleValue, F as animateTarget, G as spring, m as motion } from './proxy-DEehATlA.js';
+import { c as cx } from './index-De1g9FRV.js';
+import { s as styles } from './Button.module-y-kLMLvt.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
+import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
+import { useTrackingId } from './useTrackingId.js';
+
+const wrap = (min, max, v) => {
+    const rangeSize = max - min;
+    return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
+};
+
+function getEasingForSegment(easing, i) {
+    return isEasingArray(easing) ? easing[wrap(0, easing.length, i)] : easing;
+}
+
+class GroupAnimation {
+    constructor(animations) {
+        // Bound to accomadate common `return animation.stop` pattern
+        this.stop = () => this.runAll("stop");
+        this.animations = animations.filter(Boolean);
+    }
+    get finished() {
+        return Promise.all(this.animations.map((animation) => animation.finished));
+    }
+    /**
+     * TODO: Filter out cancelled or stopped animations before returning
+     */
+    getAll(propName) {
+        return this.animations[0][propName];
+    }
+    setAll(propName, newValue) {
+        for (let i = 0; i < this.animations.length; i++) {
+            this.animations[i][propName] = newValue;
+        }
+    }
+    attachTimeline(timeline) {
+        const subscriptions = this.animations.map((animation) => animation.attachTimeline(timeline));
+        return () => {
+            subscriptions.forEach((cancel, i) => {
+                cancel && cancel();
+                this.animations[i].stop();
+            });
+        };
+    }
+    get time() {
+        return this.getAll("time");
+    }
+    set time(time) {
+        this.setAll("time", time);
+    }
+    get speed() {
+        return this.getAll("speed");
+    }
+    set speed(speed) {
+        this.setAll("speed", speed);
+    }
+    get state() {
+        return this.getAll("state");
+    }
+    get startTime() {
+        return this.getAll("startTime");
+    }
+    get duration() {
+        let max = 0;
+        for (let i = 0; i < this.animations.length; i++) {
+            max = Math.max(max, this.animations[i].duration);
+        }
+        return max;
+    }
+    runAll(methodName) {
+        this.animations.forEach((controls) => controls[methodName]());
+    }
+    play() {
+        this.runAll("play");
+    }
+    pause() {
+        this.runAll("pause");
+    }
+    cancel() {
+        this.runAll("cancel");
+    }
+    complete() {
+        this.runAll("complete");
+    }
+}
+
+class GroupAnimationWithThen extends GroupAnimation {
+    then(onResolve, _onReject) {
+        return this.finished.finally(onResolve).then(() => { });
+    }
+}
+
+function transform(...args) {
+    const useImmediate = !Array.isArray(args[0]);
+    const argOffset = useImmediate ? 0 : -1;
+    const inputValue = args[0 + argOffset];
+    const inputRange = args[1 + argOffset];
+    const outputRange = args[2 + argOffset];
+    const options = args[3 + argOffset];
+    const interpolator = interpolate$1(inputRange, outputRange, options);
+    return useImmediate ? interpolator(inputValue) : interpolator;
+}
+
+/**
+ * Creates a `MotionValue` to track the state and velocity of a value.
+ *
+ * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.
+ *
+ * ```jsx
+ * export const MyComponent = () => {
+ *   const scale = useMotionValue(1)
+ *
+ *   return <motion.div style={{ scale }} />
+ * }
+ * ```
+ *
+ * @param initial - The initial state.
+ *
+ * @public
+ */
+function useMotionValue(initial) {
+    const value = useConstant(() => motionValue(initial));
+    /**
+     * If this motion value is being used in static mode, like on
+     * the Framer canvas, force components to rerender when the motion
+     * value is updated.
+     */
+    const { isStatic } = useContext(MotionConfigContext);
+    if (isStatic) {
+        const [, setLatest] = useState(initial);
+        useEffect(() => value.on("change", setLatest), []);
+    }
+    return value;
+}
+
+function useCombineMotionValues(values, combineValues) {
+    /**
+     * Initialise the returned motion value. This remains the same between renders.
+     */
+    const value = useMotionValue(combineValues());
+    /**
+     * Create a function that will update the template motion value with the latest values.
+     * This is pre-bound so whenever a motion value updates it can schedule its
+     * execution in Framesync. If it's already been scheduled it won't be fired twice
+     * in a single frame.
+     */
+    const updateValue = () => value.set(combineValues());
+    /**
+     * Synchronously update the motion value with the latest values during the render.
+     * This ensures that within a React render, the styles applied to the DOM are up-to-date.
+     */
+    updateValue();
+    /**
+     * Subscribe to all motion values found within the template. Whenever any of them change,
+     * schedule an update.
+     */
+    useIsomorphicLayoutEffect(() => {
+        const scheduleUpdate = () => frame.preRender(updateValue, false, true);
+        const subscriptions = values.map((v) => v.on("change", scheduleUpdate));
+        return () => {
+            subscriptions.forEach((unsubscribe) => unsubscribe());
+            cancelFrame(updateValue);
+        };
+    });
+    return value;
+}
+
+function useComputed(compute) {
+    /**
+     * Open session of collectMotionValues. Any MotionValue that calls get()
+     * will be saved into this array.
+     */
+    collectMotionValues.current = [];
+    compute();
+    const value = useCombineMotionValues(collectMotionValues.current, compute);
+    /**
+     * Synchronously close session of collectMotionValues.
+     */
+    collectMotionValues.current = undefined;
+    return value;
+}
+
+function useTransform(input, inputRangeOrTransformer, outputRange, options) {
+    if (typeof input === "function") {
+        return useComputed(input);
+    }
+    const transformer = typeof inputRangeOrTransformer === "function"
+        ? inputRangeOrTransformer
+        : transform(inputRangeOrTransformer, outputRange, options);
+    return Array.isArray(input)
+        ? useListTransform(input, transformer)
+        : useListTransform([input], ([latest]) => transformer(latest));
+}
+function useListTransform(values, transformer) {
+    const latest = useConstant(() => []);
+    return useCombineMotionValues(values, () => {
+        latest.length = 0;
+        const numValues = values.length;
+        for (let i = 0; i < numValues; i++) {
+            latest[i] = values[i].get();
+        }
+        return transformer(latest);
+    });
+}
+
+function isDOMKeyframes(keyframes) {
+    return typeof keyframes === "object" && !Array.isArray(keyframes);
+}
+
+function resolveSubjects(subject, keyframes, scope, selectorCache) {
+    if (typeof subject === "string" && isDOMKeyframes(keyframes)) {
+        return resolveElements(subject, scope, selectorCache);
+    }
+    else if (subject instanceof NodeList) {
+        return Array.from(subject);
+    }
+    else if (Array.isArray(subject)) {
+        return subject;
+    }
+    else {
+        return [subject];
+    }
+}
+
+function calculateRepeatDuration(duration, repeat, _repeatDelay) {
+    return duration * (repeat + 1);
+}
+
+/**
+ * Given a absolute or relative time definition and current/prev time state of the sequence,
+ * calculate an absolute time for the next keyframes.
+ */
+function calcNextTime(current, next, prev, labels) {
+    if (typeof next === "number") {
+        return next;
+    }
+    else if (next.startsWith("-") || next.startsWith("+")) {
+        return Math.max(0, current + parseFloat(next));
+    }
+    else if (next === "<") {
+        return prev;
+    }
+    else if (next.startsWith("<")) {
+        return Math.max(0, prev + parseFloat(next.slice(1)));
+    }
+    else {
+        return labels.get(next) ?? current;
+    }
+}
+
+function eraseKeyframes(sequence, startTime, endTime) {
+    for (let i = 0; i < sequence.length; i++) {
+        const keyframe = sequence[i];
+        if (keyframe.at > startTime && keyframe.at < endTime) {
+            removeItem(sequence, keyframe);
+            // If we remove this item we have to push the pointer back one
+            i--;
+        }
+    }
+}
+function addKeyframes(sequence, keyframes, easing, offset, startTime, endTime) {
+    /**
+     * Erase every existing value between currentTime and targetTime,
+     * this will essentially splice this timeline into any currently
+     * defined ones.
+     */
+    eraseKeyframes(sequence, startTime, endTime);
+    for (let i = 0; i < keyframes.length; i++) {
+        sequence.push({
+            value: keyframes[i],
+            at: mixNumber(startTime, endTime, offset[i]),
+            easing: getEasingForSegment(easing, i),
+        });
+    }
+}
+
+/**
+ * Take an array of times that represent repeated keyframes. For instance
+ * if we have original times of [0, 0.5, 1] then our repeated times will
+ * be [0, 0.5, 1, 1, 1.5, 2]. Loop over the times and scale them back
+ * down to a 0-1 scale.
+ */
+function normalizeTimes(times, repeat) {
+    for (let i = 0; i < times.length; i++) {
+        times[i] = times[i] / (repeat + 1);
+    }
+}
+
+function compareByTime(a, b) {
+    if (a.at === b.at) {
+        if (a.value === null)
+            return 1;
+        if (b.value === null)
+            return -1;
+        return 0;
+    }
+    else {
+        return a.at - b.at;
+    }
+}
+
+const defaultSegmentEasing = "easeInOut";
+const MAX_REPEAT = 20;
+function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...sequenceTransition } = {}, scope, generators) {
+    const defaultDuration = defaultTransition.duration || 0.3;
+    const animationDefinitions = new Map();
+    const sequences = new Map();
+    const elementCache = {};
+    const timeLabels = new Map();
+    let prevTime = 0;
+    let currentTime = 0;
+    let totalDuration = 0;
+    /**
+     * Build the timeline by mapping over the sequence array and converting
+     * the definitions into keyframes and offsets with absolute time values.
+     * These will later get converted into relative offsets in a second pass.
+     */
+    for (let i = 0; i < sequence.length; i++) {
+        const segment = sequence[i];
+        /**
+         * If this is a timeline label, mark it and skip the rest of this iteration.
+         */
+        if (typeof segment === "string") {
+            timeLabels.set(segment, currentTime);
+            continue;
+        }
+        else if (!Array.isArray(segment)) {
+            timeLabels.set(segment.name, calcNextTime(currentTime, segment.at, prevTime, timeLabels));
+            continue;
+        }
+        let [subject, keyframes, transition = {}] = segment;
+        /**
+         * If a relative or absolute time value has been specified we need to resolve
+         * it in relation to the currentTime.
+         */
+        if (transition.at !== undefined) {
+            currentTime = calcNextTime(currentTime, transition.at, prevTime, timeLabels);
+        }
+        /**
+         * Keep track of the maximum duration in this definition. This will be
+         * applied to currentTime once the definition has been parsed.
+         */
+        let maxDuration = 0;
+        const resolveValueSequence = (valueKeyframes, valueTransition, valueSequence, elementIndex = 0, numSubjects = 0) => {
+            const valueKeyframesAsList = keyframesAsList(valueKeyframes);
+            const { delay = 0, times = defaultOffset(valueKeyframesAsList), type = "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
+            let { ease = defaultTransition.ease || "easeOut", duration } = valueTransition;
+            /**
+             * Resolve stagger() if defined.
+             */
+            const calculatedDelay = typeof delay === "function"
+                ? delay(elementIndex, numSubjects)
+                : delay;
+            /**
+             * If this animation should and can use a spring, generate a spring easing function.
+             */
+            const numKeyframes = valueKeyframesAsList.length;
+            const createGenerator = isGenerator(type)
+                ? type
+                : generators?.[type || "keyframes"];
+            if (numKeyframes <= 2 && createGenerator) {
+                /**
+                 * As we're creating an easing function from a spring,
+                 * ideally we want to generate it using the real distance
+                 * between the two keyframes. However this isn't always
+                 * possible - in these situations we use 0-100.
+                 */
+                let absoluteDelta = 100;
+                if (numKeyframes === 2 &&
+                    isNumberKeyframesArray(valueKeyframesAsList)) {
+                    const delta = valueKeyframesAsList[1] - valueKeyframesAsList[0];
+                    absoluteDelta = Math.abs(delta);
+                }
+                const springTransition = { ...remainingTransition };
+                if (duration !== undefined) {
+                    springTransition.duration = secondsToMilliseconds(duration);
+                }
+                const springEasing = createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
+                ease = springEasing.ease;
+                duration = springEasing.duration;
+            }
+            duration ?? (duration = defaultDuration);
+            const startTime = currentTime + calculatedDelay;
+            /**
+             * If there's only one time offset of 0, fill in a second with length 1
+             */
+            if (times.length === 1 && times[0] === 0) {
+                times[1] = 1;
+            }
+            /**
+             * Fill out if offset if fewer offsets than keyframes
+             */
+            const remainder = times.length - valueKeyframesAsList.length;
+            remainder > 0 && fillOffset(times, remainder);
+            /**
+             * If only one value has been set, ie [1], push a null to the start of
+             * the keyframe array. This will let us mark a keyframe at this point
+             * that will later be hydrated with the previous value.
+             */
+            valueKeyframesAsList.length === 1 &&
+                valueKeyframesAsList.unshift(null);
+            /**
+             * Handle repeat options
+             */
+            if (repeat) {
+                invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20", "repeat-count-high");
+                duration = calculateRepeatDuration(duration, repeat);
+                const originalKeyframes = [...valueKeyframesAsList];
+                const originalTimes = [...times];
+                ease = Array.isArray(ease) ? [...ease] : [ease];
+                const originalEase = [...ease];
+                for (let repeatIndex = 0; repeatIndex < repeat; repeatIndex++) {
+                    valueKeyframesAsList.push(...originalKeyframes);
+                    for (let keyframeIndex = 0; keyframeIndex < originalKeyframes.length; keyframeIndex++) {
+                        times.push(originalTimes[keyframeIndex] + (repeatIndex + 1));
+                        ease.push(keyframeIndex === 0
+                            ? "linear"
+                            : getEasingForSegment(originalEase, keyframeIndex - 1));
+                    }
+                }
+                normalizeTimes(times, repeat);
+            }
+            const targetTime = startTime + duration;
+            /**
+             * Add keyframes, mapping offsets to absolute time.
+             */
+            addKeyframes(valueSequence, valueKeyframesAsList, ease, times, startTime, targetTime);
+            maxDuration = Math.max(calculatedDelay + duration, maxDuration);
+            totalDuration = Math.max(targetTime, totalDuration);
+        };
+        if (isMotionValue(subject)) {
+            const subjectSequence = getSubjectSequence(subject, sequences);
+            resolveValueSequence(keyframes, transition, getValueSequence("default", subjectSequence));
+        }
+        else {
+            const subjects = resolveSubjects(subject, keyframes, scope, elementCache);
+            const numSubjects = subjects.length;
+            /**
+             * For every element in this segment, process the defined values.
+             */
+            for (let subjectIndex = 0; subjectIndex < numSubjects; subjectIndex++) {
+                /**
+                 * Cast necessary, but we know these are of this type
+                 */
+                keyframes = keyframes;
+                transition = transition;
+                const thisSubject = subjects[subjectIndex];
+                const subjectSequence = getSubjectSequence(thisSubject, sequences);
+                for (const key in keyframes) {
+                    resolveValueSequence(keyframes[key], getValueTransition(transition, key), getValueSequence(key, subjectSequence), subjectIndex, numSubjects);
+                }
+            }
+        }
+        prevTime = currentTime;
+        currentTime += maxDuration;
+    }
+    /**
+     * For every element and value combination create a new animation.
+     */
+    sequences.forEach((valueSequences, element) => {
+        for (const key in valueSequences) {
+            const valueSequence = valueSequences[key];
+            /**
+             * Arrange all the keyframes in ascending time order.
+             */
+            valueSequence.sort(compareByTime);
+            const keyframes = [];
+            const valueOffset = [];
+            const valueEasing = [];
+            /**
+             * For each keyframe, translate absolute times into
+             * relative offsets based on the total duration of the timeline.
+             */
+            for (let i = 0; i < valueSequence.length; i++) {
+                const { at, value, easing } = valueSequence[i];
+                keyframes.push(value);
+                valueOffset.push(progress(0, totalDuration, at));
+                valueEasing.push(easing || "easeOut");
+            }
+            /**
+             * If the first keyframe doesn't land on offset: 0
+             * provide one by duplicating the initial keyframe. This ensures
+             * it snaps to the first keyframe when the animation starts.
+             */
+            if (valueOffset[0] !== 0) {
+                valueOffset.unshift(0);
+                keyframes.unshift(keyframes[0]);
+                valueEasing.unshift(defaultSegmentEasing);
+            }
+            /**
+             * If the last keyframe doesn't land on offset: 1
+             * provide one with a null wildcard value. This will ensure it
+             * stays static until the end of the animation.
+             */
+            if (valueOffset[valueOffset.length - 1] !== 1) {
+                valueOffset.push(1);
+                keyframes.push(null);
+            }
+            if (!animationDefinitions.has(element)) {
+                animationDefinitions.set(element, {
+                    keyframes: {},
+                    transition: {},
+                });
+            }
+            const definition = animationDefinitions.get(element);
+            definition.keyframes[key] = keyframes;
+            definition.transition[key] = {
+                ...defaultTransition,
+                duration: totalDuration,
+                ease: valueEasing,
+                times: valueOffset,
+                ...sequenceTransition,
+            };
+        }
+    });
+    return animationDefinitions;
+}
+function getSubjectSequence(subject, sequences) {
+    !sequences.has(subject) && sequences.set(subject, {});
+    return sequences.get(subject);
+}
+function getValueSequence(name, sequences) {
+    if (!sequences[name])
+        sequences[name] = [];
+    return sequences[name];
+}
+function keyframesAsList(keyframes) {
+    return Array.isArray(keyframes) ? keyframes : [keyframes];
+}
+function getValueTransition(transition, key) {
+    return transition && transition[key]
+        ? {
+            ...transition,
+            ...transition[key],
+        }
+        : { ...transition };
+}
+const isNumber = (keyframe) => typeof keyframe === "number";
+const isNumberKeyframesArray = (keyframes) => keyframes.every(isNumber);
+
+function isObjectKey(key, object) {
+    return key in object;
+}
+class ObjectVisualElement extends VisualElement {
+    constructor() {
+        super(...arguments);
+        this.type = "object";
+    }
+    readValueFromInstance(instance, key) {
+        if (isObjectKey(key, instance)) {
+            const value = instance[key];
+            if (typeof value === "string" || typeof value === "number") {
+                return value;
+            }
+        }
+        return undefined;
+    }
+    getBaseTargetFromProps() {
+        return undefined;
+    }
+    removeValueFromRenderState(key, renderState) {
+        delete renderState.output[key];
+    }
+    measureInstanceViewportBox() {
+        return createBox();
+    }
+    build(renderState, latestValues) {
+        Object.assign(renderState.output, latestValues);
+    }
+    renderInstance(instance, { output }) {
+        Object.assign(instance, output);
+    }
+    sortInstanceNodePosition() {
+        return 0;
+    }
+}
+
+function createDOMVisualElement(element) {
+    const options = {
+        presenceContext: null,
+        props: {},
+        visualState: {
+            renderState: {
+                transform: {},
+                transformOrigin: {},
+                style: {},
+                vars: {},
+                attrs: {},
+            },
+            latestValues: {},
+        },
+    };
+    const node = isSVGElement(element) && !isSVGSVGElement(element)
+        ? new SVGVisualElement(options)
+        : new HTMLVisualElement(options);
+    node.mount(element);
+    visualElementStore.set(element, node);
+}
+function createObjectVisualElement(subject) {
+    const options = {
+        presenceContext: null,
+        props: {},
+        visualState: {
+            renderState: {
+                output: {},
+            },
+            latestValues: {},
+        },
+    };
+    const node = new ObjectVisualElement(options);
+    node.mount(subject);
+    visualElementStore.set(subject, node);
+}
+
+function isSingleValue(subject, keyframes) {
+    return (isMotionValue(subject) ||
+        typeof subject === "number" ||
+        (typeof subject === "string" && !isDOMKeyframes(keyframes)));
+}
+/**
+ * Implementation
+ */
+function animateSubject(subject, keyframes, options, scope) {
+    const animations = [];
+    if (isSingleValue(subject, keyframes)) {
+        animations.push(animateSingleValue(subject, isDOMKeyframes(keyframes)
+            ? keyframes.default || keyframes
+            : keyframes, options ? options.default || options : options));
+    }
+    else {
+        const subjects = resolveSubjects(subject, keyframes, scope);
+        const numSubjects = subjects.length;
+        invariant(Boolean(numSubjects), "No valid elements provided.", "no-valid-elements");
+        for (let i = 0; i < numSubjects; i++) {
+            const thisSubject = subjects[i];
+            invariant(thisSubject !== null, "You're trying to perform an animation on null. Ensure that selectors are correctly finding elements and refs are correctly hydrated.", "animate-null");
+            const createVisualElement = thisSubject instanceof Element
+                ? createDOMVisualElement
+                : createObjectVisualElement;
+            if (!visualElementStore.has(thisSubject)) {
+                createVisualElement(thisSubject);
+            }
+            const visualElement = visualElementStore.get(thisSubject);
+            const transition = { ...options };
+            /**
+             * Resolve stagger function if provided.
+             */
+            if ("delay" in transition &&
+                typeof transition.delay === "function") {
+                transition.delay = transition.delay(i, numSubjects);
+            }
+            animations.push(...animateTarget(visualElement, { ...keyframes, transition }, {}));
+        }
+    }
+    return animations;
+}
+
+function animateSequence(sequence, options, scope) {
+    const animations = [];
+    const animationDefinitions = createAnimationsFromSequence(sequence, options, scope, { spring });
+    animationDefinitions.forEach(({ keyframes, transition }, subject) => {
+        animations.push(...animateSubject(subject, keyframes, transition));
+    });
+    return animations;
+}
+
+function isSequence(value) {
+    return Array.isArray(value) && value.some(Array.isArray);
+}
+/**
+ * Creates an animation function that is optionally scoped
+ * to a specific element.
+ */
+function createScopedAnimate(scope) {
+    /**
+     * Implementation
+     */
+    function scopedAnimate(subjectOrSequence, optionsOrKeyframes, options) {
+        let animations = [];
+        if (isSequence(subjectOrSequence)) {
+            animations = animateSequence(subjectOrSequence, optionsOrKeyframes, scope);
+        }
+        else {
+            animations = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope);
+        }
+        const animation = new GroupAnimationWithThen(animations);
+        return animation;
+    }
+    return scopedAnimate;
+}
+const animate = createScopedAnimate();
+
+const NUMBER = /-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/gi;
+const SEGMENT = /([astvzqmhlc])([^astvzqmhlc]*)/gi;
+const LENGTH = {
+  a: 7,
+  c: 6,
+  h: 1,
+  l: 2,
+  m: 2,
+  q: 4,
+  s: 4,
+  t: 2,
+  v: 1,
+  z: 0
+};
+function parseValues(args) {
+  const numbers = args.match(NUMBER);
+  return numbers ? numbers.map(Number) : [];
+}
+function parse(path) {
+  const data = [];
+  path.replace(SEGMENT, (_, commandArg, argsArg) => {
+    let command = commandArg;
+    const args = parseValues(argsArg);
+    let type = command.toLowerCase();
+    if (type === "m" && args.length > 2) {
+      data.push([command, ...args.splice(0, 2)]);
+      type = "l";
+      command = command === "m" ? "l" : "L";
+    }
+    const expectedLength = LENGTH[type];
+    if (expectedLength === 0) {
+      if (args.length > 0) {
+        throw new Error("malformed path data");
+      }
+      data.push([command]);
+      return "";
+    }
+    while (args.length > 0) {
+      if (args.length === expectedLength) {
+        data.push([command, ...args]);
+        return "";
+      }
+      if (args.length < expectedLength) {
+        throw new Error("malformed path data");
+      }
+      data.push([command, ...args.splice(0, expectedLength)]);
+    }
+    throw new Error("malformed path data");
+  });
+  return data;
+}
+
+const T_VALUES = [
+  -0.06405689286260562,
+  0.06405689286260562,
+  -0.1911188674736163,
+  0.1911188674736163,
+  -0.315042679696163,
+  0.315042679696163,
+  -0.433793507626045,
+  0.433793507626045,
+  -0.545421471388839,
+  0.545421471388839,
+  -0.648093651936975,
+  0.648093651936975,
+  -0.740124191578554,
+  0.740124191578554,
+  -0.820001985973902,
+  0.820001985973902,
+  -0.886415527004401,
+  0.886415527004401,
+  -0.938274552002732,
+  0.938274552002732,
+  -0.974728555971309,
+  0.974728555971309,
+  -0.995187219997021,
+  0.995187219997021
+];
+const C_VALUES = [
+  0.127938195346752,
+  0.127938195346752,
+  0.125837456346828,
+  0.125837456346828,
+  0.121670472927803,
+  0.121670472927803,
+  0.115505668053725,
+  0.115505668053725,
+  0.107444270115965,
+  0.107444270115965,
+  0.0976186521041138,
+  0.0976186521041138,
+  0.0861901615319532,
+  0.0861901615319532,
+  0.0733464814110803,
+  0.0733464814110803,
+  0.0592985849154367,
+  0.0592985849154367,
+  0.0442774388174198,
+  0.0442774388174198,
+  0.0285313886289336,
+  0.0285313886289336,
+  0.0123412297999871,
+  0.0123412297999871
+];
+function quadraticDerivative(xs, ys, t) {
+  return {
+    x: (1 - t) * 2 * (xs[1] - xs[0]) + t * 2 * (xs[2] - xs[1]),
+    y: (1 - t) * 2 * (ys[1] - ys[0]) + t * 2 * (ys[2] - ys[1])
+  };
+}
+function cubicDerivative(xs, ys, t) {
+  return quadraticPoint(
+    [3 * (xs[1] - xs[0]), 3 * (xs[2] - xs[1]), 3 * (xs[3] - xs[2])],
+    [3 * (ys[1] - ys[0]), 3 * (ys[2] - ys[1]), 3 * (ys[3] - ys[2])],
+    t
+  );
+}
+function t2length(length, totalLength, func, xs, ys) {
+  let error = 1;
+  let t = length / totalLength;
+  let step = (length - func(xs, ys, t)) / totalLength;
+  while (error > 1e-3) {
+    const increasedTLength = func(xs, ys, t + step);
+    const decreasedTLength = func(xs, ys, t - step);
+    const increasedTError = Math.abs(length - increasedTLength) / totalLength;
+    const decreasedTError = Math.abs(length - decreasedTLength) / totalLength;
+    if (increasedTError < error) {
+      error = increasedTError;
+      t += step;
+    } else if (decreasedTError < error) {
+      error = decreasedTError;
+      t -= step;
+    } else {
+      step /= 2;
+    }
+  }
+  return t;
+}
+function quadraticPoint(xs, ys, t) {
+  return {
+    x: (1 - t) * (1 - t) * xs[0] + 2 * (1 - t) * t * xs[1] + t * t * xs[2],
+    y: (1 - t) * (1 - t) * ys[0] + 2 * (1 - t) * t * ys[1] + t * t * ys[2]
+  };
+}
+function cubicPoint(xs, ys, t) {
+  return {
+    x: (1 - t) * (1 - t) * (1 - t) * xs[0] + 3 * (1 - t) * (1 - t) * t * xs[1] + 3 * (1 - t) * t * t * xs[2] + t * t * t * xs[3],
+    y: (1 - t) * (1 - t) * (1 - t) * ys[0] + 3 * (1 - t) * (1 - t) * t * ys[1] + 3 * (1 - t) * t * t * ys[2] + t * t * t * ys[3]
+  };
+}
+function getQuadraticArcLength(xs, ys, t = 1) {
+  const ax = xs[0] - 2 * xs[1] + xs[2];
+  const ay = ys[0] - 2 * ys[1] + ys[2];
+  const bx = 2 * xs[1] - 2 * xs[0];
+  const by = 2 * ys[1] - 2 * ys[0];
+  const A = 4 * (ax * ax + ay * ay);
+  const B = 4 * (ax * bx + ay * by);
+  const C = bx * bx + by * by;
+  if (A === 0) {
+    return t * Math.sqrt((xs[2] - xs[0]) ** 2 + (ys[2] - ys[0]) ** 2);
+  }
+  const b = B / (2 * A);
+  const c = C / A;
+  const u = t + b;
+  const k = c - b * b;
+  return Math.sqrt(A) / 2 * (u * Math.sqrt(u * u + k) - b * Math.sqrt(b * b + k) + k * Math.log(
+    Math.abs((u + Math.sqrt(u * u + k)) / (b + Math.sqrt(b * b + k)))
+  ));
+}
+function getCubicArcLength(xs, ys, t = 1) {
+  const z = t / 2;
+  let sum = 0;
+  for (let index = 0; index < 20; index += 1) {
+    const correctedT = z * T_VALUES[index] + z;
+    const derivative = cubicDerivative(
+      xs,
+      ys,
+      correctedT
+    );
+    sum += C_VALUES[index] * Math.sqrt(derivative.x * derivative.x + derivative.y * derivative.y);
+  }
+  return z * sum;
+}
+class Bezier {
+  a;
+  b;
+  c;
+  d;
+  getArcLength;
+  getPoint;
+  getDerivative;
+  length;
+  constructor(ax, ay, bx, by, cx, cy, dx, dy) {
+    this.a = { x: ax, y: ay };
+    this.b = { x: bx, y: by };
+    this.c = { x: cx, y: cy };
+    this.d = { x: dx ?? 0, y: dy ?? 0 };
+    if (dx !== null && dx !== void 0 && dy !== null && dy !== void 0) {
+      this.getArcLength = getCubicArcLength;
+      this.getPoint = cubicPoint;
+      this.getDerivative = cubicDerivative;
+    } else {
+      this.getArcLength = getQuadraticArcLength;
+      this.getPoint = quadraticPoint;
+      this.getDerivative = quadraticDerivative;
+    }
+    this.length = 0;
+    this.init();
+  }
+  init() {
+    this.length = this.getArcLength(
+      [this.a.x, this.b.x, this.c.x, this.d.x],
+      [this.a.y, this.b.y, this.c.y, this.d.y]
+    );
+  }
+  getTotalLength() {
+    return this.length;
+  }
+  getPointAtLength(length) {
+    const t = t2length(
+      length,
+      this.length,
+      this.getArcLength,
+      [this.a.x, this.b.x, this.c.x, this.d.x],
+      [this.a.y, this.b.y, this.c.y, this.d.y]
+    );
+    return this.getPoint(
+      [this.a.x, this.b.x, this.c.x, this.d.x],
+      [this.a.y, this.b.y, this.c.y, this.d.y],
+      t
+    );
+  }
+  getTangentAtLength(length) {
+    const t = t2length(
+      length,
+      this.length,
+      this.getArcLength,
+      [this.a.x, this.b.x, this.c.x, this.d.x],
+      [this.a.y, this.b.y, this.c.y, this.d.y]
+    );
+    const derivative = this.getDerivative(
+      [this.a.x, this.b.x, this.c.x, this.d.x],
+      [this.a.y, this.b.y, this.c.y, this.d.y],
+      t
+    );
+    const mdl = Math.sqrt(
+      derivative.x * derivative.x + derivative.y * derivative.y
+    );
+    return mdl > 0 ? { x: derivative.x / mdl, y: derivative.y / mdl } : { x: 0, y: 0 };
+  }
+  getPropertiesAtLength(length) {
+    const tangent = this.getTangentAtLength(length);
+    const point = this.getPointAtLength(length);
+    return { x: point.x, y: point.y, tangentX: tangent.x, tangentY: tangent.y };
+  }
+}
+function createBezier(ax, ay, bx, by, cx, cy, dx, dy) {
+  return new Bezier(ax, ay, bx, by, cx, cy, dx, dy);
+}
+
+const TAU = Math.PI * 2;
+function unitVectorAngle(ux, uy, vx, vy) {
+  const sign = ux * vy - uy * vx < 0 ? -1 : 1;
+  let dot = ux * vx + uy * vy;
+  if (dot > 1) {
+    dot = 1;
+  }
+  if (dot < -1) {
+    dot = -1;
+  }
+  return sign * Math.acos(dot);
+}
+function getArcCenter(x1, y1, x2, y2, fa, fs, rx, ry, sinPhi, cosPhi) {
+  const x1p = cosPhi * (x1 - x2) / 2 + sinPhi * (y1 - y2) / 2;
+  const y1p = -sinPhi * (x1 - x2) / 2 + cosPhi * (y1 - y2) / 2;
+  const rxSq = rx * rx;
+  const rySq = ry * ry;
+  const x1pSq = x1p * x1p;
+  const y1pSq = y1p * y1p;
+  let radicant = rxSq * rySq - rxSq * y1pSq - rySq * x1pSq;
+  if (radicant < 0) {
+    radicant = 0;
+  }
+  radicant /= rxSq * y1pSq + rySq * x1pSq;
+  radicant = Math.sqrt(radicant) * (fa === fs ? -1 : 1);
+  const cxp = radicant * rx * y1p / ry;
+  const cyp = -radicant * ry * x1p / rx;
+  const cx = cosPhi * cxp - sinPhi * cyp + (x1 + x2) / 2;
+  const cy = sinPhi * cxp + cosPhi * cyp + (y1 + y2) / 2;
+  const v1x = (x1p - cxp) / rx;
+  const v1y = (y1p - cyp) / ry;
+  const v2x = (-x1p - cxp) / rx;
+  const v2y = (-y1p - cyp) / ry;
+  const theta1 = unitVectorAngle(1, 0, v1x, v1y);
+  let deltaTheta = unitVectorAngle(v1x, v1y, v2x, v2y);
+  if (fs === 0 && deltaTheta > 0) {
+    deltaTheta -= TAU;
+  }
+  if (fs === 1 && deltaTheta < 0) {
+    deltaTheta += TAU;
+  }
+  return [cx, cy, theta1, deltaTheta];
+}
+function approximateUnitArc(theta1, deltaTheta) {
+  const alpha = 4 / 3 * Math.tan(deltaTheta / 4);
+  const x1 = Math.cos(theta1);
+  const y1 = Math.sin(theta1);
+  const x2 = Math.cos(theta1 + deltaTheta);
+  const y2 = Math.sin(theta1 + deltaTheta);
+  return [
+    x1,
+    y1,
+    x1 - y1 * alpha,
+    y1 + x1 * alpha,
+    x2 + y2 * alpha,
+    y2 - x2 * alpha,
+    x2,
+    y2
+  ];
+}
+function a2c(x1, y1, rx, ry, phi, fa, fs, x2, y2) {
+  const sinPhi = Math.sin(phi * TAU / 360);
+  const cosPhi = Math.cos(phi * TAU / 360);
+  const x1p = cosPhi * (x1 - x2) / 2 + sinPhi * (y1 - y2) / 2;
+  const y1p = -sinPhi * (x1 - x2) / 2 + cosPhi * (y1 - y2) / 2;
+  if (x1p === 0 && y1p === 0) {
+    return [];
+  }
+  if (rx === 0 || ry === 0) {
+    return [];
+  }
+  rx = Math.abs(rx);
+  ry = Math.abs(ry);
+  const lambda = x1p * x1p / (rx * rx) + y1p * y1p / (ry * ry);
+  if (lambda > 1) {
+    rx *= Math.sqrt(lambda);
+    ry *= Math.sqrt(lambda);
+  }
+  const [cx, cy, initialTheta, initialDeltaTheta] = getArcCenter(
+    x1,
+    y1,
+    x2,
+    y2,
+    fa,
+    fs,
+    rx,
+    ry,
+    sinPhi,
+    cosPhi
+  );
+  const result = [];
+  let theta1 = initialTheta;
+  let deltaTheta = initialDeltaTheta;
+  const segments = Math.max(Math.ceil(Math.abs(deltaTheta) / (TAU / 4)), 1);
+  deltaTheta /= segments;
+  for (let index = 0; index < segments; index += 1) {
+    result.push(approximateUnitArc(theta1, deltaTheta));
+    theta1 += deltaTheta;
+  }
+  return result.map((curve) => {
+    for (let index = 0; index < curve.length; index += 2) {
+      let x = curve[index];
+      let y = curve[index + 1];
+      x *= rx;
+      y *= ry;
+      const xp = cosPhi * x - sinPhi * y;
+      const yp = sinPhi * x + cosPhi * y;
+      curve[index] = xp + cx;
+      curve[index + 1] = yp + cy;
+    }
+    return curve;
+  });
+}
+
+class Arc {
+  length;
+  partialLengths;
+  curves;
+  constructor(x0, y0, rx, ry, xAxisRotate, largeArcFlag, sweepFlag, x, y) {
+    let length = 0;
+    const partialLengths = [];
+    const curves = [];
+    const result = a2c(
+      x0,
+      y0,
+      rx,
+      ry,
+      xAxisRotate,
+      largeArcFlag,
+      sweepFlag,
+      x,
+      y
+    );
+    result.forEach((curveData) => {
+      const curve = createBezier(
+        curveData[0],
+        curveData[1],
+        curveData[2],
+        curveData[3],
+        curveData[4],
+        curveData[5],
+        curveData[6],
+        curveData[7]
+      );
+      const curveLength = curve.getTotalLength();
+      length += curveLength;
+      partialLengths.push(curveLength);
+      curves.push(curve);
+    });
+    this.length = length;
+    this.partialLengths = partialLengths;
+    this.curves = curves;
+  }
+  getTotalLength() {
+    return this.length;
+  }
+  getPointAtLength(fractionLength) {
+    if (fractionLength < 0) {
+      fractionLength = 0;
+    } else if (fractionLength > this.length) {
+      fractionLength = this.length;
+    }
+    let index = this.partialLengths.length - 1;
+    while (this.partialLengths[index] >= fractionLength && this.partialLengths[index] > 0) {
+      index -= 1;
+    }
+    if (index < this.partialLengths.length - 1) {
+      index += 1;
+    }
+    let lengthOffset = 0;
+    for (let cursor = 0; cursor < index; cursor += 1) {
+      lengthOffset += this.partialLengths[cursor];
+    }
+    return this.curves[index].getPointAtLength(fractionLength - lengthOffset);
+  }
+  getTangentAtLength(fractionLength) {
+    if (fractionLength < 0) {
+      fractionLength = 0;
+    } else if (fractionLength > this.length) {
+      fractionLength = this.length;
+    }
+    let index = this.partialLengths.length - 1;
+    while (this.partialLengths[index] >= fractionLength && this.partialLengths[index] > 0) {
+      index -= 1;
+    }
+    if (index < this.partialLengths.length - 1) {
+      index += 1;
+    }
+    let lengthOffset = 0;
+    for (let cursor = 0; cursor < index; cursor += 1) {
+      lengthOffset += this.partialLengths[cursor];
+    }
+    return this.curves[index].getTangentAtLength(
+      fractionLength - lengthOffset
+    );
+  }
+  getPropertiesAtLength(fractionLength) {
+    const tangent = this.getTangentAtLength(fractionLength);
+    const point = this.getPointAtLength(fractionLength);
+    return { x: point.x, y: point.y, tangentX: tangent.x, tangentY: tangent.y };
+  }
+}
+function createArc(x0, y0, rx, ry, xAxisRotate, largeArcFlag, sweepFlag, x, y) {
+  return new Arc(x0, y0, rx, ry, xAxisRotate, largeArcFlag, sweepFlag, x, y);
+}
+
+class LinearPosition {
+  x0;
+  x1;
+  y0;
+  y1;
+  constructor(x0, x1, y0, y1) {
+    this.x0 = x0;
+    this.x1 = x1;
+    this.y0 = y0;
+    this.y1 = y1;
+  }
+  getTotalLength() {
+    return Math.sqrt((this.x0 - this.x1) ** 2 + (this.y0 - this.y1) ** 2);
+  }
+  getPointAtLength(pos) {
+    const fraction = pos / Math.sqrt((this.x0 - this.x1) ** 2 + (this.y0 - this.y1) ** 2);
+    const newDeltaX = (this.x1 - this.x0) * fraction;
+    const newDeltaY = (this.y1 - this.y0) * fraction;
+    return { x: this.x0 + newDeltaX, y: this.y0 + newDeltaY };
+  }
+  getTangentAtLength() {
+    const module = Math.sqrt(
+      (this.x1 - this.x0) ** 2 + (this.y1 - this.y0) ** 2
+    );
+    return { x: (this.x1 - this.x0) / module, y: (this.y1 - this.y0) / module };
+  }
+  getPropertiesAtLength(pos) {
+    const point = this.getPointAtLength(pos);
+    const tangent = this.getTangentAtLength();
+    return { x: point.x, y: point.y, tangentX: tangent.x, tangentY: tangent.y };
+  }
+}
+function createLinearPosition(x0, x1, y0, y1) {
+  return new LinearPosition(x0, x1, y0, y1);
+}
+
+function svgPathProperties(svgString) {
+  let length = 0;
+  const partialLengths = [];
+  const functions = [];
+  let previousCurve = null;
+  const svgProperties = function svgProperties2(string) {
+    if (!string) {
+      return null;
+    }
+    const parsed = parse(string);
+    let cur = [0, 0];
+    let prevPoint = [0, 0];
+    let curve;
+    let ringStart = [0, 0];
+    for (let i = 0; i < parsed.length; i += 1) {
+      if (parsed[i][0] === "M") {
+        cur = [parsed[i][1], parsed[i][2]];
+        ringStart = [cur[0], cur[1]];
+        previousCurve = null;
+        functions.push(null);
+      } else if (parsed[i][0] === "m") {
+        cur = [parsed[i][1] + cur[0], parsed[i][2] + cur[1]];
+        ringStart = [cur[0], cur[1]];
+        previousCurve = null;
+        functions.push(null);
+      } else if (parsed[i][0] === "L") {
+        length += Math.sqrt(
+          (cur[0] - parsed[i][1]) ** 2 + (cur[1] - parsed[i][2]) ** 2
+        );
+        functions.push(
+          createLinearPosition(cur[0], parsed[i][1], cur[1], parsed[i][2])
+        );
+        cur = [parsed[i][1], parsed[i][2]];
+      } else if (parsed[i][0] === "l") {
+        length += Math.sqrt(parsed[i][1] ** 2 + parsed[i][2] ** 2);
+        functions.push(
+          createLinearPosition(
+            cur[0],
+            parsed[i][1] + cur[0],
+            cur[1],
+            parsed[i][2] + cur[1]
+          )
+        );
+        cur = [parsed[i][1] + cur[0], parsed[i][2] + cur[1]];
+      } else if (parsed[i][0] === "H") {
+        length += Math.abs(cur[0] - parsed[i][1]);
+        functions.push(createLinearPosition(cur[0], parsed[i][1], cur[1], cur[1]));
+        cur[0] = parsed[i][1];
+      } else if (parsed[i][0] === "h") {
+        length += Math.abs(parsed[i][1]);
+        functions.push(
+          createLinearPosition(cur[0], cur[0] + parsed[i][1], cur[1], cur[1])
+        );
+        cur[0] = parsed[i][1] + cur[0];
+      } else if (parsed[i][0] === "V") {
+        length += Math.abs(cur[1] - parsed[i][1]);
+        functions.push(createLinearPosition(cur[0], cur[0], cur[1], parsed[i][1]));
+        cur[1] = parsed[i][1];
+      } else if (parsed[i][0] === "v") {
+        length += Math.abs(parsed[i][1]);
+        functions.push(
+          createLinearPosition(cur[0], cur[0], cur[1], cur[1] + parsed[i][1])
+        );
+        cur[1] = parsed[i][1] + cur[1];
+      } else if (parsed[i][0] === "z" || parsed[i][0] === "Z") {
+        length += Math.sqrt(
+          (ringStart[0] - cur[0]) ** 2 + (ringStart[1] - cur[1]) ** 2
+        );
+        functions.push(
+          createLinearPosition(cur[0], ringStart[0], cur[1], ringStart[1])
+        );
+        previousCurve = null;
+        cur = [ringStart[0], ringStart[1]];
+      } else if (parsed[i][0] === "C") {
+        curve = createBezier(
+          cur[0],
+          cur[1],
+          parsed[i][1],
+          parsed[i][2],
+          parsed[i][3],
+          parsed[i][4],
+          parsed[i][5],
+          parsed[i][6]
+        );
+        previousCurve = curve;
+        length += curve.getTotalLength();
+        cur = [parsed[i][5], parsed[i][6]];
+        functions.push(curve);
+      } else if (parsed[i][0] === "c") {
+        curve = createBezier(
+          cur[0],
+          cur[1],
+          cur[0] + parsed[i][1],
+          cur[1] + parsed[i][2],
+          cur[0] + parsed[i][3],
+          cur[1] + parsed[i][4],
+          cur[0] + parsed[i][5],
+          cur[1] + parsed[i][6]
+        );
+        previousCurve = curve;
+        length += curve.getTotalLength();
+        cur = [parsed[i][5] + cur[0], parsed[i][6] + cur[1]];
+        functions.push(curve);
+      } else if (parsed[i][0] === "S") {
+        if (i > 0 && ["C", "c", "S", "s"].includes(parsed[i - 1][0])) {
+          const previousSegment = parsed[i - 1];
+          const reflectedControlX = 2 * cur[0] - previousSegment[previousSegment.length - 4];
+          const reflectedControlY = 2 * cur[1] - previousSegment[previousSegment.length - 3];
+          curve = createBezier(
+            cur[0],
+            cur[1],
+            reflectedControlX,
+            reflectedControlY,
+            parsed[i][1],
+            parsed[i][2],
+            parsed[i][3],
+            parsed[i][4]
+          );
+        } else {
+          curve = createBezier(
+            cur[0],
+            cur[1],
+            cur[0],
+            cur[1],
+            parsed[i][1],
+            parsed[i][2],
+            parsed[i][3],
+            parsed[i][4]
+          );
+        }
+        previousCurve = curve;
+        length += curve.getTotalLength();
+        cur = [parsed[i][3], parsed[i][4]];
+        functions.push(curve);
+      } else if (parsed[i][0] === "s") {
+        if (i > 0 && ["C", "c", "S", "s"].includes(parsed[i - 1][0]) && previousCurve) {
+          curve = createBezier(
+            cur[0],
+            cur[1],
+            cur[0] + previousCurve.d.x - previousCurve.c.x,
+            cur[1] + previousCurve.d.y - previousCurve.c.y,
+            cur[0] + parsed[i][1],
+            cur[1] + parsed[i][2],
+            cur[0] + parsed[i][3],
+            cur[1] + parsed[i][4]
+          );
+        } else {
+          curve = createBezier(
+            cur[0],
+            cur[1],
+            cur[0],
+            cur[1],
+            cur[0] + parsed[i][1],
+            cur[1] + parsed[i][2],
+            cur[0] + parsed[i][3],
+            cur[1] + parsed[i][4]
+          );
+        }
+        previousCurve = curve;
+        length += curve.getTotalLength();
+        cur = [parsed[i][3] + cur[0], parsed[i][4] + cur[1]];
+        functions.push(curve);
+      } else if (parsed[i][0] === "Q") {
+        if (!(cur[0] === parsed[i][1] && cur[1] === parsed[i][2])) {
+          curve = createBezier(
+            cur[0],
+            cur[1],
+            parsed[i][1],
+            parsed[i][2],
+            parsed[i][3],
+            parsed[i][4]
+          );
+          previousCurve = curve;
+        } else {
+          curve = createLinearPosition(
+            parsed[i][1],
+            parsed[i][3],
+            parsed[i][2],
+            parsed[i][4]
+          );
+          previousCurve = null;
+        }
+        length += curve.getTotalLength();
+        functions.push(curve);
+        cur = [parsed[i][3], parsed[i][4]];
+        prevPoint = [parsed[i][1], parsed[i][2]];
+      } else if (parsed[i][0] === "q") {
+        if (!(parsed[i][1] === 0 && parsed[i][2] === 0)) {
+          curve = createBezier(
+            cur[0],
+            cur[1],
+            cur[0] + parsed[i][1],
+            cur[1] + parsed[i][2],
+            cur[0] + parsed[i][3],
+            cur[1] + parsed[i][4]
+          );
+          previousCurve = curve;
+        } else {
+          curve = createLinearPosition(
+            cur[0] + parsed[i][1],
+            cur[0] + parsed[i][3],
+            cur[1] + parsed[i][2],
+            cur[1] + parsed[i][4]
+          );
+          previousCurve = null;
+        }
+        length += curve.getTotalLength();
+        prevPoint = [cur[0] + parsed[i][1], cur[1] + parsed[i][2]];
+        cur = [parsed[i][3] + cur[0], parsed[i][4] + cur[1]];
+        functions.push(curve);
+      } else if (parsed[i][0] === "T") {
+        if (i > 0 && ["Q", "q", "T", "t"].includes(parsed[i - 1][0])) {
+          curve = createBezier(
+            cur[0],
+            cur[1],
+            2 * cur[0] - prevPoint[0],
+            2 * cur[1] - prevPoint[1],
+            parsed[i][1],
+            parsed[i][2]
+          );
+          previousCurve = curve;
+        } else {
+          curve = createLinearPosition(cur[0], parsed[i][1], cur[1], parsed[i][2]);
+          previousCurve = null;
+        }
+        functions.push(curve);
+        length += curve.getTotalLength();
+        prevPoint = [2 * cur[0] - prevPoint[0], 2 * cur[1] - prevPoint[1]];
+        cur = [parsed[i][1], parsed[i][2]];
+      } else if (parsed[i][0] === "t") {
+        if (i > 0 && ["Q", "q", "T", "t"].includes(parsed[i - 1][0])) {
+          curve = createBezier(
+            cur[0],
+            cur[1],
+            2 * cur[0] - prevPoint[0],
+            2 * cur[1] - prevPoint[1],
+            cur[0] + parsed[i][1],
+            cur[1] + parsed[i][2]
+          );
+          previousCurve = curve;
+        } else {
+          curve = createLinearPosition(
+            cur[0],
+            cur[0] + parsed[i][1],
+            cur[1],
+            cur[1] + parsed[i][2]
+          );
+          previousCurve = null;
+        }
+        length += curve.getTotalLength();
+        prevPoint = [2 * cur[0] - prevPoint[0], 2 * cur[1] - prevPoint[1]];
+        cur = [parsed[i][1] + cur[0], parsed[i][2] + cur[1]];
+        functions.push(curve);
+      } else if (parsed[i][0] === "A") {
+        curve = createArc(
+          cur[0],
+          cur[1],
+          parsed[i][1],
+          parsed[i][2],
+          parsed[i][3],
+          parsed[i][4],
+          parsed[i][5],
+          parsed[i][6],
+          parsed[i][7]
+        );
+        previousCurve = null;
+        length += curve.getTotalLength();
+        cur = [parsed[i][6], parsed[i][7]];
+        functions.push(curve);
+      } else if (parsed[i][0] === "a") {
+        curve = createArc(
+          cur[0],
+          cur[1],
+          parsed[i][1],
+          parsed[i][2],
+          parsed[i][3],
+          parsed[i][4],
+          parsed[i][5],
+          cur[0] + parsed[i][6],
+          cur[1] + parsed[i][7]
+        );
+        previousCurve = null;
+        length += curve.getTotalLength();
+        cur = [cur[0] + parsed[i][6], cur[1] + parsed[i][7]];
+        functions.push(curve);
+      }
+      partialLengths.push(length);
+    }
+    return svgProperties2;
+  };
+  svgProperties.getTotalLength = function() {
+    return length;
+  };
+  svgProperties.getPointAtLength = function(fractionLength) {
+    const fractionPart = getPartAtLength(fractionLength);
+    return functions[fractionPart.i].getPointAtLength(fractionPart.fraction);
+  };
+  svgProperties.getTangentAtLength = function(fractionLength) {
+    const fractionPart = getPartAtLength(fractionLength);
+    return functions[fractionPart.i].getTangentAtLength(fractionPart.fraction);
+  };
+  svgProperties.getPropertiesAtLength = function(fractionLength) {
+    const fractionPart = getPartAtLength(fractionLength);
+    return functions[fractionPart.i].getPropertiesAtLength(
+      fractionPart.fraction
+    );
+  };
+  function getPartAtLength(fractionLength) {
+    if (fractionLength < 0) {
+      fractionLength = 0;
+    } else if (fractionLength > length) {
+      fractionLength = length;
+    }
+    let index = partialLengths.length - 1;
+    while (partialLengths[index] >= fractionLength && partialLengths[index] > 0) {
+      index -= 1;
+    }
+    index += 1;
+    return {
+      fraction: fractionLength - (partialLengths[index - 1] ?? 0),
+      i: index
+    };
+  }
+  return svgProperties(svgString);
+}
+
+const INVALID_INPUT = `All shapes must be supplied as arrays of [x, y] points or an SVG path string (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d).
+Example valid ways of supplying a shape would be:
+[[0, 0], [10, 0], [10, 10]]
+"M0,0 L10,0 L10,10Z"
+`;
+
+function toPathString(ring) {
+  return `M${ring.join("L")}Z`;
+}
+function pathStringToRing(str, maxSegmentLength) {
+  const parsed = parse(str);
+  return exactRing(parsed) || approximateRing(str, maxSegmentLength);
+}
+function exactRing(segments) {
+  const ring = [];
+  let currentX = 0;
+  let currentY = 0;
+  for (let index = 0; index < segments.length; index += 1) {
+    const [command, ...values] = segments[index];
+    if ((command === "M" || command === "m") && index) {
+      break;
+    }
+    if (command === "Z" || command === "z") {
+      break;
+    }
+    switch (command) {
+      case "M":
+      case "L":
+        currentX = values[0];
+        currentY = values[1];
+        ring.push([currentX, currentY]);
+        break;
+      case "m":
+      case "l":
+        currentX += values[0];
+        currentY += values[1];
+        ring.push([currentX, currentY]);
+        break;
+      case "H":
+        currentX = values[0];
+        ring.push([currentX, currentY]);
+        break;
+      case "h":
+        currentX += values[0];
+        ring.push([currentX, currentY]);
+        break;
+      case "V":
+        currentY = values[0];
+        ring.push([currentX, currentY]);
+        break;
+      case "v":
+        currentY += values[0];
+        ring.push([currentX, currentY]);
+        break;
+      default:
+        return false;
+    }
+  }
+  return ring.length ? { ring } : false;
+}
+function approximateRing(str, maxSegmentLength) {
+  if (!str) {
+    throw new TypeError(INVALID_INPUT);
+  }
+  const measure = getMeasure(str);
+  const ring = [];
+  const length = measure.getTotalLength();
+  let numPoints = 3;
+  if (maxSegmentLength && isFiniteNumber(maxSegmentLength) && maxSegmentLength > 0) {
+    numPoints = Math.max(numPoints, Math.ceil(length / maxSegmentLength));
+  }
+  for (let index = 0; index < numPoints; index += 1) {
+    const point = measure.getPointAtLength(length * index / numPoints);
+    ring.push([point.x, point.y]);
+  }
+  return {
+    ring,
+    skipBisect: true
+  };
+}
+function getMeasure(d) {
+  if (typeof window !== "undefined" && window?.document) {
+    try {
+      const path = window.document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      );
+      path.setAttributeNS(null, "d", d);
+      if (typeof path.getTotalLength === "function" && typeof path.getPointAtLength === "function") {
+        return path;
+      }
+    } catch {
+    }
+  }
+  const measure = svgPathProperties(d);
+  if (!measure) {
+    throw new TypeError(INVALID_INPUT);
+  }
+  return measure;
+}
+
+function distance(a, b) {
+  return Math.sqrt(
+    (a[0] - b[0]) * (a[0] - b[0]) + (a[1] - b[1]) * (a[1] - b[1])
+  );
+}
+function pointAlong(a, b, pct) {
+  return [a[0] + (b[0] - a[0]) * pct, a[1] + (b[1] - a[1]) * pct];
+}
+function samePoint(a, b) {
+  return distance(a, b) < 1e-9;
+}
+function interpolatePoints(a, b, string) {
+  const interpolators = a.map(
+    (point, index) => interpolatePoint(point, b[index])
+  );
+  return (t) => {
+    const values = interpolators.map((interpolator) => interpolator(t));
+    return string ? toPathString(values) : values;
+  };
+}
+function interpolatePoint(a, b) {
+  return (t) => a.map((value, index) => value + t * (b[index] - value));
+}
+function isFiniteNumber(value) {
+  return typeof value === "number" && Number.isFinite(value);
+}
+function polygonArea(polygon) {
+  let area = 0;
+  let previous = polygon[polygon.length - 1];
+  for (const point of polygon) {
+    area += previous[1] * point[0] - previous[0] * point[1];
+    previous = point;
+  }
+  return area / 2;
+}
+function polygonLength(polygon) {
+  let perimeter = 0;
+  let previous = polygon[polygon.length - 1];
+  for (const point of polygon) {
+    perimeter += distance(previous, point);
+    previous = point;
+  }
+  return perimeter;
+}
+
+function addPoints(ring, numPoints) {
+  if (!numPoints) {
+    return;
+  }
+  const desiredLength = ring.length + numPoints;
+  const step = polygonLength(ring) / numPoints;
+  let index = 0;
+  let cursor = 0;
+  let insertAt = step / 2;
+  while (ring.length < desiredLength) {
+    const start = ring[index];
+    const end = ring[(index + 1) % ring.length];
+    const segmentLength = distance(start, end);
+    if (insertAt <= cursor + segmentLength) {
+      ring.splice(
+        index + 1,
+        0,
+        segmentLength ? pointAlong(start, end, (insertAt - cursor) / segmentLength) : [...start]
+      );
+      insertAt += step;
+      continue;
+    }
+    cursor += segmentLength;
+    index += 1;
+  }
+}
+function bisect(ring, maxSegmentLength = Number.POSITIVE_INFINITY) {
+  for (let index = 0; index < ring.length; index += 1) {
+    const start = ring[index];
+    let end = index === ring.length - 1 ? ring[0] : ring[index + 1];
+    while (distance(start, end) > maxSegmentLength) {
+      end = pointAlong(start, end, 0.5);
+      ring.splice(index + 1, 0, end);
+    }
+  }
+}
+
+function normalizeRing(ring, maxSegmentLength) {
+  let skipBisect = false;
+  if (typeof ring === "string") {
+    const converted = pathStringToRing(
+      ring,
+      maxSegmentLength
+    );
+    ring = converted.ring;
+    skipBisect = converted.skipBisect ?? false;
+  } else if (!Array.isArray(ring)) {
+    throw new TypeError(INVALID_INPUT);
+  }
+  const points = ring.slice(0);
+  if (!validRing(points)) {
+    throw new TypeError(INVALID_INPUT);
+  }
+  if (points.length > 1 && samePoint(points[0], points[points.length - 1])) {
+    points.pop();
+  }
+  if (polygonArea(points) > 0) {
+    points.reverse();
+  }
+  if (!skipBisect && maxSegmentLength && isFiniteNumber(maxSegmentLength) && maxSegmentLength > 0) {
+    bisect(points, maxSegmentLength);
+  }
+  return points;
+}
+function validRing(ring) {
+  return ring.every(
+    (point) => Array.isArray(point) && point.length >= 2 && isFiniteNumber(point[0]) && isFiniteNumber(point[1])
+  );
+}
+
+function rotate(ring, target) {
+  const length = ring.length;
+  let min = Number.POSITIVE_INFINITY;
+  let bestOffset = 0;
+  for (let offset = 0; offset < length; offset += 1) {
+    let sumOfSquares = 0;
+    target.forEach((point, index) => {
+      const delta = distance(ring[(offset + index) % length], point);
+      sumOfSquares += delta * delta;
+    });
+    if (sumOfSquares < min) {
+      min = sumOfSquares;
+      bestOffset = offset;
+    }
+  }
+  if (bestOffset) {
+    const spliced = ring.splice(0, bestOffset);
+    ring.splice(ring.length, 0, ...spliced);
+  }
+}
+
+function interpolate(fromShape, toShape, { maxSegmentLength = 10, string = true } = {}) {
+  const fromRing = normalizeRing(fromShape, maxSegmentLength);
+  const toRing = normalizeRing(toShape, maxSegmentLength);
+  const interpolator = interpolateRing(fromRing, toRing, string);
+  if (!string) {
+    return interpolator;
+  }
+  return (t) => {
+    if (t < 1e-4) {
+      return fromShape;
+    }
+    if (1 - t < 1e-4) {
+      return toShape;
+    }
+    return interpolator(t);
+  };
+}
+function interpolateRing(fromRing, toRing, string) {
+  const diff = fromRing.length - toRing.length;
+  addPoints(fromRing, diff < 0 ? diff * -1 : 0);
+  addPoints(toRing, diff > 0 ? diff : 0);
+  rotate(fromRing, toRing);
+  return interpolatePoints(fromRing, toRing, string);
+}
+
+const SHARP_PATH = "m23 12-8.036-3.23L12.006 0 9.047 8.77 1 12l8.047 3.23L12.006 24l2.958-8.77z";
+const ROUND_PATH = "M17.425 13.854c1.665-.675 1.665-3.033 0-3.708l-2.73-1.106-.793-2.37c-.609-1.82-3.184-1.82-3.793 0l-.793 2.37-2.734 1.106c-1.666.674-1.666 3.034 0 3.708l2.734 1.106.793 2.37c.609 1.82 3.184 1.82 3.793 0l.793-2.37z";
+const SVG_STYLE = { width: "100%", height: "100%", display: "block" };
+const GRADIENT_ID = "ai-mark-gradient";
+function SVGMorph({ delay, paths, inheritColor = false }) {
+  const [pathIndex, setPathIndex] = useState(0);
+  const progress = useMotionValue(0);
+  const arrayOfIndex = useMemo(() => paths.map((_, i) => i), [paths]);
+  const path = useTransform(progress, arrayOfIndex, paths, {
+    mixer: (a, b) => interpolate(a, b, { maxSegmentLength: 1 })
+  });
+  useEffect(() => {
+    const animation = animate(progress, pathIndex, {
+      duration: 0.8,
+      ease: [0.5, 0, 0.65, 1],
+      delay,
+      onComplete: () => {
+        if (pathIndex === paths.length - 1) {
+          progress.set(0);
+          setPathIndex(1);
+        } else {
+          setPathIndex(pathIndex + 1);
+        }
+      }
+    });
+    return () => {
+      animation.stop();
+    };
+  }, [pathIndex, paths.length, progress, delay]);
+  return /* @__PURE__ */ jsx(
+    motion.path,
+    {
+      fill: inheritColor ? "currentColor" : `url(#${GRADIENT_ID})`,
+      d: path
+    }
+  );
+}
+const AiMarkIconAnimatedSegment = memo(
+  ({
+    animate: animate2 = false,
+    delay,
+    className,
+    inheritColor = false,
+    spin = false
+  }) => {
+    const fill = inheritColor ? "currentColor" : `url(#${GRADIENT_ID})`;
+    const { mode } = useTheme();
+    const gradientDef = !inheritColor && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+      "linearGradient",
+      {
+        id: GRADIENT_ID,
+        x1: "0.4962",
+        y1: "0.2483",
+        x2: "-0.0543",
+        y2: "0.4319",
+        gradientUnits: "objectBoundingBox",
+        children: [
+          /* @__PURE__ */ jsx(
+            "stop",
+            {
+              stopColor: mode === "dark" ? "#77C5EA" : "#026EE4",
+              style: {
+                stopColor: mode === "dark" ? "#77C5EA" : "#026EE4",
+                stopOpacity: 1
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "stop",
+            {
+              offset: "1",
+              stopColor: mode === "dark" ? "#D0D8E1" : "#27AEEE",
+              style: {
+                stopColor: mode === "dark" ? "#D0D8E1" : "#27AEEE",
+                stopOpacity: 1
+              }
+            }
+          )
+        ]
+      }
+    ) });
+    if (!animate2) {
+      return /* @__PURE__ */ jsxs("svg", { className, style: SVG_STYLE, viewBox: "0 0 24 24", children: [
+        gradientDef,
+        /* @__PURE__ */ jsx("path", { fill, d: SHARP_PATH })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(
+      motion.svg,
+      {
+        className,
+        style: SVG_STYLE,
+        viewBox: "0 0 24 24",
+        animate: spin ? { rotate: 180 } : {},
+        transition: {
+          duration: 2,
+          type: "spring",
+          repeat: 0,
+          repeatType: "loop",
+          repeatDelay: 1.5,
+          delay
+        },
+        children: [
+          gradientDef,
+          /* @__PURE__ */ jsx(
+            SVGMorph,
+            {
+              paths: [SHARP_PATH, ROUND_PATH, SHARP_PATH],
+              delay,
+              inheritColor
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AiMarkIconAnimatedSegment.displayName = "AiMarkIconAnimatedSegment";
+const AiMarkIconAnimated = ({
+  animate: animate2 = false,
+  size = 16,
+  inheritColor = false,
+  spin = false
+}) => {
+  const { prefersReducedMotion } = usePrefersReducedMotion();
+  const shouldAnimate = animate2 && !prefersReducedMotion;
+  const largeSvgSize = size * 0.75;
+  const smallSvgSize = size * 6 / 16;
+  const containerStyle = useMemo(
+    () => ({ position: "relative", width: size, height: size }),
+    [size]
+  );
+  const largeIconStyle = useMemo(
+    () => ({
+      position: "absolute",
+      bottom: size / 16,
+      left: size / 16,
+      width: largeSvgSize,
+      height: largeSvgSize
+    }),
+    [largeSvgSize, size]
+  );
+  const smallIconStyle = useMemo(
+    () => ({
+      position: "absolute",
+      top: size / 16,
+      right: size / 16,
+      width: smallSvgSize,
+      height: smallSvgSize
+    }),
+    [smallSvgSize, size]
+  );
+  return /* @__PURE__ */ jsxs("div", { style: containerStyle, "data-anv": "ai-mark-icon-animated", children: [
+    /* @__PURE__ */ jsx("div", { style: largeIconStyle, children: /* @__PURE__ */ jsx(
+      AiMarkIconAnimatedSegment,
+      {
+        animate: shouldAnimate,
+        delay: 0.15,
+        inheritColor,
+        spin
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { style: smallIconStyle, children: /* @__PURE__ */ jsx(
+      AiMarkIconAnimatedSegment,
+      {
+        animate: shouldAnimate,
+        inheritColor,
+        spin
+      }
+    ) })
+  ] });
+};
+
+const SvgAiChat = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M20.488 7.014A1.51 1.51 0 0 1 22 8.513v8.991a1.51 1.51 0 0 1-1.512 1.499H9.9L6.875 22v-9.975l.757-2.763 6.404-2.248zm-9.831 7.493a.756.756 0 0 0-.757.75c0 .412.34.749.757.749h7.562a.755.755 0 0 0 .756-.75.755.755 0 0 0-.756-.749zm0-2.248a.756.756 0 0 0-.757.75c0 .412.34.749.757.749h7.562a.755.755 0 0 0 .756-.75.755.755 0 0 0-.756-.749zm0-2.248a.756.756 0 0 0-.757.75c0 .412.34.749.757.749h7.562a.755.755 0 0 0 .756-.75.755.755 0 0 0-.756-.749z" }), /* @__PURE__ */ React.createElement("path", { d: "m6.56 5.49 3.811 1.36L6.56 8.213l-1.373 3.776L3.81 8.213 0 6.85l3.81-1.36 1.376-3.778zm3.639-3.607 1.9.685-1.9.687-.692 1.883-.692-1.883-1.901-.687 1.9-.685L9.508 0z" }));
+
+const SvgAiEdit = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M18.655 10.414 7.218 21.844A.5.5 0 0 1 6.85 22H3.666a.52.52 0 0 1-.524-.523V18.29q0-.22.157-.376l11.428-11.43zM6.814 5.756l3.96 1.427-3.96 1.43-1.427 3.958L3.96 8.612 0 7.183l3.959-1.427 1.428-3.96zM18.503 3.14a1.05 1.05 0 0 1 .74.307l2.45 2.45a1.05 1.05 0 0 1 .227 1.14q-.08.19-.227.338l-1.916 1.917-3.928-3.929 1.916-1.916a1.05 1.05 0 0 1 .738-.307m-7.908-1.165 1.975.718-1.975.72-.718 1.975-.72-1.975-1.975-.72 1.975-.718L9.877 0z" }));
+
+const SvgAiForm = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M22 6c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2v-9.17c0-.53.21-1.04.59-1.41l4.83-4.83c.37-.38.88-.59 1.41-.59zM11 18c-.55 0-1 .45-1 1s.45 1 1 1h8c.55 0 1-.45 1-1s-.45-1-1-1zm0-4c-.55 0-1 .45-1 1s.45 1 1 1h8c.55 0 1-.45 1-1s-.45-1-1-1zm3-4c-.55 0-1 .45-1 1s.45 1 1 1h5c.55 0 1-.45 1-1s-.45-1-1-1z", clipRule: "evenodd" }), /* @__PURE__ */ React.createElement("path", { d: "m6.505 5.495 3.781 1.363-3.78 1.363L5.142 12 3.78 8.22 0 6.859l3.78-1.363 1.363-3.78zm3.61-3.608L12 2.572l-1.885.686-.687 1.885-.686-1.885-1.885-.686 1.885-.685L9.428 0z" }));
+
+const SvgAiMic = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M21.513 13.737c.595 0 1.071.554.974 1.17a7.3 7.3 0 0 1-1.958 3.959 6.7 6.7 0 0 1-3.805 1.973v2.134c0 .565-.439 1.027-.975 1.027s-.974-.462-.974-1.027V20.84c-2.945-.441-5.287-2.854-5.765-5.933-.087-.615.381-1.169.976-1.169.232.002.456.09.631.25s.29.38.324.622c.4 2.412 2.4 4.26 4.808 4.26s4.408-1.848 4.808-4.26c.078-.503.479-.872.956-.872" }), /* @__PURE__ */ React.createElement("path", { d: "M15.749 4.5c1.619 0 2.925 1.375 2.925 3.08v6.157c0 1.704-1.306 3.08-2.925 3.08s-2.925-1.376-2.926-3.08V7.58c0-1.703 1.307-3.079 2.926-3.079m-7.743.994 3.78 1.362-3.78 1.364L6.643 12 5.28 8.22 1.5 6.858l3.78-1.362 1.363-3.781zm3.609-3.61 1.885.686-1.885.687-.685 1.885-.688-1.885-1.885-.687 1.885-.686L10.93 0z" }));
+
+const SvgAiSearch = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", d: "M11.757 7.838a6.3 6.3 0 0 1 2.828-.288c2.71.329 4.955 2.476 5.41 5.165a6.28 6.28 0 0 1-1.431 5.165l.27.26h.765l4.104 4.121a1.02 1.02 0 0 1 0 1.442 1.024 1.024 0 0 1-1.443 0l-4.112-4.11v-.765l-.262-.271a6.29 6.29 0 0 1-5.168 1.43c-2.69-.454-4.84-2.698-5.168-5.406a6.29 6.29 0 0 1 4.207-6.743m2.034 1.599a4.35 4.35 0 0 0-4.355 4.352 4.35 4.35 0 0 0 4.355 4.352 4.35 4.35 0 0 0 4.357-4.352 4.35 4.35 0 0 0-4.357-4.352", clipRule: "evenodd" }), /* @__PURE__ */ React.createElement("path", { d: "m6.505 5.495 3.781 1.362-3.78 1.364L5.142 12 3.779 8.22 0 6.858l3.78-1.362 1.363-3.781zm3.61-3.61L12 2.571l-1.885.687-.686 1.885-.687-1.885-1.885-.687 1.885-.686L9.43 0z" }));
+
+const AI_ICON_MAP = {
+  chat: SvgAiChat,
+  edit: SvgAiEdit,
+  form: SvgAiForm,
+  mic: SvgAiMic,
+  search: SvgAiSearch
+};
+const ICON_ONLY_AI_SIZE_PX = {
+  xsmall: 12,
+  small: 14,
+  medium: 24,
+  large: 24
+};
+function iconHasLeadingSlot(icon) {
+  if (!icon) {
+    return false;
+  }
+  if (typeof icon !== "object") {
+    return true;
+  }
+  return "before" in icon;
+}
+function aiMarkShowsAnimatedMark(aiMark) {
+  return aiMark === true || aiMark === "mark";
+}
+
+const Button = forwardRef(
+  (props, ref) => {
+    const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+    const {
+      aiMark,
+      children,
+      className,
+      appearance = "secondary",
+      size = "medium",
+      icon,
+      loading = false,
+      disabled,
+      style,
+      type = "button",
+      onMouseEnter,
+      onMouseLeave,
+      onFocus,
+      onBlur,
+      ...rest
+    } = componentProps;
+    const aiOn = !!aiMark;
+    const isIconOnly = !children;
+    if (aiOn && icon) {
+      if (isIconOnly) {
+        warnOnce(
+          "[Anvil2 Button] The `icon` prop is ignored when `aiMark` is set on an icon-only button. Only the AI icon is rendered."
+        );
+      } else if (iconHasLeadingSlot(icon)) {
+        warnOnce(
+          "[Anvil2 Button] The leading `icon` (plain Svg or `icon.before`) is ignored when `aiMark` is set with button text. Use `icon={{ after: Svg }}` for a trailing icon, or omit `icon`."
+        );
+      }
+    }
+    const data = {
+      children: childrenToString(props.children),
+      appearance,
+      icon,
+      size,
+      type,
+      aiMark
+    };
+    const trackingId = useTrackingId({
+      name: "Button",
+      data,
+      hasOverride: !!props["data-tracking-id"]
+    });
+    const [isHovered, setIsHovered] = useState(false);
+    const [isFocused, setIsFocused] = useState(false);
+    const isAnimated = isHovered || isFocused;
+    const inheritColorForMark = appearance !== "secondary" && appearance !== "ghost";
+    const renderStandardLeading = useCallback(() => {
+      if (typeof icon === "object" && icon !== null && "before" in icon) {
+        return /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: styles["icon"],
+            inherit: true,
+            "aria-hidden": true,
+            svg: icon.before
+          }
+        );
+      }
+      if (icon && typeof icon !== "object") {
+        return /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: styles["icon"],
+            inherit: true,
+            "aria-hidden": true,
+            svg: icon,
+            size: !children && !size.includes("small") ? "large" : "medium"
+          }
+        );
+      }
+      return null;
+    }, [icon, children, size]);
+    const renderAiLeading = useCallback(() => {
+      if (aiMarkShowsAnimatedMark(aiMark)) {
+        return /* @__PURE__ */ jsx(
+          AiMarkIconAnimated,
+          {
+            animate: isAnimated,
+            inheritColor: inheritColorForMark,
+            size: isIconOnly ? ICON_ONLY_AI_SIZE_PX[size] : void 0,
+            spin: true
+          }
+        );
+      }
+      const SvgIcon = AI_ICON_MAP[aiMark];
+      return /* @__PURE__ */ jsx(
+        Icon,
+        {
+          className: styles["icon"],
+          inherit: true,
+          "aria-hidden": true,
+          "data-anv": "ai-mark-icon",
+          svg: SvgIcon,
+          size: isIconOnly && !size.includes("small") ? "large" : "medium"
+        }
+      );
+    }, [aiMark, isAnimated, inheritColorForMark, isIconOnly, size]);
+    const leadingContent = useMemo(() => {
+      if (loading) {
+        return /* @__PURE__ */ jsx(Spinner, { inherit: true, size: "small", className: styles["loading-spinner"] });
+      }
+      if (aiOn) {
+        return renderAiLeading();
+      }
+      return renderStandardLeading();
+    }, [aiOn, loading, renderAiLeading, renderStandardLeading]);
+    const trailingAfter = !isIconOnly && typeof icon === "object" && "after" in icon ? /* @__PURE__ */ jsx(Icon, { className: styles["icon"], inherit: true, "aria-hidden": true, svg: icon.after }) : null;
+    const buttonClassNames = cx(className, styles["button"], {
+      [styles["appearance-primary"]]: appearance === "primary",
+      [styles["appearance-secondary"]]: appearance === "secondary",
+      [styles["appearance-ghost"]]: appearance === "ghost",
+      [styles["danger-secondary"]]: appearance === "danger-secondary",
+      [styles["danger-primary"]]: appearance === "danger",
+      [styles["size-xsmall"]]: size === "xsmall" && !!children,
+      [styles["size-small"]]: size === "small" && !!children,
+      [styles["size-medium"]]: size === "medium" && !!children,
+      [styles["size-large"]]: size === "large" && !!children,
+      [styles["size-xsmall-icon"]]: size === "xsmall" && !children,
+      [styles["size-small-icon"]]: size === "small" && !children,
+      [styles["size-medium-icon"]]: size === "medium" && !children,
+      [styles["size-large-icon"]]: size === "large" && !children,
+      [styles["loading"]]: loading
+    });
+    const styleCombined = {
+      ...style,
+      ...layoutStyles
+    };
+    const handleMouseEnter = useCallback(
+      (e) => {
+        setIsHovered(true);
+        onMouseEnter?.(e);
+      },
+      [onMouseEnter]
+    );
+    const handleMouseLeave = useCallback(
+      (e) => {
+        setIsHovered(false);
+        onMouseLeave?.(e);
+      },
+      [onMouseLeave]
+    );
+    const handleFocus = useCallback(
+      (e) => {
+        setIsFocused(true);
+        onFocus?.(e);
+      },
+      [onFocus]
+    );
+    const handleBlur = useCallback(
+      (e) => {
+        setIsFocused(false);
+        onBlur?.(e);
+      },
+      [onBlur]
+    );
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        "data-tracking-id": trackingId,
+        className: buttonClassNames,
+        type,
+        disabled: disabled || loading,
+        "aria-busy": loading ? true : void 0,
+        "data-anv": "button",
+        style: styleCombined,
+        ref,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        ...rest,
+        children: [
+          leadingContent,
+          children,
+          trailingAfter
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { AiMarkIconAnimated as A, Button as B };
+//# sourceMappingURL=Button-C_V2xQAs.js.map