@storybook/addon-a11y 10.1.0-alpha.0 → 10.1.0-alpha.10

package/dist/manager.js

@@ -12,13 +12,13 @@ import {
 } from "./_browser-chunks/chunk-JFJ5UJ7Q.js";
 
 // src/manager.tsx
-import React10 from "react";
+import React9 from "react";
 import { Badge as Badge3 } from "storybook/internal/components";
 import { addons, types, useAddonState as useAddonState2, useStorybookApi as useStorybookApi3 } from "storybook/manager-api";
 
 // src/components/A11YPanel.tsx
-import React7, { useMemo as useMemo3 } from "react";
-import { Badge as Badge2, Button as Button2 } from "storybook/internal/components";
+import React6, { useMemo as useMemo3 } from "react";
+import { Badge as Badge2, Button as Button4 } from "storybook/internal/components";
 import { SyncIcon as SyncIcon2 } from "@storybook/icons";
 import { styled as styled5 } from "storybook/theming";
 
@@ -958,7 +958,7 @@ var useA11yContext = /* @__PURE__ */ __name(() => useContext(A11yContext), "useA
 
 // src/components/Report/Report.tsx
 import React3 from "react";
-import { Badge, EmptyTabContent, IconButton } from "storybook/internal/components";
+import { Badge, Button as Button2, EmptyTabContent } from "storybook/internal/components";
 import { ChevronSmallDownIcon } from "@storybook/icons";
 import { styled as styled2 } from "storybook/theming";
 
@@ -1096,7 +1096,7 @@ import { forwardRef as $98Iye$forwardRef, createElement as $98Iye$createElement,
 // ../../node_modules/@radix-ui/react-collection/dist/index.mjs
 import $6vYhU$react from "react";
 
-// ../../node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-compose-refs/dist/index.mjs
+// ../../node_modules/@radix-ui/react-compose-refs/dist/index.mjs
 import { useCallback as $3vqmr$useCallback } from "react";
 function $6ed0406888f73fc4$var$setRef(ref, value) {
   if (typeof ref === "function") ref(value);
@@ -1270,28 +1270,10 @@ function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name) {
 }
 __name($e02a7d9cb1dc128c$export$c74125a8e3af6bb2, "$e02a7d9cb1dc128c$export$c74125a8e3af6bb2");
 
-// ../../node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-compose-refs/dist/index.mjs
-import { useCallback as $3vqmr$useCallback2 } from "react";
-function $6ed0406888f73fc4$var$setRef2(ref, value) {
-  if (typeof ref === "function") ref(value);
-  else if (ref !== null && ref !== void 0) ref.current = value;
-}
-__name($6ed0406888f73fc4$var$setRef2, "$6ed0406888f73fc4$var$setRef");
-function $6ed0406888f73fc4$export$43e446d32b3d21af2(...refs) {
-  return (node) => refs.forEach(
-    (ref) => $6ed0406888f73fc4$var$setRef2(ref, node)
-  );
-}
-__name($6ed0406888f73fc4$export$43e446d32b3d21af2, "$6ed0406888f73fc4$export$43e446d32b3d21af");
-function $6ed0406888f73fc4$export$c7b2cbe3552a0d052(...refs) {
-  return $3vqmr$useCallback2($6ed0406888f73fc4$export$43e446d32b3d21af2(...refs), refs);
-}
-__name($6ed0406888f73fc4$export$c7b2cbe3552a0d052, "$6ed0406888f73fc4$export$c7b2cbe3552a0d05");
-
 // ../../node_modules/@radix-ui/react-id/dist/index.mjs
 import * as $2AODx$react from "react";
 
-// ../../node_modules/@radix-ui/react-id/node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
+// ../../node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
 import { useLayoutEffect as $dxlwH$useLayoutEffect } from "react";
 var $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? $dxlwH$useLayoutEffect : () => {
 };
@@ -1312,11 +1294,11 @@ function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId) {
 }
 __name($1746a345f3d73bb7$export$f680877a34711e37, "$1746a345f3d73bb7$export$f680877a34711e37");
 
-// ../../node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-primitive/dist/index.mjs
+// ../../node_modules/@radix-ui/react-primitive/dist/index.mjs
 import { forwardRef as $4q5Fq$forwardRef, useEffect as $4q5Fq$useEffect, createElement as $4q5Fq$createElement } from "react";
 import { flushSync as $4q5Fq$flushSync } from "react-dom";
 
-// ../../node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-slot/dist/index.mjs
+// ../../node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot/dist/index.mjs
 import { forwardRef as $9IrjX$forwardRef2, Children as $9IrjX$Children2, isValidElement as $9IrjX$isValidElement2, createElement as $9IrjX$createElement2, cloneElement as $9IrjX$cloneElement2, Fragment as $9IrjX$Fragment2 } from "react";
 var $5e63c961fc1ce211$export$8c6ed5c666ac13602 = $9IrjX$forwardRef2((props, forwardedRef) => {
   const { children, ...slotProps } = props;
@@ -1343,7 +1325,7 @@ var $5e63c961fc1ce211$var$SlotClone2 = $9IrjX$forwardRef2((props, forwardedRef)
   const { children, ...slotProps } = props;
   if ($9IrjX$isValidElement2(children)) return $9IrjX$cloneElement2(children, {
     ...$5e63c961fc1ce211$var$mergeProps2(slotProps, children.props),
-    ref: forwardedRef ? $6ed0406888f73fc4$export$43e446d32b3d21af2(forwardedRef, children.ref) : children.ref
+    ref: forwardedRef ? $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref) : children.ref
   });
   return $9IrjX$Children2.count(children) > 1 ? $9IrjX$Children2.only(null) : null;
 });
@@ -1385,7 +1367,7 @@ function $5e63c961fc1ce211$var$mergeProps2(slotProps, childProps) {
 }
 __name($5e63c961fc1ce211$var$mergeProps2, "$5e63c961fc1ce211$var$mergeProps");
 
-// ../../node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-primitive/dist/index.mjs
+// ../../node_modules/@radix-ui/react-primitive/dist/index.mjs
 var $8927f6f2acc4f386$var$NODES = [
   "a",
   "button",
@@ -1422,7 +1404,7 @@ var $8927f6f2acc4f386$export$250ffa63cdc0d034 = $8927f6f2acc4f386$var$NODES.redu
   };
 }, {});
 
