@vonage/vivid 4.14.0 → 4.14.1

package/shared/definition45.cjs

@@ -1,8 +1,7 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
-const index = require('./index.cjs');
 const vividElement = require('./vivid-element.cjs');
+const index = require('./index.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
@@ -61,22 +60,22 @@ class SideDrawer extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     mode: "boolean"
   })
 ], SideDrawer.prototype, "alternate");
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     mode: "boolean"
   })
 ], SideDrawer.prototype, "modal");
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     mode: "boolean"
   })
 ], SideDrawer.prototype, "open");
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     mode: "boolean"
   })
 ], SideDrawer.prototype, "trailing");
@@ -90,7 +89,7 @@ const getClasses = ({ modal, open, trailing }) => classNames.classNames(
   ["trailing", trailing]
 );
 const getScrimClasses = ({ open }) => classNames.classNames("scrim", ["open", open]);
-const sideDrawerTemplate = defineVividComponent.html`
+const sideDrawerTemplate = vividElement.html`
 	<div
 		class="${getClasses}"
 		?inert="${(x) => !x.open}"
@@ -106,14 +105,14 @@ const sideDrawerTemplate = defineVividComponent.html`
 
 	${when.when(
   (x) => x.modal,
-  defineVividComponent.html`<div
+  vividElement.html`<div
 			class="${getScrimClasses}"
 			@click="${(x) => x._handleCloseRequest()}"
 		></div>`
 )}
 `;
 
-const sideDrawerDefinition = defineVividComponent.defineVividComponent(
+const sideDrawerDefinition = vividElement.defineVividComponent(
   "side-drawer",
   SideDrawer,
   sideDrawerTemplate,
@@ -122,7 +121,7 @@ const sideDrawerDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerSideDrawer = defineVividComponent.createRegisterFunction(sideDrawerDefinition);
+const registerSideDrawer = vividElement.createRegisterFunction(sideDrawerDefinition);
 
 exports.registerSideDrawer = registerSideDrawer;
 exports.sideDrawerDefinition = sideDrawerDefinition;

package/shared/definition45.js

@@ -1,6 +1,5 @@
-import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { h as handleEscapeKeyAndStopPropogation } from './index.js';
-import { V as VividElement } from './vivid-element.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 

package/shared/definition46.cjs

@@ -1,12 +1,11 @@
 'use strict';
 
 const definition = require('./definition63.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const keyCodes = require('./key-codes.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const slider_template = require('./slider.template.cjs');
 const formAssociated = require('./form-associated.cjs');
-const vividElement = require('./vivid-element.cjs');
 const direction = require('./direction.cjs');
 const aria = require('./aria.cjs');
 const numbers = require('./numbers.cjs');
@@ -414,79 +413,79 @@ class Slider extends FormAssociatedSlider {
   #onMouseOut;
 }
 __decorateClass([
-  defineVividComponent.attr({ attribute: "readonly", mode: "boolean" })
+  vividElement.attr({ attribute: "readonly", mode: "boolean" })
 ], Slider.prototype, "readOnly", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "direction", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "isDragging", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "position", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "trackWidth", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "trackMinWidth", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "trackHeight", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "trackLeft", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "trackMinHeight", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "valueTextFormatter", 2);
 __decorateClass([
-  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], Slider.prototype, "min", 2);
 __decorateClass([
-  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], Slider.prototype, "max", 2);
 __decorateClass([
-  defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
 ], Slider.prototype, "step", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Slider.prototype, "orientation", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Slider.prototype, "mode", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-label" })
+  vividElement.attr({ attribute: "aria-label" })
 ], Slider.prototype, "ariaLabel", 2);
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-valuetext" })
+  vividElement.attr({ attribute: "aria-valuetext" })
 ], Slider.prototype, "ariaValuetext", 2);
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     mode: "boolean"
   })
 ], Slider.prototype, "markers", 2);
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], Slider.prototype, "pin", 2);
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Slider.prototype, "connotation", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "_focusVisible", 2);
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Slider.prototype, "_hoveringOnThumb", 2);
 __decorateClass([
-  defineVividComponent.volatile
+  vividElement.volatile
 ], Slider.prototype, "_isThumbPopupOpen", 1);
 applyMixins.applyMixins(Slider, localized.Localized);
 
-const sliderDefinition = defineVividComponent.defineVividComponent(
+const sliderDefinition = vividElement.defineVividComponent(
   "slider",
   Slider,
   slider_template.SliderTemplate,
@@ -498,7 +497,7 @@ const sliderDefinition = defineVividComponent.defineVividComponent(
     }
   }
 );
-const registerSlider = defineVividComponent.createRegisterFunction(sliderDefinition);
+const registerSlider = vividElement.createRegisterFunction(sliderDefinition);
 
 exports.Slider = Slider;
 exports.registerSlider = registerSlider;

package/shared/definition46.js

@@ -1,10 +1,9 @@
 import { p as popupDefinition } from './definition63.js';
-import { a as attr, o as observable, n as nullableNumberConverter, v as volatile, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, a as attr, o as observable, n as nullableNumberConverter, v as volatile, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { g as keyHome, d as keyEnd, f as keyArrowDown, h as keyArrowLeft, e as keyArrowUp, i as keyArrowRight } from './key-codes.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { i as inverseLerp, l as lerp, r as roundToStepValue, S as SliderTemplate } from './slider.template.js';
 import { F as FormAssociated } from './form-associated.js';
-import { V as VividElement } from './vivid-element.js';
 import { D as Direction, g as getDirection } from './direction.js';
 import { O as Orientation } from './aria.js';
 import { l as limit } from './numbers.js';

package/shared/definition47.cjs

@@ -1,10 +1,9 @@
 'use strict';
 
 const definition = require('./definition27.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const affix = require('./affix.cjs');
-const vividElement = require('./vivid-element.cjs');
 const localized = require('./localized.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
@@ -35,37 +34,37 @@ class SplitButton extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], SplitButton.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], SplitButton.prototype, "shape");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], SplitButton.prototype, "appearance");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], SplitButton.prototype, "size");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], SplitButton.prototype, "label");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], SplitButton.prototype, "icon");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "split-indicator", mode: "fromView" })
+  vividElement.attr({ attribute: "split-indicator", mode: "fromView" })
 ], SplitButton.prototype, "splitIndicator");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "disabled", mode: "boolean" })
+  vividElement.attr({ attribute: "disabled", mode: "boolean" })
 ], SplitButton.prototype, "disabled");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-label" })
+  vividElement.attr({ attribute: "aria-label" })
 ], SplitButton.prototype, "ariaLabel");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "aria-expanded" })
+  vividElement.attr({ attribute: "aria-expanded" })
 ], SplitButton.prototype, "ariaExpanded");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "indicator-aria-label" })
+  vividElement.attr({ attribute: "indicator-aria-label" })
 ], SplitButton.prototype, "indicatorAriaLabel");
 applyMixins.applyMixins(SplitButton, affix.AffixIcon, localized.Localized);
 
@@ -90,7 +89,7 @@ const getClasses = ({
 );
 function actionButton(context) {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return defineVividComponent.html`
