@vonage/vivid 4.12.1 → 4.14.0

package/shared/definition25.js

@@ -1,16 +1,17 @@
-import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition27.js';
-import { c as Button, a as buttonRegistries } from './definition11.js';
+import { i as iconDefinition } from './definition27.js';
+import { B as Button, b as buttonDefinition } from './definition11.js';
+import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
 import { C as Connotation } from './enums.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { F as FormAssociated } from './form-associated.js';
+import { V as VividElement } from './vivid-element.js';
 import { e as errorText, f as formElements, a as FormElementHelperText, g as getFeedbackTemplate } from './form-elements.js';
 import { L as Localized } from './localized.js';
 import { w as when } from './when.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.control:hover{border-style:solid;background-color:var(--vvd-color-cta-100)}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
+const styles = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit}.control{display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: 1px;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.control:hover,.control:active,.control:focus-visible{background-color:var(--vvd-color-cta-100)}.main{pointer-events:none}.dz-preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.dz-preview .dz-details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.dz-preview .dz-details .dz-filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.dz-preview .dz-details .dz-size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.dz-preview .dz-error-message{color:var(--vvd-color-alert-500);font:var(--vvd-typography-base-condensed);margin-block-start:4px}.dz-preview:not(.dz-error) .dz-error-message{display:none}.dz-preview.dz-error{border:1px solid var(--vvd-color-alert-500)}.dz-preview.dz-error .dz-details .dz-size,.dz-preview.dz-error .dz-progress{display:none}.dz-preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.message{margin-block-start:4px;--_low-ink-color: var(--vvd-color-neutral-600)}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-thumb-color)}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:empty{display:none}";
 
 var objectExtend = extend;
 
@@ -2138,7 +2139,7 @@ function $3ed269f2f0fb224b$var$__guardMethod__(obj, methodName, transform) {
     else return undefined;
 }
 