-// ../../node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs
+// ../../node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs
 import { useRef as $lwiWj$useRef, useEffect as $lwiWj$useEffect, useMemo as $lwiWj$useMemo } from "react";
 function $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(callback) {
   const callbackRef = $lwiWj$useRef(callback);
@@ -1441,25 +1423,6 @@ __name($b1b2314f5f9a1d84$export$25bec8c6f54ee79a, "$b1b2314f5f9a1d84$export$25be
 
 // ../../node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
 import { useCallback as $bnPw9$useCallback, useState as $bnPw9$useState, useRef as $bnPw9$useRef, useEffect as $bnPw9$useEffect } from "react";
-
-// ../../node_modules/@radix-ui/react-use-controllable-state/node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs
-import { useRef as $lwiWj$useRef2, useEffect as $lwiWj$useEffect2, useMemo as $lwiWj$useMemo2 } from "react";
-function $b1b2314f5f9a1d84$export$25bec8c6f54ee79a2(callback) {
-  const callbackRef = $lwiWj$useRef2(callback);
-  $lwiWj$useEffect2(() => {
-    callbackRef.current = callback;
-  });
-  return $lwiWj$useMemo2(
-    () => (...args) => {
-      var _callbackRef$current;
-      return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args);
-    },
-    []
-  );
-}
-__name($b1b2314f5f9a1d84$export$25bec8c6f54ee79a2, "$b1b2314f5f9a1d84$export$25bec8c6f54ee79a");
-
-// ../../node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
 function $71cd76cc60e0454e$export$6f32135080cb4c3({ prop, defaultProp, onChange = /* @__PURE__ */ __name(() => {
 }, "onChange") }) {
   const [uncontrolledProp, setUncontrolledProp] = $71cd76cc60e0454e$var$useUncontrolledState({
@@ -1468,7 +1431,7 @@ function $71cd76cc60e0454e$export$6f32135080cb4c3({ prop, defaultProp, onChange
   });
   const isControlled = prop !== void 0;
   const value1 = isControlled ? prop : uncontrolledProp;
-  const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a2(onChange);
+  const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange);
   const setValue = $bnPw9$useCallback((nextValue) => {
     if (isControlled) {
       const setter = nextValue;
@@ -1491,7 +1454,7 @@ function $71cd76cc60e0454e$var$useUncontrolledState({ defaultProp, onChange }) {
   const uncontrolledState = $bnPw9$useState(defaultProp);
   const [value] = uncontrolledState;
   const prevValueRef = $bnPw9$useRef(value);
-  const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a2(onChange);
+  const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange);
   $bnPw9$useEffect(() => {
     if (prevValueRef.current !== value) {
       handleChange(value);
@@ -1542,7 +1505,7 @@ Object.assign($d7bdfb9eb0fdf311$export$8699f7c8af148338, {
 var $d7bdfb9eb0fdf311$var$RovingFocusGroupImpl = $98Iye$forwardRef((props, forwardedRef) => {
   const { __scopeRovingFocusGroup, orientation, loop = false, dir, currentTabStopId: currentTabStopIdProp, defaultCurrentTabStopId, onCurrentTabStopIdChange, onEntryFocus, ...groupProps } = props;
   const ref = $98Iye$useRef(null);
-  const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d052(forwardedRef, ref);
+  const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
   const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir);
   const [currentTabStopId = null, setCurrentTabStopId] = $71cd76cc60e0454e$export$6f32135080cb4c3({
     prop: currentTabStopIdProp,
@@ -1754,31 +1717,6 @@ var $d7bdfb9eb0fdf311$export$6d08773d2e66f8f2 = $d7bdfb9eb0fdf311$export$ab9df7c
 // ../../node_modules/@radix-ui/react-presence/dist/index.mjs
 import { Children as $iqq3r$Children, cloneElement as $iqq3r$cloneElement, useState as $iqq3r$useState, useRef as $iqq3r$useRef, useEffect as $iqq3r$useEffect, useCallback as $iqq3r$useCallback, useReducer as $iqq3r$useReducer } from "react";
 import { flushSync as $iqq3r$flushSync } from "react-dom";
-
-// ../../node_modules/@radix-ui/react-presence/node_modules/@radix-ui/react-compose-refs/dist/index.mjs
-import { useCallback as $3vqmr$useCallback3 } from "react";
-function $6ed0406888f73fc4$var$setRef3(ref, value) {
-  if (typeof ref === "function") ref(value);
-  else if (ref !== null && ref !== void 0) ref.current = value;
-}
-__name($6ed0406888f73fc4$var$setRef3, "$6ed0406888f73fc4$var$setRef");
-function $6ed0406888f73fc4$export$43e446d32b3d21af3(...refs) {
-  return (node) => refs.forEach(
-    (ref) => $6ed0406888f73fc4$var$setRef3(ref, node)
-  );
-}
-__name($6ed0406888f73fc4$export$43e446d32b3d21af3, "$6ed0406888f73fc4$export$43e446d32b3d21af");
-function $6ed0406888f73fc4$export$c7b2cbe3552a0d053(...refs) {
-  return $3vqmr$useCallback3($6ed0406888f73fc4$export$43e446d32b3d21af3(...refs), refs);
-}
-__name($6ed0406888f73fc4$export$c7b2cbe3552a0d053, "$6ed0406888f73fc4$export$c7b2cbe3552a0d05");
-
-// ../../node_modules/@radix-ui/react-presence/node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
-import { useLayoutEffect as $dxlwH$useLayoutEffect2 } from "react";
-var $9f79659886946c16$export$e5c5a5f917a5871c2 = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? $dxlwH$useLayoutEffect2 : () => {
-};
-
-// ../../node_modules/@radix-ui/react-presence/dist/index.mjs
 function $fe963b355347cc68$export$3e6543de14f8614f(initialState, machine) {
   return $iqq3r$useReducer((state, event) => {
     const nextState = machine[state][event];
@@ -1792,7 +1730,7 @@ var $921a889cee6df7e8$export$99c2b779aa4e8b8b = /* @__PURE__ */ __name((props) =
   const child = typeof children === "function" ? children({
     present: presence.isPresent
   }) : $iqq3r$Children.only(children);
-  const ref = $6ed0406888f73fc4$export$c7b2cbe3552a0d053(presence.ref, child.ref);
+  const ref = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(presence.ref, child.ref);
   const forceMount = typeof children === "function";
   return forceMount || presence.isPresent ? $iqq3r$cloneElement(child, {
     ref
@@ -1824,7 +1762,7 @@ function $921a889cee6df7e8$var$usePresence(present) {
   }, [
     state
   ]);
-  $9f79659886946c16$export$e5c5a5f917a5871c2(() => {
+  $9f79659886946c16$export$e5c5a5f917a5871c(() => {
     const styles = stylesRef.current;
     const wasPresent = prevPresentRef.current;
     const hasPresentChanged = wasPresent !== present;
@@ -1845,7 +1783,7 @@ function $921a889cee6df7e8$var$usePresence(present) {
     present,
     send
   ]);
-  $9f79659886946c16$export$e5c5a5f917a5871c2(() => {
+  $9f79659886946c16$export$e5c5a5f917a5871c(() => {
     if (node1) {
       const handleAnimationEnd = /* @__PURE__ */ __name((event) => {
         const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
@@ -1890,132 +1828,6 @@ function $921a889cee6df7e8$var$getAnimationName(styles) {
 }
 __name($921a889cee6df7e8$var$getAnimationName, "$921a889cee6df7e8$var$getAnimationName");
 
-// ../../node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive/dist/index.mjs
-import { forwardRef as $4q5Fq$forwardRef2, useEffect as $4q5Fq$useEffect2, createElement as $4q5Fq$createElement2 } from "react";
-import { flushSync as $4q5Fq$flushSync2 } from "react-dom";
-
-// ../../node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-slot/dist/index.mjs
-import { forwardRef as $9IrjX$forwardRef3, Children as $9IrjX$Children3, isValidElement as $9IrjX$isValidElement3, createElement as $9IrjX$createElement3, cloneElement as $9IrjX$cloneElement3, Fragment as $9IrjX$Fragment3 } from "react";
-
-// ../../node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-compose-refs/dist/index.mjs
-import { useCallback as $3vqmr$useCallback4 } from "react";
-function $6ed0406888f73fc4$var$setRef4(ref, value) {
-  if (typeof ref === "function") ref(value);
-  else if (ref !== null && ref !== void 0) ref.current = value;
-}
-__name($6ed0406888f73fc4$var$setRef4, "$6ed0406888f73fc4$var$setRef");
-function $6ed0406888f73fc4$export$43e446d32b3d21af4(...refs) {
-  return (node) => refs.forEach(
-    (ref) => $6ed0406888f73fc4$var$setRef4(ref, node)
-  );
-}
-__name($6ed0406888f73fc4$export$43e446d32b3d21af4, "$6ed0406888f73fc4$export$43e446d32b3d21af");
-
-// ../../node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-slot/dist/index.mjs
-var $5e63c961fc1ce211$export$8c6ed5c666ac13603 = $9IrjX$forwardRef3((props, forwardedRef) => {
-  const { children, ...slotProps } = props;
-  const childrenArray = $9IrjX$Children3.toArray(children);
-  const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable3);
-  if (slottable) {
-    const newElement = slottable.props.children;
-    const newChildren = childrenArray.map((child) => {
-      if (child === slottable) {
-        if ($9IrjX$Children3.count(newElement) > 1) return $9IrjX$Children3.only(null);
-        return $9IrjX$isValidElement3(newElement) ? newElement.props.children : null;
-      } else return child;
-    });
-    return $9IrjX$createElement3($5e63c961fc1ce211$var$SlotClone3, _extends({}, slotProps, {
-      ref: forwardedRef
-    }), $9IrjX$isValidElement3(newElement) ? $9IrjX$cloneElement3(newElement, void 0, newChildren) : null);
-  }
-  return $9IrjX$createElement3($5e63c961fc1ce211$var$SlotClone3, _extends({}, slotProps, {
-    ref: forwardedRef
-  }), children);
-});
-$5e63c961fc1ce211$export$8c6ed5c666ac13603.displayName = "Slot";
-var $5e63c961fc1ce211$var$SlotClone3 = $9IrjX$forwardRef3((props, forwardedRef) => {
-  const { children, ...slotProps } = props;
-  if ($9IrjX$isValidElement3(children)) return $9IrjX$cloneElement3(children, {
-    ...$5e63c961fc1ce211$var$mergeProps3(slotProps, children.props),
-    ref: forwardedRef ? $6ed0406888f73fc4$export$43e446d32b3d21af4(forwardedRef, children.ref) : children.ref
-  });
-  return $9IrjX$Children3.count(children) > 1 ? $9IrjX$Children3.only(null) : null;
-});
-$5e63c961fc1ce211$var$SlotClone3.displayName = "SlotClone";
-var $5e63c961fc1ce211$export$d9f1ccf0bdb05d453 = /* @__PURE__ */ __name(({ children }) => {
-  return $9IrjX$createElement3($9IrjX$Fragment3, null, children);
-}, "$5e63c961fc1ce211$export$d9f1ccf0bdb05d45");
-function $5e63c961fc1ce211$var$isSlottable3(child) {
-  return $9IrjX$isValidElement3(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d453;
-}
-__name($5e63c961fc1ce211$var$isSlottable3, "$5e63c961fc1ce211$var$isSlottable");
-function $5e63c961fc1ce211$var$mergeProps3(slotProps, childProps) {
-  const overrideProps = {
-    ...childProps
-  };
-  for (const propName in childProps) {
-    const slotPropValue = slotProps[propName];
-    const childPropValue = childProps[propName];
-    const isHandler = /^on[A-Z]/.test(propName);
-    if (isHandler) {
-      if (slotPropValue && childPropValue) overrideProps[propName] = (...args) => {
-        childPropValue(...args);
-        slotPropValue(...args);
-      };
-      else if (slotPropValue) overrideProps[propName] = slotPropValue;
-    } else if (propName === "style") overrideProps[propName] = {
-      ...slotPropValue,
-      ...childPropValue
-    };
-    else if (propName === "className") overrideProps[propName] = [
-      slotPropValue,
-      childPropValue
-    ].filter(Boolean).join(" ");
-  }
-  return {
-    ...slotProps,
-    ...overrideProps
-  };
-}
-__name($5e63c961fc1ce211$var$mergeProps3, "$5e63c961fc1ce211$var$mergeProps");
-
-// ../../node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive/dist/index.mjs
-var $8927f6f2acc4f386$var$NODES2 = [
-  "a",
-  "button",
-  "div",
-  "form",
-  "h2",
-  "h3",
-  "img",
-  "input",
-  "label",
-  "li",
-  "nav",
-  "ol",
-  "p",
-  "span",
-  "svg",
-  "ul"
-];
-var $8927f6f2acc4f386$export$250ffa63cdc0d0342 = $8927f6f2acc4f386$var$NODES2.reduce((primitive, node) => {
-  const Node = $4q5Fq$forwardRef2((props, forwardedRef) => {
-    const { asChild, ...primitiveProps } = props;
-    const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac13603 : node;
-    $4q5Fq$useEffect2(() => {
-      window[Symbol.for("radix-ui")] = true;
-    }, []);
-    return $4q5Fq$createElement2(Comp, _extends({}, primitiveProps, {
-      ref: forwardedRef
-    }));
-  });
-  Node.displayName = `Primitive.${node}`;
-  return {
-    ...primitive,
-    [node]: Node
-  };
-}, {});
-
 // ../../node_modules/@radix-ui/react-tabs/dist/index.mjs
 var $69cb30bb0017df05$var$TABS_NAME = "Tabs";
 var [$69cb30bb0017df05$var$createTabsContext, $69cb30bb0017df05$export$355f5bd209d7b13a] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($69cb30bb0017df05$var$TABS_NAME, [
@@ -2039,7 +1851,7 @@ var $69cb30bb0017df05$export$b2539bed5023c21c = $1IHzk$forwardRef((props, forwar
     orientation,
     dir: direction,
     activationMode
-  }, $1IHzk$createElement($8927f6f2acc4f386$export$250ffa63cdc0d0342.div, _extends({
+  }, $1IHzk$createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
     dir: direction,
     "data-orientation": orientation
   }, tabsProps, {
@@ -2060,7 +1872,7 @@ var $69cb30bb0017df05$export$9712d22edc0d78c1 = $1IHzk$forwardRef((props, forwar
     orientation: context.orientation,
     dir: context.dir,
     loop
-  }), $1IHzk$createElement($8927f6f2acc4f386$export$250ffa63cdc0d0342.div, _extends({
+  }), $1IHzk$createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
     role: "tablist",
     "aria-orientation": context.orientation
   }, listProps, {
@@ -2083,7 +1895,7 @@ var $69cb30bb0017df05$export$8114b9fdfdf9f3ba = $1IHzk$forwardRef((props, forwar
   }, rovingFocusGroupScope, {
     focusable: !disabled,
     active: isSelected
-  }), $1IHzk$createElement($8927f6f2acc4f386$export$250ffa63cdc0d0342.button, _extends({
+  }), $1IHzk$createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.button, _extends({
     type: "button",
     role: "tab",
     "aria-selected": isSelected,
@@ -2133,7 +1945,7 @@ var $69cb30bb0017df05$export$bd905d70e8fd2ebb = $1IHzk$forwardRef((props, forwar
     {
       present: forceMount || isSelected
     },
-    ({ present }) => $1IHzk$createElement($8927f6f2acc4f386$export$250ffa63cdc0d0342.div, _extends({
+    ({ present }) => $1IHzk$createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
       "data-state": isSelected ? "active" : "inactive",
       "data-orientation": context.orientation,
       role: "tabpanel",
@@ -2264,7 +2076,7 @@ var CopyButton = /* @__PURE__ */ __name(({ onClick }) => {
     const timeout = setTimeout(() => setCopied(false), 2e3);
     return () => clearTimeout(timeout);
   }, [onClick]);
-  return React2.createElement(Button, { onClick: handleClick }, copied ? React2.createElement(CheckIcon, null) : React2.createElement(CopyIcon, null), " ", copied ? "Copied" : "Copy link");
+  return React2.createElement(Button, { ariaLabel: false, onClick: handleClick }, copied ? React2.createElement(CheckIcon, null) : React2.createElement(CopyIcon, null), " ", copied ? "Copied" : "Copy link");
 }, "CopyButton");
 var Details = /* @__PURE__ */ __name(({ id, item, type, selection, handleSelectionChange }) => React2.createElement(Wrapper, { id }, React2.createElement(Info, null, React2.createElement(RuleId, null, item.id), React2.createElement(Description, null, getFriendlySummaryForAxeResult(item), " ", React2.createElement(Link, { href: item.helpUrl, target: "_blank", rel: "noopener noreferrer", withArrow: true }, "Learn how to resolve this violation"))), React2.createElement(
   $69cb30bb0017df05$export$be92b6f5f03c0fe9,
@@ -2277,7 +2089,7 @@ var Details = /* @__PURE__ */ __name(({ id, item, type, selection, handleSelecti
   },
   React2.createElement(Columns, null, React2.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, { "aria-label": type }, item.nodes.map((node, index) => {
     const key = `${type}.${item.id}.${index + 1}`;
-    return React2.createElement(Fragment, { key }, React2.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, { value: key, asChild: true }, React2.createElement(Item, { variant: "ghost", size: "medium", id: key }, index + 1, ". ", node.html)), React2.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { value: key, asChild: true }, React2.createElement(Content, { side: "left" }, getContent(node))));
+    return React2.createElement(Fragment, { key }, React2.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, { value: key, asChild: true }, React2.createElement(Item, { ariaLabel: false, variant: "ghost", size: "medium", id: key }, index + 1, ". ", node.html)), React2.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { value: key, asChild: true }, React2.createElement(Content, { side: "left" }, getContent(node))));
   })), item.nodes.map((node, index) => {
     const key = `${type}.${item.id}.${index + 1}`;
     return React2.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { key, value: key, asChild: true }, React2.createElement(Content, { side: "right" }, getContent(node)));
@@ -2287,7 +2099,7 @@ function getContent(node) {
   const { handleCopyLink, handleJumpToElement } = useA11yContext();
   const { any, all, none, html, target } = node;
   const rules = [...any, ...all, ...none];
-  return React2.createElement(React2.Fragment, null, React2.createElement(Messages, null, rules.map((rule) => React2.createElement("div", { key: rule.id }, `${rule.message}${/(\.|: [^.]+\.*)$/.test(rule.message) ? "" : "."}`))), React2.createElement(Actions, null, React2.createElement(Button, { onClick: () => handleJumpToElement(node.target.toString()) }, React2.createElement(LocationIcon, null), " Jump to element"), React2.createElement(CopyButton, { onClick: () => handleCopyLink(node.linkPath) })), React2.createElement(
+  return React2.createElement(React2.Fragment, null, React2.createElement(Messages, null, rules.map((rule) => React2.createElement("div", { key: rule.id }, `${rule.message}${/(\.|: [^.]+\.*)$/.test(rule.message) ? "" : "."}`))), React2.createElement(Actions, null, React2.createElement(Button, { ariaLabel: false, onClick: () => handleJumpToElement(node.target.toString()) }, React2.createElement(LocationIcon, null), " Jump to element"), React2.createElement(CopyButton, { onClick: () => handleCopyLink(node.linkPath) })), React2.createElement(
     StyledSyntaxHighlighter,
     {
       language: "jsx",
@@ -2384,12 +2196,14 @@ var Report = /* @__PURE__ */ __name(({
   const selection = selectedItems.get(id);
   const title = getTitleForAxeResult(item);
   return React3.createElement(Wrapper2, { key: id }, React3.createElement(HeaderBar, { onClick: (event) => toggleOpen(event, type, item), "data-active": !!selection }, React3.createElement(Title, null, React3.createElement("strong", null, title), React3.createElement(RuleId2, null, item.id)), item.impact && React3.createElement(Badge, { status: type === RuleType.PASS ? "neutral" : impactStatus[item.impact] }, impactLabels[item.impact]), React3.createElement(Count, null, item.nodes.length), React3.createElement(
-    IconButton,
+    Button2,
     {
       onClick: (event) => toggleOpen(event, type, item),
-      "aria-label": `${selection ? "Collapse" : "Expand"} details for ${title}`,
+      ariaLabel: `${selection ? "Collapse" : "Expand"} details for: ${title}`,
       "aria-expanded": !!selection,
-      "aria-controls": detailsId
+      "aria-controls": detailsId,
+      variant: "ghost",
+      padding: "small"
     },
     React3.createElement(Icon, { style: { transform: `rotate(${selection ? -180 : 0}deg)` } })
   )), selection ? React3.createElement(
@@ -2405,601 +2219,26 @@ var Report = /* @__PURE__ */ __name(({
 }) : React3.createElement(EmptyTabContent, { title: empty })), "Report");
 
 // src/components/Tabs.tsx
-import * as React5 from "react";
-import { IconButton as IconButton2, ScrollArea, TooltipNote, WithTooltip } from "storybook/internal/components";
-import { CollapseIcon, ExpandAltIcon, EyeCloseIcon, EyeIcon, SyncIcon } from "@storybook/icons";
-
-// ../../node_modules/react-resize-detector/build/index.esm.js
 import * as React4 from "react";
-import { cloneElement, isValidElement, createRef, PureComponent, Component, forwardRef, useRef, useState as useState4, useEffect as useEffect2, useLayoutEffect } from "react";
-import { findDOMNode } from "react-dom";
-var extendStatics = /* @__PURE__ */ __name(function(d, b) {
-  extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b2) {
-    d2.__proto__ = b2;
-  } || function(d2, b2) {
-    for (var p in b2) if (Object.prototype.hasOwnProperty.call(b2, p)) d2[p] = b2[p];
-  };
-  return extendStatics(d, b);
-}, "extendStatics");
-function __extends(d, b) {
-  if (typeof b !== "function" && b !== null)
-    throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-  extendStatics(d, b);
-  function __() {
-    this.constructor = d;
-  }
-  __name(__, "__");
-  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-__name(__extends, "__extends");
-var __assign = /* @__PURE__ */ __name(function() {
-  __assign = Object.assign || /* @__PURE__ */ __name(function __assign2(t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  }, "__assign");
-  return __assign.apply(this, arguments);
-}, "__assign");
-function __rest(s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-    t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-        t[p[i]] = s[p[i]];
-    }
-  return t;
-}
-__name(__rest, "__rest");
-var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
-function isObject$3(value) {
-  var type = typeof value;
-  return value != null && (type == "object" || type == "function");
-}
-__name(isObject$3, "isObject$3");
-var isObject_1 = isObject$3;
-var freeGlobal$1 = typeof commonjsGlobal == "object" && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
-var _freeGlobal = freeGlobal$1;
-var freeGlobal = _freeGlobal;
-var freeSelf = typeof self == "object" && self && self.Object === Object && self;
-var root$2 = freeGlobal || freeSelf || Function("return this")();
-var _root = root$2;
-var root$1 = _root;
-var now$1 = /* @__PURE__ */ __name(function() {
-  return root$1.Date.now();
-}, "now$1");
-var now_1 = now$1;
-var reWhitespace = /\s/;
-function trimmedEndIndex$1(string) {
-  var index = string.length;
-  while (index-- && reWhitespace.test(string.charAt(index))) {
-  }
-  return index;
-}
-__name(trimmedEndIndex$1, "trimmedEndIndex$1");
-var _trimmedEndIndex = trimmedEndIndex$1;
-var trimmedEndIndex = _trimmedEndIndex;
-var reTrimStart = /^\s+/;
-function baseTrim$1(string) {
-  return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, "") : string;
-}
-__name(baseTrim$1, "baseTrim$1");
-var _baseTrim = baseTrim$1;
-var root = _root;
-var Symbol$2 = root.Symbol;
-var _Symbol = Symbol$2;
-var Symbol$1 = _Symbol;
-var objectProto$1 = Object.prototype;
-var hasOwnProperty = objectProto$1.hasOwnProperty;
-var nativeObjectToString$1 = objectProto$1.toString;
-var symToStringTag$1 = Symbol$1 ? Symbol$1.toStringTag : void 0;
-function getRawTag$1(value) {
-  var isOwn = hasOwnProperty.call(value, symToStringTag$1), tag = value[symToStringTag$1];
-  try {
-    value[symToStringTag$1] = void 0;
-    var unmasked = true;
-  } catch (e) {
-  }
-  var result = nativeObjectToString$1.call(value);
-  if (unmasked) {
-    if (isOwn) {
-      value[symToStringTag$1] = tag;
-    } else {
-      delete value[symToStringTag$1];
-    }
-  }
-  return result;
-}
-__name(getRawTag$1, "getRawTag$1");
-var _getRawTag = getRawTag$1;
-var objectProto = Object.prototype;
-var nativeObjectToString = objectProto.toString;
-function objectToString$1(value) {
-  return nativeObjectToString.call(value);
-}
-__name(objectToString$1, "objectToString$1");
-var _objectToString = objectToString$1;
-var Symbol2 = _Symbol;
-var getRawTag = _getRawTag;
-var objectToString = _objectToString;
-var nullTag = "[object Null]";
-var undefinedTag = "[object Undefined]";
-var symToStringTag = Symbol2 ? Symbol2.toStringTag : void 0;
-function baseGetTag$1(value) {
-  if (value == null) {
-    return value === void 0 ? undefinedTag : nullTag;
-  }
-  return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
-}
-__name(baseGetTag$1, "baseGetTag$1");
-var _baseGetTag = baseGetTag$1;
-function isObjectLike$1(value) {
-  return value != null && typeof value == "object";
-}
-__name(isObjectLike$1, "isObjectLike$1");
-var isObjectLike_1 = isObjectLike$1;
-var baseGetTag = _baseGetTag;
-var isObjectLike = isObjectLike_1;
-var symbolTag = "[object Symbol]";
-function isSymbol$1(value) {
-  return typeof value == "symbol" || isObjectLike(value) && baseGetTag(value) == symbolTag;
-}
-__name(isSymbol$1, "isSymbol$1");
-var isSymbol_1 = isSymbol$1;
-var baseTrim = _baseTrim;
-var isObject$2 = isObject_1;
-var isSymbol = isSymbol_1;
-var NAN = 0 / 0;
-var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
-var reIsBinary = /^0b[01]+$/i;
-var reIsOctal = /^0o[0-7]+$/i;
-var freeParseInt = parseInt;
-function toNumber$1(value) {
-  if (typeof value == "number") {
-    return value;
-  }
-  if (isSymbol(value)) {
-    return NAN;
-  }
-  if (isObject$2(value)) {
-    var other = typeof value.valueOf == "function" ? value.valueOf() : value;
-    value = isObject$2(other) ? other + "" : other;
-  }
-  if (typeof value != "string") {
-    return value === 0 ? value : +value;
-  }
-  value = baseTrim(value);
-  var isBinary = reIsBinary.test(value);
-  return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
-}
-__name(toNumber$1, "toNumber$1");
-var toNumber_1 = toNumber$1;
-var isObject$1 = isObject_1;
-var now = now_1;
-var toNumber = toNumber_1;
-var FUNC_ERROR_TEXT$1 = "Expected a function";
-var nativeMax = Math.max;
-var nativeMin = Math.min;
-function debounce$1(func, wait, options) {
-  var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
-  if (typeof func != "function") {
-    throw new TypeError(FUNC_ERROR_TEXT$1);
-  }
-  wait = toNumber(wait) || 0;
-  if (isObject$1(options)) {
-    leading = !!options.leading;
-    maxing = "maxWait" in options;
-    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
-    trailing = "trailing" in options ? !!options.trailing : trailing;
-  }
-  function invokeFunc(time) {
-    var args = lastArgs, thisArg = lastThis;
-    lastArgs = lastThis = void 0;
-    lastInvokeTime = time;
-    result = func.apply(thisArg, args);
-    return result;
-  }
-  __name(invokeFunc, "invokeFunc");
-  function leadingEdge(time) {
-    lastInvokeTime = time;
-    timerId = setTimeout(timerExpired, wait);
-    return leading ? invokeFunc(time) : result;
-  }
-  __name(leadingEdge, "leadingEdge");
-  function remainingWait(time) {
-    var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime, timeWaiting = wait - timeSinceLastCall;
-    return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
-  }
-  __name(remainingWait, "remainingWait");
-  function shouldInvoke(time) {
-    var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime;
-    return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
-  }
-  __name(shouldInvoke, "shouldInvoke");
-  function timerExpired() {
-    var time = now();
-    if (shouldInvoke(time)) {
-      return trailingEdge(time);
-    }
-    timerId = setTimeout(timerExpired, remainingWait(time));
-  }
-  __name(timerExpired, "timerExpired");
-  function trailingEdge(time) {
-    timerId = void 0;
-    if (trailing && lastArgs) {
-      return invokeFunc(time);
-    }
-    lastArgs = lastThis = void 0;
-    return result;
-  }
-  __name(trailingEdge, "trailingEdge");
-  function cancel() {
-    if (timerId !== void 0) {
-      clearTimeout(timerId);
-    }
-    lastInvokeTime = 0;
-    lastArgs = lastCallTime = lastThis = timerId = void 0;
-  }
-  __name(cancel, "cancel");
-  function flush() {
-    return timerId === void 0 ? result : trailingEdge(now());
-  }
-  __name(flush, "flush");
-  function debounced() {
-    var time = now(), isInvoking = shouldInvoke(time);
-    lastArgs = arguments;
-    lastThis = this;
-    lastCallTime = time;
-    if (isInvoking) {
-      if (timerId === void 0) {
-        return leadingEdge(lastCallTime);
-      }
-      if (maxing) {
-        clearTimeout(timerId);
-        timerId = setTimeout(timerExpired, wait);
-        return invokeFunc(lastCallTime);
-      }
-    }
-    if (timerId === void 0) {
-      timerId = setTimeout(timerExpired, wait);
-    }
-    return result;
-  }
-  __name(debounced, "debounced");
-  debounced.cancel = cancel;
-  debounced.flush = flush;
-  return debounced;
-}
-__name(debounce$1, "debounce$1");
-var debounce_1 = debounce$1;
-var debounce = debounce_1;
-var isObject = isObject_1;
-var FUNC_ERROR_TEXT = "Expected a function";
-function throttle(func, wait, options) {
-  var leading = true, trailing = true;
-  if (typeof func != "function") {
-    throw new TypeError(FUNC_ERROR_TEXT);
-  }
-  if (isObject(options)) {
-    leading = "leading" in options ? !!options.leading : leading;
-    trailing = "trailing" in options ? !!options.trailing : trailing;
-  }
-  return debounce(func, wait, {
-    "leading": leading,
-    "maxWait": wait,
-    "trailing": trailing
-  });
-}
-__name(throttle, "throttle");
-var throttle_1 = throttle;
-var patchResizeHandler = /* @__PURE__ */ __name(function(resizeCallback, refreshMode, refreshRate, refreshOptions) {
-  switch (refreshMode) {
-    case "debounce":
-      return debounce_1(resizeCallback, refreshRate, refreshOptions);
-    case "throttle":
-      return throttle_1(resizeCallback, refreshRate, refreshOptions);
-    default:
-      return resizeCallback;
-  }
-}, "patchResizeHandler");
-var isFunction = /* @__PURE__ */ __name(function(fn) {
-  return typeof fn === "function";
-}, "isFunction");
-var isSSR = /* @__PURE__ */ __name(function() {
-  return typeof window === "undefined";
-}, "isSSR");
-var isDOMElement = /* @__PURE__ */ __name(function(element) {
-  return element instanceof Element || element instanceof HTMLDocument;
-}, "isDOMElement");
-var createNotifier = /* @__PURE__ */ __name(function(onResize, setSize, handleWidth, handleHeight) {
-  return function(_a) {
-    var width = _a.width, height = _a.height;
-    setSize(function(prev) {
-      if (prev.width === width && prev.height === height) {
-        return prev;
-      }
-      if (prev.width === width && !handleHeight || prev.height === height && !handleWidth) {
-        return prev;
-      }
-      if (onResize && isFunction(onResize)) {
-        onResize(width, height);
-      }
-      return { width, height };
-    });
-  };
-}, "createNotifier");
-var ResizeDetector = (
-  /** @class */
-  function(_super) {
-    __extends(ResizeDetector2, _super);
-    function ResizeDetector2(props) {
-      var _this = _super.call(this, props) || this;
-      _this.cancelHandler = function() {
-        if (_this.resizeHandler && _this.resizeHandler.cancel) {
-          _this.resizeHandler.cancel();
-          _this.resizeHandler = null;
-        }
-      };
-      _this.attachObserver = function() {
-        var _a2 = _this.props, targetRef = _a2.targetRef, observerOptions = _a2.observerOptions;
-        if (isSSR()) {
-          return;
-        }
-        if (targetRef && targetRef.current) {
-          _this.targetRef.current = targetRef.current;
-        }
-        var element = _this.getElement();
-        if (!element) {
-          return;
-        }
-        if (_this.observableElement && _this.observableElement === element) {
-          return;
-        }
-        _this.observableElement = element;
-        _this.resizeObserver.observe(element, observerOptions);
-      };
-      _this.getElement = function() {
-        var _a2 = _this.props, querySelector = _a2.querySelector, targetDomEl = _a2.targetDomEl;
-        if (isSSR())
-          return null;
-        if (querySelector)
-          return document.querySelector(querySelector);
-        if (targetDomEl && isDOMElement(targetDomEl))
-          return targetDomEl;
-        if (_this.targetRef && isDOMElement(_this.targetRef.current))
-          return _this.targetRef.current;
-        var currentElement = findDOMNode(_this);
-        if (!currentElement)
-          return null;
-        var renderType = _this.getRenderType();
-        switch (renderType) {
-          case "renderProp":
-            return currentElement;
-          case "childFunction":
-            return currentElement;
-          case "child":
-            return currentElement;
-          case "childArray":
-            return currentElement;
-          default:
-            return currentElement.parentElement;
-        }
-      };
-      _this.createResizeHandler = function(entries) {
-        var _a2 = _this.props, _b = _a2.handleWidth, handleWidth = _b === void 0 ? true : _b, _c = _a2.handleHeight, handleHeight = _c === void 0 ? true : _c, onResize = _a2.onResize;
-        if (!handleWidth && !handleHeight)
-          return;
-        var notifyResize = createNotifier(onResize, _this.setState.bind(_this), handleWidth, handleHeight);
-        entries.forEach(function(entry) {
-          var _a3 = entry && entry.contentRect || {}, width = _a3.width, height = _a3.height;
-          var shouldSetSize = !_this.skipOnMount && !isSSR();
-          if (shouldSetSize) {
-            notifyResize({ width, height });
-          }
-          _this.skipOnMount = false;
-        });
-      };
-      _this.getRenderType = function() {
-        var _a2 = _this.props, render = _a2.render, children = _a2.children;
-        if (isFunction(render)) {
-          return "renderProp";
-        }
-        if (isFunction(children)) {
-          return "childFunction";
-        }
-        if (isValidElement(children)) {
-          return "child";
-        }
-        if (Array.isArray(children)) {
-          return "childArray";
-        }
-        return "parent";
-      };
-      var skipOnMount = props.skipOnMount, refreshMode = props.refreshMode, _a = props.refreshRate, refreshRate = _a === void 0 ? 1e3 : _a, refreshOptions = props.refreshOptions;
-      _this.state = {
-        width: void 0,
-        height: void 0
-      };
-      _this.skipOnMount = skipOnMount;
-      _this.targetRef = createRef();
-      _this.observableElement = null;
-      if (isSSR()) {
-        return _this;
-      }
-      _this.resizeHandler = patchResizeHandler(_this.createResizeHandler, refreshMode, refreshRate, refreshOptions);
-      _this.resizeObserver = new window.ResizeObserver(_this.resizeHandler);
-      return _this;
-    }
-    __name(ResizeDetector2, "ResizeDetector");
-    ResizeDetector2.prototype.componentDidMount = function() {
-      this.attachObserver();
-    };
-    ResizeDetector2.prototype.componentDidUpdate = function() {
-      this.attachObserver();
-    };
-    ResizeDetector2.prototype.componentWillUnmount = function() {
-      if (isSSR()) {
-        return;
-      }
-      this.observableElement = null;
-      this.resizeObserver.disconnect();
-      this.cancelHandler();
-    };
-    ResizeDetector2.prototype.render = function() {
-      var _a = this.props, render = _a.render, children = _a.children, _b = _a.nodeType, WrapperTag = _b === void 0 ? "div" : _b;
-      var _c = this.state, width = _c.width, height = _c.height;
-      var childProps = { width, height, targetRef: this.targetRef };
-      var renderType = this.getRenderType();
-      var typedChildren;
-      switch (renderType) {
-        case "renderProp":
-          return render && render(childProps);
-        case "childFunction":
-          typedChildren = children;
-          return typedChildren(childProps);
-        case "child":
-          typedChildren = children;
-          if (typedChildren.type && typeof typedChildren.type === "string") {
-            childProps.targetRef;
-            var nativeProps = __rest(childProps, ["targetRef"]);
-            return cloneElement(typedChildren, nativeProps);
-          }
-          return cloneElement(typedChildren, childProps);
-        case "childArray":
-          typedChildren = children;
-          return typedChildren.map(function(el) {
-            return !!el && cloneElement(el, childProps);
-          });
-        default:
-          return React4.createElement(WrapperTag, null);
-      }
-    };
-    return ResizeDetector2;
-  }(PureComponent)
-);
-var useEnhancedEffect = isSSR() ? useEffect2 : useLayoutEffect;
-function useResizeDetector(props) {
-  if (props === void 0) {
-    props = {};
-  }
-  var _a = props.skipOnMount, skipOnMount = _a === void 0 ? false : _a, refreshMode = props.refreshMode, _b = props.refreshRate, refreshRate = _b === void 0 ? 1e3 : _b, refreshOptions = props.refreshOptions, _c = props.handleWidth, handleWidth = _c === void 0 ? true : _c, _d = props.handleHeight, handleHeight = _d === void 0 ? true : _d, targetRef = props.targetRef, observerOptions = props.observerOptions, onResize = props.onResize;
-  var skipResize = useRef(skipOnMount);
-  var localRef = useRef(null);
-  var ref = targetRef !== null && targetRef !== void 0 ? targetRef : localRef;
-  var resizeHandler = useRef();
-  var _e = useState4({
-    width: void 0,
-    height: void 0
-  }), size = _e[0], setSize = _e[1];
-  useEnhancedEffect(function() {
-    if (isSSR()) {
-      return;
-    }
-    var notifyResize = createNotifier(onResize, setSize, handleWidth, handleHeight);
-    var resizeCallback = /* @__PURE__ */ __name(function(entries) {
-      if (!handleWidth && !handleHeight)
-        return;
-      entries.forEach(function(entry) {
-        var _a2 = entry && entry.contentRect || {}, width = _a2.width, height = _a2.height;
-        var shouldSetSize = !skipResize.current && !isSSR();
-        if (shouldSetSize) {
-          notifyResize({ width, height });
-        }
-        skipResize.current = false;
-      });
-    }, "resizeCallback");
-    resizeHandler.current = patchResizeHandler(resizeCallback, refreshMode, refreshRate, refreshOptions);
-    var resizeObserver = new window.ResizeObserver(resizeHandler.current);
-    if (ref.current) {
-      resizeObserver.observe(ref.current, observerOptions);
-    }
-    return function() {
-      resizeObserver.disconnect();
-      var patchedResizeHandler = resizeHandler.current;
-      if (patchedResizeHandler && patchedResizeHandler.cancel) {
-        patchedResizeHandler.cancel();
-      }
-    };
-  }, [refreshMode, refreshRate, refreshOptions, handleWidth, handleHeight, onResize, observerOptions, ref.current]);
-  return __assign({ ref }, size);
-}
-__name(useResizeDetector, "useResizeDetector");
-
-// src/components/Tabs.tsx
-import { styled as styled3 } from "storybook/theming";
+import { Button as Button3, TabsView } from "storybook/internal/components";
+import { CollapseIcon, ExpandAltIcon, EyeCloseIcon, EyeIcon, SyncIcon } from "@storybook/icons";
+import { styled as styled3, useTheme } from "storybook/theming";
 var Container = styled3.div({
   width: "100%",
   position: "relative",
-  minHeight: "100%"
-});
-var Item2 = styled3.button(
-  ({ theme: theme2 }) => ({
-    textDecoration: "none",
-    padding: "10px 15px",
-    cursor: "pointer",
-    color: theme2.textMutedColor,
-    fontWeight: theme2.typography.weight.bold,
-    fontSize: theme2.typography.size.s2 - 1,
-    lineHeight: 1,
-    height: 40,
-    border: "none",
-    borderBottom: "3px solid transparent",
-    background: "transparent",
-    "&:focus": {
-      outline: "0 none",
-      borderColor: theme2.color.secondary
-    }
-  }),
-  ({ active, theme: theme2 }) => active ? {
-    opacity: 1,
-    color: theme2.color.secondary,
-    borderColor: theme2.color.secondary
-  } : {}
-);
-var Subnav = styled3.div(({ theme: theme2 }) => ({
-  boxShadow: `${theme2.appBorderColor} 0 -1px 0 0 inset`,
-  background: theme2.background.app,
-  position: "sticky",
-  top: 0,
-  zIndex: 1,
+  height: "100%",
+  overflow: "hidden",
   display: "flex",
-  alignItems: "center",
-  whiteSpace: "nowrap",
-  overflow: "auto",
-  paddingRight: 10,
-  gap: 6,
-  scrollbarColor: `${theme2.barTextColor} ${theme2.background.app}`,
-  scrollbarWidth: "thin"
-}));
-var TabsWrapper = styled3.div({});
+  flexDirection: "column"
+});
 var ActionsWrapper = styled3.div({
   display: "flex",
-  flexBasis: "100%",
   justifyContent: "flex-end",
-  containerType: "inline-size",
-  // 96px is the total width of the buttons without labels
-  minWidth: 96,
   gap: 6
 });
-var ToggleButton = styled3(IconButton2)({
-  // 193px is the total width of the action buttons when the label is visible
-  "@container (max-width: 193px)": {
-    span: {
-      display: "none"
-    }
-  }
-});
 var Tabs = /* @__PURE__ */ __name(({ tabs }) => {
-  const { ref } = useResizeDetector({
-    refreshMode: "debounce",
-    handleHeight: false,
-    handleWidth: true
-  });
   const {
-    tab: activeTab,
+    tab,
     setTab,
     toggleHighlight,
     highlighted,
@@ -3008,66 +2247,54 @@ var Tabs = /* @__PURE__ */ __name(({ tabs }) => {
     handleCollapseAll,
     handleExpandAll
   } = useA11yContext();
-  const handleToggle = React5.useCallback(
-    (event) => {
-      setTab(event.currentTarget.getAttribute("data-type"));
-    },
-    [setTab]
-  );
-  return React5.createElement(Container, { ref }, React5.createElement(Subnav, null, React5.createElement(TabsWrapper, { role: "tablist" }, tabs.map((tab, index) => React5.createElement(
-    Item2,
+  const theme2 = useTheme();
+  return React4.createElement(Container, null, React4.createElement(
+    TabsView,
     {
-      role: "tab",
-      key: index,
-      "data-type": tab.type,
-      "data-active": activeTab === tab.type,
-      "aria-selected": activeTab === tab.type,
-      active: activeTab === tab.type,
-      onClick: handleToggle
-    },
-    tab.label
-  ))), React5.createElement(ActionsWrapper, null, React5.createElement(
-    WithTooltip,
-    {
-      as: "div",
-      hasChrome: false,
-      placement: "top",
-      tooltip: React5.createElement(TooltipNote, { note: "Highlight elements with accessibility violations" }),
-      trigger: "hover"
-    },
-    React5.createElement(ToggleButton, { onClick: toggleHighlight, active: highlighted }, highlighted ? React5.createElement(EyeCloseIcon, null) : React5.createElement(EyeIcon, null), React5.createElement("span", null, highlighted ? "Hide highlights" : "Show highlights"))
-  ), React5.createElement(
-    WithTooltip,
-    {
-      as: "div",
-      hasChrome: false,
-      placement: "top",
-      tooltip: React5.createElement(TooltipNote, { note: allExpanded ? "Collapse all" : "Expand all" }),
-      trigger: "hover"
-    },
-    React5.createElement(
-      IconButton2,
-      {
-        onClick: allExpanded ? handleCollapseAll : handleExpandAll,
-        "aria-label": allExpanded ? "Collapse all" : "Expand all"
-      },
-      allExpanded ? React5.createElement(CollapseIcon, null) : React5.createElement(ExpandAltIcon, null)
-    )
-  ), React5.createElement(
-    WithTooltip,
-    {
-      as: "div",
-      hasChrome: false,
-      placement: "top",
-      tooltip: React5.createElement(TooltipNote, { note: "Rerun the accessibility scan" }),
-      trigger: "hover"
-    },
-    React5.createElement(IconButton2, { onClick: handleManual, "aria-label": "Rerun accessibility scan" }, React5.createElement(SyncIcon, null))
-  ))), React5.createElement(ScrollArea, { vertical: true, horizontal: true }, tabs.find((t) => t.type === activeTab)?.panel));
+      backgroundColor: theme2.background.app,
+      panelProps: { hasScrollbar: true },
+      tabs: tabs.map((tab2) => ({
+        id: tab2.type,
+        title: tab2.label,
+        children: tab2.panel
+      })),
+      selected: tab,
+      onSelectionChange: (key) => setTab(key),
+      tools: React4.createElement(ActionsWrapper, null, React4.createElement(
+        Button3,
+        {
+          variant: "ghost",
+          padding: "small",
+          onClick: toggleHighlight,
+          ariaLabel: highlighted ? "Hide accessibility test result highlights" : "Highlight elements with accessibility test results"
+        },
+        highlighted ? React4.createElement(EyeCloseIcon, null) : React4.createElement(EyeIcon, null)
+      ), React4.createElement(
+        Button3,
+        {
+          variant: "ghost",
+          padding: "small",
+          onClick: allExpanded ? handleCollapseAll : handleExpandAll,
+          ariaLabel: allExpanded ? "Collapse all results" : "Expand all results",
+          "aria-expanded": allExpanded
+        },
+        allExpanded ? React4.createElement(CollapseIcon, null) : React4.createElement(ExpandAltIcon, null)
+      ), React4.createElement(
+        Button3,
+        {
+          variant: "ghost",
+          padding: "small",
+          onClick: handleManual,
+          ariaLabel: "Rerun accessibility scan"
+        },
+        React4.createElement(SyncIcon, null)
+      ))
+    }
+  ));
 }, "Tabs");
 
 // src/components/TestDiscrepancyMessage.tsx
-import React6, { useMemo as useMemo2 } from "react";
+import React5, { useMemo as useMemo2 } from "react";
 import { Link as Link2 } from "storybook/internal/components";
 import { useStorybookApi as useStorybookApi2 } from "storybook/manager-api";
 import { styled as styled4 } from "storybook/theming";
@@ -3114,7 +2341,7 @@ var TestDiscrepancyMessage = /* @__PURE__ */ __name(({ discrepancy }) => {
   if (!message) {
     return null;
   }
-  return React6.createElement(Wrapper3, null, message, " ", React6.createElement(Link2, { href: docsUrl, target: "_blank", withArrow: true }, "Learn what could cause this"));
+  return React5.createElement(Wrapper3, null, message, " ", React5.createElement(Link2, { href: docsUrl, target: "_blank", withArrow: true }, "Learn what could cause this"));
 }, "TestDiscrepancyMessage");
 
 // src/components/A11YPanel.tsx
@@ -3176,8 +2403,8 @@ var A11YPanel = /* @__PURE__ */ __name(() => {
     };
     return [
       {
-        label: React7.createElement(Tab, null, "Violations", React7.createElement(Badge2, { compact: true, status: tab === "violations" ? "active" : "neutral" }, violations.length)),
-        panel: React7.createElement(
+        label: React6.createElement(Tab, null, "Violations", React6.createElement(Badge2, { compact: true, status: tab === "violations" ? "active" : "neutral" }, violations.length)),
+        panel: React6.createElement(
           Report,
           {
             items: violations,
@@ -3192,8 +2419,8 @@ var A11YPanel = /* @__PURE__ */ __name(() => {
         type: RuleType.VIOLATION
       },
       {
-        label: React7.createElement(Tab, null, "Passes", React7.createElement(Badge2, { compact: true, status: tab === "passes" ? "active" : "neutral" }, passes.length)),
-        panel: React7.createElement(
+        label: React6.createElement(Tab, null, "Passes", React6.createElement(Badge2, { compact: true, status: tab === "passes" ? "active" : "neutral" }, passes.length)),
+        panel: React6.createElement(
           Report,
           {
             items: passes,
@@ -3208,8 +2435,8 @@ var A11YPanel = /* @__PURE__ */ __name(() => {
         type: RuleType.PASS
       },
       {
-        label: React7.createElement(Tab, null, "Inconclusive", React7.createElement(Badge2, { compact: true, status: tab === "incomplete" ? "active" : "neutral" }, incomplete.length)),
-        panel: React7.createElement(
+        label: React6.createElement(Tab, null, "Inconclusive", React6.createElement(Badge2, { compact: true, status: tab === "incomplete" ? "active" : "neutral" }, incomplete.length)),
+        panel: React6.createElement(
           Report,
           {
             items: incomplete,
@@ -3226,62 +2453,62 @@ var A11YPanel = /* @__PURE__ */ __name(() => {
     ];
   }, [tab, results, handleSelectionChange, selectedItems, toggleOpen]);
   if (parameters.disable || parameters.test === "off") {
-    return React7.createElement(Centered, null, React7.createElement("div", null, React7.createElement("strong", null, "Accessibility tests are disabled for this story"), React7.createElement("p", null, "Update", " ", React7.createElement("code", null, parameters.disable ? "parameters.a11y.disable" : "parameters.a11y.test"), " ", "to enable accessibility tests.")));
+    return React6.createElement(Centered, null, React6.createElement("div", null, React6.createElement("strong", null, "Accessibility tests are disabled for this story"), React6.createElement("p", null, "Update", " ", React6.createElement("code", null, parameters.disable ? "parameters.a11y.disable" : "parameters.a11y.test"), " ", "to enable accessibility tests.")));
   }
-  return React7.createElement(React7.Fragment, null, discrepancy && React7.createElement(TestDiscrepancyMessage, { discrepancy }), status === "ready" || status === "ran" ? React7.createElement(Tabs, { key: "tabs", tabs }) : React7.createElement(Centered, { style: { marginTop: discrepancy ? "1em" : 0 } }, status === "initial" && React7.createElement("div", null, React7.createElement(RotatingIcon, { size: 12 }), React7.createElement("strong", null, "Preparing accessibility scan"), React7.createElement("p", null, "Please wait while the addon is initializing...")), status === "manual" && React7.createElement(React7.Fragment, null, React7.createElement("div", null, React7.createElement("strong", null, "Accessibility tests run manually for this story"), React7.createElement("p", null, "Results will not show when using the testing module. You can still run accessibility tests manually.")), React7.createElement(Button2, { size: "medium", onClick: handleManual }, "Run accessibility scan"), React7.createElement("p", null, "Update ", React7.createElement("code", null, "globals.a11y.manual"), " to disable manual mode.")), status === "running" && React7.createElement("div", null, React7.createElement(RotatingIcon, { size: 12 }), React7.createElement("strong", null, "Accessibility scan in progress"), React7.createElement("p", null, "Please wait while the accessibility scan is running...")), status === "error" && React7.createElement(React7.Fragment, null, React7.createElement("div", null, React7.createElement("strong", null, "The accessibility scan encountered an error"), React7.createElement("p", null, typeof error === "string" ? error : error instanceof Error ? error.toString() : JSON.stringify(error, null, 2))), React7.createElement(Button2, { size: "medium", onClick: handleManual }, "Rerun accessibility scan")), status === "component-test-error" && React7.createElement(React7.Fragment, null, React7.createElement("div", null, React7.createElement("strong", null, "This story's component tests failed"), React7.createElement("p", null, "Automated accessibility tests will not run until this is resolved. You can still test manually.")), React7.createElement(Button2, { size: "medium", onClick: handleManual }, "Run accessibility scan"))));
+  return React6.createElement(React6.Fragment, null, discrepancy && React6.createElement(TestDiscrepancyMessage, { discrepancy }), status === "ready" || status === "ran" ? React6.createElement(Tabs, { key: "tabs", tabs }) : React6.createElement(Centered, { style: { marginTop: discrepancy ? "1em" : 0 } }, status === "initial" && React6.createElement("div", null, React6.createElement(RotatingIcon, { size: 12 }), React6.createElement("strong", null, "Preparing accessibility scan"), React6.createElement("p", null, "Please wait while the addon is initializing...")), status === "manual" && React6.createElement(React6.Fragment, null, React6.createElement("div", null, React6.createElement("strong", null, "Accessibility tests run manually for this story"), React6.createElement("p", null, "Results will not show when using the testing module. You can still run accessibility tests manually.")), React6.createElement(Button4, { ariaLabel: false, size: "medium", onClick: handleManual }, "Run accessibility scan"), React6.createElement("p", null, "Update ", React6.createElement("code", null, "globals.a11y.manual"), " to disable manual mode.")), status === "running" && React6.createElement("div", null, React6.createElement(RotatingIcon, { size: 12 }), React6.createElement("strong", null, "Accessibility scan in progress"), React6.createElement("p", null, "Please wait while the accessibility scan is running...")), status === "error" && React6.createElement(React6.Fragment, null, React6.createElement("div", null, React6.createElement("strong", null, "The accessibility scan encountered an error"), React6.createElement("p", null, typeof error === "string" ? error : error instanceof Error ? error.toString() : JSON.stringify(error, null, 2))), React6.createElement(Button4, { ariaLabel: false, size: "medium", onClick: handleManual }, "Rerun accessibility scan")), status === "component-test-error" && React6.createElement(React6.Fragment, null, React6.createElement("div", null, React6.createElement("strong", null, "This story's component tests failed"), React6.createElement("p", null, "Automated accessibility tests will not run until this is resolved. You can still test manually.")), React6.createElement(Button4, { ariaLabel: false, size: "medium", onClick: handleManual }, "Run accessibility scan"))));
 }, "A11YPanel");
 
 // src/components/VisionSimulator.tsx
-import React9, { useState as useState5 } from "react";
-import { IconButton as IconButton3, TooltipLinkList, WithTooltip as WithTooltip2 } from "storybook/internal/components";
+import React8, { useState as useState4 } from "react";
+import { Select } from "storybook/internal/components";
 import { AccessibilityIcon } from "@storybook/icons";
 import { Global, styled as styled6 } from "storybook/theming";
 
 // src/components/ColorFilters.tsx
-import * as React8 from "react";
-var Filters = /* @__PURE__ */ __name((props) => React8.createElement("svg", { ...props }, React8.createElement("defs", null, React8.createElement("filter", { id: "protanopia" }, React8.createElement(
+import * as React7 from "react";
+var Filters = /* @__PURE__ */ __name((props) => React7.createElement("svg", { ...props }, React7.createElement("defs", null, React7.createElement("filter", { id: "protanopia" }, React7.createElement(
   "feColorMatrix",
   {
     in: "SourceGraphic",
     type: "matrix",
     values: "0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0"
   }
-)), React8.createElement("filter", { id: "protanomaly" }, React8.createElement(
+)), React7.createElement("filter", { id: "protanomaly" }, React7.createElement(
   "feColorMatrix",
   {
     in: "SourceGraphic",
     type: "matrix",
     values: "0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0"
   }
-)), React8.createElement("filter", { id: "deuteranopia" }, React8.createElement(
+)), React7.createElement("filter", { id: "deuteranopia" }, React7.createElement(
   "feColorMatrix",
   {
     in: "SourceGraphic",
     type: "matrix",
     values: "0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0"
   }
-)), React8.createElement("filter", { id: "deuteranomaly" }, React8.createElement(
+)), React7.createElement("filter", { id: "deuteranomaly" }, React7.createElement(
   "feColorMatrix",
   {
     in: "SourceGraphic",
     type: "matrix",
     values: "0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0"
   }
-)), React8.createElement("filter", { id: "tritanopia" }, React8.createElement(
+)), React7.createElement("filter", { id: "tritanopia" }, React7.createElement(
   "feColorMatrix",
   {
     in: "SourceGraphic",
     type: "matrix",
     values: "0.95, 0.05,  0, 0, 0 0,  0.433, 0.567, 0, 0 0,  0.475, 0.525, 0, 0 0,  0, 0, 1, 0"
   }
-)), React8.createElement("filter", { id: "tritanomaly" }, React8.createElement(
+)), React7.createElement("filter", { id: "tritanomaly" }, React7.createElement(
   "feColorMatrix",
   {
     in: "SourceGraphic",
     type: "matrix",
     values: "0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0"
   }
-)), React8.createElement("filter", { id: "achromatopsia" }, React8.createElement(
+)), React7.createElement("filter", { id: "achromatopsia" }, React7.createElement(
   "feColorMatrix",
   {
     in: "SourceGraphic",
@@ -3330,52 +2557,25 @@ var ColorIcon = styled6.span(
     height: "1rem",
     width: "1rem"
   },
-  ({ filter }) => ({
-    filter: getFilter(filter)
+  ({ $filter }) => ({
+    filter: getFilter($filter)
   }),
   ({ theme: theme2 }) => ({
     boxShadow: `${theme2.appBorderColor} 0 0 0 1px inset`
   })
 );
-var Column = styled6.span({
-  display: "flex",
-  flexDirection: "column"
-});
-var Title2 = styled6.span({
-  textTransform: "capitalize"
-});
-var Description2 = styled6.span(({ theme: theme2 }) => ({
-  fontSize: 11,
-  color: theme2.textMutedColor
-}));
-var getColorList = /* @__PURE__ */ __name((active, set) => [
-  ...active !== null ? [
-    {
-      id: "reset",
-      title: "Reset color filter",
-      onClick: /* @__PURE__ */ __name(() => {
-        set(null);
-      }, "onClick"),
-      right: void 0,
-      active: false
-    }
-  ] : [],
-  ...baseList.map((i) => {
-    const description = i.percentage !== void 0 ? `${i.percentage}% of users` : void 0;
+var VisionSimulator = /* @__PURE__ */ __name(() => {
+  const [filter, setFilter] = useState4(null);
+  const options = baseList.map(({ name, percentage }) => {
+    const description = percentage !== void 0 ? `${percentage}% of users` : void 0;
     return {
-      id: i.name,
-      title: React9.createElement(Column, null, React9.createElement(Title2, null, i.name), description && React9.createElement(Description2, null, description)),
-      onClick: /* @__PURE__ */ __name(() => {
-        set(i);
-      }, "onClick"),
-      right: React9.createElement(ColorIcon, { filter: i.name }),
-      active: active === i
+      title: name,
+      description,
+      icon: React8.createElement(ColorIcon, { $filter: name }),
+      value: name
     };
-  })
-], "getColorList");
-var VisionSimulator = /* @__PURE__ */ __name(() => {
-  const [filter, setFilter] = useState5(null);
-  return React9.createElement(React9.Fragment, null, filter && React9.createElement(
+  });
+  return React8.createElement(React8.Fragment, null, filter && React8.createElement(
     Global,
     {
       styles: {
@@ -3384,26 +2584,22 @@ var VisionSimulator = /* @__PURE__ */ __name(() => {
         }
       }
     }
-  ), React9.createElement(
-    WithTooltip2,
+  ), React8.createElement(
+    Select,
     {
-      placement: "top",
-      tooltip: ({ onHide }) => {
-        const colorList = getColorList(filter, (i) => {
-          setFilter(i);
-          onHide();
-        });
-        return React9.createElement(TooltipLinkList, { links: colorList });
-      },
-      closeOnOutsideClick: true,
-      onDoubleClick: () => setFilter(null)
-    },
-    React9.createElement(IconButton3, { key: "filter", active: !!filter, title: "Vision simulator" }, React9.createElement(AccessibilityIcon, null))
-  ), React9.createElement(Hidden, null, React9.createElement(Filters, null)));
+      resetLabel: "Reset color filter",
+      onReset: () => setFilter(null),
+      icon: React8.createElement(AccessibilityIcon, null),
+      ariaLabel: "Vision simulator",
+      defaultOptions: filter?.name,
+      options,
+      onSelect: (selected) => setFilter(() => ({ name: selected }))
+    }
+  ), React8.createElement(Hidden, null, React8.createElement(Filters, null)));
 }, "VisionSimulator");
 
 // src/manager.tsx
-var Title3 = /* @__PURE__ */ __name(() => {
+var Title2 = /* @__PURE__ */ __name(() => {
   const api = useStorybookApi3();
   const selectedPanel = api.getSelectedPanel();
   const [{ results }] = useAddonState2(ADDON_ID, {
@@ -3418,20 +2614,20 @@ var Title3 = /* @__PURE__ */ __name(() => {
   const violationsNb = results?.violations?.length ?? 0;
   const incompleteNb = results?.incomplete?.length ?? 0;
   const count = violationsNb + incompleteNb;
-  const suffix = count === 0 ? null : React10.createElement(Badge3, { compact: true, status: selectedPanel === PANEL_ID ? "active" : "neutral" }, count);
-  return React10.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6 } }, React10.createElement("span", null, "Accessibility"), suffix);
+  const suffix = count === 0 ? null : React9.createElement(Badge3, { compact: true, status: selectedPanel === PANEL_ID ? "active" : "neutral" }, count);
+  return React9.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6 } }, React9.createElement("span", null, "Accessibility"), suffix);
 }, "Title");
 addons.register(ADDON_ID, (api) => {
   addons.add(PANEL_ID, {
     title: "",
     type: types.TOOL,
     match: /* @__PURE__ */ __name(({ viewMode, tabId }) => viewMode === "story" && !tabId, "match"),
-    render: /* @__PURE__ */ __name(() => React10.createElement(VisionSimulator, null), "render")
+    render: /* @__PURE__ */ __name(() => React9.createElement(VisionSimulator, null), "render")
   });
   addons.add(PANEL_ID, {
-    title: Title3,
+    title: Title2,
     type: types.PANEL,
-    render: /* @__PURE__ */ __name(({ active = true }) => React10.createElement(A11yContextProvider, null, active ? React10.createElement(A11YPanel, null) : null), "render"),
+    render: /* @__PURE__ */ __name(({ active = true }) => React9.createElement(A11yContextProvider, null, active ? React9.createElement(A11YPanel, null) : null), "render"),
     paramKey: PARAM_KEY
   });
 });