@momentum-design/components 0.0.1

package/dist/components/avatar/avatar.component.d.ts

@@ -0,0 +1,28 @@
+import { Component } from '../../models';
+import { AvatarType } from './avatar.types';
+/**
+ * @slot - This is a default/unnamed slot
+ *
+ * @summary This is MyElement
+ *
+ * @tag mdc-avatar
+ * @tagname mdc-avatar
+ */
+declare class Avatar extends Component {
+    type?: AvatarType;
+    alt?: string;
+    src?: string;
+    /**
+     * Scale of the avatar
+     */
+    scale?: number;
+    /**
+     * Updates the size by setting the width and height
+     */
+    private updateSize;
+    updated(changedProperties: Map<string, any>): void;
+    photoTemplate(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+export default Avatar;

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

@@ -0,0 +1,79 @@
+"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");
+/**
+ * @slot - This is a default/unnamed slot
+ *
+ * @summary This is MyElement
+ *
+ * @tag mdc-avatar
+ * @tagname mdc-avatar
+ */
+class Avatar extends models_1.Component {
+    constructor() {
+        super(...arguments);
+        this.type = avatar_constants_1.DEFAULTS.TYPE;
+        /**
+         * Scale of the avatar
+         */
+        this.scale = avatar_constants_1.DEFAULTS.SCALE;
+    }
+    /**
+     * Updates the size by setting the width and height
+     */
+    updateSize() {
+        if (this.scale) {
+            const value = `${this.scale}${avatar_constants_1.LENGTH_UNIT}`;
+            this.style.width = value;
+            this.style.height = value;
+        }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('scale')) {
+            this.updateSize();
+        }
+    }
+    photoTemplate() {
+        return (0, lit_1.html) `
+      <img
+        src="${(0, if_defined_js_1.ifDefined)(this.src)}"
+        alt="${(0, if_defined_js_1.ifDefined)(this.alt)}"
+      />
+    `;
+    }
+    render() {
+        let content;
+        if (this.type === 'photo') {
+            content = this.photoTemplate();
+        }
+        else {
+            content = (0, lit_1.html) ``;
+        }
+        return (0, lit_1.html) `${content}`;
+    }
+}
+Avatar.styles = avatar_styles_1.default;
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: String, reflect: true }),
+    tslib_1.__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)
+], Avatar.prototype, "alt", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: String }),
+    tslib_1.__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)
+], Avatar.prototype, "scale", void 0);
+exports.default = Avatar;

package/dist/components/avatar/avatar.constants.d.ts

@@ -0,0 +1,7 @@
+declare const TAG_NAME: "mdc-avatar";
+declare const LENGTH_UNIT = "rem";
+declare const DEFAULTS: {
+    TYPE: "photo";
+    SCALE: number;
+};
+export { TAG_NAME, DEFAULTS, LENGTH_UNIT };

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

@@ -0,0 +1,14 @@
+"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;
+const LENGTH_UNIT = 'rem';
+exports.LENGTH_UNIT = LENGTH_UNIT;
+const DEFAULTS = {
+    TYPE: 'photo',
+    SCALE: 1.5,
+};
+exports.DEFAULTS = DEFAULTS;

package/dist/components/avatar/avatar.styles.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult;
+export default styles;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const lit_1 = require("lit");
+const styles = (0, lit_1.css) `
+  :host {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 100vh;
+    position: relative;
+    width: fit-content;
+  }
+  img {
+    border-radius: 100vh;
+    height: inherit;
+    width: inherit;
+    object-fit: cover;
+  }
+`;
+exports.default = styles;

package/dist/components/avatar/avatar.types.d.ts

@@ -0,0 +1 @@
+export type AvatarType = 'photo' | 'text' | 'icon' | 'multiuser';

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

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

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

@@ -0,0 +1,7 @@
+import Avatar from './avatar.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-avatar']: Avatar;
+    }
+}
+export default Avatar;

package/dist/components/avatar/index.js

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

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

