From 09d32aa0a60edd29fc2ee03d3174b225335df6fb Mon Sep 17 00:00:00 2001
From: "artur.filippovskii" <arturfilippovskij@gmail.com>
Date: Wed, 7 Jan 2026 14:08:23 +0200
Subject: [PATCH 1/8] feat: implement using size prop for sheet component

---
 src/Sheet/README.md                         | 14 +++++++++++++-
 src/Sheet/Sheet.test.jsx                    | 18 ++++++++++++++++++
 src/Sheet/__snapshots__/Sheet.test.jsx.snap |  6 +++---
 src/Sheet/index.jsx                         | 12 +++++++++++-
 src/Sheet/index.scss                        | 18 +++++++++++++++++-
 5 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/src/Sheet/README.md b/src/Sheet/README.md
index c7c99bf183..ea0cc01433 100644
--- a/src/Sheet/README.md
+++ b/src/Sheet/README.md
@@ -19,10 +19,12 @@ notes: |
 () => {
   const [blocking, setBlocking] = useState(false);
   const [dark, setDark] = useState(false);
-  const [position, setPosition] = useState('bottom');
+  const [position, setPosition] = useState('right');
+	const [size, setSize] = useState('md');
   const [show, setShow] = useState(false);
 
   const positions = ['left', 'right', 'top', 'bottom'];
+	const sizes = ['sm', 'md', 'lg'];
 
   return (
     <>
@@ -35,6 +37,15 @@ notes: |
           <Dropdown.Item eventKey={position}>{position}</Dropdown.Item>
         ))}
       </DropdownButton><br />
+			<DropdownButton
+				id="size-dropdown-btn"
+				onSelect={setSize}
+				title={`Size: ${size}`}
+			>
+				{sizes.map(s => (
+					<Dropdown.Item key={s} eventKey={s}>{s}</Dropdown.Item>
+				))}
+			</DropdownButton><br />
       <Button onClick={() => setShow(true)} className="mb-2 mb-md-0">
         Show the Sheet
       </Button>{' '}
@@ -47,6 +58,7 @@ notes: |
 
       <Sheet
         position={position}
+				size={size}
         show={show}
         blocking={blocking}
         variant={dark ? 'dark' : 'light'}
diff --git a/src/Sheet/Sheet.test.jsx b/src/Sheet/Sheet.test.jsx
index 84bae5c97a..bb1da7caf5 100644
--- a/src/Sheet/Sheet.test.jsx
+++ b/src/Sheet/Sheet.test.jsx
@@ -113,5 +113,23 @@ describe('<Sheet />', () => {
       expect(sheetElement).toHaveClass('pgn__sheet-component');
       expect(sheetElement).toHaveClass(sheetClass);
     });
+
+    it('renders with correct size classes', () => {
+      const { container: containerSm } = render(<Sheet size="sm" />);
+      const sheetSm = containerSm.querySelector('.pgn__sheet-component');
+
+      expect(sheetSm).toHaveClass('pgn__sheet-sm');
+      expect(sheetSm).not.toHaveClass('pgn__sheet-md');
+
+      const { container: containerLg } = render(<Sheet size="lg" />);
+      const sheetLg = containerLg.querySelector('.pgn__sheet-component');
+      expect(sheetLg).toHaveClass('pgn__sheet-lg');
+    });
+
+    it('renders default size (md) when no size is provided', () => {
+      const { container } = render(<Sheet />);
+      const sheet = container.querySelector('.pgn__sheet-component');
+      expect(sheet).toHaveClass('pgn__sheet-md');
+    });
   });
 });
diff --git a/src/Sheet/__snapshots__/Sheet.test.jsx.snap b/src/Sheet/__snapshots__/Sheet.test.jsx.snap
index 214d14e086..d9825ea898 100644
--- a/src/Sheet/__snapshots__/Sheet.test.jsx.snap
+++ b/src/Sheet/__snapshots__/Sheet.test.jsx.snap
@@ -23,7 +23,7 @@ exports[`<Sheet /> snapshots blocking, left snapshot 1`] = `
     <div
       aria-atomic="true"
       aria-live="polite"
-      className="pgn__sheet-component pgn__sheet__light left"
+      className="pgn__sheet-component pgn__sheet__light pgn__sheet-md left"
       role="alert"
     >
       <div
@@ -57,7 +57,7 @@ exports[`<Sheet /> snapshots dark, right snapshot 1`] = `
     <div
       aria-atomic="true"
       aria-live="polite"
