@momentum-design/components 0.4.14 → 0.4.16

package/dist/components/avatar/avatar.component.js

@@ -1,12 +1,18 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const lit_1 = require("lit");
-const decorators_js_1 = require("lit/decorators.js");
-const if_defined_js_1 = require("lit/directives/if-defined.js");
-const avatar_styles_1 = tslib_1.__importDefault(require("./avatar.styles"));
-const models_1 = require("../../models");
-const avatar_constants_1 = require("./avatar.constants");
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import styles from './avatar.styles';
+import { Component } from '../../models';
+import { DEFAULTS, LENGTH_UNIT } from './avatar.constants';
 /**
  * @slot - This is a default/unnamed slot
  *
@@ -14,21 +20,21 @@ const avatar_constants_1 = require("./avatar.constants");
  *
  * @tagname mdc-avatar
  */
-class Avatar extends models_1.Component {
+class Avatar extends Component {
     constructor() {
         super(...arguments);
-        this.type = avatar_constants_1.DEFAULTS.TYPE;
+        this.type = DEFAULTS.TYPE;
         /**
          * Scale of the avatar
          */
-        this.size = avatar_constants_1.DEFAULTS.SIZE;
+        this.size = DEFAULTS.SIZE;
     }
     /**
      * Updates the size by setting the width and height
      */
     updateSize() {
         if (this.size) {
-            const value = `${this.size}${avatar_constants_1.LENGTH_UNIT}`;
+            const value = `${this.size}${LENGTH_UNIT}`;
             this.style.width = value;
             this.style.height = value;
         }
@@ -40,10 +46,10 @@ class Avatar extends models_1.Component {
         }
     }
     photoTemplate() {
-        return (0, lit_1.html) `
+        return html `
       <img
-        src="${(0, if_defined_js_1.ifDefined)(this.src)}"
-        alt="${(0, if_defined_js_1.ifDefined)(this.alt)}"
+        src="${ifDefined(this.src)}"
+        alt="${ifDefined(this.alt)}"
       />
     `;
     }
@@ -53,26 +59,26 @@ class Avatar extends models_1.Component {
             content = this.photoTemplate();
         }
         else {
-            content = (0, lit_1.html) ``;
+            content = html ``;
         }
-        return (0, lit_1.html) `${content}`;
+        return html `${content}`;
     }
 }
-Avatar.styles = [...models_1.Component.styles, ...avatar_styles_1.default];
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String, reflect: true }),
-    tslib_1.__metadata("design:type", String)
+Avatar.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
 ], Avatar.prototype, "type", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String }),
-    tslib_1.__metadata("design:type", String)
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
 ], Avatar.prototype, "alt", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String }),
-    tslib_1.__metadata("design:type", String)
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
 ], Avatar.prototype, "src", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: Number }),
-    tslib_1.__metadata("design:type", Number)
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
 ], Avatar.prototype, "size", void 0);
-exports.default = Avatar;
+export default Avatar;

package/dist/components/avatar/avatar.constants.js

@@ -1,14 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LENGTH_UNIT = exports.DEFAULTS = exports.TAG_NAME = void 0;
-const tslib_1 = require("tslib");
-const tag_name_1 = tslib_1.__importDefault(require("../../utils/tag-name"));
-const TAG_NAME = tag_name_1.default.constructTagName('avatar');
-exports.TAG_NAME = TAG_NAME;
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('avatar');
 const LENGTH_UNIT = 'rem';
-exports.LENGTH_UNIT = LENGTH_UNIT;
 const DEFAULTS = {
     TYPE: 'photo',
     SIZE: 1.5,
 };
-exports.DEFAULTS = DEFAULTS;
+export { TAG_NAME, DEFAULTS, LENGTH_UNIT };

package/dist/components/avatar/avatar.styles.js

@@ -1,7 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const lit_1 = require("lit");
-const styles = (0, lit_1.css) `
+import { css } from 'lit';
+const styles = css `
   :host {
     display: flex;
     justify-content: center;
@@ -17,4 +15,4 @@ const styles = (0, lit_1.css) `
     object-fit: cover;
   }
 `;
-exports.default = [styles];
+export default [styles];

package/dist/components/avatar/avatar.types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/components/avatar/index.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const avatar_component_1 = tslib_1.__importDefault(require("./avatar.component"));
-const avatar_constants_1 = require("./avatar.constants");
-avatar_component_1.default.register(avatar_constants_1.TAG_NAME);
-exports.default = avatar_component_1.default;
+import Avatar from './avatar.component';
+import { TAG_NAME } from './avatar.constants';
+Avatar.register(TAG_NAME);
+export default Avatar;

package/dist/components/badge/badge.component.js

@@ -1,13 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const lit_1 = require("lit");
-const class_map_js_1 = require("lit-html/directives/class-map.js");
-const decorators_js_1 = require("lit/decorators.js");
-const if_defined_js_1 = require("lit/directives/if-defined.js");
-const models_1 = require("../../models");
-const badge_constants_1 = require("./badge.constants");
-const badge_styles_1 = tslib_1.__importDefault(require("./badge.styles"));
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { classMap } from 'lit-html/directives/class-map.js';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { Component } from '../../models';
+import { BADGE_TYPE, ICON_NAMES_LIST, DEFAULTS, ICON_VARIANT, ICON_STATE } from './badge.constants';
+import styles from './badge.styles';
 /**
  * A badge is a small, visually distinct element that provides additional information
  * or highlights the status of an item.
@@ -18,7 +24,7 @@ const badge_styles_1 = tslib_1.__importDefault(require("./badge.styles"));
  *
  * @tagname mdc-badge
  */
-class Badge extends models_1.Component {
+class Badge extends Component {
     constructor() {
         super(...arguments);
         /**
@@ -27,12 +33,12 @@ class Badge extends models_1.Component {
          *
          * Default: `dot`
          */
-        this.type = badge_constants_1.DEFAULTS.TYPE;
+        this.type = DEFAULTS.TYPE;
         /**
          * badge variant
          */
-        this.variant = badge_constants_1.DEFAULTS.VARIANT;
-        this.maxCounter = badge_constants_1.DEFAULTS.MAX_COUNTER;
+        this.variant = DEFAULTS.VARIANT;
+        this.maxCounter = DEFAULTS.MAX_COUNTER;
         this.overlay = false;
         /**
          * Aria-label attribute to be set for accessibility
@@ -53,8 +59,8 @@ class Badge extends models_1.Component {
             return '';
         }
         // At any given time, the max limit should not cross 999.
-        if (counter > badge_constants_1.DEFAULTS.MAX_COUNTER_LIMIT) {
-            return `${badge_constants_1.DEFAULTS.MAX_COUNTER_LIMIT}+`;
+        if (counter > DEFAULTS.MAX_COUNTER_LIMIT) {
+            return `${DEFAULTS.MAX_COUNTER_LIMIT}+`;
         }
         if (counter > maxCounter) {
             return `${maxCounter}+`;
@@ -68,12 +74,12 @@ class Badge extends models_1.Component {
      * @returns the template result of the icon.
      */
     getBadgeIcon(iconName, overlay, iconVariant, type) {
-        return (0, lit_1.html) `
+        return html `
       <mdc-icon
-        class="mdc-badge-icon ${(0, class_map_js_1.classMap)(this.getIconClasses(overlay, iconVariant, type))}"
-        name="${(0, if_defined_js_1.ifDefined)(iconName)}"
-        length-unit="${badge_constants_1.DEFAULTS.LENGTH_UNIT}"
-        size="${badge_constants_1.DEFAULTS.ICON_SIZE}"
+        class="mdc-badge-icon ${classMap(this.getIconClasses(overlay, iconVariant, type))}"
+        name="${ifDefined(iconName)}"
+        length-unit="${DEFAULTS.LENGTH_UNIT}"
+        size="${DEFAULTS.ICON_SIZE}"
       ></mdc-icon>
     `;
     }
@@ -83,7 +89,7 @@ class Badge extends models_1.Component {
      * @returns the template result of the dot with mdc-badge-dot class.
      */
     getBadgeDot(overlay) {
-        return (0, lit_1.html) `<div class="mdc-badge-dot ${(0, class_map_js_1.classMap)({ 'mdc-badge-overlay': overlay })}"></div>`;
+        return html `<div class="mdc-badge-dot ${classMap({ 'mdc-badge-overlay': overlay })}"></div>`;
     }
     /**
      * This method generates the CSS classes for the badge icon.
@@ -94,9 +100,9 @@ class Badge extends models_1.Component {
      */
     getIconClasses(overlay, iconVariant, type) {
         const overLayClass = { 'mdc-badge-overlay': overlay };
-        const variantTypes = type === badge_constants_1.BADGE_TYPE.ICON ? badge_constants_1.ICON_VARIANT : badge_constants_1.ICON_STATE;
+        const variantTypes = type === BADGE_TYPE.ICON ? ICON_VARIANT : ICON_STATE;
         const iconVariantType = Object.values(variantTypes).includes(iconVariant)
-            ? iconVariant : badge_constants_1.DEFAULTS.VARIANT;
+            ? iconVariant : DEFAULTS.VARIANT;
         const backgroundClass = { [`mdc-badge-icon__${iconVariantType}`]: true };
         return {
             ...overLayClass,
@@ -111,11 +117,11 @@ class Badge extends models_1.Component {
      * @returns the template result of the text.
      */
     getBadgeCounterText(maxCounter, overlay, counter) {
-        return (0, lit_1.html) `
+        return html `
       <mdc-text
         type="body-small-medium"
         tagname="div"
-        class="mdc-badge-text ${(0, class_map_js_1.classMap)({ 'mdc-badge-overlay': overlay })}"
+        class="mdc-badge-text ${classMap({ 'mdc-badge-overlay': overlay })}"
       >
         ${this.getCounterText(maxCounter, counter)}
       </mdc-text>
@@ -144,20 +150,20 @@ class Badge extends models_1.Component {
     getBadgeContentBasedOnType() {
         const { counter, iconName, maxCounter, overlay, type, variant } = this;
         switch (type) {
-            case badge_constants_1.BADGE_TYPE.DOT:
+            case BADGE_TYPE.DOT:
                 return this.getBadgeDot(overlay);
-            case badge_constants_1.BADGE_TYPE.ICON:
+            case BADGE_TYPE.ICON:
                 return this.getBadgeIcon(iconName || '', overlay, variant, type);
-            case badge_constants_1.BADGE_TYPE.COUNTER:
+            case BADGE_TYPE.COUNTER:
                 return this.getBadgeCounterText(maxCounter, overlay, counter);
-            case badge_constants_1.BADGE_TYPE.SUCCESS:
-                return this.getBadgeIcon(badge_constants_1.ICON_NAMES_LIST.SUCCESS_ICON_NAME, overlay, badge_constants_1.ICON_STATE.SUCCESS);
-            case badge_constants_1.BADGE_TYPE.WARNING:
-                return this.getBadgeIcon(badge_constants_1.ICON_NAMES_LIST.WARNING_ICON_NAME, overlay, badge_constants_1.ICON_STATE.WARNING);
-            case badge_constants_1.BADGE_TYPE.ERROR:
-                return this.getBadgeIcon(badge_constants_1.ICON_NAMES_LIST.ERROR_ICON_NAME, overlay, badge_constants_1.ICON_STATE.ERROR);
+            case BADGE_TYPE.SUCCESS:
+                return this.getBadgeIcon(ICON_NAMES_LIST.SUCCESS_ICON_NAME, overlay, ICON_STATE.SUCCESS);
+            case BADGE_TYPE.WARNING:
+                return this.getBadgeIcon(ICON_NAMES_LIST.WARNING_ICON_NAME, overlay, ICON_STATE.WARNING);
+            case BADGE_TYPE.ERROR:
+                return this.getBadgeIcon(ICON_NAMES_LIST.ERROR_ICON_NAME, overlay, ICON_STATE.ERROR);
             default:
-                return (0, lit_1.html) ``;
+                return html ``;
         }
     }
     update(changedProperties) {
@@ -170,33 +176,33 @@ class Badge extends models_1.Component {
         return this.getBadgeContentBasedOnType();
     }
 }
-Badge.styles = [...models_1.Component.styles, ...badge_styles_1.default];
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String, reflect: true }),
-    tslib_1.__metadata("design:type", Object)
+Badge.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
 ], Badge.prototype, "type", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String, attribute: 'icon-name' }),
-    tslib_1.__metadata("design:type", String)
+__decorate([
+    property({ type: String, attribute: 'icon-name' }),
+    __metadata("design:type", String)
 ], Badge.prototype, "iconName", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String }),
-    tslib_1.__metadata("design:type", Object)
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
 ], Badge.prototype, "variant", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: Number }),
