New source found from dndbeyond.com

ddb_main/subApps/sheet/components/Sidebar/panes/AbilitySavingThrowsPane/AbilitySavingThrowsPane.tsx

@@ -1,9 +1,8 @@
 import { ComponentType, FC, HTMLAttributes, ReactNode } from "react";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 
 import {
   AbilityIcon,
-  Collapsible,
   DarkModeNegativeBonusNegativeSvg,
   DarkModePositiveBonusPositiveSvg,
   NegativeBonusNegativeSvg,
@@ -18,12 +17,14 @@ import {
   ValueUtils,
 } from "@dndbeyond/character-rules-engine/es";
 
+import { Accordion } from "~/components/Accordion";
 import { HtmlContent } from "~/components/HtmlContent";
 import { NumberDisplay } from "~/components/NumberDisplay";
 import { RuleKeyEnum } from "~/constants";
 import { useCharacterTheme } from "~/contexts/CharacterTheme";
 import { useSidebar } from "~/contexts/Sidebar";
 import { useCharacterEngine } from "~/hooks/useCharacterEngine";
+import { useDispatch } from "~/hooks/useDispatch";
 import { useRuleData } from "~/hooks/useRuleData";
 import { Header } from "~/subApps/sheet/components/Sidebar/components/Header";
 import { Preview } from "~/subApps/sheet/components/Sidebar/components/Preview";
@@ -126,11 +127,7 @@ export const AbilitySavingThrowsPane: FC<Props> = ({
         </span>
       </Header>
       {!isReadonly && (
-        <Collapsible
-          layoutType={"minimal"}
-          header="Customize"
-          className={styles.customize}
-        >
+        <Accordion variant="minimal" size="x-small" summary="Customize" themed>
           <EditorBox className={styles.editorBox}>
             <ValueEditor
               dataLookup={ValueUtils.getEntityData(
@@ -148,7 +145,7 @@ export const AbilitySavingThrowsPane: FC<Props> = ({
               ruleData={ruleData}
             />
           </EditorBox>
-        </Collapsible>
+        </Accordion>
       )}
       {situationalBonusSavingThrowsInfo && (
         <div className={styles.situational}>