+  return vividElement.html`
 		<button
 			${ref.ref("_action")}
 			class="control ${getClasses}"
@@ -107,7 +106,7 @@ function actionButton(context) {
 }
 function indicatorButton(context) {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return defineVividComponent.html`
+  return vividElement.html`
 		<button
 			${ref.ref("_indicator")}
 			class="indicator ${getClasses}"
@@ -123,7 +122,7 @@ function indicatorButton(context) {
 	`;
 }
 const SplitButtonTemplate = (context) => {
-  return defineVividComponent.html` <template role="presentation">
+  return vividElement.html` <template role="presentation">
 		<div class="base" role="group">
 			${actionButton(context)} ${indicatorButton(context)}
 			<slot></slot>
@@ -131,7 +130,7 @@ const SplitButtonTemplate = (context) => {
 	</template>`;
 };
 
-const splitButtonDefinition = defineVividComponent.defineVividComponent(
+const splitButtonDefinition = vividElement.defineVividComponent(
   "split-button",
   SplitButton,
   SplitButtonTemplate,
@@ -143,7 +142,7 @@ const splitButtonDefinition = defineVividComponent.defineVividComponent(
     }
   }
 );
-const registerSplitButton = defineVividComponent.createRegisterFunction(
+const registerSplitButton = vividElement.createRegisterFunction(
   splitButtonDefinition
 );
 

package/shared/definition47.js

@@ -1,8 +1,7 @@
 import { i as iconDefinition } from './definition27.js';
-import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { V as VividElement } from './vivid-element.js';
 import { L as Localized } from './localized.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';

package/shared/definition48.cjs

@@ -1,9 +1,8 @@
 'use strict';
 
 const definition = require('./definition27.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
-const formAssociated = require('./form-associated.cjs');
 const vividElement = require('./vivid-element.cjs');
+const formAssociated = require('./form-associated.cjs');
 const keyCodes = require('./key-codes.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
@@ -81,16 +80,16 @@ class Switch extends FormAssociatedSwitch {
   }
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Switch.prototype, "label");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], Switch.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "readonly", mode: "boolean" })
+  vividElement.attr({ attribute: "readonly", mode: "boolean" })
 ], Switch.prototype, "readOnly");
 __decorateClass([
-  defineVividComponent.observable
+  vividElement.observable
 ], Switch.prototype, "defaultSlottedNodes");
 
 const getClasses = (_) => classNames.classNames(
@@ -104,7 +103,7 @@ const getClasses = (_) => classNames.classNames(
     Boolean(_.checked) && Boolean(_.connotation)
   ]
 );
-const SwitchTemplate = defineVividComponent.html`
+const SwitchTemplate = vividElement.html`
 	<div
 		class="${getClasses}"
 		role="switch"
@@ -120,12 +119,12 @@ const SwitchTemplate = defineVividComponent.html`
 		</div>
 		${when.when(
   (x) => x.label,
-  defineVividComponent.html`<div class="label">${(x) => x.label}</div>`
+  vividElement.html`<div class="label">${(x) => x.label}</div>`
 )}
 	</div>
 `;
 
-const switchDefinition = defineVividComponent.defineVividComponent(
+const switchDefinition = vividElement.defineVividComponent(
   "switch",
   Switch,
   SwitchTemplate,
@@ -137,7 +136,7 @@ const switchDefinition = defineVividComponent.defineVividComponent(
     }
   }
 );
-const registerSwitch = defineVividComponent.createRegisterFunction(switchDefinition);
+const registerSwitch = vividElement.createRegisterFunction(switchDefinition);
 
 exports.registerSwitch = registerSwitch;
 exports.switchDefinition = switchDefinition;

package/shared/definition48.js

@@ -1,7 +1,6 @@
 import { i as iconDefinition } from './definition27.js';
-import { a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 import { C as CheckableFormAssociated } from './form-associated.js';
-import { V as VividElement } from './vivid-element.js';
 import { a as keySpace, k as keyEnter } from './key-codes.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';

package/shared/definition49.cjs

@@ -1,25 +1,24 @@
 'use strict';
 
-const defineVividComponent = require('./defineVividComponent.cjs');
 const vividElement = require('./vivid-element.cjs');
 
 class TabPanel extends vividElement.VividElement {
 }
 
-const TabPanelTemplate = defineVividComponent.html`
+const TabPanelTemplate = vividElement.html`
 	<template slot="tabpanel" role="tabpanel">
 		<slot></slot>
 	</template>
 `;
 
-const tabPanelDefinition = defineVividComponent.defineVividComponent(
+const tabPanelDefinition = vividElement.defineVividComponent(
   "tab-panel",
   TabPanel,
   TabPanelTemplate,
   [],
   {}
 );
-const registerTabPanel = defineVividComponent.createRegisterFunction(tabPanelDefinition);
+const registerTabPanel = vividElement.createRegisterFunction(tabPanelDefinition);
 
 exports.registerTabPanel = registerTabPanel;
 exports.tabPanelDefinition = tabPanelDefinition;

package/shared/definition49.js

@@ -1,5 +1,4 @@
-import { h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
-import { V as VividElement } from './vivid-element.js';
+import { V as VividElement, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
 
 class TabPanel extends VividElement {
 }

package/shared/definition5.cjs

@@ -3,10 +3,9 @@
 const definition$1 = require('./definition11.cjs');
 const definition$2 = require('./definition46.cjs');
 const definition = require('./definition29.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const enums = require('./enums.cjs');
 const applyMixins = require('./apply-mixins.cjs');
-const vividElement = require('./vivid-element.cjs');
 const localized = require('./localized.cjs');
 const playbackRates = require('./playbackRates.cjs');
 const when = require('./when.cjs');
@@ -74,7 +73,7 @@ class AudioPlayer extends vividElement.VividElement {
     this.#currentTimeChanged = false;
     this.#updateProgress = () => {
       this.#currentTimeChanged = true;
-      defineVividComponent.Observable.notify(this, "currentTime");
+      vividElement.Observable.notify(this, "currentTime");
       const percent = this.currentTime / this.duration * 100;
       this.#sliderEl.currentValue = percent.toString();
       if (percent === 100) {
@@ -82,7 +81,7 @@ class AudioPlayer extends vividElement.VividElement {
       }
     };
     this.#updateTotalTime = () => {
-      defineVividComponent.Observable.notify(this, "duration");
+      vividElement.Observable.notify(this, "duration");
     };
     this.#updateCurrentTimeOnSliderChange = () => {
       if (!this.paused && this.#sliderEl.isDragging) {
@@ -100,18 +99,18 @@ class AudioPlayer extends vividElement.VividElement {
       this.#currentTimeChanged = false;
     };
     this.#setPausedState = () => {
-      defineVividComponent.Observable.notify(this, "paused");
+      vividElement.Observable.notify(this, "paused");
     };
     this.#playerEl.addEventListener("timeupdate", this.#updateProgress);
     this.#playerEl.addEventListener("loadedmetadata", this.#updateTotalTime);
   }
   get playbackRate() {
-    defineVividComponent.Observable.track(this, "playbackRate");
+    vividElement.Observable.track(this, "playbackRate");
     return this.#playerEl.playbackRate;
   }
   set playbackRate(value) {
     this.#playerEl.playbackRate = value;
-    defineVividComponent.Observable.notify(this, "playbackRate");
+    vividElement.Observable.notify(this, "playbackRate");
   }
   srcChanged() {
     if (this.src === void 0) {
@@ -121,19 +120,19 @@ class AudioPlayer extends vividElement.VividElement {
     }
   }
   get paused() {
-    defineVividComponent.Observable.track(this, "paused");
+    vividElement.Observable.track(this, "paused");
     return this.#playerEl.paused;
   }
   set paused(_) {
   }
   get duration() {
-    defineVividComponent.Observable.track(this, "duration");
+    vividElement.Observable.track(this, "duration");
     return this.#playerEl.duration;
   }
   set duration(_) {
   }
   get currentTime() {
-    defineVividComponent.Observable.track(this, "currentTime");
+    vividElement.Observable.track(this, "currentTime");
     return this.#playerEl.currentTime;
   }
   set currentTime(value) {
@@ -174,40 +173,40 @@ class AudioPlayer extends vividElement.VividElement {
   #setPausedState;
 }
 __decorateClass([
-  defineVividComponent.attr({ attribute: "play-button-aria-label" })
+  vividElement.attr({ attribute: "play-button-aria-label" })
 ], AudioPlayer.prototype, "playButtonAriaLabel");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "pause-button-aria-label" })
+  vividElement.attr({ attribute: "pause-button-aria-label" })
 ], AudioPlayer.prototype, "pauseButtonAriaLabel");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "slider-aria-label" })
+  vividElement.attr({ attribute: "slider-aria-label" })
 ], AudioPlayer.prototype, "sliderAriaLabel");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "skip-forward-aria-label" })
