@7sage/vidstack
Version:
UI component library for building high-quality, accessible video and audio experiences on the web.
1,540 lines (1,495 loc) • 79.1 kB
JavaScript
const SCOPE = Symbol(0);
let scheduledEffects = false, runningEffects = false, currentScope = null, currentObserver = null, currentObservers = null, currentObserversIndex = 0, effects = [], defaultContext = {};
const NOOP = () => {
}, STATE_CLEAN = 0, STATE_CHECK = 1, STATE_DIRTY = 2, STATE_DISPOSED = 3;
function flushEffects() {
scheduledEffects = true;
queueMicrotask(runEffects);
}
function runEffects() {
if (!effects.length) {
scheduledEffects = false;
return;
}
runningEffects = true;
for (let i = 0; i < effects.length; i++) {
if (effects[i].$st !== STATE_CLEAN)
runTop(effects[i]);
}
effects = [];
scheduledEffects = false;
runningEffects = false;
}
function runTop(node) {
let ancestors = [node];
while (node = node[SCOPE]) {
if (node.$e && node.$st !== STATE_CLEAN)
ancestors.push(node);
}
for (let i = ancestors.length - 1; i >= 0; i--) {
updateCheck(ancestors[i]);
}
}
function root(init) {
const scope = createScope();
return compute(scope, !init.length ? init : init.bind(null, dispose.bind(scope)), null);
}
function peek(fn) {
return compute(currentScope, fn, null);
}
function untrack(fn) {
return compute(null, fn, null);
}
function tick() {
if (!runningEffects)
runEffects();
}
function getScope() {
return currentScope;
}
function scoped(run, scope) {
try {
return compute(scope, run, null);
} catch (error) {
handleError(scope, error);
return;
}
}
function getContext(key, scope = currentScope) {
return scope?.$cx[key];
}
function setContext(key, value, scope = currentScope) {
if (scope)
scope.$cx = { ...scope.$cx, [key]: value };
}
function onDispose(disposable) {
if (!disposable || !currentScope)
return disposable || NOOP;
const node = currentScope;
if (!node.$d) {
node.$d = disposable;
} else if (Array.isArray(node.$d)) {
node.$d.push(disposable);
} else {
node.$d = [node.$d, disposable];
}
return function removeDispose() {
if (node.$st === STATE_DISPOSED)
return;
disposable.call(null);
if (isFunction$1(node.$d)) {
node.$d = null;
} else if (Array.isArray(node.$d)) {
node.$d.splice(node.$d.indexOf(disposable), 1);
}
};
}
function dispose(self = true) {
if (this.$st === STATE_DISPOSED)
return;
if (this.$h) {
if (Array.isArray(this.$h)) {
for (let i = this.$h.length - 1; i >= 0; i--) {
dispose.call(this.$h[i]);
}
} else {
dispose.call(this.$h);
}
}
if (self) {
const parent = this[SCOPE];
if (parent) {
if (Array.isArray(parent.$h)) {
parent.$h.splice(parent.$h.indexOf(this), 1);
} else {
parent.$h = null;
}
}
disposeNode(this);
}
}
function disposeNode(node) {
node.$st = STATE_DISPOSED;
if (node.$d)
emptyDisposal(node);
if (node.$s)
removeSourceObservers(node, 0);
node[SCOPE] = null;
node.$s = null;
node.$o = null;
node.$h = null;
node.$cx = defaultContext;
node.$eh = null;
}
function emptyDisposal(scope) {
try {
if (Array.isArray(scope.$d)) {
for (let i = scope.$d.length - 1; i >= 0; i--) {
const callable = scope.$d[i];
callable.call(callable);
}
} else {
scope.$d.call(scope.$d);
}
scope.$d = null;
} catch (error) {
handleError(scope, error);
}
}
function compute(scope, compute2, observer) {
const prevScope = currentScope, prevObserver = currentObserver;
currentScope = scope;
currentObserver = observer;
try {
return compute2.call(scope);
} finally {
currentScope = prevScope;
currentObserver = prevObserver;
}
}
function handleError(scope, error) {
if (!scope || !scope.$eh)
throw error;
let i = 0, len = scope.$eh.length, currentError = error;
for (i = 0; i < len; i++) {
try {
scope.$eh[i](currentError);
break;
} catch (error2) {
currentError = error2;
}
}
if (i === len)
throw currentError;
}
function read() {
if (this.$st === STATE_DISPOSED)
return this.$v;
if (currentObserver && !this.$e) {
if (!currentObservers && currentObserver.$s && currentObserver.$s[currentObserversIndex] == this) {
currentObserversIndex++;
} else if (!currentObservers)
currentObservers = [this];
else
currentObservers.push(this);
}
if (this.$c)
updateCheck(this);
return this.$v;
}
function write(newValue) {
const value = isFunction$1(newValue) ? newValue(this.$v) : newValue;
if (this.$ch(this.$v, value)) {
this.$v = value;
if (this.$o) {
for (let i = 0; i < this.$o.length; i++) {
notify(this.$o[i], STATE_DIRTY);
}
}
}
return this.$v;
}
const ScopeNode = function Scope() {
this[SCOPE] = null;
this.$h = null;
if (currentScope)
currentScope.append(this);
};
const ScopeProto = ScopeNode.prototype;
ScopeProto.$cx = defaultContext;
ScopeProto.$eh = null;
ScopeProto.$c = null;
ScopeProto.$d = null;
ScopeProto.append = function(child) {
child[SCOPE] = this;
if (!this.$h) {
this.$h = child;
} else if (Array.isArray(this.$h)) {
this.$h.push(child);
} else {
this.$h = [this.$h, child];
}
child.$cx = child.$cx === defaultContext ? this.$cx : { ...this.$cx, ...child.$cx };
if (this.$eh) {
child.$eh = !child.$eh ? this.$eh : [...child.$eh, ...this.$eh];
}
};
ScopeProto.dispose = function() {
dispose.call(this);
};
function createScope() {
return new ScopeNode();
}
const ComputeNode = function Computation(initialValue, compute2, options) {
ScopeNode.call(this);
this.$st = compute2 ? STATE_DIRTY : STATE_CLEAN;
this.$i = false;
this.$e = false;
this.$s = null;
this.$o = null;
this.$v = initialValue;
if (compute2)
this.$c = compute2;
if (options && options.dirty)
this.$ch = options.dirty;
};
const ComputeProto = ComputeNode.prototype;
Object.setPrototypeOf(ComputeProto, ScopeProto);
ComputeProto.$ch = isNotEqual;
ComputeProto.call = read;
function createComputation(initialValue, compute2, options) {
return new ComputeNode(initialValue, compute2, options);
}
function isNotEqual(a, b) {
return a !== b;
}
function isFunction$1(value) {
return typeof value === "function";
}
function updateCheck(node) {
if (node.$st === STATE_CHECK) {
for (let i = 0; i < node.$s.length; i++) {
updateCheck(node.$s[i]);
if (node.$st === STATE_DIRTY) {
break;
}
}
}
if (node.$st === STATE_DIRTY)
update(node);
else
node.$st = STATE_CLEAN;
}
function cleanup(node) {
if (node.$h)
dispose.call(node, false);
if (node.$d)
emptyDisposal(node);
node.$eh = node[SCOPE] ? node[SCOPE].$eh : null;
}
function update(node) {
let prevObservers = currentObservers, prevObserversIndex = currentObserversIndex;
currentObservers = null;
currentObserversIndex = 0;
try {
cleanup(node);
const result = compute(node, node.$c, node);
updateObservers(node);
if (!node.$e && node.$i) {
write.call(node, result);
} else {
node.$v = result;
node.$i = true;
}
} catch (error) {
updateObservers(node);
handleError(node, error);
} finally {
currentObservers = prevObservers;
currentObserversIndex = prevObserversIndex;
node.$st = STATE_CLEAN;
}
}
function updateObservers(node) {
if (currentObservers) {
if (node.$s)
removeSourceObservers(node, currentObserversIndex);
if (node.$s && currentObserversIndex > 0) {
node.$s.length = currentObserversIndex + currentObservers.length;
for (let i = 0; i < currentObservers.length; i++) {
node.$s[currentObserversIndex + i] = currentObservers[i];
}
} else {
node.$s = currentObservers;
}
let source;
for (let i = currentObserversIndex; i < node.$s.length; i++) {
source = node.$s[i];
if (!source.$o)
source.$o = [node];
else
source.$o.push(node);
}
} else if (node.$s && currentObserversIndex < node.$s.length) {
removeSourceObservers(node, currentObserversIndex);
node.$s.length = currentObserversIndex;
}
}
function notify(node, state) {
if (node.$st >= state)
return;
if (node.$e && node.$st === STATE_CLEAN) {
effects.push(node);
if (!scheduledEffects)
flushEffects();
}
node.$st = state;
if (node.$o) {
for (let i = 0; i < node.$o.length; i++) {
notify(node.$o[i], STATE_CHECK);
}
}
}
function removeSourceObservers(node, index) {
let source, swap;
for (let i = index; i < node.$s.length; i++) {
source = node.$s[i];
if (source.$o) {
swap = source.$o.indexOf(node);
source.$o[swap] = source.$o[source.$o.length - 1];
source.$o.pop();
}
}
}
function noop(...args) {
}
function isNull(value) {
return value === null;
}
function isUndefined(value) {
return typeof value === "undefined";
}
function isNil(value) {
return isNull(value) || isUndefined(value);
}
function isObject(value) {
return value?.constructor === Object;
}
function isNumber(value) {
return typeof value === "number" && !Number.isNaN(value);
}
function isString(value) {
return typeof value === "string";
}
function isBoolean(value) {
return typeof value === "boolean";
}
function isFunction(value) {
return typeof value === "function";
}
function isArray(value) {
return Array.isArray(value);
}
const EVENT = Event, DOM_EVENT = Symbol("DOM_EVENT");
class DOMEvent extends EVENT {
[DOM_EVENT] = true;
/**
* The event detail.
*/
detail;
/**
* The event trigger chain.
*/
triggers = new EventTriggers();
/**
* The preceding event that was responsible for this event being fired.
*/
get trigger() {
return this.triggers.source;
}
/**
* The origin event that lead to this event being fired.
*/
get originEvent() {
return this.triggers.origin;
}
/**
* Whether the origin event was triggered by the user.
*
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted}
*/
get isOriginTrusted() {
return this.triggers.origin?.isTrusted ?? false;
}
constructor(type, ...init) {
super(type, init[0]);
this.detail = init[0]?.detail;
const trigger = init[0]?.trigger;
if (trigger) this.triggers.add(trigger);
}
}
class EventTriggers {
chain = [];
get source() {
return this.chain[0];
}
get origin() {
return this.chain[this.chain.length - 1];
}
/**
* Appends the event to the end of the chain.
*/
add(event) {
this.chain.push(event);
if (isDOMEvent(event)) {
this.chain.push(...event.triggers);
}
}
/**
* Removes the event from the chain and returns it (if found).
*/
remove(event) {
return this.chain.splice(this.chain.indexOf(event), 1)[0];
}
/**
* Returns whether the chain contains the given `event`.
*/
has(event) {
return this.chain.some((e) => e === event);
}
/**
* Returns whether the chain contains the given event type.
*/
hasType(type) {
return !!this.findType(type);
}
/**
* Returns the first event with the given `type` found in the chain.
*/
findType(type) {
return this.chain.find((e) => e.type === type);
}
/**
* Walks an event chain on a given `event`, and invokes the given `callback` for each trigger event.
*/
walk(callback) {
for (const event of this.chain) {
const returnValue = callback(event);
if (returnValue) return [event, returnValue];
}
}
[Symbol.iterator]() {
return this.chain.values();
}
}
function isDOMEvent(event) {
return !!event?.[DOM_EVENT];
}
function walkTriggerEventChain(event, callback) {
if (!isDOMEvent(event)) return;
return event.triggers.walk(callback);
}
function findTriggerEvent(event, type) {
return isDOMEvent(event) ? event.triggers.findType(type) : void 0;
}
function hasTriggerEvent(event, type) {
return !!findTriggerEvent(event, type);
}
function appendTriggerEvent(event, trigger) {
if (trigger) event.triggers.add(trigger);
}
class EventsTarget extends EventTarget {
/** @internal type only */
$ts__events;
addEventListener(type, callback, options) {
return super.addEventListener(type, callback, options);
}
removeEventListener(type, callback, options) {
return super.removeEventListener(type, callback, options);
}
}
function listenEvent(target, type, handler, options) {
target.addEventListener(type, handler, options);
return onDispose(() => target.removeEventListener(type, handler, options));
}
class EventsController {
#target;
#controller;
get signal() {
return this.#controller.signal;
}
constructor(target) {
this.#target = target;
this.#controller = new AbortController();
onDispose(this.abort.bind(this));
}
add(type, handler, options) {
if (this.signal.aborted) throw Error("aborted");
this.#target.addEventListener(type, handler, {
...options,
signal: options?.signal ? anySignal(this.signal, options.signal) : this.signal
});
return this;
}
remove(type, handler) {
this.#target.removeEventListener(type, handler);
return this;
}
abort(reason) {
this.#controller.abort(reason);
}
}
function anySignal(...signals) {
const controller = new AbortController(), options = { signal: controller.signal };
function onAbort(event) {
controller.abort(event.target.reason);
}
for (const signal of signals) {
if (signal.aborted) {
controller.abort(signal.reason);
break;
}
signal.addEventListener("abort", onAbort, options);
}
return controller.signal;
}
function isPointerEvent(event) {
return !!event?.type.startsWith("pointer");
}
function isTouchEvent(event) {
return !!event?.type.startsWith("touch");
}
function isMouseEvent(event) {
return /^(click|mouse)/.test(event?.type ?? "");
}
function isKeyboardEvent(event) {
return !!event?.type.startsWith("key");
}
function wasEnterKeyPressed(event) {
return isKeyboardEvent(event) && event.key === "Enter";
}
function isKeyboardClick(event) {
return isKeyboardEvent(event) && (event.key === "Enter" || event.key === " ");
}
function isDOMNode(node) {
return node instanceof Node;
}
function setAttribute(host, name, value) {
if (!host) return;
else if (!value && value !== "" && value !== 0) {
host.removeAttribute(name);
} else {
const attrValue = value === true ? "" : value + "";
if (host.getAttribute(name) !== attrValue) {
host.setAttribute(name, attrValue);
}
}
}
function setStyle(host, property, value) {
if (!host) return;
else if (!value && value !== 0) {
host.style.removeProperty(property);
} else {
host.style.setProperty(property, value + "");
}
}
function toggleClass(host, name, value) {
host.classList[value ? "add" : "remove"](name);
}
function signal(initialValue, options) {
const node = createComputation(initialValue, null, options), signal2 = read.bind(node);
signal2[SCOPE] = true;
signal2.set = write.bind(node);
return signal2;
}
function isReadSignal(fn) {
return isFunction$1(fn) && SCOPE in fn;
}
function computed(compute, options) {
const node = createComputation(
options?.initial,
compute,
options
), signal2 = read.bind(node);
signal2[SCOPE] = true;
return signal2;
}
function effect$1(effect2, options) {
const signal2 = createComputation(
null,
function runEffect() {
let effectResult = effect2();
isFunction$1(effectResult) && onDispose(effectResult);
return null;
},
void 0
);
signal2.$e = true;
update(signal2);
return dispose.bind(signal2, true);
}
function isWriteSignal(fn) {
return isReadSignal(fn) && "set" in fn;
}
const effect = effect$1;
function createContext(provide) {
return { id: Symbol(), provide };
}
function provideContext(context, value, scope = getScope()) {
const hasProvidedValue = !isUndefined(value);
setContext(context.id, hasProvidedValue ? value : context.provide?.(), scope);
}
function useContext(context) {
const value = getContext(context.id);
return value;
}
function hasProvidedContext(context) {
return !isUndefined(getContext(context.id));
}
const PROPS = /* @__PURE__ */ Symbol(0);
const METHODS = /* @__PURE__ */ Symbol(0);
const ON_DISPATCH = /* @__PURE__ */ Symbol(0);
const EMPTY_PROPS = {};
class Instance {
/** @internal type only */
$ts__events;
/** @internal type only */
$ts__vars;
/* @internal */
[ON_DISPATCH] = null;
$el = signal(null);
el = null;
scope = null;
attachScope = null;
connectScope = null;
component = null;
destroyed = false;
props = EMPTY_PROPS;
attrs = null;
styles = null;
state;
$state;
#setupCallbacks = [];
#attachCallbacks = [];
#connectCallbacks = [];
#destroyCallbacks = [];
constructor(Component, scope, init) {
this.scope = scope;
if (init?.scope) init.scope.append(scope);
let stateFactory = Component.state, props = Component.props;
if (stateFactory) {
this.$state = stateFactory.create();
this.state = new Proxy(this.$state, {
get: (_, prop) => this.$state[prop]()
});
provideContext(stateFactory, this.$state);
}
if (props) {
this.props = createInstanceProps(props);
if (init?.props) {
for (const prop of Object.keys(init.props)) {
this.props[prop]?.set(init.props[prop]);
}
}
}
onDispose(this.destroy.bind(this));
}
setup() {
scoped(() => {
for (const callback of this.#setupCallbacks) callback();
}, this.scope);
}
attach(el) {
if (this.el) return;
this.el = el;
this.$el.set(el);
scoped(() => {
this.attachScope = createScope();
scoped(() => {
for (const callback of this.#attachCallbacks) callback(this.el);
this.#attachAttrs();
this.#attachStyles();
}, this.attachScope);
}, this.scope);
el.dispatchEvent(new Event("attached"));
}
detach() {
this.attachScope?.dispose();
this.attachScope = null;
this.connectScope = null;
this.el = null;
this.$el.set(null);
}
connect() {
if (!this.el || !this.attachScope || !this.#connectCallbacks.length) return;
scoped(() => {
this.connectScope = createScope();
scoped(() => {
for (const callback of this.#connectCallbacks) callback(this.el);
}, this.connectScope);
}, this.attachScope);
}
disconnect() {
this.connectScope?.dispose();
this.connectScope = null;
}
destroy() {
if (this.destroyed) return;
this.destroyed = true;
scoped(() => {
for (const callback of this.#destroyCallbacks) callback(this.el);
}, this.scope);
const el = this.el;
this.detach();
this.scope.dispose();
this.#setupCallbacks.length = 0;
this.#attachCallbacks.length = 0;
this.#connectCallbacks.length = 0;
this.#destroyCallbacks.length = 0;
this.component = null;
this.attrs = null;
this.styles = null;
this.props = EMPTY_PROPS;
this.scope = null;
this.state = EMPTY_PROPS;
this.$state = null;
if (el) delete el.$;
}
addHooks(target) {
if (target.onSetup) this.#setupCallbacks.push(target.onSetup.bind(target));
if (target.onAttach) this.#attachCallbacks.push(target.onAttach.bind(target));
if (target.onConnect) this.#connectCallbacks.push(target.onConnect.bind(target));
if (target.onDestroy) this.#destroyCallbacks.push(target.onDestroy.bind(target));
}
#attachAttrs() {
if (!this.attrs) return;
for (const name of Object.keys(this.attrs)) {
if (isFunction(this.attrs[name])) {
effect(this.#setAttr.bind(this, name));
} else {
setAttribute(this.el, name, this.attrs[name]);
}
}
}
#attachStyles() {
if (!this.styles) return;
for (const name of Object.keys(this.styles)) {
if (isFunction(this.styles[name])) {
effect(this.#setStyle.bind(this, name));
} else {
setStyle(this.el, name, this.styles[name]);
}
}
}
#setAttr(name) {
setAttribute(this.el, name, this.attrs[name].call(this.component));
}
#setStyle(name) {
setStyle(this.el, name, this.styles[name].call(this.component));
}
}
function createInstanceProps(props) {
const $props = {};
for (const name of Object.keys(props)) {
const def = props[name];
$props[name] = signal(def, def);
}
return $props;
}
let currentInstance = { $$: null };
function createComponent(Component, init) {
return root(() => {
currentInstance.$$ = new Instance(Component, getScope(), init);
const component = new Component();
currentInstance.$$.component = component;
currentInstance.$$ = null;
return component;
});
}
class ViewController extends EventTarget {
/** @internal */
$$;
get el() {
return this.$$.el;
}
get $el() {
return this.$$.$el();
}
get scope() {
return this.$$.scope;
}
get attachScope() {
return this.$$.attachScope;
}
get connectScope() {
return this.$$.connectScope;
}
/** @internal */
get $props() {
return this.$$.props;
}
/** @internal */
get $state() {
return this.$$.$state;
}
get state() {
return this.$$.state;
}
constructor() {
super();
if (currentInstance.$$) this.attach(currentInstance);
}
attach({ $$ }) {
this.$$ = $$;
$$.addHooks(this);
return this;
}
addEventListener(type, callback, options) {
this.listen(type, callback, options);
}
removeEventListener(type, callback, options) {
this.el?.removeEventListener(type, callback, options);
}
/**
* The given callback is invoked when the component is ready to be set up.
*
* - This hook will run once.
* - This hook is called both client-side and server-side.
* - It's safe to use context inside this hook.
* - The host element has not attached yet - wait for `onAttach`.
*/
/**
* This method can be used to specify attributes that should be set on the host element. Any
* attributes that are assigned to a function will be considered a signal and updated accordingly.
*/
setAttributes(attributes) {
if (!this.$$.attrs) this.$$.attrs = {};
Object.assign(this.$$.attrs, attributes);
}
/**
* This method can be used to specify styles that should set be set on the host element. Any
* styles that are assigned to a function will be considered a signal and updated accordingly.
*/
setStyles(styles) {
if (!this.$$.styles) this.$$.styles = {};
Object.assign(this.$$.styles, styles);
}
/**
* This method is used to satisfy the CSS variables contract specified on the current
* component. Other CSS variables can be set via the `setStyles` method.
*/
setCSSVars(vars) {
this.setStyles(vars);
}
/**
* Type-safe utility for creating component DOM events.
*/
createEvent(type, ...init) {
return new DOMEvent(type, init[0]);
}
/**
* Creates a `DOMEvent` and dispatches it from the host element. This method is typed to
* match all component events.
*/
dispatch(type, ...init) {
if (!this.el) return false;
const event = type instanceof Event ? type : new DOMEvent(type, init[0]);
Object.defineProperty(event, "target", {
get: () => this.$$.component
});
return untrack(() => {
this.$$[ON_DISPATCH]?.(event);
return this.el.dispatchEvent(event);
});
}
dispatchEvent(event) {
return this.dispatch(event);
}
/**
* Adds an event listener for the given `type` and returns a function which can be invoked to
* remove the event listener.
*
* - The listener is removed if the current scope is disposed.
* - This method is safe to use on the server (noop).
*/
listen(type, handler, options) {
if (!this.el) return noop;
return listenEvent(this.el, type, handler, options);
}
}
class Component extends ViewController {
subscribe(callback) {
return scoped(() => effect(() => callback(this.state)), this.$$.scope);
}
destroy() {
this.$$.destroy();
}
}
function prop(target, propertyKey, descriptor) {
if (!target[PROPS]) target[PROPS] = /* @__PURE__ */ new Set();
target[PROPS].add(propertyKey);
}
function method(target, propertyKey, descriptor) {
if (!target[METHODS]) target[METHODS] = /* @__PURE__ */ new Set();
target[METHODS].add(propertyKey);
}
class State {
id = Symbol(0);
record;
#descriptors;
constructor(record) {
this.record = record;
this.#descriptors = Object.getOwnPropertyDescriptors(record);
}
create() {
const store = {}, state = new Proxy(store, { get: (_, prop2) => store[prop2]() });
for (const name of Object.keys(this.record)) {
const getter = this.#descriptors[name].get;
store[name] = getter ? computed(getter.bind(state)) : signal(this.record[name]);
}
return store;
}
reset(record, filter) {
for (const name of Object.keys(record)) {
if (!this.#descriptors[name].get && (!filter || filter(name))) {
record[name].set(this.record[name]);
}
}
}
}
function useState(state) {
return useContext(state);
}
function runAll(fns, arg) {
for (const fn of fns) fn(arg);
}
function camelToKebabCase(str) {
return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
}
function kebabToCamelCase(str) {
return str.replace(/-./g, (x) => x[1].toUpperCase());
}
function uppercaseFirstChar(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
function unwrap(fn) {
return isFunction(fn) ? fn() : fn;
}
function ariaBool(value) {
return value ? "true" : "false";
}
function createDisposalBin() {
const disposal = /* @__PURE__ */ new Set();
return {
add(...callbacks) {
for (const callback of callbacks) disposal.add(callback);
},
empty() {
for (const callback of disposal) callback();
disposal.clear();
}
};
}
function keysOf(obj) {
return Object.keys(obj);
}
function deferredPromise() {
let resolve, reject;
const promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
return { promise, resolve, reject };
}
function waitTimeout(delay) {
return new Promise((resolve) => setTimeout(resolve, delay));
}
function animationFrameThrottle(func) {
let id = -1, lastArgs;
function throttle(...args) {
lastArgs = args;
if (id >= 0) return;
id = window.requestAnimationFrame(() => {
func.apply(this, lastArgs);
id = -1;
lastArgs = void 0;
});
}
return throttle;
}
const requestIdleCallback = typeof window !== "undefined" ? "requestIdleCallback" in window ? window.requestIdleCallback : (cb) => window.setTimeout(cb, 1) : noop;
function waitIdlePeriod(callback, options) {
return new Promise((resolve) => {
requestIdleCallback((deadline) => {
callback?.(deadline);
resolve();
}, options);
});
}
var key = {
fullscreenEnabled: 0,
fullscreenElement: 1,
requestFullscreen: 2,
exitFullscreen: 3,
fullscreenchange: 4,
fullscreenerror: 5,
fullscreen: 6
};
var webkit = [
"webkitFullscreenEnabled",
"webkitFullscreenElement",
"webkitRequestFullscreen",
"webkitExitFullscreen",
"webkitfullscreenchange",
"webkitfullscreenerror",
"-webkit-full-screen"
];
var moz = [
"mozFullScreenEnabled",
"mozFullScreenElement",
"mozRequestFullScreen",
"mozCancelFullScreen",
"mozfullscreenchange",
"mozfullscreenerror",
"-moz-full-screen"
];
var ms = [
"msFullscreenEnabled",
"msFullscreenElement",
"msRequestFullscreen",
"msExitFullscreen",
"MSFullscreenChange",
"MSFullscreenError",
"-ms-fullscreen"
];
var document$1 = typeof window !== "undefined" && typeof window.document !== "undefined" ? window.document : {};
var vendor = "fullscreenEnabled" in document$1 && Object.keys(key) || webkit[0] in document$1 && webkit || moz[0] in document$1 && moz || ms[0] in document$1 && ms || [];
var fscreen = {
requestFullscreen: function(element) {
return element[vendor[key.requestFullscreen]]();
},
requestFullscreenFunction: function(element) {
return element[vendor[key.requestFullscreen]];
},
get exitFullscreen() {
return document$1[vendor[key.exitFullscreen]].bind(document$1);
},
get fullscreenPseudoClass() {
return ":" + vendor[key.fullscreen];
},
addEventListener: function(type, handler, options) {
return document$1.addEventListener(vendor[key[type]], handler, options);
},
removeEventListener: function(type, handler, options) {
return document$1.removeEventListener(vendor[key[type]], handler, options);
},
get fullscreenEnabled() {
return Boolean(document$1[vendor[key.fullscreenEnabled]]);
},
set fullscreenEnabled(val) {
},
get fullscreenElement() {
return document$1[vendor[key.fullscreenElement]];
},
set fullscreenElement(val) {
},
get onfullscreenchange() {
return document$1[("on" + vendor[key.fullscreenchange]).toLowerCase()];
},
set onfullscreenchange(handler) {
return document$1[("on" + vendor[key.fullscreenchange]).toLowerCase()] = handler;
},
get onfullscreenerror() {
return document$1[("on" + vendor[key.fullscreenerror]).toLowerCase()];
},
set onfullscreenerror(handler) {
return document$1[("on" + vendor[key.fullscreenerror]).toLowerCase()] = handler;
}
};
var functionThrottle = throttle;
function throttle(fn, interval, options) {
var timeoutId = null;
var throttledFn = null;
var leading = (options && options.leading);
var trailing = (options && options.trailing);
if (leading == null) {
leading = true; // default
}
if (trailing == null) {
trailing = !leading; //default
}
if (leading == true) {
trailing = false; // forced because there should be invocation per call
}
var cancel = function() {
if (timeoutId) {
clearTimeout(timeoutId);
timeoutId = null;
}
};
var flush = function() {
var call = throttledFn;
cancel();
if (call) {
call();
}
};
var throttleWrapper = function() {
var callNow = leading && !timeoutId;
var context = this;
var args = arguments;
throttledFn = function() {
return fn.apply(context, args);
};
if (!timeoutId) {
timeoutId = setTimeout(function() {
timeoutId = null;
if (trailing) {
return throttledFn();
}
}, interval);
}
if (callNow) {
callNow = false;
return throttledFn();
}
};
throttleWrapper.cancel = cancel;
throttleWrapper.flush = flush;
return throttleWrapper;
}
var functionDebounce = debounce;
function debounce(fn, wait, callFirst) {
var timeout = null;
var debouncedFn = null;
var clear = function() {
if (timeout) {
clearTimeout(timeout);
debouncedFn = null;
timeout = null;
}
};
var flush = function() {
var call = debouncedFn;
clear();
if (call) {
call();
}
};
var debounceWrapper = function() {
if (!wait) {
return fn.apply(this, arguments);
}
var context = this;
var args = arguments;
var callNow = callFirst && !timeout;
clear();
debouncedFn = function() {
fn.apply(context, args);
};
timeout = setTimeout(function() {
timeout = null;
if (!callNow) {
var call = debouncedFn;
debouncedFn = null;
return call();
}
}, wait);
if (callNow) {
return debouncedFn();
}
};
debounceWrapper.cancel = clear;
debounceWrapper.flush = flush;
return debounceWrapper;
}
const t = (t2) => "object" == typeof t2 && null != t2 && 1 === t2.nodeType, e = (t2, e2) => (!e2 || "hidden" !== t2) && ("visible" !== t2 && "clip" !== t2), n = (t2, n2) => {
if (t2.clientHeight < t2.scrollHeight || t2.clientWidth < t2.scrollWidth) {
const o2 = getComputedStyle(t2, null);
return e(o2.overflowY, n2) || e(o2.overflowX, n2) || ((t3) => {
const e2 = ((t4) => {
if (!t4.ownerDocument || !t4.ownerDocument.defaultView) return null;
try {
return t4.ownerDocument.defaultView.frameElement;
} catch (t5) {
return null;
}
})(t3);
return !!e2 && (e2.clientHeight < t3.scrollHeight || e2.clientWidth < t3.scrollWidth);
})(t2);
}
return false;
}, o = (t2, e2, n2, o2, l2, r2, i, s) => r2 < t2 && i > e2 || r2 > t2 && i < e2 ? 0 : r2 <= t2 && s <= n2 || i >= e2 && s >= n2 ? r2 - t2 - o2 : i > e2 && s < n2 || r2 < t2 && s > n2 ? i - e2 + l2 : 0, l = (t2) => {
const e2 = t2.parentElement;
return null == e2 ? t2.getRootNode().host || null : e2;
}, r = (e2, r2) => {
var i, s, d, h;
if ("undefined" == typeof document) return [];
const { scrollMode: c, block: f, inline: u, boundary: a, skipOverflowHiddenElements: g } = r2, p = "function" == typeof a ? a : (t2) => t2 !== a;
if (!t(e2)) throw new TypeError("Invalid target");
const m = document.scrollingElement || document.documentElement, w = [];
let W = e2;
for (; t(W) && p(W); ) {
if (W = l(W), W === m) {
w.push(W);
break;
}
null != W && W === document.body && n(W) && !n(document.documentElement) || null != W && n(W, g) && w.push(W);
}
const b = null != (s = null == (i = window.visualViewport) ? void 0 : i.width) ? s : innerWidth, H = null != (h = null == (d = window.visualViewport) ? void 0 : d.height) ? h : innerHeight, { scrollX: y, scrollY: M } = window, { height: v, width: E, top: x, right: C, bottom: I, left: R } = e2.getBoundingClientRect(), { top: T, right: B, bottom: F, left: V } = ((t2) => {
const e3 = window.getComputedStyle(t2);
return { top: parseFloat(e3.scrollMarginTop) || 0, right: parseFloat(e3.scrollMarginRight) || 0, bottom: parseFloat(e3.scrollMarginBottom) || 0, left: parseFloat(e3.scrollMarginLeft) || 0 };
})(e2);
let k = "start" === f || "nearest" === f ? x - T : "end" === f ? I + F : x + v / 2 - T + F, D = "center" === u ? R + E / 2 - V + B : "end" === u ? C + B : R - V;
const L = [];
for (let t2 = 0; t2 < w.length; t2++) {
const e3 = w[t2], { height: l2, width: r3, top: i2, right: s2, bottom: d2, left: h2 } = e3.getBoundingClientRect();
if ("if-needed" === c && x >= 0 && R >= 0 && I <= H && C <= b && (e3 === m && !n(e3) || x >= i2 && I <= d2 && R >= h2 && C <= s2)) return L;
const a2 = getComputedStyle(e3), g2 = parseInt(a2.borderLeftWidth, 10), p2 = parseInt(a2.borderTopWidth, 10), W2 = parseInt(a2.borderRightWidth, 10), T2 = parseInt(a2.borderBottomWidth, 10);
let B2 = 0, F2 = 0;
const V2 = "offsetWidth" in e3 ? e3.offsetWidth - e3.clientWidth - g2 - W2 : 0, S = "offsetHeight" in e3 ? e3.offsetHeight - e3.clientHeight - p2 - T2 : 0, X = "offsetWidth" in e3 ? 0 === e3.offsetWidth ? 0 : r3 / e3.offsetWidth : 0, Y = "offsetHeight" in e3 ? 0 === e3.offsetHeight ? 0 : l2 / e3.offsetHeight : 0;
if (m === e3) B2 = "start" === f ? k : "end" === f ? k - H : "nearest" === f ? o(M, M + H, H, p2, T2, M + k, M + k + v, v) : k - H / 2, F2 = "start" === u ? D : "center" === u ? D - b / 2 : "end" === u ? D - b : o(y, y + b, b, g2, W2, y + D, y + D + E, E), B2 = Math.max(0, B2 + M), F2 = Math.max(0, F2 + y);
else {
B2 = "start" === f ? k - i2 - p2 : "end" === f ? k - d2 + T2 + S : "nearest" === f ? o(i2, d2, l2, p2, T2 + S, k, k + v, v) : k - (i2 + l2 / 2) + S / 2, F2 = "start" === u ? D - h2 - g2 : "center" === u ? D - (h2 + r3 / 2) + V2 / 2 : "end" === u ? D - s2 + W2 + V2 : o(h2, s2, r3, g2, W2 + V2, D, D + E, E);
const { scrollLeft: t3, scrollTop: n2 } = e3;
B2 = 0 === Y ? 0 : Math.max(0, Math.min(n2 + B2 / Y, e3.scrollHeight - l2 / Y + S)), F2 = 0 === X ? 0 : Math.max(0, Math.min(t3 + F2 / X, e3.scrollWidth - r3 / X + V2)), k += n2 - B2, D += t3 - F2;
}
L.push({ el: e3, top: B2, left: F2 });
}
return L;
};
const STRING = (v) => v === null ? "" : v + "";
const NULLABLE_STRING = (v) => v === null ? null : v + "";
const NUMBER = (v) => v === null ? 0 : Number(v);
const BOOLEAN = (v) => v !== null;
const FUNCTION = () => null;
const ARRAY = (v) => v === null ? [] : JSON.parse(v);
const OBJECT = (v) => v === null ? {} : JSON.parse(v);
function inferAttributeConverter(value) {
if (value === null) return NULLABLE_STRING;
switch (typeof value) {
case "undefined":
return STRING;
case "string":
return STRING;
case "boolean":
return BOOLEAN;
case "number":
return NUMBER;
case "function":
return FUNCTION;
case "object":
return isArray(value) ? ARRAY : OBJECT;
default:
return STRING;
}
}
const ATTRS = /* @__PURE__ */ Symbol(0);
const SETUP = /* @__PURE__ */ Symbol(0);
const SETUP_STATE = /* @__PURE__ */ Symbol(0);
const SETUP_CALLBACKS = /* @__PURE__ */ Symbol(0);
var SetupState;
(function(SetupState2) {
const Idle = 0;
SetupState2[SetupState2["Idle"] = Idle] = "Idle";
const Pending = 1;
SetupState2[SetupState2["Pending"] = Pending] = "Pending";
const Ready = 2;
SetupState2[SetupState2["Ready"] = Ready] = "Ready";
})(SetupState || (SetupState = {}));
function Host(Super, Component) {
class MaverickElement extends Super {
static attrs;
static [ATTRS] = null;
static get observedAttributes() {
if (!this[ATTRS] && Component.props) {
const map = /* @__PURE__ */ new Map();
for (const propName of Object.keys(Component.props)) {
let attr = this.attrs?.[propName], attrName = isString(attr) ? attr : !attr ? attr : attr?.attr;
if (attrName === false) continue;
if (!attrName) attrName = camelToKebabCase(propName);
map.set(attrName, {
prop: propName,
converter: attr && !isString(attr) && attr?.converter || inferAttributeConverter(Component.props[propName])
});
}
this[ATTRS] = map;
}
return this[ATTRS] ? Array.from(this[ATTRS].keys()) : [];
}
$;
[SETUP_STATE] = SetupState.Idle;
[SETUP_CALLBACKS] = null;
keepAlive = false;
forwardKeepAlive = true;
get scope() {
return this.$.$$.scope;
}
get attachScope() {
return this.$.$$.attachScope;
}
get connectScope() {
return this.$.$$.connectScope;
}
get $props() {
return this.$.$$.props;
}
get $state() {
return this.$.$$.$state;
}
get state() {
return this.$.state;
}
constructor(...args) {
super(...args);
this.$ = scoped(() => createComponent(Component), null);
this.$.$$.addHooks(this);
if (Component.props) {
const props = this.$props, descriptors = Object.getOwnPropertyDescriptors(this);
for (const prop of Object.keys(descriptors)) {
if (prop in Component.props) {
props[prop].set(this[prop]);
delete this[prop];
}
}
}
}
attributeChangedCallback(name, _, newValue) {
const Ctor = this.constructor;
if (!Ctor[ATTRS]) {
super.attributeChangedCallback?.(name, _, newValue);
return;
}
const def = Ctor[ATTRS].get(name);
if (def) this[def.prop] = def.converter(newValue);
}
connectedCallback() {
const instance = this.$?.$$;
if (!instance || instance.destroyed) return;
if (this[SETUP_STATE] !== SetupState.Ready) {
setup.call(this);
return;
}
if (!this.isConnected) return;
if (this.hasAttribute("keep-alive")) {
this.keepAlive = true;
}
instance.connect();
if (isArray(this[SETUP_CALLBACKS])) runAll(this[SETUP_CALLBACKS], this);
this[SETUP_CALLBACKS] = null;
const callback = super.connectedCallback;
if (callback) scoped(() => callback.call(this), this.connectScope);
return;
}
disconnectedCallback() {
const instance = this.$?.$$;
if (!instance || instance.destroyed) return;
instance.disconnect();
const callback = super.disconnectedCallback;
if (callback) callback.call(this);
if (!this.keepAlive && !this.hasAttribute("keep-alive")) {
setTimeout(() => {
requestAnimationFrame(() => {
if (!this.isConnected) instance.destroy();
});
}, 0);
}
}
[SETUP]() {
const instance = this.$.$$, Ctor = this.constructor;
if (instance.destroyed) return;
const attrs = Ctor[ATTRS];
if (attrs) {
for (const attr of this.attributes) {
let def = attrs.get(attr.name);
if (def && def.converter) {
instance.props[def.prop].set(def.converter(this.getAttribute(attr.name)));
}
}
}
instance.setup();
instance.attach(this);
this[SETUP_STATE] = SetupState.Ready;
this.connectedCallback();
}
// @ts-expect-error
subscribe(callback) {
return this.$.subscribe(callback);
}
destroy() {
this.disconnectedCallback();
this.$.destroy();
}
}
extendProto(MaverickElement, Component);
return MaverickElement;
}
function extendProto(Element, Component) {
const ElementProto = Element.prototype, ComponentProto = Component.prototype;
if (Component.props) {
for (const prop of Object.keys(Component.props)) {
Object.defineProperty(ElementProto, prop, {
enumerable: true,
configurable: true,
get() {
return this.$props[prop]();
},
set(value) {
this.$props[prop].set(value);
}
});
}
}
if (ComponentProto[PROPS]) {
for (const name of ComponentProto[PROPS]) {
Object.defineProperty(ElementProto, name, {
enumerable: true,
configurable: true,
get() {
return this.$[name];
},
set(value) {
this.$[name] = value;
}
});
}
}
if (ComponentProto[METHODS]) {
for (const name of ComponentProto[METHODS]) {
ElementProto[name] = function(...args) {
return this.$[name](...args);
};
}
}
}
function setup() {
if (this[SETUP_STATE] !== SetupState.Idle) return;
this[SETUP_STATE] = SetupState.Pending;
const parent = findParent(this), isParentRegistered = parent && window.customElements.get(parent.localName), isParentSetup = parent && parent[SETUP_STATE] === SetupState.Ready;
if (parent && (!isParentRegistered || !isParentSetup)) {
waitForParent.call(this, parent);
return;
}
attach.call(this, parent);
}
async function waitForParent(parent) {
await window.customElements.whenDefined(parent.localName);
if (parent[SETUP_STATE] !== SetupState.Ready) {
await new Promise((res) => (parent[SETUP_CALLBACKS] ??= []).push(res));
}
attach.call(this, parent);
}
function attach(parent) {
if (!this.isConnected) return;
if (parent) {
if (parent.keepAlive && parent.forwardKeepAlive) {
this.keepAlive = true;
this.setAttribute("keep-alive", "");
}
const scope = this.$.$$.scope;
if (scope) parent.$.$$.attachScope.append(scope);
}
this[SETUP]();
}
function findParent(host) {
let node = host.parentNode, prefix = host.localName.split("-", 1)[0] + "-";
while (node) {
if (node.nodeType === 1 && node.localName.startsWith(prefix)) {
return node;
}
node = node.parentNode;
}
return null;
}
function defineCustomElement(element, throws = false) {
if (throws || !window.customElements.get(element.tagName)) {
window.customElements.define(element.tagName, element);
}
}
var Icon$24 = `<path fill-rule="evenodd" clip-rule="evenodd" d="M6 7C5.63181 7 5.33333 7.29848 5.33333 7.66667V14.8667C5.33333 14.9403 5.39361 14.9999 5.46724 15.0009C10.8844 15.0719 15.2614 19.449 15.3325 24.8661C15.3334 24.9397 15.393 25 15.4667 25H26C26.3682 25 26.6667 24.7015 26.6667 24.3333V7.66667C26.6667 7.29848 26.3682 7 26 7H6ZM17.0119 22.2294C17.0263 22.29 17.0802 22.3333 17.1425 22.3333H23.3333C23.7015 22.3333 24 22.0349 24 21.6667V10.3333C24 9.96514 23.7015 9.66667 23.3333 9.66667H8.66667C8.29848 9.66667 8 9.96514 8 10.3333V13.1909C8 13.2531 8.04332 13.3071 8.10392 13.3214C12.5063 14.3618 15.9715 17.827 17.0119 22.2294Z" fill="currentColor"/> <path d="M13.2 25C13.2736 25 13.3334 24.9398 13.3322 24.8661C13.2615 20.5544 9.77889 17.0718 5.46718 17.0011C5.39356 16.9999 5.33333 17.0597 5.33333 17.1333V18.8667C5.33333 18.9403 5.39348 18.9999 5.4671 19.0015C8.67465 19.0716 11.2617 21.6587 11.3319 24.8662C11.3335 24.9399 11.393 25 11.4667 25H13.2Z" fill="currentColor"/> <path d="M5.33333 21.1333C5.33333 21.0597 5.39332 20.9998 5.46692 21.0022C7.57033 21.0712 9.26217 22.763 9.33114 24.8664C9.33356 24.94 9.27364 25 9.2 25H6C5.63181 25 5.33333 24.7015 5.33333 24.3333V21.1333Z" fill="currentColor"/>`;
var Icon$0 = `<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0007 28.7923C15.0007 29.0152 14.9774 29.096 14.9339 29.1775C14.8903 29.259 14.8263 29.323 14.7449 29.3665C14.6634 29.4101 14.5826 29.4333 14.3597 29.4333H12.575C12.3521 29.4333 12.2713 29.4101 12.1898 29.3665C12.1083 29.323 12.0443 29.259 12.0008 29.1775C11.9572 29.096 11.934 29.0152 11.934 28.7923V12.2993L5.97496 12.3C5.75208 12.3 5.67125 12.2768 5.58977 12.2332C5.50829 12.1896 5.44434 12.1257 5.40077 12.0442C5.35719 11.9627 5.33398 11.8819 5.33398 11.659V9.87429C5.33398 9.65141 5.35719 9.57059 5.40077 9.48911C5.44434 9.40762 5.50829 9.34368 5.58977 9.3001C5.67125 9.25652 5.75208 9.23332 5.97496 9.23332H26.0263C26.2492 9.23332 26.33 9.25652 26.4115 9.3001C26.493 9.34368 26.557 9.40762 26.6005 9.48911C26.6441 9.57059 26.6673 9.65141 26.6673 9.87429V11.659C26.6673 11.8819 26.6441 11.9627 26.6005 12.0442C26.557 12.1257 26.493 12.1896 26.4115 12.2332C26.33 12.2768 26.2492 12.3 26.0263 12.3L20.067 12.2993L20.0673 28.7923C20.0673 29.0152 20.0441 29.096 20.0005 29.1775C19.957 29.259 19.893 29.323 19.8115 29.3665C19.73 29.4101 19.6492 29.4333 19.4263 29.4333H17.6416C17.4187 29.4333 17.3379 29.4101 17.2564 29.3665C17.175 29.323 17.111 29.259 17.0674 29.1775C17.0239 29.096 17.0007 29.0152 17.0007 28.7923L17 22.7663H15L15.0007 28.7923Z" fill="currentColor"/> <path d="M16.0007 7.89998C17.4734 7.89998 18.6673 6.70608 18.6673 5.23332C18.6673 3.76056 17.4734 2.56665 16.0007 2.56665C14.5279 2.56665 13.334 3.76056 13.334 5.23332C13.334 6.70608 14.5279 7.89998 16.0007 7.89998Z" fill="currentColor"/>`;
var Icon$5 = `<path d="M5.33334 6.00001C5.33334 5.63182 5.63181 5.33334 6 5.33334H26C26.3682 5.33334 26.6667 5.63182 26.6667 6.00001V20.6667C26.6667 21.0349 26.3682 21.3333 26 21.3333H23.7072C23.4956 21.3333 23.2966 21.233 23.171 21.0628L22.1859 19.7295C21.8607 19.2894 22.1749 18.6667 22.7221 18.6667H23.3333C23.7015 18.6667 24 18.3682 24 18V8.66668C24 8.29849 23.7015 8.00001 23.3333 8.00001H8.66667C8.29848 8.00001 8 8.29849 8 8.66668V18C8 18.3682 8.29848 18.6667 8.66667 18.6667H9.29357C9.84072 18.6667 10.1549 19.2894 9.82976 19.7295L8.84467 21.0628C8.71898 21.233 8.52 21.3333 8.30848 21.3333H6C5.63181 21.3333 5.33334 21.0349 5.33334 20.6667V6.00001Z" fill="currentColor"/> <path d="M8.78528 25.6038C8.46013 26.0439 8.77431 26.6667 9.32147 26.6667L22.6785 26.6667C23.2256 26.6667 23.5398 26.0439 23.2146 25.6038L16.5358 16.5653C16.2693 16.2046 15.73 16.2047 15.4635 16.5653L8.78528 25.6038Z" fill="currentColor"/>`;
var Icon$8 = `<path d="M17.4853 18.9093C17.4853 19.0281 17.6289 19.0875 17.7129 19.0035L22.4185 14.2979C22.6788 14.0376 23.1009 14.0376 23.3613 14.2979L24.7755 15.7122C25.0359 15.9725 25.0359 16.3946 24.7755 16.655L16.2902 25.1403C16.0299 25.4006 15.6078 25.4006 15.3474 25.1403L13.9332 23.726L13.9319 23.7247L6.86189 16.6547C6.60154 16.3944 6.60154 15.9723 6.86189 15.7119L8.2761 14.2977C8.53645 14.0373 8.95856 14.0373 9.21891 14.2977L13.9243 19.0031C14.0083 19.0871 14.1519 19.0276 14.1519 18.9088L14.1519 6.00004C14.1519 5.63185 14.4504 5.33337 14.8186 5.33337L16.8186 5.33337C17.1868 5.33337 17.4853 5.63185 17.4853 6.00004L17.4853 18.9093Z" fill="currentColor"/>`;
var Icon$11 = `<path d="M13.0908 14.3334C12.972 14.3334 12.9125 14.1898 12.9965 14.1058L17.7021 9.40022C17.9625 9.13987 17.9625 8.71776 17.7021 8.45741L16.2879 7.04319C16.0275 6.78284 15.6054 6.78284 15.3451 7.04319L6.8598 15.5285C6.59945 15.7888 6.59945 16.2109 6.8598 16.4713L8.27401 17.8855L8.27536 17.8868L15.3453 24.9568C15.6057 25.2172 16.0278 25.2172 16.2881 24.9568L17.7024 23.5426C17.9627 23.2822 17.9627 22.8601 17.7024 22.5998L12.9969 17.8944C12.9129 17.8104 12.9724 17.6668 13.0912 17.6668L26 17.6668C26.3682 17.6668 26.6667 17.3683 26.6667 17.0001V15.0001C26.6667 14.6319 26.3682 14.3334 26 14.3334L13.0908 14.3334Z" fill="currentColor"/>`;
var Icon$13 = `<path d="M14.1521 13.0929C14.1521 12.9741 14.0085 12.9147 13.9245 12.9987L9.21891 17.7043C8.95856 17.9646 8.53645 17.9646 8.2761 17.7043L6.86189 16.29C6.60154 16.0297 6.60154 15.6076 6.86189 15.3472L15.3472 6.86195C15.6075 6.6016 16.0296 6.6016 16.29 6.86195L17.7042 8.27616L17.7055 8.27751L24.7755 15.3475C25.0359 15.6078 25.0359 16.0299 24.7755 16.2903L23.3613 17.7045C23.1009 17.9649 22.6788 17.9649 22.4185 17.7045L17.7131 12.9991C17.6291 12.9151 17.4855 12.9746 17.4855 13.0934V26.0022C17.4855 26.3704 17.187 26.6688 16.8188 26.6688H14.8188C14.4506 26.6688 14.1521 26.3704 14.1521 26.0022L14.1521 13.0929Z" fill="currentColor"/>`;
var Icon$16 = `<path d="M16.6927 25.3346C16.3245 25.3346 16.026 25.0361 16.026 24.6679L16.026 7.3346C16.026 6.96641 16.3245 6.66794 16.6927 6.66794L18.6927 6.66794C19.0609 6.66794 19.3594 6.96642 19.3594 7.3346L19.3594 24.6679C19.3594 25.0361 19.0609 25.3346 18.6927 25.3346H16.6927Z" fill="currentColor"/> <path d="M24.026 25.3346C23.6578 25.3346 23.3594 25.0361 23.3594 24.6679L23.3594 7.3346C23.3594 6.96641 23.6578 6.66794 24.026 6.66794L26.026 6.66794C26.3942 6.66794 26.6927 6.96642 26.6927 7.3346V24.6679C26.6927 25.0361 26.3942 25.3346 26.026 25.3346H24.026Z" fill="currentColor"/> <path d="M5.48113 23.9407C5.38584 24.2963 5.59689 24.6619 5.95254 24.7572L7.88439 25.2748C8.24003 25.3701 8.60559 25.159 8.70089 24.8034L13.1871 8.06067C13.2824 7.70503 13.0713 7.33947 12.7157 7.24417L10.7838 6.72654C10.4282 6.63124 10.0626 6.8423 9.96733 7.19794L5.48113 23.9407Z" fill