@@ -0,0 +1,51 @@
+import { Component } from '../../models';
+import type { BadgeType } from './badge.types';
+/**
+ * @slot - This is a default/unnamed slot
+ *
+ * @summary This is MyElement
+ *
+ * @tag mdc-badge
+ * @tagname mdc-badge
+ */
+declare class Badge extends Component {
+    /**
+     * Type of the badge
+     * Can be `regular`, `icon`, `text` or `warning`
+     *
+     * Default: `regular`
+     */
+    type?: BadgeType;
+    /**
+     * Scale of the badge (works in combination with length unit)
+     *
+     * Default: `1`
+     */
+    scale?: number;
+    /**
+     * Length unit attribute for scale
+     *
+     * Default: `rem`
+     */
+    lengthUnit?: string;
+    /**
+     * If `type` is set to `icon`, attribute `iconName` can
+     * be used to choose which icon should be shown
+     *
+     * If no `iconName` is provided, no icon will be rendered.
+     */
+    iconName?: string;
+    /**
+     * If `type` is set to `text`, attribute `text` can
+     * be used to pass in any text to be displayed in the badge.
+     */
+    text?: string;
+    private updateSize;
+    updated(changedProperties: Map<string, any>): void;
+    iconTemplate(): import("lit-html").TemplateResult<1>;
+    textTemplate(): import("lit-html").TemplateResult<1>;
+    warningTemplate(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export default Badge;

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

@@ -0,0 +1,114 @@
+"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 style_map_js_1 = require("lit/directives/style-map.js");
+const models_1 = require("../../models");
+const badge_constants_1 = require("./badge.constants");
+const badge_styles_1 = tslib_1.__importDefault(require("./badge.styles"));
+/**
+ * @slot - This is a default/unnamed slot
+ *
+ * @summary This is MyElement
+ *
+ * @tag mdc-badge
+ * @tagname mdc-badge
+ */
+class Badge extends models_1.Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * Type of the badge
+         * Can be `regular`, `icon`, `text` or `warning`
+         *
+         * Default: `regular`
+         */
+        this.type = badge_constants_1.DEFAULTS.TYPE;
+        /**
+         * Scale of the badge (works in combination with length unit)
+         *
+         * Default: `1`
+         */
+        this.scale = badge_constants_1.DEFAULTS.SCALE;
+        /**
+         * Length unit attribute for scale
+         *
+         * Default: `rem`
+         */
+        this.lengthUnit = badge_constants_1.DEFAULTS.LENGTH_UNIT;
+    }
+    updateSize() {
+        // if (this.scale && this.lengthUnit) {
+        //   const value = `${this.scale}${this.lengthUnit}`;
+        //   this.style.height = value;
+        //   if (this.type !== 'text') {
+        //     this.style.width = value;
+        //   }
+        // }
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('scale') || changedProperties.has('lengthUnit')) {
+            this.updateSize();
+        }
+    }
+    iconTemplate() {
+        return (0, lit_1.html) `<div class="mdc-badge-icon-container">
+      <mdc-icon name="${this.iconName}" scale="100" length-unit="%"></mdc-icon>
+    </div>`;
+    }
+    textTemplate() {
+        return (0, lit_1.html) `${this.text}`;
+    }
+    warningTemplate() {
+        return (0, lit_1.html) ` <mdc-icon name="${badge_constants_1.WARNING_ICON_NAME}" class="mdc-badge-warning"></mdc-icon> `;
+    }
+    render() {
+        let content;
+        const size = `${this.scale}${this.lengthUnit}`;
+        let sizeStyles = { width: size, height: size };
+        switch (this.type) {
+            case 'regular':
+                content = (0, lit_1.html) ``;
+                break;
+            case 'icon':
+                content = this.iconTemplate();
+                break;
+            case 'text':
+                content = this.textTemplate();
+                // make width flexible when text -> only set the height:
+                sizeStyles = { height: sizeStyles.height };
+                break;
+            case 'warning':
+                content = this.warningTemplate();
+                break;
+            default:
+                content = (0, lit_1.html) ``;
+                break;
+        }
+        return (0, lit_1.html) `<div class="mdc-badge-container" style=${(0, style_map_js_1.styleMap)(sizeStyles)}>${content}</div>`;
+    }
+}
+Badge.styles = badge_styles_1.default;
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: String, reflect: true }),
+    tslib_1.__metadata("design:type", String)
+], Badge.prototype, "type", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: Number }),
+    tslib_1.__metadata("design:type", Number)
+], Badge.prototype, "scale", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'length-unit' }),
+    tslib_1.__metadata("design:type", String)
+], Badge.prototype, "lengthUnit", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'icon-name' }),
+    tslib_1.__metadata("design:type", String)
+], Badge.prototype, "iconName", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: String }),
+    tslib_1.__metadata("design:type", String)
+], Badge.prototype, "text", void 0);
+exports.default = Badge;

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

