@momentum-design/components 0.4.14 → 0.4.16

package/dist/custom-elements.json

@@ -114,6 +114,178 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/icon/icon.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are two types of icons: decorative and informative.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n  by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n  the role will be unset.",
+          "name": "Icon",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the default fill color.",
+              "name": "--mdc-icon-fill-color"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "iconData",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "lengthUnitFromContext",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "sizeFromContext",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Name of the icon (= filename)",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Size of the icon (works in combination with length unit)",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "lengthUnit",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
+              "attribute": "length-unit"
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "iconProviderContext",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "getIconData",
+              "privacy": "private",
+              "description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
+            },
+            {
+              "kind": "method",
+              "name": "updateSize",
+              "privacy": "private",
+              "description": "Updates the size by setting the width and height"
+            },
+            {
+              "kind": "method",
+              "name": "setRoleOnIcon",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setAriaHiddenOnIcon",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setAriaLabelOnIcon",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "computedIconSize",
+              "privacy": "private",
+              "readonly": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Name of the icon (= filename)",
+              "fieldName": "name"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Size of the icon (works in combination with length unit)",
+              "fieldName": "size"
+            },
+            {
+              "name": "length-unit",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
+              "fieldName": "lengthUnit"
+            },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-icon",
+          "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are two types of icons: decorative and informative.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n *   by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n *   the role will be unset.\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Icon",
+            "module": "components/icon/icon.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/badge/badge.component.js",
@@ -435,178 +607,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/icon/icon.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are two types of icons: decorative and informative.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n  by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n  the role will be unset.",
-          "name": "Icon",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default fill color.",
-              "name": "--mdc-icon-fill-color"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "iconData",
-              "type": {
-                "text": "HTMLElement | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "lengthUnitFromContext",
-              "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "sizeFromContext",
-              "type": {
-                "text": "number | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Name of the icon (= filename)",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Size of the icon (works in combination with length unit)",
-              "attribute": "size"
-            },
-            {
-              "kind": "field",
-              "name": "lengthUnit",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
-              "attribute": "length-unit"
-            },
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "field",
-              "name": "iconProviderContext",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "getIconData",
-              "privacy": "private",
-              "description": "Get Icon Data function which will fetch the icon (currently only svg)\nand sets state and attributes once fetched successfully"
-            },
-            {
-              "kind": "method",
-              "name": "updateSize",
-              "privacy": "private",
-              "description": "Updates the size by setting the width and height"
-            },
-            {
-              "kind": "method",
-              "name": "setRoleOnIcon",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "setAriaHiddenOnIcon",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "setAriaLabelOnIcon",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "computedIconSize",
-              "privacy": "private",
-              "readonly": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Name of the icon (= filename)",
-              "fieldName": "name"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Size of the icon (works in combination with length unit)",
-              "fieldName": "size"
-            },
-            {
-              "name": "length-unit",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
-              "fieldName": "lengthUnit"
-            },
-            {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-icon",
-          "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are two types of icons: decorative and informative.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n *   by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\".\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n *   the role will be unset.\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Icon",
-            "module": "components/icon/icon.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/iconprovider/iconprovider.component.js",

package/dist/index.js

@@ -1,16 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = exports.Badge = exports.Avatar = exports.IconProvider = exports.Icon = exports.ThemeProvider = void 0;
-const tslib_1 = require("tslib");
-const themeprovider_1 = tslib_1.__importDefault(require("./components/themeprovider"));
-exports.ThemeProvider = themeprovider_1.default;
-const icon_1 = tslib_1.__importDefault(require("./components/icon"));
-exports.Icon = icon_1.default;
-const iconprovider_1 = tslib_1.__importDefault(require("./components/iconprovider"));
-exports.IconProvider = iconprovider_1.default;
-const avatar_1 = tslib_1.__importDefault(require("./components/avatar"));
-exports.Avatar = avatar_1.default;
-const badge_1 = tslib_1.__importDefault(require("./components/badge"));
-exports.Badge = badge_1.default;
-const text_1 = tslib_1.__importDefault(require("./components/text"));
-exports.Text = text_1.default;
+import ThemeProvider from './components/themeprovider';
+import Icon from './components/icon';
+import IconProvider from './components/iconprovider';
+import Avatar from './components/avatar';
+import Badge from './components/badge';
+import Text from './components/text';
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Text, };

package/dist/models/component/component.component.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const lit_1 = require("lit");
-const component_styles_1 = tslib_1.__importDefault(require("./component.styles"));
+import { LitElement } from 'lit';
+import styles from './component.styles';
 /**
  * Core Component class to ultimately be inherited by all Web Components within
  * this package.
@@ -12,7 +9,7 @@ const component_styles_1 = tslib_1.__importDefault(require("./component.styles")
  *
  * @public
  */
