From 0723ccf0c7f9e960dcd7f43abaa9b7e049a6aab9 Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Mon, 15 Apr 2024 08:46:59 -0400
Subject: [PATCH 01/25] NotificationMarker docs starter

---
 .../src/content/docs/inputwithdecorations.mdx |  2 +-
 .../src/content/docs/notificationmarker.mdx   | 46 ++++++++++++++++
 examples/NotificationMarker.main.css          |  6 ++
 examples/NotificationMarker.main.jsx          | 18 ++++++
 examples/NotificationMarker.statuses.jsx      | 55 +++++++++++++++++++
 examples/index.tsx                            |  8 +++
 6 files changed, 134 insertions(+), 1 deletion(-)
 create mode 100644 apps/website/src/content/docs/notificationmarker.mdx
 create mode 100644 examples/NotificationMarker.main.css
 create mode 100644 examples/NotificationMarker.main.jsx
 create mode 100644 examples/NotificationMarker.statuses.jsx

diff --git a/apps/website/src/content/docs/inputwithdecorations.mdx b/apps/website/src/content/docs/inputwithdecorations.mdx
index 6ae0e8277e8..509fdd07b79 100644
--- a/apps/website/src/content/docs/inputwithdecorations.mdx
+++ b/apps/website/src/content/docs/inputwithdecorations.mdx
@@ -18,7 +18,7 @@ Add icons, buttons and other various subcomponents to input.
 
 ### Status
 
-InputWithDecorations can have positive, warning and negative status.
+InputWithDecorations can have positive, warning, or negative statuses.
 
 <LiveExample src='InputWithDecorations.status.jsx'>
   <AllExamples.InputWithDecorationsStatusExample client:load />
diff --git a/apps/website/src/content/docs/notificationmarker.mdx b/apps/website/src/content/docs/notificationmarker.mdx
new file mode 100644
index 00000000000..d9e4bb0c949
--- /dev/null
+++ b/apps/website/src/content/docs/notificationmarker.mdx
@@ -0,0 +1,46 @@
+---
+title: NotificationMarker
+description: A notification indicator
+propsPath: '@itwin/itwinui-react/esm/core/NotificationMarker/NotificationMarker.d.ts'
+thumbnail:
+---
+
+<p>{frontmatter.description}</p>
+
+<LiveExample src='NotificationMarker.main.jsx' truncate={false}>
+  <AllExamples.NotificationMarkerMainExample client:load />
+</LiveExample>
+
+## Appearance
+
+Each type of error page should be designed based on what you wish to tell the user about that error. First off, the error code, along with a short description, should be displayed so the user can identify the source of the problem. Then, informative text, accompanied with images that can be informative as well and/or decorative to aid the user moving onto the next step. The error illustration should take up no more than ⅓ of the screen width.
+
+## Usage
+
+Error pages come with their own error and should not be mixed and matched to avoid confusion from one error to another. Here are a few of the error pages you can use.
+
+### Status
+
+`NotificationMarker`s can have `primary` (default), `positive`, `warning`, `negative`, or `white` statuses. The `white` status is used on colored backgrounds, such as the high visibility or the call-to-action button.
+
+<LiveExample src='NonIdealState.unauthorized.jsx' truncate={false}>
+  <AllExamples.NonIdealStateUnauthorizedExample client:load />
+</LiveExample>
+
+### Controlled
+
+The `enabled` prop can be used to programatically show or hide the notification marker.
+
+### Pulsing
+
+To give a higher important to the notification, you can use the `pulsing` prop to show a pulse effect around the marker.
+
+**NOTE**: This prop should be used sparingly as it can be distracting to the user.
+
+<LiveExample src='NonIdealState.unauthorized.jsx' truncate={false}>
+  <AllExamples.NonIdealStateUnauthorizedExample client:load />
+</LiveExample>
+
+## Props
+
+<PropsTable path={frontmatter.propsPath} />
diff --git a/examples/NotificationMarker.main.css b/examples/NotificationMarker.main.css
new file mode 100644
index 00000000000..ecb5e2b379b
--- /dev/null
+++ b/examples/NotificationMarker.main.css
@@ -0,0 +1,6 @@
+.demo-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 1rem;
+}
diff --git a/examples/NotificationMarker.main.jsx b/examples/NotificationMarker.main.jsx
new file mode 100644
index 00000000000..552b70b4a2f
--- /dev/null
+++ b/examples/NotificationMarker.main.jsx
@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { NotificationMarker } from '@itwin/itwinui-react';
+import { SvgNotification } from '@itwin/itwinui-icons-react';
+
+export default () => {
+  return (
+    <div className='demo-container'>
+      <NotificationMarker status='primary'>
+        <SvgNotification width={16} height={16} fill='currentColor' />
+      </NotificationMarker>
+      <NotificationMarker status='primary'>Normal</NotificationMarker>
+    </div>
+  );
+};
diff --git a/examples/NotificationMarker.statuses.jsx b/examples/NotificationMarker.statuses.jsx
new file mode 100644
index 00000000000..eb34a3da9f6
--- /dev/null
+++ b/examples/NotificationMarker.statuses.jsx
@@ -0,0 +1,55 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { NotificationMarker } from '@itwin/itwinui-react';
+import { SvgNotification } from '@itwin/itwinui-icons-react';
+
+export default () => {
+  return (
+    <div className='demo-container'>
+      <NotificationMarker status='primary'>Primary</NotificationMarker>
+      <IconButton styleType='borderless'>
+        <NotificationMarker status='primary'>
+          <SvgNotification />
+        </NotificationMarker>
+      </IconButton>
+
+      <NotificationMarker status='positive'>Positive</NotificationMarker>
+      <IconButton styleType='borderless'>
+        <NotificationMarker status='positive'>
+          <SvgNotification />
+        </NotificationMarker>
+      </IconButton>
+
+      <NotificationMarker status='warning'>Warning</NotificationMarker>
+      <IconButton styleType='borderless'>
+        <NotificationMarker status='warning'>
+          <SvgNotification />
+        </NotificationMarker>
+      </IconButton>
+
+      <NotificationMarker status='negative'>Negative</NotificationMarker>
+      <IconButton styleType='borderless'>
+        <NotificationMarker status='negative'>
+          <SvgNotification />
+        </NotificationMarker>
+      </IconButton>
+
+      <NotificationMarker status='white'>White</NotificationMarker>
+      <div style={{ display: 'flex', columnGap: '10px' }}>
+        <IconButton styleType='high-visibility'>
+          <NotificationMarker status='white'>
+            <SvgNotification />
+          </NotificationMarker>
+        </IconButton>
+        <IconButton styleType='cta'>
+          <NotificationMarker status='white'>
+            <SvgNotification />
+          </NotificationMarker>
+        </IconButton>
+      </div>
+    </div>
+  );
+};
diff --git a/examples/index.tsx b/examples/index.tsx
index bb7264f7a7d..e9534928fbb 100644
--- a/examples/index.tsx
+++ b/examples/index.tsx
@@ -817,6 +817,14 @@ export { NonIdealStateErrorExample };
 
 // ----------------------------------------------------------------------------
 
+import { default as NotificationMarkerMainExampleRaw } from './NotificationMarker.main';
+const NotificationMarkerMainExample = withThemeProvider(
+  NotificationMarkerMainExampleRaw,
+);
+export { NotificationMarkerMainExample };
+
+// ----------------------------------------------------------------------------
+
 import { default as OverlayMainExampleRaw } from './Overlay.main';
 const OverlayMainExample = withThemeProvider(OverlayMainExampleRaw);
 export { OverlayMainExample };

From 7a1ffbbc9f5548575ecd5ee01c8275884ab8a452 Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Mon, 15 Apr 2024 10:41:39 -0400
Subject: [PATCH 02/25] Move styles to css file

---
 apps/react-workshop/src/NotificationMarker.stories.tsx | 2 +-
 examples/NotificationMarker.main.css                   | 4 ++++
 examples/NotificationMarker.main.jsx                   | 2 +-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/react-workshop/src/NotificationMarker.stories.tsx b/apps/react-workshop/src/NotificationMarker.stories.tsx
