@momentum-design/components 0.12.2 → 0.12.4

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

@@ -1,18 +1,120 @@
 import { css } from 'lit';
-const styles = css `
+import { hostFitContentStyles } from '../../utils/styles';
+const styles = [hostFitContentStyles, css `
   :host {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    --mdc-avatar-default-background-color: var(--mds-color-theme-avatar-default);
+    --mdc-avatar-default-foreground-color: var(--mds-color-theme-common-text-primary-normal);
+    --mdc-avatar-loading-indicator-background-color: var(--mds-color-theme-common-text-primary-disabled);
+    --mdc-avatar-loading-indicator-foreground-color: var(--mdc-avatar-default-foreground-color);
+    --mdc-avatar-loading-overlay-background-color: var(--mds-color-theme-common-overlays-secondary-normal);
+  }
+  :host([size="xx_large"]) .content {
+    width: 7.75rem;
+    height: 7.75rem;
+  }
+  :host([size="x_large"]) .content {
+    width: 5.5rem;
+    height: 5.5rem;
+  }
+  :host([size="large"]) .content {
+    width: 4.5rem;
+    height: 4.5rem;
+  }
+  :host([size="midsize"]) .content {
+    width: 4rem;
+    height: 4rem;
+  }
+  :host([size="small"]) .content {
+    width: 3rem;
+    height: 3rem;
+  }
+  :host([size="x_small"]) .content {
+    width: 2rem;
+    height: 2rem;
+  }
+  :host([size="xx_small"]) .content {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+  :host([size="xx_large"]) .content > .loading__wrapper > .loader {
+    transform: scale(1.5);
+  }
+  :host([size="x_large"]) .content > .loading__wrapper > .loader {
+    transform: scale(1.2);
+  }
+  :host([size="large"]) .content > .loading__wrapper > .loader,
+  :host([size="midsize"]) .content > .loading__wrapper > .loader {
+    transform: scale(0.8);
+  }
+  :host([size="small"]) .content > .loading__wrapper > .loader {
+    transform: scale(0.6);
+  }
+  :host([size="x_small"]) .content > .loading__wrapper > .loader {
+    transform: scale(0.4);
+  }
+  :host([size="xx_small"]) .content > .loading__wrapper > .loader {
+    transform: scale(0.3);
+  }
+  .content {
+    width: 2rem;
+    height: 2rem;
+    background-color: var(--mdc-avatar-default-background-color);
+    color: var(--mdc-avatar-default-foreground-color);
     border-radius: 100vh;
     position: relative;
-    width: fit-content;
+    display: grid;
+    place-items: center;
   }
-  img {
+  .photo {
     border-radius: 100vh;
-    height: inherit;
-    width: inherit;
+    height: 100%;
+    width: 100%;
     object-fit: cover;
+    overflow: hidden;
+  }
+  .presence {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+  .loading__wrapper {
+    position: absolute;
+    border-radius: 100vh;
+    width: 100%;
+    height: 100%;
+    background-color: var(--mdc-avatar-loading-overlay-background-color);
+    display: grid;
+    place-items: center;
+  }
+  .loader {
+    position: absolute;
+    width: 1rem;
+    transform: scale(0.4);
+    aspect-ratio: 1;
+    border-radius: 100vh;
+    animation: loading-key 1s infinite linear alternate;
+  }
+  @keyframes loading-key {
+    0%  {
+      box-shadow: 1.25rem 0 var(--mdc-avatar-loading-indicator-foreground-color),
+        -1.25rem 0 var(--mdc-avatar-loading-indicator-background-color);
+      background: var(--mdc-avatar-loading-indicator-foreground-color);
+    }
+    33% {
+      box-shadow: 1.25rem 0 var(--mdc-avatar-loading-indicator-foreground-color),
+        -1.25rem 0 var(--mdc-avatar-loading-indicator-background-color);
+      background: var(--mdc-avatar-loading-indicator-background-color);
+    }
+    66% {
+      box-shadow: 1.25rem 0 var(--mdc-avatar-loading-indicator-background-color),
+        -1.25rem 0 var(--mdc-avatar-loading-indicator-foreground-color);
+      background: var(--mdc-avatar-loading-indicator-background-color);
+    }
+    100%{
+      box-shadow: 1.25rem 0 var(--mdc-avatar-loading-indicator-background-color),
+        -1.25rem 0 var(--mdc-avatar-loading-indicator-foreground-color);
+      background: var(--mdc-avatar-loading-indicator-foreground-color);
+    }
   }
-`;
-export default [styles];
+`];
+export default styles;

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

@@ -1 +1,5 @@
-export type AvatarType = 'photo' | 'text' | 'icon' | 'multiuser';
+import { AVATAR_TYPE } from './avatar.constants';
+import { SIZE as AVATAR_SIZE } from '../presence/presence.constants';
+import type { ValueOf } from '../../utils/types';
+export type AvatarType = ValueOf<typeof AVATAR_TYPE>;
+export type AvatarSize = ValueOf<typeof AVATAR_SIZE>;

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

@@ -0,0 +1,5 @@
+import type { TextType } from '../text/text.types';
+import type { AvatarSize } from './avatar.types';
+declare const getAvatarIconSize: (size: AvatarSize) => number;
+declare const getAvatarTextFontSize: (size: AvatarSize) => TextType;
+export { getAvatarIconSize, getAvatarTextFontSize, };

package/dist/components/avatar/avatar.utils.js

@@ -0,0 +1,27 @@
+import { SIZE as AVATAR_SIZE } from '../presence/presence.constants';
+import { TYPE as FONT_TYPE } from '../text/text.constants';
+const getAvatarIconSize = (size) => {
+    const avatarIconSizeMap = {
+        [AVATAR_SIZE.XX_LARGE]: 4.75,
+        [AVATAR_SIZE.X_LARGE]: 3,
+        [AVATAR_SIZE.LARGE]: 2.5,
+        [AVATAR_SIZE.MIDSIZE]: 2.25,
+        [AVATAR_SIZE.SMALL]: 1.75,
+        [AVATAR_SIZE.X_SMALL]: 1.25,
+        [AVATAR_SIZE.XX_SMALL]: 1,
+    };
+    return avatarIconSizeMap[size] || 1.25; // default size of icon
+};
+const getAvatarTextFontSize = (size) => {
+    const avatarTextFontSizeMap = {
+        [AVATAR_SIZE.XX_LARGE]: FONT_TYPE.HEADING_XLARGE_MEDIUM,
+        [AVATAR_SIZE.X_LARGE]: FONT_TYPE.HEADING_LARGE_MEDIUM,
+        [AVATAR_SIZE.LARGE]: FONT_TYPE.HEADING_MIDSIZE_MEDIUM,
+        [AVATAR_SIZE.MIDSIZE]: FONT_TYPE.HEADING_SMALL_MEDIUM,
+        [AVATAR_SIZE.SMALL]: FONT_TYPE.HEADING_SMALL_MEDIUM,
+        [AVATAR_SIZE.XX_SMALL]: FONT_TYPE.BODY_SMALL_MEDIUM,
+        [AVATAR_SIZE.X_SMALL]: FONT_TYPE.BODY_MIDSIZE_MEDIUM,
+    };
+    return avatarTextFontSizeMap[size] || FONT_TYPE.BODY_MIDSIZE_MEDIUM; // default size of text font
+};
+export { getAvatarIconSize, getAvatarTextFontSize, };

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

@@ -1,4 +1,7 @@
 import Avatar from './avatar.component';
+import '../icon';
+import '../presence';
+import '../text';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-avatar']: Avatar;

package/dist/components/avatar/index.js

@@ -1,4 +1,7 @@
 import Avatar from './avatar.component';
 import { TAG_NAME } from './avatar.constants';
+import '../icon';
+import '../presence';
+import '../text';
 Avatar.register(TAG_NAME);
 export default Avatar;

package/dist/custom-elements.json

@@ -8,89 +8,156 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.",
           "name": "Avatar",
-          "slots": [
+          "cssProperties": [
             {
-              "description": "This is a default/unnamed slot",
-              "name": ""
+              "description": "Allows customization of the default background color.",
+              "name": "--mdc-avatar-default-background-color"
+            },
+            {
+              "description": "Allows customization of the default foreground color.",
+              "name": "--mdc-avatar-default-foreground-color"
+            },
+            {
+              "description": "Allows customization of the loading indicator background color.",
+              "name": "--mdc-avatar-loading-indicator-background-color"
+            },
+            {
+              "description": "Allows customization of the loading indicator foreground color.",
+              "name": "--mdc-avatar-loading-indicator-foreground-color"
+            },
+            {
+              "description": "Allows customization of the loading overlay background color.",
+              "name": "--mdc-avatar-loading-overlay-background-color"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "type",
+              "name": "src",
               "type": {
-                "text": "AvatarType | undefined"
+                "text": "string | undefined"
               },
-              "attribute": "type",
-              "reflects": true
+              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
+              "attribute": "src"
             },
             {
               "kind": "field",
-              "name": "alt",
+              "name": "initials",
               "type": {
                 "text": "string | undefined"
               },
-              "attribute": "alt"
+              "description": "The initials to be displayed for the avatar.",
+              "attribute": "initials"
             },
             {
               "kind": "field",
-              "name": "src",
+              "name": "presence",
               "type": {
-                "text": "string | undefined"
+                "text": "PresenceType | undefined"
               },
-              "attribute": "src"
+              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
+              "attribute": "presence"
             },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "number | undefined"
+                "text": "AvatarSize"
               },
-              "description": "Scale of the avatar",
-              "attribute": "size"
+              "description": "Acceptable values include:\n- xx_small\n- x_small\n- small\n- midsize\n- large\n- x_large\n- xx_large",
+              "default": "x_small",
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "updateSize",
-              "privacy": "private",
-              "description": "Updates the size by setting the width and height"
+              "kind": "field",
+              "name": "iconName",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
+              "attribute": "icon-name"
             },
             {
-              "kind": "method",
-              "name": "photoTemplate"
+              "kind": "field",
+              "name": "counter",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the give number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
+              "attribute": "counter"
+            },
+            {
+              "kind": "field",
+              "name": "isTyping",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Represents the typing indicator when the user is typing.",
+              "attribute": "is-typing"
             }
           ],
           "attributes": [
             {
-              "name": "type",
+              "name": "src",
               "type": {
-                "text": "AvatarType | undefined"
+                "text": "string | undefined"
               },
-              "fieldName": "type"
+              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
+              "fieldName": "src"
             },
             {
-              "name": "alt",
+              "name": "initials",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "alt"
+              "description": "The initials to be displayed for the avatar.",
+              "fieldName": "initials"
             },
             {
-              "name": "src",
+              "name": "presence",
               "type": {
-                "text": "string | undefined"
+                "text": "PresenceType | undefined"
               },
-              "fieldName": "src"
+              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
+              "fieldName": "presence"
             },
             {
               "name": "size",
               "type": {
-                "text": "number | undefined"
+                "text": "AvatarSize"
               },
-              "description": "Scale of the avatar",
+              "description": "Acceptable values include:\n- xx_small\n- x_small\n- small\n- midsize\n- large\n- x_large\n- xx_large",
+              "default": "x_small",
               "fieldName": "size"
+            },
+            {
+              "name": "icon-name",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
+              "fieldName": "iconName"
+            },
+            {
+              "name": "counter",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the give number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
+              "fieldName": "counter"
+            },
+            {
+              "name": "is-typing",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Represents the typing indicator when the user is typing.",
+              "fieldName": "isTyping"
             }
           ],
           "superclass": {
@@ -98,8 +165,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-avatar",
-          "summary": "This is MyElement",
-          "jsDoc": "/**\n * @slot - This is a default/unnamed slot\n *\n * @summary This is MyElement\n *\n * @tagname mdc-avatar\n */",
+          "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n */",
           "customElement": true
         }
       ],
