AnonymousFox

//home/develito/.trash/v6/media/vendor/tinymce/themes/silver/theme.js

/**
 * TinyMCE version 8.3.2 (2026-01-14)
 */

(function () {
    'use strict';

/* eslint-disable @typescript-eslint/no-wrapper-object-types */
    const getPrototypeOf$2 = Object.getPrototypeOf;
    const hasProto = (v, constructor, predicate) => {
        if (predicate(v, constructor.prototype)) {
            return true;
        }
        else {
            // String-based fallback time
            return v.constructor?.name === constructor.name;
        }
    };
    const typeOf = (x) => {
        const t = typeof x;
        if (x === null) {
            return 'null';
        }
        else if (t === 'object' && Array.isArray(x)) {
            return 'array';
        }
        else if (t === 'object' && hasProto(x, String, (o, proto) => proto.isPrototypeOf(o))) {
            return 'string';
        }
        else {
            return t;
        }
    };
    const isType$1 = (type) => (value) => typeOf(value) === type;
    const isSimpleType = (type) => (value) => typeof value === type;
    const eq$1 = (t) => (a) => t === a;
    const is$2 = (value, constructor) => isObject(value) && hasProto(value, constructor, (o, proto) => getPrototypeOf$2(o) === proto);
    const isString = isType$1('string');
    const isObject = isType$1('object');
    const isPlainObject = (value) => is$2(value, Object);
    const isArray = isType$1('array');
    const isNull = eq$1(null);
    const isBoolean = isSimpleType('boolean');
    const isUndefined = eq$1(undefined);
    const isNullable = (a) => a === null || a === undefined;
    const isNonNullable = (a) => !isNullable(a);
    const isFunction = isSimpleType('function');
    const isNumber = isSimpleType('number');
    const isArrayOf = (value, pred) => {
        if (isArray(value)) {
            for (let i = 0, len = value.length; i < len; ++i) {
                if (!(pred(value[i]))) {
                    return false;
                }
            }
            return true;
        }
        return false;
    };

/**
     * The `Optional` type represents a value (of any type) that potentially does
     * not exist. Any `Optional<T>` can either be a `Some<T>` (in which case the
     * value does exist) or a `None` (in which case the value does not exist). This
     * module defines a whole lot of FP-inspired utility functions for dealing with
     * `Optional` objects.
     *
     * Comparison with null or undefined:
     * - We don't get fancy null coalescing operators with `Optional`
     * - We do get fancy helper functions with `Optional`
     * - `Optional` support nesting, and allow for the type to still be nullable (or
     * another `Optional`)
     * - There is no option to turn off strict-optional-checks like there is for
     * strict-null-checks
     */
    class Optional {
        tag;
        value;
        // Sneaky optimisation: every instance of Optional.none is identical, so just
        // reuse the same object
        static singletonNone = new Optional(false);
        // The internal representation has a `tag` and a `value`, but both are
        // private: able to be console.logged, but not able to be accessed by code
        constructor(tag, value) {
            this.tag = tag;
            this.value = value;
        }
        // --- Identities ---
        /**
         * Creates a new `Optional<T>` that **does** contain a value.
         */
        static some(value) {
            return new Optional(true, value);
        }
        /**
         * Create a new `Optional<T>` that **does not** contain a value. `T` can be
         * any type because we don't actually have a `T`.
         */
        static none() {
            return Optional.singletonNone;
        }
        /**
         * Perform a transform on an `Optional` type. Regardless of whether this
         * `Optional` contains a value or not, `fold` will return a value of type `U`.
         * If this `Optional` does not contain a value, the `U` will be created by
         * calling `onNone`. If this `Optional` does contain a value, the `U` will be
         * created by calling `onSome`.
         *
         * For the FP enthusiasts in the room, this function:
         * 1. Could be used to implement all of the functions below
         * 2. Forms a catamorphism
         */
        fold(onNone, onSome) {
            if (this.tag) {
                return onSome(this.value);
            }
            else {
                return onNone();
            }
        }
        /**
         * Determine if this `Optional` object contains a value.
         */
        isSome() {
            return this.tag;
        }
        /**
         * Determine if this `Optional` object **does not** contain a value.
         */
        isNone() {
            return !this.tag;
        }
        // --- Functor (name stolen from Haskell / maths) ---
        /**
         * Perform a transform on an `Optional` object, **if** there is a value. If
         * you provide a function to turn a T into a U, this is the function you use
         * to turn an `Optional<T>` into an `Optional<U>`. If this **does** contain
         * a value then the output will also contain a value (that value being the
         * output of `mapper(this.value)`), and if this **does not** contain a value
         * then neither will the output.
         */
        map(mapper) {
            if (this.tag) {
                return Optional.some(mapper(this.value));
            }
            else {
                return Optional.none();
            }
        }
        // --- Monad (name stolen from Haskell / maths) ---
        /**
         * Perform a transform on an `Optional` object, **if** there is a value.
         * Unlike `map`, here the transform itself also returns an `Optional`.
         */
        bind(binder) {
            if (this.tag) {
                return binder(this.value);
            }
            else {
                return Optional.none();
            }
        }
        // --- Traversable (name stolen from Haskell / maths) ---
        /**
         * For a given predicate, this function finds out if there **exists** a value
         * inside this `Optional` object that meets the predicate. In practice, this
         * means that for `Optional`s that do not contain a value it returns false (as
         * no predicate-meeting value exists).
         */
        exists(predicate) {
            return this.tag && predicate(this.value);
        }
        /**
         * For a given predicate, this function finds out if **all** the values inside
         * this `Optional` object meet the predicate. In practice, this means that
         * for `Optional`s that do not contain a value it returns true (as all 0
         * objects do meet the predicate).
         */
        forall(predicate) {
            return !this.tag || predicate(this.value);
        }
        filter(predicate) {
            if (!this.tag || predicate(this.value)) {
                return this;
            }
            else {
                return Optional.none();
            }
        }
        // --- Getters ---
        /**
         * Get the value out of the inside of the `Optional` object, using a default
         * `replacement` value if the provided `Optional` object does not contain a
         * value.
         */
        getOr(replacement) {
            return this.tag ? this.value : replacement;
        }
        /**
         * Get the value out of the inside of the `Optional` object, using a default
         * `replacement` value if the provided `Optional` object does not contain a
         * value.  Unlike `getOr`, in this method the `replacement` object is also
         * `Optional` - meaning that this method will always return an `Optional`.
         */
        or(replacement) {
            return this.tag ? this : replacement;
        }
        /**
         * Get the value out of the inside of the `Optional` object, using a default
         * `replacement` value if the provided `Optional` object does not contain a
         * value. Unlike `getOr`, in this method the `replacement` value is
         * "thunked" - that is to say that you don't pass a value to `getOrThunk`, you
         * pass a function which (if called) will **return** the `value` you want to
         * use.
         */
        getOrThunk(thunk) {
            return this.tag ? this.value : thunk();
        }
        /**
         * Get the value out of the inside of the `Optional` object, using a default
         * `replacement` value if the provided Optional object does not contain a
         * value.
         *
         * Unlike `or`, in this method the `replacement` value is "thunked" - that is
         * to say that you don't pass a value to `orThunk`, you pass a function which
         * (if called) will **return** the `value` you want to use.
         *
         * Unlike `getOrThunk`, in this method the `replacement` value is also
         * `Optional`, meaning that this method will always return an `Optional`.
         */
        orThunk(thunk) {
            return this.tag ? this : thunk();
        }
        /**
         * Get the value out of the inside of the `Optional` object, throwing an
         * exception if the provided `Optional` object does not contain a value.
         *
         * WARNING:
         * You should only be using this function if you know that the `Optional`
         * object **is not** empty (otherwise you're throwing exceptions in production
         * code, which is bad).
         *
         * In tests this is more acceptable.
         *
         * Prefer other methods to this, such as `.each`.
         */
        getOrDie(message) {
            if (!this.tag) {
                throw new Error(message ?? 'Called getOrDie on None');
            }
            else {
                return this.value;
            }
        }
        // --- Interop with null and undefined ---
        /**
         * Creates an `Optional` value from a nullable (or undefined-able) input.
         * Null, or undefined, is converted to `None`, and anything else is converted
         * to `Some`.
         */
        static from(value) {
            return isNonNullable(value) ? Optional.some(value) : Optional.none();
        }
        /**
         * Converts an `Optional` to a nullable type, by getting the value if it
         * exists, or returning `null` if it does not.
         */
        getOrNull() {
            return this.tag ? this.value : null;
        }
        /**
         * Converts an `Optional` to an undefined-able type, by getting the value if
         * it exists, or returning `undefined` if it does not.
         */
        getOrUndefined() {
            return this.value;
        }
        // --- Utilities ---
        /**
         * If the `Optional` contains a value, perform an action on that value.
         * Unlike the rest of the methods on this type, `.each` has side-effects. If
         * you want to transform an `Optional<T>` **into** something, then this is not
         * the method for you. If you want to use an `Optional<T>` to **do**
         * something, then this is the method for you - provided you're okay with not
         * doing anything in the case where the `Optional` doesn't have a value inside
         * it. If you're not sure whether your use-case fits into transforming
         * **into** something or **doing** something, check whether it has a return
         * value. If it does, you should be performing a transform.
         */
        each(worker) {
            if (this.tag) {
                worker(this.value);
            }
        }
        /**
         * Turn the `Optional` object into an array that contains all of the values
         * stored inside the `Optional`. In practice, this means the output will have
         * either 0 or 1 elements.
         */
        toArray() {
            return this.tag ? [this.value] : [];
        }
        /**
         * Turn the `Optional` object into a string for debugging or printing. Not
         * recommended for production code, but good for debugging. Also note that
         * these days an `Optional` object can be logged to the console directly, and
         * its inner value (if it exists) will be visible.
         */
        toString() {
            return this.tag ? `some(${this.value})` : 'none()';
        }
    }

// There are many variations of Object iteration that are faster than the 'for-in' style:
    // http://jsperf.com/object-keys-iteration/107
    //
    // Use the native keys if it is available (IE9+), otherwise fall back to manually filtering
    const keys = Object.keys;
    const hasOwnProperty = Object.hasOwnProperty;
    const each = (obj, f) => {
        const props = keys(obj);
        for (let k = 0, len = props.length; k < len; k++) {
            const i = props[k];
            const x = obj[i];
            f(x, i);
        }
    };
    const map$1 = (obj, f) => {
        return tupleMap(obj, (x, i) => ({
            k: i,
            v: f(x, i)
        }));
    };
    const tupleMap = (obj, f) => {
        const r = {};
        each(obj, (x, i) => {
            const tuple = f(x, i);
            r[tuple.k] = tuple.v;
        });
        return r;
    };
    const objAcc = (r) => (x, i) => {
        r[i] = x;
    };
    const internalFilter = (obj, pred, onTrue, onFalse) => {
        each(obj, (x, i) => {
            (pred(x, i) ? onTrue : onFalse)(x, i);
        });
    };
    const bifilter = (obj, pred) => {
        const t = {};
        const f = {};
        internalFilter(obj, pred, objAcc(t), objAcc(f));
        return { t, f };
    };
    const filter$1 = (obj, pred) => {
        const t = {};
        internalFilter(obj, pred, objAcc(t), noop);
        return t;
    };
    const mapToArray = (obj, f) => {
        const r = [];
        each(obj, (value, name) => {
            r.push(f(value, name));
        });
        return r;
    };
    const find$4 = (obj, pred) => {
        const props = keys(obj);
        for (let k = 0, len = props.length; k < len; k++) {
            const i = props[k];
            const x = obj[i];
            if (pred(x, i, obj)) {
                return Optional.some(x);
            }
        }
        return Optional.none();
    };
    const values = (obj) => {
        return mapToArray(obj, identity);
    };
    const get$h = (obj, key) => {
        return has$2(obj, key) ? Optional.from(obj[key]) : Optional.none();
    };
    const has$2 = (obj, key) => hasOwnProperty.call(obj, key);
    const hasNonNullableKey = (obj, key) => has$2(obj, key) && obj[key] !== undefined && obj[key] !== null;

/*
     * Generates a church encoded ADT (https://en.wikipedia.org/wiki/Church_encoding)
     * For syntax and use, look at the test code.
     */
    const generate$7 = (cases) => {
        // validation
        if (!isArray(cases)) {
            throw new Error('cases must be an array');
        }
        if (cases.length === 0) {
            throw new Error('there must be at least one case');
        }
        const constructors = [];
        // adt is mutated to add the individual cases
        const adt = {};
        each$1(cases, (acase, count) => {
            const keys$1 = keys(acase);
            // validation
            if (keys$1.length !== 1) {
                throw new Error('one and only one name per case');
            }
            const key = keys$1[0];
            const value = acase[key];
            // validation
            if (adt[key] !== undefined) {
                throw new Error('duplicate key detected:' + key);
            }
            else if (key === 'cata') {
                throw new Error('cannot have a case named cata (sorry)');
            }
            else if (!isArray(value)) {
                // this implicitly checks if acase is an object
                throw new Error('case arguments must be an array');
            }
            constructors.push(key);
            //
            // constructor for key
            //
            adt[key] = (...args) => {
                const argLength = args.length;
                // validation
                if (argLength !== value.length) {
                    throw new Error('Wrong number of arguments to case ' + key + '. Expected ' + value.length + ' (' + value + '), got ' + argLength);
                }
                const match = (branches) => {
                    const branchKeys = keys(branches);
                    if (constructors.length !== branchKeys.length) {
                        throw new Error('Wrong number of arguments to match. Expected: ' + constructors.join(',') + '\nActual: ' + branchKeys.join(','));
                    }
                    const allReqd = forall(constructors, (reqKey) => {
                        return contains$2(branchKeys, reqKey);
                    });
                    if (!allReqd) {
                        throw new Error('Not all branches were specified when using match. Specified: ' + branchKeys.join(', ') + '\nRequired: ' + constructors.join(', '));
                    }
                    return branches[key].apply(null, args);
                };
                //
                // the fold function for key
                //
                return {
                    fold: (...foldArgs) => {
                        // runtime validation
                        if (foldArgs.length !== cases.length) {
                            throw new Error('Wrong number of arguments to fold. Expected ' + cases.length + ', got ' + foldArgs.length);
                        }
                        const target = foldArgs[count];
                        return target.apply(null, args);
                    },
                    match,
                    // NOTE: Only for debugging.
                    log: (label) => {
                        // eslint-disable-next-line no-console
                        console.log(label, {
                            constructors,
                            constructor: key,
                            params: args
                        });
                    }
                };
            };
        });
        return adt;
    };
    const Adt = {
        generate: generate$7
    };

/**
     * Creates a new `Result<T, E>` that **does** contain a value.
     */
    const value$4 = (value) => {
        const applyHelper = (fn) => fn(value);
        const constHelper = constant$1(value);
        const outputHelper = () => output;
        const output = {
            // Debug info
            tag: true,
            inner: value,
            // Actual Result methods
            fold: (_onError, onValue) => onValue(value),
            isValue: always,
            isError: never,
            map: (mapper) => Result.value(mapper(value)),
            mapError: outputHelper,
            bind: applyHelper,
            exists: applyHelper,
            forall: applyHelper,
            getOr: constHelper,
            or: outputHelper,
            getOrThunk: constHelper,
            orThunk: outputHelper,
            getOrDie: constHelper,
            each: (fn) => {
                // Can't write the function inline because we don't want to return something by mistake
                fn(value);
            },
            toOptional: () => Optional.some(value),
        };
        return output;
    };
    /**
     * Creates a new `Result<T, E>` that **does not** contain a value, and therefore
     * contains an error.
     */
    const error$1 = (error) => {
        const outputHelper = () => output;
        const output = {
            // Debug info
            tag: false,
            inner: error,
            // Actual Result methods
            fold: (onError, _onValue) => onError(error),
            isValue: never,
            isError: always,
            map: outputHelper,
            mapError: (mapper) => Result.error(mapper(error)),
            bind: outputHelper,
            exists: never,
            forall: always,
            getOr: identity,
            or: identity,
            getOrThunk: apply$1,
            orThunk: apply$1,
            getOrDie: die(String(error)),
            each: noop,
            toOptional: Optional.none,
        };
        return output;
    };
    /**
     * Creates a new `Result<T, E>` from an `Optional<T>` and an `E`. If the
     * `Optional` contains a value, so will the outputted `Result`. If it does not,
     * the outputted `Result` will contain an error (and that error will be the
     * error passed in).
     */
    const fromOption = (optional, err) => optional.fold(() => error$1(err), value$4);
    const Result = {
        value: value$4,
        error: error$1,
        fromOption
    };

// Use window object as the global if it's available since CSP will block script evals
    // eslint-disable-next-line @typescript-eslint/no-implied-eval
    const Global = typeof window !== 'undefined' ? window : Function('return this;')();

/**
     * Adds two numbers, and wrap to a range.
     * If the result overflows to the right, snap to the left.
     * If the result overflows to the left, snap to the right.
     */
    const cycleBy = (value, delta, min, max) => {
        const r = value + delta;
        if (r > max) {
            return min;
        }
        else if (r < min) {
            return max;
        }
        else {
            return r;
        }
    };
    // ASSUMPTION: Max will always be larger than min
    const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
    // the division is meant to get a number between 0 and 1 for more information check this discussion: https://stackoverflow.com/questions/58285941/how-to-replace-math-random-with-crypto-getrandomvalues-and-keep-same-result
    const random = () => window.crypto.getRandomValues(new Uint32Array(1))[0] / 4294967295;

/**
     * Generate a unique identifier.
     *
     * The unique portion of the identifier only contains an underscore
     * and digits, so that it may safely be used within HTML attributes.
     *
     * The chance of generating a non-unique identifier has been minimized
     * by combining the current time, a random number and a one-up counter.
     *
     * generate :: String -> String
     */
    let unique = 0;
    const generate$6 = (prefix) => {
        const date = new Date();
        const time = date.getTime();
        const random$1 = Math.floor(random() * 1000000000);
        unique++;
        return prefix + '_' + random$1 + unique + String(time);
    };

/**
     * **Is** the value stored inside this Optional object equal to `rhs`?
     */
    const is$1 = (lhs, rhs, comparator = tripleEquals) => lhs.exists((left) => comparator(left, rhs));
    /**
     * Are these two Optional objects equal? Equality here means either they're both
     * `Some` (and the values are equal under the comparator) or they're both `None`.
     */
    const equals = (lhs, rhs, comparator = tripleEquals) => lift2(lhs, rhs, comparator).getOr(lhs.isNone() && rhs.isNone());
    const cat = (arr) => {
        const r = [];
        const push = (x) => {
            r.push(x);
        };
        for (let i = 0; i < arr.length; i++) {
            arr[i].each(push);
        }
        return r;
    };
    const sequence = (arr) => {
        const r = [];
        for (let i = 0; i < arr.length; i++) {
            const x = arr[i];
            if (x.isSome()) {
                r.push(x.getOrDie());
            }
            else {
                return Optional.none();
            }
        }
        return Optional.some(r);
    };
    /*
    Notes on the lift functions:
    - We used to have a generic liftN, but we were concerned about its type-safety, and the below variants were faster in microbenchmarks.
    - The getOrDie calls are partial functions, but are checked beforehand. This is faster and more convenient (but less safe) than folds.
    - && is used instead of a loop for simplicity and performance.
    */
    const lift2 = (oa, ob, f) => oa.isSome() && ob.isSome() ? Optional.some(f(oa.getOrDie(), ob.getOrDie())) : Optional.none();
    const lift3 = (oa, ob, oc, f) => oa.isSome() && ob.isSome() && oc.isSome() ? Optional.some(f(oa.getOrDie(), ob.getOrDie(), oc.getOrDie())) : Optional.none();
    const mapFrom = (a, f) => (a !== undefined && a !== null) ? Optional.some(f(a)) : Optional.none();
    // This can help with type inference, by specifying the type param on the none case, so the caller doesn't have to.
    const someIf = (b, a) => b ? Optional.some(a) : Optional.none();

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping
    const escape = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

/** path :: ([String], JsObj?) -> JsObj */
    const path$1 = (parts, scope) => {
        let o = scope !== undefined && scope !== null ? scope : Global;
        for (let i = 0; i < parts.length && o !== undefined && o !== null; ++i) {
            o = o[parts[i]];
        }
        return o;
    };
    /** resolve :: (String, JsObj?) -> JsObj */
    const resolve = (p, scope) => {
        const parts = p.split('.');
        return path$1(parts, scope);
    };

Adt.generate([
        { bothErrors: ['error1', 'error2'] },
        { firstError: ['error1', 'value2'] },
        { secondError: ['value1', 'error2'] },
        { bothValues: ['value1', 'value2'] }
    ]);
    /** partition :: [Result a] -> { errors: [String], values: [a] } */
    const partition$2 = (results) => {
        const errors = [];
        const values = [];
        each$1(results, (result) => {
            result.fold((err) => {
                errors.push(err);
            }, (value) => {
                values.push(value);
            });
        });
        return { errors, values };
    };

const addToEnd = (str, suffix) => {
        return str + suffix;
    };
    const removeFromStart = (str, numChars) => {
        return str.substring(numChars);
    };

// Run a function fn after rate ms. If another invocation occurs
    // during the time it is waiting, update the arguments f will run
    // with (but keep the current schedule)
    const adaptable = (fn, rate) => {
        let timer = null;
        let args = null;
        const cancel = () => {
            if (!isNull(timer)) {
                clearTimeout(timer);
                timer = null;
                args = null;
            }
        };
        const throttle = (...newArgs) => {
            args = newArgs;
            if (isNull(timer)) {
                timer = setTimeout(() => {
                    const tempArgs = args;
                    timer = null;
                    args = null;
                    fn.apply(null, tempArgs);
                }, rate);
            }
        };
        return {
            cancel,
            throttle
        };
    };
    // Run a function fn after rate ms. If another invocation occurs
    // during the time it is waiting, ignore it completely.
    const first$1 = (fn, rate) => {
        let timer = null;
        const cancel = () => {
            if (!isNull(timer)) {
                clearTimeout(timer);
                timer = null;
            }
        };
        const throttle = (...args) => {
            if (isNull(timer)) {
                timer = setTimeout(() => {
                    timer = null;
                    fn.apply(null, args);
                }, rate);
            }
        };
        return {
            cancel,
            throttle
        };
    };
    // Run a function fn after rate ms. If another invocation occurs
    // during the time it is waiting, reschedule the function again
    // with the new arguments.
    const last = (fn, rate) => {
        let timer = null;
        const cancel = () => {
            if (!isNull(timer)) {
                clearTimeout(timer);
                timer = null;
            }
        };
        const throttle = (...args) => {
            cancel();
            timer = setTimeout(() => {
                timer = null;
                fn.apply(null, args);
            }, rate);
        };
        return {
            cancel,
            throttle
        };
    };

const zeroWidth = '\uFEFF';
    const nbsp = '\u00A0';

// NOTE: Mutates the range.
    const setStart = (rng, situ) => {
        situ.fold((e) => {
            rng.setStartBefore(e.dom);
        }, (e, o) => {
            rng.setStart(e.dom, o);
        }, (e) => {
            rng.setStartAfter(e.dom);
        });
    };
    const setFinish = (rng, situ) => {
        situ.fold((e) => {
            rng.setEndBefore(e.dom);
        }, (e, o) => {
            rng.setEnd(e.dom, o);
        }, (e) => {
            rng.setEndAfter(e.dom);
        });
    };
    const relativeToNative = (win, startSitu, finishSitu) => {
        const range = win.document.createRange();
        setStart(range, startSitu);
        setFinish(range, finishSitu);
        return range;
    };
    const exactToNative = (win, start, soffset, finish, foffset) => {
        const rng = win.document.createRange();
        rng.setStart(start.dom, soffset);
        rng.setEnd(finish.dom, foffset);
        return rng;
    };
    const toRect = (rect) => ({
        left: rect.left,
        top: rect.top,
        right: rect.right,
        bottom: rect.bottom,
        width: rect.width,
        height: rect.height
    });
    const getFirstRect$1 = (rng) => {
        const rects = rng.getClientRects();
        // ASSUMPTION: The first rectangle is the start of the selection
        const rect = rects.length > 0 ? rects[0] : rng.getBoundingClientRect();
        return rect.width > 0 || rect.height > 0 ? Optional.some(rect).map(toRect) : Optional.none();
    };
    const getBounds$3 = (rng) => {
        const rect = rng.getBoundingClientRect();
        return rect.width > 0 || rect.height > 0 ? Optional.some(rect).map(toRect) : Optional.none();
    };

const DOCUMENT = 9;
    const DOCUMENT_FRAGMENT = 11;
    const ELEMENT = 1;
    const TEXT = 3;

const eq = (e1, e2) => e1.dom === e2.dom;
    // Returns: true if node e1 contains e2, otherwise false.
    // (returns false if e1===e2: A node does not contain itself).
    const contains = (e1, e2) => {
        const d1 = e1.dom;
        const d2 = e2.dom;
        return d1 === d2 ? false : d1.contains(d2);
    };

const DeviceType = (os, browser, userAgent, mediaMatch) => {
        const isiPad = os.isiOS() && /ipad/i.test(userAgent) === true;
        const isiPhone = os.isiOS() && !isiPad;
        const isMobile = os.isiOS() || os.isAndroid();
        const isTouch = isMobile || mediaMatch('(pointer:coarse)');
        const isTablet = isiPad || !isiPhone && isMobile && mediaMatch('(min-device-width:768px)');
        const isPhone = isiPhone || isMobile && !isTablet;
        const iOSwebview = browser.isSafari() && os.isiOS() && /safari/i.test(userAgent) === false;
        const isDesktop = !isPhone && !isTablet && !iOSwebview;
        return {
            isiPad: constant$1(isiPad),
            isiPhone: constant$1(isiPhone),
            isTablet: constant$1(isTablet),
            isPhone: constant$1(isPhone),
            isTouch: constant$1(isTouch),
            isAndroid: os.isAndroid,
            isiOS: os.isiOS,
            isWebView: constant$1(iOSwebview),
            isDesktop: constant$1(isDesktop)
        };
    };

const mediaMatch = (query) => window.matchMedia(query).matches;
    // IMPORTANT: Must be in a thunk, otherwise rollup thinks calling this immediately
    // causes side effects and won't tree shake this away
    // Note: navigator.userAgentData is not part of the native typescript types yet
    let platform = cached(() => PlatformDetection.detect(window.navigator.userAgent, Optional.from((window.navigator.userAgentData)), mediaMatch));
    const detect$1 = () => platform();

const getPrototypeOf$1 = Object.getPrototypeOf;
    /*
     * IE9 and above
     *
     * MDN no use on this one, but here's the link anyway:
     * https://developer.mozilla.org/en/docs/Web/API/HTMLElement
     */
    const sandHTMLElement = (scope) => {
        return getOrDie$1('HTMLElement', scope);
    };
    const isPrototypeOf = (x) => {
        // use Resolve to get the window object for x and just return undefined if it can't find it.
        // undefined scope later triggers using the global window.
        const scope = resolve('ownerDocument.defaultView', x);
        // TINY-7374: We can't rely on looking at the owner window HTMLElement as the element may have
        // been constructed in a different window and then appended to the current window document.
        return isObject(x) && (sandHTMLElement(scope).prototype.isPrototypeOf(x) || /^HTML\w*Element$/.test(getPrototypeOf$1(x).constructor.name));
    };

const name$3 = (element) => {
        const r = element.dom.nodeName;
        return r.toLowerCase();
    };
    const type$1 = (element) => element.dom.nodeType;
    const isType = (t) => (element) => type$1(element) === t;
    const isHTMLElement = (element) => isElement$1(element) && isPrototypeOf(element.dom);
    const isElement$1 = isType(ELEMENT);
    const isText = isType(TEXT);
    const isDocument = isType(DOCUMENT);
    const isDocumentFragment = isType(DOCUMENT_FRAGMENT);
    const isTag = (tag) => (e) => isElement$1(e) && name$3(e) === tag;

/**
     * The document associated with the current element
     * NOTE: this will throw if the owner is null.
     */
    const owner$4 = (element) => SugarElement.fromDom(element.dom.ownerDocument);
    /**
     * If the element is a document, return it. Otherwise, return its ownerDocument.
     * @param dos
     */
    const documentOrOwner = (dos) => isDocument(dos) ? dos : owner$4(dos);
    const documentElement = (element) => SugarElement.fromDom(documentOrOwner(element).dom.documentElement);
    /**
     * The window element associated with the element
     * NOTE: this will throw if the defaultView is null.
     */
    const defaultView = (element) => SugarElement.fromDom(documentOrOwner(element).dom.defaultView);
    const parent = (element) => Optional.from(element.dom.parentNode).map(SugarElement.fromDom);
    // Cast down to just be SugarElement<Node>
    const parentNode = (element) => parent(element);
    const parentElement = (element) => Optional.from(element.dom.parentElement).map(SugarElement.fromDom);
    const parents = (element, isRoot) => {
        const stop = isFunction(isRoot) ? isRoot : never;
        // This is used a *lot* so it needs to be performant, not recursive
        let dom = element.dom;
        const ret = [];
        while (dom.parentNode !== null && dom.parentNode !== undefined) {
            const rawParent = dom.parentNode;
            const p = SugarElement.fromDom(rawParent);
            ret.push(p);
            if (stop(p) === true) {
                break;
            }
            else {
                dom = rawParent;
            }
        }
        return ret;
    };
    const offsetParent = (element) => Optional.from(element.dom.offsetParent).map(SugarElement.fromDom);
    const prevSibling = (element) => Optional.from(element.dom.previousSibling).map(SugarElement.fromDom);
    const nextSibling = (element) => Optional.from(element.dom.nextSibling).map(SugarElement.fromDom);
    const children = (element) => map$2(element.dom.childNodes, SugarElement.fromDom);
    const child$2 = (element, index) => {
        const cs = element.dom.childNodes;
        return Optional.from(cs[index]).map(SugarElement.fromDom);
    };
    const firstChild = (element) => child$2(element, 0);
    const spot = (element, offset) => ({
        element,
        offset
    });
    const leaf = (element, offset) => {
        const cs = children(element);
        return cs.length > 0 && offset < cs.length ? spot(cs[offset], 0) : spot(element, offset);
    };

const makeRange = (start, soffset, finish, foffset) => {
        const doc = owner$4(start);
        // TODO: We need to think about a better place to put native range creation code. Does it even belong in sugar?
        // Could the `Compare` checks (node.compareDocumentPosition) handle these situations better?
        const rng = doc.dom.createRange();
        rng.setStart(start.dom, soffset);
        rng.setEnd(finish.dom, foffset);
        return rng;
    };
    const after$2 = (start, soffset, finish, foffset) => {
        const r = makeRange(start, soffset, finish, foffset);
        const same = eq(start, finish) && soffset === foffset;
        return r.collapsed && !same;
    };

/**
     * Is the element a ShadowRoot?
     *
     * Note: this is insufficient to test if any element is a shadow root, but it is sufficient to differentiate between
     * a Document and a ShadowRoot.
     */
    const isShadowRoot = (dos) => isDocumentFragment(dos) && isNonNullable(dos.dom.host);
    const getRootNode = (e) => SugarElement.fromDom(e.dom.getRootNode());
    /** Where content needs to go. ShadowRoot or document body */
    const getContentContainer = (dos) => 
    // Can't use SugarBody.body without causing a circular module reference (since SugarBody.inBody uses SugarShadowDom)
    isShadowRoot(dos) ? dos : SugarElement.fromDom(documentOrOwner(dos).dom.body);
    /** Is this element either a ShadowRoot or a descendent of a ShadowRoot. */
    const isInShadowRoot = (e) => getShadowRoot(e).isSome();
    /** If this element is in a ShadowRoot, return it. */
    const getShadowRoot = (e) => {
        const r = getRootNode(e);
        return isShadowRoot(r) ? Optional.some(r) : Optional.none();
    };
    /** Return the host of a ShadowRoot.
     *
     * This function will throw if Shadow DOM is unsupported in the browser, or if the host is null.
     * If you actually have a ShadowRoot, this shouldn't happen.
     */
    const getShadowHost = (e) => SugarElement.fromDom(e.dom.host);
    /**
     * When Events bubble up through a ShadowRoot, the browser changes the target to be the shadow host.
     * This function gets the "original" event target if possible.
     * This only works if the shadow tree is open - if the shadow tree is closed, event.target is returned.
     * See: https://developers.google.com/web/fundamentals/web-components/shadowdom#events
     */
    const getOriginalEventTarget = (event) => {
        if (isNonNullable(event.target)) {
            const el = SugarElement.fromDom(event.target);
            if (isElement$1(el) && isOpenShadowHost(el)) {
                // When target element is inside Shadow DOM we need to take first element from composedPath
                // otherwise we'll get Shadow Root parent, not actual target element.
                if (event.composed && event.composedPath) {
                    const composedPath = event.composedPath();
                    if (composedPath) {
                        return head(composedPath);
                    }
                }
            }
        }
        return Optional.from(event.target);
    };
    /** Return true if the element is a host of an open shadow root.
     *  Return false if the element is a host of a closed shadow root, or if the element is not a host.
     */
    const isOpenShadowHost = (element) => isNonNullable(element.dom.shadowRoot);

const filter = always; // no filter on plain DomEvents
    const bind$1 = (element, event, handler) => bind$2(element, event, filter, handler);
    const capture = (element, event, handler) => capture$1(element, event, filter, handler);
    const fromRawEvent = fromRawEvent$1;

const getDocument = () => SugarElement.fromDom(document);

const focus$4 = (element, preventScroll = false) => element.dom.focus({ preventScroll });
    const blur$1 = (element) => element.dom.blur();
    const hasFocus = (element) => {
        const root = getRootNode(element).dom;
        return element.dom === root.activeElement;
    };
    // Note: assuming that activeElement will always be a HTMLElement (maybe we should add a runtime check?)
    const active$1 = (root = getDocument()) => Optional.from(root.dom.activeElement).map(SugarElement.fromDom);
    /**
     * Return the descendant element that has focus.
     * Use instead of SelectorFind.descendant(container, ':focus')
     *  because the :focus selector relies on keyboard focus.
     */
    const search = (element) => active$1(getRootNode(element))
        .filter((e) => element.dom.contains(e.dom));

const append$1 = (parent, elements) => {
        each$1(elements, (x) => {
            append$2(parent, x);
        });
    };

const clone$1 = (original, isDeep) => SugarElement.fromDom(original.dom.cloneNode(isDeep));
    /** Shallow clone - just the tag, no children */
    const shallow = (original) => clone$1(original, false);
    /** Deep clone - everything copied including children */
    const deep = (original) => clone$1(original, true);

const fromHtml$1 = (html, scope) => {
        const doc = scope || document;
        const div = doc.createElement('div');
        div.innerHTML = html;
        return children(SugarElement.fromDom(div));
    };

const get$f = (element) => element.dom.innerHTML;
    const set$8 = (element, content) => {
        const owner = owner$4(element);
        const docDom = owner.dom;
        // FireFox has *terrible* performance when using innerHTML = x
        const fragment = SugarElement.fromDom(docDom.createDocumentFragment());
        const contentElements = fromHtml$1(content, docDom);
        append$1(fragment, contentElements);
        empty(element);
        append$2(element, fragment);
    };
    const getOuter$2 = (element) => {
        const container = SugarElement.fromTag('div');
        const clone = SugarElement.fromDom(element.dom.cloneNode(true));
        append$2(container, clone);
        return get$f(container);
    };

// some elements, such as mathml, don't have style attributes
    // others, such as angular elements, have style attributes that aren't a CSSStyleDeclaration
    const isSupported = (dom) => dom.style !== undefined && isFunction(dom.style.getPropertyValue);

// Node.contains() is very, very, very good performance
    // http://jsperf.com/closest-vs-contains/5
    const inBody = (element) => {
        // Technically this is only required on IE, where contains() returns false for text nodes.
        // But it's cheap enough to run everywhere and Sugar doesn't have platform detection (yet).
        const dom = isText(element) ? element.dom.parentNode : element.dom;
        // use ownerDocument.body to ensure this works inside iframes.
        // Normally contains is bad because an element "contains" itself, but here we want that.
        if (dom === undefined || dom === null || dom.ownerDocument === null) {
            return false;
        }
        const doc = dom.ownerDocument;
        return getShadowRoot(SugarElement.fromDom(dom)).fold(() => doc.body.contains(dom), compose1(inBody, getShadowHost));
    };
    const body = () => getBody(SugarElement.fromDom(document));
    const getBody = (doc) => {
        const b = doc.dom.body;
        if (b === null || b === undefined) {
            throw new Error('Body is not available yet');
        }
        return SugarElement.fromDom(b);
    };

const api$2 = Dimension('height', (element) => {
        // getBoundingClientRect gives better results than offsetHeight for tables with captions on Firefox
        const dom = element.dom;
        return inBody(element) ? dom.getBoundingClientRect().height : dom.offsetHeight;
    });
    const get$d = (element) => api$2.get(element);
    const getOuter$1 = (element) => api$2.getOuter(element);
    const setMax$1 = (element, value) => {
        // These properties affect the absolute max-height, they are not counted natively, we want to include these properties.
        const inclusions = ['margin-top', 'border-top-width', 'padding-top', 'padding-bottom', 'border-bottom-width', 'margin-bottom'];
        const absMax = api$2.max(element, value, inclusions);
        set$7(element, 'max-height', absMax + 'px');
    };

const isHidden$1 = (dom) => dom.offsetWidth <= 0 && dom.offsetHeight <= 0;
    const isVisible = (element) => !isHidden$1(element.dom);

const api$1 = Dimension('width', (element) => {
        const dom = element.dom;
        return inBody(element) ? dom.getBoundingClientRect().width : dom.offsetWidth;
    });
    const set$6 = (element, h) => api$1.set(element, h);
    const get$c = (element) => api$1.get(element);
    const getOuter = (element) => api$1.getOuter(element);
    const setMax = (element, value) => {
        // These properties affect the absolute max-height, they are not counted natively, we want to include these properties.
        const inclusions = ['margin-left', 'border-left-width', 'padding-left', 'padding-right', 'border-right-width', 'margin-right'];
        const absMax = api$1.max(element, value, inclusions);
        set$7(element, 'max-width', absMax + 'px');
    };

const r$1 = (left, top) => {
        const translate = (x, y) => r$1(left + x, top + y);
        return {
            left,
            top,
            translate
        };
    };
    // tslint:disable-next-line:variable-name
    const SugarPosition = r$1;

// get scroll position (x,y) relative to document _doc (or global if not supplied)
    const get$b = (_DOC) => {
        const doc = _DOC !== undefined ? _DOC.dom : document;
        // ASSUMPTION: This is for cross-browser support, body works for Safari & EDGE, and when we have an iframe body scroller
        const x = doc.body.scrollLeft || doc.documentElement.scrollLeft;
        const y = doc.body.scrollTop || doc.documentElement.scrollTop;
        return SugarPosition(x, y);
    };
    // Scroll content to (x,y) relative to document _doc (or global if not supplied)
    const to = (x, y, _DOC) => {
        const doc = _DOC !== undefined ? _DOC.dom : document;
        const win = doc.defaultView;
        if (win) {
            win.scrollTo(x, y);
        }
    };

const api = NodeValue(isText, 'text');
    const get$a = (element) => api.get(element);

const onDirection = (isLtr, isRtl) => (element) => getDirection(element) === 'rtl' ? isRtl : isLtr;
    const getDirection = (element) => get$e(element, 'direction') === 'rtl' ? 'rtl' : 'ltr';

// Methods for handling attributes that contain a list of values <div foo="alpha beta theta">
    const read$2 = (element, attr) => {
        const value = get$g(element, attr);
        return value === undefined || value === '' ? [] : value.split(' ');
    };
    const add$4 = (element, attr, id) => {
        const old = read$2(element, attr);
        const nu = old.concat([id]);
        set$9(element, attr, nu.join(' '));
        return true;
    };
    const remove$5 = (element, attr, id) => {
        const nu = filter$2(read$2(element, attr), (v) => v !== id);
        if (nu.length > 0) {
            set$9(element, attr, nu.join(' '));
        }
        else {
            remove$8(element, attr);
        }
        return false;
    };

// TODO: An internal SelectorFilter module that doesn't SugarElement.fromDom() everything
    const first = (selector) => one(selector);
    const ancestor$1 = (scope, selector, isRoot) => ancestor$2(scope, (e) => is(e, selector), isRoot);
    const sibling = (scope, selector) => sibling$1(scope, (e) => is(e, selector));
    const child = (scope, selector) => child$1(scope, (e) => is(e, selector));
    const descendant = (scope, selector) => one(selector, scope);
    // Returns Some(closest ancestor element (sugared)) matching 'selector' up to isRoot, or None() otherwise
    const closest$3 = (scope, selector, isRoot) => {
        const is$1 = (element, selector) => is(element, selector);
        return ClosestOrAncestor(is$1, ancestor$1, scope, selector, isRoot);
    };

const set$5 = (element, status) => {
        element.dom.checked = status;
    };
    const get$9 = (element) => element.dom.checked;

// IE11 Can return undefined for a classList on elements such as math, so we make sure it's not undefined before attempting to use it.
    const supports = (element) => element.dom.classList !== undefined;
    const get$8 = (element) => read$2(element, 'class');
    const add$3 = (element, clazz) => add$4(element, 'class', clazz);
    const remove$4 = (element, clazz) => remove$5(element, 'class', clazz);
    const toggle$5 = (element, clazz) => {
        if (contains$2(get$8(element), clazz)) {
            return remove$4(element, clazz);
        }
        else {
            return add$3(element, clazz);
        }
    };

/*
     * ClassList is IE10 minimum:
     * https://developer.mozilla.org/en-US/docs/Web/API/Element.classList
     *
     * Note that IE doesn't support the second argument to toggle (at all).
     * If it did, the toggler could be better.
     */
    const add$2 = (element, clazz) => {
        if (supports(element)) {
            element.dom.classList.add(clazz);
        }
        else {
            add$3(element, clazz);
        }
    };
    const cleanClass = (element) => {
        const classList = supports(element) ? element.dom.classList : get$8(element);
        // classList is a "live list", so this is up to date already
        if (classList.length === 0) {
            // No more classes left, remove the class attribute as well
            remove$8(element, 'class');
        }
    };
    const remove$3 = (element, clazz) => {
        if (supports(element)) {
            const classList = element.dom.classList;
            classList.remove(clazz);
        }
        else {
            remove$4(element, clazz);
        }
        cleanClass(element);
    };
    const toggle$4 = (element, clazz) => {
        const result = supports(element) ? element.dom.classList.toggle(clazz) : toggle$5(element, clazz);
        cleanClass(element);
        return result;
    };
    const has = (element, clazz) => supports(element) && element.dom.classList.contains(clazz);

/*
     * ClassList is IE10 minimum:
     * https://developer.mozilla.org/en-US/docs/Web/API/Element.classList
     */
    const add$1 = (element, classes) => {
        each$1(classes, (x) => {
            add$2(element, x);
        });
    };
    const remove$2 = (element, classes) => {
        each$1(classes, (x) => {
            remove$3(element, x);
        });
    };
    const toggle$3 = (element, classes) => {
        each$1(classes, (x) => {
            toggle$4(element, x);
        });
    };
    const hasAll = (element, classes) => forall(classes, (clazz) => has(element, clazz));
    const getNative = (element) => {
        const classList = element.dom.classList;
        const r = new Array(classList.length);
        for (let i = 0; i < classList.length; i++) {
            const item = classList.item(i);
            if (item !== null) {
                r[i] = item;
            }
        }
        return r;
    };
    const get$7 = (element) => supports(element) ? getNative(element) : get$8(element);

const get$6 = (element) => element.dom.textContent;

const get$5 = (element) => element.dom.value;
    const set$4 = (element, value) => {
        if (value === undefined) {
            throw new Error('Value.set was undefined');
        }
        element.dom.value = value;
    };

const ancestors = (scope, predicate, isRoot) => filter$2(parents(scope, isRoot), predicate);

const descendants = (scope, selector) => all$3(selector, scope);

const closest$2 = (scope, predicate, isRoot) => closest$4(scope, predicate, isRoot).isSome();

const closest$1 = (scope, selector, isRoot) => closest$3(scope, selector, isRoot).isSome();

const create$5 = (start, soffset, finish, foffset) => ({
        start,
        soffset,
        finish,
        foffset
    });
    // tslint:disable-next-line:variable-name
    const SimRange = {
        create: create$5
    };

// Consider adding a type for "element"
    const adt$8 = Adt.generate([
        { domRange: ['rng'] },
        { relative: ['startSitu', 'finishSitu'] },
        { exact: ['start', 'soffset', 'finish', 'foffset'] }
    ]);
    const exactFromRange = (simRange) => adt$8.exact(simRange.start, simRange.soffset, simRange.finish, simRange.foffset);
    const getStart = (selection) => selection.match({
        domRange: (rng) => SugarElement.fromDom(rng.startContainer),
        relative: (startSitu, _finishSitu) => Situ.getStart(startSitu),
        exact: (start, _soffset, _finish, _foffset) => start
    });
    const domRange = adt$8.domRange;
    const relative$1 = adt$8.relative;
    const exact = adt$8.exact;
    const getWin = (selection) => {
        const start = getStart(selection);
        return defaultView(start);
    };
    // This is out of place but it's API so I can't remove it
    const range$1 = SimRange.create;
    // tslint:disable-next-line:variable-name
    const SimSelection = {
        domRange,
        relative: relative$1,
        exact,
        exactFromRange,
        getWin,
        range: range$1
    };

const view = (doc) => {
        // Only walk up to the document this script is defined in.
        // This prevents walking up to the parent window when the editor is in an iframe.
        const element = doc.dom === document ? Optional.none() : Optional.from(doc.dom.defaultView?.frameElement);
        return element.map(SugarElement.fromDom);
    };
    const owner$3 = (element) => owner$4(element);

var Navigation = /*#__PURE__*/Object.freeze({
        __proto__: null,
        view: view,
        owner: owner$3
    });

const isSource = (component, simulatedEvent) => eq(component.element, simulatedEvent.event.target);

var SimpleResultType;
    (function (SimpleResultType) {
        SimpleResultType[SimpleResultType["Error"] = 0] = "Error";
        SimpleResultType[SimpleResultType["Value"] = 1] = "Value";
    })(SimpleResultType || (SimpleResultType = {}));
    const fold$1 = (res, onError, onValue) => res.stype === SimpleResultType.Error ? onError(res.serror) : onValue(res.svalue);
    const partition$1 = (results) => {
        const values = [];
        const errors = [];
        each$1(results, (obj) => {
            fold$1(obj, (err) => errors.push(err), (val) => values.push(val));
        });
        return { values, errors };
    };
    const mapError = (res, f) => {
        if (res.stype === SimpleResultType.Error) {
            return { stype: SimpleResultType.Error, serror: f(res.serror) };
        }
        else {
            return res;
        }
    };
    const map = (res, f) => {
        if (res.stype === SimpleResultType.Value) {
            return { stype: SimpleResultType.Value, svalue: f(res.svalue) };
        }
        else {
            return res;
        }
    };
    const bind = (res, f) => {
        if (res.stype === SimpleResultType.Value) {
            return f(res.svalue);
        }
        else {
            return res;
        }
    };
    const bindError = (res, f) => {
        if (res.stype === SimpleResultType.Error) {
            return f(res.serror);
        }
        else {
            return res;
        }
    };
    const svalue = (v) => ({ stype: SimpleResultType.Value, svalue: v });
    const serror = (e) => ({ stype: SimpleResultType.Error, serror: e });
    const toResult$1 = (res) => fold$1(res, Result.error, Result.value);
    const fromResult = (res) => res.fold(serror, svalue);
    const SimpleResult = {
        fromResult,
        toResult: toResult$1,
        svalue,
        partition: partition$1,
        serror,
        bind,
        bindError,
        map,
        mapError,
        fold: fold$1
    };

const nu$7 = (path, getErrorInfo) => {
        return SimpleResult.serror([{
                path,
                // This is lazy so that it isn't calculated unnecessarily
                getErrorInfo
            }]);
    };
    const missingRequired = (path, key, obj) => nu$7(path, () => 'Could not find valid *required* value for "' + key + '" in ' + formatObj(obj));
    const missingKey = (path, key) => nu$7(path, () => 'Choice schema did not contain choice key: "' + key + '"');
    const missingBranch = (path, branches, branch) => nu$7(path, () => 'The chosen schema: "' + branch + '" did not exist in branches: ' + formatObj(branches));
    const unsupportedFields = (path, unsupported) => nu$7(path, () => 'There are unsupported fields: [' + unsupported.join(', ') + '] specified');
    const custom = (path, err) => nu$7(path, constant$1(err));

const field$1 = field$2;
    const customField = customField$1;
    const validateEnum = (values) => valueOf((value) => contains$2(values, value) ?
        Result.value(value) :
        Result.error(`Unsupported value: "${value}", choose one of "${values.join(', ')}".`));
    const required$1 = (key) => field$1(key, key, required$2(), anyValue());
    const requiredOf = (key, schema) => field$1(key, key, required$2(), schema);
    const requiredNumber = (key) => requiredOf(key, number);
    const requiredString = (key) => requiredOf(key, string);
    const requiredStringEnum = (key, values) => field$1(key, key, required$2(), validateEnum(values));
    const requiredFunction = (key) => requiredOf(key, functionProcessor);
    const forbid = (key, message) => field$1(key, key, asOption(), value$1((_v) => SimpleResult.serror('The field: ' + key + ' is forbidden. ' + message)));
    const requiredObjOf = (key, objSchema) => field$1(key, key, required$2(), objOf(objSchema));
    const requiredArrayOfObj = (key, objFields) => field$1(key, key, required$2(), arrOfObj(objFields));
    const requiredArrayOf = (key, schema) => field$1(key, key, required$2(), arrOf(schema));
    const option$3 = (key) => field$1(key, key, asOption(), anyValue());
    const optionOf = (key, schema) => field$1(key, key, asOption(), schema);
    const optionNumber = (key) => optionOf(key, number);
    const optionString = (key) => optionOf(key, string);
    const optionStringEnum = (key, values) => optionOf(key, validateEnum(values));
    const optionBoolean = (key) => optionOf(key, boolean);
    const optionFunction = (key) => optionOf(key, functionProcessor);
    const optionArrayOf = (key, schema) => optionOf(key, arrOf(schema));
    const optionObjOf = (key, objSchema) => optionOf(key, objOf(objSchema));
    const optionObjOfOnly = (key, objSchema) => optionOf(key, objOfOnly(objSchema));
    const defaulted = (key, fallback) => field$1(key, key, defaulted$1(fallback), anyValue());
    const defaultedOf = (key, fallback, schema) => field$1(key, key, defaulted$1(fallback), schema);
    const defaultedNumber = (key, fallback) => defaultedOf(key, fallback, number);
    const defaultedString = (key, fallback) => defaultedOf(key, fallback, string);
    const defaultedStringEnum = (key, fallback, values) => defaultedOf(key, fallback, validateEnum(values));
    const defaultedBoolean = (key, fallback) => defaultedOf(key, fallback, boolean);
    const defaultedFunction = (key, fallback) => defaultedOf(key, fallback, functionProcessor);
    const defaultedPostMsg = (key, fallback) => defaultedOf(key, fallback, postMessageable);
    const defaultedArrayOf = (key, fallback, schema) => defaultedOf(key, fallback, arrOf(schema));
    const defaultedObjOf = (key, fallback, objSchema) => defaultedOf(key, fallback, objOf(objSchema));

const exclude = (obj, fields) => exclude$1(obj, fields);
    const wrap = (key, value) => wrap$1(key, value);
    const wrapAll = (keyvalues) => wrapAll$1(keyvalues);
    const mergeValues = (values, base) => {
        return values.length === 0 ? Result.value(base) : Result.value(deepMerge(base, merge$1.apply(undefined, values))
        // Merger.deepMerge.apply(undefined, [ base ].concat(values))
        );
    };
    const mergeErrors = (errors) => Result.error(flatten(errors));
    const consolidate = (objs, base) => {
        const partitions = partition$2(objs);
        return partitions.errors.length > 0 ? mergeErrors(partitions.errors) : mergeValues(partitions.values, base);
    };

const constant = constant$1;
    const touchstart = constant('touchstart');
    const touchmove = constant('touchmove');
    const touchend = constant('touchend');
    const touchcancel = constant('touchcancel');
    const mousedown = constant('mousedown');
    const mousemove = constant('mousemove');
    const mouseout = constant('mouseout');
    const mouseup = constant('mouseup');
    const mouseover = constant('mouseover');
    // Not really a native event as it has to be simulated
    const focusin = constant('focusin');
    const focusout = constant('focusout');
    const keydown = constant('keydown');
    const keyup = constant('keyup');
    const input = constant('input');
    const change = constant('change');
    const click = constant('click');
    const transitioncancel = constant('transitioncancel');
    const transitionend = constant('transitionend');
    const transitionstart = constant('transitionstart');
    const selectstart = constant('selectstart');

const prefixName = (name) => constant$1('alloy.' + name);
    const alloy = { tap: prefixName('tap') };
    // This is used to pass focus to a component. A component might interpret
    // this event and pass the DOM focus to one of its children, depending on its
    // focus model.
    const focus$3 = prefixName('focus');
    // This event is fired a small amount of time after the blur has fired. This
    // allows the handler to know what was the focused element, and what is now.
    const postBlur = prefixName('blur.post');
    // This event is fired a small amount of time after the paste event has fired.
    const postPaste = prefixName('paste.post');
    // This event is fired by gui.broadcast*. It is defined by 'receivers'
    const receive = prefixName('receive');
    // This event is for executing buttons and things that have (mostly) enter actions
    const execute$5 = prefixName('execute');
    // This event is used by a menu to tell an item to focus itself because it has been
    // selected. This might automatically focus inside the item, it might focus the outer
    // part of the widget etc.
    const focusItem = prefixName('focus.item');
    // This event represents a touchstart and touchend on the same location, and fires on
    // the touchend
    const tap = alloy.tap;
    // This event represents a longpress on the same location
    const longpress = prefixName('longpress');
    // Fire by a child element to tell the outer element to close
    const sandboxClose = prefixName('sandbox.close');
    // Tell the typeahead to cancel any pending fetches (that haven't already executed)
    const typeaheadCancel = prefixName('typeahead.cancel');
    // Fired when adding to a world
    const systemInit = prefixName('system.init');
    // Fired when a touchmove on the document happens
    const documentTouchmove = prefixName('system.touchmove');
    // Fired when a touchend on the document happens
    const documentTouchend = prefixName('system.touchend');
    // Fired when the window scrolls
    const windowScroll = prefixName('system.scroll');
    // Fired when the window resizes
    const windowResize = prefixName('system.resize');
    const attachedToDom = prefixName('system.attached');
    const detachedFromDom = prefixName('system.detached');
    const dismissRequested = prefixName('system.dismissRequested');
    const repositionRequested = prefixName('system.repositionRequested');
    const focusShifted = prefixName('focusmanager.shifted');
    // Fired when slots are made hidden/shown
    const slotVisibility = prefixName('slotcontainer.visibility');
    // Used for containers outside the mothership that scroll. Used by docking.
    const externalElementScroll = prefixName('system.external.element.scroll');
    const changeTab = prefixName('change.tab');
    const dismissTab = prefixName('dismiss.tab');
    const highlight$1 = prefixName('highlight');
    const dehighlight$1 = prefixName('dehighlight');

const element = (elem) => getHtml(elem);

const menuFields = constant$1([
        required$1('menu'),
        required$1('selectedMenu')
    ]);
    const itemFields = constant$1([
        required$1('item'),
        required$1('selectedItem')
    ]);
    constant$1(objOf(itemFields().concat(menuFields())));
    const itemSchema$3 = constant$1(objOf(itemFields()));

const _initSize = requiredObjOf('initSize', [
        required$1('numColumns'),
        required$1('numRows')
    ]);
    const itemMarkers = () => requiredOf('markers', itemSchema$3());
    const tieredMenuMarkers = () => requiredObjOf('markers', [
        required$1('backgroundMenu')
    ].concat(menuFields()).concat(itemFields()));
    const markers$1 = (required) => requiredObjOf('markers', map$2(required, required$1));
    const onPresenceHandler = (label, fieldName, presence) => {
        // We care about where the handler was declared (in terms of which schema)
        getTrace();
        return field$1(fieldName, fieldName, presence, 
        // Apply some wrapping to their supplied function
        valueOf((f) => Result.value((...args) => {
            return f.apply(undefined, args);
        })));
    };
    const onHandler = (fieldName) => onPresenceHandler('onHandler', fieldName, defaulted$1(noop));
    const onKeyboardHandler = (fieldName) => onPresenceHandler('onKeyboardHandler', fieldName, defaulted$1(Optional.none));
    const onStrictHandler = (fieldName) => onPresenceHandler('onHandler', fieldName, required$2());
    const onStrictKeyboardHandler = (fieldName) => onPresenceHandler('onKeyboardHandler', fieldName, required$2());
    const output$1 = (name, value) => customField(name, constant$1(value));
    const snapshot = (name) => customField(name, identity);
    const initSize = constant$1(_initSize);

var FocusInsideModes;
    (function (FocusInsideModes) {
        FocusInsideModes["OnFocusMode"] = "onFocus";
        FocusInsideModes["OnEnterOrSpaceMode"] = "onEnterOrSpace";
        FocusInsideModes["OnApiMode"] = "onApi";
    })(FocusInsideModes || (FocusInsideModes = {}));

var PartType = /*#__PURE__*/Object.freeze({
        __proto__: null,
        required: required,
        external: external$1,
        optional: optional,
        group: group,
        asNamedPart: asNamedPart,
        name: name$2,
        asCommon: asCommon,
        original: original
    });

// TODO: Make more functional if performance isn't an issue.
    const generate$5 = (owner, parts) => {
        const r = {};
        each$1(parts, (part) => {
            asNamedPart(part).each((np) => {
                const g = doGenerateOne(owner, np.pname);
                r[np.name] = (config) => {
                    const validated = asRawOrDie$1('Part: ' + np.name + ' in ' + owner, objOf(np.schema), config);
                    return {
                        ...g,
                        config,
                        validated
                    };
                };
            });
        });
        return r;
    };
    // Does not have the config.
    const doGenerateOne = (owner, pname) => ({
        uiType: placeholder(),
        owner,
        name: pname
    });
    const generateOne$1 = (owner, pname, config) => ({
        uiType: placeholder(),
        owner,
        name: pname,
        config,
        validated: {}
    });
    const schemas = (parts) => 
    // This actually has to change. It needs to return the schemas for things that will
    // not appear in the components list, which is only externals
    bind$3(parts, (part) => part.fold(Optional.none, Optional.some, Optional.none, Optional.none).map((data) => requiredObjOf(data.name, data.schema.concat([
        snapshot(original())
    ]))).toArray());
    const names = (parts) => map$2(parts, name$2);
    const substitutes = (owner, detail, parts) => subs(owner, detail, parts);
    const components$1 = (owner, detail, internals) => substitutePlaces(Optional.some(owner), detail, detail.components, internals);
    const getPart = (component, detail, partKey) => {
        const uid = detail.partUids[partKey];
        return component.getSystem().getByUid(uid).toOptional();
    };
    const getPartOrDie = (component, detail, partKey) => getPart(component, detail, partKey).getOrDie('Could not find part: ' + partKey);
    const getParts = (component, detail, partKeys) => {
        const r = {};
        const uids = detail.partUids;
        const system = component.getSystem();
        each$1(partKeys, (pk) => {
            r[pk] = constant$1(system.getByUid(uids[pk]));
        });
        return r;
    };
    const getAllParts = (component, detail) => {
        const system = component.getSystem();
        return map$1(detail.partUids, (pUid, _k) => constant$1(system.getByUid(pUid)));
    };
    const getAllPartNames = (detail) => keys(detail.partUids);
    const getPartsOrDie = (component, detail, partKeys) => {
        const r = {};
        const uids = detail.partUids;
        const system = component.getSystem();
        each$1(partKeys, (pk) => {
            r[pk] = constant$1(system.getByUid(uids[pk]).getOrDie());
        });
        return r;
    };
    const defaultUids = (baseUid, partTypes) => {
        const partNames = names(partTypes);
        return wrapAll(map$2(partNames, (pn) => ({ key: pn, value: baseUid + '-' + pn })));
    };
    const defaultUidsSchema = (partTypes) => field$1('partUids', 'partUids', mergeWithThunk((spec) => defaultUids(spec.uid, partTypes)), anyValue());

var AlloyParts = /*#__PURE__*/Object.freeze({
        __proto__: null,
        generate: generate$5,
        generateOne: generateOne$1,
        schemas: schemas,
        names: names,
        substitutes: substitutes,
        components: components$1,
        defaultUids: defaultUids,
        defaultUidsSchema: defaultUidsSchema,
        getAllParts: getAllParts,
        getAllPartNames: getAllPartNames,
        getPart: getPart,
        getPartOrDie: getPartOrDie,
        getParts: getParts,
        getPartsOrDie: getPartsOrDie
    });

const nu$5 = (x, y, bubble, direction, placement, boundsRestriction, labelPrefix, alwaysFit = false) => ({
        x,
        y,
        bubble,
        direction,
        placement,
        restriction: boundsRestriction,
        label: `${labelPrefix}-${placement}`,
        alwaysFit
    });

/*
      Layout for menus and inline context dialogs;
      Either above or below. Never left or right.
      Aligned to the left or right of the anchor as appropriate.
     */
    const labelPrefix$2 = 'layout';
    // display element to the right, left edge against the anchor
    const eastX$1 = (anchor) => anchor.x;
    // element centre aligned horizontally with the anchor
    const middleX$1 = (anchor, element) => anchor.x + (anchor.width / 2) - (element.width / 2);
    // display element to the left, right edge against the right of the anchor
    const westX$1 = (anchor, element) => anchor.x + anchor.width - element.width;
    // display element above, bottom edge against the top of the anchor
    const northY$2 = (anchor, element) => anchor.y - element.height;
    // display element below, top edge against the bottom of the anchor
    const southY$2 = (anchor) => anchor.y + anchor.height;
    // display element below, top edge against the bottom of the anchor
    const centreY$1 = (anchor, element) => anchor.y + (anchor.height / 2) - (element.height / 2);
    const eastEdgeX$1 = (anchor) => anchor.x + anchor.width;
    const westEdgeX$1 = (anchor, element) => anchor.x - element.width;
    const southeast$2 = (anchor, element, bubbles) => nu$5(eastX$1(anchor), southY$2(anchor), bubbles.southeast(), southeast$3(), "southeast" /* Placement.Southeast */, boundsRestriction(anchor, { left: 1 /* AnchorBoxBounds.LeftEdge */, top: 3 /* AnchorBoxBounds.BottomEdge */ }), labelPrefix$2);
    const southwest$2 = (anchor, element, bubbles) => nu$5(westX$1(anchor, element), southY$2(anchor), bubbles.southwest(), southwest$3(), "southwest" /* Placement.Southwest */, boundsRestriction(anchor, { right: 0 /* AnchorBoxBounds.RightEdge */, top: 3 /* AnchorBoxBounds.BottomEdge */ }), labelPrefix$2);
    const northeast$2 = (anchor, element, bubbles) => nu$5(eastX$1(anchor), northY$2(anchor, element), bubbles.northeast(), northeast$3(), "northeast" /* Placement.Northeast */, boundsRestriction(anchor, { left: 1 /* AnchorBoxBounds.LeftEdge */, bottom: 2 /* AnchorBoxBounds.TopEdge */ }), labelPrefix$2);
    const northwest$2 = (anchor, element, bubbles) => nu$5(westX$1(anchor, element), northY$2(anchor, element), bubbles.northwest(), northwest$3(), "northwest" /* Placement.Northwest */, boundsRestriction(anchor, { right: 0 /* AnchorBoxBounds.RightEdge */, bottom: 2 /* AnchorBoxBounds.TopEdge */ }), labelPrefix$2);
    const north$2 = (anchor, element, bubbles) => nu$5(middleX$1(anchor, element), northY$2(anchor, element), bubbles.north(), north$3(), "north" /* Placement.North */, boundsRestriction(anchor, { bottom: 2 /* AnchorBoxBounds.TopEdge */ }), labelPrefix$2);
    const south$2 = (anchor, element, bubbles) => nu$5(middleX$1(anchor, element), southY$2(anchor), bubbles.south(), south$3(), "south" /* Placement.South */, boundsRestriction(anchor, { top: 3 /* AnchorBoxBounds.BottomEdge */ }), labelPrefix$2);
    const east$2 = (anchor, element, bubbles) => nu$5(eastEdgeX$1(anchor), centreY$1(anchor, element), bubbles.east(), east$3(), "east" /* Placement.East */, boundsRestriction(anchor, { left: 0 /* AnchorBoxBounds.RightEdge */ }), labelPrefix$2);
    const west$2 = (anchor, element, bubbles) => nu$5(westEdgeX$1(anchor, element), centreY$1(anchor, element), bubbles.west(), west$3(), "west" /* Placement.West */, boundsRestriction(anchor, { right: 1 /* AnchorBoxBounds.LeftEdge */ }), labelPrefix$2);
    const all$2 = () => [southeast$2, southwest$2, northeast$2, northwest$2, south$2, north$2, east$2, west$2];
    const allRtl$1 = () => [southwest$2, southeast$2, northwest$2, northeast$2, south$2, north$2, east$2, west$2];
    const aboveOrBelow = () => [northeast$2, northwest$2, southeast$2, southwest$2, north$2, south$2];
    const aboveOrBelowRtl = () => [northwest$2, northeast$2, southwest$2, southeast$2, north$2, south$2];
    const belowOrAbove = () => [southeast$2, southwest$2, northeast$2, northwest$2, south$2, north$2];
    const belowOrAboveRtl = () => [southwest$2, southeast$2, northwest$2, northeast$2, south$2, north$2];

const placementAttribute = 'data-alloy-placement';
    const setPlacement$1 = (element, placement) => {
        set$9(element, placementAttribute, placement);
    };
    const getPlacement = (element) => getOpt(element, placementAttribute);
    const reset$2 = (element) => remove$8(element, placementAttribute);

/*
      Layouts for things that overlay over the anchor element/box. These are designed to mirror
      the `Layout` logic.

As an example `Layout.north` will appear horizontally centered above the anchor, whereas
      `LayoutInset.north` will appear horizontally centered overlapping the top of the anchor.
     */
    const labelPrefix$1 = 'layout-inset';
    // returns left edge of anchor - used to display element to the left, left edge against the anchor
    const westEdgeX = (anchor) => anchor.x;
    // returns middle of anchor minus half the element width - used to horizontally centre element to the anchor
    const middleX = (anchor, element) => anchor.x + (anchor.width / 2) - (element.width / 2);
    // returns right edge of anchor minus element width - used to display element to the right, right edge against the anchor
    const eastEdgeX = (anchor, element) => anchor.x + anchor.width - element.width;
    // returns top edge - used to display element to the top, top edge against the anchor
    const northY$1 = (anchor) => anchor.y;
    // returns bottom edge minus element height - used to display element at the bottom, bottom edge against the anchor
    const southY$1 = (anchor, element) => anchor.y + anchor.height - element.height;
    // returns centre of anchor minus half the element height - used to vertically centre element to the anchor
    const centreY = (anchor, element) => anchor.y + (anchor.height / 2) - (element.height / 2);
    // positions element relative to the bottom right of the anchor
    const southwest$1 = (anchor, element, bubbles) => nu$5(eastEdgeX(anchor, element), southY$1(anchor, element), bubbles.insetSouthwest(), northwest$3(), "southwest" /* Placement.Southwest */, boundsRestriction(anchor, { right: 0 /* AnchorBoxBounds.RightEdge */, bottom: 3 /* AnchorBoxBounds.BottomEdge */ }), labelPrefix$1);
    // positions element relative to the bottom left of the anchor
    const southeast$1 = (anchor, element, bubbles) => nu$5(westEdgeX(anchor), southY$1(anchor, element), bubbles.insetSoutheast(), northeast$3(), "southeast" /* Placement.Southeast */, boundsRestriction(anchor, { left: 1 /* AnchorBoxBounds.LeftEdge */, bottom: 3 /* AnchorBoxBounds.BottomEdge */ }), labelPrefix$1);
    // positions element relative to the top right of the anchor
    const northwest$1 = (anchor, element, bubbles) => nu$5(eastEdgeX(anchor, element), northY$1(anchor), bubbles.insetNorthwest(), southwest$3(), "northwest" /* Placement.Northwest */, boundsRestriction(anchor, { right: 0 /* AnchorBoxBounds.RightEdge */, top: 2 /* AnchorBoxBounds.TopEdge */ }), labelPrefix$1);
    // positions element relative to the top left of the anchor
    const northeast$1 = (anchor, element, bubbles) => nu$5(westEdgeX(anchor), northY$1(anchor), bubbles.insetNortheast(), southeast$3(), "northeast" /* Placement.Northeast */, boundsRestriction(anchor, { left: 1 /* AnchorBoxBounds.LeftEdge */, top: 2 /* AnchorBoxBounds.TopEdge */ }), labelPrefix$1);
    // positions element relative to the top of the anchor, horizontally centered
    const north$1 = (anchor, element, bubbles) => nu$5(middleX(anchor, element), northY$1(anchor), bubbles.insetNorth(), south$3(), "north" /* Placement.North */, boundsRestriction(anchor, { top: 2 /* AnchorBoxBounds.TopEdge */ }), labelPrefix$1);
    // positions element relative to the bottom of the anchor, horizontally centered
    const south$1 = (anchor, element, bubbles) => nu$5(middleX(anchor, element), southY$1(anchor, element), bubbles.insetSouth(), north$3(), "south" /* Placement.South */, boundsRestriction(anchor, { bottom: 3 /* AnchorBoxBounds.BottomEdge */ }), labelPrefix$1);
    // positions element with the right edge against the anchor, vertically centered
    const east$1 = (anchor, element, bubbles) => nu$5(eastEdgeX(anchor, element), centreY(anchor, element), bubbles.insetEast(), west$3(), "east" /* Placement.East */, boundsRestriction(anchor, { right: 0 /* AnchorBoxBounds.RightEdge */ }), labelPrefix$1);
    // positions element with the left each against the anchor, vertically centered
    const west$1 = (anchor, element, bubbles) => nu$5(westEdgeX(anchor), centreY(anchor, element), bubbles.insetWest(), east$3(), "west" /* Placement.West */, boundsRestriction(anchor, { left: 1 /* AnchorBoxBounds.LeftEdge */ }), labelPrefix$1);
    const lookupPreserveLayout = (lastPlacement) => {
        switch (lastPlacement) {
            case "north" /* Placement.North */:
                return north$1;
            case "northeast" /* Placement.Northeast */:
                return northeast$1;
            case "northwest" /* Placement.Northwest */:
                return northwest$1;
            case "south" /* Placement.South */:
                return south$1;
            case "southeast" /* Placement.Southeast */:
                return southeast$1;
            case "southwest" /* Placement.Southwest */:
                return southwest$1;
            case "east" /* Placement.East */:
                return east$1;
            case "west" /* Placement.West */:
                return west$1;
        }
    };
    const preserve$1 = (anchor, element, bubbles, placee, bounds) => {
        const layout = getPlacement(placee).map(lookupPreserveLayout).getOr(north$1);
        return layout(anchor, element, bubbles, placee, bounds);
    };
    const lookupFlippedLayout = (lastPlacement) => {
        switch (lastPlacement) {
            case "north" /* Placement.North */:
                return south$1;
            case "northeast" /* Placement.Northeast */:
                return southeast$1;
            case "northwest" /* Placement.Northwest */:
                return southwest$1;
            case "south" /* Placement.South */:
                return north$1;
            case "southeast" /* Placement.Southeast */:
                return northeast$1;
            case "southwest" /* Placement.Southwest */:
                return northwest$1;
            case "east" /* Placement.East */:
                return west$1;
            case "west" /* Placement.West */:
                return east$1;
        }
    };
    const flip = (anchor, element, bubbles, placee, bounds) => {
        const layout = getPlacement(placee).map(lookupFlippedLayout).getOr(north$1);
        return layout(anchor, element, bubbles, placee, bounds);
    };

// applies the max-height as determined by Bounder
    const setMaxHeight = (element, maxHeight) => {
        setMax$1(element, Math.floor(maxHeight));
    };
    // adds both max-height and overflow to constrain it
    const anchored = constant$1((element, available) => {
        setMaxHeight(element, available);
        setAll(element, {
            'overflow-x': 'hidden',
            'overflow-y': 'auto'
        });
    });
    /*
     * This adds max height, but not overflow - the effect of this is that elements can grow beyond the max height,
     * but if they run off the top they're pushed down.
     *
     * If the element expands below the screen height it will be cut off, but we were already doing that.
     */
    const expandable$1 = constant$1((element, available) => {
        setMaxHeight(element, available);
    });

// applies the max-width as determined by Bounder
    const expandable = constant$1((element, available) => {
        setMax(element, Math.floor(available));
    });

var AttributeValue;
    (function (AttributeValue) {
        AttributeValue["TopToBottom"] = "toptobottom";
        AttributeValue["BottomToTop"] = "bottomtotop";
    })(AttributeValue || (AttributeValue = {}));
    const Attribute = 'data-alloy-vertical-dir';
    const isBottomToTopDir = (el) => closest$2(el, (current) => isElement$1(current) && get$g(current, 'data-alloy-vertical-dir') === AttributeValue.BottomToTop);

var HighlightOnOpen;
    (function (HighlightOnOpen) {
        HighlightOnOpen[HighlightOnOpen["HighlightMenuAndItem"] = 0] = "HighlightMenuAndItem";
        HighlightOnOpen[HighlightOnOpen["HighlightJustMenu"] = 1] = "HighlightJustMenu";
        HighlightOnOpen[HighlightOnOpen["HighlightNone"] = 2] = "HighlightNone";
    })(HighlightOnOpen || (HighlightOnOpen = {}));

const NoState = {
        init: () => nu$4({
            readState: constant$1('No State required')
        })
    };
    const nu$4 = (spec) => spec;

// Maybe we'll need to allow add/remove
    const nu$2 = (s) => ({
        classes: isUndefined(s.classes) ? [] : s.classes,
        attributes: isUndefined(s.attributes) ? {} : s.attributes,
        styles: isUndefined(s.styles) ? {} : s.styles
    });
    const merge = (defnA, mod) => ({
        ...defnA,
        attributes: { ...defnA.attributes, ...mod.attributes },
        styles: { ...defnA.styles, ...mod.styles },
        classes: defnA.classes.concat(mod.classes)
    });

// AlloyEventKeyAndHandler type argument needs to be any here to satisfy an array of handlers
    // where each item can be any subtype of EventFormat we can't use <T extends EventFormat> since
    // then each item would have to be the same type
    const events$i = (name, eventHandlers) => {
        const events = derive$2(eventHandlers);
        return create$3({
            fields: [
                required$1('enabled')
            ],
            name,
            active: {
                events: constant$1(events)
            }
        });
    };
    const config = (name, eventHandlers) => {
        const me = events$i(name, eventHandlers);
        return {
            key: name,
            value: {
                config: {},
                me,
                configAsRaw: constant$1({}),
                initialConfig: {},
                state: NoState
            }
        };
    };

var FocusApis = /*#__PURE__*/Object.freeze({
        __proto__: null,
        focus: focus$2,
        blur: blur,
        isFocused: isFocused
    });

// TODO: DomModification types
    const exhibit$6 = (base, focusConfig) => {
        const mod = focusConfig.ignore ? {} : {
            attributes: {
                tabindex: '-1'
            }
        };
        return nu$2(mod);
    };
    const events$h = (focusConfig) => derive$2([
        run$1(focus$3(), (component, simulatedEvent) => {
            focus$2(component, focusConfig);
            simulatedEvent.stop();
        })
    ].concat(focusConfig.stopMousedown ? [
        run$1(mousedown(), (_, simulatedEvent) => {
            // This setting is often used in tandem with ignoreFocus. Basically, if you
            // don't prevent default on a menu that has fake focus, then it can transfer
            // focus to the outer body when they click on it, which can break things
            // which dismiss on blur (e.g. typeahead)
            simulatedEvent.event.prevent();
        })
    ] : []));

var ActiveFocus = /*#__PURE__*/Object.freeze({
        __proto__: null,
        exhibit: exhibit$6,
        events: events$h
    });

var FocusSchema = [
        // TODO: Work out when we want to  call this. Only when it is has changed?
        onHandler('onFocus'),
        defaulted('stopMousedown', false),
        defaulted('ignore', false)
    ];

const Focusing = create$3({
        fields: FocusSchema,
        name: 'focusing',
        active: ActiveFocus,
        apis: FocusApis
        // Consider adding isFocused an an extra
    });

const BACKSPACE = [8];
    const TAB = [9];
    const ENTER = [13];
    const ESCAPE = [27];
    const SPACE = [32];
    const LEFT = [37];
    const UP = [38];
    const RIGHT = [39];
    const DOWN = [40];

const closeTooltips = constant$1('tooltipping.close.all');
    const dismissPopups = constant$1('dismiss.popups');
    const repositionPopups = constant$1('reposition.popups');
    const mouseReleased = constant$1('mouse.released');

const rule = (matches, action) => ({
        matches,
        classification: action
    });
    const choose = (transitions, event) => {
        const transition = find$5(transitions, (t) => t.matches(event));
        return transition.map((t) => t.classification);
    };

// THIS IS NOT API YET
    const dehighlightAllExcept = (component, hConfig, hState, skip) => {
        const highlighted = descendants(component.element, '.' + hConfig.highlightClass);
        each$1(highlighted, (h) => {
            // We don't want to dehighlight anything that should be skipped.
            // Generally, this is because we are about to highlight that thing.
            const shouldSkip = exists(skip, (skipComp) => eq(skipComp.element, h));
            if (!shouldSkip) {
                remove$3(h, hConfig.highlightClass);
                component.getSystem().getByDom(h).each((target) => {
                    hConfig.onDehighlight(component, target);
                    emit(target, dehighlight$1());
                });
            }
        });
    };
    const dehighlightAll = (component, hConfig, hState) => dehighlightAllExcept(component, hConfig, hState, []);
    const dehighlight = (component, hConfig, hState, target) => {
        // Only act if it was highlighted.
        if (isHighlighted(component, hConfig, hState, target)) {
            remove$3(target.element, hConfig.highlightClass);
            hConfig.onDehighlight(component, target);
            emit(target, dehighlight$1());
        }
    };
    const highlight = (component, hConfig, hState, target) => {
        // If asked to highlight something, dehighlight everything else first except
        // for the new thing we are going to highlight. It's a rare case, but we don't
        // want to get an onDehighlight, onHighlight for the same item on a highlight call.
        // We also don't want to call onHighlight if it was already highlighted.
        //
        // Note, that there is an important distinction here: highlight is NOT a no-op
        // if target is already highlighted, because it will still dehighlight everything else.
        // However, it won't fire any onHighlight or onDehighlight handlers for the already
        // highlighted item. I'm not sure if this is behaviour we need to maintain, but it is now
        // tested. A simpler approach might just be to not do anything if it's already highlighted,
        // but that could leave us in an inconsistent state, where multiple items have highlights
        // even after a highlight call. This way, highlight validates the highlights in the
        // component, and ensures there is only one thing highlighted.
        dehighlightAllExcept(component, hConfig, hState, [target]);
        if (!isHighlighted(component, hConfig, hState, target)) {
            add$2(target.element, hConfig.highlightClass);
            hConfig.onHighlight(component, target);
            emit(target, highlight$1());
        }
    };
    const highlightFirst = (component, hConfig, hState) => {
        getFirst(component, hConfig).each((firstComp) => {
            highlight(component, hConfig, hState, firstComp);
        });
    };
    const highlightLast = (component, hConfig, hState) => {
        getLast(component, hConfig).each((lastComp) => {
            highlight(component, hConfig, hState, lastComp);
        });
    };
    const highlightAt = (component, hConfig, hState, index) => {
        getByIndex(component, hConfig, hState, index).fold((err) => {
            throw err;
        }, (firstComp) => {
            highlight(component, hConfig, hState, firstComp);
        });
    };
    const highlightBy = (component, hConfig, hState, predicate) => {
        const candidates = getCandidates(component, hConfig);
        const targetComp = find$5(candidates, predicate);
        targetComp.each((c) => {
            highlight(component, hConfig, hState, c);
        });
    };
    const isHighlighted = (component, hConfig, hState, queryTarget) => has(queryTarget.element, hConfig.highlightClass);
    const getHighlighted = (component, hConfig, _hState) => descendant(component.element, '.' + hConfig.highlightClass).bind((e) => component.getSystem().getByDom(e).toOptional());
    const getByIndex = (component, hConfig, hState, index) => {
        const items = descendants(component.element, '.' + hConfig.itemClass);
        return Optional.from(items[index]).fold(() => Result.error(new Error('No element found with index ' + index)), component.getSystem().getByDom);
    };
    const getFirst = (component, hConfig, _hState) => descendant(component.element, '.' + hConfig.itemClass).bind((e) => component.getSystem().getByDom(e).toOptional());
    const getLast = (component, hConfig, _hState) => {
        const items = descendants(component.element, '.' + hConfig.itemClass);
        const last = items.length > 0 ? Optional.some(items[items.length - 1]) : Optional.none();
        return last.bind((c) => component.getSystem().getByDom(c).toOptional());
    };
    const getDelta$2 = (component, hConfig, hState, delta) => {
        const items = descendants(component.element, '.' + hConfig.itemClass);
        const current = findIndex$1(items, (item) => has(item, hConfig.highlightClass));
        return current.bind((selected) => {
            const dest = cycleBy(selected, delta, 0, items.length - 1);
            return component.getSystem().getByDom(items[dest]).toOptional();
        });
    };
    const getPrevious = (component, hConfig, hState) => getDelta$2(component, hConfig, hState, -1);
    const getNext = (component, hConfig, hState) => getDelta$2(component, hConfig, hState, +1);
    const getCandidates = (component, hConfig, _hState) => {
        const items = descendants(component.element, '.' + hConfig.itemClass);
        return cat(map$2(items, (i) => component.getSystem().getByDom(i).toOptional()));
    };

var HighlightApis = /*#__PURE__*/Object.freeze({
        __proto__: null,
        dehighlightAll: dehighlightAll,
        dehighlight: dehighlight,
        highlight: highlight,
        highlightFirst: highlightFirst,
        highlightLast: highlightLast,
        highlightAt: highlightAt,
        highlightBy: highlightBy,
        isHighlighted: isHighlighted,
        getHighlighted: getHighlighted,
        getFirst: getFirst,
        getLast: getLast,
        getPrevious: getPrevious,
        getNext: getNext,
        getCandidates: getCandidates
    });

var HighlightSchema = [
        required$1('highlightClass'),
        required$1('itemClass'),
        onHandler('onHighlight'),
        onHandler('onDehighlight')
    ];

const Highlighting = create$3({
        fields: HighlightSchema,
        name: 'highlighting',
        apis: HighlightApis
    });

var AcyclicType = create$2(customField('cyclic', never));

var CyclicType = create$2(customField('cyclic', always));

const inside = (target) => ((isTag('input')(target) && get$g(target, 'type') !== 'radio') ||
        isTag('textarea')(target));

const doDefaultExecute = (component, _simulatedEvent, focused) => {
        // Note, we use to pass through simulatedEvent here and make target: component. This simplification
        // may be a problem
        dispatch(component, focused, execute$5());
        return Optional.some(true);
    };
    const defaultExecute = (component, simulatedEvent, focused) => {
        const isComplex = inside(focused) && inSet(SPACE)(simulatedEvent.event);
        return isComplex ? Optional.none() : doDefaultExecute(component, simulatedEvent, focused);
    };
    // On Firefox, pressing space fires a click event if the element maintains focus and fires a keyup. This
    // stops the keyup, which should stop the click. We might want to make this only work for buttons and Firefox etc,
    // but at this stage it's cleaner to just always do it. It makes sense that Keying that handles space should handle
    // keyup also. This does make the name confusing, though.
    const stopEventForFirefox = (_component, _simulatedEvent) => Optional.some(true);

const schema$y = [
        defaulted('execute', defaultExecute),
        defaulted('useSpace', false),
        defaulted('useEnter', true),
        defaulted('useControlEnter', false),
        defaulted('useDown', false)
    ];
    const execute$4 = (component, simulatedEvent, executeConfig) => executeConfig.execute(component, simulatedEvent, component.element);
    const getKeydownRules$5 = (component, _simulatedEvent, executeConfig, _executeState) => {
        const spaceExec = executeConfig.useSpace && !inside(component.element) ? SPACE : [];
        const enterExec = executeConfig.useEnter ? ENTER : [];
        const downExec = executeConfig.useDown ? DOWN : [];
        const execKeys = spaceExec.concat(enterExec).concat(downExec);
        return [
            rule(inSet(execKeys), execute$4)
        ].concat(executeConfig.useControlEnter ? [
            rule(and([isControl, inSet(ENTER)]), execute$4)
        ] : []);
    };
    const getKeyupRules$5 = (component, _simulatedEvent, executeConfig, _executeState) => executeConfig.useSpace && !inside(component.element) ?
        [rule(inSet(SPACE), stopEventForFirefox)] :
        [];
    var ExecutionType = typical(schema$y, NoState.init, getKeydownRules$5, getKeyupRules$5, () => Optional.none());

var KeyingState = /*#__PURE__*/Object.freeze({
        __proto__: null,
        flatgrid: flatgrid$1,
        init: init$g
    });

// Looks up direction (considering LTR and RTL), finds the focused element,
    // and tries to move. If it succeeds, triggers focus and kills the event.
    const useH = (movement) => (component, simulatedEvent, config, state) => {
        const move = movement(component.element);
        return use(move, component, simulatedEvent, config, state);
    };
    const west = (moveLeft, moveRight) => {
        const movement = onDirection(moveLeft, moveRight);
        return useH(movement);
    };
    const east = (moveLeft, moveRight) => {
        const movement = onDirection(moveRight, moveLeft);
        return useH(movement);
    };
    const useV = (move) => (component, simulatedEvent, config, state) => use(move, component, simulatedEvent, config, state);
    const use = (move, component, simulatedEvent, config, state) => {
        const outcome = config.focusManager.get(component).bind((focused) => move(component.element, focused, config, state));
        return outcome.map((newFocus) => {
            config.focusManager.set(component, newFocus);
            return true;
        });
    };
    const north = useV;
    const south = useV;
    const move$1 = useV;

const locate = (candidates, predicate) => findIndex$1(candidates, predicate).map((index) => ({
        index,
        candidates
    }));

const locateVisible = (container, current, selector) => {
        const predicate = (x) => eq(x, current);
        const candidates = descendants(container, selector);
        const visible = filter$2(candidates, isVisible);
        return locate(visible, predicate);
    };
    const findIndex = (elements, target) => findIndex$1(elements, (elem) => eq(target, elem));

const schema$x = [
        required$1('selector'),
        defaulted('execute', defaultExecute),
        onKeyboardHandler('onEscape'),
        defaulted('captureTab', false),
        initSize()
    ];
    const focusIn$4 = (component, gridConfig, _gridState) => {
        descendant(component.element, gridConfig.selector).each((first) => {
            gridConfig.focusManager.set(component, first);
        });
    };
    const findCurrent$1 = (component, gridConfig) => gridConfig.focusManager.get(component).bind((elem) => closest$3(elem, gridConfig.selector));
    const execute$3 = (component, simulatedEvent, gridConfig, _gridState) => findCurrent$1(component, gridConfig)
        .bind((focused) => gridConfig.execute(component, simulatedEvent, focused));
    const doMove$2 = (cycle) => (element, focused, gridConfig, gridState) => locateVisible(element, focused, gridConfig.selector)
        .bind((identified) => cycle(identified.candidates, identified.index, gridState.getNumRows().getOr(gridConfig.initSize.numRows), gridState.getNumColumns().getOr(gridConfig.initSize.numColumns)));
    const handleTab = (_component, _simulatedEvent, gridConfig) => gridConfig.captureTab ? Optional.some(true) : Optional.none();
    const doEscape$1 = (component, simulatedEvent, gridConfig) => gridConfig.onEscape(component, simulatedEvent);
    const moveLeft$3 = doMove$2(cycleLeft$1);
    const moveRight$3 = doMove$2(cycleRight$1);
    const moveNorth$1 = doMove$2(cycleUp$1);
    const moveSouth$1 = doMove$2(cycleDown$1);
    const getKeydownRules$4 = constant$1([
        rule(inSet(LEFT), west(moveLeft$3, moveRight$3)),
        rule(inSet(RIGHT), east(moveLeft$3, moveRight$3)),
        rule(inSet(UP), north(moveNorth$1)),
        rule(inSet(DOWN), south(moveSouth$1)),
        rule(and([isShift$1, inSet(TAB)]), handleTab),
        rule(and([isNotShift, inSet(TAB)]), handleTab),
        // Probably should make whether space is used configurable
        rule(inSet(SPACE.concat(ENTER)), execute$3)
    ]);
    const getKeyupRules$4 = constant$1([
        rule(inSet(ESCAPE), doEscape$1),
        rule(inSet(SPACE), stopEventForFirefox)
    ]);
    var FlatgridType = typical(schema$x, flatgrid$1, getKeydownRules$4, getKeyupRules$4, () => Optional.some(focusIn$4));

const schema$u = [
        required$1('selector'),
        defaulted('execute', defaultExecute),
        defaulted('moveOnTab', false)
    ];
    const execute = (component, simulatedEvent, menuConfig) => menuConfig.focusManager.get(component).bind((focused) => menuConfig.execute(component, simulatedEvent, focused));
    const focusIn$1 = (component, menuConfig, _state) => {
        // Maybe keep selection if it was there before
        descendant(component.element, menuConfig.selector).each((first) => {
            menuConfig.focusManager.set(component, first);
        });
    };
    const moveUp = (element, focused, info) => horizontal(element, info.selector, focused, -1);
    const moveDown = (element, focused, info) => horizontal(element, info.selector, focused, +1);
    const fireShiftTab = (component, simulatedEvent, menuConfig, menuState) => menuConfig.moveOnTab ? move$1(moveUp)(component, simulatedEvent, menuConfig, menuState) : Optional.none();
    const fireTab = (component, simulatedEvent, menuConfig, menuState) => menuConfig.moveOnTab ? move$1(moveDown)(component, simulatedEvent, menuConfig, menuState) : Optional.none();
    const getKeydownRules$1 = constant$1([
        rule(inSet(UP), move$1(moveUp)),
        rule(inSet(DOWN), move$1(moveDown)),
        rule(and([isShift$1, inSet(TAB)]), fireShiftTab),
        rule(and([isNotShift, inSet(TAB)]), fireTab),
        rule(inSet(ENTER), execute),
        rule(inSet(SPACE), execute)
    ]);
    const getKeyupRules$1 = constant$1([
        rule(inSet(SPACE), stopEventForFirefox)
    ]);
    var MenuType = typical(schema$u, NoState.init, getKeydownRules$1, getKeyupRules$1, () => Optional.some(focusIn$1));

const schema$t = [
        onKeyboardHandler('onSpace'),
        onKeyboardHandler('onEnter'),
        onKeyboardHandler('onShiftEnter'),
        onKeyboardHandler('onLeft'),
        onKeyboardHandler('onRight'),
        onKeyboardHandler('onTab'),
        onKeyboardHandler('onShiftTab'),
        onKeyboardHandler('onUp'),
        onKeyboardHandler('onDown'),
        onKeyboardHandler('onEscape'),
        defaulted('stopSpaceKeyup', false),
        option$3('focusIn')
    ];
    const getKeydownRules = (component, simulatedEvent, specialInfo) => [
        rule(inSet(SPACE), specialInfo.onSpace),
        rule(and([isNotShift, inSet(ENTER)]), specialInfo.onEnter),
        rule(and([isShift$1, inSet(ENTER)]), specialInfo.onShiftEnter),
        rule(and([isShift$1, inSet(TAB)]), specialInfo.onShiftTab),
        rule(and([isNotShift, inSet(TAB)]), specialInfo.onTab),
        rule(inSet(UP), specialInfo.onUp),
        rule(inSet(DOWN), specialInfo.onDown),
        rule(inSet(LEFT), specialInfo.onLeft),
        rule(inSet(RIGHT), specialInfo.onRight),
        rule(inSet(SPACE), specialInfo.onSpace)
    ];
    const getKeyupRules = (component, simulatedEvent, specialInfo) => [
        ...(specialInfo.stopSpaceKeyup ? [rule(inSet(SPACE), stopEventForFirefox)] : []),
        rule(inSet(ESCAPE), specialInfo.onEscape)
    ];
    var SpecialType = typical(schema$t, NoState.init, getKeydownRules, getKeyupRules, (specialInfo) => specialInfo.focusIn);

const acyclic = AcyclicType.schema();
    const cyclic = CyclicType.schema();
    const flow = FlowType.schema();
    const flatgrid = FlatgridType.schema();
    const matrix = MatrixType.schema();
    const execution = ExecutionType.schema();
    const menu = MenuType.schema();
    const special = SpecialType.schema();

var KeyboardBranches = /*#__PURE__*/Object.freeze({
        __proto__: null,
        acyclic: acyclic,
        cyclic: cyclic,
        flow: flow,
        flatgrid: flatgrid,
        matrix: matrix,
        execution: execution,
        menu: menu,
        special: special
    });

const premadeTag = generate$6('alloy-premade');
    const premade$1 = (comp) => {
        Object.defineProperty(comp.element.dom, premadeTag, {
            value: comp.uid,
            writable: true
        });
        return wrap(premadeTag, comp);
    };
    const isPremade = (element) => has$2(element.dom, premadeTag);
    const getPremade = (spec) => get$h(spec, premadeTag);
    const makeApi = (f) => markAsSketchApi((component, ...rest) => f(component.getApis(), component, ...rest), f);

var ReplaceApis = /*#__PURE__*/Object.freeze({
        __proto__: null,
        append: append,
        prepend: prepend,
        remove: remove,
        replaceAt: replaceAt,
        replaceBy: replaceBy,
        set: set$3,
        contents: contents
    });

const Replacing = create$3({
        fields: [
            defaultedBoolean('reuseDom', true)
        ],
        name: 'replacing',
        apis: ReplaceApis
    });

// The purpose of this check is to ensure that a simulated focus call is not going
    // to recurse infinitely. Essentially, if the originator of the focus call is the same
    // as the element receiving it, and it wasn't its own target, then stop the focus call
    // and log a warning.
    const isRecursive = (component, originator, target) => eq(originator, component.element) && !eq(originator, target);
    const events$g = derive$2([
        can(focus$3(), (component, simulatedEvent) => {
            // originator may not always be there. Will need to check this.
            const event = simulatedEvent.event;
            const originator = event.originator;
            const target = event.target;
            if (isRecursive(component, originator, target)) {
                // eslint-disable-next-line no-console
                console.warn(focus$3() + ' did not get interpreted by the desired target. ' +
                    '\nOriginator: ' + element(originator) +
                    '\nTarget: ' + element(target) +
                    '\nCheck the ' + focus$3() + ' event handlers');
                return false;
            }
            else {
                return true;
            }
        })
    ]);

var DefaultEvents = /*#__PURE__*/Object.freeze({
        __proto__: null,
        events: events$g
    });

const prefix$1 = constant$1('alloy-id-');
    const idAttr$1 = constant$1('data-alloy-id');

const make$7 = identity;

// Based on all the behaviour exhibits, and the original dom modification, identify
    // the overall combined dom modification that needs to occur
    const combine$1 = (info, baseMod, behaviours, base) => {
        // Clone the object so we can change it.
        const modsByBehaviour = { ...baseMod };
        each$1(behaviours, (behaviour) => {
            modsByBehaviour[behaviour.name()] = behaviour.exhibit(info, base);
        });
        // byAspect format: { classes: [ { name: Toggling, modification: [ 'selected' ] } ] }
        const byAspect = byInnerKey(modsByBehaviour, (name, modification) => ({ name, modification }));
        const combineObjects = (objects) => foldr(objects, (b, a) => ({ ...a.modification, ...b }), {});
        const combinedClasses = foldr(byAspect.classes, (b, a) => a.modification.concat(b), []);
        const combinedAttributes = combineObjects(byAspect.attributes);
        const combinedStyles = combineObjects(byAspect.styles);
        return nu$2({
            classes: combinedClasses,
            attributes: combinedAttributes,
            styles: combinedStyles
        });
    };

const uncurried = (handler, purpose) => ({
        handler,
        purpose
    });
    const curried = (handler, purpose) => ({
        cHandler: handler,
        purpose
    });
    const curryArgs = (descHandler, extraArgs) => curried(curry.apply(undefined, [descHandler.handler].concat(extraArgs)), descHandler.purpose);
    const getCurried = (descHandler) => descHandler.cHandler;

// This goes through the list of behaviours defined for a particular spec (removing anything
    // that has been revoked), and returns the BehaviourType (e.g. Sliding)
    const getBehaviours$2 = (spec) => {
        const behaviours = get$h(spec, 'behaviours').getOr({});
        return bind$3(keys(behaviours), (name) => {
            const behaviour = behaviours[name];
            return isNonNullable(behaviour) ? [behaviour.me] : [];
        });
    };
    const generateFrom = (spec, all) => generateFrom$1(spec, all);
    const generate$3 = (spec) => {
        const all = getBehaviours$2(spec);
        return generateFrom(spec, all);
    };

// This is probably far too complicated. I think DomModification is probably
    // questionable as a concept. Maybe it should be deprecated.
    const getDomDefinition = (info, bList, bData) => {
        // Get the current DOM definition from the spec
        const definition = toDefinition(info);
        // Get the current DOM modification definition from the spec
        const infoModification = toModification(info);
        // Treat the DOM modification like it came from a behaviour
        const baseModification = {
            'alloy.base.modification': infoModification
        };
        // Combine the modifications from any defined behaviours
        const modification = bList.length > 0 ? combine$1(bData, baseModification, bList, definition) : infoModification;
        // Transform the DOM definition with the combined dom modifications to make a new DOM definition
        return merge(definition, modification);
    };
    const getEvents = (info, bList, bData) => {
        const baseEvents = {
            'alloy.base.behaviour': toEvents(info)
        };
        return combine(bData, info.eventOrder, bList, baseEvents).getOrDie();
    };
    const build$2 = (spec, obsoleted) => {
        const getMe = () => me;
        const systemApi = Cell(singleton);
        const info = getOrDie(toInfo(spec));
        const bBlob = generate$3(spec);
        const bList = getBehaviours$3(bBlob);
        const bData = getData$2(bBlob);
        const modDefinition = getDomDefinition(info, bList, bData);
        const item = renderToDom(modDefinition, obsoleted);
        const events = getEvents(info, bList, bData);
        const subcomponents = Cell(info.components);
        const connect = (newApi) => {
            systemApi.set(newApi);
        };
        const disconnect = () => {
            systemApi.set(NoContextApi(getMe));
        };
        const syncComponents = () => {
            // Update the component list with the current children
            const children$1 = children(item);
            // INVESTIGATE: Not sure about how to handle text nodes here.
            const subs = bind$3(children$1, (child) => systemApi.get().getByDom(child).fold(() => [], pure$2));
            subcomponents.set(subs);
        };
        // TYPIFY (any here is for the info.apis() pathway)
        const config = (behaviour) => {
            const b = bData;
            const f = isFunction(b[behaviour.name()]) ? b[behaviour.name()] : () => {
                throw new Error('Could not find ' + behaviour.name() + ' in ' + JSON.stringify(spec, null, 2));
            };
            return f();
        };
        const hasConfigured = (behaviour) => isFunction(bData[behaviour.name()]);
        const getApis = () => info.apis;
        const readState = (behaviourName) => bData[behaviourName]().map((b) => b.state.readState()).getOr('not enabled');
        const me = {
            uid: spec.uid,
            getSystem: systemApi.get,
            config,
            hasConfigured,
            spec,
            readState,
            getApis,
            connect,
            disconnect,
            element: item,
            syncComponents,
            components: subcomponents.get,
            events
        };
        return me;
    };

// Mark this component as busy, or blocked.
    const block = (component, config, state, 
    // This works in conjunction with the 'getRoot' function in the config. To
    // attach a blocker component to the dom, ensure that 'getRoot' returns a
    // component, and this function returns the specification of the component to
    // attach.
    getBusySpec) => {
        set$9(component.element, 'aria-busy', true);
        const root = config.getRoot(component).getOr(component);
        const blockerBehaviours = derive$1([
            // Trap the "Tab" key and don't let it escape.
            Keying.config({
                mode: 'special',
                onTab: () => Optional.some(true),
                onShiftTab: () => Optional.some(true)
            }),
            Focusing.config({})
        ]);
        const blockSpec = getBusySpec(root, blockerBehaviours);
        const blocker = root.getSystem().build(blockSpec);
        Replacing.append(root, premade(blocker));
        if (blocker.hasConfigured(Keying) && config.focus) {
            Keying.focusIn(blocker);
        }
        if (!state.isBlocked()) {
            config.onBlock(component);
        }
        state.blockWith(() => Replacing.remove(root, blocker));
    };
    // Mark this component as unblocked, or not busy. This is a noop on a component
    // that isn't blocked.
    const unblock = (component, config, state) => {
        remove$8(component.element, 'aria-busy');
        if (state.isBlocked()) {
            config.onUnblock(component);
        }
        state.clear();
    };
    const isBlocked = (component, blockingConfig, blockingState) => blockingState.isBlocked();

var BlockingApis = /*#__PURE__*/Object.freeze({
        __proto__: null,
        block: block,
        unblock: unblock,
        isBlocked: isBlocked
    });

var BlockingSchema = [
        // The blocking behaviour places a blocking element over the DOM while the
        // component is in the blocked state. If a function is provided here that
        // returns Some, then the blocking element will be added as a child of the
        // element returned. Otherwise, it will be added as a child of the main
        // component.
        defaultedFunction('getRoot', Optional.none),
        // This boolean, if provided, will specify whether the blocking element is
        // focused when the component is first blocked
        defaultedBoolean('focus', true),
        // This function, if provided, will be called any time the component is
        // blocked (unless it was already blocked).
        onHandler('onBlock'),
        // This function, if provided, will be called any time the component is
        // unblocked (unless it was already unblocked).
        onHandler('onUnblock')
    ];

var BlockingState = /*#__PURE__*/Object.freeze({
        __proto__: null,
        init: init$f
    });

// Mark a component as able to be "Blocked" or able to enter a busy state. See
    // BlockingSchema and BlockingApis for more details on how to configure this.
    const Blocking = create$3({
        fields: BlockingSchema,
        name: 'blocking',
        apis: BlockingApis,
        state: BlockingState
    });

const getCurrent = (component, composeConfig, _composeState) => composeConfig.find(component);

var ComposeApis = /*#__PURE__*/Object.freeze({
        __proto__: null,
        getCurrent: getCurrent
    });

const ComposeSchema = [
        required$1('find')
    ];

const Composing = create$3({
        fields: ComposeSchema,
        name: 'composing',
        apis: ComposeApis
    });

const getCoupled = (component, coupleConfig, coupleState, name) => coupleState.getOrCreate(component, coupleConfig, name);
    const getExistingCoupled = (component, coupleConfig, coupleState, name) => coupleState.getExisting(component, coupleConfig, name);

var CouplingApis = /*#__PURE__*/Object.freeze({
        __proto__: null,
        getCoupled: getCoupled,
        getExistingCoupled: getExistingCoupled
    });

var CouplingSchema = [
        requiredOf('others', setOf(Result.value, anyValue()))
    ];

// Unfortunately, the Coupling APIs currently throw errors when the coupled name
    // is not recognised. This is because if the wrong name is used, it is a
    // non-recoverable error, and the developer should be notified. However, there are
    // better ways to do this: (removing this API and only returning Optionals/Results)
    const init$e = () => {
        const coupled = {};
        const lookupCoupled = (coupleConfig, coupledName) => {
            const available = keys(coupleConfig.others);
            if (available.length === 0) {
                throw new Error('Cannot find any known coupled components');
            }
            else {
                return get$h(coupled, coupledName);
            }
        };
        const getOrCreate = (component, coupleConfig, name) => {
            return lookupCoupled(coupleConfig, name).getOrThunk(() => {
                // TODO: TINY-9014 Likely type error. coupleConfig.others[key] is
                // `() => ((comp: AlloyComponent) => AlloySpec)`,
                // but builder is being treated as a `(comp: AlloyComponent) => AlloySpec`
                const builder = get$h(coupleConfig.others, name).getOrDie('No information found for coupled component: ' + name);
                const spec = builder(component);
                const built = component.getSystem().build(spec);
                coupled[name] = built;
                return built;
            });
        };
        const getExisting = (component, coupleConfig, name) => {
            return lookupCoupled(coupleConfig, name).orThunk(() => {
                // Validate we recognise this coupled component's name.
                get$h(coupleConfig.others, name).getOrDie('No information found for coupled component: ' + name);
                // It's a valid name, so return None, because it hasn't been built yet.
                return Optional.none();
            });
        };
        const readState = constant$1({});
        return nu$4({
            readState,
            getExisting,
            getOrCreate
        });
    };

var CouplingState = /*#__PURE__*/Object.freeze({
        __proto__: null,
        init: init$e
    });

const Coupling = create$3({
        fields: CouplingSchema,
        name: 'coupling',
        apis: CouplingApis,
        state: CouplingState
    });

// Just use "disabled" attribute for these, not "aria-disabled"
    const nativeDisabled = [
        'input',
        'button',
        'textarea',
        'select'
    ];
    const onLoad$5 = (component, disableConfig, disableState) => {
        const f = disableConfig.disabled() ? disable : enable;
        f(component, disableConfig);
    };
    const hasNative = (component, config) => config.useNative === true && contains$2(nativeDisabled, name$3(component.element));
    const nativeIsDisabled = (component) => has$1(component.element, 'disabled');
    const nativeDisable = (component) => {
        set$9(component.element, 'disabled', 'disabled');
    };
    const nativeEnable = (component) => {
        remove$8(component.element, 'disabled');
    };
    const ariaIsDisabled = (component) => get$g(component.element, 'aria-disabled') === 'true';
    const ariaDisable = (component) => {
        set$9(component.element, 'aria-disabled', 'true');
    };
    const ariaEnable = (component) => {
        set$9(component.element, 'aria-disabled', 'false');
    };
    const disable = (component, disableConfig, _disableState) => {
        disableConfig.disableClass.each((disableClass) => {
            add$2(component.element, disableClass);
        });
        const f = hasNative(component, disableConfig) ? nativeDisable : ariaDisable;
        f(component);
        disableConfig.onDisabled(component);
    };
    const enable = (component, disableConfig, _disableState) => {
        disableConfig.disableClass.each((disableClass) => {
            remove$3(component.element, disableClass);
        });
        const f = hasNative(component, disableConfig) ? nativeEnable : ariaEnable;
        f(component);
        disableConfig.onEnabled(component);
    };
    const isDisabled$1 = (component, disableConfig) => hasNative(component, disableConfig) ? nativeIsDisabled(component) : ariaIsDisabled(component);
    const set$2 = (component, disableConfig, disableState, disabled) => {
        const f = disabled ? disable : enable;
        f(component, disableConfig);
    };

var DisableApis = /*#__PURE__*/Object.freeze({
        __proto__: null,
        enable: enable,
        disable: disable,
        isDisabled: isDisabled$1,
        onLoad: onLoad$5,
        set: set$2
    });

const exhibit$5 = (base, disableConfig) => nu$2({
        // Do not add the attribute yet, because it will depend on the node name
        // if we use "aria-disabled" or just "disabled"
        classes: disableConfig.disabled() ? disableConfig.disableClass.toArray() : []
    });
    const events$f = (disableConfig, disableState) => derive$2([
        abort(execute$5(), (component, _simulatedEvent) => isDisabled$1(component, disableConfig)),
        loadEvent(disableConfig, disableState, onLoad$5)
    ]);

var ActiveDisable = /*#__PURE__*/Object.freeze({
        __proto__: null,
        exhibit: exhibit$5,
        events: events$f
    });

var DisableSchema = [
        defaultedFunction('disabled', never),
        defaulted('useNative', true),
        option$3('disableClass'),
        onHandler('onDisabled'),
        onHandler('onEnabled')
    ];

const Disabling = create$3({
        fields: DisableSchema,
        name: 'disabling',
        active: ActiveDisable,
        apis: DisableApis
    });

var DockingApis = /*#__PURE__*/Object.freeze({
        __proto__: null,
        refresh: refresh$4,
        reset: reset$1,
        isDocked: isDocked$2,
        getModes: getModes,
        setModes: setModes,
        forceDockToTop: forceDockToTop,
        forceDockToBottom: forceDockToBottom
    });

var ActiveDocking = /*#__PURE__*/Object.freeze({
        __proto__: null,
        events: events$e
    });

var DockingSchema = [
        optionObjOf('contextual', [
            requiredString('fadeInClass'),
            requiredString('fadeOutClass'),
            requiredString('transitionClass'),
            requiredFunction('lazyContext'),
            onHandler('onShow'),
            onHandler('onShown'),
            onHandler('onHide'),
            onHandler('onHidden')
        ]),
        defaultedFunction('lazyViewport', () => ({
            bounds: win(),
            optScrollEnv: Optional.none()
        })),
        defaultedArrayOf('modes', ['top', 'bottom'], string),
        onHandler('onDocked'),
        onHandler('onUndocked')
    ];

var DockingState = /*#__PURE__*/Object.freeze({
        __proto__: null,
        init: init$d
    });

const Docking = create$3({
        fields: DockingSchema,
        name: 'docking',
        active: ActiveDocking,
        apis: DockingApis,
        state: DockingState
    });

/*
     * origin: the position (without scroll) of the offset parent
     * scroll: the scrolling position of the window
     *
     * fixed: the fixed coordinates to show for css
     * offset: the absolute coordinates to show for css when inside an offset parent
     * absolute: the absolute coordinates to show before considering the offset parent
     */
    const adt$4 = Adt.generate([
        { offset: ['x', 'y'] },
        { absolute: ['x', 'y'] },
        { fixed: ['x', 'y'] }
    ]);
    const subtract = (change) => (point) => point.translate(-change.left, -change.top);
    const add = (change) => (point) => point.translate(change.left, change.top);
    const transform = (changes) => (x, y) => foldl(changes, (rest, f) => f(rest), SugarPosition(x, y));
    const asFixed = (coord, scroll, origin) => coord.fold(
    // offset to fixed
    transform([add(origin), subtract(scroll)]), 
    // absolute to fixed
    transform([subtract(scroll)]), 
    // fixed to fixed
    transform([]));
    const asAbsolute = (coord, scroll, origin) => coord.fold(
    // offset to absolute
    transform([add(origin)]), 
    // absolute to absolute
    transform([]), 
    // fixed to absolute
    transform([add(scroll)]));
    const asOffset = (coord, scroll, origin) => coord.fold(
    // offset to offset
    transform([]), 
    // absolute to offset
    transform([subtract(origin)]), 
    // fixed to offset
    transform([add(scroll), subtract(origin)]));
    const withinRange = (coord1, coord2, xRange, yRange, scroll, origin) => {
        const a1 = asAbsolute(coord1, scroll, origin);
        const a2 = asAbsolute(coord2, scroll, origin);
        // console.log(`a1.left: ${a1.left}, a2.left: ${a2.left}, leftDelta: ${a1.left - a2.left}, xRange: ${xRange}, lD <= xRange: ${Math.abs(a1.left - a2.left) <= xRange}`);
        // console.log(`a1.top: ${a1.top}, a2.top: ${a2.top}, topDelta: ${a1.top - a2.top}, yRange: ${yRange}, lD <= xRange: ${Math.abs(a1.top - a2.top) <= yRange}`);
        return Math.abs(a1.left - a2.left) <= xRange &&
            Math.abs(a1.top - a2.top) <= yRange;
    };
    const getDeltas = (coord1, coord2, xRange, yRange, scroll, origin) => {
        const a1 = asAbsolute(coord1, scroll, origin);
        const a2 = asAbsolute(coord2, scroll, origin);
        const left = Math.abs(a1.left - a2.left);
        const top = Math.abs(a1.top - a2.top);
        return SugarPosition(left, top);
    };
    const toStyles = (coord, scroll, origin) => {
        const stylesOpt = coord.fold((x, y) => ({ position: Optional.some('absolute'), left: Optional.some(x + 'px'), top: Optional.some(y + 'px') }), // offset
        (x, y) => ({ position: Optional.some('absolute'), left: Optional.some((x - origin.left) + 'px'), top: Optional.some((y - origin.top) + 'px') }), // absolute
        (x, y) => ({ position: Optional.some('fixed'), left: Optional.some(x + 'px'), top: Optional.some(y + 'px') }) // fixed
        );
        return { right: Optional.none(), bottom: Optional.none(), ...stylesOpt };
    };
    const translate$2 = (coord, deltaX, deltaY) => coord.fold((x, y) => offset(x + deltaX, y + deltaY), (x, y) => absolute$1(x + deltaX, y + deltaY), (x, y) => fixed$1(x + deltaX, y + deltaY));
    const absorb = (partialCoord, originalCoord, scroll, origin) => {
        const absorbOne = (stencil, nu) => (optX, optY) => {
            const original = stencil(originalCoord, scroll, origin);
            return nu(optX.getOr(original.left), optY.getOr(original.top));
        };
        return partialCoord.fold(absorbOne(asOffset, offset), absorbOne(asAbsolute, absolute$1), absorbOne(asFixed, fixed$1));
    };
    const offset = adt$4.offset;
    const absolute$1 = adt$4.absolute;
    const fixed$1 = adt$4.fixed;

// Types of coordinates
    // SugarLocation: This is the position on the screen including scroll.
    // Absolute: This is the css setting that would be applied. Therefore, it subtracts
    // the origin of the relative offsetParent.
    // Fixed: This is the fixed position.
    /*
     So in attempt to make this more understandable, let's use offset, absolute, and fixed.
     and try and model individual combinators
    */
    /*

Relationships:
       - location -> absolute: should just need to subtract the position of the offset parent (origin)
       - location -> fixed: subtract the scrolling
       - absolute -> fixed: add the origin, and subtract the scrolling
       - absolute -> location: add the origin
       - fixed -> absolute: add the scrolling, remove the origin
       - fixed -> location: add the scrolling

/*
     * When the user is dragging around the element, and it snaps into place, it is important
     * for the next movement to be from its pre-snapped location, rather than the snapped location.
     * This is because if it is from the snapped location the next delta movement may not actually
     * be high enough to get it out of the snap area, and hence, it will just snap again (and again).
     */
    // This identifies the position of the draggable element as either its current position, or the position
    // that we put on it before we snapped it into place (before dropping). Once it's dropped, the presnap
    // position will go away. It is used to avoid the situation where you can't escape the snap unless you
    // move the mouse really quickly :)
    const getCoords = (component, snapInfo, coord, delta) => get$3(component, snapInfo).fold(() => coord, (fixed) => 
    // We have a pre-snap position, so we have to apply the delta ourselves
    fixed$1(fixed.left + delta.left, fixed.top + delta.top));
    const moveOrSnap = (component, snapInfo, coord, delta, scroll, origin) => {
        const newCoord = getCoords(component, snapInfo, coord, delta);
        const snap = snapInfo.mustSnap ? findClosestSnap(component, snapInfo, newCoord, scroll, origin) :
            findSnap(component, snapInfo, newCoord, scroll, origin);
        const fixedCoord = asFixed(newCoord, scroll, origin);
        set$1(component, snapInfo, fixedCoord);
        return snap.fold(() => ({
            coord: fixed$1(fixedCoord.left, fixedCoord.top),
            extra: Optional.none()
        })
        // No snap.
        // var newfixed = graph.boundToFixed(theatre, element, loc.left, loc.top, fixed.left, fixed.top, height);
        // presnaps.set(element, 'fixed', newfixed.left, newfixed.top);
        // return { position: 'fixed', left: newfixed.left + 'px', top: newfixed.top + 'px' };
        , (spanned) => ({
            coord: spanned.output,
            extra: spanned.extra
        }));
    };
    const stopDrag = (component, snapInfo) => {
        clear(component, snapInfo);
    };
    const findMatchingSnap = (snaps, newCoord, scroll, origin) => findMap(snaps, (snap) => {
        const sensor = snap.sensor;
        const inRange = withinRange(newCoord, sensor, snap.range.left, snap.range.top, scroll, origin);
        return inRange ? Optional.some({
            output: absorb(snap.output, newCoord, scroll, origin),
            extra: snap.extra
        }) : Optional.none();
    });
    const findClosestSnap = (component, snapInfo, newCoord, scroll, origin) => {
        // You need to pass in the absX and absY so that they can be used for things which only care about snapping one axis and keeping the other one.
        const snaps = snapInfo.getSnapPoints(component);
        const matchSnap = findMatchingSnap(snaps, newCoord, scroll, origin);
        return matchSnap.orThunk(() => {
            const bestSnap = foldl(snaps, (acc, snap) => {
                const sensor = snap.sensor;
                const deltas = getDeltas(newCoord, sensor, snap.range.left, snap.range.top, scroll, origin);
                return acc.deltas.fold(() => ({
                    deltas: Optional.some(deltas),
                    snap: Optional.some(snap)
                }), (bestDeltas) => {
                    const currAvg = (deltas.left + deltas.top) / 2;
                    const bestAvg = (bestDeltas.left + bestDeltas.top) / 2;
                    if (currAvg <= bestAvg) {
                        return {
                            deltas: Optional.some(deltas),
                            snap: Optional.some(snap)
                        };
                    }
                    else {
                        return acc;
                    }
                });
            }, {
                deltas: Optional.none(),
                snap: Optional.none()
            });
            return bestSnap.snap.map((snap) => ({
                output: absorb(snap.output, newCoord, scroll, origin),
                extra: snap.extra
            }));
        });
    };
    // x: the absolute position.left of the draggable element
    // y: the absolute position.top of the draggable element
    // deltaX: the amount the mouse has moved horizontally
    // deltaY: the amount the mouse has moved vertically
    const findSnap = (component, snapInfo, newCoord, scroll, origin) => {
        // You need to pass in the absX and absY so that they can be used for things which only care about snapping one axis and keeping the other one.
        const snaps = snapInfo.getSnapPoints(component);
        // HERE
        return findMatchingSnap(snaps, newCoord, scroll, origin);
    };
    const snapTo$1 = (snap, scroll, origin) => ({
        // TODO: This looks to be incorrect and needs fixing as DragCoord definitely needs a number
        // based drag coord for the second argument here, so this is probably a bug.
        coord: absorb(snap.output, snap.output, scroll, origin),
        extra: snap.extra
    });

const snapTo = (component, dragConfig, _state, snap) => {
        const target = dragConfig.getTarget(component.element);
        if (dragConfig.repositionTarget) {
            const doc = owner$4(component.element);
            const scroll = get$b(doc);
            const origin = getOrigin(target);
            const snapPin = snapTo$1(snap, scroll, origin);
            const styles = toStyles(snapPin.coord, scroll, origin);
            setOptions(target, styles);
        }
    };

var DraggingApis = /*#__PURE__*/Object.freeze({
        __proto__: null,
        snapTo: snapTo
    });

var SnapSchema = optionObjOf('snaps', [
        required$1('getSnapPoints'),
        onHandler('onSensor'),
        required$1('leftAttr'),
        required$1('topAttr'),
        defaulted('lazyViewport', win),
        defaulted('mustSnap', false)
    ]);

const schema$r = [
        // Is this used?
        defaulted('useFixed', never),
        required$1('blockerClass'),
        defaulted('getTarget', identity),
        defaulted('onDrag', noop),
        defaulted('repositionTarget', true),
        defaulted('onDrop', noop),
        defaultedFunction('getBounds', win),
        SnapSchema
    ];

const init$c = (dragApi) => derive$2([
        // When the user clicks on the blocker, something has probably gone slightly
        // wrong, so we'll just drop for safety. The blocker should really only
        // be there when the mouse is already down and not released, so a 'click'
        run$1(mousedown(), dragApi.forceDrop),
        // When the user releases the mouse on the blocker, that is a drop
        run$1(mouseup(), dragApi.drop),
        // As the user moves the mouse around (while pressed down), we move the
        // component around
        run$1(mousemove(), (comp, simulatedEvent) => {
            dragApi.move(simulatedEvent.event);
        }),
        // When the use moves outside the range, schedule a block to occur but
        // give it a chance to be cancelled.
        run$1(mouseout(), dragApi.delayDrop)
    ]);

const getData$1 = (event) => Optional.from(SugarPosition(event.x, event.y));
    // When dragging with the mouse, the delta is simply the difference
    // between the two position (previous/old and next/nu)
    const getDelta$1 = (old, nu) => SugarPosition(nu.left - old.left, nu.top - old.top);

var MouseData = /*#__PURE__*/Object.freeze({
        __proto__: null,
        getData: getData$1,
        getDelta: getDelta$1
    });

const init$b = (dragApi) => derive$2([
        // When the user taps on the blocker, something has probably gone slightly
        // wrong, so we'll just drop for safety. The blocker should really only
        // be there when their finger is already down and not released, so a 'tap'
        run$1(touchstart(), dragApi.forceDrop),
        // When the user releases their finger on the blocker, that is a drop
        run$1(touchend(), dragApi.drop),
        run$1(touchcancel(), dragApi.drop),
        // As the user moves their finger around (while pressed down), we move the
        // component around
        run$1(touchmove(), (comp, simulatedEvent) => {
            dragApi.move(simulatedEvent.event);
        })
    ]);

const getDataFrom = (touches) => {
        const touch = touches[0];
        return Optional.some(SugarPosition(touch.clientX, touch.clientY));
    };
    const getData = (event) => {
        const raw = event.raw;
        const touches = raw.touches;
        return touches.length === 1 ? getDataFrom(touches) : Optional.none();
    };
    // When dragging the touch, the delta is simply the difference
    // between the two touch positions (previous/old and next/nu)
    const getDelta = (old, nu) => SugarPosition(nu.left - old.left, nu.top - old.top);

var TouchData = /*#__PURE__*/Object.freeze({
        __proto__: null,
        getData: getData,
        getDelta: getDelta
    });

const events$b = (dragConfig, dragState, updateStartState) => [
        ...events$d(dragConfig, dragState, updateStartState),
        ...events$c(dragConfig, dragState, updateStartState)
    ];
    const schema$o = [
        ...schema$r,
        output$1('dragger', {
            handlers: handlers(events$b)
        })
    ];

const mouse = schema$q;
    const touch = schema$p;
    const mouseOrTouch = schema$o;

var DraggingBranches = /*#__PURE__*/Object.freeze({
        __proto__: null,
        mouse: mouse,
        touch: touch,
        mouseOrTouch: mouseOrTouch
    });

// NOTE: mode refers to the way that information is retrieved from
    // the user interaction. It can be things like MouseData, TouchData etc.
    const init$a = () => {
        // Dragging operates on the difference between the previous user
        // interaction and the next user interaction. Therefore, we store
        // the previous interaction so that we can compare it.
        let previous = Optional.none();
        // Dragging requires calculating the bounds, so we store that data initially
        // to reduce the amount of computation each mouse movement
        let startData = Optional.none();
        const reset = () => {
            previous = Optional.none();
            startData = Optional.none();
        };
        // Return position delta between previous position and nu position,
        // or None if this is the first. Set the previous position to nu.
        const calculateDelta = (mode, nu) => {
            const result = previous.map((old) => mode.getDelta(old, nu));
            previous = Optional.some(nu);
            return result;
        };
        // NOTE: This dragEvent is the DOM touch event or mouse event
        const update = (mode, dragEvent) => mode.getData(dragEvent).bind((nuData) => calculateDelta(mode, nuData));
        const setStartData = (data) => {
            startData = Optional.some(data);
        };
        const getStartData = () => startData;
        const readState = constant$1({});
        return nu$4({
            readState,
            reset,
            update,
            getStartData,
            setStartData
        });
    };

var DragState = /*#__PURE__*/Object.freeze({
        __proto__: null,
        init: init$a
    });

var InvalidateApis = /*#__PURE__*/Object.freeze({
        __proto__: null,
        markValid: markValid,
        markInvalid: markInvalid,
        query: query,
        run: run,
        isInvalid: isInvalid
    });

var ActiveInvalidate = /*#__PURE__*/Object.freeze({
        __proto__: null,
        events: events$a
    });

var InvalidateSchema = [
        required$1('invalidClass'),
        defaulted('getRoot', Optional.none),
        // TODO: Completely rework the notify API
        optionObjOf('notify', [
            defaulted('aria', 'alert'),
            // Maybe we should use something else.
            defaulted('getContainer', Optional.none),
            defaulted('validHtml', ''),
            onHandler('onValid'),
            onHandler('onInvalid'),
            onHandler('onValidate')
        ]),
        optionObjOf('validator', [
            required$1('validate'),
            defaulted('onEvent', 'input'),
            defaulted('validateOnLoad', true)
        ])
    ];

var RepresentApis = /*#__PURE__*/Object.freeze({
        __proto__: null,
        onLoad: onLoad$4,
        onUnload: onUnload$2,
        setValue: setValue$3,
        getValue: getValue$3,
        getState: getState$2
    });

var ActiveRepresenting = /*#__PURE__*/Object.freeze({
        __proto__: null,
        events: events$9
    });

var RepresentState = /*#__PURE__*/Object.freeze({
        __proto__: null,
        memory: memory$1,
        dataset: dataset,
        manual: manual,
        init: init$9
    });

var RepresentSchema = [
        defaultedOf('store', { mode: 'memory' }, choose$1('mode', {
            memory: MemoryStore,
            manual: ManualStore,
            dataset: DatasetStore
        })),
        onHandler('onSetValue'),
        defaulted('resetOnDom', false)
    ];

// The self-reference is clumsy.
    const Representing = create$3({
        fields: RepresentSchema,
        name: 'representing',
        active: ActiveRepresenting,
        apis: RepresentApis,
        extra: {
            setValueFrom: (component, source) => {
                const value = Representing.getValue(source);
                Representing.setValue(component, value);
            }
        },
        state: RepresentState
    });

const exhibit$4 = (base, posConfig) => nu$2({
        classes: [],
        styles: posConfig.useFixed() ? {} : { position: 'relative' }
    });

var ActivePosition = /*#__PURE__*/Object.freeze({
        __proto__: null,
        exhibit: exhibit$4
    });

const anchor = (anchorBox, origin) => ({
        anchorBox,
        origin
    });
    const box = (anchorBox, origin) => anchor(anchorBox, origin);

/*
     * This is the old repartee API. It is retained in a similar structure to the original form,
     * in case we decide to bring back the flexibility of working with non-standard positioning.
     */
    const elementSize = (p) => ({
        width: Math.ceil(getOuter(p)),
        height: getOuter$1(p)
    });
    const layout = (anchorBox, element, bubbles, options) => {
        // clear the potentially limiting factors before measuring
        remove$6(element, 'max-height');
        remove$6(element, 'max-width');
        const elementBox = elementSize(element);
        return attempts(element, options.preference, anchorBox, elementBox, bubbles, options.bounds);
    };
    const setClasses = (element, decision) => {
        const classInfo = decision.classes;
        remove$2(element, classInfo.off);
        add$1(element, classInfo.on);
    };
    /*
     * maxHeightFunction is a MaxHeight instance.
     * max-height is usually the distance between the edge of the popup and the screen; top of popup to bottom of screen for south, bottom of popup to top of screen for north.
     *
     * There are a few cases where we specifically don't want a max-height, which is why it's optional.
     */
    const setHeight = (element, decision, options) => {
        // The old API enforced MaxHeight.anchored() for fixed position. That no longer seems necessary.
        const maxHeightFunction = options.maxHeightFunction;
        maxHeightFunction(element, decision.maxHeight);
    };
    const setWidth = (element, decision, options) => {
        const maxWidthFunction = options.maxWidthFunction;
        maxWidthFunction(element, decision.maxWidth);
    };
    const position$2 = (element, decision, options) => {
        // This is a point of difference between Alloy and Repartee. Repartee appears to use Measure to calculate the available space for fixed origin
        // That is not ported yet.
        const positionCss = reposition(options.origin, decision);
        options.transition.each((transition) => {
            applyTransitionCss(element, options.origin, positionCss, transition, decision, options.lastPlacement);
        });
        applyPositionCss(element, positionCss);
    };
    const setPlacement = (element, decision) => {
        setPlacement$1(element, decision.placement);
    };

const nu$1 = identity;

const schema$n = () => optionObjOf('layouts', [
        required$1('onLtr'),
        required$1('onRtl'),
        option$3('onBottomLtr'),
        option$3('onBottomRtl')
    ]);
    const get$1 = (elem, info, defaultLtr, defaultRtl, defaultBottomLtr, defaultBottomRtl, dirElement) => {
        const isBottomToTop = dirElement.map(isBottomToTopDir).getOr(false);
        const customLtr = info.layouts.map((ls) => ls.onLtr(elem));
        const customRtl = info.layouts.map((ls) => ls.onRtl(elem));
        const ltr = isBottomToTop ?
            info.layouts.bind((ls) => ls.onBottomLtr.map((f) => f(elem)))
                .or(customLtr)
                .getOr(defaultBottomLtr) :
            customLtr.getOr(defaultLtr);
        const rtl = isBottomToTop ?
            info.layouts.bind((ls) => ls.onBottomRtl.map((f) => f(elem)))
                .or(customRtl)
                .getOr(defaultBottomRtl) :
            customRtl.getOr(defaultRtl);
        const f = onDirection(ltr, rtl);
        return f(elem);
    };

// In one mode, the window is inside an iframe. If that iframe is in the
    // same document as the positioning element (component), then identify the offset
    // difference between the iframe and the component.
    const getOffset = (component, origin, anchorInfo) => {
        const win = defaultView(anchorInfo.root).dom;
        const hasSameOwner = (frame) => {
            const frameOwner = owner$4(frame);
            const compOwner = owner$4(component.element);
            return eq(frameOwner, compOwner);
        };
        return Optional.from(win.frameElement).map(SugarElement.fromDom)
            .filter(hasSameOwner).map(absolute$3);
    };
    const getRootPoint = (component, origin, anchorInfo) => {
        const doc = owner$4(component.element);
        const outerScroll = get$b(doc);
        const offset = getOffset(component, origin, anchorInfo).getOr(outerScroll);
        return absolute(offset, outerScroll.left, outerScroll.top);
    };

// A range from (a, 1) to (body, end) was giving the wrong bounds.
    const descendOnce = (element, offset) => isText(element) ? point(element, offset) : descendOnce$1(element, offset);
    const isSimRange = (detail) => detail.foffset !== undefined;
    const getAnchorSelection = (win, anchorInfo) => {
        // FIX TEST Test both providing a getSelection and not providing a getSelection
        const getSelection = anchorInfo.getSelection.getOrThunk(() => () => getExact(win));
        return getSelection().map((sel) => {
            if (isSimRange(sel)) {
                const modStart = descendOnce(sel.start, sel.soffset);
                const modFinish = descendOnce(sel.finish, sel.foffset);
                return SimSelection.range(modStart.element, modStart.offset, modFinish.element, modFinish.offset);
            }
            else {
                return sel;
            }
        });
    };
    const placement$1 = (component, anchorInfo, origin) => {
        const win = defaultView(anchorInfo.root).dom;
        const rootPoint = getRootPoint(component, origin, anchorInfo);
        const selectionBox = getAnchorSelection(win, anchorInfo).bind((sel) => {
            // This represents the *visual* rectangle of the selection.
            if (isSimRange(sel)) {
                const optRect = getBounds$2(win, SimSelection.exactFromRange(sel)).orThunk(() => {
                    const zeroWidth$1 = SugarElement.fromText(zeroWidth);
                    before$1(sel.start, zeroWidth$1);
                    // Certain things like <p><br/></p> with (p, 0) or <br>) as collapsed selection do not return a client rectangle
                    const rect = getFirstRect(win, SimSelection.exact(zeroWidth$1, 0, zeroWidth$1, 1));
                    remove$7(zeroWidth$1);
                    return rect;
                });
                return optRect.bind((rawRect) => {
                    return getBox(rawRect.left, rawRect.top, rawRect.width, rawRect.height);
                });
            }
            else {
                const selectionRect = map$1(sel, (cell) => cell.dom.getBoundingClientRect());
                const bounds = {
                    left: Math.min(selectionRect.firstCell.left, selectionRect.lastCell.left),
                    right: Math.max(selectionRect.firstCell.right, selectionRect.lastCell.right),
                    top: Math.min(selectionRect.firstCell.top, selectionRect.lastCell.top),
                    bottom: Math.max(selectionRect.firstCell.bottom, selectionRect.lastCell.bottom)
                };
                return getBox(bounds.left, bounds.top, bounds.right - bounds.left, bounds.bottom - bounds.top);
            }
        });
        const targetElement = getAnchorSelection(win, anchorInfo)
            .bind((sel) => {
            if (isSimRange(sel)) {
                return isElement$1(sel.start) ? Optional.some(sel.start) : parentElement(sel.start);
            }
            else {
                return Optional.some(sel.firstCell);
            }
        });
        const elem = targetElement.getOr(component.element);
        return calcNewAnchor(selectionBox, rootPoint, anchorInfo, origin, elem);
    };
    var SelectionAnchor = [
        option$3('getSelection'),
        required$1('root'),
        option$3('bubble'),
        schema$n(),
        defaulted('overrides', {}),
        defaulted('showAbove', false),
        output$1('placement', placement$1)
    ];

/*
      Layout for submenus;
      Either left or right of the anchor menu item. Never above or below.
      Aligned to the top or bottom of the anchor as appropriate.
     */
    const labelPrefix = 'link-layout';
    // display element to the right, left edge against the right of the menu
    const eastX = (anchor) => anchor.x + anchor.width;
    // display element to the left, right edge against the left of the menu
    const westX = (anchor, element) => anchor.x - element.width;
    // display element pointing up, bottom edge against the bottom of the menu (usually to one side)
    const northY = (anchor, element) => anchor.y - element.height + anchor.height;
    // display element pointing down, top edge against the top of the menu (usually to one side)
    const southY = (anchor) => anchor.y;
    const southeast = (anchor, element, bubbles) => nu$5(eastX(anchor), southY(anchor), bubbles.southeast(), southeast$3(), "southeast" /* Placement.Southeast */, boundsRestriction(anchor, { left: 0 /* AnchorBoxBounds.RightEdge */, top: 2 /* AnchorBoxBounds.TopEdge */ }), labelPrefix);
    const southwest = (anchor, element, bubbles) => nu$5(westX(anchor, element), southY(anchor), bubbles.southwest(), southwest$3(), "southwest" /* Placement.Southwest */, boundsRestriction(anchor, { right: 1 /* AnchorBoxBounds.LeftEdge */, top: 2 /* AnchorBoxBounds.TopEdge */ }), labelPrefix);
    const northeast = (anchor, element, bubbles) => nu$5(eastX(anchor), northY(anchor, element), bubbles.northeast(), northeast$3(), "northeast" /* Placement.Northeast */, boundsRestriction(anchor, { left: 0 /* AnchorBoxBounds.RightEdge */, bottom: 3 /* AnchorBoxBounds.BottomEdge */ }), labelPrefix);
    const northwest = (anchor, element, bubbles) => nu$5(westX(anchor, element), northY(anchor, element), bubbles.northwest(), northwest$3(), "northwest" /* Placement.Northwest */, boundsRestriction(anchor, { right: 1 /* AnchorBoxBounds.LeftEdge */, bottom: 3 /* AnchorBoxBounds.BottomEdge */ }), labelPrefix);
    const all = () => [southeast, southwest, northeast, northwest];
    const allRtl = () => [southwest, southeast, northwest, northeast];

var AnchorSchema = choose$1('type', {
        selection: SelectionAnchor,
        node: NodeAnchor,
        hotspot: HotspotAnchor,
        submenu: SubmenuAnchor,
        makeshift: MakeshiftAnchor
    });

const TransitionSchema = [
        requiredArrayOf('classes', string),
        defaultedStringEnum('mode', 'all', ['all', 'layout', 'placement'])
    ];
    const PositionSchema = [
        defaulted('useFixed', never),
        option$3('getBounds')
    ];
    const PlacementSchema = [
        requiredOf('anchor', AnchorSchema),
        optionObjOf('transition', TransitionSchema)
    ];

var PositionApis = /*#__PURE__*/Object.freeze({
        __proto__: null,
        position: position$1,
        positionWithinBounds: positionWithinBounds,
        getMode: getMode,
        reset: reset
    });

var PositioningState = /*#__PURE__*/Object.freeze({
        __proto__: null,
        init: init$8
    });

const Positioning = create$3({
        fields: PositionSchema,
        name: 'positioning',
        active: ActivePosition,
        apis: PositionApis,
        state: PositioningState
    });

const chooseChannels = (channels, message) => message.universal ? channels : filter$2(channels, (ch) => contains$2(message.channels, ch));
    const events$8 = (receiveConfig) => derive$2([
        run$1(receive(), (component, message) => {
            const channelMap = receiveConfig.channels;
            const channels = keys(channelMap);
            // NOTE: Receiving event ignores the whole simulated event part.
            // TODO: Think about the types for this, or find a better way for this to rely on receiving.
            const receivingData = message;
            const targetChannels = chooseChannels(channels, receivingData);
            each$1(targetChannels, (ch) => {
                const channelInfo = channelMap[ch];
                const channelSchema = channelInfo.schema;
                const data = asRawOrDie$1('channel[' + ch + '] data\nReceiver: ' + element(component.element), channelSchema, receivingData.data);
                channelInfo.onReceive(component, data);
            });
        })
    ]);

var ActiveReceiving = /*#__PURE__*/Object.freeze({
        __proto__: null,
        events: events$8
    });

var ReceivingSchema = [
        requiredOf('channels', setOf(
        // Allow any keys.
        Result.value, objOfOnly([
            onStrictHandler('onReceive'),
            defaulted('schema', anyValue())
        ])))
    ];

const Receiving = create$3({
        fields: ReceivingSchema,
        name: 'receiving',
        active: ActiveReceiving
    });

var ActiveReflecting = /*#__PURE__*/Object.freeze({
        __proto__: null,
        events: events$7
    });

const getState$1 = (component, replaceConfig, reflectState) => reflectState;

var ReflectingApis = /*#__PURE__*/Object.freeze({
        __proto__: null,
        getState: getState$1
    });

var ReflectingSchema = [
        required$1('channel'),
        option$3('renderComponents'),
        option$3('updateState'),
        option$3('initialData'),
        defaultedBoolean('reuseDom', true)
    ];

const init$7 = () => {
        const cell = Cell(Optional.none());
        const clear = () => cell.set(Optional.none());
        const readState = () => cell.get().getOr('none');
        return {
            readState,
            get: cell.get,
            set: cell.set,
            clear
        };
    };

var ReflectingState = /*#__PURE__*/Object.freeze({
        __proto__: null,
        init: init$7
    });

const Reflecting = create$3({
        fields: ReflectingSchema,
        name: 'reflecting',
        active: ActiveReflecting,
        apis: ReflectingApis,
        state: ReflectingState
    });

// NOTE: A sandbox should not start as part of the world. It is expected to be
    // added to the sink on rebuild.
    const rebuild = (sandbox, sConfig, sState, data) => {
        sState.get().each((_data) => {
            // If currently has data, so it hasn't been removed yet. It is
            // being "re-opened"
            detachChildren(sandbox);
        });
        const point = sConfig.getAttachPoint(sandbox);
        attach(point, sandbox);
        // Must be after the sandbox is in the system
        const built = sandbox.getSystem().build(data);
        attach(sandbox, built);
        sState.set(built);
        return built;
    };
    // Open sandbox transfers focus to the opened menu
    const open$1 = (sandbox, sConfig, sState, data) => {
        const newState = rebuild(sandbox, sConfig, sState, data);
        sConfig.onOpen(sandbox, newState);
        return newState;
    };
    const setContent = (sandbox, sConfig, sState, data) => sState.get().map(() => rebuild(sandbox, sConfig, sState, data));
    // TODO AP-191 write a test for openWhileCloaked
    const openWhileCloaked = (sandbox, sConfig, sState, data, transaction) => {
        cloak(sandbox, sConfig);
        open$1(sandbox, sConfig, sState, data);
        transaction();
        decloak(sandbox, sConfig);
    };
    const close$1 = (sandbox, sConfig, sState) => {
        sState.get().each((data) => {
            detachChildren(sandbox);
            detach(sandbox);
            sConfig.onClose(sandbox, data);
            sState.clear();
        });
    };
    const isOpen$1 = (_sandbox, _sConfig, sState) => sState.isOpen();
    const isPartOf$1 = (sandbox, sConfig, sState, queryElem) => isOpen$1(sandbox, sConfig, sState) && sState.get().exists((data) => sConfig.isPartOf(sandbox, data, queryElem));
    const getState = (_sandbox, _sConfig, sState) => sState.get();
    const store = (sandbox, cssKey, attr, newValue) => {
        getRaw(sandbox.element, cssKey).fold(() => {
            remove$8(sandbox.element, attr);
        }, (v) => {
            set$9(sandbox.element, attr, v);
        });
        set$7(sandbox.element, cssKey, newValue);
    };
    const restore = (sandbox, cssKey, attr) => {
        getOpt(sandbox.element, attr).fold(() => remove$6(sandbox.element, cssKey), (oldValue) => set$7(sandbox.element, cssKey, oldValue));
    };
    const cloak = (sandbox, sConfig, _sState) => {
        const sink = sConfig.getAttachPoint(sandbox);
        // Use the positioning mode of the sink, so that it does not interfere with the sink's positioning
        // We add it here to stop it causing layout problems.
        set$7(sandbox.element, 'position', Positioning.getMode(sink));
        store(sandbox, 'visibility', sConfig.cloakVisibilityAttr, 'hidden');
    };
    const hasPosition = (element) => exists(['top', 'left', 'right', 'bottom'], (pos) => getRaw(element, pos).isSome());
    const decloak = (sandbox, sConfig, _sState) => {
        if (!hasPosition(sandbox.element)) {
            // If a position value was not added to the sandbox during cloaking, remove it
            // otherwise certain position values (absolute, relative) will impact the child that _was_ positioned
            remove$6(sandbox.element, 'position');
        }
        restore(sandbox, 'visibility', sConfig.cloakVisibilityAttr);
    };

var SandboxApis = /*#__PURE__*/Object.freeze({
        __proto__: null,
        cloak: cloak,
        decloak: decloak,
        open: open$1,
        openWhileCloaked: openWhileCloaked,
        close: close$1,
        isOpen: isOpen$1,
        isPartOf: isPartOf$1,
        getState: getState,
        setContent: setContent
    });

const events$6 = (sandboxConfig, sandboxState) => derive$2([
        run$1(sandboxClose(), (sandbox, _simulatedEvent) => {
            close$1(sandbox, sandboxConfig, sandboxState);
        })
    ]);

var ActiveSandbox = /*#__PURE__*/Object.freeze({
        __proto__: null,
        events: events$6
    });

var SandboxSchema = [
        onHandler('onOpen'),
        onHandler('onClose'),
        // Maybe this should be optional
        required$1('isPartOf'),
        required$1('getAttachPoint'),
        defaulted('cloakVisibilityAttr', 'data-precloak-visibility')
    ];

const init$6 = () => {
        const contents = value$2();
        const readState = constant$1('not-implemented');
        return nu$4({
            readState,
            isOpen: contents.isSet,
            clear: contents.clear,
            set: contents.set,
            get: contents.get
        });
    };

var SandboxState = /*#__PURE__*/Object.freeze({
        __proto__: null,
        init: init$6
    });

const Sandboxing = create$3({
        fields: SandboxSchema,
        name: 'sandboxing',
        active: ActiveSandbox,
        apis: SandboxApis,
        state: SandboxState
    });

const getAnimationRoot = (component, slideConfig) => slideConfig.getAnimationRoot.fold(() => component.element, (get) => get(component));

var SlidingApis = /*#__PURE__*/Object.freeze({
        __proto__: null,
        refresh: refresh$3,
        grow: grow,
        shrink: shrink,
        immediateShrink: immediateShrink,
        hasGrown: hasGrown,
        hasShrunk: hasShrunk,
        isGrowing: isGrowing,
        isShrinking: isShrinking,
        isTransitioning: isTransitioning,
        toggleGrow: toggleGrow,
        disableTransitions: disableTransitions,
        immediateGrow: immediateGrow
    });

var ActiveSliding = /*#__PURE__*/Object.freeze({
        __proto__: null,
        exhibit: exhibit$3,
        events: events$5
    });

var SlidingSchema = [
        required$1('closedClass'),
        required$1('openClass'),
        required$1('shrinkingClass'),
        required$1('growingClass'),
        // Element which shrinking and growing animations
        option$3('getAnimationRoot'),
        onHandler('onShrunk'),
        onHandler('onStartShrink'),
        onHandler('onGrown'),
        onHandler('onStartGrow'),
        defaulted('expanded', false),
        requiredOf('dimension', choose$1('property', {
            width: [
                output$1('property', 'width'),
                output$1('getDimension', (elem) => get$c(elem) + 'px')
            ],
            height: [
                output$1('property', 'height'),
                output$1('getDimension', (elem) => get$d(elem) + 'px')
            ]
        }))
    ];

const init$5 = (spec) => {
        const state = Cell(spec.expanded);
        const readState = () => 'expanded: ' + state.get();
        return nu$4({
            isExpanded: () => state.get() === true,
            isCollapsed: () => state.get() === false,
            setCollapsed: curry(state.set, false),
            setExpanded: curry(state.set, true),
            readState
        });
    };

var SlidingState = /*#__PURE__*/Object.freeze({
        __proto__: null,
        init: init$5
    });

const Sliding = create$3({
        fields: SlidingSchema,
        name: 'sliding',
        active: ActiveSliding,
        apis: SlidingApis,
        state: SlidingState
    });

const events$4 = (streamConfig, streamState) => {
        const streams = streamConfig.stream.streams;
        const processor = streams.setup(streamConfig, streamState);
        return derive$2([
            run$1(streamConfig.event, processor),
            runOnDetached(() => streamState.cancel())
        ].concat(streamConfig.cancelEvent.map((e) => [
            run$1(e, () => streamState.cancel())
        ]).getOr([])));
    };

var ActiveStreaming = /*#__PURE__*/Object.freeze({
        __proto__: null,
        events: events$4
    });

var StreamingState = /*#__PURE__*/Object.freeze({
        __proto__: null,
        throttle: throttle,
        init: init$4
    });

const Streaming = create$3({
        fields: StreamingSchema,
        name: 'streaming',
        active: ActiveStreaming,
        state: StreamingState
    });

const exhibit$2 = (base, tabConfig) => nu$2({
        attributes: wrapAll([
            { key: tabConfig.tabAttr, value: 'true' }
        ])
    });

var ActiveTabstopping = /*#__PURE__*/Object.freeze({
        __proto__: null,
        exhibit: exhibit$2
    });

var TabstopSchema = [
        defaulted('tabAttr', 'data-alloy-tabstop')
    ];

const Tabstopping = create$3({
        fields: TabstopSchema,
        name: 'tabstopping',
        active: ActiveTabstopping
    });

var ToggleApis = /*#__PURE__*/Object.freeze({
        __proto__: null,
        onLoad: onLoad,
        toggle: toggle$2,
        isOn: isOn,
        on: on,
        off: off,
        set: set
    });

const exhibit$1 = () => nu$2({});
    const events$3 = (toggleConfig, toggleState) => {
        const execute = executeEvent(toggleConfig, toggleState, toggle$2);
        const load = loadEvent(toggleConfig, toggleState, onLoad);
        return derive$2(flatten([
            toggleConfig.toggleOnExecute ? [execute] : [],
            [load]
        ]));
    };

var ActiveToggle = /*#__PURE__*/Object.freeze({
        __proto__: null,
        exhibit: exhibit$1,
        events: events$3
    });

var ToggleSchema = [
        defaulted('selected', false),
        option$3('toggleClass'),
        defaulted('toggleOnExecute', true),
        onHandler('onToggled'),
        defaultedOf('aria', {
            mode: 'none'
        }, choose$1('mode', {
            pressed: [
                defaulted('syncWithExpanded', false),
                output$1('update', updatePressed)
            ],
            checked: [
                output$1('update', updateChecked)
            ],
            expanded: [
                output$1('update', updateExpanded)
            ],
            selected: [
                output$1('update', updateSelected)
            ],
            none: [
                output$1('update', noop)
            ]
        }))
    ];

const Toggling = create$3({
        fields: ToggleSchema,
        name: 'toggling',
        active: ActiveToggle,
        apis: ToggleApis,
        state: SetupBehaviourCellState(false)
    });

const ExclusivityChannel = generate$6('tooltip.exclusive');
    const ShowTooltipEvent = generate$6('tooltip.show');
    const HideTooltipEvent = generate$6('tooltip.hide');
    const ImmediateHideTooltipEvent = generate$6('tooltip.immediateHide');
    const ImmediateShowTooltipEvent = generate$6('tooltip.immediateShow');

var TooltippingApis = /*#__PURE__*/Object.freeze({
        __proto__: null,
        hideAllExclusive: hideAllExclusive,
        immediateOpenClose: immediateOpenClose,
        isEnabled: isEnabled,
        setComponents: setComponents,
        setEnabled: setEnabled
    });

var ActiveTooltipping = /*#__PURE__*/Object.freeze({
        __proto__: null,
        events: events$2
    });

var TooltippingSchema = [
        required$1('lazySink'),
        required$1('tooltipDom'),
        defaulted('exclusive', true),
        defaulted('tooltipComponents', []),
        defaultedFunction('delayForShow', constant$1(300)),
        defaultedFunction('delayForHide', constant$1(100)),
        defaultedFunction('onSetup', noop),
        defaultedStringEnum('mode', 'normal', ['normal', 'follow-highlight', 'children-keyboard-focus', 'children-normal']),
        defaulted('anchor', (comp) => ({
            type: 'hotspot',
            hotspot: comp,
            layouts: {
                onLtr: constant$1([south$2, north$2, southeast$2, northeast$2, southwest$2, northwest$2]),
                onRtl: constant$1([south$2, north$2, southeast$2, northeast$2, southwest$2, northwest$2])
            },
            bubble: nu$6(0, -2, {}),
        })),
        onHandler('onHide'),
        onHandler('onShow'),
    ];

var TooltippingState = /*#__PURE__*/Object.freeze({
        __proto__: null,
        init: init$3
    });

const Tooltipping = create$3({
        fields: TooltippingSchema,
        name: 'tooltipping',
        active: ActiveTooltipping,
        state: TooltippingState,
        apis: TooltippingApis
    });

const exhibit = () => nu$2({
        styles: {
            '-webkit-user-select': 'none',
            'user-select': 'none',
            '-ms-user-select': 'none',
            '-moz-user-select': '-moz-none'
        },
        attributes: {
            unselectable: 'on'
        }
    });
    const events$1 = () => derive$2([
        abort(selectstart(), always)
    ]);

var ActiveUnselecting = /*#__PURE__*/Object.freeze({
        __proto__: null,
        events: events$1,
        exhibit: exhibit
    });

const Unselecting = create$3({
        fields: [],
        name: 'unselecting',
        active: ActiveUnselecting
    });

// TODO: ^ rename the parts/ api to composites, it will break mobile alloy now if we do
    const parts$g = AlloyParts;
    const partType$1 = PartType;

const derive = (rawEvent, rawTarget) => {
        const source = get$h(rawEvent, 'target').getOr(rawTarget);
        return Cell(source);
    };

const isAriaPartOf = (component, queryElem) => find$1(queryElem).exists((owner) => isPartOf(component, owner));
    const isPartOf = (component, queryElem) => closest$2(queryElem, (el) => eq(el, component.element), never) || isAriaPartOf(component, queryElem);

// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
    const getItemRole = (detail) => detail.role.fold(() => detail.toggling
        .map((toggling) => toggling.exclusive ? 'menuitemradio' : 'menuitemcheckbox')
        .getOr('menuitem'), identity);
    const getTogglingSpec = (tConfig, isOption) => ({
        aria: {
            mode: isOption ? 'selected' : 'checked'
        },
        // Filter out the additional properties that are not in Toggling Behaviour's configuration (e.g. exclusive)
        ...filter$1(tConfig, (_value, name) => name !== 'exclusive'),
        onToggled: (component, state) => {
            if (isFunction(tConfig.onToggled)) {
                tConfig.onToggled(component, state);
            }
            onToggled(component, state);
        }
    });
    const builder$2 = (detail) => ({
        dom: detail.dom,
        domModification: {
            // INVESTIGATE: If more efficient, destructure attributes out
            ...detail.domModification,
            attributes: {
                'role': getItemRole(detail),
                ...detail.domModification.attributes,
                'aria-haspopup': detail.hasSubmenu,
                ...(detail.hasSubmenu ? { 'aria-expanded': false } : {})
            }
        },
        behaviours: SketchBehaviours.augment(detail.itemBehaviours, [
            // Investigate, is the Toggling.revoke still necessary here?
            detail.toggling.fold(Toggling.revoke, (tConfig) => Toggling.config(getTogglingSpec(tConfig, detail.role.exists((role) => role === 'option')))),
            Focusing.config({
                ignore: detail.ignoreFocus,
                // Rationale: because nothing is focusable, when you click
                // on the items to choose them, the focus jumps to the first
                // focusable outer container ... often the body. If we prevent
                // mouseDown ... that doesn't happen. But only tested on Chrome/FF.
                stopMousedown: detail.ignoreFocus,
                onFocus: (component) => {
                    onFocus$1(component);
                }
            }),
            Keying.config({
                mode: 'execution'
            }),
            Representing.config({
                store: {
                    mode: 'memory',
                    initialValue: detail.data
                }
            }),
            config('item-type-events', [
                // Treat clicks the same as a button
                ...pointerEvents(),
                run$1(mouseover(), onHover),
                run$1(focusItem(), Focusing.focus)
            ])
        ]),
        components: detail.components,
        eventOrder: detail.eventOrder
    });
    const schema$l = [
        required$1('data'),
        required$1('components'),
        required$1('dom'),
        defaulted('hasSubmenu', false),
        option$3('toggling'),
        option$3('role'),
        // Maybe this needs to have fewer behaviours
        SketchBehaviours.field('itemBehaviours', [Toggling, Focusing, Keying, Representing]),
        defaulted('ignoreFocus', false),
        defaulted('domModification', {}),
        output$1('builder', builder$2),
        defaulted('eventOrder', {})
    ];
    var ItemType = schema$l;

const builder$1 = (detail) => ({
        dom: detail.dom,
        components: detail.components,
        events: derive$2([
            stopper(focusItem())
        ])
    });
    const schema$k = [
        required$1('dom'),
        required$1('components'),
        output$1('builder', builder$1)
    ];
    var SeparatorType = schema$k;

const focus = constant$1('alloy.menu-focus');

const Menu = composite({
        name: 'Menu',
        configFields: schema$i(),
        partFields: parts$d(),
        factory: make$6
    });

const onMenuItemHighlightedEvent = generate$6('tiered-menu-item-highlight');
    const onMenuItemDehighlightedEvent = generate$6('tiered-menu-item-dehighlight');

const suffix = constant$1('sink');
    const partType = constant$1(optional({
        name: suffix(),
        overrides: constant$1({
            dom: {
                tag: 'div'
            },
            behaviours: derive$1([
                Positioning.config({
                    // TODO: Make an internal sink also be able to be used with relative layouts
                    useFixed: always
                })
            ]),
            events: derive$2([
                // Sinks should not let keydown or click propagate
                cutter(keydown()),
                cutter(mousedown()),
                cutter(click())
            ])
        })
    }));

// TODO: Roll this back into Fields at some point
    // Unfortunately there appears to be a cyclical dependency or something that's preventing it, but for now this will do as it's home
    const sandboxFields = () => [
        defaulted('sandboxClasses', []),
        SketchBehaviours.field('sandboxBehaviours', [Composing, Receiving, Sandboxing, Representing])
    ];

const factory$d = (detail, _spec) => ({
        uid: detail.uid,
        dom: dom$1(detail),
        // No children.
        components: [],
        behaviours: behaviours(detail),
        eventOrder: detail.eventOrder
    });
    const Input = single({
        name: 'Input',
        configFields: schema$9(),
        factory: factory$d
    });

const parts$7 = generate$5(owner$2(), parts$e());

const labelledBy = (labelledElement, labelElement) => {
        const labelId = getOpt(labelledElement, 'id')
            .fold(() => {
            const id = generate$6('dialog-label');
            set$9(labelElement, 'id', id);
            return id;
        }, identity);
        set$9(labelledElement, 'aria-labelledby', labelId);
    };

const t = 'top', r = 'right', b = 'bottom', l = 'left';
    // Values
    const minX = (detail) => detail.model.minX;
    const minY = (detail) => detail.model.minY;
    const min1X = (detail) => detail.model.minX - 1;
    const min1Y = (detail) => detail.model.minY - 1;
    const maxX = (detail) => detail.model.maxX;
    const maxY = (detail) => detail.model.maxY;
    const max1X = (detail) => detail.model.maxX + 1;
    const max1Y = (detail) => detail.model.maxY + 1;
    const range = (detail, max, min) => max(detail) - min(detail);
    const xRange = (detail) => range(detail, maxX, minX);
    const yRange = (detail) => range(detail, maxY, minY);
    const halfX = (detail) => xRange(detail) / 2;
    const halfY = (detail) => yRange(detail) / 2;
    const step = (detail, useMultiplier) => useMultiplier ? detail.stepSize * detail.speedMultiplier : detail.stepSize;
    const snap = (detail) => detail.snapToGrid;
    const snapStart = (detail) => detail.snapStart;
    const rounded = (detail) => detail.rounded;
    // Not great but... /shrug
    const hasEdge = (detail, edgeName) => detail[edgeName + '-edge'] !== undefined;
    const hasLEdge = (detail) => hasEdge(detail, l);
    const hasREdge = (detail) => hasEdge(detail, r);
    const hasTEdge = (detail) => hasEdge(detail, t);
    const hasBEdge = (detail) => hasEdge(detail, b);
    // Ew, any
    const currentValue = (detail) => detail.model.value.get();

// fire slider change event with x value
    const fireSliderChange$2 = (spectrum, value) => {
        emitWith(spectrum, sliderChangeEvent(), { value });
    };
    // find the value of the x offset of where the mouse was clicked from the model.
    const findValueOfOffset$1 = (spectrum, detail, left) => {
        const args = {
            min: minX(detail),
            max: maxX(detail),
            range: xRange(detail),
            value: left,
            step: step(detail),
            snap: snap(detail),
            snapStart: snapStart(detail),
            rounded: rounded(detail),
            hasMinEdge: hasLEdge(detail),
            hasMaxEdge: hasREdge(detail),
            minBound: getMinXBounds(spectrum),
            maxBound: getMaxXBounds(spectrum),
            screenRange: getXScreenRange(spectrum)
        };
        return findValueOf(args);
    };
    // find the value and fire a slider change event, returning the value
    const setValueFrom$2 = (spectrum, detail, value) => {
        const xValue = findValueOfOffset$1(spectrum, detail, value);
        const sliderVal = xValue;
        fireSliderChange$2(spectrum, sliderVal);
        return xValue;
    };
    // fire a slider change event with the minimum value
    const setToMin$2 = (spectrum, detail) => {
        const min = minX(detail);
        fireSliderChange$2(spectrum, min);
    };
    // fire a slider change event with the maximum value
    const setToMax$2 = (spectrum, detail) => {
        const max = maxX(detail);
        fireSliderChange$2(spectrum, max);
    };
    // move in a direction by step size. Fire change at the end
    const moveBy$2 = (direction, spectrum, detail, useMultiplier) => {
        const f = (direction > 0) ? increaseBy : reduceBy;
        const xValue = f(currentValue(detail), minX(detail), maxX(detail), step(detail, useMultiplier));
        fireSliderChange$2(spectrum, xValue);
        return Optional.some(xValue);
    };
    const handleMovement$2 = (direction) => (spectrum, detail, useMultiplier) => moveBy$2(direction, spectrum, detail, useMultiplier).map(always);
    // get x offset from event
    const getValueFromEvent$2 = (simulatedEvent) => {
        const pos = getEventSource(simulatedEvent);
        return pos.map((p) => p.left);
    };
    // find the x offset of a given value from the model
    const findOffsetOfValue$1 = (spectrum, detail, value, minEdge, maxEdge) => {
        const minOffset = 0;
        const maxOffset = getXScreenRange(spectrum);
        const centerMinEdge = minEdge.bind((edge) => Optional.some(getXCenterOffSetOf(edge, spectrum))).getOr(minOffset);
        const centerMaxEdge = maxEdge.bind((edge) => Optional.some(getXCenterOffSetOf(edge, spectrum))).getOr(maxOffset);
        const args = {
            min: minX(detail),
            max: maxX(detail),
            range: xRange(detail),
            value,
            hasMinEdge: hasLEdge(detail),
            hasMaxEdge: hasREdge(detail),
            minBound: getMinXBounds(spectrum),
            minOffset,
            maxBound: getMaxXBounds(spectrum),
            maxOffset,
            centerMinEdge,
            centerMaxEdge
        };
        return findOffsetOfValue$2(args);
    };
    // find left offset for absolute positioning from a given value
    const findPositionOfValue$1 = (slider, spectrum, value, minEdge, maxEdge, detail) => {
        const offset = findOffsetOfValue$1(spectrum, detail, value, minEdge, maxEdge);
        return (getMinXBounds(spectrum) - getMinXBounds(slider)) + offset;
    };
    // update the position of the thumb from the slider's current value
    const setPositionFromValue$2 = (slider, thumb, detail, edges) => {
        const value = currentValue(detail);
        const pos = findPositionOfValue$1(slider, edges.getSpectrum(slider), value, edges.getLeftEdge(slider), edges.getRightEdge(slider), detail);
        const thumbRadius = get$c(thumb.element) / 2;
        set$7(thumb.element, 'left', (pos - thumbRadius) + 'px');
    };
    // Key Events
    const onLeft$2 = handleMovement$2(-1);
    const onRight$2 = handleMovement$2(1);
    const onUp$2 = Optional.none;
    const onDown$2 = Optional.none;
    // Edge Click Actions
    const edgeActions$2 = {
        'top-left': Optional.none(),
        'top': Optional.none(),
        'top-right': Optional.none(),
        'right': Optional.some(setToREdge),
        'bottom-right': Optional.none(),
        'bottom': Optional.none(),
        'bottom-left': Optional.none(),
        'left': Optional.some(setToLEdge)
    };

var HorizontalModel = /*#__PURE__*/Object.freeze({
        __proto__: null,
        setValueFrom: setValueFrom$2,
        setToMin: setToMin$2,
        setToMax: setToMax$2,
        findValueOfOffset: findValueOfOffset$1,
        getValueFromEvent: getValueFromEvent$2,
        findPositionOfValue: findPositionOfValue$1,
        setPositionFromValue: setPositionFromValue$2,
        onLeft: onLeft$2,
        onRight: onRight$2,
        onUp: onUp$2,
        onDown: onDown$2,
        edgeActions: edgeActions$2
    });

// fire slider change event with y value
    const fireSliderChange$1 = (spectrum, value) => {
        emitWith(spectrum, sliderChangeEvent(), { value });
    };
    // find the value of the y offset of where the mouse was clicked from the model.
    const findValueOfOffset = (spectrum, detail, top) => {
        const args = {
            min: minY(detail),
            max: maxY(detail),
            range: yRange(detail),
            value: top,
            step: step(detail),
            snap: snap(detail),
            snapStart: snapStart(detail),
            rounded: rounded(detail),
            hasMinEdge: hasTEdge(detail),
            hasMaxEdge: hasBEdge(detail),
            minBound: getMinYBounds(spectrum),
            maxBound: getMaxYBounds(spectrum),
            screenRange: getYScreenRange(spectrum)
        };
        return findValueOf(args);
    };
    // find the value and fire a slider change event, returning the value
    const setValueFrom$1 = (spectrum, detail, value) => {
        const yValue = findValueOfOffset(spectrum, detail, value);
        const sliderVal = yValue;
        fireSliderChange$1(spectrum, sliderVal);
        return yValue;
    };
    // fire a slider change event with the minimum value
    const setToMin$1 = (spectrum, detail) => {
        const min = minY(detail);
        fireSliderChange$1(spectrum, min);
    };
    // fire a slider change event with the maximum value
    const setToMax$1 = (spectrum, detail) => {
        const max = maxY(detail);
        fireSliderChange$1(spectrum, max);
    };
    // move in a direction by step size. Fire change at the end
    const moveBy$1 = (direction, spectrum, detail, useMultiplier) => {
        const f = (direction > 0) ? increaseBy : reduceBy;
        const yValue = f(currentValue(detail), minY(detail), maxY(detail), step(detail, useMultiplier));
        fireSliderChange$1(spectrum, yValue);
        return Optional.some(yValue);
    };
    const handleMovement$1 = (direction) => (spectrum, detail, useMultiplier) => moveBy$1(direction, spectrum, detail, useMultiplier).map(always);
    // get y offset from event
    const getValueFromEvent$1 = (simulatedEvent) => {
        const pos = getEventSource(simulatedEvent);
        return pos.map((p) => {
            return p.top;
        });
    };
    // find the y offset of a given value from the model
    const findOffsetOfValue = (spectrum, detail, value, minEdge, maxEdge) => {
        const minOffset = 0;
        const maxOffset = getYScreenRange(spectrum);
        const centerMinEdge = minEdge.bind((edge) => Optional.some(getYCenterOffSetOf(edge, spectrum))).getOr(minOffset);
        const centerMaxEdge = maxEdge.bind((edge) => Optional.some(getYCenterOffSetOf(edge, spectrum))).getOr(maxOffset);
        const args = {
            min: minY(detail),
            max: maxY(detail),
            range: yRange(detail),
            value,
            hasMinEdge: hasTEdge(detail),
            hasMaxEdge: hasBEdge(detail),
            minBound: getMinYBounds(spectrum),
            minOffset,
            maxBound: getMaxYBounds(spectrum),
            maxOffset,
            centerMinEdge,
            centerMaxEdge
        };
        return findOffsetOfValue$2(args);
    };
    // find left offset for absolute positioning from a given value
    const findPositionOfValue = (slider, spectrum, value, minEdge, maxEdge, detail) => {
        const offset = findOffsetOfValue(spectrum, detail, value, minEdge, maxEdge);
        return (getMinYBounds(spectrum) - getMinYBounds(slider)) + offset;
    };
    // update the position of the thumb from the slider's current value
    const setPositionFromValue$1 = (slider, thumb, detail, edges) => {
        const value = currentValue(detail);
        const pos = findPositionOfValue(slider, edges.getSpectrum(slider), value, edges.getTopEdge(slider), edges.getBottomEdge(slider), detail);
        const thumbRadius = get$d(thumb.element) / 2;
        set$7(thumb.element, 'top', (pos - thumbRadius) + 'px');
    };
    // Key Events
    const onLeft$1 = Optional.none;
    const onRight$1 = Optional.none;
    const onUp$1 = handleMovement$1(-1);
    const onDown$1 = handleMovement$1(1);
    // Edge Click Actions
    const edgeActions$1 = {
        'top-left': Optional.none(),
        'top': Optional.some(setToTEdge),
        'top-right': Optional.none(),
        'right': Optional.none(),
        'bottom-right': Optional.none(),
        'bottom': Optional.some(setToBEdge),
        'bottom-left': Optional.none(),
        'left': Optional.none()
    };

var VerticalModel = /*#__PURE__*/Object.freeze({
        __proto__: null,
        setValueFrom: setValueFrom$1,
        setToMin: setToMin$1,
        setToMax: setToMax$1,
        findValueOfOffset: findValueOfOffset,
        getValueFromEvent: getValueFromEvent$1,
        findPositionOfValue: findPositionOfValue,
        setPositionFromValue: setPositionFromValue$1,
        onLeft: onLeft$1,
        onRight: onRight$1,
        onUp: onUp$1,
        onDown: onDown$1,
        edgeActions: edgeActions$1
    });

// fire slider change event with xy value
    const fireSliderChange = (spectrum, value) => {
        emitWith(spectrum, sliderChangeEvent(), { value });
    };
    const sliderValue = (x, y) => ({
        x,
        y
    });
    // find both values of x and y offsets of where the mouse was clicked from the model.
    // then fire a slider change event with those values, returning the values
    const setValueFrom = (spectrum, detail, value) => {
        const xValue = findValueOfOffset$1(spectrum, detail, value.left);
        const yValue = findValueOfOffset(spectrum, detail, value.top);
        const val = sliderValue(xValue, yValue);
        fireSliderChange(spectrum, val);
        return val;
    };
    // move in a direction by step size. Fire change at the end
    const moveBy = (direction, isVerticalMovement, spectrum, detail, useMultiplier) => {
        const f = (direction > 0) ? increaseBy : reduceBy;
        const xValue = isVerticalMovement ? currentValue(detail).x :
            f(currentValue(detail).x, minX(detail), maxX(detail), step(detail, useMultiplier));
        const yValue = !isVerticalMovement ? currentValue(detail).y :
            f(currentValue(detail).y, minY(detail), maxY(detail), step(detail, useMultiplier));
        fireSliderChange(spectrum, sliderValue(xValue, yValue));
        return Optional.some(xValue);
    };
    const handleMovement = (direction, isVerticalMovement) => (spectrum, detail, useMultiplier) => moveBy(direction, isVerticalMovement, spectrum, detail, useMultiplier).map(always);
    // fire a slider change event with the minimum value
    const setToMin = (spectrum, detail) => {
        const mX = minX(detail);
        const mY = minY(detail);
        fireSliderChange(spectrum, sliderValue(mX, mY));
    };
    // fire a slider change event with the maximum value
    const setToMax = (spectrum, detail) => {
        const mX = maxX(detail);
        const mY = maxY(detail);
        fireSliderChange(spectrum, sliderValue(mX, mY));
    };
    // get event data as a SugarPosition
    const getValueFromEvent = (simulatedEvent) => getEventSource(simulatedEvent);
    // update the position of the thumb from the slider's current value
    const setPositionFromValue = (slider, thumb, detail, edges) => {
        const value = currentValue(detail);
        const xPos = findPositionOfValue$1(slider, edges.getSpectrum(slider), value.x, edges.getLeftEdge(slider), edges.getRightEdge(slider), detail);
        const yPos = findPositionOfValue(slider, edges.getSpectrum(slider), value.y, edges.getTopEdge(slider), edges.getBottomEdge(slider), detail);
        const thumbXRadius = get$c(thumb.element) / 2;
        const thumbYRadius = get$d(thumb.element) / 2;
        set$7(thumb.element, 'left', (xPos - thumbXRadius) + 'px');
        set$7(thumb.element, 'top', (yPos - thumbYRadius) + 'px');
    };
    // Key Events
    const onLeft = handleMovement(-1, false);
    const onRight = handleMovement(1, false);
    const onUp = handleMovement(-1, true);
    const onDown = handleMovement(1, true);
    // Edge Click Actions
    const edgeActions = {
        'top-left': Optional.some(setToTLEdgeXY),
        'top': Optional.some(setToTEdgeXY),
        'top-right': Optional.some(setToTREdgeXY),
        'right': Optional.some(setToREdgeXY),
        'bottom-right': Optional.some(setToBREdgeXY),
        'bottom': Optional.some(setToBEdgeXY),
        'bottom-left': Optional.some(setToBLEdgeXY),
        'left': Optional.some(setToLEdgeXY)
    };

var TwoDModel = /*#__PURE__*/Object.freeze({
        __proto__: null,
        setValueFrom: setValueFrom,
        setToMin: setToMin,
        setToMax: setToMax,
        getValueFromEvent: getValueFromEvent,
        setPositionFromValue: setPositionFromValue,
        onLeft: onLeft,
        onRight: onRight,
        onUp: onUp,
        onDown: onDown,
        edgeActions: edgeActions
    });

const SliderSchema = [
        defaulted('stepSize', 1),
        defaulted('speedMultiplier', 10),
        defaulted('onChange', noop),
        defaulted('onChoose', noop),
        defaulted('onInit', noop),
        defaulted('onDragStart', noop),
        defaulted('onDragEnd', noop),
        defaulted('snapToGrid', false),
        defaulted('rounded', true),
        option$3('snapStart'),
        requiredOf('model', choose$1('mode', {
            x: [
                defaulted('minX', 0),
                defaulted('maxX', 100),
                customField('value', (spec) => Cell(spec.mode.minX)),
                required$1('getInitialValue'),
                output$1('manager', HorizontalModel)
            ],
            y: [
                defaulted('minY', 0),
                defaulted('maxY', 100),
                customField('value', (spec) => Cell(spec.mode.minY)),
                required$1('getInitialValue'),
                output$1('manager', VerticalModel)
            ],
            xy: [
                defaulted('minX', 0),
                defaulted('maxX', 100),
                defaulted('minY', 0),
                defaulted('maxY', 100),
                customField('value', (spec) => Cell({
                    x: spec.mode.minX,
                    y: spec.mode.minY
                })),
                required$1('getInitialValue'),
                output$1('manager', TwoDModel)
            ]
        })),
        field('sliderBehaviours', [Keying, Representing]),
        customField('mouseIsDown', () => Cell(false))
    ];

const schema$6 = constant$1([
        field('splitToolbarBehaviours', [Coupling]),
        customField('builtGroups', () => Cell([]))
    ]);

const schema$5 = constant$1([
        markers$1(['overflowToggledClass']),
        optionFunction('getOverflowBounds'),
        required$1('lazySink'),
        customField('overflowGroups', () => Cell([])),
        onHandler('onOpened'),
        onHandler('onClosed')
    ].concat(schema$6()));
    const parts$5 = constant$1([
        required({
            factory: Toolbar,
            schema: schema$d(),
            name: 'primary'
        }),
        external$1({
            schema: schema$d(),
            name: 'overflow'
        }),
        external$1({
            name: 'overflow-button'
        }),
        external$1({
            name: 'overflow-group'
        })
    ]);

const schema$4 = constant$1([
        required$1('items'),
        markers$1(['itemSelector']),
        field('tgroupBehaviours', [Keying])
    ]);
    const parts$4 = constant$1([
        group({
            name: 'items',
            unit: 'item'
        })
    ]);

const factory$b = (detail, components, _spec, _externals) => ({
        uid: detail.uid,
        dom: detail.dom,
        components,
        behaviours: augment(detail.tgroupBehaviours, [
            Keying.config({
                mode: 'flow',
                selector: detail.markers.itemSelector
            })
        ]),
        domModification: {
            attributes: {
                role: 'toolbar'
            }
        }
    });
    const ToolbarGroup = composite({
        name: 'ToolbarGroup',
        configFields: schema$4(),
        partFields: parts$4(),
        factory: factory$b
    });

const factory$8 = (detail, _spec) => ({
        uid: detail.uid,
        dom: detail.dom,
        components: detail.components,
        events: events(detail.action),
        behaviours: augment(detail.tabButtonBehaviours, [
            Focusing.config({}),
            Keying.config({
                mode: 'execution',
                useSpace: true,
                useEnter: true
            }),
            Representing.config({
                store: {
                    mode: 'memory',
                    initialValue: detail.value
                }
            })
        ]),
        domModification: detail.domModification
    });
    const TabButton = single({
        name: 'TabButton',
        configFields: [
            defaulted('uid', undefined),
            required$1('value'),
            field$1('dom', 'dom', mergeWithThunk(() => ({
                attributes: {
                    'role': 'tab',
                    // NOTE: This is used in TabSection to connect "labelledby"
                    'id': generate$6('aria'),
                    'aria-selected': 'false'
                }
            })), anyValue()),
            option$3('action'),
            defaulted('domModification', {}),
            field('tabButtonBehaviours', [Focusing, Keying, Representing]),
            required$1('view')
        ],
        factory: factory$8
    });

const factory$6 = (detail, _spec) => ({
        uid: detail.uid,
        dom: detail.dom,
        behaviours: augment(detail.tabviewBehaviours, [
            Replacing.config({})
        ]),
        domModification: {
            attributes: { role: 'tabpanel' }
        }
    });
    const Tabview = single({
        name: 'Tabview',
        configFields: [
            field('tabviewBehaviours', [Replacing])
        ],
        factory: factory$6
    });

// When showing a value in an input field, which part of the item do we use?
    const setValueFromItem = (model, input, item) => {
        const itemData = Representing.getValue(item);
        Representing.setValue(input, itemData);
        setCursorAtEnd(input);
    };
    const setSelectionOn = (input, f) => {
        const el = input.element;
        const value = get$5(el);
        const node = el.dom;
        // Only do for valid input types.
        if (get$g(el, 'type') !== 'number') {
            f(node, value);
        }
    };
    const setCursorAtEnd = (input) => {
        setSelectionOn(input, (node, value) => node.setSelectionRange(value.length, value.length));
    };
    const setSelectionToEnd = (input, startOffset) => {
        setSelectionOn(input, (node, value) => node.setSelectionRange(startOffset, value.length));
    };
    const attemptSelectOver = (model, input, item) => {
        if (!model.selectsOver) {
            return Optional.none();
        }
        else {
            const currentValue = Representing.getValue(input);
            const inputDisplay = model.getDisplayText(currentValue);
            const itemValue = Representing.getValue(item);
            const itemDisplay = model.getDisplayText(itemValue);
            return itemDisplay.indexOf(inputDisplay) === 0 ?
                Optional.some(() => {
                    setValueFromItem(model, input, item);
                    setSelectionToEnd(input, inputDisplay.length);
                })
                : Optional.none();
        }
    };

const itemExecute = constant$1('alloy.typeahead.itemexecute');

// TODO: Fix this.
    const make$2 = (detail, components, spec, externals) => {
        const navigateList = (comp, simulatedEvent, highlighter) => {
            /*
             * If we have an open Sandbox with an active menu,
             * but no highlighted item, then highlight the menu
             *
             * If we have an open Sandbox with an active menu,
             * and there is a highlighted item, simulated a keydown
             * on the menu
             *
             * If we have a closed sandbox, open the sandbox
             *
             * Regardless, this is a user initiated action. End previewing.
             */
            detail.previewing.set(false);
            const sandbox = Coupling.getCoupled(comp, 'sandbox');
            if (Sandboxing.isOpen(sandbox)) {
                Composing.getCurrent(sandbox).each((menu) => {
                    Highlighting.getHighlighted(menu).fold(() => {
                        highlighter(menu);
                    }, () => {
                        dispatchEvent(sandbox, menu.element, 'keydown', simulatedEvent);
                    });
                });
            }
            else {
                const onOpenSync = (sandbox) => {
                    Composing.getCurrent(sandbox).each(highlighter);
                };
                open(detail, mapFetch(comp), comp, sandbox, externals, onOpenSync, HighlightOnOpen.HighlightMenuAndItem).get(noop);
            }
        };
        // Due to the fact that typeahead probably need to separate value from text, they can't reuse
        // (easily) the same representing logic as input fields.
        const focusBehaviours$1 = focusBehaviours(detail);
        const mapFetch = (comp) => (tdata) => tdata.map((data) => {
            const menus = values(data.menus);
            const items = bind$3(menus, (menu) => filter$2(menu.items, (item) => item.type === 'item'));
            const repState = Representing.getState(comp);
            repState.update(map$2(items, (item) => item.data));
            return data;
        });
        // This function (getActiveMenu) is intended to make it easier to read what is happening
        // without having to decipher the Highlighting and Composing calls.
        const getActiveMenu = (sandboxComp) => Composing.getCurrent(sandboxComp);
        const typeaheadCustomEvents = 'typeaheadevents';
        const behaviours = [
            Focusing.config({}),
            Representing.config({
                onSetValue: detail.onSetValue,
                store: {
                    mode: 'dataset',
                    getDataKey: (comp) => get$5(comp.element),
                    // This really needs to be configurable
                    getFallbackEntry: (itemString) => ({
                        value: itemString,
                        meta: {}
                    }),
                    setValue: (comp, data) => {
                        set$4(comp.element, detail.model.getDisplayText(data));
                    },
                    ...detail.initialData.map((d) => wrap('initialValue', d)).getOr({})
                }
            }),
            Streaming.config({
                stream: {
                    mode: 'throttle',
                    delay: detail.responseTime,
                    stopEvent: false
                },
                onStream: (component, _simulatedEvent) => {
                    const sandbox = Coupling.getCoupled(component, 'sandbox');
                    const focusInInput = Focusing.isFocused(component);
                    // You don't want it to change when something else has triggered the change.
                    if (focusInInput) {
                        if (get$5(component.element).length >= detail.minChars) {
                            // Get the value of the previously active (selected/highlighted) item. We
                            // are going to try to preserve this.
                            const previousValue = getActiveMenu(sandbox).bind((activeMenu) => Highlighting.getHighlighted(activeMenu).map(Representing.getValue));
                            // Turning previewing ON here every keystroke is unnecessary, but relies
                            // on the fact that it will be turned off if required by highlighting events.
                            // So even if previewing was supposed to be off, turning it on here is
                            // just temporary, because the onOpenSync below will trigger a highlight
                            // if there was meant to be one, which will turn it off if required.
                            detail.previewing.set(true);
                            const onOpenSync = (_sandbox) => {
                                // This getActiveMenu relies on a menu being highlighted / active
                                getActiveMenu(sandbox).each((activeMenu) => {
                                    // The folds can make this hard to follow, but the basic gist of it is
                                    // that we want to see if we need to highlight one of the items in the
                                    // menu that we just opened. If we do highlight an item, then that
                                    // highlighting action will clear previewing (handled by the TieredMenu
                                    // part configuration for onHighlight). Note: that onOpenSync runs
                                    // *after* the highlightOnOpen setting.
                                    //
                                    // 1. If in "selectsOver" mode and we don't have a previous item,
                                    // then highlight the first one. This one will be used as the basis
                                    // for the "selectsOver" text selection. The act of highlighting the
                                    // first item will take us out of previewing mode. If the "selectsOver"
                                    // operation fails, it should clear the highlight, and restore previewing
                                    // 2. If not in "selectsOver" mode, and we don't have a previous item,
                                    // then we don't highlight anything. This will keep us in previewing
                                    // mode until the menu is interacted with (hover, navigation etc.)
                                    // 3. If we have a previous item, then try and rehighlight it. But if
                                    // we can't, the just highlight the first. Either action will take us
                                    // out of previewing mode.
                                    previousValue.fold(() => {
                                        // We are using "selectOver", so we need *something* to highlight
                                        if (detail.model.selectsOver) {
                                            Highlighting.highlightFirst(activeMenu);
                                        }
                                        // We aren't using "selectOver", so don't highlight anything
                                        // to preserve our "previewing" mode.
                                    }, (pv) => {
                                        // We have a previous item, so if we can't rehighlight it, then
                                        // we'll change to the first item. We want to keep some selection.
                                        Highlighting.highlightBy(activeMenu, (item) => {
                                            const itemData = Representing.getValue(item);
                                            return itemData.value === pv.value;
                                        });
                                        // Highlight first if could not find it?
                                        Highlighting.getHighlighted(activeMenu).orThunk(() => {
                                            Highlighting.highlightFirst(activeMenu);
                                            return Optional.none();
                                        });
                                    });
                                });
                            };
                            open(detail, mapFetch(component), component, sandbox, externals, onOpenSync, 
                            // The onOpenSync takes care of what should be given the highlights, but
                            // we want to highlight just the menu so that the onOpenSync can find the
                            // activeMenu.
                            HighlightOnOpen.HighlightJustMenu).get(noop);
                        }
                    }
                },
                cancelEvent: typeaheadCancel()
            }),
            Keying.config({
                mode: 'special',
                onDown: (comp, simulatedEvent) => {
                    // The navigation here will stop the "previewing" mode, because
                    // now the menu will get focus (fake focus, but focus nevertheless)
                    navigateList(comp, simulatedEvent, Highlighting.highlightFirst);
                    return Optional.some(true);
                },
                onEscape: (comp) => {
                    // Escape only has handling if the sandbox is visible. It has no meaning
                    // to the input itself.
                    const sandbox = Coupling.getCoupled(comp, 'sandbox');
                    if (Sandboxing.isOpen(sandbox)) {
                        Sandboxing.close(sandbox);
                        return Optional.some(true);
                    }
                    return Optional.none();
                },
                onUp: (comp, simulatedEvent) => {
                    // The navigation here will stop the "previewing" mode, because
                    // now the menu will get focus (fake focus, but focus nevertheless)
                    navigateList(comp, simulatedEvent, Highlighting.highlightLast);
                    return Optional.some(true);
                },
                onEnter: (comp) => {
                    const sandbox = Coupling.getCoupled(comp, 'sandbox');
                    const sandboxIsOpen = Sandboxing.isOpen(sandbox);
                    // 'Previewing' means that items are shown but none has been actively selected by the user.
                    // When previewing, all keyboard input should still be processed by the
                    // input itself, not the menu. The menu is not considered to have focus.
                    // 'Previewing' is turned on by (streaming) keystrokes, and turned off by
                    // successful interaction with the menu (navigation, highlighting, hovering).
                    // So if we aren't previewing, and the dropdown sandbox is open, then
                    // we process <enter> keys on the items in the menu. All this will do
                    // is trigger an itemExecute event. The typeahead events (in the spec below)
                    // are responsible for doing something with that event.
                    if (sandboxIsOpen && !detail.previewing.get()) {
                        return getActiveMenu(sandbox).bind((activeMenu) => Highlighting.getHighlighted(activeMenu)).map((item) => {
                            // And item was selected, so trigger execute and consider the
                            // <enter> key 'handled'
                            emitWith(comp, itemExecute(), { item });
                            return true;
                        });
                    }
                    else {
                        // We are either previewing, or the sandbox isn't open, so we should
                        // process the <enter> key inside the input itself. This should cancel
                        // any attempt to fetch data (the typeaheadCancel), and trigger the execute.
                        // We also close the sandbox if it's open.
                        const currentValue = Representing.getValue(comp);
                        emit(comp, typeaheadCancel());
                        detail.onExecute(sandbox, comp, currentValue);
                        // If we're open and previewing, close the sandbox after firing execute.
                        if (sandboxIsOpen) {
                            Sandboxing.close(sandbox);
                        }
                        return Optional.some(true);
                    }
                }
            }),
            Toggling.config({
                toggleClass: detail.markers.openClass,
                aria: {
                    mode: 'expanded'
                }
            }),
            Coupling.config({
                others: {
                    sandbox: (hotspot) => {
                        return makeSandbox$1(detail, hotspot, {
                            onOpen: () => Toggling.on(hotspot),
                            onClose: () => {
                                // TINY-9280: Remove aria-activedescendant that is set when menu item is highlighted
                                detail.lazyTypeaheadComp.get().each((input) => remove$8(input.element, 'aria-activedescendant'));
                                Toggling.off(hotspot);
                            }
                        });
                    }
                }
            }),
            config(typeaheadCustomEvents, [
                runOnAttached((typeaheadComp) => {
                    // Set up the reference to the typeahead, so that it can retrieved from
                    // the tiered menu part, even if the tieredmenu is in a different
                    // system / alloy root / mothership.
                    detail.lazyTypeaheadComp.set(Optional.some(typeaheadComp));
                }),
                runOnDetached((_typeaheadComp) => {
                    detail.lazyTypeaheadComp.set(Optional.none());
                }),
                runOnExecute$1((comp) => {
                    const onOpenSync = noop;
                    togglePopup(detail, mapFetch(comp), comp, externals, onOpenSync, HighlightOnOpen.HighlightMenuAndItem).get(noop);
                }),
                run$1(itemExecute(), (comp, se) => {
                    const sandbox = Coupling.getCoupled(comp, 'sandbox');
                    // Copy the value from the executed item into the input, because it was "chosen"
                    setValueFromItem(detail.model, comp, se.event.item);
                    emit(comp, typeaheadCancel());
                    detail.onItemExecute(comp, sandbox, se.event.item, Representing.getValue(comp));
                    Sandboxing.close(sandbox);
                    setCursorAtEnd(comp);
                })
            ].concat(detail.dismissOnBlur ? [
                run$1(postBlur(), (typeahead) => {
                    const sandbox = Coupling.getCoupled(typeahead, 'sandbox');
                    // Only close the sandbox if the focus isn't inside it!
                    if (search(sandbox.element).isNone()) {
                        Sandboxing.close(sandbox);
                    }
                })
            ] : []))
        ];
        // The order specified here isn't important. Alloy just requires a
        // deterministic order for the configured behaviours.
        const eventOrder = {
            [detachedFromDom()]: [
                Representing.name(),
                Streaming.name(),
                typeaheadCustomEvents
            ],
            ...detail.eventOrder,
        };
        return {
            uid: detail.uid,
            dom: dom$1(deepMerge(detail, {
                // TODO: Add aria-activedescendant attribute
                inputAttributes: {
                    'role': 'combobox',
                    'aria-autocomplete': 'list',
                    'aria-haspopup': 'true'
                }
            })),
            behaviours: {
                ...focusBehaviours$1,
                ...augment(detail.typeaheadBehaviours, behaviours)
            },
            eventOrder
        };
    };

const Typeahead = composite({
        name: 'Typeahead',
        configFields: schema(),
        partFields: parts(),
        factory: make$2
    });

var global$b = tinymce.util.Tools.resolve('tinymce.ThemeManager');

var global$a = tinymce.util.Tools.resolve('tinymce.util.Delay');

var global$9 = tinymce.util.Tools.resolve('tinymce.dom.DOMUtils');

var global$8 = tinymce.util.Tools.resolve('tinymce.EditorManager');

var global$7 = tinymce.util.Tools.resolve('tinymce.Env');

var ToolbarMode$1;
    (function (ToolbarMode) {
        ToolbarMode["default"] = "wrap";
        ToolbarMode["floating"] = "floating";
        ToolbarMode["sliding"] = "sliding";
        ToolbarMode["scrolling"] = "scrolling";
    })(ToolbarMode$1 || (ToolbarMode$1 = {}));
    var ToolbarLocation$1;
    (function (ToolbarLocation) {
        ToolbarLocation["auto"] = "auto";
        ToolbarLocation["top"] = "top";
        ToolbarLocation["bottom"] = "bottom";
    })(ToolbarLocation$1 || (ToolbarLocation$1 = {}));
    const option$2 = (name) => (editor) => editor.options.get(name);
    const wrapOptional = (fn) => (editor) => Optional.from(fn(editor));
    const register$f = (editor) => {
        const isPhone = global$7.deviceType.isPhone();
        const isMobile = global$7.deviceType.isTablet() || isPhone;
        const registerOption = editor.options.register;
        const stringOrFalseProcessor = (value) => isString(value) || value === false;
        const stringOrNumberProcessor = (value) => isString(value) || isNumber(value);
        registerOption('skin', {
            processor: (value) => isString(value) || value === false,
            default: 'oxide'
        });
        registerOption('skin_url', {
            processor: 'string'
        });
        registerOption('height', {
            processor: stringOrNumberProcessor,
            default: Math.max(editor.getElement().offsetHeight, 400)
        });
        registerOption('width', {
            processor: stringOrNumberProcessor,
            default: global$9.DOM.getStyle(editor.getElement(), 'width')
        });
        registerOption('min_height', {
            processor: 'number',
            default: 100
        });
        registerOption('min_width', {
            processor: 'number'
        });
        registerOption('max_height', {
            processor: 'number'
        });
        registerOption('max_width', {
            processor: 'number'
        });
        registerOption('style_formats', {
            processor: 'object[]'
        });
        registerOption('style_formats_merge', {
            processor: 'boolean',
            default: false
        });
        registerOption('style_formats_autohide', {
            processor: 'boolean',
            default: false
        });
        registerOption('line_height_formats', {
            processor: 'string',
            default: '1 1.1 1.2 1.3 1.4 1.5 2'
        });
        registerOption('font_family_formats', {
            processor: 'string',
            default: 'Andale Mono=andale mono,monospace;' +
                'Arial=arial,helvetica,sans-serif;' +
                'Arial Black=arial black,sans-serif;' +
                'Book Antiqua=book antiqua,palatino,serif;' +
                'Comic Sans MS=comic sans ms,sans-serif;' +
                'Courier New=courier new,courier,monospace;' +
                'Georgia=georgia,palatino,serif;' +
                'Helvetica=helvetica,arial,sans-serif;' +
                'Impact=impact,sans-serif;' +
                'Symbol=symbol;' +
                'Tahoma=tahoma,arial,helvetica,sans-serif;' +
                'Terminal=terminal,monaco,monospace;' +
                'Times New Roman=times new roman,times,serif;' +
                'Trebuchet MS=trebuchet ms,geneva,sans-serif;' +
                'Verdana=verdana,geneva,sans-serif;' +
                'Webdings=webdings;' +
                'Wingdings=wingdings,zapf dingbats'
        });
        registerOption('font_size_formats', {
            processor: 'string',
            default: '8pt 10pt 12pt 14pt 18pt 24pt 36pt'
        });
        registerOption('font_size_input_default_unit', {
            processor: 'string',
            default: 'pt'
        });
        registerOption('block_formats', {
            processor: 'string',
            default: 'Paragraph=p;' +
                'Heading 1=h1;' +
                'Heading 2=h2;' +
                'Heading 3=h3;' +
                'Heading 4=h4;' +
                'Heading 5=h5;' +
                'Heading 6=h6;' +
                'Preformatted=pre'
        });
        registerOption('content_langs', {
            processor: 'object[]'
        });
        registerOption('removed_menuitems', {
            processor: 'string',
            default: ''
        });
        registerOption('menubar', {
            processor: (value) => isString(value) || isBoolean(value),
            // Phones don't have a lot of screen space so disable the menubar
            default: !isPhone
        });
        registerOption('menu', {
            processor: 'object',
            default: {}
        });
        registerOption('toolbar', {
            processor: (value) => {
                if (isBoolean(value) || isString(value) || isArray(value)) {
                    return { value, valid: true };
                }
                else {
                    return { valid: false, message: 'Must be a boolean, string or array.' };
                }
            },
            default: true
        });
        // Register the toolbarN variations: toolbar1 -> toolbar9
        range$2(9, (num) => {
            registerOption('toolbar' + (num + 1), {
                processor: 'string'
            });
        });
        registerOption('toolbar_mode', {
            processor: 'string',
            // Use the default side-scrolling toolbar for tablets/phones
            default: isMobile ? 'scrolling' : 'floating'
        });
        registerOption('toolbar_groups', {
            processor: 'object',
            default: {}
        });
        registerOption('toolbar_location', {
            processor: 'string',
            default: ToolbarLocation$1.auto
        });
        registerOption('toolbar_persist', {
            processor: 'boolean',
            default: false
        });
        registerOption('toolbar_sticky', {
            processor: 'boolean',
            default: editor.inline
        });
        registerOption('toolbar_sticky_offset', {
            processor: 'number',
            default: 0
        });
        registerOption('fixed_toolbar_container', {
            processor: 'string',
            default: ''
        });
        registerOption('fixed_toolbar_container_target', {
            processor: 'object'
        });
        registerOption('ui_mode', {
            processor: 'string',
            default: 'combined'
        });
        registerOption('file_picker_callback', {
            processor: 'function'
        });
        registerOption('file_picker_validator_handler', {
            processor: 'function'
        });
        registerOption('file_picker_types', {
            processor: 'string'
        });
        registerOption('typeahead_urls', {
            processor: 'boolean',
            default: true
        });
        registerOption('anchor_top', {
            processor: stringOrFalseProcessor,
            default: '#top'
        });
        registerOption('anchor_bottom', {
            processor: stringOrFalseProcessor,
            default: '#bottom'
        });
        registerOption('draggable_modal', {
            processor: 'boolean',
            default: false
        });
        registerOption('statusbar', {
            processor: 'boolean',
            default: true
        });
        registerOption('elementpath', {
            processor: 'boolean',
            default: true
        });
        registerOption('branding', {
            processor: 'boolean',
            default: true
        });
        registerOption('promotion', {
            processor: 'boolean',
            default: true
        });
        registerOption('resize', {
            processor: (value) => value === 'both' || isBoolean(value),
            // Editor resize doesn't work on touch devices at this stage
            default: !global$7.deviceType.isTouch()
        });
        registerOption('sidebar_show', {
            processor: 'string'
        });
        // This option is being registered in the theme instead of the help plugin as it cannot be accessed from the theme when registered there
        registerOption('help_accessibility', {
            processor: 'boolean',
            default: editor.hasPlugin('help')
        });
        registerOption('default_font_stack', {
            processor: 'string[]',
            default: []
        });
    };
    const isReadOnly = option$2('readonly');
    const isDisabled = option$2('disabled');
    const getHeightOption = option$2('height');
    const getWidthOption = option$2('width');
    const getMinWidthOption = wrapOptional(option$2('min_width'));
    const getMinHeightOption = wrapOptional(option$2('min_height'));
    const getMaxWidthOption = wrapOptional(option$2('max_width'));
    const getMaxHeightOption = wrapOptional(option$2('max_height'));
    const getUserStyleFormats = wrapOptional(option$2('style_formats'));
    const shouldMergeStyleFormats = option$2('style_formats_merge');
    const shouldAutoHideStyleFormats = option$2('style_formats_autohide');
    const getContentLanguages = option$2('content_langs');
    const getRemovedMenuItems = option$2('removed_menuitems');
    const getToolbarMode = option$2('toolbar_mode');
    const getToolbarGroups = option$2('toolbar_groups');
    const getToolbarLocation = option$2('toolbar_location');
    const fixedContainerSelector = option$2('fixed_toolbar_container');
    const fixedToolbarContainerTarget = option$2('fixed_toolbar_container_target');
    const isToolbarPersist = option$2('toolbar_persist');
    const getStickyToolbarOffset = option$2('toolbar_sticky_offset');
    const getMenubar = option$2('menubar');
    const getToolbar = option$2('toolbar');
    const getFilePickerCallback = option$2('file_picker_callback');
    const getFilePickerValidatorHandler = option$2('file_picker_validator_handler');
    const getFontSizeInputDefaultUnit = option$2('font_size_input_default_unit');
    const getFilePickerTypes = option$2('file_picker_types');
    const useTypeaheadUrls = option$2('typeahead_urls');
    const getAnchorTop = option$2('anchor_top');
    const getAnchorBottom = option$2('anchor_bottom');
    const isDraggableModal$1 = option$2('draggable_modal');
    const useStatusBar = option$2('statusbar');
    const useElementPath = option$2('elementpath');
    const useBranding = option$2('branding');
    const getResize = option$2('resize');
    const getPasteAsText = option$2('paste_as_text');
    const getSidebarShow = option$2('sidebar_show');
    const promotionEnabled = option$2('promotion');
    const useHelpAccessibility = option$2('help_accessibility');
    const getDefaultFontStack = option$2('default_font_stack');
    const getSkin = option$2('skin');
    const isSkinDisabled = (editor) => editor.options.get('skin') === false;
    const isMenubarEnabled = (editor) => editor.options.get('menubar') !== false;
    const getSkinUrl = (editor) => {
        const skinUrl = editor.options.get('skin_url');
        if (isSkinDisabled(editor)) {
            return skinUrl;
        }
        else {
            if (skinUrl) {
                return editor.documentBaseURI.toAbsolute(skinUrl);
            }
            else {
                const skin = editor.options.get('skin');
                return global$8.baseURL + '/skins/ui/' + skin;
            }
        }
    };
    const getSkinUrlOption = (editor) => Optional.from(editor.options.get('skin_url'));
    const getLineHeightFormats = (editor) => editor.options.get('line_height_formats').split(' ');
    const isToolbarEnabled = (editor) => {
        const toolbar = getToolbar(editor);
        const isToolbarString = isString(toolbar);
        const isToolbarObjectArray = isArray(toolbar) && toolbar.length > 0;
        // Toolbar is enabled if its value is true, a string or non-empty object array, but not string array
        return !isMultipleToolbars(editor) && (isToolbarObjectArray || isToolbarString || toolbar === true);
    };
    // Convert toolbar<n> into toolbars array
    const getMultipleToolbarsOption = (editor) => {
        const toolbars = range$2(9, (num) => editor.options.get('toolbar' + (num + 1)));
        const toolbarArray = filter$2(toolbars, isString);
        return someIf(toolbarArray.length > 0, toolbarArray);
    };
    // Check if multiple toolbars is enabled
    // Multiple toolbars is enabled if toolbar value is a string array or if toolbar<n> is present
    const isMultipleToolbars = (editor) => getMultipleToolbarsOption(editor).fold(() => {
        const toolbar = getToolbar(editor);
        return isArrayOf(toolbar, isString) && toolbar.length > 0;
    }, always);
    const isToolbarLocationBottom = (editor) => getToolbarLocation(editor) === ToolbarLocation$1.bottom;
    const fixedContainerTarget = (editor) => {
        if (!editor.inline) {
            // fixed_toolbar_container(_target) is only available in inline mode
            return Optional.none();
        }
        const selector = fixedContainerSelector(editor) ?? '';
        if (selector.length > 0) {
            // If we have a valid selector
            return descendant(body(), selector);
        }
        const element = fixedToolbarContainerTarget(editor);
        if (isNonNullable(element)) {
            // If we have a valid target
            return Optional.some(SugarElement.fromDom(element));
        }
        return Optional.none();
    };
    const useFixedContainer = (editor) => editor.inline && fixedContainerTarget(editor).isSome();
    const getUiContainer = (editor) => {
        const fixedContainer = fixedContainerTarget(editor);
        return fixedContainer.getOrThunk(() => getContentContainer(getRootNode(SugarElement.fromDom(editor.getElement()))));
    };
    const isDistractionFree = (editor) => editor.inline && !isMenubarEnabled(editor) && !isToolbarEnabled(editor) && !isMultipleToolbars(editor);
    const isStickyToolbar = (editor) => {
        const isStickyToolbar = editor.options.get('toolbar_sticky');
        return (isStickyToolbar || editor.inline) && !useFixedContainer(editor) && !isDistractionFree(editor);
    };
    const isSplitUiMode = (editor) => !useFixedContainer(editor) && editor.options.get('ui_mode') === 'split';
    const getMenus = (editor) => {
        const menu = editor.options.get('menu');
        return map$1(menu, (menu) => ({ ...menu, items: menu.items }));
    };

// See https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container for what makes an element scrollable
    const nonScrollingOverflows = ['visible', 'hidden', 'clip'];
    const isScrollingOverflowValue = (value) => trim$1(value).length > 0 && !contains$2(nonScrollingOverflows, value);
    const isScroller = (elem) => {
        if (isHTMLElement(elem)) {
            const overflowX = get$e(elem, 'overflow-x');
            const overflowY = get$e(elem, 'overflow-y');
            return isScrollingOverflowValue(overflowX) || isScrollingOverflowValue(overflowY);
        }
        else {
            return false;
        }
    };
    const isFullscreen = (editor) => editor.plugins.fullscreen && editor.plugins.fullscreen.isFullscreen();
    // NOTE: Calculating the list of scrolling ancestors each time this function is called might
    // be unnecessary. It will depend on its usage.
    const detect = (editor, popupSinkElem) => {
        const ancestorsScrollers = ancestors(popupSinkElem, isScroller);
        // If there is no scrollable container, we try to see if it's in a shadow root, and try to traverse beyond the host of shadow root to retrieve the scrollable container
        // If it is not within a ShadowRoot, since if there's a scrollable container as the ancestors, then it would not execute the code below, or return an empty array if it's not in a ShadowRoot
        const scrollers = ancestorsScrollers.length === 0
            ? getShadowRoot(popupSinkElem).map(getShadowHost).map((x) => ancestors(x, isScroller)).getOr([])
            : ancestorsScrollers;
        return head(scrollers)
            .map((element) => ({
            element,
            // A list of all scrolling elements above the nearest scroller,
            // ordered from closest to popup -> closest to top of document
            others: scrollers.slice(1),
            isFullscreen: () => isFullscreen(editor)
        }));
    };
    const detectWhenSplitUiMode = (editor, popupSinkElem) => isSplitUiMode(editor) ? detect(editor, popupSinkElem) : Optional.none();
    // Using all the scrolling viewports in the ancestry, limit the absolute
    // coordinates of window so that the bounds are limited by all the scrolling
    // viewports.
    const getBoundsFrom = (sc) => {
        const scrollableBoxes = [
            // sc.element is the main scroller, others are *additional* scrollers above that
            // we need to combine all of them to constrain the bounds
            ...map$2(sc.others, box$1),
            win()
        ];
        return sc.isFullscreen() ? win() : constrainByMany(box$1(sc.element), scrollableBoxes);
    };

/*! @license DOMPurify 3.2.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.6/LICENSE */

const {
      entries,
      setPrototypeOf,
      isFrozen,
      getPrototypeOf,
      getOwnPropertyDescriptor
    } = Object;
    let {
      freeze,
      seal,
      create: create$1
    } = Object; // eslint-disable-line import/no-mutable-exports
    let {
      apply,
      construct
    } = typeof Reflect !== 'undefined' && Reflect;
    if (!freeze) {
      freeze = function freeze(x) {
        return x;
      };
    }
    if (!seal) {
      seal = function seal(x) {
        return x;
      };
    }
    if (!apply) {
      apply = function apply(fun, thisValue, args) {
        return fun.apply(thisValue, args);
      };
    }
    if (!construct) {
      construct = function construct(Func, args) {
        return new Func(...args);
      };
    }
    const arrayForEach = unapply(Array.prototype.forEach);
    const arrayLastIndexOf = unapply(Array.prototype.lastIndexOf);
    const arrayPop = unapply(Array.prototype.pop);
    const arrayPush = unapply(Array.prototype.push);
    const arraySplice = unapply(Array.prototype.splice);
    const stringToLowerCase = unapply(String.prototype.toLowerCase);
    const stringToString = unapply(String.prototype.toString);
    const stringMatch = unapply(String.prototype.match);
    const stringReplace = unapply(String.prototype.replace);
    const stringIndexOf = unapply(String.prototype.indexOf);
    const stringTrim = unapply(String.prototype.trim);
    const objectHasOwnProperty = unapply(Object.prototype.hasOwnProperty);
    const regExpTest = unapply(RegExp.prototype.test);
    const typeErrorCreate = unconstruct(TypeError);
    /**
     * Creates a new function that calls the given function with a specified thisArg and arguments.
     *
     * @param func - The function to be wrapped and called.
     * @returns A new function that calls the given function with a specified thisArg and arguments.
     */
    function unapply(func) {
      return function (thisArg) {
        if (thisArg instanceof RegExp) {
          thisArg.lastIndex = 0;
        }
        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
          args[_key - 1] = arguments[_key];
        }
        return apply(func, thisArg, args);
      };
    }
    /**
     * Creates a new function that constructs an instance of the given constructor function with the provided arguments.
     *
     * @param func - The constructor function to be wrapped and called.
     * @returns A new function that constructs an instance of the given constructor function with the provided arguments.
     */
    function unconstruct(func) {
      return function () {
        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
          args[_key2] = arguments[_key2];
        }
        return construct(func, args);
      };
    }
    /**
     * Add properties to a lookup table
     *
     * @param set - The set to which elements will be added.
     * @param array - The array containing elements to be added to the set.
     * @param transformCaseFunc - An optional function to transform the case of each element before adding to the set.
     * @returns The modified set with added elements.
     */
    function addToSet(set, array) {
      let transformCaseFunc = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : stringToLowerCase;
      if (setPrototypeOf) {
        // Make 'in' and truthy checks like Boolean(set.constructor)
        // independent of any properties defined on Object.prototype.
        // Prevent prototype setters from intercepting set as a this value.
        setPrototypeOf(set, null);
      }
      let l = array.length;
      while (l--) {
        let element = array[l];
        if (typeof element === 'string') {
          const lcElement = transformCaseFunc(element);
          if (lcElement !== element) {
            // Config presets (e.g. tags.js, attrs.js) are immutable.
            if (!isFrozen(array)) {
              array[l] = lcElement;
            }
            element = lcElement;
          }
        }
        set[element] = true;
      }
      return set;
    }
    /**
     * Clean up an array to harden against CSPP
     *
     * @param array - The array to be cleaned.
     * @returns The cleaned version of the array
     */
    function cleanArray(array) {
      for (let index = 0; index < array.length; index++) {
        const isPropertyExist = objectHasOwnProperty(array, index);
        if (!isPropertyExist) {
          array[index] = null;
        }
      }
      return array;
    }
    /**
     * Shallow clone an object
     *
     * @param object - The object to be cloned.
     * @returns A new object that copies the original.
     */
    function clone(object) {
      const newObject = create$1(null);
      for (const [property, value] of entries(object)) {
        const isPropertyExist = objectHasOwnProperty(object, property);
        if (isPropertyExist) {
          if (Array.isArray(value)) {
            newObject[property] = cleanArray(value);
          } else if (value && typeof value === 'object' && value.constructor === Object) {
            newObject[property] = clone(value);
          } else {
            newObject[property] = value;
          }
        }
      }
      return newObject;
    }
    /**
     * This method automatically checks if the prop is function or getter and behaves accordingly.
     *
     * @param object - The object to look up the getter function in its prototype chain.
     * @param prop - The property name for which to find the getter function.
     * @returns The getter function found in the prototype chain or a fallback function.
     */
    function lookupGetter(object, prop) {
      while (object !== null) {
        const desc = getOwnPropertyDescriptor(object, prop);
        if (desc) {
          if (desc.get) {
            return unapply(desc.get);
          }
          if (typeof desc.value === 'function') {
            return unapply(desc.value);
          }
        }
        object = getPrototypeOf(object);
      }
      function fallbackValue() {
        return null;
      }
      return fallbackValue;
    }

const html$1 = freeze(['a', 'abbr', 'acronym', 'address', 'area', 'article', 'aside', 'audio', 'b', 'bdi', 'bdo', 'big', 'blink', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'center', 'cite', 'code', 'col', 'colgroup', 'content', 'data', 'datalist', 'dd', 'decorator', 'del', 'details', 'dfn', 'dialog', 'dir', 'div', 'dl', 'dt', 'element', 'em', 'fieldset', 'figcaption', 'figure', 'font', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'i', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'main', 'map', 'mark', 'marquee', 'menu', 'menuitem', 'meter', 'nav', 'nobr', 'ol', 'optgroup', 'option', 'output', 'p', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'section', 'select', 'shadow', 'small', 'source', 'spacer', 'span', 'strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'tr', 'track', 'tt', 'u', 'ul', 'var', 'video', 'wbr']);
    const svg$1 = freeze(['svg', 'a', 'altglyph', 'altglyphdef', 'altglyphitem', 'animatecolor', 'animatemotion', 'animatetransform', 'circle', 'clippath', 'defs', 'desc', 'ellipse', 'filter', 'font', 'g', 'glyph', 'glyphref', 'hkern', 'image', 'line', 'lineargradient', 'marker', 'mask', 'metadata', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialgradient', 'rect', 'stop', 'style', 'switch', 'symbol', 'text', 'textpath', 'title', 'tref', 'tspan', 'view', 'vkern']);
    const svgFilters = freeze(['feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence']);
    // List of SVG elements that are disallowed by default.
    // We still need to know them so that we can do namespace
    // checks properly in case one wants to add them to
    // allow-list.
    const svgDisallowed = freeze(['animate', 'color-profile', 'cursor', 'discard', 'font-face', 'font-face-format', 'font-face-name', 'font-face-src', 'font-face-uri', 'foreignobject', 'hatch', 'hatchpath', 'mesh', 'meshgradient', 'meshpatch', 'meshrow', 'missing-glyph', 'script', 'set', 'solidcolor', 'unknown', 'use']);
    const mathMl$1 = freeze(['math', 'menclose', 'merror', 'mfenced', 'mfrac', 'mglyph', 'mi', 'mlabeledtr', 'mmultiscripts', 'mn', 'mo', 'mover', 'mpadded', 'mphantom', 'mroot', 'mrow', 'ms', 'mspace', 'msqrt', 'mstyle', 'msub', 'msup', 'msubsup', 'mtable', 'mtd', 'mtext', 'mtr', 'munder', 'munderover', 'mprescripts']);
    // Similarly to SVG, we want to know all MathML elements,
    // even those that we disallow by default.
    const mathMlDisallowed = freeze(['maction', 'maligngroup', 'malignmark', 'mlongdiv', 'mscarries', 'mscarry', 'msgroup', 'mstack', 'msline', 'msrow', 'semantics', 'annotation', 'annotation-xml', 'mprescripts', 'none']);
    const text$1 = freeze(['#text']);

const html = freeze(['accept', 'action', 'align', 'alt', 'autocapitalize', 'autocomplete', 'autopictureinpicture', 'autoplay', 'background', 'bgcolor', 'border', 'capture', 'cellpadding', 'cellspacing', 'checked', 'cite', 'class', 'clear', 'color', 'cols', 'colspan', 'controls', 'controlslist', 'coords', 'crossorigin', 'datetime', 'decoding', 'default', 'dir', 'disabled', 'disablepictureinpicture', 'disableremoteplayback', 'download', 'draggable', 'enctype', 'enterkeyhint', 'face', 'for', 'headers', 'height', 'hidden', 'high', 'href', 'hreflang', 'id', 'inputmode', 'integrity', 'ismap', 'kind', 'label', 'lang', 'list', 'loading', 'loop', 'low', 'max', 'maxlength', 'media', 'method', 'min', 'minlength', 'multiple', 'muted', 'name', 'nonce', 'noshade', 'novalidate', 'nowrap', 'open', 'optimum', 'pattern', 'placeholder', 'playsinline', 'popover', 'popovertarget', 'popovertargetaction', 'poster', 'preload', 'pubdate', 'radiogroup', 'readonly', 'rel', 'required', 'rev', 'reversed', 'role', 'rows', 'rowspan', 'spellcheck', 'scope', 'selected', 'shape', 'size', 'sizes', 'span', 'srclang', 'start', 'src', 'srcset', 'step', 'style', 'summary', 'tabindex', 'title', 'translate', 'type', 'usemap', 'valign', 'value', 'width', 'wrap', 'xmlns', 'slot']);
    const svg = freeze(['accent-height', 'accumulate', 'additive', 'alignment-baseline', 'amplitude', 'ascent', 'attributename', 'attributetype', 'azimuth', 'basefrequency', 'baseline-shift', 'begin', 'bias', 'by', 'class', 'clip', 'clippathunits', 'clip-path', 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'cx', 'cy', 'd', 'dx', 'dy', 'diffuseconstant', 'direction', 'display', 'divisor', 'dur', 'edgemode', 'elevation', 'end', 'exponent', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'filterunits', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'fx', 'fy', 'g1', 'g2', 'glyph-name', 'glyphref', 'gradientunits', 'gradienttransform', 'height', 'href', 'id', 'image-rendering', 'in', 'in2', 'intercept', 'k', 'k1', 'k2', 'k3', 'k4', 'kerning', 'keypoints', 'keysplines', 'keytimes', 'lang', 'lengthadjust', 'letter-spacing', 'kernelmatrix', 'kernelunitlength', 'lighting-color', 'local', 'marker-end', 'marker-mid', 'marker-start', 'markerheight', 'markerunits', 'markerwidth', 'maskcontentunits', 'maskunits', 'max', 'mask', 'media', 'method', 'mode', 'min', 'name', 'numoctaves', 'offset', 'operator', 'opacity', 'order', 'orient', 'orientation', 'origin', 'overflow', 'paint-order', 'path', 'pathlength', 'patterncontentunits', 'patterntransform', 'patternunits', 'points', 'preservealpha', 'preserveaspectratio', 'primitiveunits', 'r', 'rx', 'ry', 'radius', 'refx', 'refy', 'repeatcount', 'repeatdur', 'restart', 'result', 'rotate', 'scale', 'seed', 'shape-rendering', 'slope', 'specularconstant', 'specularexponent', 'spreadmethod', 'startoffset', 'stddeviation', 'stitchtiles', 'stop-color', 'stop-opacity', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke', 'stroke-width', 'style', 'surfacescale', 'systemlanguage', 'tabindex', 'tablevalues', 'targetx', 'targety', 'transform', 'transform-origin', 'text-anchor', 'text-decoration', 'text-rendering', 'textlength', 'type', 'u1', 'u2', 'unicode', 'values', 'viewbox', 'visibility', 'version', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'width', 'word-spacing', 'wrap', 'writing-mode', 'xchannelselector', 'ychannelselector', 'x', 'x1', 'x2', 'xmlns', 'y', 'y1', 'y2', 'z', 'zoomandpan']);
    const mathMl = freeze(['accent', 'accentunder', 'align', 'bevelled', 'close', 'columnsalign', 'columnlines', 'columnspan', 'denomalign', 'depth', 'dir', 'display', 'displaystyle', 'encoding', 'fence', 'frame', 'height', 'href', 'id', 'largeop', 'length', 'linethickness', 'lspace', 'lquote', 'mathbackground', 'mathcolor', 'mathsize', 'mathvariant', 'maxsize', 'minsize', 'movablelimits', 'notation', 'numalign', 'open', 'rowalign', 'rowlines', 'rowspacing', 'rowspan', 'rspace', 'rquote', 'scriptlevel', 'scriptminsize', 'scriptsizemultiplier', 'selection', 'separator', 'separators', 'stretchy', 'subscriptshift', 'supscriptshift', 'symmetric', 'voffset', 'width', 'xmlns']);
    const xml = freeze(['xlink:href', 'xml:id', 'xlink:title', 'xml:space', 'xmlns:xlink']);

// eslint-disable-next-line unicorn/better-regex
    const MUSTACHE_EXPR = seal(/\{\{[\w\W]*|[\w\W]*\}\}/gm); // Specify template detection regex for SAFE_FOR_TEMPLATES mode
    const ERB_EXPR = seal(/<%[\w\W]*|[\w\W]*%>/gm);
    const TMPLIT_EXPR = seal(/\$\{[\w\W]*/gm); // eslint-disable-line unicorn/better-regex
    const DATA_ATTR = seal(/^data-[\-\w.\u00B7-\uFFFF]+$/); // eslint-disable-line no-useless-escape
    const ARIA_ATTR = seal(/^aria-[\-\w]+$/); // eslint-disable-line no-useless-escape
    const IS_ALLOWED_URI = seal(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i // eslint-disable-line no-useless-escape
    );
    const IS_SCRIPT_OR_DATA = seal(/^(?:\w+script|data):/i);
    const ATTR_WHITESPACE = seal(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g // eslint-disable-line no-control-regex
    );
    const DOCTYPE_NAME = seal(/^html$/i);
    const CUSTOM_ELEMENT = seal(/^[a-z][.\w]*(-[.\w]+)+$/i);

var EXPRESSIONS = /*#__PURE__*/Object.freeze({
      __proto__: null,
      ARIA_ATTR: ARIA_ATTR,
      ATTR_WHITESPACE: ATTR_WHITESPACE,
      CUSTOM_ELEMENT: CUSTOM_ELEMENT,
      DATA_ATTR: DATA_ATTR,
      DOCTYPE_NAME: DOCTYPE_NAME,
      ERB_EXPR: ERB_EXPR,
      IS_ALLOWED_URI: IS_ALLOWED_URI,
      IS_SCRIPT_OR_DATA: IS_SCRIPT_OR_DATA,
      MUSTACHE_EXPR: MUSTACHE_EXPR,
      TMPLIT_EXPR: TMPLIT_EXPR
    });

/* eslint-disable @typescript-eslint/indent */
    // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
    const NODE_TYPE = {
      element: 1,
      attribute: 2,
      text: 3,
      cdataSection: 4,
      entityReference: 5,
      // Deprecated
      entityNode: 6,
      // Deprecated
      progressingInstruction: 7,
      comment: 8,
      document: 9,
      documentType: 10,
      documentFragment: 11,
      notation: 12 // Deprecated
    };
    const getGlobal = function getGlobal() {
      return typeof window === 'undefined' ? null : window;
    };
    /**
     * Creates a no-op policy for internal use only.
     * Don't export this function outside this module!
     * @param trustedTypes The policy factory.
     * @param purifyHostElement The Script element used to load DOMPurify (to determine policy name suffix).
     * @return The policy created (or null, if Trusted Types
     * are not supported or creating the policy failed).
     */
    const _createTrustedTypesPolicy = function _createTrustedTypesPolicy(trustedTypes, purifyHostElement) {
      if (typeof trustedTypes !== 'object' || typeof trustedTypes.createPolicy !== 'function') {
        return null;
      }
      // Allow the callers to control the unique policy name
      // by adding a data-tt-policy-suffix to the script element with the DOMPurify.
      // Policy creation with duplicate names throws in Trusted Types.
      let suffix = null;
      const ATTR_NAME = 'data-tt-policy-suffix';
      if (purifyHostElement && purifyHostElement.hasAttribute(ATTR_NAME)) {
        suffix = purifyHostElement.getAttribute(ATTR_NAME);
      }
      const policyName = 'dompurify' + (suffix ? '#' + suffix : '');
      try {
        return trustedTypes.createPolicy(policyName, {
          createHTML(html) {
            return html;
          },
          createScriptURL(scriptUrl) {
            return scriptUrl;
          }
        });
      } catch (_) {
        // Policy creation failed (most likely another DOMPurify script has
        // already run). Skip creating the policy, as this will only cause errors
        // if TT are enforced.
        console.warn('TrustedTypes policy ' + policyName + ' could not be created.');
        return null;
      }
    };
    const _createHooksMap = function _createHooksMap() {
      return {
        afterSanitizeAttributes: [],
        afterSanitizeElements: [],
        afterSanitizeShadowDOM: [],
        beforeSanitizeAttributes: [],
        beforeSanitizeElements: [],
        beforeSanitizeShadowDOM: [],
        uponSanitizeAttribute: [],
        uponSanitizeElement: [],
        uponSanitizeShadowNode: []
      };
    };
    function createDOMPurify() {
      let window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();
      const DOMPurify = root => createDOMPurify(root);
      DOMPurify.version = '3.2.6';
      DOMPurify.removed = [];
      if (!window || !window.document || window.document.nodeType !== NODE_TYPE.document || !window.Element) {
        // Not running in a browser, provide a factory function
        // so that you can pass your own Window
        DOMPurify.isSupported = false;
        return DOMPurify;
      }
      let {
        document
      } = window;
      const originalDocument = document;
      const currentScript = originalDocument.currentScript;
      const {
        DocumentFragment,
        HTMLTemplateElement,
        Node,
        Element,
        NodeFilter,
        NamedNodeMap = window.NamedNodeMap || window.MozNamedAttrMap,
        HTMLFormElement,
        DOMParser,
        trustedTypes
      } = window;
      const ElementPrototype = Element.prototype;
      const cloneNode = lookupGetter(ElementPrototype, 'cloneNode');
      const remove = lookupGetter(ElementPrototype, 'remove');
      const getNextSibling = lookupGetter(ElementPrototype, 'nextSibling');
      const getChildNodes = lookupGetter(ElementPrototype, 'childNodes');
      const getParentNode = lookupGetter(ElementPrototype, 'parentNode');
      // As per issue #47, the web-components registry is inherited by a
      // new document created via createHTMLDocument. As per the spec
      // (http://w3c.github.io/webcomponents/spec/custom/#creating-and-passing-registries)
      // a new empty registry is used when creating a template contents owner
      // document, so we use that as our parent document to ensure nothing
      // is inherited.
      if (typeof HTMLTemplateElement === 'function') {
        const template = document.createElement('template');
        if (template.content && template.content.ownerDocument) {
          document = template.content.ownerDocument;
        }
      }
      let trustedTypesPolicy;
      let emptyHTML = '';
      const {
        implementation,
        createNodeIterator,
        createDocumentFragment,
        getElementsByTagName
      } = document;
      const {
        importNode
      } = originalDocument;
      let hooks = _createHooksMap();
      /**
       * Expose whether this browser supports running the full DOMPurify.
       */
      DOMPurify.isSupported = typeof entries === 'function' && typeof getParentNode === 'function' && implementation && implementation.createHTMLDocument !== undefined;
      const {
        MUSTACHE_EXPR,
        ERB_EXPR,
        TMPLIT_EXPR,
        DATA_ATTR,
        ARIA_ATTR,
        IS_SCRIPT_OR_DATA,
        ATTR_WHITESPACE,
        CUSTOM_ELEMENT
      } = EXPRESSIONS;
      let {
        IS_ALLOWED_URI: IS_ALLOWED_URI$1
      } = EXPRESSIONS;
      /**
       * We consider the elements and attributes below to be safe. Ideally
       * don't add any new ones but feel free to remove unwanted ones.
       */
      /* allowed element names */
      let ALLOWED_TAGS = null;
      const DEFAULT_ALLOWED_TAGS = addToSet({}, [...html$1, ...svg$1, ...svgFilters, ...mathMl$1, ...text$1]);
      /* Allowed attribute names */
      let ALLOWED_ATTR = null;
      const DEFAULT_ALLOWED_ATTR = addToSet({}, [...html, ...svg, ...mathMl, ...xml]);
      /*
       * Configure how DOMPurify should handle custom elements and their attributes as well as customized built-in elements.
       * @property {RegExp|Function|null} tagNameCheck one of [null, regexPattern, predicate]. Default: `null` (disallow any custom elements)
       * @property {RegExp|Function|null} attributeNameCheck one of [null, regexPattern, predicate]. Default: `null` (disallow any attributes not on the allow list)
       * @property {boolean} allowCustomizedBuiltInElements allow custom elements derived from built-ins if they pass CUSTOM_ELEMENT_HANDLING.tagNameCheck. Default: `false`.
       */
      let CUSTOM_ELEMENT_HANDLING = Object.seal(create$1(null, {
        tagNameCheck: {
          writable: true,
          configurable: false,
          enumerable: true,
          value: null
        },
        attributeNameCheck: {
          writable: true,
          configurable: false,
          enumerable: true,
          value: null
        },
        allowCustomizedBuiltInElements: {
          writable: true,
          configurable: false,
          enumerable: true,
          value: false
        }
      }));
      /* Explicitly forbidden tags (overrides ALLOWED_TAGS/ADD_TAGS) */
      let FORBID_TAGS = null;
      /* Explicitly forbidden attributes (overrides ALLOWED_ATTR/ADD_ATTR) */
      let FORBID_ATTR = null;
      /* Decide if ARIA attributes are okay */
      let ALLOW_ARIA_ATTR = true;
      /* Decide if custom data attributes are okay */
      let ALLOW_DATA_ATTR = true;
      /* Decide if unknown protocols are okay */
      let ALLOW_UNKNOWN_PROTOCOLS = false;
      /* Decide if self-closing tags in attributes are allowed.
       * Usually removed due to a mXSS issue in jQuery 3.0 */
      let ALLOW_SELF_CLOSE_IN_ATTR = true;
      /* Output should be safe for common template engines.
       * This means, DOMPurify removes data attributes, mustaches and ERB
       */
      let SAFE_FOR_TEMPLATES = false;
      /* Output should be safe even for XML used within HTML and alike.
       * This means, DOMPurify removes comments when containing risky content.
       */
      let SAFE_FOR_XML = true;
      /* Decide if document with <html>... should be returned */
      let WHOLE_DOCUMENT = false;
      /* Track whether config is already set on this instance of DOMPurify. */
      let SET_CONFIG = false;
      /* Decide if all elements (e.g. style, script) must be children of
       * document.body. By default, browsers might move them to document.head */
      let FORCE_BODY = false;
      /* Decide if a DOM `HTMLBodyElement` should be returned, instead of a html
       * string (or a TrustedHTML object if Trusted Types are supported).
       * If `WHOLE_DOCUMENT` is enabled a `HTMLHtmlElement` will be returned instead
       */
      let RETURN_DOM = false;
      /* Decide if a DOM `DocumentFragment` should be returned, instead of a html
       * string  (or a TrustedHTML object if Trusted Types are supported) */
      let RETURN_DOM_FRAGMENT = false;
      /* Try to return a Trusted Type object instead of a string, return a string in
       * case Trusted Types are not supported  */
      let RETURN_TRUSTED_TYPE = false;
      /* Output should be free from DOM clobbering attacks?
       * This sanitizes markups named with colliding, clobberable built-in DOM APIs.
       */
      let SANITIZE_DOM = true;
      /* Achieve full DOM Clobbering protection by isolating the namespace of named
       * properties and JS variables, mitigating attacks that abuse the HTML/DOM spec rules.
       *
       * HTML/DOM spec rules that enable DOM Clobbering:
       *   - Named Access on Window (§7.3.3)
       *   - DOM Tree Accessors (§3.1.5)
       *   - Form Element Parent-Child Relations (§4.10.3)
       *   - Iframe srcdoc / Nested WindowProxies (§4.8.5)
       *   - HTMLCollection (§4.2.10.2)
       *
       * Namespace isolation is implemented by prefixing `id` and `name` attributes
       * with a constant string, i.e., `user-content-`
       */
      let SANITIZE_NAMED_PROPS = false;
      const SANITIZE_NAMED_PROPS_PREFIX = 'user-content-';
      /* Keep element content when removing element? */
      let KEEP_CONTENT = true;
      /* If a `Node` is passed to sanitize(), then performs sanitization in-place instead
       * of importing it into a new Document and returning a sanitized copy */
      let IN_PLACE = false;
      /* Allow usage of profiles like html, svg and mathMl */
      let USE_PROFILES = {};
      /* Tags to ignore content of when KEEP_CONTENT is true */
      let FORBID_CONTENTS = null;
      const DEFAULT_FORBID_CONTENTS = addToSet({}, ['annotation-xml', 'audio', 'colgroup', 'desc', 'foreignobject', 'head', 'iframe', 'math', 'mi', 'mn', 'mo', 'ms', 'mtext', 'noembed', 'noframes', 'noscript', 'plaintext', 'script', 'style', 'svg', 'template', 'thead', 'title', 'video', 'xmp']);
      /* Tags that are safe for data: URIs */
      let DATA_URI_TAGS = null;
      const DEFAULT_DATA_URI_TAGS = addToSet({}, ['audio', 'video', 'img', 'source', 'image', 'track']);
      /* Attributes safe for values like "javascript:" */
      let URI_SAFE_ATTRIBUTES = null;
      const DEFAULT_URI_SAFE_ATTRIBUTES = addToSet({}, ['alt', 'class', 'for', 'id', 'label', 'name', 'pattern', 'placeholder', 'role', 'summary', 'title', 'value', 'style', 'xmlns']);
      const MATHML_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';
      const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
      const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
      /* Document namespace */
      let NAMESPACE = HTML_NAMESPACE;
      let IS_EMPTY_INPUT = false;
      /* Allowed XHTML+XML namespaces */
      let ALLOWED_NAMESPACES = null;
      const DEFAULT_ALLOWED_NAMESPACES = addToSet({}, [MATHML_NAMESPACE, SVG_NAMESPACE, HTML_NAMESPACE], stringToString);
      let MATHML_TEXT_INTEGRATION_POINTS = addToSet({}, ['mi', 'mo', 'mn', 'ms', 'mtext']);
      let HTML_INTEGRATION_POINTS = addToSet({}, ['annotation-xml']);
      // Certain elements are allowed in both SVG and HTML
      // namespace. We need to specify them explicitly
      // so that they don't get erroneously deleted from
      // HTML namespace.
      const COMMON_SVG_AND_HTML_ELEMENTS = addToSet({}, ['title', 'style', 'font', 'a', 'script']);
      /* Parsing of strict XHTML documents */
      let PARSER_MEDIA_TYPE = null;
      const SUPPORTED_PARSER_MEDIA_TYPES = ['application/xhtml+xml', 'text/html'];
      const DEFAULT_PARSER_MEDIA_TYPE = 'text/html';
      let transformCaseFunc = null;
      /* Keep a reference to config to pass to hooks */
      let CONFIG = null;
      /* Ideally, do not touch anything below this line */
      /* ______________________________________________ */
      const formElement = document.createElement('form');
      const isRegexOrFunction = function isRegexOrFunction(testValue) {
        return testValue instanceof RegExp || testValue instanceof Function;
      };
      /**
       * _parseConfig
       *
       * @param cfg optional config literal
       */
      // eslint-disable-next-line complexity
      const _parseConfig = function _parseConfig() {
        let cfg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
        if (CONFIG && CONFIG === cfg) {
          return;
        }
        /* Shield configuration object from tampering */
        if (!cfg || typeof cfg !== 'object') {
          cfg = {};
        }
        /* Shield configuration object from prototype pollution */
        cfg = clone(cfg);
        PARSER_MEDIA_TYPE =
        // eslint-disable-next-line unicorn/prefer-includes
        SUPPORTED_PARSER_MEDIA_TYPES.indexOf(cfg.PARSER_MEDIA_TYPE) === -1 ? DEFAULT_PARSER_MEDIA_TYPE : cfg.PARSER_MEDIA_TYPE;
        // HTML tags and attributes are not case-sensitive, converting to lowercase. Keeping XHTML as is.
        transformCaseFunc = PARSER_MEDIA_TYPE === 'application/xhtml+xml' ? stringToString : stringToLowerCase;
        /* Set configuration parameters */
        ALLOWED_TAGS = objectHasOwnProperty(cfg, 'ALLOWED_TAGS') ? addToSet({}, cfg.ALLOWED_TAGS, transformCaseFunc) : DEFAULT_ALLOWED_TAGS;
        ALLOWED_ATTR = objectHasOwnProperty(cfg, 'ALLOWED_ATTR') ? addToSet({}, cfg.ALLOWED_ATTR, transformCaseFunc) : DEFAULT_ALLOWED_ATTR;
        ALLOWED_NAMESPACES = objectHasOwnProperty(cfg, 'ALLOWED_NAMESPACES') ? addToSet({}, cfg.ALLOWED_NAMESPACES, stringToString) : DEFAULT_ALLOWED_NAMESPACES;
        URI_SAFE_ATTRIBUTES = objectHasOwnProperty(cfg, 'ADD_URI_SAFE_ATTR') ? addToSet(clone(DEFAULT_URI_SAFE_ATTRIBUTES), cfg.ADD_URI_SAFE_ATTR, transformCaseFunc) : DEFAULT_URI_SAFE_ATTRIBUTES;
        DATA_URI_TAGS = objectHasOwnProperty(cfg, 'ADD_DATA_URI_TAGS') ? addToSet(clone(DEFAULT_DATA_URI_TAGS), cfg.ADD_DATA_URI_TAGS, transformCaseFunc) : DEFAULT_DATA_URI_TAGS;
        FORBID_CONTENTS = objectHasOwnProperty(cfg, 'FORBID_CONTENTS') ? addToSet({}, cfg.FORBID_CONTENTS, transformCaseFunc) : DEFAULT_FORBID_CONTENTS;
        FORBID_TAGS = objectHasOwnProperty(cfg, 'FORBID_TAGS') ? addToSet({}, cfg.FORBID_TAGS, transformCaseFunc) : clone({});
        FORBID_ATTR = objectHasOwnProperty(cfg, 'FORBID_ATTR') ? addToSet({}, cfg.FORBID_ATTR, transformCaseFunc) : clone({});
        USE_PROFILES = objectHasOwnProperty(cfg, 'USE_PROFILES') ? cfg.USE_PROFILES : false;
        ALLOW_ARIA_ATTR = cfg.ALLOW_ARIA_ATTR !== false; // Default true
        ALLOW_DATA_ATTR = cfg.ALLOW_DATA_ATTR !== false; // Default true
        ALLOW_UNKNOWN_PROTOCOLS = cfg.ALLOW_UNKNOWN_PROTOCOLS || false; // Default false
        ALLOW_SELF_CLOSE_IN_ATTR = cfg.ALLOW_SELF_CLOSE_IN_ATTR !== false; // Default true
        SAFE_FOR_TEMPLATES = cfg.SAFE_FOR_TEMPLATES || false; // Default false
        SAFE_FOR_XML = cfg.SAFE_FOR_XML !== false; // Default true
        WHOLE_DOCUMENT = cfg.WHOLE_DOCUMENT || false; // Default false
        RETURN_DOM = cfg.RETURN_DOM || false; // Default false
        RETURN_DOM_FRAGMENT = cfg.RETURN_DOM_FRAGMENT || false; // Default false
        RETURN_TRUSTED_TYPE = cfg.RETURN_TRUSTED_TYPE || false; // Default false
        FORCE_BODY = cfg.FORCE_BODY || false; // Default false
        SANITIZE_DOM = cfg.SANITIZE_DOM !== false; // Default true
        SANITIZE_NAMED_PROPS = cfg.SANITIZE_NAMED_PROPS || false; // Default false
        KEEP_CONTENT = cfg.KEEP_CONTENT !== false; // Default true
        IN_PLACE = cfg.IN_PLACE || false; // Default false
        IS_ALLOWED_URI$1 = cfg.ALLOWED_URI_REGEXP || IS_ALLOWED_URI;
        NAMESPACE = cfg.NAMESPACE || HTML_NAMESPACE;
        MATHML_TEXT_INTEGRATION_POINTS = cfg.MATHML_TEXT_INTEGRATION_POINTS || MATHML_TEXT_INTEGRATION_POINTS;
        HTML_INTEGRATION_POINTS = cfg.HTML_INTEGRATION_POINTS || HTML_INTEGRATION_POINTS;
        CUSTOM_ELEMENT_HANDLING = cfg.CUSTOM_ELEMENT_HANDLING || {};
        if (cfg.CUSTOM_ELEMENT_HANDLING && isRegexOrFunction(cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck)) {
          CUSTOM_ELEMENT_HANDLING.tagNameCheck = cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck;
        }
        if (cfg.CUSTOM_ELEMENT_HANDLING && isRegexOrFunction(cfg.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)) {
          CUSTOM_ELEMENT_HANDLING.attributeNameCheck = cfg.CUSTOM_ELEMENT_HANDLING.attributeNameCheck;
        }
        if (cfg.CUSTOM_ELEMENT_HANDLING && typeof cfg.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements === 'boolean') {
          CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements = cfg.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements;
        }
        if (SAFE_FOR_TEMPLATES) {
          ALLOW_DATA_ATTR = false;
        }
        if (RETURN_DOM_FRAGMENT) {
          RETURN_DOM = true;
        }
        /* Parse profile info */
        if (USE_PROFILES) {
          ALLOWED_TAGS = addToSet({}, text$1);
          ALLOWED_ATTR = [];
          if (USE_PROFILES.html === true) {
            addToSet(ALLOWED_TAGS, html$1);
            addToSet(ALLOWED_ATTR, html);
          }
          if (USE_PROFILES.svg === true) {
            addToSet(ALLOWED_TAGS, svg$1);
            addToSet(ALLOWED_ATTR, svg);
            addToSet(ALLOWED_ATTR, xml);
          }
          if (USE_PROFILES.svgFilters === true) {
            addToSet(ALLOWED_TAGS, svgFilters);
            addToSet(ALLOWED_ATTR, svg);
            addToSet(ALLOWED_ATTR, xml);
          }
          if (USE_PROFILES.mathMl === true) {
            addToSet(ALLOWED_TAGS, mathMl$1);
            addToSet(ALLOWED_ATTR, mathMl);
            addToSet(ALLOWED_ATTR, xml);
          }
        }
        /* Merge configuration parameters */
        if (cfg.ADD_TAGS) {
          if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) {
            ALLOWED_TAGS = clone(ALLOWED_TAGS);
          }
          addToSet(ALLOWED_TAGS, cfg.ADD_TAGS, transformCaseFunc);
        }
        if (cfg.ADD_ATTR) {
          if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) {
            ALLOWED_ATTR = clone(ALLOWED_ATTR);
          }
          addToSet(ALLOWED_ATTR, cfg.ADD_ATTR, transformCaseFunc);
        }
        if (cfg.ADD_URI_SAFE_ATTR) {
          addToSet(URI_SAFE_ATTRIBUTES, cfg.ADD_URI_SAFE_ATTR, transformCaseFunc);
        }
        if (cfg.FORBID_CONTENTS) {
          if (FORBID_CONTENTS === DEFAULT_FORBID_CONTENTS) {
            FORBID_CONTENTS = clone(FORBID_CONTENTS);
          }
          addToSet(FORBID_CONTENTS, cfg.FORBID_CONTENTS, transformCaseFunc);
        }
        /* Add #text in case KEEP_CONTENT is set to true */
        if (KEEP_CONTENT) {
          ALLOWED_TAGS['#text'] = true;
        }
        /* Add html, head and body to ALLOWED_TAGS in case WHOLE_DOCUMENT is true */
        if (WHOLE_DOCUMENT) {
          addToSet(ALLOWED_TAGS, ['html', 'head', 'body']);
        }
        /* Add tbody to ALLOWED_TAGS in case tables are permitted, see #286, #365 */
        if (ALLOWED_TAGS.table) {
          addToSet(ALLOWED_TAGS, ['tbody']);
          delete FORBID_TAGS.tbody;
        }
        if (cfg.TRUSTED_TYPES_POLICY) {
          if (typeof cfg.TRUSTED_TYPES_POLICY.createHTML !== 'function') {
            throw typeErrorCreate('TRUSTED_TYPES_POLICY configuration option must provide a "createHTML" hook.');
          }
          if (typeof cfg.TRUSTED_TYPES_POLICY.createScriptURL !== 'function') {
            throw typeErrorCreate('TRUSTED_TYPES_POLICY configuration option must provide a "createScriptURL" hook.');
          }
          // Overwrite existing TrustedTypes policy.
          trustedTypesPolicy = cfg.TRUSTED_TYPES_POLICY;
          // Sign local variables required by `sanitize`.
          emptyHTML = trustedTypesPolicy.createHTML('');
        } else {
          // Uninitialized policy, attempt to initialize the internal dompurify policy.
          if (trustedTypesPolicy === undefined) {
            trustedTypesPolicy = _createTrustedTypesPolicy(trustedTypes, currentScript);
          }
          // If creating the internal policy succeeded sign internal variables.
          if (trustedTypesPolicy !== null && typeof emptyHTML === 'string') {
            emptyHTML = trustedTypesPolicy.createHTML('');
          }
        }
        // Prevent further manipulation of configuration.
        // Not available in IE8, Safari 5, etc.
        if (freeze) {
          freeze(cfg);
        }
        CONFIG = cfg;
      };
      /* Keep track of all possible SVG and MathML tags
       * so that we can perform the namespace checks
       * correctly. */
      const ALL_SVG_TAGS = addToSet({}, [...svg$1, ...svgFilters, ...svgDisallowed]);
      const ALL_MATHML_TAGS = addToSet({}, [...mathMl$1, ...mathMlDisallowed]);
      /**
       * @param element a DOM element whose namespace is being checked
       * @returns Return false if the element has a
       *  namespace that a spec-compliant parser would never
       *  return. Return true otherwise.
       */
      const _checkValidNamespace = function _checkValidNamespace(element) {
        let parent = getParentNode(element);
        // In JSDOM, if we're inside shadow DOM, then parentNode
        // can be null. We just simulate parent in this case.
        if (!parent || !parent.tagName) {
          parent = {
            namespaceURI: NAMESPACE,
            tagName: 'template'
          };
        }
        const tagName = stringToLowerCase(element.tagName);
        const parentTagName = stringToLowerCase(parent.tagName);
        if (!ALLOWED_NAMESPACES[element.namespaceURI]) {
          return false;
        }
        if (element.namespaceURI === SVG_NAMESPACE) {
          // The only way to switch from HTML namespace to SVG
          // is via <svg>. If it happens via any other tag, then
          // it should be killed.
          if (parent.namespaceURI === HTML_NAMESPACE) {
            return tagName === 'svg';
          }
          // The only way to switch from MathML to SVG is via`
          // svg if parent is either <annotation-xml> or MathML
          // text integration points.
          if (parent.namespaceURI === MATHML_NAMESPACE) {
            return tagName === 'svg' && (parentTagName === 'annotation-xml' || MATHML_TEXT_INTEGRATION_POINTS[parentTagName]);
          }
          // We only allow elements that are defined in SVG
          // spec. All others are disallowed in SVG namespace.
          return Boolean(ALL_SVG_TAGS[tagName]);
        }
        if (element.namespaceURI === MATHML_NAMESPACE) {
          // The only way to switch from HTML namespace to MathML
          // is via <math>. If it happens via any other tag, then
          // it should be killed.
          if (parent.namespaceURI === HTML_NAMESPACE) {
            return tagName === 'math';
          }
          // The only way to switch from SVG to MathML is via
          // <math> and HTML integration points
          if (parent.namespaceURI === SVG_NAMESPACE) {
            return tagName === 'math' && HTML_INTEGRATION_POINTS[parentTagName];
          }
          // We only allow elements that are defined in MathML
          // spec. All others are disallowed in MathML namespace.
          return Boolean(ALL_MATHML_TAGS[tagName]);
        }
        if (element.namespaceURI === HTML_NAMESPACE) {
          // The only way to switch from SVG to HTML is via
          // HTML integration points, and from MathML to HTML
          // is via MathML text integration points
          if (parent.namespaceURI === SVG_NAMESPACE && !HTML_INTEGRATION_POINTS[parentTagName]) {
            return false;
          }
          if (parent.namespaceURI === MATHML_NAMESPACE && !MATHML_TEXT_INTEGRATION_POINTS[parentTagName]) {
            return false;
          }
          // We disallow tags that are specific for MathML
          // or SVG and should never appear in HTML namespace
          return !ALL_MATHML_TAGS[tagName] && (COMMON_SVG_AND_HTML_ELEMENTS[tagName] || !ALL_SVG_TAGS[tagName]);
        }
        // For XHTML and XML documents that support custom namespaces
        if (PARSER_MEDIA_TYPE === 'application/xhtml+xml' && ALLOWED_NAMESPACES[element.namespaceURI]) {
          return true;
        }
        // The code should never reach this place (this means
        // that the element somehow got namespace that is not
        // HTML, SVG, MathML or allowed via ALLOWED_NAMESPACES).
        // Return false just in case.
        return false;
      };
      /**
       * _forceRemove
       *
       * @param node a DOM node
       */
      const _forceRemove = function _forceRemove(node) {
        arrayPush(DOMPurify.removed, {
          element: node
        });
        try {
          // eslint-disable-next-line unicorn/prefer-dom-node-remove
          getParentNode(node).removeChild(node);
        } catch (_) {
          remove(node);
        }
      };
      /**
       * _removeAttribute
       *
       * @param name an Attribute name
       * @param element a DOM node
       */
      const _removeAttribute = function _removeAttribute(name, element) {
        try {
          arrayPush(DOMPurify.removed, {
            attribute: element.getAttributeNode(name),
            from: element
          });
        } catch (_) {
          arrayPush(DOMPurify.removed, {
            attribute: null,
            from: element
          });
        }
        element.removeAttribute(name);
        // We void attribute values for unremovable "is" attributes
        if (name === 'is') {
          if (RETURN_DOM || RETURN_DOM_FRAGMENT) {
            try {
              _forceRemove(element);
            } catch (_) {}
          } else {
            try {
              element.setAttribute(name, '');
            } catch (_) {}
          }
        }
      };
      /**
       * _initDocument
       *
       * @param dirty - a string of dirty markup
       * @return a DOM, filled with the dirty markup
       */
      const _initDocument = function _initDocument(dirty) {
        /* Create a HTML document */
        let doc = null;
        let leadingWhitespace = null;
        if (FORCE_BODY) {
          dirty = '<remove></remove>' + dirty;
        } else {
          /* If FORCE_BODY isn't used, leading whitespace needs to be preserved manually */
          const matches = stringMatch(dirty, /^[\r\n\t ]+/);
          leadingWhitespace = matches && matches[0];
        }
        if (PARSER_MEDIA_TYPE === 'application/xhtml+xml' && NAMESPACE === HTML_NAMESPACE) {
          // Root of XHTML doc must contain xmlns declaration (see https://www.w3.org/TR/xhtml1/normative.html#strict)
          dirty = '<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>' + dirty + '</body></html>';
        }
        const dirtyPayload = trustedTypesPolicy ? trustedTypesPolicy.createHTML(dirty) : dirty;
        /*
         * Use the DOMParser API by default, fallback later if needs be
         * DOMParser not work for svg when has multiple root element.
         */
        if (NAMESPACE === HTML_NAMESPACE) {
          try {
            doc = new DOMParser().parseFromString(dirtyPayload, PARSER_MEDIA_TYPE);
          } catch (_) {}
        }
        /* Use createHTMLDocument in case DOMParser is not available */
        if (!doc || !doc.documentElement) {
          doc = implementation.createDocument(NAMESPACE, 'template', null);
          try {
            doc.documentElement.innerHTML = IS_EMPTY_INPUT ? emptyHTML : dirtyPayload;
          } catch (_) {
            // Syntax error if dirtyPayload is invalid xml
          }
        }
        const body = doc.body || doc.documentElement;
        if (dirty && leadingWhitespace) {
          body.insertBefore(document.createTextNode(leadingWhitespace), body.childNodes[0] || null);
        }
        /* Work on whole document or just its body */
        if (NAMESPACE === HTML_NAMESPACE) {
          return getElementsByTagName.call(doc, WHOLE_DOCUMENT ? 'html' : 'body')[0];
        }
        return WHOLE_DOCUMENT ? doc.documentElement : body;
      };
      /**
       * Creates a NodeIterator object that you can use to traverse filtered lists of nodes or elements in a document.
       *
       * @param root The root element or node to start traversing on.
       * @return The created NodeIterator
       */
      const _createNodeIterator = function _createNodeIterator(root) {
        return createNodeIterator.call(root.ownerDocument || root, root,
        // eslint-disable-next-line no-bitwise
        NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT | NodeFilter.SHOW_PROCESSING_INSTRUCTION | NodeFilter.SHOW_CDATA_SECTION, null);
      };
      /**
       * _isClobbered
       *
       * @param element element to check for clobbering attacks
       * @return true if clobbered, false if safe
       */
      const _isClobbered = function _isClobbered(element) {
        return element instanceof HTMLFormElement && (typeof element.nodeName !== 'string' || typeof element.textContent !== 'string' || typeof element.removeChild !== 'function' || !(element.attributes instanceof NamedNodeMap) || typeof element.removeAttribute !== 'function' || typeof element.setAttribute !== 'function' || typeof element.namespaceURI !== 'string' || typeof element.insertBefore !== 'function' || typeof element.hasChildNodes !== 'function');
      };
      /**
       * Checks whether the given object is a DOM node.
       *
       * @param value object to check whether it's a DOM node
       * @return true is object is a DOM node
       */
      const _isNode = function _isNode(value) {
        return typeof Node === 'function' && value instanceof Node;
      };
      function _executeHooks(hooks, currentNode, data) {
        arrayForEach(hooks, hook => {
          hook.call(DOMPurify, currentNode, data, CONFIG);
        });
      }
      /**
       * _sanitizeElements
       *
       * @protect nodeName
       * @protect textContent
       * @protect removeChild
       * @param currentNode to check for permission to exist
       * @return true if node was killed, false if left alive
       */
      const _sanitizeElements = function _sanitizeElements(currentNode) {
        let content = null;
        /* Execute a hook if present */
        _executeHooks(hooks.beforeSanitizeElements, currentNode, null);
        /* Check if element is clobbered or can clobber */
        if (_isClobbered(currentNode)) {
          _forceRemove(currentNode);
          return true;
        }
        /* Now let's check the element's type and name */
        const tagName = transformCaseFunc(currentNode.nodeName);
        /* Execute a hook if present */
        _executeHooks(hooks.uponSanitizeElement, currentNode, {
          tagName,
          allowedTags: ALLOWED_TAGS
        });
        /* Detect mXSS attempts abusing namespace confusion */
        if (SAFE_FOR_XML && currentNode.hasChildNodes() && !_isNode(currentNode.firstElementChild) && regExpTest(/<[/\w!]/g, currentNode.innerHTML) && regExpTest(/<[/\w!]/g, currentNode.textContent)) {
          _forceRemove(currentNode);
          return true;
        }
        /* Remove any occurrence of processing instructions */
        if (currentNode.nodeType === NODE_TYPE.progressingInstruction) {
          _forceRemove(currentNode);
          return true;
        }
        /* Remove any kind of possibly harmful comments */
        if (SAFE_FOR_XML && currentNode.nodeType === NODE_TYPE.comment && regExpTest(/<[/\w]/g, currentNode.data)) {
          _forceRemove(currentNode);
          return true;
        }
        /* Remove element if anything forbids its presence */
        if (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName]) {
          /* Check if we have a custom element to handle */
          if (!FORBID_TAGS[tagName] && _isBasicCustomElement(tagName)) {
            if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, tagName)) {
              return false;
            }
            if (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(tagName)) {
              return false;
            }
          }
          /* Keep content except for bad-listed elements */
          if (KEEP_CONTENT && !FORBID_CONTENTS[tagName]) {
            const parentNode = getParentNode(currentNode) || currentNode.parentNode;
            const childNodes = getChildNodes(currentNode) || currentNode.childNodes;
            if (childNodes && parentNode) {
              const childCount = childNodes.length;
              for (let i = childCount - 1; i >= 0; --i) {
                const childClone = cloneNode(childNodes[i], true);
                childClone.__removalCount = (currentNode.__removalCount || 0) + 1;
                parentNode.insertBefore(childClone, getNextSibling(currentNode));
              }
            }
          }
          _forceRemove(currentNode);
          return true;
        }
        /* Check whether element has a valid namespace */
        if (currentNode instanceof Element && !_checkValidNamespace(currentNode)) {
          _forceRemove(currentNode);
          return true;
        }
        /* Make sure that older browsers don't get fallback-tag mXSS */
        if ((tagName === 'noscript' || tagName === 'noembed' || tagName === 'noframes') && regExpTest(/<\/no(script|embed|frames)/i, currentNode.innerHTML)) {
          _forceRemove(currentNode);
          return true;
        }
        /* Sanitize element content to be template-safe */
        if (SAFE_FOR_TEMPLATES && currentNode.nodeType === NODE_TYPE.text) {
          /* Get the element's text content */
          content = currentNode.textContent;
          arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => {
            content = stringReplace(content, expr, ' ');
          });
          if (currentNode.textContent !== content) {
            arrayPush(DOMPurify.removed, {
              element: currentNode.cloneNode()
            });
            currentNode.textContent = content;
          }
        }
        /* Execute a hook if present */
        _executeHooks(hooks.afterSanitizeElements, currentNode, null);
        return false;
      };
      /**
       * _isValidAttribute
       *
       * @param lcTag Lowercase tag name of containing element.
       * @param lcName Lowercase attribute name.
       * @param value Attribute value.
       * @return Returns true if `value` is valid, otherwise false.
       */
      // eslint-disable-next-line complexity
      const _isValidAttribute = function _isValidAttribute(lcTag, lcName, value) {
        /* Make sure attribute cannot clobber */
        if (SANITIZE_DOM && (lcName === 'id' || lcName === 'name') && (value in document || value in formElement)) {
          return false;
        }
        /* Allow valid data-* attributes: At least one character after "-"
            (https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes)
            XML-compatible (https://html.spec.whatwg.org/multipage/infrastructure.html#xml-compatible and http://www.w3.org/TR/xml/#d0e804)
            We don't need to check the value; it's always URI safe. */
        if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR, lcName)) ; else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR, lcName)) ; else if (!ALLOWED_ATTR[lcName] || FORBID_ATTR[lcName]) {
          if (
          // First condition does a very basic check if a) it's basically a valid custom element tagname AND
          // b) if the tagName passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck
          // and c) if the attribute name passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.attributeNameCheck
          _isBasicCustomElement(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) || CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName)) ||
          // Alternative, second condition checks if it's an `is`-attribute, AND
          // the value passes whatever the user has configured for CUSTOM_ELEMENT_HANDLING.tagNameCheck
          lcName === 'is' && CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, value) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(value))) ; else {
            return false;
          }
          /* Check value is safe. First, is attr inert? If so, is safe */
        } else if (URI_SAFE_ATTRIBUTES[lcName]) ; else if (regExpTest(IS_ALLOWED_URI$1, stringReplace(value, ATTR_WHITESPACE, ''))) ; else if ((lcName === 'src' || lcName === 'xlink:href' || lcName === 'href') && lcTag !== 'script' && stringIndexOf(value, 'data:') === 0 && DATA_URI_TAGS[lcTag]) ; else if (ALLOW_UNKNOWN_PROTOCOLS && !regExpTest(IS_SCRIPT_OR_DATA, stringReplace(value, ATTR_WHITESPACE, ''))) ; else if (value) {
          return false;
        } else ;
        return true;
      };
      /**
       * _isBasicCustomElement
       * checks if at least one dash is included in tagName, and it's not the first char
       * for more sophisticated checking see https://github.com/sindresorhus/validate-element-name
       *
       * @param tagName name of the tag of the node to sanitize
       * @returns Returns true if the tag name meets the basic criteria for a custom element, otherwise false.
       */
      const _isBasicCustomElement = function _isBasicCustomElement(tagName) {
        return tagName !== 'annotation-xml' && stringMatch(tagName, CUSTOM_ELEMENT);
      };
      /**
       * _sanitizeAttributes
       *
       * @protect attributes
       * @protect nodeName
       * @protect removeAttribute
       * @protect setAttribute
       *
       * @param currentNode to sanitize
       */
      const _sanitizeAttributes = function _sanitizeAttributes(currentNode) {
        /* Execute a hook if present */
        _executeHooks(hooks.beforeSanitizeAttributes, currentNode, null);
        const {
          attributes
        } = currentNode;
        /* Check if we have attributes; if not we might have a text node */
        if (!attributes || _isClobbered(currentNode)) {
          return;
        }
        const hookEvent = {
          attrName: '',
          attrValue: '',
          keepAttr: true,
          allowedAttributes: ALLOWED_ATTR,
          forceKeepAttr: undefined
        };
        let l = attributes.length;
        /* Go backwards over all attributes; safely remove bad ones */
        while (l--) {
          const attr = attributes[l];
          const {
            name,
            namespaceURI,
            value: attrValue
          } = attr;
          const lcName = transformCaseFunc(name);
          const initValue = attrValue;
          let value = name === 'value' ? initValue : stringTrim(initValue);
          /* Execute a hook if present */
          hookEvent.attrName = lcName;
          hookEvent.attrValue = value;
          hookEvent.keepAttr = true;
          hookEvent.forceKeepAttr = undefined; // Allows developers to see this is a property they can set
          _executeHooks(hooks.uponSanitizeAttribute, currentNode, hookEvent);
          value = hookEvent.attrValue;
          /* Full DOM Clobbering protection via namespace isolation,
           * Prefix id and name attributes with `user-content-`
           */
          if (SANITIZE_NAMED_PROPS && (lcName === 'id' || lcName === 'name')) {
            // Remove the attribute with this value
            _removeAttribute(name, currentNode);
            // Prefix the value and later re-create the attribute with the sanitized value
            value = SANITIZE_NAMED_PROPS_PREFIX + value;
          }
          /* Work around a security issue with comments inside attributes */
          if (SAFE_FOR_XML && regExpTest(/((--!?|])>)|<\/(style|title)/i, value)) {
            _removeAttribute(name, currentNode);
            continue;
          }
          /* Did the hooks approve of the attribute? */
          if (hookEvent.forceKeepAttr) {
            continue;
          }
          /* Did the hooks approve of the attribute? */
          if (!hookEvent.keepAttr) {
            _removeAttribute(name, currentNode);
            continue;
          }
          /* Work around a security issue in jQuery 3.0 */
          if (!ALLOW_SELF_CLOSE_IN_ATTR && regExpTest(/\/>/i, value)) {
            _removeAttribute(name, currentNode);
            continue;
          }
          /* Sanitize attribute content to be template-safe */
          if (SAFE_FOR_TEMPLATES) {
            arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => {
              value = stringReplace(value, expr, ' ');
            });
          }
          /* Is `value` valid for this attribute? */
          const lcTag = transformCaseFunc(currentNode.nodeName);
          if (!_isValidAttribute(lcTag, lcName, value)) {
            _removeAttribute(name, currentNode);
            continue;
          }
          /* Handle attributes that require Trusted Types */
          if (trustedTypesPolicy && typeof trustedTypes === 'object' && typeof trustedTypes.getAttributeType === 'function') {
            if (namespaceURI) ; else {
              switch (trustedTypes.getAttributeType(lcTag, lcName)) {
                case 'TrustedHTML':
                  {
                    value = trustedTypesPolicy.createHTML(value);
                    break;
                  }
                case 'TrustedScriptURL':
                  {
                    value = trustedTypesPolicy.createScriptURL(value);
                    break;
                  }
              }
            }
          }
          /* Handle invalid data-* attribute set by try-catching it */
          if (value !== initValue) {
            try {
              if (namespaceURI) {
                currentNode.setAttributeNS(namespaceURI, name, value);
              } else {
                /* Fallback to setAttribute() for browser-unrecognized namespaces e.g. "x-schema". */
                currentNode.setAttribute(name, value);
              }
              if (_isClobbered(currentNode)) {
                _forceRemove(currentNode);
              } else {
                arrayPop(DOMPurify.removed);
              }
            } catch (_) {
              _removeAttribute(name, currentNode);
            }
          }
        }
        /* Execute a hook if present */
        _executeHooks(hooks.afterSanitizeAttributes, currentNode, null);
      };
      /**
       * _sanitizeShadowDOM
       *
       * @param fragment to iterate over recursively
       */
      const _sanitizeShadowDOM = function _sanitizeShadowDOM(fragment) {
        let shadowNode = null;
        const shadowIterator = _createNodeIterator(fragment);
        /* Execute a hook if present */
        _executeHooks(hooks.beforeSanitizeShadowDOM, fragment, null);
        while (shadowNode = shadowIterator.nextNode()) {
          /* Execute a hook if present */
          _executeHooks(hooks.uponSanitizeShadowNode, shadowNode, null);
          /* Sanitize tags and elements */
          _sanitizeElements(shadowNode);
          /* Check attributes next */
          _sanitizeAttributes(shadowNode);
          /* Deep shadow DOM detected */
          if (shadowNode.content instanceof DocumentFragment) {
            _sanitizeShadowDOM(shadowNode.content);
          }
        }
        /* Execute a hook if present */
        _executeHooks(hooks.afterSanitizeShadowDOM, fragment, null);
      };
      // eslint-disable-next-line complexity
      DOMPurify.sanitize = function (dirty) {
        let cfg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
        let body = null;
        let importedNode = null;
        let currentNode = null;
        let returnNode = null;
        /* Make sure we have a string to sanitize.
          DO NOT return early, as this will return the wrong type if
          the user has requested a DOM object rather than a string */
        IS_EMPTY_INPUT = !dirty;
        if (IS_EMPTY_INPUT) {
          dirty = '');
          importedNode = body.ownerDocument.importNode(dirty, true);
          if (importedNode.nodeType === NODE_TYPE.element && importedNode.nodeName === 'BODY') {
            /* Node is already a body, use as is */
            body = importedNode;
          } else if (importedNode.nodeName === 'HTML') {
            body = importedNode;
          } else {
            // eslint-disable-next-line unicorn/prefer-dom-node-append
            body.appendChild(importedNode);
          }
        } else {
          /* Exit directly if we have nothing to do */
          if (!RETURN_DOM && !SAFE_FOR_TEMPLATES && !WHOLE_DOCUMENT &&
          // eslint-disable-next-line unicorn/prefer-includes
          dirty.indexOf('<') === -1) {
            return trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML(dirty) : dirty;
          }
          /* Initialize the document to work on */
          body = _initDocument(dirty);
          /* Check we have a DOM node from the data */
          if (!body) {
            return RETURN_DOM ? null : RETURN_TRUSTED_TYPE ? emptyHTML : '';
          }
        }
        /* Remove first element node (ours) if FORCE_BODY is set */
        if (body && FORCE_BODY) {
          _forceRemove(body.firstChild);
        }
        /* Get node iterator */
        const nodeIterator = _createNodeIterator(IN_PLACE ? dirty : body);
        /* Now start iterating over the created document */
        while (currentNode = nodeIterator.nextNode()) {
          /* Sanitize tags and elements */
          _sanitizeElements(currentNode);
          /* Check attributes next */
          _sanitizeAttributes(currentNode);
          /* Shadow DOM detected, sanitize it */
          if (currentNode.content instanceof DocumentFragment) {
            _sanitizeShadowDOM(currentNode.content);
          }
        }
        /* If we sanitized `dirty` in-place, return it. */
        if (IN_PLACE) {
          return dirty;
        }
        /* Return sanitized string or DOM */
        if (RETURN_DOM) {
          if (RETURN_DOM_FRAGMENT) {
            returnNode = createDocumentFragment.call(body.ownerDocument);
            while (body.firstChild) {
              // eslint-disable-next-line unicorn/prefer-dom-node-append
              returnNode.appendChild(body.firstChild);
            }
          } else {
            returnNode = body;
          }
          if (ALLOWED_ATTR.shadowroot || ALLOWED_ATTR.shadowrootmode) {
            /*
              AdoptNode() is not used because internal state is not reset
              (e.g. the past names map of a HTMLFormElement), this is safe
              in theory but we would rather not risk another attack vector.
              The state that is cloned by importNode() is explicitly defined
              by the specs.
            */
            returnNode = importNode.call(originalDocument, returnNode, true);
          }
          return returnNode;
        }
        let serializedHTML = WHOLE_DOCUMENT ? body.outerHTML : body.innerHTML;
        /* Serialize doctype if allowed */
        if (WHOLE_DOCUMENT && ALLOWED_TAGS['!doctype'] && body.ownerDocument && body.ownerDocument.doctype && body.ownerDocument.doctype.name && regExpTest(DOCTYPE_NAME, body.ownerDocument.doctype.name)) {
          serializedHTML = '<!DOCTYPE ' + body.ownerDocument.doctype.name + '>\n' + serializedHTML;
        }
        /* Sanitize final string template-safe */
        if (SAFE_FOR_TEMPLATES) {
          arrayForEach([MUSTACHE_EXPR, ERB_EXPR, TMPLIT_EXPR], expr => {
            serializedHTML = stringReplace(serializedHTML, expr, ' ');
          });
        }
        return trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML(serializedHTML) : serializedHTML;
      };
      DOMPurify.setConfig = function () {
        let cfg = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
        _parseConfig(cfg);
        SET_CONFIG = true;
      };
      DOMPurify.clearConfig = function () {
        CONFIG = null;
        SET_CONFIG = false;
      };
      DOMPurify.isValidAttribute = function (tag, attr, value) {
        /* Initialize shared config vars if necessary. */
        if (!CONFIG) {
          _parseConfig({});
        }
        const lcTag = transformCaseFunc(tag);
        const lcName = transformCaseFunc(attr);
        return _isValidAttribute(lcTag, lcName, value);
      };
      DOMPurify.addHook = function (entryPoint, hookFunction) {
        if (typeof hookFunction !== 'function') {
          return;
        }
        arrayPush(hooks[entryPoint], hookFunction);
      };
      DOMPurify.removeHook = function (entryPoint, hookFunction) {
        if (hookFunction !== undefined) {
          const index = arrayLastIndexOf(hooks[entryPoint], hookFunction);
          return index === -1 ? undefined : arraySplice(hooks[entryPoint], index, 1)[0];
        }
        return arrayPop(hooks[entryPoint]);
      };
      DOMPurify.removeHooks = function (entryPoint) {
        hooks[entryPoint] = [];
      };
      DOMPurify.removeAllHooks = function () {
        hooks = _createHooksMap();
      };
      return DOMPurify;
    }
    var purify = createDOMPurify();

const sanitizeHtmlString = (html) => purify().sanitize(html);

var global$6 = tinymce.util.Tools.resolve('tinymce.util.I18n');

// Icons that need to be transformed in RTL
    const rtlTransform = {
        'indent': true,
        'outdent': true,
        'table-insert-column-after': true,
        'table-insert-column-before': true,
        'paste-column-after': true,
        'paste-column-before': true,
        'unordered-list': true,
        'list-bull-circle': true,
        'list-bull-disc': true,
        'list-bull-default': true,
        'list-bull-square': true
    };
    const defaultIconName = 'temporary-placeholder';
    const defaultIcon = (icons) => () => get$h(icons, defaultIconName).getOr('!not found!');
    const getIconName = (name, icons) => {
        const lcName = name.toLowerCase();
        // If in rtl mode then try to see if we have a rtl icon to use instead
        if (global$6.isRtl()) {
            const rtlName = ensureTrailing(lcName, '-rtl');
            return has$2(icons, rtlName) ? rtlName : lcName;
        }
        else {
            return lcName;
        }
    };
    const lookupIcon = (name, icons) => get$h(icons, getIconName(name, icons));
    const get = (name, iconProvider) => {
        const icons = iconProvider();
        return lookupIcon(name, icons).getOrThunk(defaultIcon(icons));
    };
    const getOr = (name, iconProvider, fallbackIcon) => {
        const icons = iconProvider();
        return lookupIcon(name, icons).or(fallbackIcon).getOrThunk(defaultIcon(icons));
    };
    const needsRtlTransform = (iconName) => global$6.isRtl() ? has$2(rtlTransform, iconName) : false;
    const addFocusableBehaviour = () => config('add-focusable', [
        runOnAttached((comp) => {
            // set focusable=false on SVGs to prevent focusing the toolbar when tabbing into the editor
            child(comp.element, 'svg').each((svg) => set$9(svg, 'focusable', 'false'));
        })
    ]);
    const renderIcon$3 = (spec, iconName, icons, fallbackIcon) => {
        // If RTL, add the flip icon class if the icon doesn't have a `-rtl` icon available.
        const rtlIconClasses = needsRtlTransform(iconName) ? ['tox-icon--flip'] : [];
        const iconHtml = get$h(icons, getIconName(iconName, icons)).or(fallbackIcon).getOrThunk(defaultIcon(icons));
        return {
            dom: {
                tag: spec.tag,
                attributes: spec.attributes ?? {},
                classes: spec.classes.concat(rtlIconClasses),
                innerHtml: iconHtml
            },
            behaviours: derive$1([
                ...spec.behaviours ?? [],
                addFocusableBehaviour()
            ]),
            eventOrder: spec.eventOrder ?? {}
        };
    };
    const render$4 = (iconName, spec, iconProvider, fallbackIcon = Optional.none()) => renderIcon$3(spec, iconName, iconProvider(), fallbackIcon);
    const renderFirst = (iconNames, spec, iconProvider) => {
        const icons = iconProvider();
        const iconName = find$5(iconNames, (name) => has$2(icons, getIconName(name, icons)));
        return renderIcon$3(spec, iconName.getOr(defaultIconName), icons, Optional.none());
    };

var ItemResponse;
    (function (ItemResponse) {
        ItemResponse[ItemResponse["CLOSE_ON_EXECUTE"] = 0] = "CLOSE_ON_EXECUTE";
        ItemResponse[ItemResponse["BUBBLE_TO_SANDBOX"] = 1] = "BUBBLE_TO_SANDBOX";
    })(ItemResponse || (ItemResponse = {}));
    var ItemResponse$1 = ItemResponse;

const navClass = 'tox-menu-nav__js';
    const selectableClass = 'tox-collection__item';
    const colorClass = 'tox-swatch';
    const presetClasses = {
        normal: navClass,
        color: colorClass
    };
    const tickedClass = 'tox-collection__item--enabled';
    const groupHeadingClass = 'tox-collection__group-heading';
    const iconClass = 'tox-collection__item-icon';
    const imageClass = 'tox-collection__item-image';
    const imageSelectorClasll = 'tox-collection__item-image-selector';
    const textClass = 'tox-collection__item-label';
    const accessoryClass = 'tox-collection__item-accessory';
    const caretClass = 'tox-collection__item-caret';
    const checkmarkClass = 'tox-collection__item-checkmark';
    const activeClass = 'tox-collection__item--active';
    const containerClass = 'tox-collection__item-container';
    const containerColumnClass = 'tox-collection__item-container--column';
    const containerRowClass = 'tox-collection__item-container--row';
    const containerAlignRightClass = 'tox-collection__item-container--align-right';
    const containerAlignLeftClass = 'tox-collection__item-container--align-left';
    const containerValignTopClass = 'tox-collection__item-container--valign-top';
    const containerValignMiddleClass = 'tox-collection__item-container--valign-middle';
    const containerValignBottomClass = 'tox-collection__item-container--valign-bottom';
    const classForPreset = (presets) => get$h(presetClasses, presets).getOr(navClass);

// This event is triggered by a menu item from a dropdown when it wants the
    // dropdown to refetch its contents based on a search string.
    const refetchTriggerEvent = generate$6('refetch-trigger-event');
    // This event is triggerd by a menu item from a dropdown, when it wants to
    // redispatch that event to the currently active item of that dropdown menu. It will
    // be used in situations where the event should be firing on the item with fake focus,
    // but instead it is firing on the item with real focus (e.g of real focus:
    // menu search field)
    const redirectMenuItemInteractionEvent = generate$6('redirect-menu-item-interaction');

// This is not stored in ItemClasses, because the searcher is not actually
    // contained within items. It isn't part of their navigation, and it
    // isn't maintained by menus. It is just part of the first menu, but
    // not its items.
    const menuSearcherClass = 'tox-menu__searcher';
    // Ideally, we'd be using mementos to find it again, but we'd need to pass
    // that memento onto the dropdown, which isn't going to have it. Especially,
    // because the dropdown isn't responsible for putting this searcher component
    // into the menu, NestedMenus is.
    const findWithinSandbox = (sandboxComp) => {
        return descendant(sandboxComp.element, `.${menuSearcherClass}`).bind((inputElem) => sandboxComp.getSystem().getByDom(inputElem).toOptional());
    };
    // There is nothing sandbox-specific about this code. It just needs to be
    // a container that wraps the search field.
    const findWithinMenu = findWithinSandbox;
    const restoreState = (inputComp, searcherState) => {
        Representing.setValue(inputComp, searcherState.fetchPattern);
        inputComp.element.dom.selectionStart = searcherState.selectionStart;
        inputComp.element.dom.selectionEnd = searcherState.selectionEnd;
    };
    const saveState = (inputComp) => {
        const fetchPattern = Representing.getValue(inputComp);
        const selectionStart = inputComp.element.dom.selectionStart;
        const selectionEnd = inputComp.element.dom.selectionEnd;
        return {
            fetchPattern,
            selectionStart,
            selectionEnd
        };
    };
    // Make sure there is ARIA communicating the currently active item in the results.
    const setActiveDescendant = (inputComp, active) => {
        getOpt(active.element, 'id')
            .each((id) => set$9(inputComp.element, 'aria-activedescendant', id));
    };
    const renderMenuSearcher = (spec) => {
        const handleByBrowser = (comp, se) => {
            // We "cut" this event, so that the browser still handles it, but it is not processed
            // by any of the above alloy components. We could also do this by stopping propagation,
            // but not preventing default, but it's probably good to allow some overarching thing
            // in the DOM (outside of alloy) to stop it if they want to.
            se.cut();
            // Returning a Some here (regardless of boolean value) is going to call `stop` on the
            // simulated event, which is going to call: preventDefault and stopPropagation. We want
            // neither of these things to happen, so we return None here to say that it hasn't been
            // handled. But because we've cut it, it will not propagate to any other alloy components
            return Optional.none();
        };
        const handleByHighlightedItem = (comp, se) => {
            // Because we need to redispatch based on highlighted items that we don't know about here,
            // we are going to emit an event, that the sandbox listens to, and the sandbox will
            // redispatch the event.
            const eventData = {
                interactionEvent: se.event,
                eventType: se.event.raw.type
            };
            emitWith(comp, redirectMenuItemInteractionEvent, eventData);
            return Optional.some(true);
        };
        const customSearcherEventsName = 'searcher-events';
        return {
            dom: {
                tag: 'div',
                // NOTE: This is very intentionally NOT the navigation class, because
                // we don't want the searcher to be part of the navigation. This class
                // is just for styling consistency. Perhaps it should be its own class.
                classes: [selectableClass]
            },
            components: [
                Input.sketch({
                    inputClasses: [menuSearcherClass, 'tox-textfield'],
                    inputAttributes: {
                        ...(spec.placeholder.map((placeholder) => ({ placeholder: spec.i18n(placeholder) })).getOr({})),
                        // This ARIA is based on the algolia example documented in TINY-8952
                        'type': 'search',
                        'aria-autocomplete': 'list'
                    },
                    inputBehaviours: derive$1([
                        config(customSearcherEventsName, [
                            // When the user types into the search field, we want to retrigger
                            // a fetch on the dropdown. This will be fired from within the
                            // dropdown's sandbox, so the dropdown is going to have to listen
                            // for it there. See CommonDropdown.ts.
                            run$1(
                            // Use "input" to handle keydown, paste etc.
                            input(), (inputComp) => {
                                emit(inputComp, refetchTriggerEvent);
                            }),
                            run$1(keydown(), (inputComp, se) => {
                                // The Special Keying config type since TINY-7005 processes the Escape
                                // key on keyup, not keydown. We need to stop the keydown event for this
                                // input, because some browsers (e.g. Chrome) will process a keydown
                                // for Escape inside an input[type=search] by clearing the input value,
                                // and then triggering an "input" event. This "input" event will trigger
                                // a refetch, which if it completes before the keyup is fired for Escape,
                                // will go back to only showing one level of menu. Then, when the escape
                                // keyup is processed by Keying, it will close the single remaining menu.
                                // This has the effect of closing *all* menus that are open when Escape is
                                // pressed instead of the last one. So, instead, we are going to kill the
                                // keydown event, so that it doesn't have the default browser behaviour, and
                                // won't trigger an input (and then Refetch). Then the keyup will still fire
                                // so just one level of the menu will close. This is all based on the underlying
                                // assumption that preventDefault and/or stop on a keydown does not suppress
                                // the related keyup. All of the documentation found so far, suggests it should
                                // only suppress the keypress, not the keyup, but that might not be across all
                                // browsers, or implemented consistently.
                                if (se.event.raw.key === 'Escape') {
                                    se.stop();
                                }
                            })
                        ]),
                        // In addition to input handling, we want special handling for
                        // Up/Down/Left/Right/Enter/Escape/Space. We can divide these into two categories
                        //  - events that we don't want to allow the overall menu system to process (left and right and space)
                        //  - events that we want to redispatch on the "highlighted item" based on the
                        // current fake focus.
                        Keying.config({
                            mode: 'special',
                            onLeft: handleByBrowser,
                            onRight: handleByBrowser,
                            onSpace: handleByBrowser,
                            onEnter: handleByHighlightedItem,
                            onEscape: handleByHighlightedItem,
                            onUp: handleByHighlightedItem,
                            onDown: handleByHighlightedItem
                        })
                    ]),
                    // Because we have customised handling for keydown, and we are configuring
                    // Keying, we need to specify which "behaviour" (custom events or keying) gets to
                    // process the keydown event first. In this situation, we want to stop escape before
                    // anything happens (although it really isn't necessary)
                    eventOrder: {
                        keydown: [customSearcherEventsName, Keying.name()]
                    }
                })
            ]
        };
    };

const alertBannerFields = [
        type,
        text,
        requiredStringEnum('level', ['info', 'warn', 'error', 'success']),
        icon,
        defaulted('url', '')
    ];
    const alertBannerSchema = objOf(alertBannerFields);

const createBarFields = (itemsField) => [
        type,
        itemsField
    ];

const buttonFields = [
        type,
        text,
        enabled,
        generatedName('button'),
        optionalIcon,
        borderless,
        // this should be defaulted to `secondary` but the implementation needs to manage the deprecation
        optionStringEnum('buttonType', ['primary', 'secondary', 'toolbar']),
        // this should be removed, but must live here because FieldSchema doesn't have a way to manage deprecated fields
        primary,
        defaultedString('context', 'mode:design')
    ];
    const buttonSchema = objOf(buttonFields);

const formComponentFields = [
        type,
        name
    ];
    const formComponentWithLabelFields = formComponentFields.concat([
        optionalLabel
    ]);

const checkboxFields = formComponentFields.concat([
        label,
        enabled,
        defaultedString('context', 'mode:design')
    ]);
    const checkboxSchema = objOf(checkboxFields);
    const checkboxDataProcessor = boolean;

const collectionFields = formComponentWithLabelFields.concat([
        defaultedColumns('auto'),
        defaultedString('context', 'mode:design')
    ]);
    const collectionSchema = objOf(collectionFields);
    // TODO: Make type for CollectionItem
    const collectionDataProcessor = arrOfObj([
        value,
        text,
        icon
    ]);

const colorInputFields = formComponentWithLabelFields.concat([
        defaultedString('storageKey', 'default'),
        defaultedString('context', 'mode:design'),
    ]);
    const colorInputSchema = objOf(colorInputFields);
    const colorInputDataProcessor = string;

const colorPickerFields = formComponentWithLabelFields;
    const colorPickerSchema = objOf(colorPickerFields);
    const colorPickerDataProcessor = string;

const customEditorFields = formComponentFields.concat([
        defaultedString('tag', 'textarea'),
        requiredString('scriptId'),
        requiredString('scriptUrl'),
        optionFunction('onFocus'),
        defaultedPostMsg('settings', undefined)
    ]);
    const customEditorFieldsOld = formComponentFields.concat([
        defaultedString('tag', 'textarea'),
        requiredFunction('init')
    ]);
    const customEditorSchema = valueOf((v) => asRaw('customeditor.old', objOfOnly(customEditorFieldsOld), v).orThunk(() => asRaw('customeditor.new', objOfOnly(customEditorFields), v)));
    const customEditorDataProcessor = string;

const commonMenuItemFields = [
        enabled,
        optionalText,
        optionalRole,
        optionalShortcut,
        generatedValue('menuitem'),
        defaultedMeta,
        defaultedString('context', 'mode:design')
    ];

const dialogToggleMenuItemSchema = objOf([
        type,
        name
    ].concat(commonMenuItemFields));
    const dialogToggleMenuItemDataProcessor = boolean;

const baseFooterButtonFields = [
        generatedName('button'),
        optionalIcon,
        defaultedStringEnum('align', 'end', ['start', 'end']),
        // this should be removed, but must live here because FieldSchema doesn't have a way to manage deprecated fields
        primary,
        enabled,
        // this should be defaulted to `secondary` but the implementation needs to manage the deprecation
        optionStringEnum('buttonType', ['primary', 'secondary']),
        defaultedString('context', 'mode:design')
    ];
    const dialogFooterButtonFields = [
        ...baseFooterButtonFields,
        text
    ];
    const normalFooterButtonFields = [
        requiredStringEnum('type', ['submit', 'cancel', 'custom']),
        ...dialogFooterButtonFields
    ];
    const menuFooterButtonFields = [
        requiredStringEnum('type', ['menu']),
        optionalText,
        optionalTooltip,
        optionalIcon,
        requiredArrayOf('items', dialogToggleMenuItemSchema),
        ...baseFooterButtonFields
    ];
    const toggleButtonSpecFields = [
        ...baseFooterButtonFields,
        requiredStringEnum('type', ['togglebutton']),
        optionalTooltip,
        optionalIcon,
        optionalText,
        defaultedBoolean('active', false)
    ];
    const dialogFooterButtonSchema = choose$1('type', {
        submit: normalFooterButtonFields,
        cancel: normalFooterButtonFields,
        custom: normalFooterButtonFields,
        menu: menuFooterButtonFields,
        togglebutton: toggleButtonSpecFields
    });

const dropZoneFields = formComponentWithLabelFields.concat([
        defaultedString('context', 'mode:design'),
        optionString('dropAreaLabel'),
        optionString('buttonLabel'),
        optionString('allowedFileTypes'),
        optionArrayOf('allowedFileExtensions', string)
    ]);
    const dropZoneSchema = objOf(dropZoneFields);
    const dropZoneDataProcessor = arrOfVal();

const createGridFields = (itemsField) => [
        type,
        requiredNumber('columns'),
        itemsField
    ];

const htmlPanelFields = [
        type,
        requiredString('html'),
        defaultedStringEnum('presets', 'presentation', ['presentation', 'document']),
        defaultedFunction('onInit', noop),
        defaultedBoolean('stretched', false),
    ];
    const htmlPanelSchema = objOf(htmlPanelFields);

const iframeFields = formComponentWithLabelFields.concat([
        defaultedBoolean('border', false),
        defaultedBoolean('sandboxed', true),
        defaultedBoolean('streamContent', false),
        defaultedBoolean('transparent', true)
    ]);
    const iframeSchema = objOf(iframeFields);
    const iframeDataProcessor = string;

const imagePreviewSchema = objOf(formComponentFields.concat([
        optionString('height'),
    ]));
    const imagePreviewDataProcessor = objOf([
        requiredString('url'),
        optionNumber('zoom'),
        optionNumber('cachedWidth'),
        optionNumber('cachedHeight'),
    ]);

const inputFields = formComponentWithLabelFields.concat([
        optionString('inputMode'),
        optionString('placeholder'),
        defaultedBoolean('maximized', false),
        enabled,
        defaultedString('context', 'mode:design'),
    ]);
    const inputSchema = objOf(inputFields);
    const inputDataProcessor = string;

const createLabelFields = (itemsField) => [
        type,
        label,
        itemsField,
        defaultedStringEnum('align', 'start', ['start', 'center', 'end']),
        optionString('for')
    ];

const listBoxSingleItemFields = [
        text,
        value
    ];
    const listBoxNestedItemFields = [
        text,
        requiredArrayOf('items', thunkOf('items', () => listBoxItemSchema))
    ];
    const listBoxItemSchema = oneOf([
        objOf(listBoxSingleItemFields),
        objOf(listBoxNestedItemFields)
    ]);
    const listBoxFields = formComponentWithLabelFields.concat([
        requiredArrayOf('items', listBoxItemSchema),
        enabled,
        defaultedString('context', 'mode:design')
    ]);
    const listBoxSchema = objOf(listBoxFields);
    const listBoxDataProcessor = string;

const selectBoxFields = formComponentWithLabelFields.concat([
        requiredArrayOfObj('items', [
            text,
            value
        ]),
        defaultedNumber('size', 1),
        enabled,
        defaultedString('context', 'mode:design')
    ]);
    const selectBoxSchema = objOf(selectBoxFields);
    const selectBoxDataProcessor = string;

const sizeInputFields = formComponentWithLabelFields.concat([
        defaultedBoolean('constrain', true),
        enabled,
        defaultedString('context', 'mode:design')
    ]);
    const sizeInputSchema = objOf(sizeInputFields);
    const sizeInputDataProcessor = objOf([
        requiredString('width'),
        requiredString('height')
    ]);

const sliderFields = formComponentFields.concat([
        label,
        defaultedNumber('min', 0),
        defaultedNumber('max', 0),
    ]);
    const sliderSchema = objOf(sliderFields);
    const sliderInputDataProcessor = number;

const tableFields = [
        type,
        requiredArrayOf('header', string),
        requiredArrayOf('cells', arrOf(string))
    ];
    const tableSchema = objOf(tableFields);

const textAreaFields = formComponentWithLabelFields.concat([
        optionString('placeholder'),
        defaultedBoolean('maximized', false),
        enabled,
        defaultedString('context', 'mode:design'),
        optionBoolean('spellcheck'),
    ]);
    const textAreaSchema = objOf(textAreaFields);
    const textAreaDataProcessor = string;

const MenuButtonSchema = objOf([
        type,
        ...baseMenuButtonFields
    ]);
    const createMenuButton = (spec) => asRaw('menubutton', MenuButtonSchema, spec);

const urlInputFields = formComponentWithLabelFields.concat([
        defaultedStringEnum('filetype', 'file', ['image', 'media', 'file']),
        enabled,
        optionString('picker_text'),
        defaultedString('context', 'mode:design')
    ]);
    const urlInputSchema = objOf(urlInputFields);
    const urlInputDataProcessor = objOf([
        value,
        defaultedMeta
    ]);

const createItemsField = (name) => field$1('items', 'items', required$2(), arrOf(valueOf((v) => asRaw(`Checking item of ${name}`, itemSchema$1, v).fold((sErr) => Result.error(formatError(sErr)), (passValue) => Result.value(passValue)))));
    // We're using a thunk here so we can refer to panel fields
    const itemSchema$1 = valueThunk(() => choose$2('type', {
        alertbanner: alertBannerSchema,
        bar: objOf(createBarFields(createItemsField('bar'))),
        button: buttonSchema,
        checkbox: checkboxSchema,
        colorinput: colorInputSchema,
        colorpicker: colorPickerSchema,
        dropzone: dropZoneSchema,
        grid: objOf(createGridFields(createItemsField('grid'))),
        iframe: iframeSchema,
        input: inputSchema,
        listbox: listBoxSchema,
        selectbox: selectBoxSchema,
        sizeinput: sizeInputSchema,
        slider: sliderSchema,
        textarea: textAreaSchema,
        urlinput: urlInputSchema,
        customeditor: customEditorSchema,
        htmlpanel: htmlPanelSchema,
        imagepreview: imagePreviewSchema,
        collection: collectionSchema,
        label: objOf(createLabelFields(createItemsField('label'))),
        table: tableSchema,
        tree: treeSchema,
        panel: panelSchema
    }));
    const panelFields = [
        type,
        defaulted('classes', []),
        requiredArrayOf('items', itemSchema$1)
    ];
    const panelSchema = objOf(panelFields);

const tabFields = [
        generatedName('tab'),
        title,
        requiredArrayOf('items', itemSchema$1)
    ];
    const tabPanelFields = [
        type,
        requiredArrayOfObj('tabs', tabFields)
    ];
    const tabPanelSchema = objOf(tabPanelFields);

const dialogButtonFields = dialogFooterButtonFields;
    const dialogButtonSchema = dialogFooterButtonSchema;
    const dialogSchema = objOf([
        requiredString('title'),
        requiredOf('body', choose$2('type', {
            panel: panelSchema,
            tabpanel: tabPanelSchema
        })),
        defaultedString('size', 'normal'),
        defaultedArrayOf('buttons', [], dialogButtonSchema),
        defaulted('initialData', {}),
        defaultedFunction('onAction', noop),
        defaultedFunction('onChange', noop),
        defaultedFunction('onSubmit', noop),
        defaultedFunction('onClose', noop),
        defaultedFunction('onCancel', noop),
        defaultedFunction('onTabChange', noop)
    ]);
    const createDialog = (spec) => asRaw('dialog', dialogSchema, spec);

const urlDialogButtonSchema = objOf([
        requiredStringEnum('type', ['cancel', 'custom']),
        ...dialogButtonFields
    ]);
    const urlDialogSchema = objOf([
        requiredString('title'),
        requiredString('url'),
        optionNumber('height'),
        optionNumber('width'),
        optionArrayOf('buttons', urlDialogButtonSchema),
        defaultedFunction('onAction', noop),
        defaultedFunction('onCancel', noop),
        defaultedFunction('onClose', noop),
        defaultedFunction('onMessage', noop)
    ]);
    const createUrlDialog = (spec) => asRaw('dialog', urlDialogSchema, spec);

// eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
    const getAllObjects = (obj) => {
        if (isObject(obj)) {
            return [obj].concat(bind$3(values(obj), getAllObjects));
        }
        else if (isArray(obj)) {
            return bind$3(obj, getAllObjects);
        }
        else {
            return [];
        }
    };

const isNamedItem = (obj) => isString(obj.type) && isString(obj.name);
    const dataProcessors = {
        checkbox: checkboxDataProcessor,
        colorinput: colorInputDataProcessor,
        colorpicker: colorPickerDataProcessor,
        dropzone: dropZoneDataProcessor,
        input: inputDataProcessor,
        iframe: iframeDataProcessor,
        imagepreview: imagePreviewDataProcessor,
        selectbox: selectBoxDataProcessor,
        sizeinput: sizeInputDataProcessor,
        slider: sliderInputDataProcessor,
        listbox: listBoxDataProcessor,
        size: sizeInputDataProcessor,
        textarea: textAreaDataProcessor,
        urlinput: urlInputDataProcessor,
        customeditor: customEditorDataProcessor,
        collection: collectionDataProcessor,
        togglemenuitem: dialogToggleMenuItemDataProcessor
    };
    const getDataProcessor = (item) => Optional.from(dataProcessors[item.type]);
    const getNamedItems = (structure) => filter$2(getAllObjects(structure), isNamedItem);

const createDataValidator = (structure) => {
        const namedItems = getNamedItems(structure);
        const fields = bind$3(namedItems, (item) => getDataProcessor(item).fold(() => [], (schema) => [requiredOf(item.name, schema)]));
        return objOf(fields);
    };

const separatorMenuItemSchema = objOf([
        type,
        optionalText
    ]);
    const createSeparatorMenuItem = (spec) => asRaw('separatormenuitem', separatorMenuItemSchema, spec);

const autocompleterItemSchema = objOf([
        // Currently, autocomplete items don't support configuring type, active, disabled, meta
        defaultedType('autocompleteitem'),
        active,
        enabled,
        defaultedMeta,
        value,
        optionalText,
        optionalIcon
    ]);
    objOf([
        type,
        requiredString('trigger'),
        defaultedNumber('minChars', 1),
        defaultedColumns(1),
        defaultedNumber('maxResults', 10),
        optionFunction('matches'),
        fetch,
        onAction,
        defaultedArrayOf('highlightOn', [], string)
    ]);
    const createSeparatorItem = (spec) => asRaw('Autocompleter.Separator', separatorMenuItemSchema, spec);
    const createAutocompleterItem = (spec) => asRaw('Autocompleter.Item', autocompleterItemSchema, spec);

const baseToolbarButtonFields = [
        enabled,
        optionalTooltip,
        optionalIcon,
        optionalText,
        onSetup,
        defaultedString('context', 'mode:design')
    ];
    const toolbarButtonSchema = objOf([
        type,
        onAction,
        optionalShortcut
    ].concat(baseToolbarButtonFields));
    const createToolbarButton = (spec) => asRaw('toolbarbutton', toolbarButtonSchema, spec);

const baseToolbarToggleButtonFields = [
        active
    ].concat(baseToolbarButtonFields);
    const toggleButtonSchema = objOf(baseToolbarToggleButtonFields.concat([
        type,
        onAction,
        optionalShortcut
    ]));
    const createToggleButton = (spec) => asRaw('ToggleButton', toggleButtonSchema, spec);

const contextBarFields = [
        defaultedFunction('predicate', never),
        defaultedStringEnum('scope', 'node', ['node', 'editor']),
        defaultedStringEnum('position', 'selection', ['node', 'selection', 'line'])
    ];

const launchButtonFields = baseToolbarButtonFields.concat([
        defaultedType('contexttoolbarbutton')
    ]);
    const contextToolbarSchema = objOf([
        defaultedType('contexttoolbar'),
        optionObjOf('launch', launchButtonFields),
        requiredOf('items', oneOf([
            string,
            arrOfObj([
                optionString('name'),
                optionString('label'),
                requiredArrayOf('items', string)
            ])
        ])),
    ].concat(contextBarFields));
    const toolbarGroupBackToSpec = (toolbarGroup) => ({
        name: toolbarGroup.name.getOrUndefined(),
        label: toolbarGroup.label.getOrUndefined(),
        items: toolbarGroup.items
    });
    const contextToolbarToSpec = (contextToolbar) => ({
        ...contextToolbar,
        launch: contextToolbar.launch.getOrUndefined(),
        items: isString(contextToolbar.items) ? contextToolbar.items : map$2(contextToolbar.items, toolbarGroupBackToSpec)
    });
    const createContextToolbar = (spec) => asRaw('ContextToolbar', contextToolbarSchema, spec);

const cardImageFields = [
        type,
        requiredString('src'),
        optionString('alt'),
        defaultedArrayOf('classes', [], string)
    ];
    const cardImageSchema = objOf(cardImageFields);

const cardTextFields = [
        type,
        text,
        optionalName,
        defaultedArrayOf('classes', ['tox-collection__item-label'], string)
    ];
    const cardTextSchema = objOf(cardTextFields);

const itemSchema = valueThunk(() => choose$2('type', {
        cardimage: cardImageSchema,
        cardtext: cardTextSchema,
        cardcontainer: cardContainerSchema
    }));
    const cardContainerSchema = objOf([
        type,
        defaultedString('direction', 'horizontal'),
        defaultedString('align', 'left'),
        defaultedString('valign', 'middle'),
        requiredArrayOf('items', itemSchema)
    ]);

const cardMenuItemSchema = objOf([
        type,
        optionalLabel,
        requiredArrayOf('items', itemSchema),
        onSetup,
        defaultedOnAction
    ].concat(commonMenuItemFields));
    const createCardMenuItem = (spec) => asRaw('cardmenuitem', cardMenuItemSchema, spec);

const choiceMenuItemSchema = objOf([
        type,
        active,
        optionalIcon,
        optionalLabel
    ].concat(commonMenuItemFields));
    const createChoiceMenuItem = (spec) => asRaw('choicemenuitem', choiceMenuItemSchema, spec);

const imageMenuItemSchema = objOf([
        type,
        active,
        url,
        optionalLabel,
        optionalTooltip
    ].concat(commonMenuItemFields));
    const resetImageItemSchema = objOf([
        type,
        active,
        icon,
        label,
        optionalTooltip,
        value
    ].concat(commonMenuItemFields));
    const createImageMenuItem = (spec) => asRaw('imagemenuitem', imageMenuItemSchema, spec);
    const createResetImageItem = (spec) => asRaw('resetimageitem', resetImageItemSchema, spec);

const menuItemSchema = objOf([
        type,
        onSetup,
        defaultedOnAction,
        optionalIcon
    ].concat(commonMenuItemFields));
    const createMenuItem = (spec) => asRaw('menuitem', menuItemSchema, spec);

const nestedMenuItemSchema = objOf([
        type,
        getSubmenuItems,
        onSetup,
        optionalIcon
    ].concat(commonMenuItemFields));
    const createNestedMenuItem = (spec) => asRaw('nestedmenuitem', nestedMenuItemSchema, spec);

const toggleMenuItemSchema = objOf([
        type,
        optionalIcon,
        active,
        onSetup,
        onAction
    ].concat(commonMenuItemFields));
    const createToggleMenuItem = (spec) => asRaw('togglemenuitem', toggleMenuItemSchema, spec);

const sidebarSchema = objOf([
        optionalIcon,
        optionalTooltip,
        defaultedFunction('onShow', noop),
        defaultedFunction('onHide', noop),
        onSetup
    ]);
    const createSidebar = (spec) => asRaw('sidebar', sidebarSchema, spec);

const groupToolbarButtonSchema = objOf([
        type,
        requiredOf('items', oneOf([
            arrOfObj([
                name,
                requiredArrayOf('items', string)
            ]),
            string
        ]))
    ].concat(baseToolbarButtonFields));
    const createGroupToolbarButton = (spec) => asRaw('GroupToolbarButton', groupToolbarButtonSchema, spec);

const splitButtonSchema = objOf([
        type,
        optionalTooltip,
        optionalChevronTooltip,
        optionalIcon,
        optionalText,
        optionalSelect,
        fetch,
        onSetup,
        // TODO: Validate the allowed presets
        defaultedStringEnum('presets', 'normal', ['normal', 'color', 'listpreview']),
        defaultedColumns(1),
        onAction,
        onItemAction,
        defaultedString('context', 'mode:design')
    ]);
    const createSplitButton = (spec) => asRaw('SplitButton', splitButtonSchema, spec);

const baseButtonFields = [
        optionalText,
        optionalIcon,
        optionString('tooltip'),
        defaultedStringEnum('buttonType', 'secondary', ['primary', 'secondary']),
        defaultedBoolean('borderless', false),
        requiredFunction('onAction'),
        defaultedString('context', 'mode:design')
    ];
    const normalButtonFields = [
        ...baseButtonFields,
        text,
        requiredStringEnum('type', ['button']),
    ];
    const toggleButtonFields = [
        ...baseButtonFields,
        defaultedBoolean('active', false),
        requiredStringEnum('type', ['togglebutton'])
    ];
    const schemaWithoutGroupButton = {
        button: normalButtonFields,
        togglebutton: toggleButtonFields,
    };
    const groupFields = [
        requiredStringEnum('type', ['group']),
        defaultedArrayOf('buttons', [], choose$1('type', schemaWithoutGroupButton))
    ];
    const viewButtonSchema = choose$1('type', {
        ...schemaWithoutGroupButton,
        group: groupFields
    });

const viewSchema = objOf([
        defaultedArrayOf('buttons', [], viewButtonSchema),
        requiredFunction('onShow'),
        requiredFunction('onHide')
    ]);
    const createView = (spec) => asRaw('view', viewSchema, spec);

// Consider moving to alloy once it takes shape.
    const namedEvents = (name, handlers) => derive$1([
        config(name, handlers)
    ]);
    const unnamedEvents = (handlers) => namedEvents(generate$6('unnamed-events'), handlers);
    const SimpleBehaviours = {
        namedEvents,
        unnamedEvents
    };

// Perform `action` when an item is clicked on, close menus, and stop event
    const onMenuItemExecute = (info, itemResponse) => runOnExecute$1((comp, simulatedEvent) => {
        // If there is an action, run the action
        runWithApi(info, comp)(info.onAction);
        if (!info.triggersSubmenu && itemResponse === ItemResponse$1.CLOSE_ON_EXECUTE) {
            if (comp.getSystem().isConnected()) {
                emit(comp, sandboxClose());
            }
            simulatedEvent.stop();
        }
    });
    const menuItemEventOrder = {
        // TODO: use the constants provided by behaviours.
        [execute$5()]: ['disabling', 'alloy.base.behaviour', 'toggling', 'item-events']
    };

// Converts shortcut format to Mac/PC variants
    // Note: This is different to the help shortcut converter, as it doesn't padd the + symbol with spaces
    //       so as to not take up large amounts of space in the menus
    const convertText = (source) => {
        const isMac = global$7.os.isMacOS() || global$7.os.isiOS();
        const mac = {
            alt: '\u2325',
            ctrl: '\u2303',
            shift: '\u21E7',
            meta: '\u2318',
            access: '\u2303\u2325'
        };
        const other = {
            meta: 'Ctrl',
            access: 'Shift+Alt'
        };
        const replace = isMac ? mac : other;
        const shortcut = source.split('+');
        const updated = map$2(shortcut, (segment) => {
            // search lowercase, but if not found use the original
            const search = segment.toLowerCase().trim();
            return has$2(replace, search) ? replace[search] : segment;
        });
        return isMac ? updated.join('') : updated.join('+');
    };

// Use meta to pass through special information about the tooltip
    // (yes this is horrible but it is not yet public API)
    const tooltipBehaviour = (meta, sharedBackstage, tooltipText) => get$h(meta, 'tooltipWorker')
        .map((tooltipWorker) => [
        Tooltipping.config({
            lazySink: sharedBackstage.getSink,
            tooltipDom: {
                tag: 'div',
                classes: ['tox-tooltip-worker-container']
            },
            tooltipComponents: [],
            anchor: (comp) => ({
                type: 'submenu',
                item: comp,
                overrides: {
                    // NOTE: this avoids it setting overflow and max-height.
                    maxHeightFunction: expandable$1
                }
            }),
            mode: 'follow-highlight',
            onShow: (component, _tooltip) => {
                tooltipWorker((elm) => {
                    Tooltipping.setComponents(component, [
                        external({ element: SugarElement.fromDom(elm) })
                    ]);
                });
            }
        })
    ])
        .getOrThunk(() => {
        return tooltipText.map((text) => [
            Tooltipping.config({
                ...sharedBackstage.providers.tooltips.getConfig({
                    tooltipText: text
                }),
                mode: 'follow-highlight'
            })
        ]).getOr([]);
    });
    const encodeText = (text) => global$9.DOM.encode(text);
    const replaceText = (text, matchText) => {
        const translated = global$6.translate(text);
        const encoded = encodeText(translated);
        if (matchText.length > 0) {
            const escapedMatchRegex = new RegExp(escape(matchText), 'gi');
            return encoded.replace(escapedMatchRegex, (match) => `<span class="tox-autocompleter-highlight">${match}</span>`);
        }
        else {
            return encoded;
        }
    };
    const renderAutocompleteItem = (spec, matchText, useText, presets, onItemValueHandler, itemResponse, sharedBackstage, renderIcons = true) => {
        const structure = renderItemStructure({
            presets,
            textContent: Optional.none(),
            htmlContent: useText ? spec.text.map((text) => replaceText(text, matchText)) : Optional.none(),
            ariaLabel: spec.text,
            labelContent: Optional.none(),
            iconContent: spec.icon,
            shortcutContent: Optional.none(),
            checkMark: Optional.none(),
            caret: Optional.none(),
            value: spec.value
        }, sharedBackstage.providers, renderIcons, spec.icon);
        const tooltipString = spec.text.filter((text) => !useText && text !== '');
        return renderCommonItem({
            context: 'mode:design',
            data: buildData(spec),
            enabled: spec.enabled,
            getApi: constant$1({}),
            onAction: (_api) => onItemValueHandler(spec.value, spec.meta),
            onSetup: constant$1(noop),
            triggersSubmenu: false,
            itemBehaviours: tooltipBehaviour(spec, sharedBackstage, tooltipString)
        }, structure, itemResponse, sharedBackstage.providers);
    };

const hexToHsv = (hex) => fromRgb(fromHex(hex));
    const hsvToHex = (hsv) => fromRgba(fromHsv(hsv));
    const anyToHex = (color) => fromString$1(color)
        .orThunk(() => fromString(color).map(fromRgba))
        .getOrThunk(() => {
        // Not dealing with Hex or RGBA so use a canvas to parse the color
        const canvas = document.createElement('canvas');
        canvas.height = 1;
        canvas.width = 1;
        const canvasContext = canvas.getContext('2d');
        // all valid colors after this point
        canvasContext.clearRect(0, 0, canvas.width, canvas.height);
        // invalid colors will be shown as white - the first assignment will pass and the second may be ignored
        canvasContext.fillStyle = '#FFFFFF';
        canvasContext.fillStyle = color;
        canvasContext.fillRect(0, 0, 1, 1);
        const rgba = canvasContext.getImageData(0, 0, 1, 1).data;
        const r = rgba[0];
        const g = rgba[1];
        const b = rgba[2];
        const a = rgba[3];
        return fromRgba(rgbaColour(r, g, b, a));
    });

var global$5 = tinymce.util.Tools.resolve('tinymce.util.LocalStorage');

const fancyMenuItems = {
        inserttable: renderInsertTableMenuItem,
        colorswatch: renderColorSwatchItem,
        imageselect: renderImageSelector
    };
    const renderFancyMenuItem = (spec, backstage) => get$h(fancyMenuItems, spec.fancytype).map((render) => render(spec, backstage));

// Note, this does not create a valid SketchSpec.
    const renderNestedItem = (spec, itemResponse, providersBackstage, renderIcons = true, downwardsCaret = false) => {
        const caret = downwardsCaret ? renderDownwardsCaret(providersBackstage.icons) : renderSubmenuCaret(providersBackstage.icons);
        const getApi = (component) => ({
            isEnabled: () => !Disabling.isDisabled(component),
            setEnabled: (state) => Disabling.set(component, !state),
            setIconFill: (id, value) => {
                descendant(component.element, `svg path[class="${id}"], rect[class="${id}"]`).each((underlinePath) => {
                    set$9(underlinePath, 'fill', value);
                });
            },
            setTooltip: (tooltip) => {
                const translatedTooltip = providersBackstage.translate(tooltip);
                set$9(component.element, 'aria-label', translatedTooltip);
            }
        });
        const structure = renderItemStructure({
            presets: 'normal',
            iconContent: spec.icon,
            textContent: spec.text,
            htmlContent: Optional.none(),
            ariaLabel: spec.text,
            labelContent: Optional.none(),
            caret: Optional.some(caret),
            checkMark: Optional.none(),
            shortcutContent: spec.shortcut
        }, providersBackstage, renderIcons);
        return renderCommonItem({
            context: spec.context,
            data: buildData(spec),
            getApi,
            enabled: spec.enabled,
            onAction: noop,
            onSetup: spec.onSetup,
            triggersSubmenu: true,
            itemBehaviours: []
        }, structure, itemResponse, providersBackstage);
    };

// Note, this does not create a valid SketchSpec.
    const renderNormalItem = (spec, itemResponse, providersBackstage, renderIcons = true) => {
        const getApi = (component) => ({
            isEnabled: () => !Disabling.isDisabled(component),
            setEnabled: (state) => Disabling.set(component, !state)
        });
        const structure = renderItemStructure({
            presets: 'normal',
            iconContent: spec.icon,
            textContent: spec.text,
            htmlContent: Optional.none(),
            labelContent: Optional.none(),
            ariaLabel: spec.text,
            caret: Optional.none(),
            checkMark: Optional.none(),
            shortcutContent: spec.shortcut
        }, providersBackstage, renderIcons);
        return renderCommonItem({
            context: spec.context,
            data: buildData(spec),
            getApi,
            enabled: spec.enabled,
            onAction: spec.onAction,
            onSetup: spec.onSetup,
            triggersSubmenu: false,
            itemBehaviours: []
        }, structure, itemResponse, providersBackstage);
    };

const renderSeparatorItem = (spec) => ({
        type: 'separator',
        dom: {
            tag: 'div',
            classes: [selectableClass, groupHeadingClass]
        },
        components: spec.text.map(text$2).toArray()
    });

const autocomplete = renderAutocompleteItem;
    const separator$3 = renderSeparatorItem;
    const normal = renderNormalItem;
    const nested = renderNestedItem;
    const toggle = renderToggleMenuItem;
    const fancy = renderFancyMenuItem;
    const card = renderCardMenuItem;

var FocusMode;
    (function (FocusMode) {
        FocusMode[FocusMode["ContentFocus"] = 0] = "ContentFocus";
        FocusMode[FocusMode["UiFocus"] = 1] = "UiFocus";
    })(FocusMode || (FocusMode = {}));
    const createMenuItemFromBridge = (item, itemResponse, backstage, menuHasIcons, isHorizontalMenu) => {
        const providersBackstage = backstage.shared.providers;
        // If we're making a horizontal menu (mobile context menu) we want text OR icons
        // to simplify the UI. We also don't want shortcut text.
        const parseForHorizontalMenu = (menuitem) => !isHorizontalMenu ? menuitem : ({
            ...menuitem,
            shortcut: Optional.none(),
            icon: menuitem.text.isSome() ? Optional.none() : menuitem.icon
        });
        switch (item.type) {
            case 'menuitem':
                return createMenuItem(item).fold(handleError, (d) => Optional.some(normal(parseForHorizontalMenu(d), itemResponse, providersBackstage, menuHasIcons)));
            case 'nestedmenuitem':
                return createNestedMenuItem(item).fold(handleError, (d) => Optional.some(nested(parseForHorizontalMenu(d), itemResponse, providersBackstage, menuHasIcons, isHorizontalMenu)));
            case 'togglemenuitem':
                return createToggleMenuItem(item).fold(handleError, (d) => Optional.some(toggle(parseForHorizontalMenu(d), itemResponse, providersBackstage, menuHasIcons)));
            case 'separator':
                return createSeparatorMenuItem(item).fold(handleError, (d) => Optional.some(separator$3(d)));
            case 'fancymenuitem':
                return createFancyMenuItem(item).fold(handleError, 
                // Fancy menu items don't have shortcuts or icons
                (d) => fancy(d, backstage));
            default: {
                // eslint-disable-next-line no-console
                console.error('Unknown item in general menu', item);
                return Optional.none();
            }
        }
    };
    const createAutocompleteItems = (items, matchText, onItemValueHandler, columns, itemResponse, sharedBackstage, highlightOn) => {
        // Render text and icons if we're using a single column, otherwise only render icons
        const renderText = columns === 1;
        const renderIcons = !renderText || menuHasIcons(items);
        return cat(map$2(items, (item) => {
            switch (item.type) {
                case 'separator':
                    return createSeparatorItem(item).fold(handleError, (d) => Optional.some(separator$3(d)));
                case 'cardmenuitem':
                    return createCardMenuItem(item).fold(handleError, (d) => Optional.some(card({
                        ...d,
                        // Intercept action
                        onAction: (api) => {
                            d.onAction(api);
                            onItemValueHandler(d.value, d.meta);
                        }
                    }, itemResponse, sharedBackstage, {
                        itemBehaviours: tooltipBehaviour(d.meta, sharedBackstage, Optional.none()),
                        cardText: {
                            matchText,
                            highlightOn
                        }
                    })));
                case 'autocompleteitem':
                default:
                    return createAutocompleterItem(item).fold(handleError, (d) => Optional.some(autocomplete(d, matchText, renderText, 'normal', onItemValueHandler, itemResponse, sharedBackstage, renderIcons)));
            }
        }));
    };
    const createPartialMenu = (value, items, itemResponse, backstage, isHorizontalMenu, searchMode) => {
        const hasIcons = menuHasIcons(items);
        const alloyItems = cat(map$2(items, (item) => {
            // Have to check each item for an icon, instead of as part of hasIcons above,
            // else in horizontal menus, items with an icon but without text will display
            // with neither
            const itemHasIcon = (i) => isHorizontalMenu ? !has$2(i, 'text') : hasIcons;
            const createItem = (i) => createMenuItemFromBridge(i, itemResponse, backstage, itemHasIcon(i), isHorizontalMenu);
            if (item.type === 'nestedmenuitem' && item.getSubmenuItems().length <= 0) {
                return createItem({ ...item, enabled: false });
            }
            else {
                return createItem(item);
            }
        }));
        // The menu layout is dependent upon our search mode.
        const menuLayout = identifyMenuLayout(searchMode);
        const createPartial = isHorizontalMenu ?
            createHorizontalPartialMenuWithAlloyItems :
            createPartialMenuWithAlloyItems;
        return createPartial(value, hasIcons, alloyItems, 1, menuLayout);
    };
    const createTieredDataFrom = (partialMenu) => tieredMenu.singleData(partialMenu.value, partialMenu);
    const createInlineMenuFrom = (partialMenu, columns, focusMode, presets) => {
        const movement = deriveMenuMovement(columns, presets);
        const menuMarkers = markers(presets);
        return {
            data: createTieredDataFrom({
                ...partialMenu,
                movement,
                menuBehaviours: SimpleBehaviours.unnamedEvents(columns !== 'auto' ? [] : [
                    runOnAttached((comp, _se) => {
                        detectSize(comp, 4, menuMarkers.item).each(({ numColumns, numRows }) => {
                            Keying.setGridSize(comp, numRows, numColumns);
                        });
                    })
                ])
            }),
            menu: {
                markers: markers(presets),
                fakeFocus: focusMode === FocusMode.ContentFocus
            }
        };
    };

const renderBar = (spec, backstage) => ({
        dom: {
            tag: 'div',
            classes: ['tox-bar', 'tox-form__controls-h-stack']
        },
        components: map$2(spec.items, backstage.interpreter)
    });

var global$4 = tinymce.util.Tools.resolve('tinymce.html.Entities');

const formChangeEvent = generate$6('form-component-change');
    const formInputEvent = generate$6('form-component-input');
    const formCloseEvent = generate$6('form-close');
    const formCancelEvent = generate$6('form-cancel');
    const formActionEvent = generate$6('form-action');
    const formSubmitEvent = generate$6('form-submit');
    const formBlockEvent = generate$6('form-block');
    const formUnblockEvent = generate$6('form-unblock');
    const formTabChangeEvent = generate$6('form-tabchange');
    const formResizeEvent = generate$6('form-resize');

const renderPanelButton = (spec, sharedBackstage) => Dropdown.sketch({
        dom: spec.dom,
        components: spec.components,
        toggleClass: 'mce-active',
        dropdownBehaviours: derive$1([
            DisablingConfigs.button(() => sharedBackstage.providers.isDisabled() || sharedBackstage.providers.checkUiComponentContext(spec.context).shouldDisable),
            toggleOnReceive(() => sharedBackstage.providers.checkUiComponentContext(spec.context)),
            Unselecting.config({}),
            Tabstopping.config({})
        ]),
        layouts: spec.layouts,
        sandboxClasses: ['tox-dialog__popups'],
        lazySink: sharedBackstage.getSink,
        fetch: (comp) => Future.nu((callback) => spec.fetch(callback)).map((items) => Optional.from(createTieredDataFrom(deepMerge(createPartialChoiceMenu(generate$6('menu-value'), items, (value) => {
            spec.onItemAction(comp, value);
        }, spec.columns, spec.presets, ItemResponse$1.CLOSE_ON_EXECUTE, 
        // No colour is ever selected on opening
        never, sharedBackstage.providers), {
            movement: deriveMenuMovement(spec.columns, spec.presets)
        })))),
        parts: {
            menu: part(false, 1, spec.presets)
        }
    });

// TODO: Move this to alloy if the concept works out
    // eslint-disable-next-line consistent-this
    const self = () => Composing.config({
        find: Optional.some
    });
    const memento$1 = (mem) => Composing.config({
        find: mem.getOpt
    });
    const childAt = (index) => Composing.config({
        find: (comp) => child$2(comp.element, index)
            .bind((element) => comp.getSystem().getByDom(element).toOptional())
    });
    const ComposingConfigs = {
        self,
        memento: memento$1,
        childAt
    };

const fieldsUpdate = generate$6('rgb-hex-update');
    const sliderUpdate = generate$6('slider-update');
    const paletteUpdate = generate$6('palette-update');

var global$3 = tinymce.util.Tools.resolve('tinymce.Resource');

var global$2 = tinymce.util.Tools.resolve('tinymce.util.Tools');

const renderGrid = (spec, backstage) => ({
        dom: {
            tag: 'div',
            classes: ['tox-form__grid', `tox-form__grid--${spec.columns}col`]
        },
        components: map$2(spec.items, backstage.interpreter)
    });

const dialogChannel = generate$6('update-dialog');
    const titleChannel = generate$6('update-title');
    const bodyChannel = generate$6('update-body');
    const footerChannel = generate$6('update-footer');
    const bodySendMessageChannel = generate$6('body-send-message');
    const dialogFocusShiftedChannel = generate$6('dialog-focus-shifted');

const forceInitialSize = (comp) => set$7(comp.element, 'width', get$e(comp.element, 'width'));

const renderPanel = (spec, backstage) => ({
        dom: {
            tag: 'div',
            classes: spec.classes
        },
        // All of the items passed through the form need to be put through the interpreter
        // with their form part preserved.
        components: map$2(spec.items, backstage.shared.interpreter)
    });

const colorPicker = (editor) => (callback, value) => {
        const dialog = colorPickerDialog(editor);
        dialog(callback, value);
    };
    const hasCustomColors = (editor) => () => hasCustomColors$1(editor);
    const getColors = (editor) => (id) => getColors$2(editor, id);
    const getColorCols = (editor) => (id) => getColorCols$1(editor, id);
    const ColorInputBackstage = (editor) => ({
        colorPicker: colorPicker(editor),
        hasCustomColors: hasCustomColors(editor),
        getColors: getColors(editor),
        getColorCols: getColorCols(editor)
    });

const isDraggableModal = (editor) => () => isDraggableModal$1(editor);
    const DialogBackstage = (editor) => ({
        isDraggableModal: isDraggableModal(editor)
    });

const HeaderBackstage = (editor) => {
        const mode = Cell(isToolbarLocationBottom(editor) ? 'bottom' : 'top');
        return {
            isPositionedAtTop: () => mode.get() === 'top',
            getDockingMode: mode.get,
            setDockingMode: mode.set
        };
    };

const setup$a = noop;
    const isDocked$1 = never;
    const getBehaviours$1 = constant$1([]);

var StaticHeader = /*#__PURE__*/Object.freeze({
        __proto__: null,
        setup: setup$a,
        isDocked: isDocked$1,
        getBehaviours: getBehaviours$1
    });

const toolbarHeightChange = constant$1(generate$6('toolbar-height-change'));

var StickyHeader = /*#__PURE__*/Object.freeze({
        __proto__: null,
        setup: setup$9,
        isDocked: isDocked,
        getBehaviours: getBehaviours
    });

const renderHeader = (spec) => {
        const editor = spec.editor;
        const getBehaviours$2 = spec.sticky ? getBehaviours : getBehaviours$1;
        return {
            uid: spec.uid,
            dom: spec.dom,
            components: spec.components,
            behaviours: derive$1(getBehaviours$2(editor, spec.sharedBackstage))
        };
    };

const makeTooltipText = (editor, labelWithPlaceholder, value) => isEmpty(value) ? editor.translate(labelWithPlaceholder) : editor.translate([labelWithPlaceholder, editor.translate(value)]);

const findNearest = (editor, getStyles) => {
        const styles = getStyles();
        const formats = map$2(styles, (style) => style.format);
        return Optional.from(editor.formatter.closest(formats)).bind((fmt) => find$5(styles, (data) => data.format === fmt));
    };

var global$1 = tinymce.util.Tools.resolve('tinymce.util.VK');

// Set toolbar(s) depending on if multiple toolbars is configured or not
    const setToolbar = (editor, uiRefs, rawUiConfig, backstage) => {
        const outerContainer = uiRefs.mainUi.outerContainer;
        const toolbarConfig = rawUiConfig.toolbar;
        const toolbarButtonsConfig = rawUiConfig.buttons;
        // Check if toolbar type is a non-empty string array
        if (isArrayOf(toolbarConfig, isString)) {
            const toolbars = toolbarConfig.map((t) => {
                const config = { toolbar: t, buttons: toolbarButtonsConfig, allowToolbarGroups: rawUiConfig.allowToolbarGroups };
                return identifyButtons(editor, config, backstage, Optional.none());
            });
            OuterContainer.setToolbars(outerContainer, toolbars);
        }
        else {
            OuterContainer.setToolbar(outerContainer, identifyButtons(editor, rawUiConfig, backstage, Optional.none()));
        }
    };

var Iframe = /*#__PURE__*/Object.freeze({
        __proto__: null,
        render: render$1
    });

const { ToolbarLocation, ToolbarMode } = Options;
    const maximumDistanceToEdge = 40;
    const InlineHeader = (editor, targetElm, uiRefs, backstage, floatContainer) => {
        const { mainUi, uiMotherships } = uiRefs;
        const DOM = global$9.DOM;
        const useFixedToolbarContainer = useFixedContainer(editor);
        const isSticky = isStickyToolbar(editor);
        const editorMaxWidthOpt = getMaxWidthOption(editor).or(getWidth(editor));
        const headerBackstage = backstage.shared.header;
        const isPositionedAtTop = headerBackstage.isPositionedAtTop;
        const minimumToolbarWidth = 150; // Value is arbitrary.
        const toolbarMode = getToolbarMode(editor);
        const isSplitToolbar = toolbarMode === ToolbarMode.sliding || toolbarMode === ToolbarMode.floating;
        const visible = Cell(false);
        const isVisible = () => visible.get() && !editor.removed;
        // Calculate the toolbar offset when using a split toolbar drawer
        const calcToolbarOffset = (toolbar) => isSplitToolbar ?
            toolbar.fold(constant$1(0), (tbar) => 
            // If we have an overflow toolbar, we need to offset the positioning by the height of the overflow toolbar
            tbar.components().length > 1 ? get$d(tbar.components()[1].element) : 0) : 0;
        const calcMode = (container) => {
            switch (getToolbarLocation(editor)) {
                case ToolbarLocation.auto:
                    const toolbar = OuterContainer.getToolbar(mainUi.outerContainer);
                    const offset = calcToolbarOffset(toolbar);
                    const toolbarHeight = get$d(container.element) - offset;
                    const targetBounds = box$1(targetElm);
                    // Determine if the toolbar has room to render at the top/bottom of the document
                    const roomAtTop = targetBounds.y > toolbarHeight;
                    if (roomAtTop) {
                        return 'top';
                    }
                    else {
                        const doc = documentElement(targetElm);
                        const docHeight = Math.max(doc.dom.scrollHeight, get$d(doc));
                        const roomAtBottom = targetBounds.bottom < docHeight - toolbarHeight;
                        // If there isn't ever room to add the toolbar above the target element, then place the toolbar at the bottom.
                        // Likewise if there's no room at the bottom, then we should show at the top. If there's no room at the bottom
                        // or top, then prefer the bottom except when it'll prevent accessing the content at the bottom.
                        // Make sure to exclude scroll position, as we want to still show at the top if the user can scroll up to undock
                        if (roomAtBottom) {
                            return 'bottom';
                        }
                        else {
                            const winBounds = win();
                            const isRoomAtBottomViewport = winBounds.bottom < targetBounds.bottom - toolbarHeight;
                            return isRoomAtBottomViewport ? 'bottom' : 'top';
                        }
                    }
                case ToolbarLocation.bottom:
                    return 'bottom';
                case ToolbarLocation.top:
                default:
                    return 'top';
            }
        };
        const setupMode = (mode) => {
            // Update the docking mode
            floatContainer.on((container) => {
                Docking.setModes(container, [mode]);
                headerBackstage.setDockingMode(mode);
                // Update the vertical menu direction
                const verticalDir = isPositionedAtTop() ? AttributeValue.TopToBottom : AttributeValue.BottomToTop;
                set$9(container.element, Attribute, verticalDir);
            });
        };
        const updateChromeWidth = () => {
            floatContainer.on((container) => {
                // Update the max width of the inline toolbar
                const maxWidth = editorMaxWidthOpt.getOrThunk(() => {
                    // Adding 10px of margin so that the toolbar won't try to wrap
                    return getBounds$1().width - viewport$1(targetElm).left - 10;
                });
                set$7(container.element, 'max-width', maxWidth + 'px');
            });
        };
        const updateChromePosition = (isOuterContainerWidthRestored, prevScroll) => {
            floatContainer.on((container) => {
                const toolbar = OuterContainer.getToolbar(mainUi.outerContainer);
                const offset = calcToolbarOffset(toolbar);
                // The float container/editor may not have been rendered yet, which will cause it to have a non integer based positions
                // so we need to round this to account for that.
                const targetBounds = box$1(targetElm);
                const offsetParent = getOffsetParent$1(editor, mainUi.outerContainer.element);
                const getLeft = () => offsetParent.fold(() => targetBounds.x, (offsetParent) => {
                    // Because for ui_mode: split, the main mothership (which includes the toolbar) is moved and added as a sibling
                    // If there's any relative position div set as the parent and the offsetParent is no longer the body,
                    // the absolute top/left positions would no longer be correct
                    // When there's a relative div and the position is the same as the toolbar container
                    // then it would produce a negative top as it needs to be positioned on top of the offsetParent
                    const offsetBox = box$1(offsetParent);
                    const isOffsetParentBody = eq(offsetParent, body());
                    return isOffsetParentBody
                        ? targetBounds.x
                        : targetBounds.x - offsetBox.x;
                });
                const getTop = () => offsetParent.fold(() => isPositionedAtTop()
                    ? Math.max(targetBounds.y - get$d(container.element) + offset, 0)
                    : targetBounds.bottom, (offsetParent) => {
                    // Because for ui_mode: split, the main mothership (which includes the toolbar) is moved and added as a sibling
                    // If there's any relative position div set as the parent and the offsetParent is no longer the body,
                    // the absolute top/left positions would no longer be correct
                    // When there's a relative div and the position is the same as the toolbar container
                    // then it would produce a negative top as it needs to be positioned on top of the offsetParent
                    const offsetBox = box$1(offsetParent);
                    const scrollDelta = offsetParent.dom.scrollTop ?? 0;
                    const isOffsetParentBody = eq(offsetParent, body());
                    const topValue = isOffsetParentBody
                        ? Math.max(targetBounds.y - get$d(container.element) + offset, 0)
                        : targetBounds.y - offsetBox.y + scrollDelta - get$d(container.element) + offset;
                    return isPositionedAtTop()
                        ? topValue
                        : targetBounds.bottom;
                });
                const left = getLeft();
                const widthProperties = someIf(isOuterContainerWidthRestored, 
                // This width can be used for calculating the "width" when resolving issues with flex-wrapping being triggered at the window width, despite scroll space being available to the right.
                Math.ceil(mainUi.outerContainer.element.dom.getBoundingClientRect().width))
                    // this check is needed because if the toolbar is rendered outside of the `outerContainer` because the toolbar have `position: "fixed"`
                    // the calculate width isn't correct
                    .filter((w) => w > minimumToolbarWidth).map((toolbarWidth) => {
                    const scroll = prevScroll.getOr(get$b());
                    /*
                  As the editor container can wrap its elements (due to flex-wrap), the width of the container impacts also its height. Adding a minimum width works around two problems:
        
                  a) The docking behaviour (e.g. lazyContext) does not handle the situation of a very thin component near the edge of the screen very well, and actually has no concept of horizontal scroll - it only checks y values.
        
                  b) A very small toolbar is essentially unusable. On scrolling of X, we keep updating the width of the toolbar so that it can grow to fit the available space.
        
                  Note: this is entirely determined on the number of items in the menu and the toolbar, because when they wrap, that's what causes the height. Also, having multiple toolbars can also make it higher.
                  */
                    const availableWidth = window.innerWidth - (left - scroll.left);
                    const width = Math.max(Math.min(toolbarWidth, availableWidth), minimumToolbarWidth);
                    if (availableWidth < toolbarWidth) {
                        set$7(mainUi.outerContainer.element, 'width', width + 'px');
                    }
                    return {
                        width: width + 'px'
                    };
                }).getOr({ width: 'max-content' });
                const baseProperties = {
                    position: 'absolute',
                    left: Math.round(left) + 'px',
                    top: getTop() + 'px'
                };
                setAll(mainUi.outerContainer.element, {
                    ...baseProperties,
                    ...widthProperties
                });
            });
        };
        // This would return Optional.none, for ui_mode: combined, which will fallback to the default code block
        // For ui_mode: split, the offsetParent would be the body if there were no relative div set as parent
        const getOffsetParent$1 = (editor, element) => isSplitUiMode(editor) ? getOffsetParent(element) : Optional.none();
        const repositionPopups$1 = () => {
            each$1(uiMotherships, (m) => {
                m.broadcastOn([repositionPopups()], {});
            });
        };
        const restoreOuterContainerWidth = () => {
            /*
            Editors can be placed so far to the right that their left position is beyond the window width. This causes problems with flex-wrap. To solve this, set a width style on the container.
            Natural width of the container needs to be calculated first.
            */
            if (!useFixedToolbarContainer) {
                const toolbarCurrentRightsidePosition = absolute$3(mainUi.outerContainer.element).left + getOuter(mainUi.outerContainer.element);
                /*
                Check the width if we are within X number of pixels to the edge ( or above ). Also check if we have the width-value set.
                This helps handling the issue where it goes from having a width set ( because it's too wide ) to going so far from the edge it no longer triggers the problem. Common when the width is changed by test.
                */
                if (toolbarCurrentRightsidePosition >= window.innerWidth - maximumDistanceToEdge || getRaw(mainUi.outerContainer.element, 'width').isSome()) {
                    set$7(mainUi.outerContainer.element, 'position', 'absolute');
                    set$7(mainUi.outerContainer.element, 'left', '0px');
                    remove$6(mainUi.outerContainer.element, 'width');
                    return true;
                }
            }
            return false;
        };
        const update = (stickyAction) => {
            // Skip updating the ui if it's hidden
            if (!isVisible()) {
                return;
            }
            // Handles positioning, docking and SplitToolbar (more drawer) behaviour. Modes:
            // 1. Basic inline: does positioning and docking
            // 2. Inline + more drawer: does positioning, docking and SplitToolbar
            // 3. Inline + fixed_toolbar_container: does nothing
            // 4. Inline + fixed_toolbar_container + more drawer: does SplitToolbar
            // Update the max width, as the body width may have changed
            if (!useFixedToolbarContainer) {
                updateChromeWidth();
            }
            const prevScroll = get$b();
            const isOuterContainerWidthRestored = useFixedToolbarContainer ? false : restoreOuterContainerWidth();
            /*
              Refresh split toolbar. Before calling refresh, we need to make sure that we have the full width (through restoreOuterContainerWidth above), otherwise too much will be put in the overflow drawer.
              A split toolbar requires a calculation to see what ends up in the "more drawer". When we don't have a split toolbar, then there is no reason to refresh the toolbar when the size changes.
            */
            if (isSplitToolbar) {
                OuterContainer.refreshToolbar(mainUi.outerContainer);
            }
            // Positioning
            if (!useFixedToolbarContainer) {
                // Getting the current scroll as the previous step may have reset the scroll,
                // We also want calculation based on the previous scroll, then restoring the scroll when everything is set.
                const currentScroll = get$b();
                const optScroll = someIf(prevScroll.left !== currentScroll.left, prevScroll);
                // This will position the container in the right spot.
                updateChromePosition(isOuterContainerWidthRestored, optScroll);
                // Restore scroll left position only if they are different, keeping the current scroll top, that shouldn't be changed
                optScroll.each((scroll) => {
                    to(scroll.left, currentScroll.top);
                });
            }
            // Docking
            if (isSticky) {
                floatContainer.on(stickyAction);
            }
            // Floating toolbar
            repositionPopups$1();
        };
        const doUpdateMode = () => {
            // Skip updating the mode if the toolbar is hidden, is
            // using a fixed container or has sticky toolbars disabled
            if (useFixedToolbarContainer || !isSticky || !isVisible()) {
                return false;
            }
            return floatContainer.get().exists((fc) => {
                const currentMode = headerBackstage.getDockingMode();
                const newMode = calcMode(fc);
                // Note: the docking mode will only be able to change when the `toolbar_location`
                // is set to "auto".
                if (newMode !== currentMode) {
                    setupMode(newMode);
                    return true;
                }
                else {
                    return false;
                }
            });
        };
        const show = () => {
            visible.set(true);
            set$7(mainUi.outerContainer.element, 'display', 'flex');
            DOM.addClass(editor.getBody(), 'mce-edit-focus');
            each$1(uiMotherships, (m) => {
                // We remove the display style when showing, because when hiding, we set it to "none"
                remove$6(m.element, 'display');
            });
            doUpdateMode();
            if (isSplitUiMode(editor)) {
                // When the toolbar is shown, then hidden and when the page is then scrolled,
                // the toolbar is set to docked, which shouldn't be as it should be static position
                // calling reset here, to reset the state.
                // Another case would be when the toolbar is shown initially (with location_bottom)
                // we don't want to dock the toolbar, calling Docking.refresh
                update((elem) => Docking.isDocked(elem) ? Docking.reset(elem) : Docking.refresh(elem));
            }
            else {
                // Even if we aren't updating the docking mode, we still want to reposition
                // the Ui. NOTE: We are using Docking.refresh here, rather than Docking.reset. This
                // means it should keep whatever its "previous" coordinates were, and will just
                // behave like the window was scrolled again, and Docking needs to work out if it
                // is going to dock / undock
                update(Docking.refresh);
            }
        };
        const hide = () => {
            visible.set(false);
            set$7(mainUi.outerContainer.element, 'display', 'none');
            DOM.removeClass(editor.getBody(), 'mce-edit-focus');
            each$1(uiMotherships, (m) => {
                set$7(m.element, 'display', 'none');
            });
        };
        const updateMode = () => {
            const changedMode = doUpdateMode();
            // If the docking mode has changed due to the update, we want to reset
            // docking. This will clear any prior stored positions
            if (changedMode) {
                update(Docking.reset);
            }
        };
        return {
            isVisible,
            isPositionedAtTop,
            show,
            hide,
            update,
            updateMode,
            repositionPopups: repositionPopups$1
        };
    };

var Inline = /*#__PURE__*/Object.freeze({
        __proto__: null,
        render: render
    });

// TODO: Find a better way of doing this. We probably don't want to just listen to
    // editor events. Having an API available like WindowManager would be the best option
    const showContextToolbarEvent = 'contexttoolbar-show';
    const hideContextToolbarEvent = 'contexttoolbar-hide';

// The "threshold" here is the amount of overlap. To make the overlap check
    // be more permissive (return true for 'almost' an overlap), use a negative
    // threshold value
    const isVerticalOverlap = (a, b, threshold) => b.bottom - a.y >= threshold && a.bottom - b.y >= threshold;
    const getRangeRect = (rng) => {
        const rect = rng.getBoundingClientRect();
        // Some ranges (eg <td><br></td>) will return a 0x0 rect, so we'll need to calculate it from the leaf instead
        if (rect.height <= 0 && rect.width <= 0) {
            const leaf$1 = leaf(SugarElement.fromDom(rng.startContainer), rng.startOffset).element;
            const elm = isText(leaf$1) ? parent(leaf$1) : Optional.some(leaf$1);
            return elm.filter(isElement$1)
                .map((e) => e.dom.getBoundingClientRect())
                // We have nothing valid, so just fallback to the original rect
                .getOr(rect);
        }
        else {
            return rect;
        }
    };
    const getSelectionBounds = (editor) => {
        const rng = editor.selection.getRng();
        const rect = getRangeRect(rng);
        if (editor.inline) {
            const scroll = get$b();
            return bounds(scroll.left + rect.left, scroll.top + rect.top, rect.width, rect.height);
        }
        else {
            // Translate to the top level document, as rect is relative to the iframe viewport
            const bodyPos = absolute$2(SugarElement.fromDom(editor.getBody()));
            return bounds(bodyPos.x + rect.left, bodyPos.y + rect.top, rect.width, rect.height);
        }
    };
    const getAnchorElementBounds = (editor, lastElement) => lastElement
        .filter((elem) => inBody(elem) && isHTMLElement(elem))
        .map(absolute$2)
        .getOrThunk(() => getSelectionBounds(editor));
    const getHorizontalBounds = (contentAreaBox, viewportBounds, margin) => {
        const x = Math.max(contentAreaBox.x + margin, viewportBounds.x);
        const right = Math.min(contentAreaBox.right - margin, viewportBounds.right);
        return { x, width: right - x };
    };
    const getVerticalBounds = (editor, contentAreaBox, viewportBounds, isToolbarLocationTop, toolbarType, margin) => {
        const container = SugarElement.fromDom(editor.getContainer());
        const header = descendant(container, '.tox-editor-header').getOr(container);
        const headerBox = box$1(header);
        const isToolbarBelowContentArea = headerBox.y >= contentAreaBox.bottom;
        const isToolbarAbove = isToolbarLocationTop && !isToolbarBelowContentArea;
        // Scenario toolbar top & inline: Bottom of the header -> Bottom of the viewport
        if (editor.inline && isToolbarAbove) {
            return {
                y: Math.max(headerBox.bottom + margin, viewportBounds.y),
                bottom: viewportBounds.bottom
            };
        }
        // Scenario toolbar top & inline: Top of the viewport -> Top of the header
        if (editor.inline && !isToolbarAbove) {
            return {
                y: viewportBounds.y,
                bottom: Math.min(headerBox.y - margin, viewportBounds.bottom)
            };
        }
        // Allow line based context toolbar to overlap the statusbar
        const containerBounds = toolbarType === 'line' ? box$1(container) : contentAreaBox;
        // Scenario toolbar bottom & Iframe: Bottom of the header -> Bottom of the editor container
        if (isToolbarAbove) {
            return {
                y: Math.max(headerBox.bottom + margin, viewportBounds.y),
                bottom: Math.min(containerBounds.bottom - margin, viewportBounds.bottom)
            };
        }
        // Scenario toolbar bottom & Iframe: Top of the editor container -> Top of the header
        return {
            y: Math.max(containerBounds.y + margin, viewportBounds.y),
            bottom: Math.min(headerBox.y - margin, viewportBounds.bottom)
        };
    };
    const getContextToolbarBounds = (editor, sharedBackstage, toolbarType, margin = 0) => {
        const viewportBounds = getBounds$1(window);
        const contentAreaBox = box$1(SugarElement.fromDom(editor.getContentAreaContainer()));
        const toolbarOrMenubarEnabled = isMenubarEnabled(editor) || isToolbarEnabled(editor) || isMultipleToolbars(editor);
        const { x, width } = getHorizontalBounds(contentAreaBox, viewportBounds, margin);
        // Create bounds that lets the context toolbar overflow outside the content area, but remains in the viewport
        if (editor.inline && !toolbarOrMenubarEnabled) {
            return bounds(x, viewportBounds.y, width, viewportBounds.height);
        }
        else {
            const isToolbarTop = sharedBackstage.header.isPositionedAtTop();
            const { y, bottom } = getVerticalBounds(editor, contentAreaBox, viewportBounds, isToolbarTop, toolbarType, margin);
            return bounds(x, y, width, bottom - y);
        }
    };

const register$7 = (editor, backstage) => {
        createAlignMenu(editor, backstage);
        createFontFamilyMenu(editor, backstage);
        createStylesMenu(editor, backstage);
        createBlocksMenu(editor, backstage);
        createFontSizeMenu(editor, backstage);
    };

const setup$6 = (editor, backstage) => {
        register$9(editor);
        register$3(editor);
        register$7(editor, backstage);
        register$2(editor);
        register$d(editor);
        register$1(editor);
        register$5(editor);
        register$8(editor);
        register$4(editor);
        register$6(editor);
    };

var Logo = "<svg height=\"16\" viewBox=\"0 0 80 16\" width=\"80\" xmlns=\"http://www.w3.org/2000/svg\"><g opacity=\".8\"><path d=\"m80 3.537v-2.202h-7.976v11.585h7.976v-2.25h-5.474v-2.621h4.812v-2.069h-4.812v-2.443zm-10.647 6.929c-.493.217-1.13.337-1.864.337s-1.276-.156-1.805-.47a3.732 3.732 0 0 1 -1.3-1.298c-.324-.554-.48-1.191-.48-1.877s.156-1.335.48-1.877a3.635 3.635 0 0 1 1.3-1.299 3.466 3.466 0 0 1 1.805-.481c.65 0 .914.06 1.263.18.36.12.698.277.986.47.289.192.578.384.842.6l.12.085v-2.586l-.023-.024c-.385-.35-.855-.614-1.384-.818-.53-.205-1.155-.313-1.877-.313-.721 0-1.6.144-2.333.445a5.773 5.773 0 0 0 -1.937 1.251 5.929 5.929 0 0 0 -1.324 1.9c-.324.735-.48 1.565-.48 2.455s.156 1.72.48 2.454c.325.734.758 1.383 1.324 1.913.553.53 1.215.938 1.937 1.25a6.286 6.286 0 0 0 2.333.434c.819 0 1.384-.108 1.961-.313.59-.216 1.083-.505 1.468-.866l.024-.024v-2.49l-.12.096c-.41.337-.878.626-1.396.866zm-14.869-4.15-4.8-5.04-.024-.025h-.902v11.67h2.502v-6.847l2.827 3.08.385.409.397-.41 2.791-3.067v6.845h2.502v-11.679h-.902l-4.788 5.052z\"/><path clip-rule=\"evenodd\" d=\"m15.543 5.137c0-3.032-2.466-5.113-4.957-5.137-.36 0-.745.024-1.094.096-.157.024-3.85.758-3.85.758-3.032.602-4.62 2.466-4.704 4.788-.024.89-.024 4.27-.024 4.27.036 3.165 2.406 5.138 5.017 5.126.337 0 1.119-.109 1.287-.145.144-.024.385-.084.746-.144.661-.12 1.684-.325 3.067-.602 2.37-.409 4.103-2.009 4.44-4.33.156-1.023.084-4.692.084-4.692zm-3.213 3.308-2.346.457v2.31l-5.859 1.143v-5.75l2.346-.458v3.441l3.513-.686v-3.44l-3.513.685v-2.297l5.859-1.143v5.75zm20.09-3.296-.083-1.023h-2.13v8.794h2.346v-4.884c0-1.107.95-1.985 2.057-1.997 1.095 0 1.901.89 1.901 1.997v4.884h2.346v-5.245c-.012-2.105-1.588-3.777-3.67-3.765a3.764 3.764 0 0 0 -2.778 1.25l.012-.011zm-6.014-4.102 2.346-.458v2.298l-2.346.457z\" fill-rule=\"evenodd\"/><path d=\"m28.752 4.126h-2.346v8.794h2.346z\"/><path clip-rule=\"evenodd\" d=\"m43.777 15.483 4.043-11.357h-2.418l-1.54 4.355-.445 1.324-.36-1.324-1.54-4.355h-2.418l3.151 8.794-1.083 3.08zm-21.028-5.51c0 .722.541 1.034.878 1.034s.638-.048.95-.144l.518 1.708c-.217.145-.879.518-2.13.518a2.565 2.565 0 0 1 -2.562-2.587c-.024-1.082-.024-2.49 0-4.21h-1.54v-2.142h1.54v-1.912l2.346-.458v2.37h2.201v2.142h-2.2v3.693-.012z\" fill-rule=\"evenodd\"/></g></svg>\n";

var ResizeTypes;
    (function (ResizeTypes) {
        ResizeTypes[ResizeTypes["None"] = 0] = "None";
        ResizeTypes[ResizeTypes["Both"] = 1] = "Both";
        ResizeTypes[ResizeTypes["Vertical"] = 2] = "Vertical";
    })(ResizeTypes || (ResizeTypes = {}));
    const getOriginalDimensions = (editor) => {
        const container = SugarElement.fromDom(editor.getContainer());
        const originalHeight = get$d(container);
        const originalWidth = get$c(container);
        return {
            height: originalHeight,
            width: originalWidth,
        };
    };
    const getDimensions = (editor, deltas, resizeType, originalDimentions) => {
        const height = calcCappedSize(originalDimentions.height + deltas.top, getMinHeightOption(editor), getMaxHeightOption(editor));
        if (resizeType === ResizeTypes.Both) {
            return {
                height,
                width: calcCappedSize(originalDimentions.width + deltas.left, getMinWidthOption(editor), getMaxWidthOption(editor))
            };
        }
        return { height };
    };
    const resize = (editor, deltas, resizeType) => {
        const container = SugarElement.fromDom(editor.getContainer());
        const originalDimensions = getOriginalDimensions(editor);
        const dimensions = getDimensions(editor, deltas, resizeType, originalDimensions);
        each(dimensions, (val, dim) => {
            if (isNumber(val)) {
                set$7(container, dim, numToPx(val));
            }
        });
        fireResizeEditor(editor);
        return dimensions;
    };

// ariaAttrs is being passed through to silver inline dialog
    // from the WindowManager as a property of 'params'
    const renderBody = (spec, dialogId, contentId, backstage, ariaAttrs, getCompByName) => {
        const renderComponents = (incoming) => {
            const body = incoming.body;
            switch (body.type) {
                case 'tabpanel': {
                    return [
                        renderTabPanel(body, incoming.initialData, backstage, getCompByName)
                    ];
                }
                default: {
                    return [
                        renderBodyPanel(body, incoming.initialData, backstage, getCompByName)
                    ];
                }
            }
        };
        const updateState = (_comp, incoming) => Optional.some({
            isTabPanel: () => incoming.body.type === 'tabpanel'
        });
        const ariaAttributes = {
            'aria-live': 'polite'
        };
        return {
            dom: {
                tag: 'div',
                classes: ['tox-dialog__content-js'],
                attributes: {
                    ...contentId.map((x) => ({ id: x })).getOr({}),
                    ...ariaAttrs ? ariaAttributes : {}
                }
            },
            components: [],
            behaviours: derive$1([
                ComposingConfigs.childAt(0),
                Reflecting.config({
                    channel: `${bodyChannel}-${dialogId}`,
                    updateState,
                    renderComponents,
                    initialData: spec
                })
            ])
        };
    };
    const renderInlineBody = (spec, dialogId, contentId, backstage, ariaAttrs, getCompByName) => renderBody(spec, dialogId, Optional.some(contentId), backstage, ariaAttrs, getCompByName);
    const renderModalBody = (spec, dialogId, backstage, getCompByName) => {
        const bodySpec = renderBody(spec, dialogId, Optional.none(), backstage, false, getCompByName);
        return ModalDialog.parts.body(bodySpec);
    };
    const renderIframeBody = (spec) => {
        const bodySpec = {
            dom: {
                tag: 'div',
                classes: ['tox-dialog__content-js']
            },
            components: [
                {
                    dom: {
                        tag: 'div',
                        classes: ['tox-dialog__body-iframe']
                    },
                    components: [
                        craft(Optional.none(), {
                            dom: {
                                tag: 'iframe',
                                attributes: {
                                    src: spec.url
                                }
                            },
                            behaviours: derive$1([
                                Tabstopping.config({}),
                                Focusing.config({})
                            ])
                        })
                    ]
                }
            ],
            behaviours: derive$1([
                Keying.config({
                    mode: 'acyclic',
                    useTabstopAt: not(isPseudoStop)
                })
            ])
        };
        return ModalDialog.parts.body(bodySpec);
    };

// DUPE with SilverDialog. Cleaning up.
    const renderInlineDialog = (dialogInit, extra, backstage, ariaAttrs = false, refreshDocking) => {
        const dialogId = generate$6('dialog');
        const dialogLabelId = generate$6('dialog-label');
        const dialogContentId = generate$6('dialog-content');
        const internalDialog = dialogInit.internalDialog;
        const getCompByName$1 = (name) => getCompByName(modalAccess, name);
        const dialogSize = Cell(internalDialog.size);
        const dialogSizeClass = getDialogSizeClass(dialogSize.get()).toArray();
        // Reflecting behaviour broadcasts on dialog channel only on redial.
        const updateState = (comp, incoming) => {
            // Update dialog size and position upon redial.
            dialogSize.set(incoming.internalDialog.size);
            updateDialogSizeClass(incoming.internalDialog.size, comp);
            refreshDocking();
            return Optional.some(incoming);
        };
        const memHeader = record(renderInlineHeader({
            title: internalDialog.title,
            draggable: true
        }, dialogId, dialogLabelId, backstage.shared.providers));
        const memBody = record(renderInlineBody({
            body: internalDialog.body,
            initialData: internalDialog.initialData,
        }, dialogId, dialogContentId, backstage, ariaAttrs, getCompByName$1));
        const storagedMenuButtons = mapMenuButtons(internalDialog.buttons);
        const objOfCells = extractCellsToObject(storagedMenuButtons);
        const optMemFooter = someIf(storagedMenuButtons.length !== 0, record(renderInlineFooter({
            buttons: storagedMenuButtons
        }, dialogId, backstage)));
        const dialogEvents = initDialog(() => instanceApi, {
            onBlock: (event) => {
                Blocking.block(dialog, (_comp, bs) => {
                    const headerHeight = memHeader.getOpt(dialog).map((dialog) => get$d(dialog.element));
                    return getBusySpec(event.message, bs, backstage.shared.providers, headerHeight);
                });
            },
            onUnblock: () => {
                Blocking.unblock(dialog);
            },
            onClose: () => extra.closeWindow()
        }, backstage.shared.getSink);
        const inlineClass = 'tox-dialog-inline';
        const os = detect$1().os;
        // TODO: Disable while validating?
        const dialog = build$1({
            dom: {
                tag: 'div',
                classes: ['tox-dialog', inlineClass, ...dialogSizeClass],
                attributes: {
                    role: 'dialog',
                    // TINY-10808 - Workaround to address the dialog header not being announced on VoiceOver with aria-labelledby, ideally we should use the aria-labelledby
                    ...os.isMacOS() ? { 'aria-label': internalDialog.title } : { 'aria-labelledby': dialogLabelId }
                }
            },
            eventOrder: {
                [receive()]: [Reflecting.name(), Receiving.name()],
                [execute$5()]: ['execute-on-form'],
                [attachedToDom()]: ['reflecting', 'execute-on-form']
            },
            // Dupe with SilverDialog.
            behaviours: derive$1([
                Keying.config({
                    mode: 'cyclic',
                    onEscape: (c) => {
                        emit(c, formCloseEvent);
                        return Optional.some(true);
                    },
                    useTabstopAt: (elem) => !isPseudoStop(elem) && (name$3(elem) !== 'button' || get$g(elem, 'disabled') !== 'disabled'),
                    firstTabstop: 1
                }),
                Reflecting.config({
                    channel: `${dialogChannel}-${dialogId}`,
                    updateState,
                    initialData: dialogInit
                }),
                Focusing.config({}),
                config('execute-on-form', dialogEvents.concat([
                    // Note: `runOnSource` here will only listen to the event at the outer component level.
                    // Using just `run` instead will cause an infinite loop as `focusIn` would fire a `focusin` which would then get responded to and so forth.
                    runOnSource(focusin(), (comp, _se) => {
                        Keying.focusIn(comp);
                    }),
                    run$1(focusShifted(), (comp, se) => {
                        comp.getSystem().broadcastOn([dialogFocusShiftedChannel], {
                            newFocus: se.event.newFocus
                        });
                    })
                ])),
                Blocking.config({ getRoot: () => Optional.some(dialog) }),
                Replacing.config({}),
                memory({})
            ]),
            components: [
                memHeader.asSpec(),
                memBody.asSpec(),
                ...optMemFooter.map((memFooter) => memFooter.asSpec()).toArray()
            ]
        });
        const toggleFullscreen$1 = () => {
            toggleFullscreen(dialog, dialogSize.get());
        };
        // TODO: Clean up the dupe between this (InlineDialog) and SilverDialog
        const modalAccess = {
            getId: constant$1(dialogId),
            getRoot: constant$1(dialog),
            getFooter: () => optMemFooter.map((memFooter) => memFooter.get(dialog)),
            getBody: () => memBody.get(dialog),
            getFormWrapper: () => {
                const body = memBody.get(dialog);
                return Composing.getCurrent(body).getOr(body);
            },
            toggleFullscreen: toggleFullscreen$1
        };
        const instanceApi = getDialogApi(modalAccess, extra.redial, objOfCells);
        return {
            dialog,
            instanceApi
        };
    };

var global = tinymce.util.Tools.resolve('tinymce.util.URI');

// A list of supported message actions
    const SUPPORTED_MESSAGE_ACTIONS = ['insertContent', 'setContent', 'execCommand', 'close', 'block', 'unblock'];
    const isSupportedMessage = (data) => isObject(data) && SUPPORTED_MESSAGE_ACTIONS.indexOf(data.mceAction) !== -1;
    const isCustomMessage = (data) => !isSupportedMessage(data) && isObject(data) && has$2(data, 'mceAction');
    const handleMessage = (editor, api, data) => {
        switch (data.mceAction) {
            case 'insertContent':
                editor.insertContent(data.content);
                break;
            case 'setContent':
                editor.setContent(data.content);
                break;
            case 'execCommand':
                const ui = isBoolean(data.ui) ? data.ui : false;
                editor.execCommand(data.cmd, ui, data.value);
                break;
            case 'close':
                api.close();
                break;
            case 'block':
                api.block(data.message);
                break;
            case 'unblock':
                api.unblock();
                break;
        }
    };
    const renderUrlDialog = (internalDialog, extra, editor, backstage) => {
        const dialogId = generate$6('dialog');
        const header = getHeader(internalDialog.title, dialogId, backstage);
        const body = renderIframeBody(internalDialog);
        const footer = internalDialog.buttons.bind((buttons) => {
            // Don't render a footer if no buttons are specified
            if (buttons.length === 0) {
                return Optional.none();
            }
            else {
                return Optional.some(renderModalFooter({ buttons }, dialogId, backstage));
            }
        });
        const dialogEvents = initUrlDialog(() => instanceApi, getEventExtras(() => dialog, backstage.shared.providers, extra));
        // Add the styles for the modal width/height
        const styles = {
            ...internalDialog.height.fold(() => ({}), (height) => ({ 'height': height + 'px', 'max-height': height + 'px' })),
            ...internalDialog.width.fold(() => ({}), (width) => ({ 'width': width + 'px', 'max-width': width + 'px' }))
        };
        // Default back to using a large sized dialog, if no dimensions are specified
        const classes = internalDialog.width.isNone() && internalDialog.height.isNone() ? ['tox-dialog--width-lg'] : [];
        // Determine the iframe urls domain, so we can target that specifically when sending messages
        const iframeUri = new global(internalDialog.url, { base_uri: new global(window.location.href) });
        const iframeDomain = `${iframeUri.protocol}://${iframeUri.host}${iframeUri.port ? ':' + iframeUri.port : ''}`;
        const messageHandlerUnbinder = unbindable();
        const updateState = (_comp, incoming) => Optional.some(incoming);
        // Setup the behaviours for dealing with messages between the iframe and current window
        const extraBehaviours = [
            // Because this doesn't define `renderComponents`, all this does is update the state.
            // We use the state for the initialData. The other parts (body etc.) render the
            // components based on what reflecting receives.
            Reflecting.config({
                channel: `${dialogChannel}-${dialogId}`,
                updateState,
                initialData: internalDialog
            }),
            config('messages', [
                // When the dialog is opened, bind a window message listener for the spec url
                runOnAttached(() => {
                    const unbind = bind$1(SugarElement.fromDom(window), 'message', (e) => {
                        // Validate that the request came from the correct domain
                        if (iframeUri.isSameOrigin(new global(e.raw.origin))) {
                            const data = e.raw.data;
                            // Handle the message if it has the 'mceAction' key, otherwise just ignore it
                            if (isSupportedMessage(data)) {
                                handleMessage(editor, instanceApi, data);
                            }
                            else if (isCustomMessage(data)) {
                                internalDialog.onMessage(instanceApi, data);
                            }
                        }
                    });
                    messageHandlerUnbinder.set(unbind);
                }),
                // When the dialog is closed, unbind the window message listener
                runOnDetached(messageHandlerUnbinder.clear)
            ]),
            Receiving.config({
                channels: {
                    [bodySendMessageChannel]: {
                        onReceive: (comp, data) => {
                            // Send the message to the iframe via postMessage
                            descendant(comp.element, 'iframe').each((iframeEle) => {
                                const iframeWin = iframeEle.dom.contentWindow;
                                if (isNonNullable(iframeWin)) {
                                    iframeWin.postMessage(data, iframeDomain);
                                }
                            });
                        }
                    }
                }
            })
        ];
        const spec = {
            id: dialogId,
            header,
            body,
            footer,
            extraClasses: classes,
            extraBehaviours,
            extraStyles: styles
        };
        const dialog = renderModalDialog(spec, dialogEvents, backstage);
        const instanceApi = getUrlDialogApi(dialog);
        return {
            dialog,
            instanceApi
        };
    };

Theme();
    /** *****
     * DO NOT EXPORT ANYTHING
     *
     * IF YOU DO ROLLUP WILL LEAVE A GLOBAL ON THE PAGE
     *******/

})();