index 85487303f89..d2fccf15be5 100644
--- a/apps/react-workshop/src/NotificationMarker.stories.tsx
+++ b/apps/react-workshop/src/NotificationMarker.stories.tsx
@@ -33,7 +33,7 @@ export const Basic = () => {
   return (
     <>
       <NotificationMarker status='primary'>
-        <SvgNotification width={16} height={16} fill='currentColor' />
+        <SvgNotification fill='currentColor' />
       </NotificationMarker>
       <NotificationMarker status='primary'>Normal</NotificationMarker>
     </>
diff --git a/examples/NotificationMarker.main.css b/examples/NotificationMarker.main.css
index ecb5e2b379b..fe05c2a1a63 100644
--- a/examples/NotificationMarker.main.css
+++ b/examples/NotificationMarker.main.css
@@ -4,3 +4,7 @@
   align-items: center;
   row-gap: 1rem;
 }
+
+.icon {
+  fill: currentColor;
+}
diff --git a/examples/NotificationMarker.main.jsx b/examples/NotificationMarker.main.jsx
index 552b70b4a2f..ae8188831b4 100644
--- a/examples/NotificationMarker.main.jsx
+++ b/examples/NotificationMarker.main.jsx
@@ -10,7 +10,7 @@ export default () => {
   return (
     <div className='demo-container'>
       <NotificationMarker status='primary'>
-        <SvgNotification width={16} height={16} fill='currentColor' />
+        <SvgNotification className='icon' />
       </NotificationMarker>
       <NotificationMarker status='primary'>Normal</NotificationMarker>
     </div>

From 8978d378fb1e5086ab788565a141b73f99e11ea3 Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Mon, 15 Apr 2024 10:47:50 -0400
Subject: [PATCH 03/25] Examples for statuses

---
 apps/website/src/content/docs/notificationmarker.mdx | 6 +++---
 examples/NotificationMarker.statuses.css             | 8 ++++++++
 examples/NotificationMarker.statuses.jsx             | 2 +-
 examples/index.tsx                                   | 6 ++++++
 4 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 examples/NotificationMarker.statuses.css

diff --git a/apps/website/src/content/docs/notificationmarker.mdx b/apps/website/src/content/docs/notificationmarker.mdx
index d9e4bb0c949..f6fb895fd49 100644
--- a/apps/website/src/content/docs/notificationmarker.mdx
+++ b/apps/website/src/content/docs/notificationmarker.mdx
@@ -7,7 +7,7 @@ thumbnail:
 
 <p>{frontmatter.description}</p>
 
-<LiveExample src='NotificationMarker.main.jsx' truncate={false}>
+<LiveExample src='NotificationMarker.main.jsx'>
   <AllExamples.NotificationMarkerMainExample client:load />
 </LiveExample>
 
@@ -23,8 +23,8 @@ Error pages come with their own error and should not be mixed and matched to avo
 
 `NotificationMarker`s can have `primary` (default), `positive`, `warning`, `negative`, or `white` statuses. The `white` status is used on colored backgrounds, such as the high visibility or the call-to-action button.
 
-<LiveExample src='NonIdealState.unauthorized.jsx' truncate={false}>
-  <AllExamples.NonIdealStateUnauthorizedExample client:load />
+<LiveExample src='NotificationMarker.statuses.jsx'>
+  <AllExamples.NotificationMarkerStatusesExample client:load />
 </LiveExample>
 
 ### Controlled
diff --git a/examples/NotificationMarker.statuses.css b/examples/NotificationMarker.statuses.css
new file mode 100644
index 00000000000..ae3cf0b4230
--- /dev/null
+++ b/examples/NotificationMarker.statuses.css
@@ -0,0 +1,8 @@
+.demo-container {
+  display: grid;
+  place-items: start;
+  row-gap: 20px;
+  column-gap: 30px;
+  grid-template-columns: fit-content(1px) auto;
+  align-items: center;
+}
diff --git a/examples/NotificationMarker.statuses.jsx b/examples/NotificationMarker.statuses.jsx
index eb34a3da9f6..35ca9b9ff5d 100644
--- a/examples/NotificationMarker.statuses.jsx
+++ b/examples/NotificationMarker.statuses.jsx
@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { NotificationMarker } from '@itwin/itwinui-react';
+import { NotificationMarker, IconButton } from '@itwin/itwinui-react';
 import { SvgNotification } from '@itwin/itwinui-icons-react';
 
 export default () => {
diff --git a/examples/index.tsx b/examples/index.tsx
index e9534928fbb..b9ef1319550 100644
--- a/examples/index.tsx
+++ b/examples/index.tsx
@@ -823,6 +823,12 @@ const NotificationMarkerMainExample = withThemeProvider(
 );
 export { NotificationMarkerMainExample };
 
+import { default as NotificationMarkerStatusesExampleRaw } from './NotificationMarker.statuses';
+const NotificationMarkerStatusesExample = withThemeProvider(
+  NotificationMarkerStatusesExampleRaw,
+);
+export { NotificationMarkerStatusesExample };
+
 // ----------------------------------------------------------------------------
 
 import { default as OverlayMainExampleRaw } from './Overlay.main';

From 8ad834d19bcd5b6db38f4617130edebc30c089df Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Mon, 15 Apr 2024 10:54:48 -0400
Subject: [PATCH 04/25] Example for pulsing

---
 .../src/content/docs/notificationmarker.mdx   |  6 ++---
 examples/NotificationMarker.pulsing.css       | 10 ++++++++
 examples/NotificationMarker.pulsing.jsx       | 23 +++++++++++++++++++
 examples/index.tsx                            |  6 +++++
 4 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 examples/NotificationMarker.pulsing.css
 create mode 100644 examples/NotificationMarker.pulsing.jsx

diff --git a/apps/website/src/content/docs/notificationmarker.mdx b/apps/website/src/content/docs/notificationmarker.mdx
index f6fb895fd49..386bb52917a 100644
--- a/apps/website/src/content/docs/notificationmarker.mdx
+++ b/apps/website/src/content/docs/notificationmarker.mdx
@@ -33,12 +33,12 @@ The `enabled` prop can be used to programatically show or hide the notification
 
 ### Pulsing
 
-To give a higher important to the notification, you can use the `pulsing` prop to show a pulse effect around the marker.
+To give a higher importantance to the notification, you can use the `pulsing` prop to show a pulse effect around the marker.
 
 **NOTE**: This prop should be used sparingly as it can be distracting to the user.
 
-<LiveExample src='NonIdealState.unauthorized.jsx' truncate={false}>
-  <AllExamples.NonIdealStateUnauthorizedExample client:load />
+<LiveExample src='NotificationMarker.pulsing.jsx'>
+  <AllExamples.NotificationMarkerPulsingExample client:load />
 </LiveExample>
 
 ## Props
diff --git a/examples/NotificationMarker.pulsing.css b/examples/NotificationMarker.pulsing.css
new file mode 100644
index 00000000000..fe05c2a1a63
--- /dev/null
+++ b/examples/NotificationMarker.pulsing.css
@@ -0,0 +1,10 @@
+.demo-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 1rem;
+}
+
+.icon {
+  fill: currentColor;
+}
diff --git a/examples/NotificationMarker.pulsing.jsx b/examples/NotificationMarker.pulsing.jsx
new file mode 100644
index 00000000000..1ea6c14be7a
--- /dev/null
+++ b/examples/NotificationMarker.pulsing.jsx
@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { NotificationMarker, IconButton, Text } from '@itwin/itwinui-react';
+import { SvgNotification } from '@itwin/itwinui-icons-react';
+
+export default () => {
+  return (
+    <div className='demo-container'>
+      <IconButton styleType='borderless'>
+        <NotificationMarker status='negative' pulsing>
+          <SvgNotification />
+        </NotificationMarker>
+      </IconButton>
+
+      <NotificationMarker status='negative' pulsing>
+        <Text style={{ fontWeight: '700' }}>URGENT</Text>
+      </NotificationMarker>
+    </div>
+  );
+};
diff --git a/examples/index.tsx b/examples/index.tsx
index b9ef1319550..e64f4990e38 100644
--- a/examples/index.tsx
+++ b/examples/index.tsx
@@ -829,6 +829,12 @@ const NotificationMarkerStatusesExample = withThemeProvider(
 );
 export { NotificationMarkerStatusesExample };
 
+import { default as NotificationMarkerPulsingExampleRaw } from './NotificationMarker.pulsing';
+const NotificationMarkerPulsingExample = withThemeProvider(
+  NotificationMarkerPulsingExampleRaw,
+);
+export { NotificationMarkerPulsingExample };
+
 // ----------------------------------------------------------------------------
 
 import { default as OverlayMainExampleRaw } from './Overlay.main';

From 45aacdb2f661b5031e193580e0178e63b6f0caa6 Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Mon, 15 Apr 2024 12:16:31 -0400
Subject: [PATCH 05/25] Added links

---
 apps/website/src/content/docs/notificationmarker.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/website/src/content/docs/notificationmarker.mdx b/apps/website/src/content/docs/notificationmarker.mdx
index 386bb52917a..4584465ecff 100644
--- a/apps/website/src/content/docs/notificationmarker.mdx
+++ b/apps/website/src/content/docs/notificationmarker.mdx
@@ -21,7 +21,7 @@ Error pages come with their own error and should not be mixed and matched to avo
 
 ### Status
 
-`NotificationMarker`s can have `primary` (default), `positive`, `warning`, `negative`, or `white` statuses. The `white` status is used on colored backgrounds, such as the high visibility or the call-to-action button.
+`NotificationMarker`s can have `primary` (default), `positive`, `warning`, `negative`, or `white` statuses. The `white` status is used on colored backgrounds, such as the [high visibility](button#high-visibility) or the [call-to-action](button#call-to-action) button.
 
 <LiveExample src='NotificationMarker.statuses.jsx'>
   <AllExamples.NotificationMarkerStatusesExample client:load />

From 18b4e0881fd8a2f77383a047cd29bc4d1019457f Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Mon, 15 Apr 2024 12:23:12 -0400
Subject: [PATCH 06/25] Remove unnecessary parts

---
 apps/website/src/content/docs/anchor.mdx             | 2 +-
 apps/website/src/content/docs/notificationmarker.mdx | 8 +-------
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/apps/website/src/content/docs/anchor.mdx b/apps/website/src/content/docs/anchor.mdx
index 208520cda5b..a242e2b28f6 100644
--- a/apps/website/src/content/docs/anchor.mdx
+++ b/apps/website/src/content/docs/anchor.mdx
@@ -55,7 +55,7 @@ If you do ultimately decide based on your research that it is beneficial to open
   <AllExamples.AnchorExternalExample client:load />
 </LiveExample>
 
-**Note**: Not all external links should open in a new tab. The `isExternal` prop is not necessary for external links that open in the same tab.
+**NOTE**: Not all external links should open in a new tab. The `isExternal` prop is not necessary for external links that open in the same tab.
 
 ### Underlines
 
diff --git a/apps/website/src/content/docs/notificationmarker.mdx b/apps/website/src/content/docs/notificationmarker.mdx
index 4584465ecff..28f10c73016 100644
--- a/apps/website/src/content/docs/notificationmarker.mdx
+++ b/apps/website/src/content/docs/notificationmarker.mdx
@@ -1,6 +1,6 @@
 ---
 title: NotificationMarker
-description: A notification indicator
+description: Shows a notification marker at the top right of the component.
 propsPath: '@itwin/itwinui-react/esm/core/NotificationMarker/NotificationMarker.d.ts'
 thumbnail:
 ---
@@ -11,14 +11,8 @@ thumbnail:
   <AllExamples.NotificationMarkerMainExample client:load />
 </LiveExample>
 
-## Appearance
-
-Each type of error page should be designed based on what you wish to tell the user about that error. First off, the error code, along with a short description, should be displayed so the user can identify the source of the problem. Then, informative text, accompanied with images that can be informative as well and/or decorative to aid the user moving onto the next step. The error illustration should take up no more than ⅓ of the screen width.
-
 ## Usage
 
-Error pages come with their own error and should not be mixed and matched to avoid confusion from one error to another. Here are a few of the error pages you can use.
-
 ### Status
 
 `NotificationMarker`s can have `primary` (default), `positive`, `warning`, `negative`, or `white` statuses. The `white` status is used on colored backgrounds, such as the [high visibility](button#high-visibility) or the [call-to-action](button#call-to-action) button.

From b18df24feeafd065f1adb973dd80c06ae411bb03 Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Mon, 15 Apr 2024 12:26:23 -0400
Subject: [PATCH 07/25] nit

---
 apps/website/src/content/docs/notificationmarker.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/website/src/content/docs/notificationmarker.mdx b/apps/website/src/content/docs/notificationmarker.mdx
index 28f10c73016..9d420931337 100644
--- a/apps/website/src/content/docs/notificationmarker.mdx
+++ b/apps/website/src/content/docs/notificationmarker.mdx
@@ -1,6 +1,6 @@
 ---
 title: NotificationMarker
-description: Shows a notification marker at the top right of the component.
+description: Shows a notification marker dot at the top right of the component.
 propsPath: '@itwin/itwinui-react/esm/core/NotificationMarker/NotificationMarker.d.ts'
 thumbnail:
 ---
@@ -15,7 +15,7 @@ thumbnail:
 
 ### Status
 
-`NotificationMarker`s can have `primary` (default), `positive`, `warning`, `negative`, or `white` statuses. The `white` status is used on colored backgrounds, such as the [high visibility](button#high-visibility) or the [call-to-action](button#call-to-action) button.
+`NotificationMarker`s can have `primary` (default), `positive`, `warning`, `negative`, or `white` statuses. The `white` status is used on colored backgrounds, such as when using it in the [high visibility](button#high-visibility) or the [call-to-action](button#call-to-action) buttons.
 
 <LiveExample src='NotificationMarker.statuses.jsx'>
   <AllExamples.NotificationMarkerStatusesExample client:load />

From fc036834694f7da1602d4d952ac050ee4ec1015e Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Tue, 16 Apr 2024 11:46:43 -0400
Subject: [PATCH 08/25] Added labels to buttons

---
 .../src/NotificationMarker.stories.tsx           | 16 ++++++++--------
 examples/NotificationMarker.pulsing.jsx          |  2 +-
 examples/NotificationMarker.statuses.jsx         | 12 ++++++------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/react-workshop/src/NotificationMarker.stories.tsx b/apps/react-workshop/src/NotificationMarker.stories.tsx
index d2fccf15be5..1d7e32cefa7 100644
--- a/apps/react-workshop/src/NotificationMarker.stories.tsx
+++ b/apps/react-workshop/src/NotificationMarker.stories.tsx
@@ -43,7 +43,7 @@ export const Basic = () => {
 export const WithButtons = () => {
   return (
     <>
-      <IconButton styleType='borderless'>
+      <IconButton label='Notifications' styleType='borderless'>
         <NotificationMarker status='primary'>
           <SvgNotification />
         </NotificationMarker>
@@ -59,7 +59,7 @@ export const WithButtons = () => {
 export const Pulsing = () => {
   return (
     <>
-      <IconButton styleType='borderless'>
+      <IconButton label='Notifications' styleType='borderless'>
         <NotificationMarker status='negative' pulsing>
           <SvgNotification />
         </NotificationMarker>
@@ -76,28 +76,28 @@ export const Status = () => {
   return (
     <>
       <NotificationMarker status='primary'>Primary</NotificationMarker>
-      <IconButton styleType='borderless'>
+      <IconButton label='Notifications' styleType='borderless'>
         <NotificationMarker status='primary'>
           <SvgNotification />
         </NotificationMarker>
       </IconButton>
 
       <NotificationMarker status='positive'>Positive</NotificationMarker>
-      <IconButton styleType='borderless'>
+      <IconButton label='Notifications' styleType='borderless'>
         <NotificationMarker status='positive'>
           <SvgNotification />
         </NotificationMarker>
       </IconButton>
 
       <NotificationMarker status='warning'>Warning</NotificationMarker>
-      <IconButton styleType='borderless'>
+      <IconButton label='Notifications' styleType='borderless'>
         <NotificationMarker status='warning'>
           <SvgNotification />
         </NotificationMarker>
       </IconButton>
 
       <NotificationMarker status='negative'>Negative</NotificationMarker>
-      <IconButton styleType='borderless'>
+      <IconButton label='Notifications' styleType='borderless'>
         <NotificationMarker status='negative'>
           <SvgNotification />
         </NotificationMarker>
@@ -105,12 +105,12 @@ export const Status = () => {
 
       <NotificationMarker status='white'>White</NotificationMarker>
       <div style={{ display: 'flex', columnGap: '10px' }}>
-        <IconButton styleType='high-visibility'>
+        <IconButton label='Notifications' styleType='high-visibility'>
           <NotificationMarker status='white'>
             <SvgNotification />
           </NotificationMarker>
         </IconButton>
-        <IconButton styleType='cta'>
+        <IconButton label='Notifications' styleType='cta'>
           <NotificationMarker status='white'>
             <SvgNotification />
           </NotificationMarker>
diff --git a/examples/NotificationMarker.pulsing.jsx b/examples/NotificationMarker.pulsing.jsx
index 1ea6c14be7a..724f2af2c39 100644
--- a/examples/NotificationMarker.pulsing.jsx
+++ b/examples/NotificationMarker.pulsing.jsx
@@ -9,7 +9,7 @@ import { SvgNotification } from '@itwin/itwinui-icons-react';
 export default () => {
   return (
     <div className='demo-container'>
-      <IconButton styleType='borderless'>
+      <IconButton label='Notifications' styleType='borderless'>
         <NotificationMarker status='negative' pulsing>
           <SvgNotification />
         </NotificationMarker>
diff --git a/examples/NotificationMarker.statuses.jsx b/examples/NotificationMarker.statuses.jsx
index 35ca9b9ff5d..9629ed6df6c 100644
--- a/examples/NotificationMarker.statuses.jsx
+++ b/examples/NotificationMarker.statuses.jsx
@@ -10,28 +10,28 @@ export default () => {
   return (
     <div className='demo-container'>
       <NotificationMarker status='primary'>Primary</NotificationMarker>
-      <IconButton styleType='borderless'>
+      <IconButton label='Notifications' styleType='borderless'>
         <NotificationMarker status='primary'>
           <SvgNotification />
         </NotificationMarker>
       </IconButton>
 
       <NotificationMarker status='positive'>Positive</NotificationMarker>
-      <IconButton styleType='borderless'>
+      <IconButton label='Notifications' styleType='borderless'>
         <NotificationMarker status='positive'>
           <SvgNotification />
         </NotificationMarker>
       </IconButton>
 
       <NotificationMarker status='warning'>Warning</NotificationMarker>
-      <IconButton styleType='borderless'>
+      <IconButton label='Notifications' styleType='borderless'>
         <NotificationMarker status='warning'>
           <SvgNotification />
         </NotificationMarker>
       </IconButton>
 
       <NotificationMarker status='negative'>Negative</NotificationMarker>
-      <IconButton styleType='borderless'>
+      <IconButton label='Notifications' styleType='borderless'>
         <NotificationMarker status='negative'>
           <SvgNotification />
         </NotificationMarker>
@@ -39,12 +39,12 @@ export default () => {
 
       <NotificationMarker status='white'>White</NotificationMarker>
       <div style={{ display: 'flex', columnGap: '10px' }}>
-        <IconButton styleType='high-visibility'>
+        <IconButton label='Notifications' styleType='high-visibility'>
           <NotificationMarker status='white'>
             <SvgNotification />
           </NotificationMarker>
         </IconButton>
-        <IconButton styleType='cta'>
+        <IconButton label='Notifications' styleType='cta'>
           <NotificationMarker status='white'>
             <SvgNotification />
           </NotificationMarker>

From 5301a7f32352c0b22299664102bf1a712f9ebe53 Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Tue, 16 Apr 2024 11:56:33 -0400
Subject: [PATCH 09/25] Removed `propsPath` from frontmatter

---
 apps/website/src/content/docs/notificationmarker.mdx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/website/src/content/docs/notificationmarker.mdx b/apps/website/src/content/docs/notificationmarker.mdx
index 9d420931337..4aad6cdfcf4 100644
--- a/apps/website/src/content/docs/notificationmarker.mdx
+++ b/apps/website/src/content/docs/notificationmarker.mdx
@@ -1,7 +1,6 @@
 ---
 title: NotificationMarker
 description: Shows a notification marker dot at the top right of the component.
-propsPath: '@itwin/itwinui-react/esm/core/NotificationMarker/NotificationMarker.d.ts'
 thumbnail:
 ---
 
@@ -37,4 +36,4 @@ To give a higher importantance to the notification, you can use the `pulsing` pr
 
 ## Props
 
-<PropsTable path={frontmatter.propsPath} />
+<PropsTable path={'@itwin/itwinui-react/esm/core/NotificationMarker/NotificationMarker.d.ts'} />

From 304aea78171c3ef1ccac5ddc894c604957457739 Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Wed, 17 Apr 2024 09:55:11 -0400
Subject: [PATCH 10/25] Make note to sentence case

---
 apps/website/src/content/docs/anchor.mdx             | 2 +-
 apps/website/src/content/docs/notificationmarker.mdx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/website/src/content/docs/anchor.mdx b/apps/website/src/content/docs/anchor.mdx
index a242e2b28f6..208520cda5b 100644
--- a/apps/website/src/content/docs/anchor.mdx
+++ b/apps/website/src/content/docs/anchor.mdx
@@ -55,7 +55,7 @@ If you do ultimately decide based on your research that it is beneficial to open
   <AllExamples.AnchorExternalExample client:load />
 </LiveExample>
 
-**NOTE**: Not all external links should open in a new tab. The `isExternal` prop is not necessary for external links that open in the same tab.
+**Note**: Not all external links should open in a new tab. The `isExternal` prop is not necessary for external links that open in the same tab.
 
 ### Underlines
 
diff --git a/apps/website/src/content/docs/notificationmarker.mdx b/apps/website/src/content/docs/notificationmarker.mdx
index 4aad6cdfcf4..93fe2c9583a 100644
--- a/apps/website/src/content/docs/notificationmarker.mdx
+++ b/apps/website/src/content/docs/notificationmarker.mdx
@@ -28,7 +28,7 @@ The `enabled` prop can be used to programatically show or hide the notification
 
 To give a higher importantance to the notification, you can use the `pulsing` prop to show a pulse effect around the marker.
 
-**NOTE**: This prop should be used sparingly as it can be distracting to the user.
+**Note**: This prop should be used sparingly as it can be distracting to the user.
 
 <LiveExample src='NotificationMarker.pulsing.jsx'>
   <AllExamples.NotificationMarkerPulsingExample client:load />

From 237b7df71283e6a793d92872bf08c47faf4ca31e Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Wed, 17 Apr 2024 09:56:55 -0400
Subject: [PATCH 11/25] Show statuses as a list

---
 apps/website/src/content/docs/notificationmarker.mdx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/website/src/content/docs/notificationmarker.mdx b/apps/website/src/content/docs/notificationmarker.mdx
index 93fe2c9583a..5b763265b0e 100644
--- a/apps/website/src/content/docs/notificationmarker.mdx
+++ b/apps/website/src/content/docs/notificationmarker.mdx
@@ -14,12 +14,20 @@ thumbnail:
 
 ### Status
 
-`NotificationMarker`s can have `primary` (default), `positive`, `warning`, `negative`, or `white` statuses. The `white` status is used on colored backgrounds, such as when using it in the [high visibility](button#high-visibility) or the [call-to-action](button#call-to-action) buttons.
+`NotificationMarker`s can have the follow statuese:
+
+- `primary` (default),
+- `positive`
+- `warning`
+- `negative`
+- `white`
 
 <LiveExample src='NotificationMarker.statuses.jsx'>
   <AllExamples.NotificationMarkerStatusesExample client:load />
 </LiveExample>
 
+The `white` status is used on colored backgrounds, such as when using it in the [high visibility](button#high-visibility) or the [call-to-action](button#call-to-action) buttons.
+
 ### Controlled
 
 The `enabled` prop can be used to programatically show or hide the notification marker.

From ce0b2ede283f6fa1211793f3ae31e8beac34d572 Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Wed, 17 Apr 2024 10:07:09 -0400
Subject: [PATCH 12/25] Added TODO for thumbnail

---
 apps/website/src/content/docs/notificationmarker.mdx | 2 +-
 apps/website/src/content/docs/searchbox.mdx          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/website/src/content/docs/notificationmarker.mdx b/apps/website/src/content/docs/notificationmarker.mdx
index 5b763265b0e..2c8ae8fa435 100644
--- a/apps/website/src/content/docs/notificationmarker.mdx
+++ b/apps/website/src/content/docs/notificationmarker.mdx
@@ -1,7 +1,7 @@
 ---
 title: NotificationMarker
 description: Shows a notification marker dot at the top right of the component.
-thumbnail:
+thumbnail: #TODO
 ---
 
 <p>{frontmatter.description}</p>
diff --git a/apps/website/src/content/docs/searchbox.mdx b/apps/website/src/content/docs/searchbox.mdx
index 8c5233eb77f..55a7f7e4fc3 100644
--- a/apps/website/src/content/docs/searchbox.mdx
+++ b/apps/website/src/content/docs/searchbox.mdx
@@ -2,7 +2,7 @@
 title: SearchBox
 description: A search input component
 propsPath: '@itwin/itwinui-react/esm/core/SearchBox/SearchBox.d.ts'
-thumbnail:
+thumbnail: #TODO
 ---
 
 <p>{frontmatter.description}</p>

From ba9b4b951c044357765dd31cf875efca77a84924 Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Wed, 17 Apr 2024 10:14:58 -0400
Subject: [PATCH 13/25] Removed text examples

---
 .../src/NotificationMarker.stories.tsx            | 15 +++++----------
 examples/NotificationMarker.main.jsx              |  1 -
 examples/NotificationMarker.pulsing.jsx           |  4 ----
 examples/NotificationMarker.statuses.jsx          | 12 ++++++------
 4 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/apps/react-workshop/src/NotificationMarker.stories.tsx b/apps/react-workshop/src/NotificationMarker.stories.tsx
index 1d7e32cefa7..8657995d1b2 100644
--- a/apps/react-workshop/src/NotificationMarker.stories.tsx
+++ b/apps/react-workshop/src/NotificationMarker.stories.tsx
@@ -35,7 +35,6 @@ export const Basic = () => {
       <NotificationMarker status='primary'>
         <SvgNotification fill='currentColor' />
       </NotificationMarker>
-      <NotificationMarker status='primary'>Normal</NotificationMarker>
     </>
   );
 };
@@ -64,10 +63,6 @@ export const Pulsing = () => {
           <SvgNotification />
         </NotificationMarker>
       </IconButton>
-
-      <NotificationMarker status='negative' pulsing>
-        <Text style={{ fontWeight: '700' }}>URGENT</Text>
-      </NotificationMarker>
     </>
   );
 };
@@ -75,35 +70,35 @@ export const Pulsing = () => {
 export const Status = () => {
   return (
     <>
-      <NotificationMarker status='primary'>Primary</NotificationMarker>
+      <Text>Primary</Text>
       <IconButton label='Notifications' styleType='borderless'>
         <NotificationMarker status='primary'>
           <SvgNotification />
         </NotificationMarker>
       </IconButton>
 
-      <NotificationMarker status='positive'>Positive</NotificationMarker>
+      <Text>Positive</Text>
       <IconButton label='Notifications' styleType='borderless'>
         <NotificationMarker status='positive'>
           <SvgNotification />
         </NotificationMarker>
       </IconButton>
 
-      <NotificationMarker status='warning'>Warning</NotificationMarker>
+      <Text>Warning</Text>
       <IconButton label='Notifications' styleType='borderless'>
         <NotificationMarker status='warning'>
           <SvgNotification />
         </NotificationMarker>
       </IconButton>
 
-      <NotificationMarker status='negative'>Negative</NotificationMarker>
+      <Text>Negative</Text>
       <IconButton label='Notifications' styleType='borderless'>
         <NotificationMarker status='negative'>
           <SvgNotification />
         </NotificationMarker>
       </IconButton>
 
-      <NotificationMarker status='white'>White</NotificationMarker>
+      <Text>White</Text>
       <div style={{ display: 'flex', columnGap: '10px' }}>
         <IconButton label='Notifications' styleType='high-visibility'>
           <NotificationMarker status='white'>
diff --git a/examples/NotificationMarker.main.jsx b/examples/NotificationMarker.main.jsx
index ae8188831b4..8f2ac705f27 100644
--- a/examples/NotificationMarker.main.jsx
+++ b/examples/NotificationMarker.main.jsx
@@ -12,7 +12,6 @@ export default () => {
       <NotificationMarker status='primary'>
         <SvgNotification className='icon' />
       </NotificationMarker>
-      <NotificationMarker status='primary'>Normal</NotificationMarker>
     </div>
   );
 };
diff --git a/examples/NotificationMarker.pulsing.jsx b/examples/NotificationMarker.pulsing.jsx
index 724f2af2c39..e72df2fea59 100644
--- a/examples/NotificationMarker.pulsing.jsx
+++ b/examples/NotificationMarker.pulsing.jsx
@@ -14,10 +14,6 @@ export default () => {
           <SvgNotification />
         </NotificationMarker>
       </IconButton>
-
-      <NotificationMarker status='negative' pulsing>
-        <Text style={{ fontWeight: '700' }}>URGENT</Text>
-      </NotificationMarker>
     </div>
   );
 };
diff --git a/examples/NotificationMarker.statuses.jsx b/examples/NotificationMarker.statuses.jsx
index 9629ed6df6c..cd0ea11fde2 100644
--- a/examples/NotificationMarker.statuses.jsx
+++ b/examples/NotificationMarker.statuses.jsx
@@ -3,41 +3,41 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { NotificationMarker, IconButton } from '@itwin/itwinui-react';
+import { NotificationMarker, IconButton, Text } from '@itwin/itwinui-react';
 import { SvgNotification } from '@itwin/itwinui-icons-react';
 
 export default () => {
   return (
     <div className='demo-container'>
-      <NotificationMarker status='primary'>Primary</NotificationMarker>
+      <Text>Primary</Text>
       <IconButton label='Notifications' styleType='borderless'>
         <NotificationMarker status='primary'>
           <SvgNotification />
         </NotificationMarker>
       </IconButton>
 
-      <NotificationMarker status='positive'>Positive</NotificationMarker>
+      <Text>Positive</Text>
       <IconButton label='Notifications' styleType='borderless'>
         <NotificationMarker status='positive'>
           <SvgNotification />
         </NotificationMarker>
       </IconButton>
 
-      <NotificationMarker status='warning'>Warning</NotificationMarker>
+      <Text>Warning</Text>
       <IconButton label='Notifications' styleType='borderless'>
         <NotificationMarker status='warning'>
           <SvgNotification />
         </NotificationMarker>
       </IconButton>
 
-      <NotificationMarker status='negative'>Negative</NotificationMarker>
+      <Text>Negative</Text>
       <IconButton label='Notifications' styleType='borderless'>
         <NotificationMarker status='negative'>
           <SvgNotification />
         </NotificationMarker>
       </IconButton>
 
-      <NotificationMarker status='white'>White</NotificationMarker>
+      <Text>White</Text>
       <div style={{ display: 'flex', columnGap: '10px' }}>
         <IconButton label='Notifications' styleType='high-visibility'>
           <NotificationMarker status='white'>

From 55d01b15c7d866fc29edd6d72b7373585e4b35ae Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Wed, 17 Apr 2024 10:21:39 -0400
Subject: [PATCH 14/25] Added usage

---
 apps/website/src/content/docs/notificationmarker.mdx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/apps/website/src/content/docs/notificationmarker.mdx b/apps/website/src/content/docs/notificationmarker.mdx
index 2c8ae8fa435..072d61e9838 100644
--- a/apps/website/src/content/docs/notificationmarker.mdx
+++ b/apps/website/src/content/docs/notificationmarker.mdx
@@ -12,6 +12,16 @@ thumbnail: #TODO
 
 ## Usage
 
+Wrap the content (e.g. the content in an [`IconButton`](button#iconbutton)) with the `NotificationMarker` component.
+
+```jsx {2, 4}
+<IconButton label='Notifications' styleType='borderless'>
+  <NotificationMarker status='primary'>
+    <SvgNotification />
+  </NotificationMarker>
+</IconButton>
+```
+
 ### Status
 
 `NotificationMarker`s can have the follow statuese:

From 370c4788876dc28a7ad2f182e9e0b072c7945e62 Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Wed, 17 Apr 2024 10:27:27 -0400
Subject: [PATCH 15/25] Remove controlled section and merge it with usage

---
 apps/website/src/content/docs/notificationmarker.mdx      | 8 ++------
 .../src/core/NotificationMarker/NotificationMarker.tsx    | 6 ++----
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/apps/website/src/content/docs/notificationmarker.mdx b/apps/website/src/content/docs/notificationmarker.mdx
index 072d61e9838..bfc0c0af826 100644
--- a/apps/website/src/content/docs/notificationmarker.mdx
+++ b/apps/website/src/content/docs/notificationmarker.mdx
@@ -12,11 +12,11 @@ thumbnail: #TODO
 
 ## Usage
 
-Wrap the content (e.g. the content in an [`IconButton`](button#iconbutton)) with the `NotificationMarker` component.
+Wrap the content with the `NotificationMarker` component. You can use the `enabled` prop to show or hide the notification marker but still keep it in the DOM (e.g. to prevent layout shifts).
 
 ```jsx {2, 4}
 <IconButton label='Notifications' styleType='borderless'>
-  <NotificationMarker status='primary'>
+  <NotificationMarker enabled={notifications.length > 0}>
     <SvgNotification />
   </NotificationMarker>
 </IconButton>
@@ -38,10 +38,6 @@ Wrap the content (e.g. the content in an [`IconButton`](button#iconbutton)) with
 
 The `white` status is used on colored backgrounds, such as when using it in the [high visibility](button#high-visibility) or the [call-to-action](button#call-to-action) buttons.
 
-### Controlled
-
-The `enabled` prop can be used to programatically show or hide the notification marker.
-
 ### Pulsing
 
 To give a higher importantance to the notification, you can use the `pulsing` prop to show a pulse effect around the marker.
diff --git a/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx b/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx
index f65119bf80e..336b7baf6f1 100644
--- a/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx
+++ b/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx
@@ -31,12 +31,10 @@ type NotificationMarkerProps = {
    */
   pulsing?: boolean;
   /**
-   * Set this programmatically to false when you just want to render the passed children without the notification
+   * You can use this prop to show or hide the notification marker but still keep it in the DOM (e.g. to prevent layout shifts).
    * @default true
    * @example
-   * let [newMessagesCount, ...] = useState(0);
-   * ...
-   * <NotificationMarker enabled={newMessagesCount > 0}>
+   * <NotificationMarker enabled={notifications.length > 0}>
    *   <SvgNotification />
    * </NotificationMarker>
    */

From 3b6fff90dd58ec464dbe7cd4fe28ae43fb4943eb Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Wed, 17 Apr 2024 10:33:18 -0400
Subject: [PATCH 16/25] Reorder statuses examples

---
 examples/NotificationMarker.statuses.css |  3 ++-
 examples/NotificationMarker.statuses.jsx | 21 +++++++++++----------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/examples/NotificationMarker.statuses.css b/examples/NotificationMarker.statuses.css
index ae3cf0b4230..19c3e1f2276 100644
--- a/examples/NotificationMarker.statuses.css
+++ b/examples/NotificationMarker.statuses.css
@@ -3,6 +3,7 @@
   place-items: start;
   row-gap: 20px;
   column-gap: 30px;
-  grid-template-columns: fit-content(1px) auto;
+  grid-template-columns: auto auto auto auto auto;
   align-items: center;
+  justify-items: center;
 }
diff --git a/examples/NotificationMarker.statuses.jsx b/examples/NotificationMarker.statuses.jsx
index cd0ea11fde2..ec2b380d70f 100644
--- a/examples/NotificationMarker.statuses.jsx
+++ b/examples/NotificationMarker.statuses.jsx
@@ -10,41 +10,42 @@ export default () => {
   return (
     <div className='demo-container'>
       <Text>Primary</Text>
-      <IconButton label='Notifications' styleType='borderless'>
+      <Text>Positive</Text>
+      <Text>Warning</Text>
+      <Text>Negative</Text>
+      <Text>White</Text>
+
+      <IconButton label='Primary' styleType='borderless'>
         <NotificationMarker status='primary'>
           <SvgNotification />
         </NotificationMarker>
       </IconButton>
 
-      <Text>Positive</Text>
-      <IconButton label='Notifications' styleType='borderless'>
+      <IconButton label='Positive' styleType='borderless'>
         <NotificationMarker status='positive'>
           <SvgNotification />
         </NotificationMarker>
       </IconButton>
 
-      <Text>Warning</Text>
-      <IconButton label='Notifications' styleType='borderless'>
+      <IconButton label='Warning' styleType='borderless'>
         <NotificationMarker status='warning'>
           <SvgNotification />
         </NotificationMarker>
       </IconButton>
 
-      <Text>Negative</Text>
-      <IconButton label='Notifications' styleType='borderless'>
+      <IconButton label='Negative' styleType='borderless'>
         <NotificationMarker status='negative'>
           <SvgNotification />
         </NotificationMarker>
       </IconButton>
 
-      <Text>White</Text>
       <div style={{ display: 'flex', columnGap: '10px' }}>
-        <IconButton label='Notifications' styleType='high-visibility'>
+        <IconButton label='White' styleType='high-visibility'>
           <NotificationMarker status='white'>
             <SvgNotification />
           </NotificationMarker>
         </IconButton>
-        <IconButton label='Notifications' styleType='cta'>
+        <IconButton label='White' styleType='cta'>
           <NotificationMarker status='white'>
             <SvgNotification />
           </NotificationMarker>

From 5d85231218d5ce9dd760d94f49bcfa31b0c8b119 Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Wed, 17 Apr 2024 10:56:10 -0400
Subject: [PATCH 17/25] Removed custom CSS

---
 examples/NotificationMarker.main.css    | 10 ----------
 examples/NotificationMarker.main.jsx    |  8 +++-----
 examples/NotificationMarker.pulsing.css | 10 ----------
 examples/NotificationMarker.pulsing.jsx | 12 +++++-------
 4 files changed, 8 insertions(+), 32 deletions(-)
 delete mode 100644 examples/NotificationMarker.main.css
 delete mode 100644 examples/NotificationMarker.pulsing.css

diff --git a/examples/NotificationMarker.main.css b/examples/NotificationMarker.main.css
deleted file mode 100644
index fe05c2a1a63..00000000000
--- a/examples/NotificationMarker.main.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.demo-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  row-gap: 1rem;
-}
-
-.icon {
-  fill: currentColor;
-}
diff --git a/examples/NotificationMarker.main.jsx b/examples/NotificationMarker.main.jsx
index 8f2ac705f27..43f789b6afb 100644
--- a/examples/NotificationMarker.main.jsx
+++ b/examples/NotificationMarker.main.jsx
@@ -8,10 +8,8 @@ import { SvgNotification } from '@itwin/itwinui-icons-react';
 
 export default () => {
   return (
-    <div className='demo-container'>
-      <NotificationMarker status='primary'>
-        <SvgNotification className='icon' />
-      </NotificationMarker>
-    </div>
+    <NotificationMarker status='primary'>
+      <SvgNotification className='icon' />
+    </NotificationMarker>
   );
 };
diff --git a/examples/NotificationMarker.pulsing.css b/examples/NotificationMarker.pulsing.css
deleted file mode 100644
index fe05c2a1a63..00000000000
--- a/examples/NotificationMarker.pulsing.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.demo-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  row-gap: 1rem;
-}
-
-.icon {
-  fill: currentColor;
-}
diff --git a/examples/NotificationMarker.pulsing.jsx b/examples/NotificationMarker.pulsing.jsx
index e72df2fea59..60b264de0c3 100644
--- a/examples/NotificationMarker.pulsing.jsx
+++ b/examples/NotificationMarker.pulsing.jsx
@@ -8,12 +8,10 @@ import { SvgNotification } from '@itwin/itwinui-icons-react';
 
 export default () => {
   return (
-    <div className='demo-container'>
-      <IconButton label='Notifications' styleType='borderless'>
-        <NotificationMarker status='negative' pulsing>
-          <SvgNotification />
-        </NotificationMarker>
-      </IconButton>
-    </div>
+    <IconButton label='Notifications' styleType='borderless'>
+      <NotificationMarker status='negative' pulsing>
+        <SvgNotification />
+      </NotificationMarker>
+    </IconButton>
   );
 };

From 0c101d4587b3af6a021be2e464f1de3e0e64c885 Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Wed, 17 Apr 2024 11:17:54 -0400
Subject: [PATCH 18/25] Update test images

---
 .../NotificationMarker.test.ts-Basic.png      | Bin 5990 -> 4859 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/apps/react-workshop/cypress-visual-screenshots/baseline/NotificationMarker.test.ts-Basic.png b/apps/react-workshop/cypress-visual-screenshots/baseline/NotificationMarker.test.ts-Basic.png
index 30e7d8ce127684b27f1ff48612f75b3e7aba7fad..51f74a6797c6bbfa790b95d86d1bd8d4f8e172b0 100755
GIT binary patch
delta 655
zcmaE+_gi&>a=g$XPZ!6K3dXkwZP&}OFtR>4yikN)s6$xV=ZG&GFXvxIS&iAVJ}i`e
z(Z<bJ_ij@}9n%DX*w#tAeloVbVDLG_<Ts@?!0AAo#&v@UJ4{L|suk7Gf4=kOAN%xv
zW(EcZpUEFN?CR&93V-luzx~<wasU1Qef{_R=b`QUZvOdl`~HcWyYo1K$_gsZa#nww
zyV$1W<KjJ4FE_{7{j!<fZ+Cw6bi32e;`XPy-^;K9m09e0)-t#Lt=GDzf3m}wfC4gc
z#fR?wdXTm5>017EY!DS}JFC8C)qVK;{%L!^&78-NA2ZYgCF18kW2=1Jd;Rmd+xgGW
zn%_V3dj0-s`ge<upWQjF`rQsopppX*P1(OaY?ps#zW-ln-KQUqe_raBuh!ZB=ji#*
zt?KXgnqL2OWbbyUEe(3{`{uaI*J<d-?wA0yq~_(19~SkyDh!VwKVJFZ-Q~)EZ*q6O
zKNr07Z%J|e@0ZW^S^Gczxq183#@+txV0Q*vF0lXe@B7Y@mqF{E?t5RSzW(3i`Ign!
zbwQXBsKn2$*rERK>G{RB_Eldd0tFb<S6eP9zh7&9{qw!*_u%k|Jj+=7=cM}1dHweP
zRDdcDoXi4}4VAn=(qKKvlxL>wpX%>yKL6zM;>9uNFJ7E#^Zku6*m%EU2K_xBj@#7!
ztN9o2Ki_`-biEi3ppF6~zo!i6=2ja#KW8fe<Ue@*G9<4dJg&~tzWUQi8QIvA;(qh@
zneMNBwen8=GasOehRN6O7##l@Z+^EV7{pzFY~>w>@AEAu@8A3BJ5Yd`A)bG8Am@MH
f%?_OEOk%(FnLf{~xZ7(93UmffS3j3^P6<r_l*c{B

literal 5990
zcmeHLeN<ED9gbs`Y7fN9>B+Go@uN09hnnb=hLD7u3~8W@(CQ|3B5|WGqfBABvJkvU
zu-dZDN<>;hAtWAH$8kzhr>#T-0kq0j5?DkE1On#cf_zCXB)O1~y<yuQJ6lg@|IR<Z
zy!XAo-*bQWd7t;W_vYibxtxggFR#bpa1p5~`w!r7KL*1v-1E<YpWC-ziooFryHfYF
ze_pg^rY*1MwddF|V{*BMaA@C#gv+&`w7<qZlXB=7yZTS-ew}q@^3%1ye0!hm>km6l
zY<<4D_3=ISul9B&D~4O^HosbS;E&VcuV0DW-k7$2BYEvTb{IQp=1fN}jXx=?_}#fT
zC2*siX+kXyie6xz2N%bgUk2e=b{L2~c_5UCKr^`Anl&Ig<3MQD1)HoI00D>oS8_OZ
zq+pRRa~cMShDGW81<R?0!$#KBr#kzK4G!N8?mAFa;H{<)_N$oH4f?sOTIc;E0&`!E
z)(}S>y+k@%_{xB#C=Fzl+#RrVjxLmI5Vy`bq>ub}AyG2^$fA_N*x`RAogqt}9CTUu
ztXQksMvDQnV^8CR7q6;|GZV4S4Chdu#_)^G=2#NLIepfmEUgu-_Fk%?y~p#m6ILrV
zEk2jx>631X2~zp5S)4RHbJs283#9g+a9ivfMqtz+8cNPEl<(lU4C-e0P&7-zASj{t
zN8Mg~IuR>Y2V7KFCP#+s;S=qkREe4rc7kqN$LSs0mTHArpYPz5+1)-HCviJ*$%aST
zA+F&=L=oh0%-9!Qm&bxnth{OxyKe;9w`i-APK^`}IP(P{203qnzJq@#g{)urJA5a*
zaPW9=on{$^ZB4E&tFb>*Pq(Ut`sKf7i5&Uis~FMt4Oyr9zR^z9oey3H<|lM)84Dv8
zNrTlifjxy=WUH}WLXC6^INe&S(Vh+7X>ct3=&WT;%<{KHV@?3U2jRTNUJ(C>4xULg
z&y*ZaOFilztQVn+9LUducTl%5D}zi^ME7!OfolhU1p3LVuIT+<fgMYSHWr&XEy`iE
zIxmm_%D(&yZJmFdaMCb?b;xCF!OWw5K4}?J1V*dbJ%iy|CZ3L}0m~(EhSZ7w(8*!5
z;vAWQJk-t1^X)+q+{tK8JBe1^z`N9>Q6{1)d@BfKU~>-ybrVbl$E}^0X{kV6JjXk-
zcnTGMaxe&92v*SknWh6{c_-jmNYza}-Oj?U`!uYjdQgOuo~}+36ck+KVGikLa6Cpg
zu_HS(m{=z^rw=TPtVAC>CQ#3+9!9^RNcLpv++Sh6rHNH{Zqfoi6m2Io$9r@L6RJ5+
zDSkiOTSst6b#r2osXr5GkUBSE1QYxla?8XO(U4iG^t2#PvV<drG_*%wqms6v(9)!^
zdvmrlx#cNlLM-8|cukRGrwGWXY8YOqCmL!b{sGs#Ov<=5x^#izDwp-dl10Z`rtY-R
zL9+!v$&KtBnRN?YK7wv{ev$trngBImhsua7rCjGt#_nIww^IYQe8;YQ3|NRcUDWr2
zQkC<d%yBL@+jBcQI@*3AUy`Qu{+YBoGsKvDAY}w*YW4CLBoiNGNhZI*zT)}&bv}o_
zDpraJp{3jgBtoO#PO|uCg(jB&V^znn2Ij1E4_hl)0hUyGOFwfWNPI;)lyXw*_$?W3
zk8)jxOoq)??-X_@(KpUAHY6@y(LMf5ZYMG(*fdWY-ndhqT`3b!=U`T;i$og-y=7+m
zG`vft4Er{%NjzH-MQ$1^bu~Tkrx+8Krx`ZBl+0Tm8W7Bzm6gOI?_Eg0JVIeDnpBDm
z$>S*6_=-m_jqx-QJDcakbFj%{p%AhP*e9FDKLWh9b~?9~+P(8Ot%0JOKCboFop+rh
zCGN3$#8y>cKqYpY1drb3I{*NO8;|zvg;dKHD%Dbuw9+R+9B;^qAJ)4X6=(@0Xy3$F
zln?v-%T^Xi@%#Imu%UsL$|$vdWyyyG7LH&G5mbBSk$gj@435K#zfB5S1*yh)u~zK1
zcJEa!Uh}yq{sU!O=#@ZG;}g3$Xk*YN8We(yQC#NYO*pop_7BA^gKcd`(MEVOjn{>)
z^y_=>#<;)K*@S^Sb+M;k)OAp`5#YveiW8PJFdSEMYpkacI@Hz1=Ei$05M;YRb;k0r
zx42%HT(6*rC(nyo!(yuLE?j5%&6eV+Mr=|gdXr0^xoL5tssIeI#@>5qSu^A$@aDU8
zi{OExk@}}-<2p2^95OMf0cXFai=T*o4lkKi#;aug>v+*b5*mh=7DbxHrrY^tG0f@=
z_%R?joaJqU$NY160IK*TQV=fc)gn%n-=5*5T9+Ovdf(6lJb`V2+05(;)$$<U?!BHP
zTBw)qmS+{e8#(Ne%&~fIs8EZ~hbrY?V=JYMSM*Q+CP%=!W~}xJ$@RXj^anv=fA#|&
zw9n+3q2wR@LKC7cMBR72?1r=v(nd%d|IcS(Xs3jBN@%BqcFME<ofPtokZ**1Bjg+3
d;~OiKTU!T@t4W=W;A<L}n#|p={^_v~{sG-#BlG|O


From 5fb64d752cc5da4d417203be45577d7d06c01298 Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Wed, 17 Apr 2024 11:25:50 -0400
Subject: [PATCH 19/25] Remove text from statuses example

---
 examples/NotificationMarker.statuses.css |  9 ++------
 examples/NotificationMarker.statuses.jsx | 29 +++++++++---------------
 2 files changed, 13 insertions(+), 25 deletions(-)

diff --git a/examples/NotificationMarker.statuses.css b/examples/NotificationMarker.statuses.css
index 19c3e1f2276..08f31bea705 100644
--- a/examples/NotificationMarker.statuses.css
+++ b/examples/NotificationMarker.statuses.css
@@ -1,9 +1,4 @@
 .demo-container {
-  display: grid;
-  place-items: start;
-  row-gap: 20px;
-  column-gap: 30px;
-  grid-template-columns: auto auto auto auto auto;
-  align-items: center;
-  justify-items: center;
+  display: flex;
+  column-gap: 10px;
 }
diff --git a/examples/NotificationMarker.statuses.jsx b/examples/NotificationMarker.statuses.jsx
index ec2b380d70f..799472e03c2 100644
--- a/examples/NotificationMarker.statuses.jsx
+++ b/examples/NotificationMarker.statuses.jsx
@@ -9,12 +9,6 @@ import { SvgNotification } from '@itwin/itwinui-icons-react';
 export default () => {
   return (
     <div className='demo-container'>
-      <Text>Primary</Text>
-      <Text>Positive</Text>
-      <Text>Warning</Text>
-      <Text>Negative</Text>
-      <Text>White</Text>
-
       <IconButton label='Primary' styleType='borderless'>
         <NotificationMarker status='primary'>
           <SvgNotification />
@@ -39,18 +33,17 @@ export default () => {
         </NotificationMarker>
       </IconButton>
 
-      <div style={{ display: 'flex', columnGap: '10px' }}>
-        <IconButton label='White' styleType='high-visibility'>
-          <NotificationMarker status='white'>
-            <SvgNotification />
-          </NotificationMarker>
-        </IconButton>
-        <IconButton label='White' styleType='cta'>
-          <NotificationMarker status='white'>
-            <SvgNotification />
-          </NotificationMarker>
-        </IconButton>
-      </div>
+      <IconButton label='White' styleType='high-visibility'>
+        <NotificationMarker status='white'>
+          <SvgNotification />
+        </NotificationMarker>
+      </IconButton>
+
+      <IconButton label='White' styleType='cta'>
+        <NotificationMarker status='white'>
+          <SvgNotification />
+        </NotificationMarker>
+      </IconButton>
     </div>
   );
 };

From a8a2909e1d5ac11880fca626fc358156aec19fb4 Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Wed, 17 Apr 2024 11:31:47 -0400
Subject: [PATCH 20/25] Add "Conditional rendering" section

---
 .../src/content/docs/notificationmarker.mdx      | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/website/src/content/docs/notificationmarker.mdx b/apps/website/src/content/docs/notificationmarker.mdx
index bfc0c0af826..405bb98da0c 100644
--- a/apps/website/src/content/docs/notificationmarker.mdx
+++ b/apps/website/src/content/docs/notificationmarker.mdx
@@ -12,16 +12,28 @@ thumbnail: #TODO
 
 ## Usage
 
-Wrap the content with the `NotificationMarker` component. You can use the `enabled` prop to show or hide the notification marker but still keep it in the DOM (e.g. to prevent layout shifts).
+Wrap the content with the `NotificationMarker` component.
 
 ```jsx {2, 4}
 <IconButton label='Notifications' styleType='borderless'>
-  <NotificationMarker enabled={notifications.length > 0}>
+  <NotificationMarker>
     <SvgNotification />
   </NotificationMarker>
 </IconButton>
 ```
 
+### Conditional rendering
+
+There are many situations when the notification marker needs to appear/disappear depending on the application lifetime. Instead of conditionally rendering the `NotificationMarker` in such situations, the `enabled` prop can be used.
+
+```jsx
+<NotificationMarker enabled={notifications.length 0}>
+  …
+</NotificationMarker>
+```
+
+When `enabled` is set to `false`, the DOM element will still be present, but the notification marker will not be displayed visually.
+
 ### Status
 
 `NotificationMarker`s can have the follow statuese:

From 54e53d9437338be20850c7b75f7cf810c6637d6e Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Wed, 17 Apr 2024 11:34:33 -0400
Subject: [PATCH 21/25] Apply suggestions

Co-authored-by: Mayank <9084735+mayank99@users.noreply.github.com>
---
 apps/website/src/content/docs/notificationmarker.mdx | 2 +-
 examples/NotificationMarker.main.jsx                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/website/src/content/docs/notificationmarker.mdx b/apps/website/src/content/docs/notificationmarker.mdx
index 405bb98da0c..498b6800b64 100644
--- a/apps/website/src/content/docs/notificationmarker.mdx
+++ b/apps/website/src/content/docs/notificationmarker.mdx
@@ -38,7 +38,7 @@ When `enabled` is set to `false`, the DOM element will still be present, but the
 
 `NotificationMarker`s can have the follow statuese:
 
-- `primary` (default),
+- `primary` (default)
 - `positive`
 - `warning`
 - `negative`
diff --git a/examples/NotificationMarker.main.jsx b/examples/NotificationMarker.main.jsx
index 43f789b6afb..b308529f3db 100644
--- a/examples/NotificationMarker.main.jsx
+++ b/examples/NotificationMarker.main.jsx
@@ -9,7 +9,7 @@ import { SvgNotification } from '@itwin/itwinui-icons-react';
 export default () => {
   return (
     <NotificationMarker status='primary'>
-      <SvgNotification className='icon' />
+      <SvgNotification />
     </NotificationMarker>
   );
 };

From 6be8fb6c9332e5e98eff3fb8897a18aead3b5a77 Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Wed, 17 Apr 2024 15:28:31 -0400
Subject: [PATCH 22/25] Mention IconButton in usage

---
 apps/website/src/content/docs/notificationmarker.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/website/src/content/docs/notificationmarker.mdx b/apps/website/src/content/docs/notificationmarker.mdx
index 498b6800b64..298311babb0 100644
--- a/apps/website/src/content/docs/notificationmarker.mdx
+++ b/apps/website/src/content/docs/notificationmarker.mdx
@@ -12,7 +12,7 @@ thumbnail: #TODO
 
 ## Usage
 
-Wrap the content with the `NotificationMarker` component.
+The `NotificationMarker` component should be wrapped around the content which needs a marker/dot. This content is usually an icon, and is often used within an [`IconButton`](button#iconbutton).
 
 ```jsx {2, 4}
 <IconButton label='Notifications' styleType='borderless'>

From 844207557d5f3f059893d06e14aacab4fd0c57ce Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Wed, 17 Apr 2024 15:29:30 -0400
Subject: [PATCH 23/25] Typos

---
 apps/website/src/content/docs/notificationmarker.mdx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/website/src/content/docs/notificationmarker.mdx b/apps/website/src/content/docs/notificationmarker.mdx
index 298311babb0..5ff40c384ab 100644
--- a/apps/website/src/content/docs/notificationmarker.mdx
+++ b/apps/website/src/content/docs/notificationmarker.mdx
@@ -27,16 +27,14 @@ The `NotificationMarker` component should be wrapped around the content which ne
 There are many situations when the notification marker needs to appear/disappear depending on the application lifetime. Instead of conditionally rendering the `NotificationMarker` in such situations, the `enabled` prop can be used.
 
 ```jsx
-<NotificationMarker enabled={notifications.length 0}>
-  …
-</NotificationMarker>
+<NotificationMarker enabled={notifications.length > 0}>…</NotificationMarker>
 ```
 
 When `enabled` is set to `false`, the DOM element will still be present, but the notification marker will not be displayed visually.
 
 ### Status
 
-`NotificationMarker`s can have the follow statuese:
+`NotificationMarker`s can have the follow statuses:
 
 - `primary` (default)
 - `positive`

From ea9767895b11a2cfda32049201c82fece0d4836e Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Wed, 17 Apr 2024 15:36:16 -0400
Subject: [PATCH 24/25] Typo

---
 apps/website/src/content/docs/notificationmarker.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/website/src/content/docs/notificationmarker.mdx b/apps/website/src/content/docs/notificationmarker.mdx
index 5ff40c384ab..151834102a3 100644
--- a/apps/website/src/content/docs/notificationmarker.mdx
+++ b/apps/website/src/content/docs/notificationmarker.mdx
@@ -50,7 +50,7 @@ The `white` status is used on colored backgrounds, such as when using it in the
 
 ### Pulsing
 
-To give a higher importantance to the notification, you can use the `pulsing` prop to show a pulse effect around the marker.
+To give a higher importance to the notification, you can use the `pulsing` prop to show a pulse effect around the marker.
 
 **Note**: This prop should be used sparingly as it can be distracting to the user.
 

From 740ad2558f44734e09f352f8c2732a0e1447bf91 Mon Sep 17 00:00:00 2001
From: Rohan Kadkol <45748283+rohan-kadkol@users.noreply.github.com>
Date: Wed, 17 Apr 2024 15:38:38 -0400
Subject: [PATCH 25/25] Improved JSDocs for enabled

---
 .../src/core/NotificationMarker/NotificationMarker.tsx   | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx b/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx
index 336b7baf6f1..b6b4a6b2ef3 100644
--- a/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx
+++ b/packages/itwinui-react/src/core/NotificationMarker/NotificationMarker.tsx
@@ -31,12 +31,15 @@ type NotificationMarkerProps = {
    */
   pulsing?: boolean;
   /**
-   * You can use this prop to show or hide the notification marker but still keep it in the DOM (e.g. to prevent layout shifts).
-   * @default true
+   * Instead of conditionally rendering the `NotificationMarker`, the `enabled` prop can be used.
+   *
+   * When `enabled` is set to `false`, the DOM element will still be present, but the notification marker will not be displayed visually.
+   *
    * @example
    * <NotificationMarker enabled={notifications.length > 0}>
-   *   <SvgNotification />
+   *  …
    * </NotificationMarker>
+   * @default true
    */
   enabled?: boolean;
 };