-class _FilePicker extends FoundationElement {
+class _FilePicker extends VividElement {
 }
 class FormAssociatedFilePicker extends FormAssociated(_FilePicker) {
   constructor() {
@@ -2253,6 +2254,18 @@ let FilePicker = class extends FormAssociatedFilePicker {
     }
     __privateGet(this, _dropzone).options.acceptedFiles = newValue;
   }
+  invalidFileTypeErrorChanged(_oldValue, newValue) {
+    if (__privateGet(this, _dropzone))
+      __privateGet(this, _dropzone).options.dictInvalidFileType = newValue || this.locale.filePicker.invalidFileTypeError;
+  }
+  maxFilesExceededErrorChanged(_oldValue, newValue) {
+    if (__privateGet(this, _dropzone))
+      __privateGet(this, _dropzone).options.dictMaxFilesExceeded = newValue || this.locale.filePicker.maxFilesExceededError;
+  }
+  fileTooBigErrorChanged(_oldValue, newValue) {
+    if (__privateGet(this, _dropzone))
+      __privateGet(this, _dropzone).options.dictFileTooBig = newValue || this.locale.filePicker.fileTooBigError;
+  }
   nameChanged(previous, next) {
     super.nameChanged(previous, next);
     __privateMethod(this, _FilePicker_instances, updateFormValue_fn).call(this);
@@ -2276,9 +2289,9 @@ let FilePicker = class extends FormAssociatedFilePicker {
       previewsContainer: previewList,
       createImageThumbnails: false,
       previewTemplate: generateFilePreviewTemplate(this.buttonTag, this.locale),
-      dictInvalidFileType: this.locale.filePicker.invalidFileTypeError,
-      dictMaxFilesExceeded: this.locale.filePicker.maxFilesExceededError,
-      dictFileTooBig: this.locale.filePicker.fileTooBigError,
+      dictInvalidFileType: this.invalidFileTypeError || this.locale.filePicker.invalidFileTypeError,
+      dictMaxFilesExceeded: this.maxFilesExceededError || this.locale.filePicker.maxFilesExceededError,
+      dictFileTooBig: this.fileTooBigError || this.locale.filePicker.fileTooBigError,
       error: __privateGet(this, _localizeErrorMessage)
     }));
     __privateGet(this, _localizeFileSizeNumberAndUnits).call(this);
@@ -2421,6 +2434,15 @@ __decorateClass([
 __decorateClass([
   attr
 ], FilePicker.prototype, "size", 2);
+__decorateClass([
+  attr({ attribute: "invalid-file-type-error" })
+], FilePicker.prototype, "invalidFileTypeError", 2);
+__decorateClass([
+  attr({ attribute: "max-files-exceeded-error" })
+], FilePicker.prototype, "maxFilesExceededError", 2);
+__decorateClass([
+  attr({ attribute: "file-too-big-error" })
+], FilePicker.prototype, "fileTooBigError", 2);
 FilePicker = __decorateClass([
   errorText,
   formElements
@@ -2456,19 +2478,18 @@ const FilePickerTemplate = (context) => {
 	`;
 };
 
-const filePickerDefinition = FilePicker.compose({
-  baseName: "file-picker",
-  template: FilePickerTemplate,
-  styles,
-  shadowOptions: {
-    delegatesFocus: true
+const filePickerDefinition = defineVividComponent(
+  "file-picker",
+  FilePicker,
+  FilePickerTemplate,
+  [iconDefinition, buttonDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
   }
-});
-const filePickerRegistries = [
-  filePickerDefinition(),
-  ...iconRegistries,
-  ...buttonRegistries
-];
-const registerFilePicker = registerFactory(filePickerRegistries);
+);
+const registerFilePicker = createRegisterFunction(filePickerDefinition);
 
-export { filePickerRegistries as a, filePickerDefinition as f, registerFilePicker as r };
+export { filePickerDefinition as f, registerFilePicker as r };

package/shared/definition26.cjs

@@ -1,7 +1,8 @@
 'use strict';
 
-const index = require('./index.cjs');
-const definition = require('./definition63.cjs');
+const definition = require('./definition62.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 const classNames = require('./class-names.cjs');
 
 const styles = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }";
@@ -15,7 +16,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Header extends index.FoundationElement {
+class Header extends vividElement.VividElement {
   constructor() {
     super(...arguments);
     this.elevationShadow = false;
@@ -23,13 +24,13 @@ class Header extends index.FoundationElement {
   }
 }
 __decorateClass([
-  index.attr({
+  defineVividComponent.attr({
     attribute: "elevation-shadow",
     mode: "boolean"
   })
 ], Header.prototype, "elevationShadow");
 __decorateClass([
-  index.attr({
+  defineVividComponent.attr({
     mode: "boolean"
   })
 ], Header.prototype, "alternate");
@@ -37,7 +38,7 @@ __decorateClass([
 const getPartAlternate = ({ alternate }) => classNames.classNames(["vvd-theme-alternate", Boolean(alternate)]);
 const headerTemplate = (context) => {
   const elevationTag = context.tagFor(definition.Elevation);
-  return index.html`
+  return defineVividComponent.html`
     <${elevationTag} dp="4" ?no-shadow=${(x) => !x.elevationShadow}>
       <header class="base" part="base">
         <!-- a container is needed to distinguish the surface background color of the
@@ -58,14 +59,16 @@ const headerTemplate = (context) => {
 	`;
 };
 
-const headerDefinition = Header.compose({
-  baseName: "header",
-  template: headerTemplate,
-  styles
-});
-const headerRegistries = [headerDefinition(), ...definition.elevationRegistries];
-const registerHeader = index.registerFactory(headerRegistries);
+const headerDefinition = defineVividComponent.defineVividComponent(
+  "header",
+  Header,
+  headerTemplate,
+  [definition.elevationDefinition],
+  {
+    styles
+  }
+);
+const registerHeader = defineVividComponent.createRegisterFunction(headerDefinition);
 
 exports.headerDefinition = headerDefinition;
-exports.headerRegistries = headerRegistries;
 exports.registerHeader = registerHeader;

package/shared/definition26.js

@@ -1,5 +1,6 @@
-import { F as FoundationElement, a as attr, h as html, r as registerFactory } from './index.js';
-import { E as Elevation, e as elevationRegistries } from './definition63.js';
+import { E as Elevation, e as elevationDefinition } from './definition62.js';
+import { a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
+import { V as VividElement } from './vivid-element.js';
 import { c as classNames } from './class-names.js';
 
 const styles = ".base{z-index:1;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{display:inline-flex;align-items:center;column-gap:4px}.container{display:flex;box-sizing:border-box;justify-content:space-between;background-color:var(--header-bg-color, var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);column-gap:12px;padding-block:8px;padding-inline:16px}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) + 1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }";
@@ -13,7 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Header extends FoundationElement {
+class Header extends VividElement {
   constructor() {
     super(...arguments);
     this.elevationShadow = false;
@@ -56,12 +57,15 @@ const headerTemplate = (context) => {
 	`;
 };
 
-const headerDefinition = Header.compose({
-  baseName: "header",
-  template: headerTemplate,
-  styles
-});
-const headerRegistries = [headerDefinition(), ...elevationRegistries];
-const registerHeader = registerFactory(headerRegistries);
+const headerDefinition = defineVividComponent(
+  "header",
+  Header,
+  headerTemplate,
+  [elevationDefinition],
+  {
+    styles
+  }
+);
+const registerHeader = createRegisterFunction(headerDefinition);
 
-export { headerRegistries as a, headerDefinition as h, registerHeader as r };
+export { headerDefinition as h, registerHeader as r };

package/shared/definition27.cjs

@@ -1,40 +1,293 @@
 'use strict';
 
-const index = require('./index.cjs');
-const icon = require('./icon.cjs');
-const classNames = require('./class-names.cjs');
+const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
+const _has = require('./_has.cjs');
 const when = require('./when.cjs');
+const classNames = require('./class-names.cjs');
 
 const styles = ":host{display:inline-block;vertical-align:sub}.control.connotation-accent{--_connotation-color-primary: var(--vvd-icon-accent-primary, var(--vvd-color-canvas-text))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-icon-announcement-primary, var(--vvd-color-announcement-500))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-icon-cta-primary, var(--vvd-color-cta-500))}.control.connotation-success{--_connotation-color-primary: var(--vvd-icon-success-primary, var(--vvd-color-success-500))}.control.connotation-warning{--_connotation-color-primary: var(--vvd-icon-warning-primary, var(--vvd-color-warning-300))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-icon-alert-primary, var(--vvd-color-alert-500))}.control.connotation-information{--_connotation-color-primary: var(--vvd-icon-information-primary, var(--vvd-color-information-500))}.control.size--6{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.control.size--5{--_icon-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--4{--_icon-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--3{--_icon-block-size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--2{--_icon-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size--1{--_icon-block-size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-0{--_icon-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-1{--_icon-block-size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-2{--_icon-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-3{--_icon-block-size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-4{--_icon-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.size-5{--_icon-block-size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_icon-block-size: 1em}.control{display:flex;margin:unset;block-size:var(--_icon-block-size);color:currentColor;contain:strict;inline-size:var(--_icon-block-size)}.control[class*=connotation]{color:var(--_connotation-color-primary)}slot,svg,::slotted(:where(svg,img)){margin:auto;block-size:inherit;inline-size:inherit}";
 
+function _arity(n, fn) {
+  /* eslint-disable no-unused-vars */
+  switch (n) {
+    case 0:
+      return function () {
+        return fn.apply(this, arguments);
+      };
+
+    case 1:
+      return function (a0) {
+        return fn.apply(this, arguments);
+      };
+
+    case 2:
+      return function (a0, a1) {
+        return fn.apply(this, arguments);
+      };
+
+    case 3:
+      return function (a0, a1, a2) {
+        return fn.apply(this, arguments);
+      };
+
+    case 4:
+      return function (a0, a1, a2, a3) {
+        return fn.apply(this, arguments);
+      };
+
+    case 5:
+      return function (a0, a1, a2, a3, a4) {
+        return fn.apply(this, arguments);
+      };
+
+    case 6:
+      return function (a0, a1, a2, a3, a4, a5) {
+        return fn.apply(this, arguments);
+      };
+
+    case 7:
+      return function (a0, a1, a2, a3, a4, a5, a6) {
+        return fn.apply(this, arguments);
+      };
+
+    case 8:
+      return function (a0, a1, a2, a3, a4, a5, a6, a7) {
+        return fn.apply(this, arguments);
+      };
+
+    case 9:
+      return function (a0, a1, a2, a3, a4, a5, a6, a7, a8) {
+        return fn.apply(this, arguments);
+      };
+
+    case 10:
+      return function (a0, a1, a2, a3, a4, a5, a6, a7, a8, a9) {
+        return fn.apply(this, arguments);
+      };
+
+    default:
+      throw new Error('First argument to _arity must be a non-negative integer no greater than ten');
+  }
+}
+
+function _identity(x) {
+  return x;
+}
+
+/**
+ * A function that does nothing but return the parameter supplied to it. Good
+ * as a default or placeholder function.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.1.0
+ * @category Function
+ * @sig a -> a
+ * @param {*} x The value to return.
+ * @return {*} The input value, `x`.
+ * @example
+ *
+ *      R.identity(1); //=> 1
+ *
+ *      const obj = {};
+ *      R.identity(obj) === obj; //=> true
+ * @symb R.identity(a) = a
+ */
+
+var identity =
+/*#__PURE__*/
+_has._curry1(_identity);
+
+/**
+ * Creates a new function that, when invoked, caches the result of calling `fn`
+ * for a given argument set and returns the result. Subsequent calls to the
+ * memoized `fn` with the same argument set will not result in an additional
+ * call to `fn`; instead, the cached result for that set of arguments will be
+ * returned.
+ *
+ * Care must be taken when implementing key generation to avoid key collision,
+ * or if tracking references, memory leaks and mutating arguments.
+ *
+ * @func
+ * @memberOf R
+ * @since v0.24.0
+ * @category Function
+ * @sig (*... -> String) -> (*... -> a) -> (*... -> a)
+ * @param {Function} fn The function to generate the cache key.
+ * @param {Function} fn The function to memoize.
+ * @return {Function} Memoized version of `fn`.
+ * @example
+ *
+ *      let count = 0;
+ *      const factorial = R.memoizeWith(Number, n => {
+ *        count += 1;
+ *        return R.product(R.range(1, n + 1));
+ *      });
+ *      factorial(5); //=> 120
+ *      factorial(5); //=> 120
+ *      factorial(5); //=> 120
+ *      count; //=> 1
+ */
+
+var memoizeWith =
+/*#__PURE__*/
+_has._curry2(function memoizeWith(mFn, fn) {
+  var cache = {};
+  return _arity(fn.length, function () {
+    var key = mFn.apply(this, arguments);
+
+    if (!_has._has(key, cache)) {
+      cache[key] = fn.apply(this, arguments);
+    }
+
+    return cache[key];
+  });
+});
+
+const ICONS_BASE_URL = "https://icon.resources.vonage.com";
+const ICONS_VERSION = "4.6.2";
+
+const numberConverter = {
+  toView(value) {
+    if (value === void 0) {
+      return null;
+    }
+    return value.toString();
+  },
+  fromView(value) {
+    if (typeof value === "string") {
+      value = parseFloat(value.toString());
+    }
+    if (typeof value !== "number") {
+      return void 0;
+    }
+    return isNaN(value) || !isFinite(value) ? void 0 : value;
+  }
+};
+
+const PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
+    <g>
+        <g stroke-width="6" stroke-linecap="round" fill="none">
+            <path stroke="currentColor" d="M4,32 c0,15,12,28,28,28c8,0,16-4,21-9">
+            </path>
+            <path d="M60,32 C60,16,47.464,4,32,4S4,16,4,32">
+            </path>
+            <animateTransform values="0,32,32;360,32,32" attributeName="transform" type="rotate" repeatCount="indefinite" dur="750ms">
+            </animateTransform>
+        </g>
+    </g>
+</svg>`;
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const PLACEHOLDER_DELAY = 500;
+const PLACEHOLDER_TIMEOUT = 2e3;
+const baseUrlTemplate = (resource, version) => [ICONS_BASE_URL, `v${version}`, resource].join("/");
+const assertIsValidResponse = ({ ok, headers }) => {
+  if (!ok || headers.get("content-type") !== "image/svg+xml") {
+    throw new Error("Something went wrong");
+  }
+};
+const extractSvg = (response) => {
+  assertIsValidResponse(response);
+  return response.text();
+};
+const loadSvg = (iconId, signal) => fetch(baseUrlTemplate([iconId, "svg"].join("."), ICONS_VERSION), {
+  signal
+}).then(extractSvg);
+const resolveIcon = memoizeWith(
+  identity,
+  (iconId, signal) => iconId.trim() ? loadSvg(iconId, signal) : Promise.resolve("")
+);
+class Icon extends vividElement.VividElement {
+  constructor() {
+    super(...arguments);
+    this.iconLoaded = false;
+    this.#abortController = null;
+  }
+  get iconUrl() {
+    return !this.name ? this._svg : baseUrlTemplate(`${this.name}.svg`, ICONS_VERSION);
+  }
+  #abortController;
+  async nameChanged() {
+    if (this.#abortController) {
+      this.#abortController.abort();
+    }
+    this.#abortController = new AbortController();
+    this._svg = void 0;
+    this.iconLoaded = false;
+    let timeout = setTimeout(() => {
+      this._svg = PLACEHOLDER_ICON;
+      timeout = setTimeout(() => {
+        if (this._svg === PLACEHOLDER_ICON) {
+          this._svg = void 0;
+        }
+      }, PLACEHOLDER_TIMEOUT);
+    }, PLACEHOLDER_DELAY);
+    await resolveIcon(this.name ? this.name : "", this.#abortController.signal).then((svg) => {
+      this._svg = svg;
+    }).catch(() => {
+      this._svg = void 0;
+    }).finally(() => {
+      clearTimeout(timeout);
+      this.iconLoaded = true;
+    });
+  }
+}
+__decorateClass([
+  defineVividComponent.attr
+], Icon.prototype, "connotation", 2);
+__decorateClass([
+  defineVividComponent.attr({ converter: numberConverter })
+], Icon.prototype, "size", 2);
+__decorateClass([
+  defineVividComponent.observable
+], Icon.prototype, "_svg", 2);
+__decorateClass([
+  defineVividComponent.observable
+], Icon.prototype, "iconLoaded", 2);
+__decorateClass([
+  defineVividComponent.attr
+], Icon.prototype, "name", 2);
+__decorateClass([
+  defineVividComponent.volatile
+], Icon.prototype, "iconUrl", 1);
+
 const getClasses = ({ connotation, size }) => classNames.classNames(
   "control",
   [`connotation-${connotation}`, Boolean(connotation)],
   [`size-${size}`, typeof size === "number"]
 );
-const iconTemplate = () => index.html`
+const iconTemplate = defineVividComponent.html`
 	<figure class="${getClasses}" ?aria-busy="${(x) => !x.iconLoaded}">
 		<slot>
 			${when.when(
   (x) => !x.iconLoaded,
-  index.html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}" />`
+  defineVividComponent.html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}" />`
 )}
 			${when.when(
   (x) => x.iconLoaded && x._svg,
-  (x) => index.html`${x._svg}`
+  (x) => defineVividComponent.html`${x._svg}`
 )}
 		</slot>
 	</figure>
 `;
 
-const iconDefinition = icon.Icon.compose({
-  baseName: "icon",
-  template: iconTemplate,
+const iconDefinition = defineVividComponent.defineVividComponent("icon", Icon, iconTemplate, [], {
   styles
 });
-const iconRegistries = [iconDefinition()];
-const registerIcon = index.registerFactory(iconRegistries);
+const registerIcon = defineVividComponent.createRegisterFunction(iconDefinition);
 
+exports.Icon = Icon;
 exports.iconDefinition = iconDefinition;
-exports.iconRegistries = iconRegistries;
+exports.memoizeWith = memoizeWith;
 exports.registerIcon = registerIcon;