+  vividElement.attr({ attribute: "skip-forward-aria-label" })
 ], AudioPlayer.prototype, "skipForwardButtonAriaLabel");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "skip-backward-aria-label" })
+  vividElement.attr({ attribute: "skip-backward-aria-label" })
 ], AudioPlayer.prototype, "skipBackwardButtonAriaLabel");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], AudioPlayer.prototype, "connotation");
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], AudioPlayer.prototype, "src");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], AudioPlayer.prototype, "disabled");
 __decorateClass([
-  defineVividComponent.attr({ mode: "boolean" })
+  vividElement.attr({ mode: "boolean" })
 ], AudioPlayer.prototype, "notime");
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     attribute: "skip-by",
     converter: validSkipByConverter
   })
 ], AudioPlayer.prototype, "skipBy");
 __decorateClass([
-  defineVividComponent.attr({ attribute: "playback-rates" })
+  vividElement.attr({ attribute: "playback-rates" })
 ], AudioPlayer.prototype, "playbackRates");
 applyMixins.applyMixins(AudioPlayer, localized.Localized);
 
@@ -239,7 +238,7 @@ const isMenuItemChekced = (playbackRate, { parent }) => {
 };
 function renderButton(context) {
   const buttonTag = context.tagFor(definition$1.Button);
-  return defineVividComponent.html`<${buttonTag} class="pause" @click="${(x) => x.paused ? x.play() : x.pause()}"
+  return vividElement.html`<${buttonTag} class="pause" @click="${(x) => x.paused ? x.play() : x.pause()}"
 	icon="${(x) => x.paused ? "play-solid" : "pause-solid"}"
 	aria-label="${(x) => x.paused ? x.playButtonAriaLabel || x.locale.audioPlayer.playButtonLabel : x.pauseButtonAriaLabel || x.locale.audioPlayer.pauseButtonLabel}"
 	size='condensed'
@@ -249,7 +248,7 @@ function renderButton(context) {
 }
 function renderBackwardSkipButtons(context) {
   const buttonTag = context.tagFor(definition$1.Button);
-  return defineVividComponent.html`
+  return vividElement.html`
 		<${buttonTag} class="skip backward"
 			@click="${(element) => skip(element, SKIP_DIRECTIONS.BACKWARD)}"
 		icon="${(x) => x.skipBy == enums.MediaSkipBy.Five ? "5-sec-backward-line" : x.skipBy == enums.MediaSkipBy.Thirty ? "30-sec-backward-line" : "10-sec-backward-line"}"
@@ -262,7 +261,7 @@ function renderBackwardSkipButtons(context) {
 }
 function renderForwardSkipButtons(context) {
   const buttonTag = context.tagFor(definition$1.Button);
-  return defineVividComponent.html`
+  return vividElement.html`
 		<${buttonTag} class="skip forward"
 		@click="${(element) => skip(element, SKIP_DIRECTIONS.FORWARD)}"
 		icon="${(x) => x.skipBy == enums.MediaSkipBy.Five ? "5-sec-forward-line" : x.skipBy == enums.MediaSkipBy.Thirty ? "30-sec-forward-line" : "10-sec-forward-line"}"
@@ -275,7 +274,7 @@ function renderForwardSkipButtons(context) {
 }
 function renderSlider(context) {
   const sliderTag = context.tagFor(definition$2.Slider);
-  return defineVividComponent.html`
+  return vividElement.html`
 	<${sliderTag}
 		class="slider"
 		value="0"
@@ -287,7 +286,7 @@ function renderSlider(context) {
 	</${sliderTag}>`;
 }
 function renderTimestamp() {
-  return defineVividComponent.html` <div class="time-stamp">
+  return vividElement.html` <div class="time-stamp">
 		<span class="current-time">${(x) => formatTime(x.currentTime)}</span>
 		<span>/</span>
 		<span class="total-time">${(x) => formatTime(x.duration)}</span>
@@ -301,7 +300,7 @@ const AudioPlayerTemplate = (context) => {
   const menuTag = context.tagFor(definition.Menu);
   const buttonTag = context.tagFor(definition$1.Button);
   const menuItemTag = context.tagFor(definition.MenuItem);
-  return defineVividComponent.html` <div class="wrapper">
+  return vividElement.html` <div class="wrapper">
 		<div class="base ${getClasses}">
 			<div class="controls">
 				${when.when(
@@ -318,7 +317,7 @@ const AudioPlayerTemplate = (context) => {
 			${renderSlider(context)}
 			${when.when(
     (x) => Boolean(x.playbackRates),
-    defineVividComponent.html`
+    vividElement.html`
 			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss id="playback-menu" position-strategy="absolute">
 				<${buttonTag} id="playback-open-button"
 							  class="playback-button"
@@ -332,7 +331,7 @@ const AudioPlayerTemplate = (context) => {
 
 				${repeat.repeat(
       (x) => playbackRates.getPlaybackRatesArray(x.playbackRates),
-      defineVividComponent.html`<${menuItemTag} @click="${handlePlaybackRateClick}"
+      vividElement.html`<${menuItemTag} @click="${handlePlaybackRateClick}"
 																			 role="menuitemradio"
 																			 class="playback-rate"
 																			 text="${(x) => x}"
@@ -345,7 +344,7 @@ const AudioPlayerTemplate = (context) => {
 	</div>`;
 };
 
-const audioPlayerDefinition = defineVividComponent.defineVividComponent(
+const audioPlayerDefinition = vividElement.defineVividComponent(
   "audio-player",
   AudioPlayer,
   AudioPlayerTemplate,
@@ -354,7 +353,7 @@ const audioPlayerDefinition = defineVividComponent.defineVividComponent(
     styles
   }
 );
-const registerAudioPlayer = defineVividComponent.createRegisterFunction(
+const registerAudioPlayer = vividElement.createRegisterFunction(
   audioPlayerDefinition
 );