@momentum-design/components 0.4.13 → 0.4.15

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

@@ -1,15 +1,33 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WARNING_ICON_NAME = 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;
-const WARNING_ICON_NAME = 'warning-badge-filled';
-exports.WARNING_ICON_NAME = WARNING_ICON_NAME;
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('badge');
+const BADGE_TYPE = {
+    DOT: 'dot',
+    ICON: 'icon',
+    COUNTER: 'counter',
+    SUCCESS: 'success',
+    WARNING: 'warning',
+    ERROR: 'error',
+};
+const ICON_NAMES_LIST = {
+    SUCCESS_ICON_NAME: 'check-circle-filled',
+    WARNING_ICON_NAME: 'warning-filled',
+    ERROR_ICON_NAME: 'error-legacy-filled',
+};
+const ICON_VARIANT = {
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary',
+};
+const ICON_STATE = {
+    SUCCESS: 'success',
+    WARNING: 'warning',
+    ERROR: 'error',
+};
 const DEFAULTS = {
-    TYPE: 'regular',
-    SIZE: 1,
+    TYPE: BADGE_TYPE.DOT,
     LENGTH_UNIT: 'rem',
+    MAX_COUNTER: 99,
+    MAX_COUNTER_LIMIT: 999,
+    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,28 +1,68 @@
-"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-icon-background-color: var(--mds-color-theme-background-accent-normal);
-      --mdc-badge-icon-color: var(--mds-color-theme-common-text-primary-normal);
-    }
+      --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);
+
+      --mdc-badge-secondary-foreground-color: var(--mds-color-theme-text-secondary-normal);
+      --mdc-badge-secondary-background-color: var(--mds-color-theme-background-alert-default-normal);
 
-    .mdc-badge-container {
+      --mdc-badge-success-foreground-color: var(--mds-color-theme-text-success-normal);
+      --mdc-badge-success-background-color: var(--mds-color-theme-background-alert-success-normal);
+      
+      --mdc-badge-warning-foreground-color: var(--mds-color-theme-text-warning-normal);
+      --mdc-badge-warning-background-color: var(--mds-color-theme-background-alert-warning-normal);
+      
+      --mdc-badge-error-foreground-color: var(--mds-color-theme-text-error-normal);
+      --mdc-badge-error-background-color: var(--mds-color-theme-background-alert-error-normal);
+      
+      --mdc-badge-overlay-background-color: var(--mds-color-theme-background-solid-primary-normal);
+      
+      color: var(--mdc-badge-primary-foreground-color);
+    }
+    .mdc-badge-overlay {
+      outline: 0.0625rem solid var(--mdc-badge-overlay-background-color);
+    }
+    .mdc-badge-text {
+      padding: 0 0.25rem;
+      border-radius: 6.25rem;
+      min-width: 1rem;
       display: flex;
       justify-content: center;
-      align-items: center;
-      border-radius: 9999px;
-      background-color: var(--mdc-badge-icon-background-color);
-      color: var(--mdc-badge-icon-color);
+      background-color: var(--mdc-badge-primary-background-color);
     }
