From e6e3f819022eabb30cf5a6f2cba3d59f0170a73d Mon Sep 17 00:00:00 2001
From: Christian Szablewski-Paz <christian.szablewski-paz@narmitech.com>
Date: Wed, 27 Nov 2024 10:35:09 -0500
Subject: [PATCH 01/16] initial commit

---
 src/Avatar/index.scss        | 10 +++++
 src/Avatar/index.stories.tsx | 19 ++++++++++
 src/Avatar/index.tsx         | 72 ++++++++++++++++++++++++++++++++++++
 3 files changed, 101 insertions(+)
 create mode 100644 src/Avatar/index.scss
 create mode 100644 src/Avatar/index.stories.tsx
 create mode 100644 src/Avatar/index.tsx

diff --git a/src/Avatar/index.scss b/src/Avatar/index.scss
new file mode 100644
index 00000000..88add1c3
--- /dev/null
+++ b/src/Avatar/index.scss
@@ -0,0 +1,10 @@
+.nds-avatar {
+  width: 100px;
+  height: 500px;
+  color: white;
+  border: 2px solid black;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
diff --git a/src/Avatar/index.stories.tsx b/src/Avatar/index.stories.tsx
new file mode 100644
index 00000000..ecd2b90d
--- /dev/null
+++ b/src/Avatar/index.stories.tsx
@@ -0,0 +1,19 @@
+/* eslint-disable react/jsx-key */
+import React, { useState } from "react";
+import Avatar from "../Avatar";
+
+// FIXME: code and story for `footerContent`
+// FIXME: code and story for render prop trigger
+
+export const Overview = () => {
+  return (
+    <div style={{ margin: "8rem" }}>
+      <Avatar initials="CP" label="Christian Paz" />
+    </div>
+  );
+};
+
+export default {
+  title: "Components/Avatar",
+  component: Avatar,
+};
diff --git a/src/Avatar/index.tsx b/src/Avatar/index.tsx
new file mode 100644
index 00000000..d34b248a
--- /dev/null
+++ b/src/Avatar/index.tsx
@@ -0,0 +1,72 @@
+import React, { PropsWithChildren } from "react";
+import PropTypes from "prop-types";
+import cc from "classcat";
+import AsElement from "../util/AsElement";
+
+/**
+ * Child component of `Row`.
+ * When a `Row.Item` has a boolean prop of `shrink`, it will shrink to content width.
+ */
+const Avatar = ({
+  label = "",
+  size = "m",
+  initials = "",
+  imgurl = "",
+  linkurl = "",
+  children,
+  testId,
+}: PropsWithChildren<{
+  label?: string;
+  size?: "xs" | "s" | "m" | "l" | "xl";
+  initials?: string;
+  imgurl?: string;
+  linkurl?: string;
+  testId?: string;
+}>) => {
+  if (initials && imgurl) {
+    console.warn(
+      "Avatar component received both initials and imgurl props. Defaulting to imgurl.",
+    );
+  }
+  if (!initials && !imgurl) {
+    throw new Error(
+      "Avatar component requires either initials or imgurl prop.",
+    );
+  }
+  return (
+    <AsElement
+      elementType={linkurl ? "a" : "div"}
+      className={cc([
+        "nds-typography",
+        "nds-avatar",
+        // `nds-avatar--${size}`,
+        "alignChild--center--center",
+        "bgColor--theme--primary",
+      ])}
+      aria-label={label}
+      data-testid={testId}
+    >
+      <div className="nds-avatar">{initials}</div>
+    </AsElement>
+  );
+};
+
+Avatar.propTypes = {
+  /**
+   * When `true`, the row item shrinks to content size of its children.
+   * Otherwise, the item will expand to fill remaining space in the row.
+   */
+  label: PropTypes.string,
+  /** The html element to render as the root node of `Row` */
+  size: PropTypes.oneOf(["xs", "s", "m", "l", "xl"]),
+  /** Optional: controls className while maintaining default nds-row-item styling if left unspecified */
+  className: PropTypes.string,
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node),
+  ]),
+  /** Optional value for `data-testid` attribute */
+  testId: PropTypes.string,
+};
+
+export default Avatar;

From 4b22662b6c8786c01b136e13682549e40cbdc14c Mon Sep 17 00:00:00 2001
From: Christian Szablewski-Paz <christian.szablewski-paz@narmitech.com>
Date: Wed, 27 Nov 2024 10:40:40 -0500
Subject: [PATCH 02/16] remove extra div

