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-BMMbp40n.js';
import { S as Spinner } from './Spinner-lPMo68yW.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-DsGhJYRw.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-Bnt8XUI7.js.map