-    tslib_1.__metadata("design:type", Number)
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
 ], Badge.prototype, "counter", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: Number, attribute: 'max-counter' }),
-    tslib_1.__metadata("design:type", Number)
+__decorate([
+    property({ type: Number, attribute: 'max-counter' }),
+    __metadata("design:type", Number)
 ], Badge.prototype, "maxCounter", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: Boolean }),
-    tslib_1.__metadata("design:type", Object)
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
 ], Badge.prototype, "overlay", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String, attribute: 'aria-label' }),
-    tslib_1.__metadata("design:type", Object)
+__decorate([
+    property({ type: String, attribute: 'aria-label' }),
+    __metadata("design:type", Object)
 ], Badge.prototype, "ariaLabel", void 0);
-exports.default = Badge;
+export default Badge;

package/dist/components/badge/badge.constants.js

@@ -1,10 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ICON_NAMES_LIST = exports.ICON_VARIANT = exports.ICON_STATE = exports.BADGE_TYPE = exports.DEFAULTS = exports.TAG_NAME = void 0;
-const tslib_1 = require("tslib");
-const tag_name_1 = tslib_1.__importDefault(require("../../utils/tag-name"));
-const TAG_NAME = tag_name_1.default.constructTagName('badge');
-exports.TAG_NAME = TAG_NAME;
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('badge');
 const BADGE_TYPE = {
     DOT: 'dot',
     ICON: 'icon',
@@ -13,24 +8,20 @@ const BADGE_TYPE = {
     WARNING: 'warning',
     ERROR: 'error',
 };
-exports.BADGE_TYPE = BADGE_TYPE;
 const ICON_NAMES_LIST = {
     SUCCESS_ICON_NAME: 'check-circle-filled',
     WARNING_ICON_NAME: 'warning-filled',
     ERROR_ICON_NAME: 'error-legacy-filled',
 };
-exports.ICON_NAMES_LIST = ICON_NAMES_LIST;
 const ICON_VARIANT = {
     PRIMARY: 'primary',
     SECONDARY: 'secondary',
 };
-exports.ICON_VARIANT = ICON_VARIANT;
 const ICON_STATE = {
     SUCCESS: 'success',
     WARNING: 'warning',
     ERROR: 'error',
 };
-exports.ICON_STATE = ICON_STATE;
 const DEFAULTS = {
     TYPE: BADGE_TYPE.DOT,
     LENGTH_UNIT: 'rem',
@@ -39,4 +30,4 @@ const DEFAULTS = {
     VARIANT: ICON_VARIANT.PRIMARY,
     ICON_SIZE: 1,
 };
-exports.DEFAULTS = DEFAULTS;
+export { TAG_NAME, DEFAULTS, BADGE_TYPE, ICON_STATE, ICON_VARIANT, ICON_NAMES_LIST, };

package/dist/components/badge/badge.styles.js

@@ -1,10 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const lit_1 = require("lit");
-const styles_1 = require("../../utils/styles");
+import { css } from 'lit';
+import { hostFitContentStyles } from '../../utils/styles';
 const styles = [
-    styles_1.hostFitContentStyles,
-    (0, lit_1.css) `
+    hostFitContentStyles,
+    css `
     :host {
       --mdc-badge-primary-foreground-color: var(--mds-color-theme-common-text-primary-normal);
       --mdc-badge-primary-background-color: var(--mds-color-theme-background-accent-normal);
@@ -67,4 +65,4 @@ const styles = [
     }
   `,
 ];
-exports.default = styles;
+export default styles;

package/dist/components/badge/index.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const badge_component_1 = tslib_1.__importDefault(require("./badge.component"));
-const badge_constants_1 = require("./badge.constants");
-require("../icon");
-require("../text");
-badge_component_1.default.register(badge_constants_1.TAG_NAME);
-exports.default = badge_component_1.default;
+import Badge from './badge.component';
+import { TAG_NAME } from './badge.constants';
+import '../icon';
+import '../text';
+Badge.register(TAG_NAME);
+export default Badge;

package/dist/components/icon/icon.component.js

@@ -1,14 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const lit_1 = require("lit");
-const decorators_js_1 = require("lit/decorators.js");
-const icon_styles_1 = tslib_1.__importDefault(require("./icon.styles"));
-const models_1 = require("../../models");
-const provider_1 = tslib_1.__importDefault(require("../../utils/provider"));
-const iconprovider_component_1 = tslib_1.__importDefault(require("../iconprovider/iconprovider.component"));
-const icon_utils_1 = require("./icon.utils");
-const icon_constants_1 = require("./icon.constants");
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import styles from './icon.styles';
+import { Component } from '../../models';
+import providerUtils from '../../utils/provider';
+import IconProvider from '../iconprovider/iconprovider.component';
+import { dynamicSVGImport } from './icon.utils';
+import { DEFAULTS } from './icon.constants';
 /**
  * Icon component that dynamically displays SVG icons based on a valid name.
  *
@@ -46,18 +52,18 @@ const icon_constants_1 = require("./icon.constants");
  *
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
  */
-class Icon extends models_1.Component {
+class Icon extends Component {
     constructor() {
         super(...arguments);
         /**
          * Name of the icon (= filename)
          */
-        this.name = icon_constants_1.DEFAULTS.NAME;
+        this.name = DEFAULTS.NAME;
         /**
          * Aria-label attribute to be set for accessibility
          */
         this.ariaLabel = null;
-        this.iconProviderContext = provider_1.default.consume({ host: this, context: iconprovider_component_1.default.Context });
+        this.iconProviderContext = providerUtils.consume({ host: this, context: IconProvider.Context });
     }
     /**
      * Get Icon Data function which will fetch the icon (currently only svg)
@@ -67,7 +73,7 @@ class Icon extends models_1.Component {
         if (this.iconProviderContext.value) {
             const { fileExtension, url } = this.iconProviderContext.value;
             if (url && fileExtension && this.name) {
-                const iconHtml = await (0, icon_utils_1.dynamicSVGImport)(url, this.name, fileExtension);
+                const iconHtml = await dynamicSVGImport(url, this.name, fileExtension);
                 // update iconData state once fetched:
                 this.iconData = iconHtml;
                 // when icon got fetched, set role and aria-label:
@@ -108,7 +114,7 @@ class Icon extends models_1.Component {
     }
     get computedIconSize() {
         var _a, _b;
-        return (_b = (_a = this.size) !== null && _a !== void 0 ? _a : this.sizeFromContext) !== null && _b !== void 0 ? _b : icon_constants_1.DEFAULTS.SIZE;
+        return (_b = (_a = this.size) !== null && _a !== void 0 ? _a : this.sizeFromContext) !== null && _b !== void 0 ? _b : DEFAULTS.SIZE;
     }
     updated(changedProperties) {
         var _a, _b, _c, _d;
@@ -137,36 +143,36 @@ class Icon extends models_1.Component {
         }
     }
     render() {
-        return (0, lit_1.html) ` ${this.iconData} `;
+        return html ` ${this.iconData} `;
     }
 }
-Icon.styles = [...models_1.Component.styles, ...icon_styles_1.default];
-tslib_1.__decorate([
-    (0, decorators_js_1.state)(),
-    tslib_1.__metadata("design:type", HTMLElement)
+Icon.styles = [...Component.styles, ...styles];
+__decorate([
+    state(),
+    __metadata("design:type", HTMLElement)
 ], Icon.prototype, "iconData", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.state)(),
-    tslib_1.__metadata("design:type", String)
+__decorate([
+    state(),
+    __metadata("design:type", String)
 ], Icon.prototype, "lengthUnitFromContext", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.state)(),
-    tslib_1.__metadata("design:type", Number)
+__decorate([
+    state(),
+    __metadata("design:type", Number)
 ], Icon.prototype, "sizeFromContext", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String, reflect: true }),
-    tslib_1.__metadata("design:type", String)
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
 ], Icon.prototype, "name", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: Number }),
-    tslib_1.__metadata("design:type", Number)
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
 ], Icon.prototype, "size", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String, attribute: 'length-unit' }),
-    tslib_1.__metadata("design:type", String)
+__decorate([
+    property({ type: String, attribute: 'length-unit' }),
+    __metadata("design:type", String)
 ], Icon.prototype, "lengthUnit", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String, attribute: 'aria-label' }),
-    tslib_1.__metadata("design:type", Object)
+__decorate([
+    property({ type: String, attribute: 'aria-label' }),
+    __metadata("design:type", Object)
 ], Icon.prototype, "ariaLabel", void 0);
-exports.default = Icon;
+export default Icon;

package/dist/components/icon/icon.constants.js

@@ -1,12 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULTS = exports.TAG_NAME = void 0;
-const tslib_1 = require("tslib");
-const tag_name_1 = tslib_1.__importDefault(require("../../utils/tag-name"));
-const TAG_NAME = tag_name_1.default.constructTagName('icon');
-exports.TAG_NAME = TAG_NAME;
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('icon');
 const DEFAULTS = {
     NAME: undefined,
     SIZE: 1,
 };
-exports.DEFAULTS = DEFAULTS;
+export { TAG_NAME, DEFAULTS };

package/dist/components/icon/icon.styles.js

@@ -1,10 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const lit_1 = require("lit");
-const styles_1 = require("../../utils/styles");
+import { css } from 'lit';
+import { hostFitContentStyles } from '../../utils/styles';
 const styles = [
-    styles_1.hostFitContentStyles,
-    (0, lit_1.css) `
+    hostFitContentStyles,
+    css `
     :host {
       --mdc-icon-fill-color: currentColor;
     }
@@ -15,4 +13,4 @@ const styles = [
     }
   `,
 ];
-exports.default = styles;
+export default styles;

package/dist/components/icon/icon.utils.js

@@ -1,7 +1,4 @@
-"use strict";
 /* eslint-disable implicit-arrow-linebreak */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.dynamicSVGImport = void 0;
 /**
  * Fetches a dynamic SVG icon based on the provided `url`, `name` and `fileExtension`.
  * It will throw an error if the response is not ok.
@@ -20,4 +17,4 @@ const dynamicSVGImport = async (url, name, fileExtension) => {
     const iconResponse = await response.text();
     return new DOMParser().parseFromString(iconResponse, 'text/html').body.children[0];
 };
-exports.dynamicSVGImport = dynamicSVGImport;
+export { dynamicSVGImport };