-      className="pgn__sheet-component pgn__sheet__dark right"
+      className="pgn__sheet-component pgn__sheet__dark pgn__sheet-md right"
       role="alert"
     >
       <div
@@ -91,7 +91,7 @@ exports[`<Sheet /> snapshots default args snapshot: bottom, show, light 1`] = `
     <div
       aria-atomic="true"
       aria-live="polite"
-      className="pgn__sheet-component pgn__sheet__light bottom"
+      className="pgn__sheet-component pgn__sheet__light pgn__sheet-md bottom"
       role="alert"
     >
       <div
diff --git a/src/Sheet/index.jsx b/src/Sheet/index.jsx
index 8675b43a2f..16d1e808cc 100644
--- a/src/Sheet/index.jsx
+++ b/src/Sheet/index.jsx
@@ -12,6 +12,12 @@ export const POSITIONS = {
   bottom: 'bottom',
 };
 
+export const SIZES = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+};
+
 export const VARIANTS = {
   light: 'light',
   dark: 'dark',
@@ -27,13 +33,14 @@ class Sheet extends React.Component {
 
   renderSheet() {
     const {
-      children, position, variant, className,
+      children, position, variant, className, size,
     } = this.props;
     return (
       <div
         className={classNames(
           'pgn__sheet-component',
           `pgn__sheet__${variant}`,
+          `pgn__sheet-${size}`,
           position,
           className,
         )}
@@ -95,6 +102,8 @@ Sheet.propTypes = {
     POSITIONS.top,
     POSITIONS.bottom,
   ]),
+  /** A string designation sheet's size */
+  size: PropTypes.oneOf([SIZES.sm, SIZES.md, SIZES.lg]),
   /** Boolean used to control whether the Sheet shows. */
   show: PropTypes.bool,
   /** Specifies function that controls `show` value. */
@@ -107,6 +116,7 @@ Sheet.defaultProps = {
   blocking: false,
   children: undefined,
   position: POSITIONS.bottom,
+  size: SIZES.md,
   show: true,
   onClose: () => {},
   variant: VARIANTS.light,
diff --git a/src/Sheet/index.scss b/src/Sheet/index.scss
index 1420578d55..03d203c290 100644
--- a/src/Sheet/index.scss
+++ b/src/Sheet/index.scss
@@ -81,8 +81,24 @@
 
   &.left,
   &.right {
-    max-width: 272px;
     height: 100%;
     top: 0;
+		width: 100%;
+
+		&.pgn__sheet-sm {
+      max-width: 272px;
+    }
+
+    &.pgn__sheet-md {
+      max-width: 500px;
+    }
+
+    &.pgn__sheet-lg {
+      max-width: 800px;
+    }
+
+		@media (--pgn-size-breakpoint-max-width-xs) {
+			max-width: 100vw !important;
+		}
   }
 }

From fd8a86d3134abd037228114e1fc2f1dd11377ce2 Mon Sep 17 00:00:00 2001
From: "artur.filippovskii" <arturfilippovskij@gmail.com>
Date: Thu, 8 Jan 2026 10:51:40 +0200
Subject: [PATCH 2/8] fix: space fixes

---
 src/Sheet/README.md  | 24 ++++++++++++------------
 src/Sheet/index.scss | 10 +++++-----
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/Sheet/README.md b/src/Sheet/README.md
index ea0cc01433..1ae9a111ba 100644
--- a/src/Sheet/README.md
+++ b/src/Sheet/README.md
@@ -20,11 +20,11 @@ notes: |
   const [blocking, setBlocking] = useState(false);
   const [dark, setDark] = useState(false);
   const [position, setPosition] = useState('right');
-	const [size, setSize] = useState('md');
+  const [size, setSize] = useState('md');
   const [show, setShow] = useState(false);
 
   const positions = ['left', 'right', 'top', 'bottom'];
-	const sizes = ['sm', 'md', 'lg'];
+  const sizes = ['sm', 'md', 'lg'];
 
   return (
     <>
@@ -37,15 +37,15 @@ notes: |
           <Dropdown.Item eventKey={position}>{position}</Dropdown.Item>
         ))}
       </DropdownButton><br />
-			<DropdownButton
-				id="size-dropdown-btn"
-				onSelect={setSize}
-				title={`Size: ${size}`}
-			>
-				{sizes.map(s => (
-					<Dropdown.Item key={s} eventKey={s}>{s}</Dropdown.Item>
-				))}
-			</DropdownButton><br />
+      <DropdownButton
+        id="size-dropdown-btn"
+        onSelect={setSize}
+        title={`Size: ${size}`}
+      >
+        {sizes.map(s => (
+          <Dropdown.Item key={s} eventKey={s}>{s}</Dropdown.Item>
+        ))}
+      </DropdownButton><br />
       <Button onClick={() => setShow(true)} className="mb-2 mb-md-0">
         Show the Sheet
       </Button>{' '}
@@ -58,7 +58,7 @@ notes: |
 
       <Sheet
         position={position}
-				size={size}
+        size={size}
         show={show}
         blocking={blocking}
         variant={dark ? 'dark' : 'light'}
diff --git a/src/Sheet/index.scss b/src/Sheet/index.scss
index 03d203c290..b1b0508cea 100644
--- a/src/Sheet/index.scss
+++ b/src/Sheet/index.scss
@@ -83,9 +83,9 @@
   &.right {
     height: 100%;
     top: 0;
-		width: 100%;
+    width: 100%;
 
-		&.pgn__sheet-sm {
+    &.pgn__sheet-sm {
       max-width: 272px;
     }
 
@@ -97,8 +97,8 @@
       max-width: 800px;
     }
 
-		@media (--pgn-size-breakpoint-max-width-xs) {
-			max-width: 100vw !important;
-		}
+    @media (--pgn-size-breakpoint-max-width-xs) {
+      max-width: 100vw !important;
+    }
   }
 }

From 03d8aaca417b6ebf1f49fa0b794472032a6c7773 Mon Sep 17 00:00:00 2001
From: "artur.filippovskii" <arturfilippovskij@gmail.com>
Date: Mon, 12 Jan 2026 14:49:17 +0200
Subject: [PATCH 3/8] fix: some refactor after review

---
 src/Sheet/README.md                   |  2 +-
 src/Sheet/Sheet.test.jsx              |  6 +++---
 src/Sheet/index.jsx                   |  2 +-
 src/Sheet/index.scss                  | 10 +++-------
 tokens/src/core/components/Sheet.json |  8 ++++++++
 5 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/Sheet/README.md b/src/Sheet/README.md
index 1ae9a111ba..1c1828da82 100644
--- a/src/Sheet/README.md
+++ b/src/Sheet/README.md
@@ -19,7 +19,7 @@ notes: |
 () => {
   const [blocking, setBlocking] = useState(false);
   const [dark, setDark] = useState(false);
-  const [position, setPosition] = useState('right');
+  const [position, setPosition] = useState('bottom');
   const [size, setSize] = useState('md');
   const [show, setShow] = useState(false);
 
diff --git a/src/Sheet/Sheet.test.jsx b/src/Sheet/Sheet.test.jsx
index bb1da7caf5..aac1968888 100644
--- a/src/Sheet/Sheet.test.jsx
+++ b/src/Sheet/Sheet.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import Sheet, { POSITIONS, VARIANTS } from '.';
 
@@ -127,8 +127,8 @@ describe('<Sheet />', () => {
     });
 
     it('renders default size (md) when no size is provided', () => {
-      const { container } = render(<Sheet />);
-      const sheet = container.querySelector('.pgn__sheet-component');
+      render(<Sheet />);
+      const sheet = screen.getByRole('alert');
       expect(sheet).toHaveClass('pgn__sheet-md');
     });
   });
diff --git a/src/Sheet/index.jsx b/src/Sheet/index.jsx
index 16d1e808cc..aa59425cb6 100644
--- a/src/Sheet/index.jsx
+++ b/src/Sheet/index.jsx
@@ -102,7 +102,7 @@ Sheet.propTypes = {
     POSITIONS.top,
     POSITIONS.bottom,
   ]),
-  /** A string designation sheet's size */
+  /** ize of sheet to render */
   size: PropTypes.oneOf([SIZES.sm, SIZES.md, SIZES.lg]),
   /** Boolean used to control whether the Sheet shows. */
   show: PropTypes.bool,
diff --git a/src/Sheet/index.scss b/src/Sheet/index.scss
index b1b0508cea..a3cb2bfca1 100644
--- a/src/Sheet/index.scss
+++ b/src/Sheet/index.scss
@@ -86,19 +86,15 @@
     width: 100%;
 
     &.pgn__sheet-sm {
-      max-width: 272px;
+      max-width: var(--pgn-size-sheet-sm);
     }
 
     &.pgn__sheet-md {
-      max-width: 500px;
+      max-width: var(--pgn-size-sheet-md);
     }
 
     &.pgn__sheet-lg {
-      max-width: 800px;
-    }
-
-    @media (--pgn-size-breakpoint-max-width-xs) {
-      max-width: 100vw !important;
+      max-width: var(--pgn-size-sheet-lg);
     }
   }
 }
diff --git a/tokens/src/core/components/Sheet.json b/tokens/src/core/components/Sheet.json
index 12f8cb0c1b..f51fd3523c 100644
--- a/tokens/src/core/components/Sheet.json
+++ b/tokens/src/core/components/Sheet.json
@@ -7,5 +7,13 @@
         "main": { "source": "$zindex-sheet", "$value": "1032" }
       }
     }
+  },
+  "size": {
+    "$type": "dimension",
+    "sheet": {
+      "sm": { "value": "400px" },
+      "md": { "value": "500px" },
+      "lg": { "value": "800px" }
+    }
   }
 }

From 642553e0672436361bee88c4cd619cd14b18b7ed Mon Sep 17 00:00:00 2001
From: "artur.filippovskii" <arturfilippovskij@gmail.com>
Date: Mon, 12 Jan 2026 15:00:53 +0200
Subject: [PATCH 4/8] fix: best practice for test

---
 src/Sheet/Sheet.test.jsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/Sheet/Sheet.test.jsx b/src/Sheet/Sheet.test.jsx
index aac1968888..36930be53b 100644
--- a/src/Sheet/Sheet.test.jsx
+++ b/src/Sheet/Sheet.test.jsx
@@ -115,14 +115,16 @@ describe('<Sheet />', () => {
     });
 
     it('renders with correct size classes', () => {
-      const { container: containerSm } = render(<Sheet size="sm" />);
-      const sheetSm = containerSm.querySelector('.pgn__sheet-component');
+      const { unmount } = render(<Sheet size="sm" />);
+      const sheetSm = screen.getByRole('alert');
 
       expect(sheetSm).toHaveClass('pgn__sheet-sm');
-      expect(sheetSm).not.toHaveClass('pgn__sheet-md');
 
-      const { container: containerLg } = render(<Sheet size="lg" />);
-      const sheetLg = containerLg.querySelector('.pgn__sheet-component');
+      unmount();
+
+      render(<Sheet size="lg" />);
+      const sheetLg = screen.getByRole('alert');
+
       expect(sheetLg).toHaveClass('pgn__sheet-lg');
     });
 

From 730ddb35fe2fc44781c5d294a2dc32bc1903124c Mon Sep 17 00:00:00 2001
From: "artur.filippovskii" <arturfilippovskij@gmail.com>
Date: Tue, 13 Jan 2026 11:14:58 +0200
Subject: [PATCH 5/8] fix: some fixed after review

---
 src/Sheet/README.md | 4 ++--
 src/Sheet/index.jsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Sheet/README.md b/src/Sheet/README.md
index 1c1828da82..88b89fc401 100644
--- a/src/Sheet/README.md
+++ b/src/Sheet/README.md
@@ -42,8 +42,8 @@ notes: |
         onSelect={setSize}
         title={`Size: ${size}`}
       >
-        {sizes.map(s => (
-          <Dropdown.Item key={s} eventKey={s}>{s}</Dropdown.Item>
+        {sizes.map((size) => (
+          <Dropdown.Item key={size} eventKey={size}>{size}</Dropdown.Item>
         ))}
       </DropdownButton><br />
       <Button onClick={() => setShow(true)} className="mb-2 mb-md-0">
diff --git a/src/Sheet/index.jsx b/src/Sheet/index.jsx
index aa59425cb6..4d81dce108 100644
--- a/src/Sheet/index.jsx
+++ b/src/Sheet/index.jsx
@@ -102,8 +102,8 @@ Sheet.propTypes = {
     POSITIONS.top,
     POSITIONS.bottom,
   ]),
-  /** ize of sheet to render */
-  size: PropTypes.oneOf([SIZES.sm, SIZES.md, SIZES.lg]),
+  /** Size of sheet to render */
+  size: PropTypes.oneOf(Object.values(SIZES)),
   /** Boolean used to control whether the Sheet shows. */
   show: PropTypes.bool,
   /** Specifies function that controls `show` value. */

From d9d67685aa1be676d3d3d4a61fdc5c71da34e0c4 Mon Sep 17 00:00:00 2001
From: "artur.filippovskii" <arturfilippovskij@gmail.com>
Date: Thu, 15 Jan 2026 12:22:46 +0200
Subject: [PATCH 6/8] fix: run tokens build command

---
 styles/css/core/variables.css         | 3 +++
 tokens/src/core/components/Sheet.json | 6 +++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
index f09f812f15..711651a0d3 100644
--- a/styles/css/core/variables.css
+++ b/styles/css/core/variables.css
@@ -123,6 +123,9 @@
   --pgn-size-search-field-border-width-base: 0.0625rem;
   --pgn-size-search-field-border-width-focus: 0.3125rem;
   --pgn-size-search-field-border-radius: 0;
+  --pgn-size-sheet-sm: 400px;
+  --pgn-size-sheet-md: 500px;
+  --pgn-size-sheet-lg: 800px;
   --pgn-size-spinner-base-width: 2rem;
   --pgn-size-spinner-base-border-width: 0.25em;
   --pgn-size-spinner-sm-width: 1rem;
diff --git a/tokens/src/core/components/Sheet.json b/tokens/src/core/components/Sheet.json
index f51fd3523c..c7bdc71a74 100644
--- a/tokens/src/core/components/Sheet.json
+++ b/tokens/src/core/components/Sheet.json
@@ -11,9 +11,9 @@
   "size": {
     "$type": "dimension",
     "sheet": {
-      "sm": { "value": "400px" },
-      "md": { "value": "500px" },
-      "lg": { "value": "800px" }
+      "sm": { "$value": "400px" },
+      "md": { "$value": "500px" },
+      "lg": { "$value": "800px" }
     }
   }
 }

From 76bfac4fde68c6979863b6481ec1c6e397a2d84f Mon Sep 17 00:00:00 2001
From: "artur.filippovskii" <arturfilippovskij@gmail.com>
Date: Thu, 15 Jan 2026 12:59:49 +0200
Subject: [PATCH 7/8] chore: trigger ci retry


From 357fe3af7b2afadad52bb9a9efa8f9ff6ef4e22e Mon Sep 17 00:00:00 2001
From: "artur.filippovskii" <arturfilippovskij@gmail.com>
Date: Fri, 6 Feb 2026 15:04:02 +0200
Subject: [PATCH 8/8] feat: rename sheet size to width

---
 src/Sheet/README.md                         | 16 ++++++++--------
 src/Sheet/Sheet.test.jsx                    | 14 +++++++-------
 src/Sheet/__snapshots__/Sheet.test.jsx.snap |  6 +++---
 src/Sheet/index.jsx                         | 12 ++++++------
 src/Sheet/index.scss                        | 12 ++++++------
 styles/css/core/variables.css               |  6 +++---
 tokens/src/core/components/Sheet.json       |  2 +-
 7 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/Sheet/README.md b/src/Sheet/README.md
index 88b89fc401..806463f361 100644
--- a/src/Sheet/README.md
+++ b/src/Sheet/README.md
@@ -20,11 +20,11 @@ notes: |
   const [blocking, setBlocking] = useState(false);
   const [dark, setDark] = useState(false);
   const [position, setPosition] = useState('bottom');
-  const [size, setSize] = useState('md');
+  const [width, setWidth] = useState('md');
   const [show, setShow] = useState(false);
 
   const positions = ['left', 'right', 'top', 'bottom'];
-  const sizes = ['sm', 'md', 'lg'];
+  const widths = ['sm', 'md', 'lg'];
 
   return (
     <>
@@ -38,12 +38,12 @@ notes: |
         ))}
       </DropdownButton><br />
       <DropdownButton
-        id="size-dropdown-btn"
-        onSelect={setSize}
-        title={`Size: ${size}`}
+        id="width-dropdown-btn"
+        onSelect={setWidth}
+        title={`Width: ${width}`}
       >
-        {sizes.map((size) => (
-          <Dropdown.Item key={size} eventKey={size}>{size}</Dropdown.Item>
+        {widths.map((width) => (
+          <Dropdown.Item key={width} eventKey={width}>{width}</Dropdown.Item>
         ))}
       </DropdownButton><br />
       <Button onClick={() => setShow(true)} className="mb-2 mb-md-0">
@@ -58,7 +58,7 @@ notes: |
 
       <Sheet
         position={position}
-        size={size}
+        width={width}
         show={show}
         blocking={blocking}
         variant={dark ? 'dark' : 'light'}
diff --git a/src/Sheet/Sheet.test.jsx b/src/Sheet/Sheet.test.jsx
index 36930be53b..bafbd7a32d 100644
--- a/src/Sheet/Sheet.test.jsx
+++ b/src/Sheet/Sheet.test.jsx
@@ -114,24 +114,24 @@ describe('<Sheet />', () => {
       expect(sheetElement).toHaveClass(sheetClass);
     });
 
-    it('renders with correct size classes', () => {
-      const { unmount } = render(<Sheet size="sm" />);
+    it('renders with correct width classes', () => {
+      const { unmount } = render(<Sheet width="sm" />);
       const sheetSm = screen.getByRole('alert');
 
-      expect(sheetSm).toHaveClass('pgn__sheet-sm');
+      expect(sheetSm).toHaveClass('pgn__sheet-width-sm');
 
       unmount();
 
-      render(<Sheet size="lg" />);
+      render(<Sheet width="lg" />);
       const sheetLg = screen.getByRole('alert');
 
-      expect(sheetLg).toHaveClass('pgn__sheet-lg');
+      expect(sheetLg).toHaveClass('pgn__sheet-width-lg');
     });
 
-    it('renders default size (md) when no size is provided', () => {
+    it('renders default width (md) when no width is provided', () => {
       render(<Sheet />);
       const sheet = screen.getByRole('alert');
-      expect(sheet).toHaveClass('pgn__sheet-md');
+      expect(sheet).toHaveClass('pgn__sheet-width-md');
     });
   });
 });
diff --git a/src/Sheet/__snapshots__/Sheet.test.jsx.snap b/src/Sheet/__snapshots__/Sheet.test.jsx.snap
index d9825ea898..673f279f9a 100644
--- a/src/Sheet/__snapshots__/Sheet.test.jsx.snap
+++ b/src/Sheet/__snapshots__/Sheet.test.jsx.snap
@@ -23,7 +23,7 @@ exports[`<Sheet /> snapshots blocking, left snapshot 1`] = `
     <div
       aria-atomic="true"
       aria-live="polite"