---
 src/Avatar/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Avatar/index.tsx b/src/Avatar/index.tsx
index d34b248a..6cb15f49 100644
--- a/src/Avatar/index.tsx
+++ b/src/Avatar/index.tsx
@@ -46,7 +46,7 @@ const Avatar = ({
       aria-label={label}
       data-testid={testId}
     >
-      <div className="nds-avatar">{initials}</div>
+      {initials}
     </AsElement>
   );
 };

From 76409122d653c1042594876901ae484bf349d18e Mon Sep 17 00:00:00 2001
From: Christian Szablewski-Paz <christian.szablewski-paz@narmitech.com>
Date: Wed, 27 Nov 2024 10:58:48 -0500
Subject: [PATCH 03/16] fix imports

---
 src/Avatar/index.scss        | 5 ++---
 src/Avatar/index.stories.tsx | 2 ++
 src/Avatar/index.tsx         | 7 +++----
 src/index.js                 | 2 ++
 src/index.scss               | 1 +
 5 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/Avatar/index.scss b/src/Avatar/index.scss
index 88add1c3..ff969a12 100644
--- a/src/Avatar/index.scss
+++ b/src/Avatar/index.scss
@@ -1,8 +1,7 @@
 .nds-avatar {
-  width: 100px;
-  height: 500px;
+  width: 32px;
+  height: 32px;
   color: white;
-  border: 2px solid black;
   border-radius: 50%;
   display: flex;
   justify-content: center;
diff --git a/src/Avatar/index.stories.tsx b/src/Avatar/index.stories.tsx
index ecd2b90d..030dbad1 100644
--- a/src/Avatar/index.stories.tsx
+++ b/src/Avatar/index.stories.tsx
@@ -5,6 +5,8 @@ import Avatar from "../Avatar";
 // FIXME: code and story for `footerContent`
 // FIXME: code and story for render prop trigger
 
+const Template = (args) => <Avatar {...args} />;
+
 export const Overview = () => {
   return (
     <div style={{ margin: "8rem" }}>
diff --git a/src/Avatar/index.tsx b/src/Avatar/index.tsx
index 6cb15f49..38b6c0ec 100644
--- a/src/Avatar/index.tsx
+++ b/src/Avatar/index.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import cc from "classcat";
 import AsElement from "../util/AsElement";
@@ -13,16 +13,15 @@ const Avatar = ({
   initials = "",
   imgurl = "",
   linkurl = "",
-  children,
   testId,
-}: PropsWithChildren<{
+}: {
   label?: string;
   size?: "xs" | "s" | "m" | "l" | "xl";
   initials?: string;
   imgurl?: string;
   linkurl?: string;
   testId?: string;
-}>) => {
+}) => {
   if (initials && imgurl) {
     console.warn(
       "Avatar component received both initials and imgurl props. Defaulting to imgurl.",
diff --git a/src/index.js b/src/index.js
index 27264b4f..80fffcac 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,6 +2,7 @@ require("./index.scss");
 
 import AutocompleteModal from "./AutocompleteModal";
 import Alert from "./Alert";
+import Avatar from "./Avatar";
 import Button from "./Button";
 import Checkbox from "./Checkbox";
 import ContentCard from "./ContentCard";
@@ -49,6 +50,7 @@ import formatDate from "./formatters/formatDate";
 export {
   AutocompleteModal,
   Alert,
+  Avatar,
   Button,
   Checkbox,
   ContentCard,
diff --git a/src/index.scss b/src/index.scss
index f76991c7..ebb7ac2d 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -56,6 +56,7 @@
 // Components
 @import "Alert/";
 @import "AutocompleteModal/";
+@import "Avatar/";
 @import "RadioButtons/";
 @import "Input/";
 @import "DateInput/";

From e06e5efff2032d918ae6c15d603fda071488ca53 Mon Sep 17 00:00:00 2001
From: Christian Szablewski-Paz <christian.szablewski-paz@narmitech.com>
Date: Wed, 27 Nov 2024 11:21:54 -0500
Subject: [PATCH 04/16] conditionally render image, add size options

---
 src/Avatar/index.scss        | 24 +++++++++++++++--
 src/Avatar/index.stories.tsx |  5 +---
 src/Avatar/index.tsx         | 51 ++++++++++++++++++------------------
 3 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/src/Avatar/index.scss b/src/Avatar/index.scss
index ff969a12..9d46b254 100644
--- a/src/Avatar/index.scss
+++ b/src/Avatar/index.scss
@@ -1,9 +1,29 @@
 .nds-avatar {
-  width: 32px;
-  height: 32px;
   color: white;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   position: relative;
 }
+
+.nds-avatar--xs {
+  height: 24px;
+  width: 24px;
+  font-size: var(--font-size-s);
+}
+
+.nds-avatar--s {
+  height: 32px;
+  width: 32px;
+}
+
+.nds-avatar--m {
+  height: 40px;
+  width: 40px;
+}
+
+.nds-avatar--l,
+.nds-avatar--xl {
+  @extend .nds-avatar--m;
+}
+
diff --git a/src/Avatar/index.stories.tsx b/src/Avatar/index.stories.tsx
index 030dbad1..dc9fbc46 100644
--- a/src/Avatar/index.stories.tsx
+++ b/src/Avatar/index.stories.tsx
@@ -1,10 +1,7 @@
 /* eslint-disable react/jsx-key */
-import React, { useState } from "react";
+import React from "react";
 import Avatar from "../Avatar";
 
-// FIXME: code and story for `footerContent`
-// FIXME: code and story for render prop trigger
-
 const Template = (args) => <Avatar {...args} />;
 
 export const Overview = () => {
diff --git a/src/Avatar/index.tsx b/src/Avatar/index.tsx
index 38b6c0ec..d3875ef0 100644
--- a/src/Avatar/index.tsx
+++ b/src/Avatar/index.tsx
@@ -3,45 +3,44 @@ import PropTypes from "prop-types";
 import cc from "classcat";
 import AsElement from "../util/AsElement";
 
-/**
- * Child component of `Row`.
- * When a `Row.Item` has a boolean prop of `shrink`, it will shrink to content width.
- */
-const Avatar = ({
-  label = "",
-  size = "m",
-  initials = "",
-  imgurl = "",
-  linkurl = "",
-  testId,
-}: {
-  label?: string;
-  size?: "xs" | "s" | "m" | "l" | "xl";
+export interface AvatarProps {
+  // aria-label for accessibility
+  label: string;
+  // Fixed height and width of the avatar. Default: "s".
+  size?: "xs" | "s" | "m";
+  // String to display in the avatar. If imgurl is provided, this will be ignored.
   initials?: string;
+  // Optional: URL of the image to display in the avatar. If provided, initials will be ignored.
   imgurl?: string;
+  // Optional: URL to navigate to when the avatar is clicked
   linkurl?: string;
   testId?: string;
-}) => {
-  if (initials && imgurl) {
-    console.warn(
-      "Avatar component received both initials and imgurl props. Defaulting to imgurl.",
-    );
-  }
-  if (!initials && !imgurl) {
-    throw new Error(
-      "Avatar component requires either initials or imgurl prop.",
-    );
-  }
+}
+
+const Avatar = ({
+  label,
+  size = "s",
+  initials,
+  imgurl,
+  linkurl,
+  testId,
+}: AvatarProps) => {
+  const backgroundImage = imgurl
+    ? { backgroundImage: `url(${imgurl})`, backgroundSize: "cover" }
+    : {};
+
   return (
     <AsElement
       elementType={linkurl ? "a" : "div"}
+      href={linkurl}
       className={cc([
         "nds-typography",
         "nds-avatar",
-        // `nds-avatar--${size}`,
+        `nds-avatar--${size}`,
         "alignChild--center--center",
         "bgColor--theme--primary",
       ])}
+      style={backgroundImage}
       aria-label={label}
       data-testid={testId}
     >

From baa584f63987beed4ef4850a5ed8860d7225e8a5 Mon Sep 17 00:00:00 2001
From: Christian Szablewski-Paz <christian.szablewski-paz@narmitech.com>
Date: Wed, 27 Nov 2024 11:22:40 -0500
Subject: [PATCH 05/16] remove testId

---
 src/Avatar/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Avatar/index.tsx b/src/Avatar/index.tsx
index d3875ef0..27ff7577 100644
--- a/src/Avatar/index.tsx
+++ b/src/Avatar/index.tsx
@@ -14,7 +14,6 @@ export interface AvatarProps {
   imgurl?: string;
   // Optional: URL to navigate to when the avatar is clicked
   linkurl?: string;
-  testId?: string;
 }
 
 const Avatar = ({

From bb8537e05bcd9536ceb6105a97f6c595003849c3 Mon Sep 17 00:00:00 2001
From: Christian Szablewski-Paz <christian.szablewski-paz@narmitech.com>
Date: Wed, 27 Nov 2024 11:24:30 -0500
Subject: [PATCH 06/16] fix comments, remove testId from signature

---
 src/Avatar/index.tsx | 29 +++++------------------------
 1 file changed, 5 insertions(+), 24 deletions(-)

diff --git a/src/Avatar/index.tsx b/src/Avatar/index.tsx
index 27ff7577..f387cf8d 100644
--- a/src/Avatar/index.tsx
+++ b/src/Avatar/index.tsx
@@ -4,15 +4,15 @@ import cc from "classcat";
 import AsElement from "../util/AsElement";
 
 export interface AvatarProps {
-  // aria-label for accessibility
+  /** aria-label for accessibility */
   label: string;
-  // Fixed height and width of the avatar. Default: "s".
+  /** Fixed height and width of the avatar. Default: "s". */
   size?: "xs" | "s" | "m";
-  // String to display in the avatar. If imgurl is provided, this will be ignored.
+  /** String to display in the avatar. If imgurl is provided, this will be ignored. */
   initials?: string;
-  // Optional: URL of the image to display in the avatar. If provided, initials will be ignored.
+  /** Optional: URL of the image to display in the avatar. If provided, initials will be ignored. */
   imgurl?: string;
-  // Optional: URL to navigate to when the avatar is clicked
+  /** Optional: URL to navigate to when the avatar is clicked */
   linkurl?: string;
 }
 
@@ -22,7 +22,6 @@ const Avatar = ({
   initials,
   imgurl,
   linkurl,
-  testId,
 }: AvatarProps) => {
   const backgroundImage = imgurl
     ? { backgroundImage: `url(${imgurl})`, backgroundSize: "cover" }
@@ -48,22 +47,4 @@ const Avatar = ({
   );
 };
 
-Avatar.propTypes = {
-  /**
-   * When `true`, the row item shrinks to content size of its children.
-   * Otherwise, the item will expand to fill remaining space in the row.
-   */
-  label: PropTypes.string,
-  /** The html element to render as the root node of `Row` */
-  size: PropTypes.oneOf(["xs", "s", "m", "l", "xl"]),
-  /** Optional: controls className while maintaining default nds-row-item styling if left unspecified */
-  className: PropTypes.string,
-  children: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.arrayOf(PropTypes.node),
-  ]),
-  /** Optional value for `data-testid` attribute */
-  testId: PropTypes.string,
-};
-
 export default Avatar;

From 7a8a8596ae603a469269abef51256fb798bab189 Mon Sep 17 00:00:00 2001
From: Christian Szablewski-Paz <christian.szablewski-paz@narmitech.com>
Date: Wed, 27 Nov 2024 11:24:49 -0500
Subject: [PATCH 07/16] remove data-testid from AsElement

---
 src/Avatar/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Avatar/index.tsx b/src/Avatar/index.tsx
index f387cf8d..872404a2 100644
--- a/src/Avatar/index.tsx
+++ b/src/Avatar/index.tsx
@@ -40,7 +40,6 @@ const Avatar = ({
       ])}
       style={backgroundImage}
       aria-label={label}
-      data-testid={testId}
     >
       {initials}
     </AsElement>

From 05d8b893668aab95ebd3ed93ac04754b6525592b Mon Sep 17 00:00:00 2001
From: Christian Szablewski-Paz <christian.szablewski-paz@narmitech.com>
Date: Wed, 27 Nov 2024 11:39:08 -0500
Subject: [PATCH 08/16] add examples

---
 src/Avatar/index.scss        |  2 ++
 src/Avatar/index.stories.tsx | 36 +++++++++++++++++++++++++++++++-----
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/Avatar/index.scss b/src/Avatar/index.scss
index 9d46b254..80c6b71b 100644
--- a/src/Avatar/index.scss
+++ b/src/Avatar/index.scss
@@ -2,6 +2,7 @@
   color: white;
   border-radius: 50%;
   display: flex;
+  align-items: center;
   justify-content: center;
   position: relative;
 }
@@ -20,6 +21,7 @@
 .nds-avatar--m {
   height: 40px;
   width: 40px;
+  font-size: var(--font-size-l);
 }
 
 .nds-avatar--l,
diff --git a/src/Avatar/index.stories.tsx b/src/Avatar/index.stories.tsx
index dc9fbc46..8f21be85 100644
--- a/src/Avatar/index.stories.tsx
+++ b/src/Avatar/index.stories.tsx
@@ -1,14 +1,40 @@
 /* eslint-disable react/jsx-key */
 import React from "react";
 import Avatar from "../Avatar";
-
-const Template = (args) => <Avatar {...args} />;
+import Row from "../Row";
 
 export const Overview = () => {
+  return <Avatar initials="CP" label="Christian Paz" />;
+};
+
+export const WithImage = () => {
+  return (
+    <Avatar
+      imgurl="https://media.licdn.com/dms/image/v2/D4E0BAQHnVTkZjhvlQg/company-logo_200_200/company-logo_200_200/0/1680295112021?e=2147483647&v=beta&t=-4A2TRSHuDiBT_anhoqTULvjXfzVh7_vZApmdXUVzsc"
+      label="Narmi linked in logo"
+    />
+  );
+};
+
+export const WithLink = () => {
+  return (
+    <Avatar initials="CP" label="Christian Paz" linkurl="https://narmi.com" />
+  );
+};
+
+export const Sizes = () => {
   return (
-    <div style={{ margin: "8rem" }}>
-      <Avatar initials="CP" label="Christian Paz" />
-    </div>
+    <Row>
+      <Row.Item>
+        <Avatar initials="xs" label="extra small" size="xs" />
+      </Row.Item>
+      <Row.Item>
+        <Avatar initials="s" label="small" size="s" />
+      </Row.Item>
+      <Row.Item>
+        <Avatar initials="m" label="medium" size="m" />
+      </Row.Item>
+    </Row>
   );
 };
 

From 73ea7adae6989b20a2d65bf2ecbe8b08ff6016a6 Mon Sep 17 00:00:00 2001
From: Christian Szablewski-Paz <christian.szablewski-paz@narmitech.com>
Date: Wed, 27 Nov 2024 11:40:48 -0500
Subject: [PATCH 09/16] Update index.stories.tsx

---
 src/Avatar/index.stories.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/Avatar/index.stories.tsx b/src/Avatar/index.stories.tsx
index 8f21be85..f05ca54a 100644
--- a/src/Avatar/index.stories.tsx
+++ b/src/Avatar/index.stories.tsx
@@ -17,9 +17,7 @@ export const WithImage = () => {
 };
 
 export const WithLink = () => {
-  return (
-    <Avatar initials="CP" label="Christian Paz" linkurl="https://narmi.com" />
-  );
+  return <Avatar initials="NM" label="Narmi" linkurl="https://narmi.com" />;
 };
 
 export const Sizes = () => {

From 0cbc9fef12065bf197ad656bc86181cfb760eb18 Mon Sep 17 00:00:00 2001
From: Christian Szablewski-Paz <christian.szablewski-paz@narmitech.com>
Date: Wed, 27 Nov 2024 11:50:34 -0500
Subject: [PATCH 10/16] lint

---
 src/Avatar/index.stories.tsx | 3 +--
 src/Avatar/index.tsx         | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/Avatar/index.stories.tsx b/src/Avatar/index.stories.tsx
index f05ca54a..d9aa7979 100644
--- a/src/Avatar/index.stories.tsx
+++ b/src/Avatar/index.stories.tsx
@@ -1,6 +1,5 @@
-/* eslint-disable react/jsx-key */
 import React from "react";
-import Avatar from "../Avatar";
+import Avatar from "./";
 import Row from "../Row";
 
 export const Overview = () => {
diff --git a/src/Avatar/index.tsx b/src/Avatar/index.tsx
index 872404a2..fc14feb4 100644
--- a/src/Avatar/index.tsx
+++ b/src/Avatar/index.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import cc from "classcat";
 import AsElement from "../util/AsElement";
 

From af46fe8132594b6b299003d697336d3d751d5e85 Mon Sep 17 00:00:00 2001
From: Christian Szablewski-Paz <christian.szablewski-paz@narmitech.com>
Date: Wed, 27 Nov 2024 13:19:49 -0500
Subject: [PATCH 11/16] add text-transform: uppercase;

---
 src/Avatar/index.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Avatar/index.scss b/src/Avatar/index.scss
index 80c6b71b..f5de5e50 100644
--- a/src/Avatar/index.scss
+++ b/src/Avatar/index.scss
@@ -5,6 +5,7 @@
   align-items: center;
   justify-content: center;
   position: relative;
+  text-transform: uppercase;
 }
 
 .nds-avatar--xs {

From c4c633021a38099bc14d311109b7cf0ef71c677d Mon Sep 17 00:00:00 2001
From: Christian Szablewski-Paz <32683410+cs-paz@users.noreply.github.com>
Date: Wed, 27 Nov 2024 13:38:38 -0500
Subject: [PATCH 12/16] Update src/Avatar/index.tsx

Co-authored-by: Adam Detrick <adam.detrick@narmitech.com>
---
 src/Avatar/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Avatar/index.tsx b/src/Avatar/index.tsx
index fc14feb4..832bcac1 100644
--- a/src/Avatar/index.tsx
+++ b/src/Avatar/index.tsx
@@ -31,7 +31,6 @@ const Avatar = ({
       elementType={linkurl ? "a" : "div"}
       href={linkurl}
       className={cc([
-        "nds-typography",
         "nds-avatar",
         `nds-avatar--${size}`,
         "alignChild--center--center",

From 0d41968a3642c2bdfc1a386de1a96a59060edb38 Mon Sep 17 00:00:00 2001
From: Christian Szablewski-Paz <christian.szablewski-paz@narmitech.com>
Date: Wed, 27 Nov 2024 13:42:35 -0500
Subject: [PATCH 13/16] add to index.ts

---
 src/index.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/index.ts b/src/index.ts
index 482656f0..51731846 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,6 +2,7 @@
  * Typed Components
  */
 import AutocompleteModal from "./AutocompleteModal";
+import Avatar from "./Avatar";
 import DisabledShim from "./DisabledShim";
 import SeparatorList from "./SeparatorList";
 import Slider from "./Slider";
@@ -53,8 +54,9 @@ declare const formatDate;
 
 export * from "./types/Icon.types";
 export {
-  // typed  
+  // typed
   AutocompleteModal,
+  Avatar,
   DisabledShim,
   SeparatorList,
   Slider,

From e799fad4ec39c91f858bf1a49f74839a33ed9c4d Mon Sep 17 00:00:00 2001
From: Christian Szablewski-Paz <christian.szablewski-paz@narmitech.com>
Date: Wed, 27 Nov 2024 13:43:57 -0500
Subject: [PATCH 14/16] leave l and xl undefined

---
 src/Avatar/index.scss | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/Avatar/index.scss b/src/Avatar/index.scss
index f5de5e50..dc6e56ec 100644
--- a/src/Avatar/index.scss
+++ b/src/Avatar/index.scss
@@ -24,9 +24,3 @@
   width: 40px;
   font-size: var(--font-size-l);
 }
-
-.nds-avatar--l,
-.nds-avatar--xl {
-  @extend .nds-avatar--m;
-}
-

From e2461ed73454f2e2bdbc4fd7b4948928c1b84fc9 Mon Sep 17 00:00:00 2001
From: Christian Szablewski-Paz <christian.szablewski-paz@narmitech.com>
Date: Wed, 27 Nov 2024 13:46:23 -0500
Subject: [PATCH 15/16] call rem() for height

---
 src/Avatar/index.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Avatar/index.scss b/src/Avatar/index.scss
index dc6e56ec..0f1b3ac4 100644
--- a/src/Avatar/index.scss
+++ b/src/Avatar/index.scss
@@ -9,18 +9,18 @@
 }
 
 .nds-avatar--xs {
-  height: 24px;
+  height: rem(24px);
   width: 24px;
   font-size: var(--font-size-s);
 }
 
 .nds-avatar--s {
-  height: 32px;
+  height: rem(32px);
   width: 32px;
 }
 
 .nds-avatar--m {
-  height: 40px;
+  height: rem(40px);
   width: 40px;
   font-size: var(--font-size-l);
 }

From 13ba4636ccfe4d75e65c7ed6d39a3d87c0c030e3 Mon Sep 17 00:00:00 2001
From: Christian Szablewski-Paz <christian.szablewski-paz@narmitech.com>
Date: Wed, 27 Nov 2024 13:46:49 -0500
Subject: [PATCH 16/16] call rem for width

---
 src/Avatar/index.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Avatar/index.scss b/src/Avatar/index.scss
index 0f1b3ac4..e642f685 100644
--- a/src/Avatar/index.scss
+++ b/src/Avatar/index.scss
@@ -10,17 +10,17 @@
 
 .nds-avatar--xs {
   height: rem(24px);
-  width: 24px;
+  width: rem(24px);
   font-size: var(--font-size-s);
 }
 
 .nds-avatar--s {
   height: rem(32px);
-  width: 32px;
+  width: rem(32px);
 }
 
 .nds-avatar--m {
   height: rem(40px);
-  width: 40px;
+  width: rem(40px);
   font-size: var(--font-size-l);
 }