@@ -114,6 +180,77 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/bullet/bullet.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
+          "name": "Bullet",
+          "cssProperties": [
+            {
+              "description": "background color of the bullet",
+              "name": "--mdc-bullet-background-color"
+            },
+            {
+              "description": "small size value of the bullet",
+              "name": "--mdc-bullet-size-small"
+            },
+            {
+              "description": "medium size value of the bullet",
+              "name": "--mdc-bullet-size-medium"
+            },
+            {
+              "description": "large size value of the bullet",
+              "name": "--mdc-bullet-size-large"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "privacy": "public",
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "attribute": "size",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-bullet",
+          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Bullet",
+            "module": "components/bullet/bullet.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/badge/badge.component.js",
@@ -375,77 +512,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/bullet/bullet.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
-          "name": "Bullet",
-          "cssProperties": [
-            {
-              "description": "background color of the bullet",
-              "name": "--mdc-bullet-background-color"
-            },
-            {
-              "description": "small size value of the bullet",
-              "name": "--mdc-bullet-size-small"
-            },
-            {
-              "description": "medium size value of the bullet",
-              "name": "--mdc-bullet-size-medium"
-            },
-            {
-              "description": "large size value of the bullet",
-              "name": "--mdc-bullet-size-large"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "privacy": "public",
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "attribute": "size",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-bullet",
-          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Bullet",
-            "module": "components/bullet/bullet.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.component.js",

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

@@ -1,10 +1,36 @@
 import Component from '../../components/avatar';
 /**
- * @slot - This is a default/unnamed slot
+ * The `mdc-avatar` component is used to represent a person or a space.
+ * An avatar can be an icon, initials, counter and photo.
  *
- * @summary This is MyElement
+ * To set the photo of an avatar,
+ * you need to set "src" attribute.
+ *
+ * While the avatar image is loading, as a placeholder,
+ * we will show the initials text.
+ * If the initials are not specified then,
+ * we will show `user-regular` icon as a placeholder.
+ *
+ * By default, if there are no attributes specified,
+ * then the default avatar will be an icon with `user-regular` name.
+ *
+ * The avatar component is non clickable and non interactive/focusable component.
+ * If the avatar is typing, then the loading indicator will be displayed.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-presence
+ * @dependency mdc-text
  *
  * @tagname mdc-avatar
+ *
+ * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.
+ * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.
+ * @cssproperty --mdc-avatar-loading-indicator-background-color -
+ *  Allows customization of the loading indicator background color.
+ * @cssproperty --mdc-avatar-loading-indicator-foreground-color -
+ *  Allows customization of the loading indicator foreground color.
+ * @cssproperty --mdc-avatar-loading-overlay-background-color -
+ *  Allows customization of the loading overlay background color.
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/avatar/index.js

@@ -3,11 +3,37 @@ 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
+ * The `mdc-avatar` component is used to represent a person or a space.
+ * An avatar can be an icon, initials, counter and photo.
  *
- * @summary This is MyElement
+ * To set the photo of an avatar,
+ * you need to set "src" attribute.
+ *
+ * While the avatar image is loading, as a placeholder,
+ * we will show the initials text.
+ * If the initials are not specified then,
+ * we will show `user-regular` icon as a placeholder.
+ *
+ * By default, if there are no attributes specified,
+ * then the default avatar will be an icon with `user-regular` name.
+ *
+ * The avatar component is non clickable and non interactive/focusable component.
+ * If the avatar is typing, then the loading indicator will be displayed.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-presence
+ * @dependency mdc-text
  *
  * @tagname mdc-avatar
+ *
+ * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.
+ * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.
+ * @cssproperty --mdc-avatar-loading-indicator-background-color -
+ *  Allows customization of the loading indicator background color.
+ * @cssproperty --mdc-avatar-loading-indicator-foreground-color -
+ *  Allows customization of the loading indicator foreground color.
+ * @cssproperty --mdc-avatar-loading-overlay-background-color -
+ *  Allows customization of the loading overlay background color.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/dist/react/index.d.ts

@@ -1,6 +1,6 @@
 export { default as Avatar } from './avatar';
-export { default as Badge } from './badge';
 export { default as Bullet } from './bullet';
+export { default as Badge } from './badge';
 export { default as Button } from './button';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';

package/dist/react/index.js

@@ -1,6 +1,6 @@
 export { default as Avatar } from './avatar';
-export { default as Badge } from './badge';
 export { default as Bullet } from './bullet';
+export { default as Badge } from './badge';
 export { default as Button } from './button';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';

package/package.json

@@ -35,5 +35,5 @@
     "@momentum-design/tokens": "*",
     "lit": "^3.2.0"
   },
-  "version": "0.12.2"
+  "version": "0.12.4"
 }