-
-    .mdc-badge-icon-container {
-      height: 80%;
-      width: 80%;
+    .mdc-badge-dot {
+      width: 0.75rem;
+      height: 0.75rem;
+      border-radius: 50%;
+      background-color: var(--mdc-badge-primary-background-color);
+    }
+    .mdc-badge-icon {
+      padding: 2px;
+      border-radius: 50%;
+    }
+    .mdc-badge-icon__primary {
+      background-color: var(--mdc-badge-primary-background-color);
+    }
+    .mdc-badge-icon__success {
+      background-color: var(--mdc-badge-success-background-color);
+      color: var(--mdc-badge-success-foreground-color);
+    }
+    .mdc-badge-icon__warning {
+      background-color: var(--mdc-badge-warning-background-color);
+      color: var(--mdc-badge-warning-foreground-color);
+    }
+    .mdc-badge-icon__error {
+      background-color: var(--mdc-badge-error-background-color);
+      color: var(--mdc-badge-error-foreground-color);
+    }
+    .mdc-badge-icon__secondary {
+      background-color: var(--mdc-badge-secondary-background-color);
+      color: var(--mdc-badge-secondary-foreground-color);
     }
   `,
 ];
-exports.default = styles;
+export default styles;

package/dist/components/badge/index.d.ts

@@ -1,4 +1,6 @@
 import Badge from './badge.component';
+import '../icon';
+import '../text';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-badge']: Badge;

package/dist/components/badge/index.js

@@ -1,7 +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");
-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 };

package/dist/components/icon/index.js

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

package/dist/components/iconprovider/iconprovider.component.js

@@ -1,10 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const decorators_js_1 = require("lit/decorators.js");
-const models_1 = require("../../models");
-const iconprovider_context_1 = tslib_1.__importDefault(require("./iconprovider.context"));
-const iconprovider_constants_1 = require("./iconprovider.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 { property } from 'lit/decorators.js';
+import { Provider } from '../../models';
+import IconProviderContext from './iconprovider.context';
+import { ALLOWED_FILE_EXTENSIONS, DEFAULTS, ALLOWED_LENGTH_UNITS } from './iconprovider.constants';
 /**
  * IconProvider component, which allows to be consumed from sub components
  * (see `providerUtils.consume` for how to consume)
@@ -17,52 +23,52 @@ const iconprovider_constants_1 = require("./iconprovider.constants");
  *
  * @slot - children
  */
-class IconProvider extends models_1.Provider {
+class IconProvider extends Provider {
     constructor() {
         // initialise the context by running the Provider constructor:
         super({
-            context: iconprovider_context_1.default.context,
-            initialValue: new iconprovider_context_1.default(),
+            context: IconProviderContext.context,
+            initialValue: new IconProviderContext(),
         });
         /**
          * File extension of icons, default: 'svg'
          */
-        this.fileExtension = iconprovider_constants_1.DEFAULTS.FILE_EXTENSION;
+        this.fileExtension = DEFAULTS.FILE_EXTENSION;
         /**
          * Length unit used for sizing of icons, default: 'em'
          */
-        this.lengthUnit = iconprovider_constants_1.DEFAULTS.LENGTH_UNIT;
+        this.lengthUnit = DEFAULTS.LENGTH_UNIT;
         /**
          * The default size of the icon.
          * If not set, it falls back to the size defined by the length unit.
          */
-        this.size = iconprovider_constants_1.DEFAULTS.LENGTH_UNIT_SIZE[iconprovider_constants_1.DEFAULTS.LENGTH_UNIT];
+        this.size = DEFAULTS.LENGTH_UNIT_SIZE[DEFAULTS.LENGTH_UNIT];
     }
     /**
      * Context object of the IconProvider, to be consumed by child components
      */
     static get Context() {
-        return iconprovider_context_1.default.context;
+        return IconProviderContext.context;
     }
     updateValuesInContext() {
         // only update fileExtension on context if its an allowed fileExtension
-        if (this.fileExtension && iconprovider_constants_1.ALLOWED_FILE_EXTENSIONS.includes(this.fileExtension)) {
+        if (this.fileExtension && ALLOWED_FILE_EXTENSIONS.includes(this.fileExtension)) {
             this.context.value.fileExtension = this.fileExtension;
         }
         else {
             // Ensure both fileExtension and context are updated to the default if its not an allowed fileExtension
-            this.fileExtension = iconprovider_constants_1.DEFAULTS.FILE_EXTENSION;
-            this.context.value.fileExtension = iconprovider_constants_1.DEFAULTS.FILE_EXTENSION;
+            this.fileExtension = DEFAULTS.FILE_EXTENSION;
+            this.context.value.fileExtension = DEFAULTS.FILE_EXTENSION;
         }
         this.context.value.url = this.url;
         this.context.value.size = this.size;
-        if (this.lengthUnit && iconprovider_constants_1.ALLOWED_LENGTH_UNITS.includes(this.lengthUnit)) {
+        if (this.lengthUnit && ALLOWED_LENGTH_UNITS.includes(this.lengthUnit)) {
             this.context.value.lengthUnit = this.lengthUnit;
         }
         else {
             // Ensure both lengthUnit and context are updated to the default if its not an allowed lengthUnit
-            this.lengthUnit = iconprovider_constants_1.DEFAULTS.LENGTH_UNIT;
-            this.context.value.lengthUnit = iconprovider_constants_1.DEFAULTS.LENGTH_UNIT;
+            this.lengthUnit = DEFAULTS.LENGTH_UNIT;
+            this.context.value.lengthUnit = DEFAULTS.LENGTH_UNIT;
         }
     }
     updateContext() {
@@ -75,20 +81,20 @@ class IconProvider extends models_1.Provider {
         }
     }
 }
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String }),
-    tslib_1.__metadata("design:type", String)
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
 ], IconProvider.prototype, "url", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String, attribute: 'file-extension', reflect: true }),
-    tslib_1.__metadata("design:type", String)
+__decorate([
+    property({ type: String, attribute: 'file-extension', reflect: true }),
+    __metadata("design:type", String)
 ], IconProvider.prototype, "fileExtension", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String, attribute: 'length-unit', reflect: true }),
-    tslib_1.__metadata("design:type", String)
+__decorate([
+    property({ type: String, attribute: 'length-unit', reflect: true }),
+    __metadata("design:type", String)
 ], IconProvider.prototype, "lengthUnit", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: Number, reflect: true }),
-    tslib_1.__metadata("design:type", Number)
+__decorate([
+    property({ type: Number, reflect: true }),
+    __metadata("design:type", Number)
 ], IconProvider.prototype, "size", void 0);
-exports.default = IconProvider;
+export default IconProvider;

package/dist/components/iconprovider/iconprovider.constants.js

@@ -1,14 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ALLOWED_LENGTH_UNITS = exports.ALLOWED_FILE_EXTENSIONS = 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('iconprovider');
-exports.TAG_NAME = TAG_NAME;
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('iconprovider');
 const ALLOWED_FILE_EXTENSIONS = ['svg'];
-exports.ALLOWED_FILE_EXTENSIONS = ALLOWED_FILE_EXTENSIONS;
 const ALLOWED_LENGTH_UNITS = ['em', 'rem', 'px'];
-exports.ALLOWED_LENGTH_UNITS = ALLOWED_LENGTH_UNITS;
 const DEFAULTS = {
     FILE_EXTENSION: 'svg',
     LENGTH_UNIT: 'em',
@@ -18,4 +11,4 @@ const DEFAULTS = {
         rem: 1,
     },
 };
-exports.DEFAULTS = DEFAULTS;
+export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS };

package/dist/components/iconprovider/iconprovider.context.js

@@ -1,9 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const context_1 = require("@lit/context");
-const iconprovider_constants_1 = require("./iconprovider.constants");
+import { createContext } from '@lit/context';
+import { TAG_NAME } from './iconprovider.constants';
 class IconProviderContext {
 }
 // create typed lit context as part of the IconProviderContext
-IconProviderContext.context = (0, context_1.createContext)(iconprovider_constants_1.TAG_NAME);
-exports.default = IconProviderContext;
+IconProviderContext.context = createContext(TAG_NAME);
+export default IconProviderContext;

package/dist/components/iconprovider/index.js

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

package/dist/components/text/fonts.styles.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.fontsStyles = void 0;
-const lit_1 = require("lit");
-exports.fontsStyles = (0, lit_1.css) `
+import { css } from 'lit';
+export const fontsStyles = css `
   :host([type="headline-small-regular"])::part(text) {
     font-size: var(--mds-font-apps-headline-small-regular-font-size);
     font-weight: var(--mds-font-apps-headline-small-regular-font-weight);

package/dist/components/text/index.js

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