-      className="pgn__sheet-component pgn__sheet__light pgn__sheet-md left"
+      className="pgn__sheet-component pgn__sheet__light pgn__sheet-width-md left"
       role="alert"
     >
       <div
@@ -57,7 +57,7 @@ exports[`<Sheet /> snapshots dark, right snapshot 1`] = `
     <div
       aria-atomic="true"
       aria-live="polite"
-      className="pgn__sheet-component pgn__sheet__dark pgn__sheet-md right"
+      className="pgn__sheet-component pgn__sheet__dark pgn__sheet-width-md right"
       role="alert"
     >
       <div
@@ -91,7 +91,7 @@ exports[`<Sheet /> snapshots default args snapshot: bottom, show, light 1`] = `
     <div
       aria-atomic="true"
       aria-live="polite"
-      className="pgn__sheet-component pgn__sheet__light pgn__sheet-md bottom"
+      className="pgn__sheet-component pgn__sheet__light pgn__sheet-width-md bottom"
       role="alert"
     >
       <div
diff --git a/src/Sheet/index.jsx b/src/Sheet/index.jsx
index 4d81dce108..1856747864 100644
--- a/src/Sheet/index.jsx
+++ b/src/Sheet/index.jsx
@@ -12,7 +12,7 @@ export const POSITIONS = {
   bottom: 'bottom',
 };
 
