diff --git a/src/components/Accordion/Accordion.module.css b/src/components/Accordion/Accordion.module.css
index e2361f51e..cad5877f9 100644
--- a/src/components/Accordion/Accordion.module.css
+++ b/src/components/Accordion/Accordion.module.css
@@ -29,6 +29,10 @@
   height: 3.375rem;
 }
 
+.accordion-button--empty {
+  pointer-events: none;
+}
+
 /**
  * Small variant.
  */
@@ -105,6 +109,10 @@
   color: var(--eds-theme-color-text-neutral-strong);
 }
 
+.accordion-panel--hidden {
+  padding: 0;
+}
+
 /**
  * Small variant.
  */
diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx
index 5940ca5da..b50c0b3d3 100644
--- a/src/components/Accordion/Accordion.stories.tsx
+++ b/src/components/Accordion/Accordion.stories.tsx
@@ -149,6 +149,51 @@ export const DefaultOpen: StoryObj<Args> = {
   },
 };
 
+export const EmptyStackedOpen: StoryObj<Args> = {
+  args: {
+    children: (
+      <>
+        <Accordion.Row defaultOpen isExpandable={false}>
+          <Accordion.Button>Massa quam egestas massa.</Accordion.Button>
+          <Accordion.Panel>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
+            massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
+            tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
+            Suscipit dui, nunc sit dui tellus massa laoreet tellus.
+          </Accordion.Panel>
+        </Accordion.Row>
+        <Accordion.Row defaultOpen>
+          <Accordion.Button>Massa quam egestas massa.</Accordion.Button>
+          <Accordion.Panel>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
+            massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
+            tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
+            Suscipit dui, nunc sit dui tellus massa laoreet tellus.
+          </Accordion.Panel>
+        </Accordion.Row>
+        <Accordion.Row defaultOpen>
+          <Accordion.Button>Massa quam egestas massa.</Accordion.Button>
+          <Accordion.Panel>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
+            massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
+            tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
+            Suscipit dui, nunc sit dui tellus massa laoreet tellus.
+          </Accordion.Panel>
+        </Accordion.Row>
+        <Accordion.Row defaultOpen>
+          <Accordion.Button>Massa quam egestas massa.</Accordion.Button>
+          <Accordion.Panel>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
+            massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
+            tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
+            Suscipit dui, nunc sit dui tellus massa laoreet tellus.
+          </Accordion.Panel>
+        </Accordion.Row>
+      </>
+    ),
+  },
+};
+
 export const SmallOpen: StoryObj<Args> = {
   args: {
     ...DefaultOpen.args,
diff --git a/src/components/Accordion/Accordion.test.tsx b/src/components/Accordion/Accordion.test.tsx
index c603f3267..b93148f75 100644
--- a/src/components/Accordion/Accordion.test.tsx
+++ b/src/components/Accordion/Accordion.test.tsx
@@ -95,7 +95,7 @@ describe('<Accordion />', () => {
         </Accordion.Row>
       </Accordion>,
     );
-    const accordionButton = screen.getByTestId('accordion-button');
+    const accordionButton = screen.getByRole('button');
 
     await act(async () => {
       await user.click(accordionButton);
@@ -103,4 +103,31 @@ describe('<Accordion />', () => {
     expect(onOpen).toHaveBeenCalledTimes(1);
     expect(onClose).not.toHaveBeenCalled();
   });
+
+  it('should not call onOpen callback when accordion opens on an empty row', async () => {
+    const user = userEvent.setup();
+    const onClose = jest.fn();
+    const onOpen = jest.fn();
+    render(
+      <Accordion headingAs="h2">
+        <Accordion.Row isExpandable={false}>
+          <Accordion.Button
+            data-testid="accordion-button"
+            onClose={onClose}
+            onOpen={onOpen}
+          >
+            Accordion Button
+          </Accordion.Button>
+          <Accordion.Panel>Accordion Panel</Accordion.Panel>
+        </Accordion.Row>
+      </Accordion>,
+    );
+    const accordionButton = screen.getByRole('button');
+
+    await act(async () => {
+      await user.click(accordionButton);
+    });
+    expect(onOpen).not.toHaveBeenCalled();
+    expect(onClose).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 491b39184..f5b05f80f 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -85,6 +85,10 @@ type AccordionRowProps = {
    * Whether panel is expanded by default.
    */
   defaultOpen?: boolean;
+  /**
+   * Whether the row can show expandable content
+   */
+  isExpandable?: boolean;
 };
 
 const AccordionContext = createContext<{
@@ -95,6 +99,10 @@ const AccordionContext = createContext<{
   headingAs: 'h2',
 });
 
+const AccordionRowContext = createContext<{ isExpandable?: boolean }>({
+  isExpandable: true,
+});
+
 /**
  * `import {Accordion} from "@chanzuckerberg/eds;`
  *
@@ -140,10 +148,13 @@ const AccordionButton = ({
     size,
   } = useContext(AccordionContext);
 
+  const { isExpandable } = useContext(AccordionRowContext);
+
   const componentClassName = clsx(
     styles['accordion-button'],
     size === 'sm' && styles['accordion-button--sm'],
     hasOutline && styles['accordion-button--outline'],
+    !isExpandable && styles['accordion-button--empty'],
     className,
   );
 
@@ -159,19 +170,19 @@ const AccordionButton = ({
           className={componentClassName}
           fullWidth
           onClick={() => {
-            if (open && onClose) {
+            if (open && isExpandable && onClose) {
               onClose();
             }
-            if (!open && onOpen) {
+            if (!open && isExpandable && onOpen) {
               onOpen();
             }
           }}
           onKeyDown={(e) => {
             if (e.key === SPACEBAR_KEYCODE || e.key === ENTER_KEYCODE) {
-              if (open && onClose) {
+              if (open && isExpandable && onClose) {
                 onClose();
               }
-              if (!open && onOpen) {
+              if (!open && isExpandable && onOpen) {
                 onOpen();
               }
             }
@@ -186,16 +197,18 @@ const AccordionButton = ({
           >
             {children}
           </Heading>
-          <Icon
-            className={clsx(
-              styles['accordion-button__icon'],
-              open && styles['accordion-button__icon--open'],
-            )}
-            name={icon}
-            purpose="informative"
-            size="1.625rem"
-            title={open ? 'hide content' : 'show content'}
-          />
+          {isExpandable && (
+            <Icon
+              className={clsx(
+                styles['accordion-button__icon'],
+                open && styles['accordion-button__icon--open'],
+              )}
+              name="expand-more"
+              purpose="informative"
+              size="1.625rem"
+              title={open ? 'hide content' : 'show content'}
+            />
+          )}
         </Button>
       )}
     </Disclosure.Button>
@@ -208,17 +221,19 @@ const AccordionPanel = ({
   ...other
 }: AccordionPanelProps) => {
   const { hasOutline, size } = useContext(AccordionContext);
+  const { isExpandable } = useContext(AccordionRowContext);
 
   const componentClassName = clsx(
     styles['accordion-panel'],
     size === 'sm' && styles['accordion-panel--sm'],
     hasOutline && styles['accordion-panel--outline'],
+    !isExpandable && styles['accordion-panel--hidden'],
     className,
   );
 
   return (
     <Disclosure.Panel className={componentClassName} {...other}>
-      {children}
+      {isExpandable && children}
     </Disclosure.Panel>
   );
 };
@@ -227,6 +242,7 @@ const AccordionRow = ({
   className,
   defaultOpen,
   children,
+  isExpandable = true,
   ...other
 }: AccordionRowProps) => {
   const { hasOutline } = useContext(AccordionContext);
@@ -236,13 +252,15 @@ const AccordionRow = ({
     className,
   );
   return (
-    <Disclosure defaultOpen={defaultOpen}>
-      {({ open }) => (
-        <div className={componentClassName} {...other}>
-          {typeof children === 'function' ? children({ open }) : children}
-        </div>
-      )}
-    </Disclosure>
+    <AccordionRowContext.Provider value={{ isExpandable }}>
+      <Disclosure defaultOpen={defaultOpen}>
+        {({ open }) => (
+          <div className={componentClassName} {...other}>
+            {typeof children === 'function' ? children({ open }) : children}
+          </div>
+        )}
+      </Disclosure>
+    </AccordionRowContext.Provider>
   );
 };
 
diff --git a/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap b/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
index 46dc804b7..e343b556e 100644
--- a/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
+++ b/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
@@ -101,6 +101,166 @@ exports[`<Accordion /> DefaultOpen story renders snapshot 1`] = `
 </div>
 `;
 
+exports[`<Accordion /> EmptyStackedOpen story renders snapshot 1`] = `
+<div
+  style="margin: 0.5rem;"
+>
+  <div
+    class=""
+  >
+    <div
+      class="accordion-row"
+    >
+      <button
+        aria-controls="headlessui-disclosure-panel-:r17:"
+        aria-expanded="true"
+        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--empty"
+        data-headlessui-state="open"
+        id="headlessui-disclosure-button-:r16:"
+        type="button"
+      >
+        <h2
+          class="heading heading--size-h2 accordion-button__heading"
+        >
+          Massa quam egestas massa.
+        </h2>
+      </button>
+      <div
+        class="accordion-panel accordion-panel--hidden"
+        data-headlessui-state="open"
+        id="headlessui-disclosure-panel-:r17:"
+      />
+    </div>
+    <div
+      class="accordion-row"
+    >
+      <button
+        aria-controls="headlessui-disclosure-panel-:r19:"
+        aria-expanded="true"
+        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        data-headlessui-state="open"
+        id="headlessui-disclosure-button-:r18:"
+        type="button"
+      >
+        <h2
+          class="heading heading--size-h2 accordion-button__heading"
+        >
+          Massa quam egestas massa.
+        </h2>
+        <svg
+          class="icon accordion-button__icon accordion-button__icon--open"
+          fill="currentColor"
+          height="1.625rem"
+          role="img"
+          style="--icon-size: 1.625rem;"
+          viewBox="0 0 24 24"
+          width="1.625rem"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            hide content
+          </title>
+          <path
+            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+          />
+        </svg>
+      </button>
+      <div
+        class="accordion-panel"
+        data-headlessui-state="open"
+        id="headlessui-disclosure-panel-:r19:"
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
+      </div>
+    </div>
+    <div
+      class="accordion-row"
+    >
+      <button
+        aria-controls="headlessui-disclosure-panel-:r1b:"
+        aria-expanded="true"
+        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        data-headlessui-state="open"
+        id="headlessui-disclosure-button-:r1a:"
+        type="button"
+      >
+        <h2
+          class="heading heading--size-h2 accordion-button__heading"
+        >
+          Massa quam egestas massa.
+        </h2>
+        <svg
+          class="icon accordion-button__icon accordion-button__icon--open"
+          fill="currentColor"
+          height="1.625rem"
+          role="img"
+          style="--icon-size: 1.625rem;"
+          viewBox="0 0 24 24"
+          width="1.625rem"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            hide content
+          </title>
+          <path
+            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+          />
+        </svg>
+      </button>
+      <div
+        class="accordion-panel"
+        data-headlessui-state="open"
+        id="headlessui-disclosure-panel-:r1b:"
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
+      </div>
+    </div>
+    <div
+      class="accordion-row"
+    >
+      <button
+        aria-controls="headlessui-disclosure-panel-:r1d:"
+        aria-expanded="true"
+        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        data-headlessui-state="open"
+        id="headlessui-disclosure-button-:r1c:"
+        type="button"
+      >
+        <h2
+          class="heading heading--size-h2 accordion-button__heading"
+        >
+          Massa quam egestas massa.
+        </h2>
+        <svg
+          class="icon accordion-button__icon accordion-button__icon--open"
+          fill="currentColor"
+          height="1.625rem"
+          role="img"
+          style="--icon-size: 1.625rem;"
+          viewBox="0 0 24 24"
+          width="1.625rem"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            hide content
+          </title>
+          <path
+            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+          />
+        </svg>
+      </button>
+      <div
+        class="accordion-panel"
+        data-headlessui-state="open"
+        id="headlessui-disclosure-panel-:r1d:"
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<Accordion /> Small story renders snapshot 1`] = `
 <div
   style="margin: 0.5rem;"
@@ -158,12 +318,12 @@ exports[`<Accordion /> SmallOpen story renders snapshot 1`] = `
       class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r17:"
+        aria-controls="headlessui-disclosure-panel-:r1f:"
         aria-expanded="true"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm"
         data-headlessui-state="open"
         data-testid="accordion-button"
-        id="headlessui-disclosure-button-:r16:"
+        id="headlessui-disclosure-button-:r1e:"
         type="button"
       >
         <h2
@@ -193,7 +353,7 @@ exports[`<Accordion /> SmallOpen story renders snapshot 1`] = `
         class="accordion-panel accordion-panel--sm"
         data-headlessui-state="open"
         data-testid="accordion-panel"
-        id="headlessui-disclosure-panel-:r17:"
+        id="headlessui-disclosure-panel-:r1f:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -373,11 +533,11 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
       class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r19:"
+        aria-controls="headlessui-disclosure-panel-:r1h:"
         aria-expanded="true"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r18:"
+        id="headlessui-disclosure-button-:r1g:"
         type="button"
       >
         <h2
@@ -406,7 +566,7 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r19:"
+        id="headlessui-disclosure-panel-:r1h:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -415,11 +575,11 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
       class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r1b:"
+        aria-controls="headlessui-disclosure-panel-:r1j:"
         aria-expanded="true"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1a:"
+        id="headlessui-disclosure-button-:r1i:"
         type="button"
       >
         <h2
@@ -448,7 +608,7 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1b:"
+        id="headlessui-disclosure-panel-:r1j:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -457,11 +617,11 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
       class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r1d:"
+        aria-controls="headlessui-disclosure-panel-:r1l:"
         aria-expanded="true"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1c:"
+        id="headlessui-disclosure-button-:r1k:"
         type="button"
       >
         <h2
@@ -490,7 +650,7 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1d:"
+        id="headlessui-disclosure-panel-:r1l:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -499,11 +659,11 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
       class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r1f:"
+        aria-controls="headlessui-disclosure-panel-:r1n:"
         aria-expanded="true"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1e:"
+        id="headlessui-disclosure-button-:r1m:"
         type="button"
       >
         <h2
@@ -532,7 +692,7 @@ exports[`<Accordion /> StackedOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1f:"
+        id="headlessui-disclosure-panel-:r1n:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -712,11 +872,11 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
       class="accordion-row accordion-row--outline"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r1p:"
+        aria-controls="headlessui-disclosure-panel-:r21:"
         aria-expanded="true"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--outline"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1o:"
+        id="headlessui-disclosure-button-:r20:"
         type="button"
       >
         <h2
@@ -745,7 +905,7 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel accordion-panel--outline"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1p:"
+        id="headlessui-disclosure-panel-:r21:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -754,11 +914,11 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
       class="accordion-row accordion-row--outline"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r1r:"
+        aria-controls="headlessui-disclosure-panel-:r23:"
         aria-expanded="true"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--outline"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1q:"
+        id="headlessui-disclosure-button-:r22:"
         type="button"
       >
         <h2
@@ -787,7 +947,7 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel accordion-panel--outline"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1r:"
+        id="headlessui-disclosure-panel-:r23:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -796,11 +956,11 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
       class="accordion-row accordion-row--outline"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r1t:"
+        aria-controls="headlessui-disclosure-panel-:r25:"
         aria-expanded="true"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--outline"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1s:"
+        id="headlessui-disclosure-button-:r24:"
         type="button"
       >
         <h2
@@ -829,7 +989,7 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel accordion-panel--outline"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1t:"
+        id="headlessui-disclosure-panel-:r25:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -838,11 +998,11 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
       class="accordion-row accordion-row--outline"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r1v:"
+        aria-controls="headlessui-disclosure-panel-:r27:"
         aria-expanded="true"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--outline"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1u:"
+        id="headlessui-disclosure-button-:r26:"
         type="button"
       >
         <h2
@@ -871,7 +1031,7 @@ exports[`<Accordion /> StackedOutlineOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel accordion-panel--outline"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1v:"
+        id="headlessui-disclosure-panel-:r27:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -1051,11 +1211,11 @@ exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
       class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r1h:"
+        aria-controls="headlessui-disclosure-panel-:r1p:"
         aria-expanded="true"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1g:"
+        id="headlessui-disclosure-button-:r1o:"
         type="button"
       >
         <h2
@@ -1084,7 +1244,7 @@ exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel accordion-panel--sm"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1h:"
+        id="headlessui-disclosure-panel-:r1p:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -1093,11 +1253,11 @@ exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
       class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r1j:"
+        aria-controls="headlessui-disclosure-panel-:r1r:"
         aria-expanded="true"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1i:"
+        id="headlessui-disclosure-button-:r1q:"
         type="button"
       >
         <h2
@@ -1126,7 +1286,7 @@ exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel accordion-panel--sm"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1j:"
+        id="headlessui-disclosure-panel-:r1r:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -1135,11 +1295,11 @@ exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
       class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r1l:"
+        aria-controls="headlessui-disclosure-panel-:r1t:"
         aria-expanded="true"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1k:"
+        id="headlessui-disclosure-button-:r1s:"
         type="button"
       >
         <h2
@@ -1168,7 +1328,7 @@ exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel accordion-panel--sm"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1l:"
+        id="headlessui-disclosure-panel-:r1t:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -1177,11 +1337,11 @@ exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
       class="accordion-row"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r1n:"
+        aria-controls="headlessui-disclosure-panel-:r1v:"
         aria-expanded="true"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r1m:"
+        id="headlessui-disclosure-button-:r1u:"
         type="button"
       >
         <h2
@@ -1210,7 +1370,7 @@ exports[`<Accordion /> StackedSmallOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel accordion-panel--sm"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r1n:"
+        id="headlessui-disclosure-panel-:r1v:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -1390,11 +1550,11 @@ exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
       class="accordion-row accordion-row--outline"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r21:"
+        aria-controls="headlessui-disclosure-panel-:r29:"
         aria-expanded="true"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm accordion-button--outline"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r20:"
+        id="headlessui-disclosure-button-:r28:"
         type="button"
       >
         <h2
@@ -1423,7 +1583,7 @@ exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel accordion-panel--sm accordion-panel--outline"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r21:"
+        id="headlessui-disclosure-panel-:r29:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -1432,11 +1592,11 @@ exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
       class="accordion-row accordion-row--outline"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r23:"
+        aria-controls="headlessui-disclosure-panel-:r2b:"
         aria-expanded="true"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm accordion-button--outline"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r22:"
+        id="headlessui-disclosure-button-:r2a:"
         type="button"
       >
         <h2
@@ -1465,7 +1625,7 @@ exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel accordion-panel--sm accordion-panel--outline"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r23:"
+        id="headlessui-disclosure-panel-:r2b:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -1474,11 +1634,11 @@ exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
       class="accordion-row accordion-row--outline"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r25:"
+        aria-controls="headlessui-disclosure-panel-:r2d:"
         aria-expanded="true"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm accordion-button--outline"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r24:"
+        id="headlessui-disclosure-button-:r2c:"
         type="button"
       >
         <h2
@@ -1507,7 +1667,7 @@ exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel accordion-panel--sm accordion-panel--outline"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r25:"
+        id="headlessui-disclosure-panel-:r2d:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -1516,11 +1676,11 @@ exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
       class="accordion-row accordion-row--outline"
     >
       <button
-        aria-controls="headlessui-disclosure-panel-:r27:"
+        aria-controls="headlessui-disclosure-panel-:r2f:"
         aria-expanded="true"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button accordion-button--sm accordion-button--outline"
         data-headlessui-state="open"
-        id="headlessui-disclosure-button-:r26:"
+        id="headlessui-disclosure-button-:r2e:"
         type="button"
       >
         <h2
@@ -1549,7 +1709,7 @@ exports[`<Accordion /> StackedSmallOutlineOpen story renders snapshot 1`] = `
       <div
         class="accordion-panel accordion-panel--sm accordion-panel--outline"
         data-headlessui-state="open"
-        id="headlessui-disclosure-panel-:r27:"
+        id="headlessui-disclosure-panel-:r2f:"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet, massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At tristique et ullamcorper rhoncus amet pharetra aliquet tortor. Suscipit dui, nunc sit dui tellus massa laoreet tellus.
       </div>
@@ -1572,7 +1732,7 @@ exports[`<Accordion /> UsingComplexHeaders story renders snapshot 1`] = `
         aria-expanded="false"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
         data-headlessui-state=""
-        id="headlessui-disclosure-button-:r2a:"
+        id="headlessui-disclosure-button-:r2i:"
         type="button"
       >
         <h2
@@ -1624,7 +1784,7 @@ exports[`<Accordion /> UsingComplexHeaders story renders snapshot 1`] = `
         aria-expanded="false"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
         data-headlessui-state=""
-        id="headlessui-disclosure-button-:r2c:"
+        id="headlessui-disclosure-button-:r2k:"
         type="button"
       >
         <h2
@@ -1687,7 +1847,7 @@ exports[`<Accordion /> UsingNumberIconInHeaders story renders snapshot 1`] = `
         aria-expanded="false"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
         data-headlessui-state=""
-        id="headlessui-disclosure-button-:r2e:"
+        id="headlessui-disclosure-button-:r2m:"
         type="button"
       >
         <h2
@@ -1736,7 +1896,7 @@ exports[`<Accordion /> UsingNumberIconInHeaders story renders snapshot 1`] = `
         aria-expanded="false"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
         data-headlessui-state=""
-        id="headlessui-disclosure-button-:r2g:"
+        id="headlessui-disclosure-button-:r2o:"
         type="button"
       >
         <h2
@@ -1797,7 +1957,7 @@ exports[`<Accordion /> UsingRenderProp story renders snapshot 1`] = `
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
         data-headlessui-state=""
         data-testid="accordion-button"
-        id="headlessui-disclosure-button-:r28:"
+        id="headlessui-disclosure-button-:r2g:"
         type="button"
       >
         <h2