@@ -0,0 +1,8 @@
+declare const TAG_NAME: "mdc-badge";
+declare const WARNING_ICON_NAME = "warning-badge-filled";
+declare const DEFAULTS: {
+    TYPE: "regular";
+    SCALE: number;
+    LENGTH_UNIT: string;
+};
+export { TAG_NAME, DEFAULTS, WARNING_ICON_NAME };

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

@@ -0,0 +1,15 @@
+"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;
+const DEFAULTS = {
+    TYPE: 'regular',
+    SCALE: 1,
+    LENGTH_UNIT: 'rem',
+};
+exports.DEFAULTS = DEFAULTS;

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

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult[];
+export default styles;

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const lit_1 = require("lit");
+const styles_1 = require("../../utils/styles");
+const styles = [
+    styles_1.hostFitContentStyles,
+    (0, lit_1.css) `
+    :host {
+      --mdc-badge-icon-background-color: var(--mds-color-theme-background-accent-normal);
+    }
+
+    .mdc-badge-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 9999px;
+      background-color: var(--mdc-badge-icon-background-color);
+    }
+
+    .mdc-badge-icon-container {
+      height: 80%;
+      width: 80%;
+    }
+  `,
+];
+exports.default = styles;

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

@@ -0,0 +1 @@
+export type BadgeType = 'regular' | 'text' | 'icon' | 'warning';

package/dist/components/badge/badge.types.js

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

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

@@ -0,0 +1,7 @@
+import Badge from './badge.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-badge']: Badge;
+    }
+}
+export default Badge;

package/dist/components/badge/index.js

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

package/dist/components/icon/icon.component.d.ts