-export const SIZES = {
+export const WIDTHS = {
   sm: 'sm',
   md: 'md',
   lg: 'lg',
@@ -33,14 +33,14 @@ class Sheet extends React.Component {
 
   renderSheet() {
     const {
-      children, position, variant, className, size,
+      children, position, variant, className, width,
     } = this.props;
     return (
       <div
         className={classNames(
           'pgn__sheet-component',
           `pgn__sheet__${variant}`,
-          `pgn__sheet-${size}`,
+          `pgn__sheet-width-${width}`,
           position,
           className,
         )}
@@ -102,8 +102,8 @@ Sheet.propTypes = {
     POSITIONS.top,
     POSITIONS.bottom,
   ]),
-  /** Size of sheet to render */
-  size: PropTypes.oneOf(Object.values(SIZES)),
+  /** Width of sheet to render */
+  width: PropTypes.oneOf(Object.values(WIDTHS)),
   /** Boolean used to control whether the Sheet shows. */
   show: PropTypes.bool,
   /** Specifies function that controls `show` value. */
@@ -116,7 +116,7 @@ Sheet.defaultProps = {
   blocking: false,
   children: undefined,
   position: POSITIONS.bottom,
-  size: SIZES.md,
+  width: WIDTHS.md,
   show: true,
   onClose: () => {},
   variant: VARIANTS.light,
diff --git a/src/Sheet/index.scss b/src/Sheet/index.scss
index a3cb2bfca1..5f13562d76 100644
--- a/src/Sheet/index.scss
+++ b/src/Sheet/index.scss
@@ -85,16 +85,16 @@
     top: 0;
     width: 100%;
 
-    &.pgn__sheet-sm {
-      max-width: var(--pgn-size-sheet-sm);
+    &.pgn__sheet-width-sm {
+      max-width: var(--pgn-width-sheet-sm);
     }
 
-    &.pgn__sheet-md {
-      max-width: var(--pgn-size-sheet-md);
+    &.pgn__sheet-width-md {
+      max-width: var(--pgn-width-sheet-md);
     }
 
-    &.pgn__sheet-lg {
-      max-width: var(--pgn-size-sheet-lg);
+    &.pgn__sheet-width-lg {
+      max-width: var(--pgn-width-sheet-lg);
     }
   }
 }
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
index 711651a0d3..64cd8f5231 100644
--- a/styles/css/core/variables.css
+++ b/styles/css/core/variables.css
@@ -123,9 +123,9 @@
   --pgn-size-search-field-border-width-base: 0.0625rem;
   --pgn-size-search-field-border-width-focus: 0.3125rem;
   --pgn-size-search-field-border-radius: 0;
-  --pgn-size-sheet-sm: 400px;
-  --pgn-size-sheet-md: 500px;
-  --pgn-size-sheet-lg: 800px;
+  --pgn-width-sheet-sm: 400px;
+  --pgn-width-sheet-md: 500px;
+  --pgn-width-sheet-lg: 800px;
   --pgn-size-spinner-base-width: 2rem;
   --pgn-size-spinner-base-border-width: 0.25em;
   --pgn-size-spinner-sm-width: 1rem;
diff --git a/tokens/src/core/components/Sheet.json b/tokens/src/core/components/Sheet.json
index c7bdc71a74..9ccbca78ef 100644
--- a/tokens/src/core/components/Sheet.json
+++ b/tokens/src/core/components/Sheet.json
@@ -8,7 +8,7 @@
       }
     }
   },
-  "size": {
+  "width": {
     "$type": "dimension",
     "sheet": {
       "sm": { "$value": "400px" },