From 24c9db588385e9ddb2b41234b27de49f5dcf32fb Mon Sep 17 00:00:00 2001
From: Harsh Shukla <125105825+PrgrmrHarshShukla@users.noreply.github.com>
Date: Tue, 25 Jul 2023 01:28:30 +0530
Subject: [PATCH] Part of #18714 for 2 files in
 ui\components\component-library\avatar-icon (#20038)

---
 .../component-library/avatar-icon/avatar-icon.js       |  7 +++----
 .../avatar-icon/avatar-icon.stories.js                 | 10 +++++-----
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/ui/components/component-library/avatar-icon/avatar-icon.js b/ui/components/component-library/avatar-icon/avatar-icon.js
index d3ce05f16..69c6ac57d 100644
--- a/ui/components/component-library/avatar-icon/avatar-icon.js
+++ b/ui/components/component-library/avatar-icon/avatar-icon.js
@@ -4,16 +4,15 @@ import classnames from 'classnames';
 import {
   BorderColor,
   Size,
-  DISPLAY,
   AlignItems,
   JustifyContent,
   BackgroundColor,
   IconColor,
   TextColor,
+  Display,
 } from '../../../helpers/constants/design-system';
 
-import Box from '../../ui/box/box';
-
+import { Box } from '../box';
 import { IconName, Icon } from '../icon';
 import { AvatarBase } from '../avatar-base';
 
@@ -35,7 +34,7 @@ export const AvatarIcon = React.forwardRef(
     <AvatarBase
       ref={ref}
       size={size}
-      display={DISPLAY.FLEX}
+      display={Display.Flex}
       alignItems={AlignItems.center}
       justifyContent={JustifyContent.center}
       color={color}
diff --git a/ui/components/component-library/avatar-icon/avatar-icon.stories.js b/ui/components/component-library/avatar-icon/avatar-icon.stories.js
index a32e8f284..ea5ab9955 100644
--- a/ui/components/component-library/avatar-icon/avatar-icon.stories.js
+++ b/ui/components/component-library/avatar-icon/avatar-icon.stories.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import {
   Size,
-  DISPLAY,
   AlignItems,
   BackgroundColor,
   IconColor,
   Color,
+  Display,
 } from '../../../helpers/constants/design-system';
 
-import Box from '../../ui/box/box';
+import { Box } from '../box';
 
 import { IconName } from '..';
 
@@ -95,7 +95,7 @@ export const DefaultStory = Template.bind({});
 DefaultStory.storyName = 'Default';
 
 export const SizeStory = (args) => (
-  <Box display={DISPLAY.FLEX} alignItems={AlignItems.baseline} gap={1}>
+  <Box display={Display.Flex} alignItems={AlignItems.baseline} gap={1}>
     <AvatarIcon {...args} size={Size.XS} />
     <AvatarIcon {...args} size={Size.SM} />
     <AvatarIcon {...args} size={Size.MD} />
@@ -110,7 +110,7 @@ SizeStory.args = {
 };
 
 export const IconNameStory = (args) => (
-  <Box display={DISPLAY.FLEX} gap={1}>
+  <Box display={Display.Flex} gap={1}>
     <AvatarIcon
       color={IconColor.primaryDefault}
       backgroundColor={BackgroundColor.primaryMuted}
@@ -147,7 +147,7 @@ export const IconNameStory = (args) => (
 IconNameStory.storyName = 'Icon Name';
 
 export const ColorAndBackgroundColor = (args) => (
-  <Box display={DISPLAY.FLEX} gap={1}>
+  <Box display={Display.Flex} gap={1}>
     <AvatarIcon
       color={IconColor.primaryDefault}
       backgroundColor={BackgroundColor.primaryMuted}