@@ -0,0 +1,63 @@
+import { Component } from '../../models';
+/**
+ * Icon component, which has to be mounted inside of a `IconProvider`
+ * component.
+ *
+ * The `IconProvider` component defines where icons should be consumed from (`url`).
+ * This `Icon` component accepts the `name` attribute, which will be
+ * the file name of the icon to be loaded from the given `url`.
+ *
+ * Once fetched, the icon will be mounted. If fetching wasn't successful,
+ * nothing will be shown.
+ *
+ * The `scale` attribute allows scaling the icon based on the provided
+ * `length-unit` attribute (which will either come from the IconProvider or
+ * could be overridden per icon). For example:
+ * if `scale = 1` and `length-unit = 'em'`, the size of the icon will be
+ * `width: 1em; height: 1em`.
+ *
+ * For accessibility the `role` and `aria-label` of the icon can be set.
+ *
+ * @tag mdc-icon
+ * @tagname mdc-icon
+ */
+declare class Icon extends Component {
+    private iconData?;
+    private lengthUnitFromContext?;
+    /**
+     * Name of the icon (= filename)
+     */
+    name?: string;
+    /**
+     * Scale of the icon (works in combination with length unit)
+     */
+    scale?: number;
+    /**
+     * Length unit attribute for overridding length-unit from `IconProvider`
+     */
+    lengthUnit?: string;
+    /**
+     * Role attribute to be set for accessibility
+     */
+    role: string | null;
+    /**
+     * Aria-label attribute to be set for accessibility
+     */
+    ariaLabel: string | null;
+    private iconProviderContext;
+    /**
+     * Get Icon Data function which will fetch the icon (currently only svg)
+     * and sets state and attributes once fetched successfully
+     */
+    private getIconData;
+    /**
+     * Updates the size by setting the width and height
+     */
+    private updateSize;
+    private setRoleOnIcon;
+    private setAriaLabelOnIcon;
+    updated(changedProperties: Map<string, any>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export default Icon;

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

@@ -0,0 +1,158 @@
+"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");
+/**
+ * Icon component, which has to be mounted inside of a `IconProvider`
+ * component.
+ *
+ * The `IconProvider` component defines where icons should be consumed from (`url`).
+ * This `Icon` component accepts the `name` attribute, which will be
+ * the file name of the icon to be loaded from the given `url`.
+ *
+ * Once fetched, the icon will be mounted. If fetching wasn't successful,
+ * nothing will be shown.
+ *
+ * The `scale` attribute allows scaling the icon based on the provided
+ * `length-unit` attribute (which will either come from the IconProvider or
+ * could be overridden per icon). For example:
+ * if `scale = 1` and `length-unit = 'em'`, the size of the icon will be
+ * `width: 1em; height: 1em`.
+ *
+ * For accessibility the `role` and `aria-label` of the icon can be set.
+ *
+ * @tag mdc-icon
+ * @tagname mdc-icon
+ */
+class Icon extends models_1.Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * Name of the icon (= filename)
+         */
+        this.name = icon_constants_1.DEFAULTS.NAME;
+        /**
+         * Scale of the icon (works in combination with length unit)
+         */
+        this.scale = icon_constants_1.DEFAULTS.SCALE;
+        /**
+         * Role attribute to be set for accessibility
+         */
+        this.role = null;
+        /**
+         * 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 });
+    }
+    /**
+     * Get Icon Data function which will fetch the icon (currently only svg)
+     * and sets state and attributes once fetched successfully
+     */
+    async getIconData() {
+        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);
+                // update iconData state once fetched:
+                this.iconData = iconHtml;
+                // when icon got fetched, set role and aria-label:
+                this.setRoleOnIcon();
+                this.setAriaLabelOnIcon();
+            }
+        }
+    }
+    /**
+     * Updates the size by setting the width and height
+     */
+    updateSize() {
+        if (this.scale && (this.lengthUnit || this.lengthUnitFromContext)) {
+            const value = `${this.scale}${this.lengthUnit || this.lengthUnitFromContext}`;
+            this.style.width = value;
+            this.style.height = value;
+        }
+    }
+    setRoleOnIcon() {
+        var _a, _b;
+        if (this.role) {
+            // pass through role attribute to svg if set on mdc-icon
+            (_a = this.iconData) === null || _a === void 0 ? void 0 : _a.setAttribute('role', this.role);
+        }
+        else {
+            (_b = this.iconData) === null || _b === void 0 ? void 0 : _b.removeAttribute('role');
+        }
+    }
+    setAriaLabelOnIcon() {
+        var _a, _b;
+        if (this.ariaLabel) {
+            // pass through aria-label attribute to svg if set on mdc-icon
+            (_a = this.iconData) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-label', this.ariaLabel);
+        }
+        else {
+            (_b = this.iconData) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-label');
+        }
+    }
+    updated(changedProperties) {
+        var _a, _b;
+        super.updated(changedProperties);
+        if (changedProperties.has('name')) {
+            // fetch icon data if name changes:
+            this.getIconData().catch((err) => {
+                console.error(err);
+            });
+        }
+        if (changedProperties.has('role')) {
+            this.setRoleOnIcon();
+        }
+        if (changedProperties.has('ariaLabel')) {
+            this.setAriaLabelOnIcon();
+        }
+        if (changedProperties.has('scale') || changedProperties.has('lengthUnit')) {
+            this.updateSize();
+        }
+        if (this.lengthUnitFromContext !== ((_a = this.iconProviderContext.value) === null || _a === void 0 ? void 0 : _a.lengthUnit)) {
+            this.lengthUnitFromContext = (_b = this.iconProviderContext.value) === null || _b === void 0 ? void 0 : _b.lengthUnit;
+            this.updateSize();
+        }
+    }
+    render() {
+        return (0, lit_1.html) ` ${this.iconData} `;
+    }
+}
+Icon.styles = icon_styles_1.default;
+tslib_1.__decorate([
+    (0, decorators_js_1.state)(),
+    tslib_1.__metadata("design:type", HTMLElement)
+], Icon.prototype, "iconData", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.state)(),
+    tslib_1.__metadata("design:type", String)
+], Icon.prototype, "lengthUnitFromContext", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: String, reflect: true }),
+    tslib_1.__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)
+], Icon.prototype, "scale", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'length-unit' }),
+    tslib_1.__metadata("design:type", String)
+], Icon.prototype, "lengthUnit", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: String }),
+    tslib_1.__metadata("design:type", Object)
+], Icon.prototype, "role", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'aria-label' }),
+    tslib_1.__metadata("design:type", Object)
+], Icon.prototype, "ariaLabel", void 0);
+exports.default = Icon;

package/dist/components/icon/icon.constants.d.ts

@@ -0,0 +1,6 @@
+declare const TAG_NAME: "mdc-icon";
+declare const DEFAULTS: {
+    NAME: undefined;
+    SCALE: number;
+};
+export { TAG_NAME, DEFAULTS };

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

@@ -0,0 +1,12 @@
+"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;
+const DEFAULTS = {
+    NAME: undefined,
+    SCALE: 1,
+};
+exports.DEFAULTS = DEFAULTS;

package/dist/components/icon/icon.styles.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult[];
+export default styles;