-class Component extends lit_1.LitElement {
+class Component extends LitElement {
     /**
      * Register `this` extended `Component` Class as a custom element within the
      * DOM's custom elements registry.
@@ -50,5 +47,5 @@ class Component extends lit_1.LitElement {
 /**
  * Styles associated with the Base Component.
  */
-Component.styles = [component_styles_1.default];
-exports.default = Component;
+Component.styles = [styles];
+export default Component;

package/dist/models/component/component.styles.js

@@ -1,7 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const lit_1 = require("lit");
-exports.default = (0, lit_1.css) `
+import { css } from 'lit';
+export default css `
   :host {
     box-sizing: border-box;
   }

package/dist/models/component/component.types.js

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

package/dist/models/component/index.js

@@ -1,5 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const component_component_1 = tslib_1.__importDefault(require("./component.component"));
-exports.default = component_component_1.default;
+import Component from './component.component';
+export default Component;

package/dist/models/index.js

@@ -1,8 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Provider = exports.Component = void 0;
-const tslib_1 = require("tslib");
-const component_1 = tslib_1.__importDefault(require("./component"));
-exports.Component = component_1.default;
-const provider_1 = tslib_1.__importDefault(require("./provider"));
-exports.Provider = provider_1.default;
+import Component from './component';
+import Provider from './provider';
+export { Component, Provider, };

package/dist/models/provider/index.js

@@ -1,5 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const provider_component_1 = tslib_1.__importDefault(require("./provider.component"));
-exports.default = provider_component_1.default;
+import Provider from './provider.component';
+export default Provider;

package/dist/models/provider/provider.component.js

@@ -1,17 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const context_1 = require("@lit/context");
-const lit_1 = require("lit");
-const component_1 = tslib_1.__importDefault(require("../component"));
-const provider_styles_1 = tslib_1.__importDefault(require("./provider.styles"));
+import { ContextProvider } from '@lit/context';
+import { html } from 'lit';
+import Component from '../component';
+import styles from './provider.styles';
 /**
  * Provider Component class to ultimately be inherited by all Provider-type Web
  * Components within this package.
  *
  * @public
  */
-class Provider extends component_1.default {
+class Provider extends Component {
     /**
      * Constructor of the Provider.
      *
@@ -29,7 +26,7 @@ class Provider extends component_1.default {
      */
     constructor({ context, initialValue }) {
         super();
-        this.context = new context_1.ContextProvider(this, {
+        this.context = new ContextProvider(this, {
             context,
             initialValue,
         });
@@ -46,11 +43,11 @@ class Provider extends component_1.default {
      */
     render() {
         this.updateContext();
-        return (0, lit_1.html) `<slot></slot>`;
+        return html `<slot></slot>`;
     }
 }
 /**
  * Styles associated with this Provider Component.
  */
-Provider.styles = [...component_1.default.styles, provider_styles_1.default];
-exports.default = Provider;
+Provider.styles = [...Component.styles, styles];
+export default Provider;

package/dist/models/provider/provider.styles.js

@@ -1,9 +1,7 @@
-"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: contents;
   }
 `;
-exports.default = styles;
+export default styles;

package/dist/react/avatar/index.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("@lit/react");
-const avatar_1 = tslib_1.__importDefault(require("../../components/avatar"));
-const avatar_constants_1 = require("../../components/avatar/avatar.constants");
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/avatar';
+import { TAG_NAME } from '../../components/avatar/avatar.constants';
 /**
  * @slot - This is a default/unnamed slot
  *
@@ -12,11 +9,11 @@ const avatar_constants_1 = require("../../components/avatar/avatar.constants");
  *
  * @tagname mdc-avatar
  */
-const reactWrapper = (0, react_1.createComponent)({
-    tagName: avatar_constants_1.TAG_NAME,
-    elementClass: avatar_1.default,
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
     react: React,
     events: {},
     displayName: 'Avatar',
 });
-exports.default = reactWrapper;
+export default reactWrapper;

package/dist/react/badge/index.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("@lit/react");
-const badge_1 = tslib_1.__importDefault(require("../../components/badge"));
-const badge_constants_1 = require("../../components/badge/badge.constants");
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/badge';
+import { TAG_NAME } from '../../components/badge/badge.constants';
 /**
  * A badge is a small, visually distinct element that provides additional information
  * or highlights the status of an item.
@@ -15,11 +12,11 @@ const badge_constants_1 = require("../../components/badge/badge.constants");
  *
  * @tagname mdc-badge
  */
-const reactWrapper = (0, react_1.createComponent)({
-    tagName: badge_constants_1.TAG_NAME,
-    elementClass: badge_1.default,
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
     react: React,
     events: {},
     displayName: 'Badge',
 });
-exports.default = reactWrapper;
+export default reactWrapper;

package/dist/react/icon/index.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("@lit/react");
-const icon_1 = tslib_1.__importDefault(require("../../components/icon"));
-const icon_constants_1 = require("../../components/icon/icon.constants");
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/icon';
+import { TAG_NAME } from '../../components/icon/icon.constants';
 /**
  * Icon component that dynamically displays SVG icons based on a valid name.
  *
@@ -42,11 +39,11 @@ const icon_constants_1 = require("../../components/icon/icon.constants");
  *
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
  */
-const reactWrapper = (0, react_1.createComponent)({
-    tagName: icon_constants_1.TAG_NAME,
-    elementClass: icon_1.default,
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
     react: React,
     events: {},
     displayName: 'Icon',
 });
-exports.default = reactWrapper;
+export default reactWrapper;

package/dist/react/iconprovider/index.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("@lit/react");
-const iconprovider_1 = tslib_1.__importDefault(require("../../components/iconprovider"));
-const iconprovider_constants_1 = require("../../components/iconprovider/iconprovider.constants");
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/iconprovider';
+import { TAG_NAME } from '../../components/iconprovider/iconprovider.constants';
 /**
  * IconProvider component, which allows to be consumed from sub components
  * (see `providerUtils.consume` for how to consume)
@@ -17,11 +14,11 @@ const iconprovider_constants_1 = require("../../components/iconprovider/iconprov
  *
  * @slot - children
  */
-const reactWrapper = (0, react_1.createComponent)({
-    tagName: iconprovider_constants_1.TAG_NAME,
-    elementClass: iconprovider_1.default,
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
     react: React,
     events: {},
     displayName: 'IconProvider',
 });
-exports.default = reactWrapper;
+export default reactWrapper;