@storybook/addon-a11y 9.2.0-alpha.2 → 10.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/README.md +3 -1
  2. package/dist/_browser-chunks/chunk-JFJ5UJ7Q.js +11 -0
  3. package/dist/_browser-chunks/chunk-ULDMWS76.js +25 -0
  4. package/dist/_browser-chunks/chunk-XD4HDXPO.js +217 -0
  5. package/dist/_browser-chunks/matchers-ZRZBO4XZ.js +1987 -0
  6. package/dist/index.d.ts +1 -1
  7. package/dist/index.js +16 -26
  8. package/dist/manager.js +3395 -13
  9. package/dist/postinstall.js +7413 -62
  10. package/dist/preview.d.ts +3 -50
  11. package/dist/preview.d.tsx +50 -0
  12. package/dist/preview.js +12 -25
  13. package/package.json +24 -45
  14. package/preview.js +1 -1
  15. package/dist/chunk-CEH6MNVV.mjs +0 -3
  16. package/dist/index.mjs +0 -10
  17. package/dist/matchers-7Z3WT2CE.mjs +0 -16
  18. package/dist/matchers-TIWVOQAP.mjs +0 -18
  19. package/dist/preview.mjs +0 -8
  20. package/manager.js +0 -1
package/dist/manager.js CHANGED
@@ -1,13 +1,3395 @@
1
- import * as React7 from 'react';
2
- import React7__default, { createContext, forwardRef, Children, isValidElement, createElement, cloneElement, useEffect, useRef, useState, useCallback, useMemo, Fragment, useContext, createRef, PureComponent, useLayoutEffect, useReducer } from 'react';
3
- import { SyntaxHighlighter, Button, IconButton, Badge, WithTooltip, TooltipLinkList, EmptyTabContent, TooltipNote, ScrollArea, Link } from 'storybook/internal/components';
4
- import { addons, types, useParameter, useGlobals, useStorybookApi, useAddonState, useStorybookState, experimental_useStatusStore, experimental_getStatusStore, useChannel } from 'storybook/manager-api';
5
- import { ChevronSmallDownIcon, SyncIcon, AccessibilityIcon, EyeCloseIcon, EyeIcon, CollapseIcon, ExpandAltIcon, LocationIcon, CheckIcon, CopyIcon } from '@storybook/icons';
6
- import { convert, themes, styled, Global } from 'storybook/theming';
7
- import { STORY_CHANGED, STORY_RENDER_PHASE_CHANGED, STORY_FINISHED, STORY_HOT_UPDATED } from 'storybook/internal/core-events';
8
- import { SCROLL_INTO_VIEW, REMOVE_HIGHLIGHT, HIGHLIGHT } from 'storybook/highlight';
9
- import { flushSync, findDOMNode } from 'react-dom';
10
-
11
- var RuleType={VIOLATION:"violations",PASS:"passes",INCOMPLETION:"incomplete"};var axeRuleMapping_wcag_2_0_a_aa={"area-alt":{title:"<area> alt text",axeSummary:"Ensure <area> elements of image maps have alternative text",friendlySummary:"Add alt text to all <area> elements of image maps."},"aria-allowed-attr":{title:"Supported ARIA attributes",axeSummary:"Ensure an element's role supports its ARIA attributes",friendlySummary:"Only use ARIA attributes that are permitted for the element's role."},"aria-braille-equivalent":{title:"Braille equivalent",axeSummary:"Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",friendlySummary:"If you use braille ARIA labels, also provide a matching non-braille label."},"aria-command-name":{title:"ARIA command name",axeSummary:"Ensure every ARIA button, link and menuitem has an accessible name",friendlySummary:"Every ARIA button, link, or menuitem needs a label or accessible name."},"aria-conditional-attr":{title:"ARIA attribute valid for role",axeSummary:"Ensure ARIA attributes are used as described in the specification of the element's role",friendlySummary:"Follow the element role's specification when using ARIA attributes."},"aria-deprecated-role":{title:"Deprecated ARIA role",axeSummary:"Ensure elements do not use deprecated roles",friendlySummary:"Don't use deprecated ARIA roles on elements."},"aria-hidden-body":{title:"Hidden body",axeSummary:'Ensure aria-hidden="true" is not present on the document <body>',friendlySummary:'Never set aria-hidden="true" on the <body> element.'},"aria-hidden-focus":{title:"Hidden element focus",axeSummary:"Ensure aria-hidden elements are not focusable nor contain focusable elements",friendlySummary:"Elements marked hidden (aria-hidden) should not be focusable or contain focusable items."},"aria-input-field-name":{title:"ARIA input field name",axeSummary:"Ensure every ARIA input field has an accessible name",friendlySummary:"Give each ARIA text input or field a label or accessible name."},"aria-meter-name":{title:"ARIA meter name",axeSummary:"Ensure every ARIA meter node has an accessible name",friendlySummary:'Give each element with role="meter" a label or accessible name.'},"aria-progressbar-name":{title:"ARIA progressbar name",axeSummary:"Ensure every ARIA progressbar node has an accessible name",friendlySummary:'Give each element with role="progressbar" a label or accessible name.'},"aria-prohibited-attr":{title:"ARIA prohibited attributes",axeSummary:"Ensure ARIA attributes are not prohibited for an element's role",friendlySummary:"Don't use ARIA attributes that are forbidden for that element's role."},"aria-required-attr":{title:"ARIA required attributes",axeSummary:"Ensure elements with ARIA roles have all required ARIA attributes",friendlySummary:"Include all required ARIA attributes for elements with that ARIA role."},"aria-required-children":{title:"ARIA required children",axeSummary:"Ensure elements with an ARIA role that require child roles contain them",friendlySummary:"If an ARIA role requires specific child roles, include those child elements."},"aria-required-parent":{title:"ARIA required parent",axeSummary:"Ensure elements with an ARIA role that require parent roles are contained by them",friendlySummary:"Place elements with certain ARIA roles inside the required parent role element."},"aria-roles":{title:"ARIA role value",axeSummary:"Ensure all elements with a role attribute use a valid value",friendlySummary:"Use only valid values in the role attribute (no typos or invalid roles)."},"aria-toggle-field-name":{title:"ARIA toggle field name",axeSummary:"Ensure every ARIA toggle field has an accessible name",friendlySummary:"Every ARIA toggle field (elements with the checkbox, radio, or switch roles) needs an accessible name."},"aria-tooltip-name":{title:"ARIA tooltip name",axeSummary:"Ensure every ARIA tooltip node has an accessible name",friendlySummary:'Give each element with role="tooltip" a descriptive accessible name.'},"aria-valid-attr-value":{title:"ARIA attribute values valid",axeSummary:"Ensure all ARIA attributes have valid values",friendlySummary:"Use only valid values for ARIA attributes (no typos or invalid values)."},"aria-valid-attr":{title:"ARIA attribute valid",axeSummary:"Ensure attributes that begin with aria- are valid ARIA attributes",friendlySummary:"Use only valid aria-* attributes (make sure the attribute name is correct)."},blink:{title:"<blink> element",axeSummary:"Ensure <blink> elements are not used",friendlySummary:"Don't use the deprecated <blink> element."},"button-name":{title:"Button name",axeSummary:"Ensure buttons have discernible text",friendlySummary:"Every <button> needs a visible label or accessible name."},bypass:{title:"Navigation bypass",axeSummary:"Ensure each page has at least one mechanism to bypass navigation and jump to content",friendlySummary:'Provide a way to skip repetitive navigation (e.g. a "Skip to content" link).'},"color-contrast":{title:"Color contrast",axeSummary:"Ensure the contrast between foreground and background text meets WCAG 2 AA minimum thresholds",friendlySummary:"The color contrast between text and its background meets WCAG AA contrast ratio."},"definition-list":{title:"Definition list structure",axeSummary:"Ensure <dl> elements are structured correctly",friendlySummary:"Definition lists (<dl>) should directly contain <dt> and <dd> elements in order."},dlitem:{title:"Definition list items",axeSummary:"Ensure <dt> and <dd> elements are contained by a <dl>",friendlySummary:"Ensure <dt> and <dd> elements are contained by a <dl>"},"document-title":{title:"Document title",axeSummary:"Ensure each HTML document contains a non-empty <title> element",friendlySummary:"Include a non-empty <title> element for every page."},"duplicate-id-aria":{title:"Unique id",axeSummary:"Ensure every id attribute value used in ARIA and in labels is unique",friendlySummary:"Every id used for ARIA or form labels should be unique on the page."},"form-field-multiple-labels":{title:"Multiple form field labels",axeSummary:"Ensure a form field does not have multiple <label> elements",friendlySummary:"Don't give a single form field more than one <label>."},"frame-focusable-content":{title:"Focusable frames",axeSummary:'Ensure <frame> and <iframe> with focusable content do not have tabindex="-1"',friendlySummary:`Don't set tabindex="-1" on a <frame> or <iframe> that contains focusable elements.`},"frame-title-unique":{title:"Unique frame title",axeSummary:"Ensure <iframe> and <frame> elements contain a unique title attribute",friendlySummary:"Use a unique title attribute for each <frame> or <iframe> on the page."},"frame-title":{title:"Frame title",axeSummary:"Ensure <iframe> and <frame> elements have an accessible name",friendlySummary:"Every <frame> and <iframe> needs a title or accessible name."},"html-has-lang":{title:"<html> has lang",axeSummary:"Ensure every HTML document has a lang attribute",friendlySummary:"Add a lang attribute to the <html> element."},"html-lang-valid":{title:"<html> lang valid",axeSummary:"Ensure the <html lang> attribute has a valid value",friendlySummary:"Use a valid language code in the <html lang> attribute."},"html-xml-lang-mismatch":{title:"HTML and XML lang mismatch",axeSummary:"Ensure that HTML elements with both lang and xml:lang agree on the page's language",friendlySummary:"If using both lang and xml:lang on <html>, make sure they are the same language."},"image-alt":{title:"Image alt text",axeSummary:"Ensure <img> elements have alternative text or a role of none/presentation",friendlySummary:'Give every image alt text or mark it as decorative with alt="".'},"input-button-name":{title:"Input button name",axeSummary:"Ensure input buttons have discernible text",friendlySummary:'Give each <input type="button"> or similar a clear label (text or aria-label).'},"input-image-alt":{title:"Input image alt",axeSummary:'Ensure <input type="image"> elements have alternative text',friendlySummary:'<input type="image"> must have alt text describing its image.'},label:{title:"Form label",axeSummary:"Ensure every form element has a label",friendlySummary:"Every form field needs an associated label."},"link-in-text-block":{title:"Identifiable links",axeSummary:"Ensure links are distinguishable from surrounding text without relying on color",friendlySummary:"Make sure links are obviously identifiable without relying only on color."},"link-name":{title:"Link name",axeSummary:"Ensure links have discernible text",friendlySummary:"Give each link meaningful text or an aria-label so its purpose is clear."},list:{title:"List structure",axeSummary:"Ensure that lists are structured correctly",friendlySummary:"Use proper list structure. Only use <li> inside <ul> or <ol>."},listitem:{title:"List item",axeSummary:"Ensure <li> elements are used semantically",friendlySummary:"Only use <li> tags inside <ul> or <ol> lists."},marquee:{title:"<marquee> element",axeSummary:"Ensure <marquee> elements are not used",friendlySummary:"Don't use the deprecated <marquee> element."},"meta-refresh":{title:"<meta> refresh",axeSummary:'Ensure <meta http-equiv="refresh"> is not used for delayed refresh',friendlySummary:'Avoid auto-refreshing or redirecting pages using <meta http-equiv="refresh">.'},"meta-viewport":{title:"<meta> viewport scaling",axeSummary:'Ensure <meta name="viewport"> does not disable text scaling and zooming',friendlySummary:`Don't disable user zooming in <meta name="viewport"> to allow scaling.`},"nested-interactive":{title:"Nested interactive controls",axeSummary:"Ensure interactive controls are not nested (nesting causes screen reader/focus issues)",friendlySummary:"Do not nest interactive elements; it can confuse screen readers and keyboard focus."},"no-autoplay-audio":{title:"Autoplaying video",axeSummary:"Ensure <video> or <audio> do not autoplay audio > 3 seconds without a control to stop/mute",friendlySummary:"Don't autoplay audio for more than 3 seconds without providing a way to stop or mute it."},"object-alt":{title:"<object> alt text",axeSummary:"Ensure <object> elements have alternative text",friendlySummary:"Provide alternative text or content for <object> elements."},"role-img-alt":{title:'role="img" alt text',axeSummary:'Ensure elements with role="img" have alternative text',friendlySummary:'Any element with role="img" needs alt text.'},"scrollable-region-focusable":{title:"Scrollable element focusable",axeSummary:"Ensure elements with scrollable content are keyboard-accessible",friendlySummary:"If an area can scroll, ensure it can be focused and scrolled via keyboard."},"select-name":{title:"<select> name",axeSummary:"Ensure <select> elements have an accessible name",friendlySummary:"Give each <select> field a label or other accessible name."},"server-side-image-map":{title:"Server-side image map",axeSummary:"Ensure that server-side image maps are not used",friendlySummary:"Don't use server-side image maps."},"svg-img-alt":{title:"SVG image alt text",axeSummary:"Ensure <svg> images/graphics have accessible text",friendlySummary:'SVG images with role="img" or similar need a text description.'},"td-headers-attr":{title:"Table headers attribute",axeSummary:"Ensure each cell in a table using headers only refers to <th> in that table",friendlySummary:"In tables using the headers attribute, only reference other cells in the same table."},"th-has-data-cells":{title:"<th> has data cell",axeSummary:"Ensure <th> (or header role) elements have data cells they describe",friendlySummary:"Every table header (<th> or header role) should correspond to at least one data cell."},"valid-lang":{title:"Valid lang",axeSummary:"Ensure lang attributes have valid values",friendlySummary:"Use valid language codes in all lang attributes."},"video-caption":{title:"<video> captions",axeSummary:"Ensure <video> elements have captions",friendlySummary:"Provide captions for all <video> content."}},axeRuleMapping_wcag_2_1_a_aa={"autocomplete-valid":{title:"autocomplete attribute valid",axeSummary:"Ensure the autocomplete attribute is correct and suitable for the form field",friendlySummary:"Use valid autocomplete values that match the form field's purpose."},"avoid-inline-spacing":{title:"Forced inline spacing",axeSummary:"Ensure that text spacing set via inline styles can be adjusted with custom CSS",friendlySummary:"Don't lock in text spacing with forced (!important) inline styles\u2014allow user CSS to adjust text spacing."}},axeRuleMapping_wcag_2_2_a_aa={"target-size":{title:"Touch target size",axeSummary:"Ensure touch targets have sufficient size and space",friendlySummary:"Make sure interactive elements are big enough and not too close together for touch."}},axeRuleMapping_best_practices={accesskeys:{title:"Unique accesskey",axeSummary:"Ensure every accesskey attribute value is unique",friendlySummary:"Use unique values for all accesskey attributes."},"aria-allowed-role":{title:"Appropriate role value",axeSummary:"Ensure the role attribute has an appropriate value for the element",friendlySummary:"ARIA roles should have a valid value for the element."},"aria-dialog-name":{title:"ARIA dialog name",axeSummary:"Ensure every ARIA dialog and alertdialog has an accessible name",friendlySummary:"Give each ARIA dialog or alertdialog a title or accessible name."},"aria-text":{title:'ARIA role="text"',axeSummary:'Ensure role="text" is used on elements with no focusable descendants',friendlySummary:`Only use role="text" on elements that don't contain focusable elements.`},"aria-treeitem-name":{title:"ARIA treeitem name",axeSummary:"Ensure every ARIA treeitem node has an accessible name",friendlySummary:"Give each ARIA treeitem a label or accessible name."},"empty-heading":{title:"Empty heading",axeSummary:"Ensure headings have discernible text",friendlySummary:"Don't leave heading elements empty or hide them."},"empty-table-header":{title:"Empty table header",axeSummary:"Ensure table headers have discernible text",friendlySummary:"Make sure table header cells have visible text."},"frame-tested":{title:"Test all frames",axeSummary:"Ensure <iframe> and <frame> elements contain the axe-core script",friendlySummary:"Make sure axe-core is injected into all frames or iframes so they are tested."},"heading-order":{title:"Heading order",axeSummary:"Ensure the order of headings is semantically correct (no skipping levels)",friendlySummary:"Use proper heading order (don't skip heading levels)."},"image-redundant-alt":{title:"Redundant image alt text",axeSummary:"Ensure image alternative text is not repeated as nearby text",friendlySummary:"Avoid repeating the same information in both an image's alt text and nearby text."},"label-title-only":{title:"Visible form element label",axeSummary:"Ensure each form element has a visible label (not only title/ARIA)",friendlySummary:"Every form input needs a visible label (not only a title attribute or hidden text)."},"landmark-banner-is-top-level":{title:"Top-level landmark banner",axeSummary:"Ensure the banner landmark is at top level (not nested)",friendlySummary:"Use the banner landmark (e.g. site header) only at the top level of the page, not inside another landmark."},"landmark-complementary-is-top-level":{title:"Top-level <aside>",axeSummary:"Ensure the complementary landmark (<aside>) is top level",friendlySummary:'The complementary landmark <aside> or role="complementary" should be a top-level region, not nested in another landmark.'},"landmark-contentinfo-is-top-level":{title:"Top-level contentinfo",axeSummary:"Ensure the contentinfo landmark (footer) is top level",friendlySummary:"Make sure the contentinfo landmark (footer) is at the top level of the page and not contained in another landmark."},"landmark-main-is-top-level":{title:"Top-level main",axeSummary:"Ensure the main landmark is at top level",friendlySummary:"The main landmark should be a top-level element and not nested inside another landmark."},"landmark-no-duplicate-banner":{title:"Duplicate banner landmark",axeSummary:"Ensure the document has at most one banner landmark",friendlySummary:'Have only one role="banner" or <header> on a page.'},"landmark-no-duplicate-contentinfo":{title:"Duplicate contentinfo",axeSummary:"Ensure the document has at most one contentinfo landmark",friendlySummary:'Have only one role="contentinfo" or <footer> on a page.'},"landmark-no-duplicate-main":{title:"Duplicate main",axeSummary:"Ensure the document has at most one main landmark",friendlySummary:'Have only one role="main" or <main> on a page.'},"landmark-one-main":{title:"main landmark",axeSummary:"Ensure the document has a main landmark",friendlySummary:'Include a main landmark on each page using a <main> region or role="main".'},"landmark-unique":{title:"Unique landmark",axeSummary:"Ensure landmarks have a unique role or role/label combination",friendlySummary:"If you use multiple landmarks of the same type, give them unique labels (names)."},"meta-viewport-large":{title:"Significant viewport scaling",axeSummary:'Ensure <meta name="viewport"> can scale a significant amount (e.g. 500%)',friendlySummary:'<meta name="viewport"> should allow users to significantly scale content.'},"page-has-heading-one":{title:"Has <h1>",axeSummary:"Ensure the page (or at least one frame) contains a level-one heading",friendlySummary:"Every page or frame should have at least one <h1> heading."},"presentation-role-conflict":{title:"Presentational content",axeSummary:'Ensure elements with role="presentation"/"none" have no ARIA or tabindex',friendlySummary:`Don't give elements with role="none"/"presentation" any ARIA attributes or a tabindex.`},region:{title:"Landmark regions",axeSummary:"Ensure all page content is contained by landmarks",friendlySummary:"Wrap all page content in appropriate landmark regions (<header>, <main>, <footer>, etc.)."},"scope-attr-valid":{title:"scope attribute",axeSummary:"Ensure the scope attribute is used correctly on tables",friendlySummary:"Use the scope attribute only on <th> elements, with proper values (col, row, etc.)."},"skip-link":{title:"Skip link",axeSummary:'Ensure all "skip" links have a focusable target',friendlySummary:'Make sure any "skip to content" link targets an existing, focusable element.'},tabindex:{title:"tabindex values",axeSummary:"Ensure tabindex attribute values are not greater than 0",friendlySummary:"Don't use tabindex values greater than 0."},"table-duplicate-name":{title:"Duplicate names for table",axeSummary:"Ensure the <caption> does not duplicate the summary attribute text",friendlySummary:"Don't use the same text in both a table's <caption> and its summary attribute."}},axeRuleMapping_wcag_2_x_aaa={"color-contrast-enhanced":{title:"Enhanced color contrast",axeSummary:"Ensure contrast between text and background meets WCAG 2 AAA enhanced contrast thresholds",friendlySummary:"Use extra-high contrast for text and background to meet WCAG AAA level."},"identical-links-same-purpose":{title:"Same link name, same purpose",axeSummary:"Ensure links with the same accessible name serve a similar purpose",friendlySummary:"If two links have the same text, they should do the same thing (lead to the same content)."},"meta-refresh-no-exceptions":{title:'No <meta http-equiv="refresh">',axeSummary:'Ensure <meta http-equiv="refresh"> is not used for delayed refresh (no exceptions)',friendlySummary:`Don't auto-refresh or redirect pages using <meta http-equiv="refresh"> even with a delay.`}},axeRuleMapping_experimental={"css-orientation-lock":{title:"CSS orientation lock",axeSummary:"Ensure content is not locked to a specific display orientation (works in all orientations)",friendlySummary:"Don't lock content to one screen orientation; support both portrait and landscape modes."},"focus-order-semantics":{title:"Focus order semantic role",axeSummary:"Ensure elements in the tab order have a role appropriate for interactive content",friendlySummary:"Ensure elements in the tab order have a role appropriate for interactive content"},"hidden-content":{title:"Hidden content",axeSummary:"Informs users about hidden content",friendlySummary:"Display hidden content on the page for test analysis."},"label-content-name-mismatch":{title:"Content name mismatch",axeSummary:"Ensure elements labeled by their content include that text in their accessible name",friendlySummary:"If an element's visible text serves as its label, include that text in its accessible name."},"p-as-heading":{title:"No <p> headings",axeSummary:"Ensure <p> elements aren't styled to look like headings (use real headings)",friendlySummary:"Don't just style a <p> to look like a heading \u2013 use an actual heading tag for headings."},"table-fake-caption":{title:"Table caption",axeSummary:"Ensure that tables with a caption use the <caption> element",friendlySummary:"Use a <caption> element for table captions instead of just styled text."},"td-has-header":{title:"<td> has header",axeSummary:"Ensure each non-empty data cell in large tables (3\xD73+) has one or more headers",friendlySummary:"Every data cell in large tables should be associated with at least one header cell."}},axeRuleMapping_deprecated={"aria-roledescription":{title:"aria-roledescription",axeSummary:"Ensure aria-roledescription is only used on elements with an implicit or explicit role",friendlySummary:"Only use aria-roledescription on elements that already have a defined role."}},combinedRulesMap={...axeRuleMapping_wcag_2_0_a_aa,...axeRuleMapping_wcag_2_1_a_aa,...axeRuleMapping_wcag_2_2_a_aa,...axeRuleMapping_wcag_2_x_aaa,...axeRuleMapping_best_practices,...axeRuleMapping_experimental,...axeRuleMapping_deprecated};var getTitleForAxeResult=axeResult=>combinedRulesMap[axeResult.id]?.title||axeResult.id,getFriendlySummaryForAxeResult=axeResult=>combinedRulesMap[axeResult.id]?.friendlySummary||axeResult.description;var ADDON_ID="storybook/a11y",PANEL_ID=`${ADDON_ID}/panel`,PARAM_KEY="a11y",RESULT=`${ADDON_ID}/result`,REQUEST=`${ADDON_ID}/request`,RUNNING=`${ADDON_ID}/running`,ERROR=`${ADDON_ID}/error`,MANUAL=`${ADDON_ID}/manual`,SELECT=`${ADDON_ID}/select`,DOCUMENTATION_LINK="writing-tests/accessibility-testing",DOCUMENTATION_DISCREPANCY_LINK=`${DOCUMENTATION_LINK}#why-are-my-tests-failing-in-different-environments`;var EVENTS={RESULT,REQUEST,RUNNING,ERROR,MANUAL,SELECT},STATUS_TYPE_ID_COMPONENT_TEST="storybook/component-test",STATUS_TYPE_ID_A11Y="storybook/a11y";var unhighlightedSelectors=["html","body","main"],theme=convert(themes.light),colorsByType={[RuleType.VIOLATION]:theme.color.negative,[RuleType.PASS]:theme.color.positive,[RuleType.INCOMPLETION]:theme.color.warning},A11yContext=createContext({parameters:{},results:void 0,highlighted:!1,toggleHighlight:()=>{},tab:RuleType.VIOLATION,handleCopyLink:()=>{},setTab:()=>{},setStatus:()=>{},status:"initial",error:void 0,handleManual:()=>{},discrepancy:null,selectedItems:new Map,allExpanded:!1,toggleOpen:()=>{},handleCollapseAll:()=>{},handleExpandAll:()=>{},handleJumpToElement:()=>{},handleSelectionChange:()=>{}}),A11yContextProvider=props=>{let parameters=useParameter("a11y",{}),[globals]=useGlobals()??[],api=useStorybookApi(),getInitialStatus=useCallback((manual2=!1)=>manual2?"manual":"initial",[]),manual=useMemo(()=>globals?.a11y?.manual??!1,[globals?.a11y?.manual]),a11ySelection=useMemo(()=>{let value=api.getQueryParam("a11ySelection");return value&&api.setQueryParams({a11ySelection:""}),value},[api]),[results,setResults]=useAddonState(ADDON_ID),[tab,setTab]=useState(()=>{let[type]=a11ySelection?.split(".")??[];return type&&Object.values(RuleType).includes(type)?type:RuleType.VIOLATION}),[error,setError]=useState(void 0),[status,setStatus]=useState(getInitialStatus(manual)),[highlighted,setHighlighted]=useState(!!a11ySelection),{storyId}=useStorybookState(),currentStoryA11yStatusValue=experimental_useStatusStore(allStatuses=>allStatuses[storyId]?.[STATUS_TYPE_ID_A11Y]?.value);useEffect(()=>experimental_getStatusStore("storybook/component-test").onAllStatusChange((statuses,previousStatuses)=>{let current=statuses[storyId]?.[STATUS_TYPE_ID_COMPONENT_TEST],previous=previousStatuses[storyId]?.[STATUS_TYPE_ID_COMPONENT_TEST];current?.value==="status-value:error"&&previous?.value!=="status-value:error"&&setStatus("component-test-error");}),[storyId]);let handleToggleHighlight=useCallback(()=>setHighlighted(prevHighlighted=>!prevHighlighted),[]),[selectedItems,setSelectedItems]=useState(()=>{let initialValue=new Map;if(a11ySelection&&/^[a-z]+.[a-z-]+.[0-9]+$/.test(a11ySelection)){let[type,id]=a11ySelection.split(".");initialValue.set(`${type}.${id}`,a11ySelection);}return initialValue}),allExpanded=useMemo(()=>results?.[tab]?.every(result=>selectedItems.has(`${tab}.${result.id}`))??!1,[results,selectedItems,tab]),toggleOpen=useCallback((event,type,item)=>{event.stopPropagation();let key=`${type}.${item.id}`;setSelectedItems(prev=>new Map(prev.delete(key)?prev:prev.set(key,`${key}.1`)));},[]),handleCollapseAll=useCallback(()=>{setSelectedItems(new Map);},[]),handleExpandAll=useCallback(()=>{setSelectedItems(prev=>new Map(results?.[tab]?.map(result=>{let key=`${tab}.${result.id}`;return [key,prev.get(key)??`${key}.1`]})??[]));},[results,tab]),handleSelectionChange=useCallback(key=>{let[type,id]=key.split(".");setSelectedItems(prev=>new Map(prev.set(`${type}.${id}`,key)));},[]),handleError=useCallback(err=>{setStatus("error"),setError(err);},[]),handleResult=useCallback((axeResults,id)=>{storyId===id&&(setStatus("ran"),setResults(axeResults),setTimeout(()=>{if(status==="ran"&&setStatus("ready"),selectedItems.size===1){let[key]=selectedItems.values();document.getElementById(key)?.scrollIntoView({behavior:"smooth",block:"center"});}},900));},[setResults,status,storyId,selectedItems]),handleSelect=useCallback((itemId,details)=>{let[type,id]=itemId.split("."),{helpUrl,nodes}=results?.[type]?.find(r=>r.id===id)||{},openedWindow=helpUrl&&window.open(helpUrl,"_blank","noopener,noreferrer");if(nodes&&!openedWindow){let index=nodes.findIndex(n=>details.selectors.some(s=>s===String(n.target)))??-1;if(index!==-1){let key=`${type}.${id}.${index+1}`;setSelectedItems(new Map([[`${type}.${id}`,key]])),setTimeout(()=>{document.getElementById(key)?.scrollIntoView({behavior:"smooth",block:"center"});},100);}}},[results]),handleReport=useCallback(({reporters})=>{let a11yReport=reporters.find(r=>r.type==="a11y");a11yReport&&("error"in a11yReport.result?handleError(a11yReport.result.error):handleResult(a11yReport.result,storyId));},[handleError,handleResult,storyId]),handleReset=useCallback(({newPhase})=>{newPhase==="loading"&&(setResults(void 0),setStatus(manual?"manual":"initial")),newPhase==="afterEach"&&!manual&&setStatus("running");},[manual,setResults]),emit=useChannel({[EVENTS.RESULT]:handleResult,[EVENTS.ERROR]:handleError,[EVENTS.SELECT]:handleSelect,[STORY_CHANGED]:()=>setSelectedItems(new Map),[STORY_RENDER_PHASE_CHANGED]:handleReset,[STORY_FINISHED]:handleReport,[STORY_HOT_UPDATED]:()=>{setStatus("running"),emit(EVENTS.MANUAL,storyId,parameters);}},[handleReset,handleReport,handleSelect,handleError,handleResult,parameters,storyId]),handleManual=useCallback(()=>{setStatus("running"),emit(EVENTS.MANUAL,storyId,parameters);},[emit,parameters,storyId]),handleCopyLink=useCallback(async linkPath=>{let{createCopyToClipboardFunction}=await import('storybook/internal/components');await createCopyToClipboardFunction()(`${window.location.origin}${linkPath}`);},[]),handleJumpToElement=useCallback(target=>emit(SCROLL_INTO_VIEW,target),[emit]);useEffect(()=>{setStatus(getInitialStatus(manual));},[getInitialStatus,manual]),useEffect(()=>{if(emit(REMOVE_HIGHLIGHT,`${ADDON_ID}/selected`),emit(REMOVE_HIGHLIGHT,`${ADDON_ID}/others`),!highlighted)return;let selected=Array.from(selectedItems.values()).flatMap(key=>{let[type,id,number]=key.split(".");if(type!==tab)return [];let target=results?.[type]?.find(r=>r.id===id)?.nodes[Number(number)-1]?.target;return target?[String(target)]:[]});emit(HIGHLIGHT,{id:`${ADDON_ID}/selected`,priority:1,selectors:selected,styles:{outline:`1px solid color-mix(in srgb, ${colorsByType[tab]}, transparent 30%)`,backgroundColor:"transparent"},hoverStyles:{outlineWidth:"2px"},focusStyles:{backgroundColor:"transparent"},menu:results?.[tab].map(result=>{let selectors=result.nodes.flatMap(n=>n.target).map(String).filter(e=>selected.includes(e));return [{id:`${tab}.${result.id}:info`,title:getTitleForAxeResult(result),description:getFriendlySummaryForAxeResult(result),selectors},{id:`${tab}.${result.id}`,iconLeft:"info",iconRight:"shareAlt",title:"Learn how to resolve this violation",clickEvent:EVENTS.SELECT,selectors}]})});let others=results?.[tab].flatMap(r=>r.nodes.flatMap(n=>n.target).map(String)).filter(e=>![...unhighlightedSelectors,...selected].includes(e));emit(HIGHLIGHT,{id:`${ADDON_ID}/others`,selectors:others,styles:{outline:`1px solid color-mix(in srgb, ${colorsByType[tab]}, transparent 30%)`,backgroundColor:`color-mix(in srgb, ${colorsByType[tab]}, transparent 60%)`},hoverStyles:{outlineWidth:"2px"},focusStyles:{backgroundColor:"transparent"},menu:results?.[tab].map(result=>{let selectors=result.nodes.flatMap(n=>n.target).map(String).filter(e=>!selected.includes(e));return [{id:`${tab}.${result.id}:info`,title:getTitleForAxeResult(result),description:getFriendlySummaryForAxeResult(result),selectors},{id:`${tab}.${result.id}`,iconLeft:"info",iconRight:"shareAlt",title:"Learn how to resolve this violation",clickEvent:EVENTS.SELECT,selectors}]})});},[emit,highlighted,results,tab,selectedItems]);let discrepancy=useMemo(()=>{if(!currentStoryA11yStatusValue)return null;if(currentStoryA11yStatusValue==="status-value:success"&&results?.violations.length)return "cliPassedBrowserFailed";if(currentStoryA11yStatusValue==="status-value:error"&&!results?.violations.length){if(status==="ready"||status==="ran")return "browserPassedCliFailed";if(status==="manual")return "cliFailedButModeManual"}return null},[results?.violations.length,status,currentStoryA11yStatusValue]);return React7__default.createElement(A11yContext.Provider,{value:{parameters,results,highlighted,toggleHighlight:handleToggleHighlight,tab,setTab,handleCopyLink,status,setStatus,error,handleManual,discrepancy,selectedItems,toggleOpen,allExpanded,handleCollapseAll,handleExpandAll,handleJumpToElement,handleSelectionChange},...props})},useA11yContext=()=>useContext(A11yContext);function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r]);}return n},_extends.apply(null,arguments)}function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler,ourEventHandler,{checkForDefaultPrevented=!0}={}){return function(event){if(originalEventHandler?.(event),checkForDefaultPrevented===!1||!event.defaultPrevented)return ourEventHandler?.(event)}}function $c512c27ab02ef895$export$50c7b4e9d9f19c1(scopeName,createContextScopeDeps=[]){let defaultContexts=[];function $c512c27ab02ef895$export$fd42f52fd3ae1109(rootComponentName,defaultContext){let BaseContext=createContext(defaultContext),index=defaultContexts.length;defaultContexts=[...defaultContexts,defaultContext];function Provider(props){let{scope,children,...context}=props,Context=scope?.[scopeName][index]||BaseContext,value=useMemo(()=>context,Object.values(context));return createElement(Context.Provider,{value},children)}function useContext2(consumerName,scope){let Context=scope?.[scopeName][index]||BaseContext,context=useContext(Context);if(context)return context;if(defaultContext!==void 0)return defaultContext;throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``)}return Provider.displayName=rootComponentName+"Provider",[Provider,useContext2]}let createScope=()=>{let scopeContexts=defaultContexts.map(defaultContext=>createContext(defaultContext));return function(scope){let contexts=scope?.[scopeName]||scopeContexts;return useMemo(()=>({[`__scope${scopeName}`]:{...scope,[scopeName]:contexts}}),[scope,contexts])}};return createScope.scopeName=scopeName,[$c512c27ab02ef895$export$fd42f52fd3ae1109,$c512c27ab02ef895$var$composeContextScopes(createScope,...createContextScopeDeps)]}function $c512c27ab02ef895$var$composeContextScopes(...scopes){let baseScope=scopes[0];if(scopes.length===1)return baseScope;let createScope1=()=>{let scopeHooks=scopes.map(createScope=>({useScope:createScope(),scopeName:createScope.scopeName}));return function(overrideScopes){let nextScopes1=scopeHooks.reduce((nextScopes,{useScope,scopeName})=>{let currentScope=useScope(overrideScopes)[`__scope${scopeName}`];return {...nextScopes,...currentScope}},{});return useMemo(()=>({[`__scope${baseScope.scopeName}`]:nextScopes1}),[nextScopes1])}};return createScope1.scopeName=baseScope.scopeName,createScope1}function $6ed0406888f73fc4$var$setRef(ref,value){typeof ref=="function"?ref(value):ref!=null&&(ref.current=value);}function $6ed0406888f73fc4$export$43e446d32b3d21af(...refs){return node=>refs.forEach(ref=>$6ed0406888f73fc4$var$setRef(ref,node))}function $6ed0406888f73fc4$export$c7b2cbe3552a0d05(...refs){return useCallback($6ed0406888f73fc4$export$43e446d32b3d21af(...refs),refs)}var $5e63c961fc1ce211$export$8c6ed5c666ac1360=forwardRef((props,forwardedRef)=>{let{children,...slotProps}=props,childrenArray=Children.toArray(children),slottable=childrenArray.find($5e63c961fc1ce211$var$isSlottable);if(slottable){let newElement=slottable.props.children,newChildren=childrenArray.map(child=>child===slottable?Children.count(newElement)>1?Children.only(null):isValidElement(newElement)?newElement.props.children:null:child);return createElement($5e63c961fc1ce211$var$SlotClone,_extends({},slotProps,{ref:forwardedRef}),isValidElement(newElement)?cloneElement(newElement,void 0,newChildren):null)}return createElement($5e63c961fc1ce211$var$SlotClone,_extends({},slotProps,{ref:forwardedRef}),children)});$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName="Slot";var $5e63c961fc1ce211$var$SlotClone=forwardRef((props,forwardedRef)=>{let{children,...slotProps}=props;return isValidElement(children)?cloneElement(children,{...$5e63c961fc1ce211$var$mergeProps(slotProps,children.props),ref:forwardedRef?$6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef,children.ref):children.ref}):Children.count(children)>1?Children.only(null):null});$5e63c961fc1ce211$var$SlotClone.displayName="SlotClone";var $5e63c961fc1ce211$export$d9f1ccf0bdb05d45=({children})=>createElement(Fragment,null,children);function $5e63c961fc1ce211$var$isSlottable(child){return isValidElement(child)&&child.type===$5e63c961fc1ce211$export$d9f1ccf0bdb05d45}function $5e63c961fc1ce211$var$mergeProps(slotProps,childProps){let overrideProps={...childProps};for(let propName in childProps){let slotPropValue=slotProps[propName],childPropValue=childProps[propName];/^on[A-Z]/.test(propName)?slotPropValue&&childPropValue?overrideProps[propName]=(...args)=>{childPropValue(...args),slotPropValue(...args);}:slotPropValue&&(overrideProps[propName]=slotPropValue):propName==="style"?overrideProps[propName]={...slotPropValue,...childPropValue}:propName==="className"&&(overrideProps[propName]=[slotPropValue,childPropValue].filter(Boolean).join(" "));}return {...slotProps,...overrideProps}}function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name){let PROVIDER_NAME=name+"CollectionProvider",[createCollectionContext,createCollectionScope]=$c512c27ab02ef895$export$50c7b4e9d9f19c1(PROVIDER_NAME),[CollectionProviderImpl,useCollectionContext]=createCollectionContext(PROVIDER_NAME,{collectionRef:{current:null},itemMap:new Map}),CollectionProvider=props=>{let{scope,children}=props,ref=React7__default.useRef(null),itemMap=React7__default.useRef(new Map).current;return React7__default.createElement(CollectionProviderImpl,{scope,itemMap,collectionRef:ref},children)},COLLECTION_SLOT_NAME=name+"CollectionSlot",CollectionSlot=React7__default.forwardRef((props,forwardedRef)=>{let{scope,children}=props,context=useCollectionContext(COLLECTION_SLOT_NAME,scope),composedRefs=$6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef,context.collectionRef);return React7__default.createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360,{ref:composedRefs},children)}),ITEM_SLOT_NAME=name+"CollectionItemSlot",ITEM_DATA_ATTR="data-radix-collection-item",CollectionItemSlot=React7__default.forwardRef((props,forwardedRef)=>{let{scope,children,...itemData}=props,ref=React7__default.useRef(null),composedRefs=$6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef,ref),context=useCollectionContext(ITEM_SLOT_NAME,scope);return React7__default.useEffect(()=>(context.itemMap.set(ref,{ref,...itemData}),()=>void context.itemMap.delete(ref))),React7__default.createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360,{[ITEM_DATA_ATTR]:"",ref:composedRefs},children)});function useCollection(scope){let context=useCollectionContext(name+"CollectionConsumer",scope);return React7__default.useCallback(()=>{let collectionNode=context.collectionRef.current;if(!collectionNode)return [];let orderedNodes=Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));return Array.from(context.itemMap.values()).sort((a,b)=>orderedNodes.indexOf(a.ref.current)-orderedNodes.indexOf(b.ref.current))},[context.collectionRef,context.itemMap])}return [{Provider:CollectionProvider,Slot:CollectionSlot,ItemSlot:CollectionItemSlot},useCollection,createCollectionScope]}function $6ed0406888f73fc4$var$setRef2(ref,value){typeof ref=="function"?ref(value):ref!=null&&(ref.current=value);}function $6ed0406888f73fc4$export$43e446d32b3d21af2(...refs){return node=>refs.forEach(ref=>$6ed0406888f73fc4$var$setRef2(ref,node))}function $6ed0406888f73fc4$export$c7b2cbe3552a0d052(...refs){return useCallback($6ed0406888f73fc4$export$43e446d32b3d21af2(...refs),refs)}var $9f79659886946c16$export$e5c5a5f917a5871c=globalThis?.document?useLayoutEffect:()=>{};var $1746a345f3d73bb7$var$useReactId=React7.useId||(()=>{}),$1746a345f3d73bb7$var$count=0;function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId){let[id,setId]=React7.useState($1746a345f3d73bb7$var$useReactId());return $9f79659886946c16$export$e5c5a5f917a5871c(()=>{deterministicId||setId(reactId=>reactId??String($1746a345f3d73bb7$var$count++));},[deterministicId]),deterministicId||(id?`radix-${id}`:"")}var $5e63c961fc1ce211$export$8c6ed5c666ac13602=forwardRef((props,forwardedRef)=>{let{children,...slotProps}=props,childrenArray=Children.toArray(children),slottable=childrenArray.find($5e63c961fc1ce211$var$isSlottable2);if(slottable){let newElement=slottable.props.children,newChildren=childrenArray.map(child=>child===slottable?Children.count(newElement)>1?Children.only(null):isValidElement(newElement)?newElement.props.children:null:child);return createElement($5e63c961fc1ce211$var$SlotClone2,_extends({},slotProps,{ref:forwardedRef}),isValidElement(newElement)?cloneElement(newElement,void 0,newChildren):null)}return createElement($5e63c961fc1ce211$var$SlotClone2,_extends({},slotProps,{ref:forwardedRef}),children)});$5e63c961fc1ce211$export$8c6ed5c666ac13602.displayName="Slot";var $5e63c961fc1ce211$var$SlotClone2=forwardRef((props,forwardedRef)=>{let{children,...slotProps}=props;return isValidElement(children)?cloneElement(children,{...$5e63c961fc1ce211$var$mergeProps2(slotProps,children.props),ref:forwardedRef?$6ed0406888f73fc4$export$43e446d32b3d21af2(forwardedRef,children.ref):children.ref}):Children.count(children)>1?Children.only(null):null});$5e63c961fc1ce211$var$SlotClone2.displayName="SlotClone";var $5e63c961fc1ce211$export$d9f1ccf0bdb05d452=({children})=>createElement(Fragment,null,children);function $5e63c961fc1ce211$var$isSlottable2(child){return isValidElement(child)&&child.type===$5e63c961fc1ce211$export$d9f1ccf0bdb05d452}function $5e63c961fc1ce211$var$mergeProps2(slotProps,childProps){let overrideProps={...childProps};for(let propName in childProps){let slotPropValue=slotProps[propName],childPropValue=childProps[propName];/^on[A-Z]/.test(propName)?slotPropValue&&childPropValue?overrideProps[propName]=(...args)=>{childPropValue(...args),slotPropValue(...args);}:slotPropValue&&(overrideProps[propName]=slotPropValue):propName==="style"?overrideProps[propName]={...slotPropValue,...childPropValue}:propName==="className"&&(overrideProps[propName]=[slotPropValue,childPropValue].filter(Boolean).join(" "));}return {...slotProps,...overrideProps}}var $8927f6f2acc4f386$var$NODES=["a","button","div","form","h2","h3","img","input","label","li","nav","ol","p","span","svg","ul"],$8927f6f2acc4f386$export$250ffa63cdc0d034=$8927f6f2acc4f386$var$NODES.reduce((primitive,node)=>{let Node=forwardRef((props,forwardedRef)=>{let{asChild,...primitiveProps}=props,Comp=asChild?$5e63c961fc1ce211$export$8c6ed5c666ac13602:node;return useEffect(()=>{window[Symbol.for("radix-ui")]=!0;},[]),createElement(Comp,_extends({},primitiveProps,{ref:forwardedRef}))});return Node.displayName=`Primitive.${node}`,{...primitive,[node]:Node}},{});function $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(callback){let callbackRef=useRef(callback);return useEffect(()=>{callbackRef.current=callback;}),useMemo(()=>(...args)=>{var _callbackRef$current;return (_callbackRef$current=callbackRef.current)===null||_callbackRef$current===void 0?void 0:_callbackRef$current.call(callbackRef,...args)},[])}function $b1b2314f5f9a1d84$export$25bec8c6f54ee79a2(callback){let callbackRef=useRef(callback);return useEffect(()=>{callbackRef.current=callback;}),useMemo(()=>(...args)=>{var _callbackRef$current;return (_callbackRef$current=callbackRef.current)===null||_callbackRef$current===void 0?void 0:_callbackRef$current.call(callbackRef,...args)},[])}function $71cd76cc60e0454e$export$6f32135080cb4c3({prop,defaultProp,onChange=()=>{}}){let[uncontrolledProp,setUncontrolledProp]=$71cd76cc60e0454e$var$useUncontrolledState({defaultProp,onChange}),isControlled=prop!==void 0,value1=isControlled?prop:uncontrolledProp,handleChange=$b1b2314f5f9a1d84$export$25bec8c6f54ee79a2(onChange),setValue=useCallback(nextValue=>{if(isControlled){let value=typeof nextValue=="function"?nextValue(prop):nextValue;value!==prop&&handleChange(value);}else setUncontrolledProp(nextValue);},[isControlled,prop,setUncontrolledProp,handleChange]);return [value1,setValue]}function $71cd76cc60e0454e$var$useUncontrolledState({defaultProp,onChange}){let uncontrolledState=useState(defaultProp),[value]=uncontrolledState,prevValueRef=useRef(value),handleChange=$b1b2314f5f9a1d84$export$25bec8c6f54ee79a2(onChange);return useEffect(()=>{prevValueRef.current!==value&&(handleChange(value),prevValueRef.current=value);},[value,prevValueRef,handleChange]),uncontrolledState}var $f631663db3294ace$var$DirectionContext=createContext(void 0);function $f631663db3294ace$export$b39126d51d94e6f3(localDir){let globalDir=useContext($f631663db3294ace$var$DirectionContext);return localDir||globalDir||"ltr"}var $d7bdfb9eb0fdf311$var$ENTRY_FOCUS="rovingFocusGroup.onEntryFocus",$d7bdfb9eb0fdf311$var$EVENT_OPTIONS={bubbles:!1,cancelable:!0},$d7bdfb9eb0fdf311$var$GROUP_NAME="RovingFocusGroup",[$d7bdfb9eb0fdf311$var$Collection,$d7bdfb9eb0fdf311$var$useCollection,$d7bdfb9eb0fdf311$var$createCollectionScope]=$e02a7d9cb1dc128c$export$c74125a8e3af6bb2($d7bdfb9eb0fdf311$var$GROUP_NAME),[$d7bdfb9eb0fdf311$var$createRovingFocusGroupContext,$d7bdfb9eb0fdf311$export$c7109489551a4f4]=$c512c27ab02ef895$export$50c7b4e9d9f19c1($d7bdfb9eb0fdf311$var$GROUP_NAME,[$d7bdfb9eb0fdf311$var$createCollectionScope]),[$d7bdfb9eb0fdf311$var$RovingFocusProvider,$d7bdfb9eb0fdf311$var$useRovingFocusContext]=$d7bdfb9eb0fdf311$var$createRovingFocusGroupContext($d7bdfb9eb0fdf311$var$GROUP_NAME),$d7bdfb9eb0fdf311$export$8699f7c8af148338=forwardRef((props,forwardedRef)=>createElement($d7bdfb9eb0fdf311$var$Collection.Provider,{scope:props.__scopeRovingFocusGroup},createElement($d7bdfb9eb0fdf311$var$Collection.Slot,{scope:props.__scopeRovingFocusGroup},createElement($d7bdfb9eb0fdf311$var$RovingFocusGroupImpl,_extends({},props,{ref:forwardedRef}))))),$d7bdfb9eb0fdf311$var$RovingFocusGroupImpl=forwardRef((props,forwardedRef)=>{let{__scopeRovingFocusGroup,orientation,loop=!1,dir,currentTabStopId:currentTabStopIdProp,defaultCurrentTabStopId,onCurrentTabStopIdChange,onEntryFocus,...groupProps}=props,ref=useRef(null),composedRefs=$6ed0406888f73fc4$export$c7b2cbe3552a0d052(forwardedRef,ref),direction=$f631663db3294ace$export$b39126d51d94e6f3(dir),[currentTabStopId=null,setCurrentTabStopId]=$71cd76cc60e0454e$export$6f32135080cb4c3({prop:currentTabStopIdProp,defaultProp:defaultCurrentTabStopId,onChange:onCurrentTabStopIdChange}),[isTabbingBackOut,setIsTabbingBackOut]=useState(!1),handleEntryFocus=$b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onEntryFocus),getItems=$d7bdfb9eb0fdf311$var$useCollection(__scopeRovingFocusGroup),isClickFocusRef=useRef(!1),[focusableItemsCount,setFocusableItemsCount]=useState(0);return useEffect(()=>{let node=ref.current;if(node)return node.addEventListener($d7bdfb9eb0fdf311$var$ENTRY_FOCUS,handleEntryFocus),()=>node.removeEventListener($d7bdfb9eb0fdf311$var$ENTRY_FOCUS,handleEntryFocus)},[handleEntryFocus]),createElement($d7bdfb9eb0fdf311$var$RovingFocusProvider,{scope:__scopeRovingFocusGroup,orientation,dir:direction,loop,currentTabStopId,onItemFocus:useCallback(tabStopId=>setCurrentTabStopId(tabStopId),[setCurrentTabStopId]),onItemShiftTab:useCallback(()=>setIsTabbingBackOut(!0),[]),onFocusableItemAdd:useCallback(()=>setFocusableItemsCount(prevCount=>prevCount+1),[]),onFocusableItemRemove:useCallback(()=>setFocusableItemsCount(prevCount=>prevCount-1),[])},createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div,_extends({tabIndex:isTabbingBackOut||focusableItemsCount===0?-1:0,"data-orientation":orientation},groupProps,{ref:composedRefs,style:{outline:"none",...props.style},onMouseDown:$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onMouseDown,()=>{isClickFocusRef.current=!0;}),onFocus:$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocus,event=>{let isKeyboardFocus=!isClickFocusRef.current;if(event.target===event.currentTarget&&isKeyboardFocus&&!isTabbingBackOut){let entryFocusEvent=new CustomEvent($d7bdfb9eb0fdf311$var$ENTRY_FOCUS,$d7bdfb9eb0fdf311$var$EVENT_OPTIONS);if(event.currentTarget.dispatchEvent(entryFocusEvent),!entryFocusEvent.defaultPrevented){let items=getItems().filter(item=>item.focusable),activeItem=items.find(item=>item.active),currentItem=items.find(item=>item.id===currentTabStopId),candidateNodes=[activeItem,currentItem,...items].filter(Boolean).map(item=>item.ref.current);$d7bdfb9eb0fdf311$var$focusFirst(candidateNodes);}}isClickFocusRef.current=!1;}),onBlur:$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onBlur,()=>setIsTabbingBackOut(!1))})))}),$d7bdfb9eb0fdf311$var$ITEM_NAME="RovingFocusGroupItem",$d7bdfb9eb0fdf311$export$ab9df7c53fe8454=forwardRef((props,forwardedRef)=>{let{__scopeRovingFocusGroup,focusable=!0,active=!1,tabStopId,...itemProps}=props,autoId=$1746a345f3d73bb7$export$f680877a34711e37(),id=tabStopId||autoId,context=$d7bdfb9eb0fdf311$var$useRovingFocusContext($d7bdfb9eb0fdf311$var$ITEM_NAME,__scopeRovingFocusGroup),isCurrentTabStop=context.currentTabStopId===id,getItems=$d7bdfb9eb0fdf311$var$useCollection(__scopeRovingFocusGroup),{onFocusableItemAdd,onFocusableItemRemove}=context;return useEffect(()=>{if(focusable)return onFocusableItemAdd(),()=>onFocusableItemRemove()},[focusable,onFocusableItemAdd,onFocusableItemRemove]),createElement($d7bdfb9eb0fdf311$var$Collection.ItemSlot,{scope:__scopeRovingFocusGroup,id,focusable,active},createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span,_extends({tabIndex:isCurrentTabStop?0:-1,"data-orientation":context.orientation},itemProps,{ref:forwardedRef,onMouseDown:$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onMouseDown,event=>{focusable?context.onItemFocus(id):event.preventDefault();}),onFocus:$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocus,()=>context.onItemFocus(id)),onKeyDown:$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown,event=>{if(event.key==="Tab"&&event.shiftKey){context.onItemShiftTab();return}if(event.target!==event.currentTarget)return;let focusIntent=$d7bdfb9eb0fdf311$var$getFocusIntent(event,context.orientation,context.dir);if(focusIntent!==void 0){event.preventDefault();let candidateNodes=getItems().filter(item=>item.focusable).map(item=>item.ref.current);if(focusIntent==="last")candidateNodes.reverse();else if(focusIntent==="prev"||focusIntent==="next"){focusIntent==="prev"&&candidateNodes.reverse();let currentIndex=candidateNodes.indexOf(event.currentTarget);candidateNodes=context.loop?$d7bdfb9eb0fdf311$var$wrapArray(candidateNodes,currentIndex+1):candidateNodes.slice(currentIndex+1);}setTimeout(()=>$d7bdfb9eb0fdf311$var$focusFirst(candidateNodes));}})})))}),$d7bdfb9eb0fdf311$var$MAP_KEY_TO_FOCUS_INTENT={ArrowLeft:"prev",ArrowUp:"prev",ArrowRight:"next",ArrowDown:"next",PageUp:"first",Home:"first",PageDown:"last",End:"last"};function $d7bdfb9eb0fdf311$var$getDirectionAwareKey(key,dir){return dir!=="rtl"?key:key==="ArrowLeft"?"ArrowRight":key==="ArrowRight"?"ArrowLeft":key}function $d7bdfb9eb0fdf311$var$getFocusIntent(event,orientation,dir){let key=$d7bdfb9eb0fdf311$var$getDirectionAwareKey(event.key,dir);if(!(orientation==="vertical"&&["ArrowLeft","ArrowRight"].includes(key))&&!(orientation==="horizontal"&&["ArrowUp","ArrowDown"].includes(key)))return $d7bdfb9eb0fdf311$var$MAP_KEY_TO_FOCUS_INTENT[key]}function $d7bdfb9eb0fdf311$var$focusFirst(candidates){let PREVIOUSLY_FOCUSED_ELEMENT=document.activeElement;for(let candidate of candidates)if(candidate===PREVIOUSLY_FOCUSED_ELEMENT||(candidate.focus(),document.activeElement!==PREVIOUSLY_FOCUSED_ELEMENT))return}function $d7bdfb9eb0fdf311$var$wrapArray(array,startIndex){return array.map((_,index)=>array[(startIndex+index)%array.length])}var $d7bdfb9eb0fdf311$export$be92b6f5f03c0fe9=$d7bdfb9eb0fdf311$export$8699f7c8af148338,$d7bdfb9eb0fdf311$export$6d08773d2e66f8f2=$d7bdfb9eb0fdf311$export$ab9df7c53fe8454;function $6ed0406888f73fc4$var$setRef3(ref,value){typeof ref=="function"?ref(value):ref!=null&&(ref.current=value);}function $6ed0406888f73fc4$export$43e446d32b3d21af3(...refs){return node=>refs.forEach(ref=>$6ed0406888f73fc4$var$setRef3(ref,node))}function $6ed0406888f73fc4$export$c7b2cbe3552a0d053(...refs){return useCallback($6ed0406888f73fc4$export$43e446d32b3d21af3(...refs),refs)}var $9f79659886946c16$export$e5c5a5f917a5871c2=globalThis?.document?useLayoutEffect:()=>{};function $fe963b355347cc68$export$3e6543de14f8614f(initialState,machine){return useReducer((state,event)=>{let nextState=machine[state][event];return nextState??state},initialState)}var $921a889cee6df7e8$export$99c2b779aa4e8b8b=props=>{let{present,children}=props,presence=$921a889cee6df7e8$var$usePresence(present),child=typeof children=="function"?children({present:presence.isPresent}):Children.only(children),ref=$6ed0406888f73fc4$export$c7b2cbe3552a0d053(presence.ref,child.ref);return typeof children=="function"||presence.isPresent?cloneElement(child,{ref}):null};$921a889cee6df7e8$export$99c2b779aa4e8b8b.displayName="Presence";function $921a889cee6df7e8$var$usePresence(present){let[node1,setNode]=useState(),stylesRef=useRef({}),prevPresentRef=useRef(present),prevAnimationNameRef=useRef("none"),initialState=present?"mounted":"unmounted",[state,send]=$fe963b355347cc68$export$3e6543de14f8614f(initialState,{mounted:{UNMOUNT:"unmounted",ANIMATION_OUT:"unmountSuspended"},unmountSuspended:{MOUNT:"mounted",ANIMATION_END:"unmounted"},unmounted:{MOUNT:"mounted"}});return useEffect(()=>{let currentAnimationName=$921a889cee6df7e8$var$getAnimationName(stylesRef.current);prevAnimationNameRef.current=state==="mounted"?currentAnimationName:"none";},[state]),$9f79659886946c16$export$e5c5a5f917a5871c2(()=>{let styles=stylesRef.current,wasPresent=prevPresentRef.current;if(wasPresent!==present){let prevAnimationName=prevAnimationNameRef.current,currentAnimationName=$921a889cee6df7e8$var$getAnimationName(styles);present?send("MOUNT"):currentAnimationName==="none"||styles?.display==="none"?send("UNMOUNT"):send(wasPresent&&prevAnimationName!==currentAnimationName?"ANIMATION_OUT":"UNMOUNT"),prevPresentRef.current=present;}},[present,send]),$9f79659886946c16$export$e5c5a5f917a5871c2(()=>{if(node1){let handleAnimationEnd=event=>{let isCurrentAnimation=$921a889cee6df7e8$var$getAnimationName(stylesRef.current).includes(event.animationName);event.target===node1&&isCurrentAnimation&&flushSync(()=>send("ANIMATION_END"));},handleAnimationStart=event=>{event.target===node1&&(prevAnimationNameRef.current=$921a889cee6df7e8$var$getAnimationName(stylesRef.current));};return node1.addEventListener("animationstart",handleAnimationStart),node1.addEventListener("animationcancel",handleAnimationEnd),node1.addEventListener("animationend",handleAnimationEnd),()=>{node1.removeEventListener("animationstart",handleAnimationStart),node1.removeEventListener("animationcancel",handleAnimationEnd),node1.removeEventListener("animationend",handleAnimationEnd);}}else send("ANIMATION_END");},[node1,send]),{isPresent:["mounted","unmountSuspended"].includes(state),ref:useCallback(node=>{node&&(stylesRef.current=getComputedStyle(node)),setNode(node);},[])}}function $921a889cee6df7e8$var$getAnimationName(styles){return styles?.animationName||"none"}function $6ed0406888f73fc4$var$setRef4(ref,value){typeof ref=="function"?ref(value):ref!=null&&(ref.current=value);}function $6ed0406888f73fc4$export$43e446d32b3d21af4(...refs){return node=>refs.forEach(ref=>$6ed0406888f73fc4$var$setRef4(ref,node))}var $5e63c961fc1ce211$export$8c6ed5c666ac13603=forwardRef((props,forwardedRef)=>{let{children,...slotProps}=props,childrenArray=Children.toArray(children),slottable=childrenArray.find($5e63c961fc1ce211$var$isSlottable3);if(slottable){let newElement=slottable.props.children,newChildren=childrenArray.map(child=>child===slottable?Children.count(newElement)>1?Children.only(null):isValidElement(newElement)?newElement.props.children:null:child);return createElement($5e63c961fc1ce211$var$SlotClone3,_extends({},slotProps,{ref:forwardedRef}),isValidElement(newElement)?cloneElement(newElement,void 0,newChildren):null)}return createElement($5e63c961fc1ce211$var$SlotClone3,_extends({},slotProps,{ref:forwardedRef}),children)});$5e63c961fc1ce211$export$8c6ed5c666ac13603.displayName="Slot";var $5e63c961fc1ce211$var$SlotClone3=forwardRef((props,forwardedRef)=>{let{children,...slotProps}=props;return isValidElement(children)?cloneElement(children,{...$5e63c961fc1ce211$var$mergeProps3(slotProps,children.props),ref:forwardedRef?$6ed0406888f73fc4$export$43e446d32b3d21af4(forwardedRef,children.ref):children.ref}):Children.count(children)>1?Children.only(null):null});$5e63c961fc1ce211$var$SlotClone3.displayName="SlotClone";var $5e63c961fc1ce211$export$d9f1ccf0bdb05d453=({children})=>createElement(Fragment,null,children);function $5e63c961fc1ce211$var$isSlottable3(child){return isValidElement(child)&&child.type===$5e63c961fc1ce211$export$d9f1ccf0bdb05d453}function $5e63c961fc1ce211$var$mergeProps3(slotProps,childProps){let overrideProps={...childProps};for(let propName in childProps){let slotPropValue=slotProps[propName],childPropValue=childProps[propName];/^on[A-Z]/.test(propName)?slotPropValue&&childPropValue?overrideProps[propName]=(...args)=>{childPropValue(...args),slotPropValue(...args);}:slotPropValue&&(overrideProps[propName]=slotPropValue):propName==="style"?overrideProps[propName]={...slotPropValue,...childPropValue}:propName==="className"&&(overrideProps[propName]=[slotPropValue,childPropValue].filter(Boolean).join(" "));}return {...slotProps,...overrideProps}}var $8927f6f2acc4f386$var$NODES2=["a","button","div","form","h2","h3","img","input","label","li","nav","ol","p","span","svg","ul"],$8927f6f2acc4f386$export$250ffa63cdc0d0342=$8927f6f2acc4f386$var$NODES2.reduce((primitive,node)=>{let Node=forwardRef((props,forwardedRef)=>{let{asChild,...primitiveProps}=props,Comp=asChild?$5e63c961fc1ce211$export$8c6ed5c666ac13603:node;return useEffect(()=>{window[Symbol.for("radix-ui")]=!0;},[]),createElement(Comp,_extends({},primitiveProps,{ref:forwardedRef}))});return Node.displayName=`Primitive.${node}`,{...primitive,[node]:Node}},{});var $69cb30bb0017df05$var$TABS_NAME="Tabs",[$69cb30bb0017df05$var$createTabsContext,$69cb30bb0017df05$export$355f5bd209d7b13a]=$c512c27ab02ef895$export$50c7b4e9d9f19c1($69cb30bb0017df05$var$TABS_NAME,[$d7bdfb9eb0fdf311$export$c7109489551a4f4]),$69cb30bb0017df05$var$useRovingFocusGroupScope=$d7bdfb9eb0fdf311$export$c7109489551a4f4(),[$69cb30bb0017df05$var$TabsProvider,$69cb30bb0017df05$var$useTabsContext]=$69cb30bb0017df05$var$createTabsContext($69cb30bb0017df05$var$TABS_NAME),$69cb30bb0017df05$export$b2539bed5023c21c=forwardRef((props,forwardedRef)=>{let{__scopeTabs,value:valueProp,onValueChange,defaultValue,orientation="horizontal",dir,activationMode="automatic",...tabsProps}=props,direction=$f631663db3294ace$export$b39126d51d94e6f3(dir),[value,setValue]=$71cd76cc60e0454e$export$6f32135080cb4c3({prop:valueProp,onChange:onValueChange,defaultProp:defaultValue});return createElement($69cb30bb0017df05$var$TabsProvider,{scope:__scopeTabs,baseId:$1746a345f3d73bb7$export$f680877a34711e37(),value,onValueChange:setValue,orientation,dir:direction,activationMode},createElement($8927f6f2acc4f386$export$250ffa63cdc0d0342.div,_extends({dir:direction,"data-orientation":orientation},tabsProps,{ref:forwardedRef})))}),$69cb30bb0017df05$var$TAB_LIST_NAME="TabsList",$69cb30bb0017df05$export$9712d22edc0d78c1=forwardRef((props,forwardedRef)=>{let{__scopeTabs,loop=!0,...listProps}=props,context=$69cb30bb0017df05$var$useTabsContext($69cb30bb0017df05$var$TAB_LIST_NAME,__scopeTabs),rovingFocusGroupScope=$69cb30bb0017df05$var$useRovingFocusGroupScope(__scopeTabs);return createElement($d7bdfb9eb0fdf311$export$be92b6f5f03c0fe9,_extends({asChild:!0},rovingFocusGroupScope,{orientation:context.orientation,dir:context.dir,loop}),createElement($8927f6f2acc4f386$export$250ffa63cdc0d0342.div,_extends({role:"tablist","aria-orientation":context.orientation},listProps,{ref:forwardedRef})))}),$69cb30bb0017df05$var$TRIGGER_NAME="TabsTrigger",$69cb30bb0017df05$export$8114b9fdfdf9f3ba=forwardRef((props,forwardedRef)=>{let{__scopeTabs,value,disabled=!1,...triggerProps}=props,context=$69cb30bb0017df05$var$useTabsContext($69cb30bb0017df05$var$TRIGGER_NAME,__scopeTabs),rovingFocusGroupScope=$69cb30bb0017df05$var$useRovingFocusGroupScope(__scopeTabs),triggerId=$69cb30bb0017df05$var$makeTriggerId(context.baseId,value),contentId=$69cb30bb0017df05$var$makeContentId(context.baseId,value),isSelected=value===context.value;return createElement($d7bdfb9eb0fdf311$export$6d08773d2e66f8f2,_extends({asChild:!0},rovingFocusGroupScope,{focusable:!disabled,active:isSelected}),createElement($8927f6f2acc4f386$export$250ffa63cdc0d0342.button,_extends({type:"button",role:"tab","aria-selected":isSelected,"aria-controls":contentId,"data-state":isSelected?"active":"inactive","data-disabled":disabled?"":void 0,disabled,id:triggerId},triggerProps,{ref:forwardedRef,onMouseDown:$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onMouseDown,event=>{!disabled&&event.button===0&&event.ctrlKey===!1?context.onValueChange(value):event.preventDefault();}),onKeyDown:$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown,event=>{[" ","Enter"].includes(event.key)&&context.onValueChange(value);}),onFocus:$e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocus,()=>{let isAutomaticActivation=context.activationMode!=="manual";!isSelected&&!disabled&&isAutomaticActivation&&context.onValueChange(value);})})))}),$69cb30bb0017df05$var$CONTENT_NAME="TabsContent",$69cb30bb0017df05$export$bd905d70e8fd2ebb=forwardRef((props,forwardedRef)=>{let{__scopeTabs,value,forceMount,children,...contentProps}=props,context=$69cb30bb0017df05$var$useTabsContext($69cb30bb0017df05$var$CONTENT_NAME,__scopeTabs),triggerId=$69cb30bb0017df05$var$makeTriggerId(context.baseId,value),contentId=$69cb30bb0017df05$var$makeContentId(context.baseId,value),isSelected=value===context.value,isMountAnimationPreventedRef=useRef(isSelected);return useEffect(()=>{let rAF=requestAnimationFrame(()=>isMountAnimationPreventedRef.current=!1);return ()=>cancelAnimationFrame(rAF)},[]),createElement($921a889cee6df7e8$export$99c2b779aa4e8b8b,{present:forceMount||isSelected},({present})=>createElement($8927f6f2acc4f386$export$250ffa63cdc0d0342.div,_extends({"data-state":isSelected?"active":"inactive","data-orientation":context.orientation,role:"tabpanel","aria-labelledby":triggerId,hidden:!present,id:contentId,tabIndex:0},contentProps,{ref:forwardedRef,style:{...props.style,animationDuration:isMountAnimationPreventedRef.current?"0s":void 0}}),present&&children))});function $69cb30bb0017df05$var$makeTriggerId(baseId,value){return `${baseId}-trigger-${value}`}function $69cb30bb0017df05$var$makeContentId(baseId,value){return `${baseId}-content-${value}`}var $69cb30bb0017df05$export$be92b6f5f03c0fe9=$69cb30bb0017df05$export$b2539bed5023c21c,$69cb30bb0017df05$export$54c2e3dc7acea9f5=$69cb30bb0017df05$export$9712d22edc0d78c1,$69cb30bb0017df05$export$41fb9f06171c75f4=$69cb30bb0017df05$export$8114b9fdfdf9f3ba,$69cb30bb0017df05$export$7c6e2c02157bb7d2=$69cb30bb0017df05$export$bd905d70e8fd2ebb;var StyledSyntaxHighlighter=styled(SyntaxHighlighter)(({theme:theme2})=>({fontSize:theme2.typography.size.s1}),({language})=>language==="css"&&{".selector ~ span:nth-last-of-type(-n+3)":{display:"none"}}),Info=styled.div({display:"flex",flexDirection:"column"}),RuleId=styled.div(({theme:theme2})=>({display:"block",color:theme2.textMutedColor,fontFamily:theme2.typography.fonts.mono,fontSize:theme2.typography.size.s1,marginTop:-8,marginBottom:12,"@container (min-width: 800px)":{display:"none"}})),Description=styled.p({margin:0}),Wrapper=styled.div({display:"flex",flexDirection:"column",padding:"0 15px 20px 15px",gap:20}),Columns=styled.div({gap:15,"@container (min-width: 800px)":{display:"grid",gridTemplateColumns:"50% 50%"}}),Content=styled.div(({theme:theme2,side})=>({display:side==="left"?"flex":"none",flexDirection:"column",gap:15,margin:side==="left"?"15px 0":0,padding:side==="left"?"0 15px":0,borderLeft:side==="left"?`1px solid ${theme2.color.border}`:"none","&:focus-visible":{outline:"none",borderRadius:4,boxShadow:`0 0 0 1px inset ${theme2.color.secondary}`},"@container (min-width: 800px)":{display:side==="left"?"none":"flex"}})),Item=styled(Button)(({theme:theme2})=>({fontFamily:theme2.typography.fonts.mono,fontWeight:theme2.typography.weight.regular,color:theme2.textMutedColor,height:40,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",display:"block",width:"100%",textAlign:"left",padding:"0 12px",'&[data-state="active"]':{color:theme2.color.secondary,backgroundColor:theme2.background.hoverable}})),Messages=styled.div({display:"flex",flexDirection:"column",gap:10}),Actions=styled.div({display:"flex",gap:10}),CopyButton=({onClick})=>{let[copied,setCopied]=useState(!1),handleClick=useCallback(()=>{onClick(),setCopied(!0);let timeout=setTimeout(()=>setCopied(!1),2e3);return ()=>clearTimeout(timeout)},[onClick]);return React7__default.createElement(Button,{onClick:handleClick},copied?React7__default.createElement(CheckIcon,null):React7__default.createElement(CopyIcon,null)," ",copied?"Copied":"Copy link")},Details=({id,item,type,selection,handleSelectionChange})=>React7__default.createElement(Wrapper,{id},React7__default.createElement(Info,null,React7__default.createElement(RuleId,null,item.id),React7__default.createElement(Description,null,getFriendlySummaryForAxeResult(item)," ",React7__default.createElement(Link,{href:item.helpUrl,target:"_blank",rel:"noopener noreferrer",withArrow:!0},"Learn how to resolve this violation"))),React7__default.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9,{defaultValue:selection,orientation:"vertical",value:selection,onValueChange:handleSelectionChange,asChild:!0},React7__default.createElement(Columns,null,React7__default.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5,{"aria-label":type},item.nodes.map((node,index)=>{let key=`${type}.${item.id}.${index+1}`;return React7__default.createElement(Fragment,{key},React7__default.createElement($69cb30bb0017df05$export$41fb9f06171c75f4,{value:key,asChild:!0},React7__default.createElement(Item,{variant:"ghost",size:"medium",id:key},index+1,". ",node.html)),React7__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2,{value:key,asChild:!0},React7__default.createElement(Content,{side:"left"},getContent(node))))})),item.nodes.map((node,index)=>{let key=`${type}.${item.id}.${index+1}`;return React7__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2,{key,value:key,asChild:!0},React7__default.createElement(Content,{side:"right"},getContent(node)))}))));function getContent(node){let{handleCopyLink,handleJumpToElement}=useA11yContext(),{any,all,none,html,target}=node,rules=[...any,...all,...none];return React7__default.createElement(React7__default.Fragment,null,React7__default.createElement(Messages,null,rules.map(rule=>React7__default.createElement("div",{key:rule.id},`${rule.message}${/(\.|: [^.]+\.*)$/.test(rule.message)?"":"."}`))),React7__default.createElement(Actions,null,React7__default.createElement(Button,{onClick:()=>handleJumpToElement(node.target.toString())},React7__default.createElement(LocationIcon,null)," Jump to element"),React7__default.createElement(CopyButton,{onClick:()=>handleCopyLink(node.linkPath)})),React7__default.createElement(StyledSyntaxHighlighter,{language:"jsx",wrapLongLines:!0},`/* element */
12
- ${html}`),React7__default.createElement(StyledSyntaxHighlighter,{language:"css",wrapLongLines:!0},`/* selector */
13
- ${target} {}`))}var impactStatus={minor:"neutral",moderate:"warning",serious:"negative",critical:"critical"},impactLabels={minor:"Minor",moderate:"Moderate",serious:"Serious",critical:"Critical"},Wrapper2=styled.div(({theme:theme2})=>({display:"flex",flexDirection:"column",width:"100%",borderBottom:`1px solid ${theme2.appBorderColor}`,containerType:"inline-size",fontSize:theme2.typography.size.s2})),Icon=styled(ChevronSmallDownIcon)({transition:"transform 0.1s ease-in-out"}),HeaderBar=styled.div(({theme:theme2})=>({display:"flex",justifyContent:"space-between",alignItems:"center",gap:6,padding:"6px 10px 6px 15px",minHeight:40,background:"none",color:"inherit",textAlign:"left",cursor:"pointer",width:"100%","&:hover":{color:theme2.color.secondary}})),Title=styled.div(({theme:theme2})=>({display:"flex",alignItems:"baseline",flexGrow:1,fontSize:theme2.typography.size.s2,gap:8})),RuleId2=styled.div(({theme:theme2})=>({display:"none",color:theme2.textMutedColor,fontFamily:theme2.typography.fonts.mono,fontSize:theme2.typography.size.s1,"@container (min-width: 800px)":{display:"block"}})),Count=styled.div(({theme:theme2})=>({display:"flex",alignItems:"center",justifyContent:"center",color:theme2.textMutedColor,width:28,height:28})),Report=({items,empty,type,handleSelectionChange,selectedItems,toggleOpen})=>React7__default.createElement(React7__default.Fragment,null,items&&items.length?items.map(item=>{let id=`${type}.${item.id}`,detailsId=`details:${id}`,selection=selectedItems.get(id),title=getTitleForAxeResult(item);return React7__default.createElement(Wrapper2,{key:id},React7__default.createElement(HeaderBar,{onClick:event=>toggleOpen(event,type,item),"data-active":!!selection},React7__default.createElement(Title,null,React7__default.createElement("strong",null,title),React7__default.createElement(RuleId2,null,item.id)),item.impact&&React7__default.createElement(Badge,{status:type===RuleType.PASS?"neutral":impactStatus[item.impact]},impactLabels[item.impact]),React7__default.createElement(Count,null,item.nodes.length),React7__default.createElement(IconButton,{onClick:event=>toggleOpen(event,type,item),"aria-label":`${selection?"Collapse":"Expand"} details for ${title}`,"aria-expanded":!!selection,"aria-controls":detailsId},React7__default.createElement(Icon,{style:{transform:`rotate(${selection?-180:0}deg)`}}))),selection?React7__default.createElement(Details,{id:detailsId,item,type,selection,handleSelectionChange}):React7__default.createElement("div",{id:detailsId}))}):React7__default.createElement(EmptyTabContent,{title:empty}));var extendStatics=function(d,b){return extendStatics=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(d2,b2){d2.__proto__=b2;}||function(d2,b2){for(var p in b2)Object.prototype.hasOwnProperty.call(b2,p)&&(d2[p]=b2[p]);},extendStatics(d,b)};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;}d.prototype=b===null?Object.create(b):(__.prototype=b.prototype,new __);}var __assign=function(){return __assign=Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++){s=arguments[i];for(var p in s)Object.prototype.hasOwnProperty.call(s,p)&&(t[p]=s[p]);}return t},__assign.apply(this,arguments)};function __rest(s,e){var t={};for(var p in s)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++)e.indexOf(p[i])<0&&Object.prototype.propertyIsEnumerable.call(s,p[i])&&(t[p[i]]=s[p[i]]);return t}var commonjsGlobal=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{};function isObject$3(value){var type=typeof value;return value!=null&&(type=="object"||type=="function")}var isObject_1=isObject$3,freeGlobal$1=typeof commonjsGlobal=="object"&&commonjsGlobal&&commonjsGlobal.Object===Object&&commonjsGlobal,_freeGlobal=freeGlobal$1,freeGlobal=_freeGlobal,freeSelf=typeof self=="object"&&self&&self.Object===Object&&self,root$2=freeGlobal||freeSelf||Function("return this")(),_root=root$2,root$1=_root,now$1=function(){return root$1.Date.now()},now_1=now$1,reWhitespace=/\s/;function trimmedEndIndex$1(string){for(var index=string.length;index--&&reWhitespace.test(string.charAt(index)););return index}var _trimmedEndIndex=trimmedEndIndex$1,trimmedEndIndex=_trimmedEndIndex,reTrimStart=/^\s+/;function baseTrim$1(string){return string&&string.slice(0,trimmedEndIndex(string)+1).replace(reTrimStart,"")}var _baseTrim=baseTrim$1,root=_root,Symbol$2=root.Symbol,_Symbol=Symbol$2,Symbol$1=_Symbol,objectProto$1=Object.prototype,hasOwnProperty=objectProto$1.hasOwnProperty,nativeObjectToString$1=objectProto$1.toString,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=!0;}catch{}var result=nativeObjectToString$1.call(value);return unmasked&&(isOwn?value[symToStringTag$1]=tag:delete value[symToStringTag$1]),result}var _getRawTag=getRawTag$1,objectProto=Object.prototype,nativeObjectToString=objectProto.toString;function objectToString$1(value){return nativeObjectToString.call(value)}var _objectToString=objectToString$1,Symbol2=_Symbol,getRawTag=_getRawTag,objectToString=_objectToString,nullTag="[object Null]",undefinedTag="[object Undefined]",symToStringTag=Symbol2?Symbol2.toStringTag:void 0;function baseGetTag$1(value){return value==null?value===void 0?undefinedTag:nullTag:symToStringTag&&symToStringTag in Object(value)?getRawTag(value):objectToString(value)}var _baseGetTag=baseGetTag$1;function isObjectLike$1(value){return value!=null&&typeof value=="object"}var isObjectLike_1=isObjectLike$1,baseGetTag=_baseGetTag,isObjectLike=isObjectLike_1,symbolTag="[object Symbol]";function isSymbol$1(value){return typeof value=="symbol"||isObjectLike(value)&&baseGetTag(value)==symbolTag}var isSymbol_1=isSymbol$1,baseTrim=_baseTrim,isObject$2=isObject_1,isSymbol=isSymbol_1,NAN=NaN,reIsBadHex=/^[-+]0x[0-9a-f]+$/i,reIsBinary=/^0b[01]+$/i,reIsOctal=/^0o[0-7]+$/i,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}var toNumber_1=toNumber$1,isObject$1=isObject_1,now=now_1,toNumber=toNumber_1,FUNC_ERROR_TEXT$1="Expected a function",nativeMax=Math.max,nativeMin=Math.min;function debounce$1(func,wait,options){var lastArgs,lastThis,maxWait,result,timerId,lastCallTime,lastInvokeTime=0,leading=!1,maxing=!1,trailing=!0;if(typeof func!="function")throw new TypeError(FUNC_ERROR_TEXT$1);wait=toNumber(wait)||0,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;return lastArgs=lastThis=void 0,lastInvokeTime=time,result=func.apply(thisArg,args),result}function leadingEdge(time){return lastInvokeTime=time,timerId=setTimeout(timerExpired,wait),leading?invokeFunc(time):result}function remainingWait(time){var timeSinceLastCall=time-lastCallTime,timeSinceLastInvoke=time-lastInvokeTime,timeWaiting=wait-timeSinceLastCall;return maxing?nativeMin(timeWaiting,maxWait-timeSinceLastInvoke):timeWaiting}function shouldInvoke(time){var timeSinceLastCall=time-lastCallTime,timeSinceLastInvoke=time-lastInvokeTime;return lastCallTime===void 0||timeSinceLastCall>=wait||timeSinceLastCall<0||maxing&&timeSinceLastInvoke>=maxWait}function timerExpired(){var time=now();if(shouldInvoke(time))return trailingEdge(time);timerId=setTimeout(timerExpired,remainingWait(time));}function trailingEdge(time){return timerId=void 0,trailing&&lastArgs?invokeFunc(time):(lastArgs=lastThis=void 0,result)}function cancel(){timerId!==void 0&&clearTimeout(timerId),lastInvokeTime=0,lastArgs=lastCallTime=lastThis=timerId=void 0;}function flush(){return timerId===void 0?result:trailingEdge(now())}function debounced(){var time=now(),isInvoking=shouldInvoke(time);if(lastArgs=arguments,lastThis=this,lastCallTime=time,isInvoking){if(timerId===void 0)return leadingEdge(lastCallTime);if(maxing)return clearTimeout(timerId),timerId=setTimeout(timerExpired,wait),invokeFunc(lastCallTime)}return timerId===void 0&&(timerId=setTimeout(timerExpired,wait)),result}return debounced.cancel=cancel,debounced.flush=flush,debounced}var debounce_1=debounce$1,debounce=debounce_1,isObject=isObject_1,FUNC_ERROR_TEXT="Expected a function";function throttle(func,wait,options){var leading=!0,trailing=!0;if(typeof func!="function")throw new TypeError(FUNC_ERROR_TEXT);return isObject(options)&&(leading="leading"in options?!!options.leading:leading,trailing="trailing"in options?!!options.trailing:trailing),debounce(func,wait,{leading,maxWait:wait,trailing})}var throttle_1=throttle,patchResizeHandler=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}},isFunction=function(fn){return typeof fn=="function"},isSSR=function(){return typeof window>"u"},isDOMElement=function(element){return element instanceof Element||element instanceof HTMLDocument},createNotifier=function(onResize,setSize,handleWidth,handleHeight){return function(_a){var width=_a.width,height=_a.height;setSize(function(prev){return prev.width===width&&prev.height===height||prev.width===width&&!handleHeight||prev.height===height&&!handleWidth?prev:(onResize&&isFunction(onResize)&&onResize(width,height),{width,height})});}};(function(_super){__extends(ResizeDetector2,_super);function ResizeDetector2(props){var _this=_super.call(this,props)||this;_this.cancelHandler=function(){_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()){targetRef&&targetRef.current&&(_this.targetRef.current=targetRef.current);var element=_this.getElement();element&&(_this.observableElement&&_this.observableElement===element||(_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?!0:_b,_c=_a2.handleHeight,handleHeight=_c===void 0?!0:_c,onResize=_a2.onResize;if(!(!handleWidth&&!handleHeight)){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,shouldSetSize=!_this.skipOnMount&&!isSSR();shouldSetSize&&notifyResize({width,height}),_this.skipOnMount=!1;});}},_this.getRenderType=function(){var _a2=_this.props,render=_a2.render,children=_a2.children;return isFunction(render)?"renderProp":isFunction(children)?"childFunction":isValidElement(children)?"child":Array.isArray(children)?"childArray":"parent"};var skipOnMount=props.skipOnMount,refreshMode=props.refreshMode,_a=props.refreshRate,refreshRate=_a===void 0?1e3:_a,refreshOptions=props.refreshOptions;return _this.state={width:void 0,height:void 0},_this.skipOnMount=skipOnMount,_this.targetRef=createRef(),_this.observableElement=null,isSSR()||(_this.resizeHandler=patchResizeHandler(_this.createResizeHandler,refreshMode,refreshRate,refreshOptions),_this.resizeObserver=new window.ResizeObserver(_this.resizeHandler)),_this}return ResizeDetector2.prototype.componentDidMount=function(){this.attachObserver();},ResizeDetector2.prototype.componentDidUpdate=function(){this.attachObserver();},ResizeDetector2.prototype.componentWillUnmount=function(){isSSR()||(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,_c=this.state,width=_c.width,height=_c.height,childProps={width,height,targetRef:this.targetRef},renderType=this.getRenderType(),typedChildren;switch(renderType){case"renderProp":return render&&render(childProps);case"childFunction":return typedChildren=children,typedChildren(childProps);case"child":if(typedChildren=children,typedChildren.type&&typeof typedChildren.type=="string"){childProps.targetRef;var nativeProps=__rest(childProps,["targetRef"]);return cloneElement(typedChildren,nativeProps)}return cloneElement(typedChildren,childProps);case"childArray":return typedChildren=children,typedChildren.map(function(el){return !!el&&cloneElement(el,childProps)});default:return React7.createElement(WrapperTag,null)}},ResizeDetector2})(PureComponent);var useEnhancedEffect=isSSR()?useEffect:useLayoutEffect;function useResizeDetector(props){props===void 0&&(props={});var _a=props.skipOnMount,skipOnMount=_a===void 0?!1:_a,refreshMode=props.refreshMode,_b=props.refreshRate,refreshRate=_b===void 0?1e3:_b,refreshOptions=props.refreshOptions,_c=props.handleWidth,handleWidth=_c===void 0?!0:_c,_d=props.handleHeight,handleHeight=_d===void 0?!0:_d,targetRef=props.targetRef,observerOptions=props.observerOptions,onResize=props.onResize,skipResize=useRef(skipOnMount),localRef=useRef(null),ref=targetRef??localRef,resizeHandler=useRef(),_e=useState({width:void 0,height:void 0}),size=_e[0],setSize=_e[1];return useEnhancedEffect(function(){if(!isSSR()){var notifyResize=createNotifier(onResize,setSize,handleWidth,handleHeight),resizeCallback=function(entries){!handleWidth&&!handleHeight||entries.forEach(function(entry){var _a2=entry&&entry.contentRect||{},width=_a2.width,height=_a2.height,shouldSetSize=!skipResize.current&&!isSSR();shouldSetSize&&notifyResize({width,height}),skipResize.current=!1;});};resizeHandler.current=patchResizeHandler(resizeCallback,refreshMode,refreshRate,refreshOptions);var resizeObserver=new window.ResizeObserver(resizeHandler.current);return ref.current&&resizeObserver.observe(ref.current,observerOptions),function(){resizeObserver.disconnect();var patchedResizeHandler=resizeHandler.current;patchedResizeHandler&&patchedResizeHandler.cancel&&patchedResizeHandler.cancel();}}},[refreshMode,refreshRate,refreshOptions,handleWidth,handleHeight,onResize,observerOptions,ref.current]),__assign({ref},size)}var Container=styled.div({width:"100%",position:"relative",minHeight:"100%"}),Item2=styled.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}:{}),Subnav=styled.div(({theme:theme2})=>({boxShadow:`${theme2.appBorderColor} 0 -1px 0 0 inset`,background:theme2.background.app,position:"sticky",top:0,zIndex:1,display:"flex",alignItems:"center",whiteSpace:"nowrap",overflow:"auto",paddingRight:10,gap:6,scrollbarColor:`${theme2.barTextColor} ${theme2.background.app}`,scrollbarWidth:"thin"})),TabsWrapper=styled.div({}),ActionsWrapper=styled.div({display:"flex",flexBasis:"100%",justifyContent:"flex-end",containerType:"inline-size",minWidth:96,gap:6}),ToggleButton=styled(IconButton)({"@container (max-width: 193px)":{span:{display:"none"}}}),Tabs=({tabs})=>{let{ref}=useResizeDetector({refreshMode:"debounce",handleHeight:!1,handleWidth:!0}),{tab:activeTab,setTab,toggleHighlight,highlighted,handleManual,allExpanded,handleCollapseAll,handleExpandAll}=useA11yContext(),handleToggle=React7.useCallback(event=>{setTab(event.currentTarget.getAttribute("data-type"));},[setTab]);return React7.createElement(Container,{ref},React7.createElement(Subnav,null,React7.createElement(TabsWrapper,{role:"tablist"},tabs.map((tab,index)=>React7.createElement(Item2,{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))),React7.createElement(ActionsWrapper,null,React7.createElement(WithTooltip,{as:"div",hasChrome:!1,placement:"top",tooltip:React7.createElement(TooltipNote,{note:"Highlight elements with accessibility violations"}),trigger:"hover"},React7.createElement(ToggleButton,{onClick:toggleHighlight,active:highlighted},highlighted?React7.createElement(EyeCloseIcon,null):React7.createElement(EyeIcon,null),React7.createElement("span",null,highlighted?"Hide highlights":"Show highlights"))),React7.createElement(WithTooltip,{as:"div",hasChrome:!1,placement:"top",tooltip:React7.createElement(TooltipNote,{note:allExpanded?"Collapse all":"Expand all"}),trigger:"hover"},React7.createElement(IconButton,{onClick:allExpanded?handleCollapseAll:handleExpandAll,"aria-label":allExpanded?"Collapse all":"Expand all"},allExpanded?React7.createElement(CollapseIcon,null):React7.createElement(ExpandAltIcon,null))),React7.createElement(WithTooltip,{as:"div",hasChrome:!1,placement:"top",tooltip:React7.createElement(TooltipNote,{note:"Rerun the accessibility scan"}),trigger:"hover"},React7.createElement(IconButton,{onClick:handleManual,"aria-label":"Rerun accessibility scan"},React7.createElement(SyncIcon,null))))),React7.createElement(ScrollArea,{vertical:!0,horizontal:!0},tabs.find(t=>t.type===activeTab)?.panel))};var Wrapper3=styled.div(({theme:{color,typography,background}})=>({textAlign:"start",padding:"11px 15px",fontSize:`${typography.size.s2}px`,fontWeight:typography.weight.regular,lineHeight:"1rem",background:background.app,borderBottom:`1px solid ${color.border}`,color:color.defaultText,backgroundClip:"padding-box",position:"relative",code:{fontSize:`${typography.size.s1-1}px`,color:"inherit",margin:"0 0.2em",padding:"0 0.2em",background:"rgba(255, 255, 255, 0.8)",borderRadius:"2px",boxShadow:"0 0 0 1px rgba(0, 0, 0, 0.1)"}})),TestDiscrepancyMessage=({discrepancy})=>{let docsUrl=useStorybookApi().getDocsUrl({subpath:DOCUMENTATION_DISCREPANCY_LINK,versioned:!0,renderer:!0}),message=useMemo(()=>{switch(discrepancy){case"browserPassedCliFailed":return "Accessibility checks passed in this browser but failed in the CLI.";case"cliPassedBrowserFailed":return "Accessibility checks passed in the CLI but failed in this browser.";case"cliFailedButModeManual":return "Accessibility checks failed in the CLI. Run the tests manually to see the results.";default:return null}},[discrepancy]);return message?React7__default.createElement(Wrapper3,null,message," ",React7__default.createElement(Link,{href:docsUrl,target:"_blank",withArrow:!0},"Learn what could cause this")):null};var RotatingIcon=styled(SyncIcon)(({theme:theme2})=>({animation:`${theme2.animation.rotate360} 1s linear infinite;`,margin:4})),Tab=styled.div({display:"flex",alignItems:"center",gap:6}),Centered=styled.span(({theme:theme2})=>({display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",fontSize:theme2.typography.size.s2,height:"100%",gap:24,div:{display:"flex",flexDirection:"column",alignItems:"center",gap:8},p:{margin:0,color:theme2.textMutedColor},code:{display:"inline-block",fontSize:theme2.typography.size.s2-1,backgroundColor:theme2.background.app,border:`1px solid ${theme2.color.border}`,borderRadius:4,padding:"2px 3px"}})),A11YPanel=()=>{let{parameters,tab,results,status,handleManual,error,discrepancy,handleSelectionChange,selectedItems,toggleOpen}=useA11yContext(),tabs=useMemo(()=>{let{passes,incomplete,violations}=results??{passes:[],incomplete:[],violations:[]};return [{label:React7__default.createElement(Tab,null,"Violations",React7__default.createElement(Badge,{compact:!0,status:tab==="violations"?"active":"neutral"},violations.length)),panel:React7__default.createElement(Report,{items:violations,type:RuleType.VIOLATION,empty:"No accessibility violations found.",handleSelectionChange,selectedItems,toggleOpen}),items:violations,type:RuleType.VIOLATION},{label:React7__default.createElement(Tab,null,"Passes",React7__default.createElement(Badge,{compact:!0,status:tab==="passes"?"active":"neutral"},passes.length)),panel:React7__default.createElement(Report,{items:passes,type:RuleType.PASS,empty:"No passing accessibility checks found.",handleSelectionChange,selectedItems,toggleOpen}),items:passes,type:RuleType.PASS},{label:React7__default.createElement(Tab,null,"Inconclusive",React7__default.createElement(Badge,{compact:!0,status:tab==="incomplete"?"active":"neutral"},incomplete.length)),panel:React7__default.createElement(Report,{items:incomplete,type:RuleType.INCOMPLETION,empty:"No inconclusive accessibility checks found.",handleSelectionChange,selectedItems,toggleOpen}),items:incomplete,type:RuleType.INCOMPLETION}]},[tab,results,handleSelectionChange,selectedItems,toggleOpen]);return parameters.disable||parameters.test==="off"?React7__default.createElement(Centered,null,React7__default.createElement("div",null,React7__default.createElement("strong",null,"Accessibility tests are disabled for this story"),React7__default.createElement("p",null,"Update"," ",React7__default.createElement("code",null,parameters.disable?"parameters.a11y.disable":"parameters.a11y.test")," ","to enable accessibility tests."))):React7__default.createElement(React7__default.Fragment,null,discrepancy&&React7__default.createElement(TestDiscrepancyMessage,{discrepancy}),status==="ready"||status==="ran"?React7__default.createElement(Tabs,{key:"tabs",tabs}):React7__default.createElement(Centered,{style:{marginTop:discrepancy?"1em":0}},status==="initial"&&React7__default.createElement("div",null,React7__default.createElement(RotatingIcon,{size:12}),React7__default.createElement("strong",null,"Preparing accessibility scan"),React7__default.createElement("p",null,"Please wait while the addon is initializing...")),status==="manual"&&React7__default.createElement(React7__default.Fragment,null,React7__default.createElement("div",null,React7__default.createElement("strong",null,"Accessibility tests run manually for this story"),React7__default.createElement("p",null,"Results will not show when using the testing module. You can still run accessibility tests manually.")),React7__default.createElement(Button,{size:"medium",onClick:handleManual},"Run accessibility scan"),React7__default.createElement("p",null,"Update ",React7__default.createElement("code",null,"globals.a11y.manual")," to disable manual mode.")),status==="running"&&React7__default.createElement("div",null,React7__default.createElement(RotatingIcon,{size:12}),React7__default.createElement("strong",null,"Accessibility scan in progress"),React7__default.createElement("p",null,"Please wait while the accessibility scan is running...")),status==="error"&&React7__default.createElement(React7__default.Fragment,null,React7__default.createElement("div",null,React7__default.createElement("strong",null,"The accessibility scan encountered an error"),React7__default.createElement("p",null,typeof error=="string"?error:error instanceof Error?error.toString():JSON.stringify(error,null,2))),React7__default.createElement(Button,{size:"medium",onClick:handleManual},"Rerun accessibility scan")),status==="component-test-error"&&React7__default.createElement(React7__default.Fragment,null,React7__default.createElement("div",null,React7__default.createElement("strong",null,"This story's component tests failed"),React7__default.createElement("p",null,"Automated accessibility tests will not run until this is resolved. You can still test manually.")),React7__default.createElement(Button,{size:"medium",onClick:handleManual},"Run accessibility scan"))))};var Filters=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"})),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"})),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"})),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"})),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"})),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"})),React7.createElement("filter",{id:"achromatopsia"},React7.createElement("feColorMatrix",{in:"SourceGraphic",type:"matrix",values:"0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0"}))));var iframeId="storybook-preview-iframe",baseList=[{name:"blurred vision",percentage:22.9},{name:"deuteranomaly",percentage:2.7},{name:"deuteranopia",percentage:.56},{name:"protanomaly",percentage:.66},{name:"protanopia",percentage:.59},{name:"tritanomaly",percentage:.01},{name:"tritanopia",percentage:.016},{name:"achromatopsia",percentage:1e-4},{name:"grayscale"}],getFilter=filterName=>filterName?filterName==="blurred vision"?"blur(2px)":filterName==="grayscale"?"grayscale(100%)":`url('#${filterName}')`:"none",Hidden=styled.div({"&, & svg":{position:"absolute",width:0,height:0}}),ColorIcon=styled.span({background:"linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)",borderRadius:"1rem",display:"block",height:"1rem",width:"1rem"},({filter})=>({filter:getFilter(filter)}),({theme:theme2})=>({boxShadow:`${theme2.appBorderColor} 0 0 0 1px inset`})),Column=styled.span({display:"flex",flexDirection:"column"}),Title2=styled.span({textTransform:"capitalize"}),Description2=styled.span(({theme:theme2})=>({fontSize:11,color:theme2.textMutedColor})),getColorList=(active,set)=>[...active!==null?[{id:"reset",title:"Reset color filter",onClick:()=>{set(null);},right:void 0,active:!1}]:[],...baseList.map(i=>{let description=i.percentage!==void 0?`${i.percentage}% of users`:void 0;return {id:i.name,title:React7__default.createElement(Column,null,React7__default.createElement(Title2,null,i.name),description&&React7__default.createElement(Description2,null,description)),onClick:()=>{set(i);},right:React7__default.createElement(ColorIcon,{filter:i.name}),active:active===i}})],VisionSimulator=()=>{let[filter,setFilter]=useState(null);return React7__default.createElement(React7__default.Fragment,null,filter&&React7__default.createElement(Global,{styles:{[`#${iframeId}`]:{filter:getFilter(filter.name)}}}),React7__default.createElement(WithTooltip,{placement:"top",tooltip:({onHide})=>{let colorList=getColorList(filter,i=>{setFilter(i),onHide();});return React7__default.createElement(TooltipLinkList,{links:colorList})},closeOnOutsideClick:!0,onDoubleClick:()=>setFilter(null)},React7__default.createElement(IconButton,{key:"filter",active:!!filter,title:"Vision simulator"},React7__default.createElement(AccessibilityIcon,null))),React7__default.createElement(Hidden,null,React7__default.createElement(Filters,null)))};var Title3=()=>{let selectedPanel=useStorybookApi().getSelectedPanel(),[addonState]=useAddonState(ADDON_ID),violationsNb=addonState?.violations?.length||0,incompleteNb=addonState?.incomplete?.length||0,count=violationsNb+incompleteNb;return React7__default.createElement("div",{style:{display:"flex",alignItems:"center",gap:6}},React7__default.createElement("span",null,"Accessibility"),count===0?null:React7__default.createElement(Badge,{compact:!0,status:selectedPanel===PANEL_ID?"active":"neutral"},count))};addons.register(ADDON_ID,api=>{addons.add(PANEL_ID,{title:"",type:types.TOOL,match:({viewMode,tabId})=>viewMode==="story"&&!tabId,render:()=>React7__default.createElement(VisionSimulator,null)}),addons.add(PANEL_ID,{title:Title3,type:types.PANEL,render:({active=!0})=>React7__default.createElement(A11yContextProvider,null,active?React7__default.createElement(A11YPanel,null):null),paramKey:PARAM_KEY});});
1
+ import {
2
+ ADDON_ID,
3
+ DOCUMENTATION_DISCREPANCY_LINK,
4
+ EVENTS,
5
+ PANEL_ID,
6
+ PARAM_KEY,
7
+ STATUS_TYPE_ID_A11Y,
8
+ STATUS_TYPE_ID_COMPONENT_TEST
9
+ } from "./_browser-chunks/chunk-ULDMWS76.js";
10
+ import {
11
+ __name
12
+ } from "./_browser-chunks/chunk-JFJ5UJ7Q.js";
13
+
14
+ // src/manager.tsx
15
+ import React10 from "react";
16
+ import { Badge as Badge3 } from "storybook/internal/components";
17
+ import { addons, types, useAddonState as useAddonState2, useStorybookApi as useStorybookApi3 } from "storybook/manager-api";
18
+
19
+ // src/components/A11YPanel.tsx
20
+ import React7, { useMemo as useMemo3 } from "react";
21
+ import { Badge as Badge2, Button as Button2 } from "storybook/internal/components";
22
+ import { SyncIcon as SyncIcon2 } from "@storybook/icons";
23
+ import { styled as styled5 } from "storybook/theming";
24
+
25
+ // src/types.ts
26
+ var RuleType = {
27
+ VIOLATION: "violations",
28
+ PASS: "passes",
29
+ INCOMPLETION: "incomplete"
30
+ };
31
+
32
+ // src/components/A11yContext.tsx
33
+ import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
34
+ import {
35
+ STORY_CHANGED,
36
+ STORY_FINISHED,
37
+ STORY_HOT_UPDATED,
38
+ STORY_RENDER_PHASE_CHANGED
39
+ } from "storybook/internal/core-events";
40
+ import { HIGHLIGHT, REMOVE_HIGHLIGHT, SCROLL_INTO_VIEW } from "storybook/highlight";
41
+ import {
42
+ experimental_getStatusStore,
43
+ experimental_useStatusStore,
44
+ useAddonState,
45
+ useChannel,
46
+ useGlobals,
47
+ useParameter,
48
+ useStorybookApi,
49
+ useStorybookState
50
+ } from "storybook/manager-api";
51
+ import { convert, themes } from "storybook/theming";
52
+
53
+ // src/AccessibilityRuleMaps.ts
54
+ var axeRuleMapping_wcag_2_0_a_aa = {
55
+ "area-alt": {
56
+ title: "<area> alt text",
57
+ axeSummary: "Ensure <area> elements of image maps have alternative text",
58
+ friendlySummary: "Add alt text to all <area> elements of image maps."
59
+ },
60
+ "aria-allowed-attr": {
61
+ title: "Supported ARIA attributes",
62
+ axeSummary: "Ensure an element's role supports its ARIA attributes",
63
+ friendlySummary: "Only use ARIA attributes that are permitted for the element's role."
64
+ },
65
+ "aria-braille-equivalent": {
66
+ title: "Braille equivalent",
67
+ axeSummary: "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
68
+ friendlySummary: "If you use braille ARIA labels, also provide a matching non-braille label."
69
+ },
70
+ "aria-command-name": {
71
+ title: "ARIA command name",
72
+ axeSummary: "Ensure every ARIA button, link and menuitem has an accessible name",
73
+ friendlySummary: "Every ARIA button, link, or menuitem needs a label or accessible name."
74
+ },
75
+ "aria-conditional-attr": {
76
+ title: "ARIA attribute valid for role",
77
+ axeSummary: "Ensure ARIA attributes are used as described in the specification of the element's role",
78
+ friendlySummary: "Follow the element role's specification when using ARIA attributes."
79
+ },
80
+ "aria-deprecated-role": {
81
+ title: "Deprecated ARIA role",
82
+ axeSummary: "Ensure elements do not use deprecated roles",
83
+ friendlySummary: "Don't use deprecated ARIA roles on elements."
84
+ },
85
+ "aria-hidden-body": {
86
+ title: "Hidden body",
87
+ axeSummary: 'Ensure aria-hidden="true" is not present on the document <body>',
88
+ friendlySummary: 'Never set aria-hidden="true" on the <body> element.'
89
+ },
90
+ "aria-hidden-focus": {
91
+ title: "Hidden element focus",
92
+ axeSummary: "Ensure aria-hidden elements are not focusable nor contain focusable elements",
93
+ friendlySummary: "Elements marked hidden (aria-hidden) should not be focusable or contain focusable items."
94
+ },
95
+ "aria-input-field-name": {
96
+ title: "ARIA input field name",
97
+ axeSummary: "Ensure every ARIA input field has an accessible name",
98
+ friendlySummary: "Give each ARIA text input or field a label or accessible name."
99
+ },
100
+ "aria-meter-name": {
101
+ title: "ARIA meter name",
102
+ axeSummary: "Ensure every ARIA meter node has an accessible name",
103
+ friendlySummary: 'Give each element with role="meter" a label or accessible name.'
104
+ },
105
+ "aria-progressbar-name": {
106
+ title: "ARIA progressbar name",
107
+ axeSummary: "Ensure every ARIA progressbar node has an accessible name",
108
+ friendlySummary: 'Give each element with role="progressbar" a label or accessible name.'
109
+ },
110
+ "aria-prohibited-attr": {
111
+ title: "ARIA prohibited attributes",
112
+ axeSummary: "Ensure ARIA attributes are not prohibited for an element's role",
113
+ friendlySummary: "Don't use ARIA attributes that are forbidden for that element's role."
114
+ },
115
+ "aria-required-attr": {
116
+ title: "ARIA required attributes",
117
+ axeSummary: "Ensure elements with ARIA roles have all required ARIA attributes",
118
+ friendlySummary: "Include all required ARIA attributes for elements with that ARIA role."
119
+ },
120
+ "aria-required-children": {
121
+ title: "ARIA required children",
122
+ axeSummary: "Ensure elements with an ARIA role that require child roles contain them",
123
+ friendlySummary: "If an ARIA role requires specific child roles, include those child elements."
124
+ },
125
+ "aria-required-parent": {
126
+ title: "ARIA required parent",
127
+ axeSummary: "Ensure elements with an ARIA role that require parent roles are contained by them",
128
+ friendlySummary: "Place elements with certain ARIA roles inside the required parent role element."
129
+ },
130
+ "aria-roles": {
131
+ title: "ARIA role value",
132
+ axeSummary: "Ensure all elements with a role attribute use a valid value",
133
+ friendlySummary: "Use only valid values in the role attribute (no typos or invalid roles)."
134
+ },
135
+ "aria-toggle-field-name": {
136
+ title: "ARIA toggle field name",
137
+ axeSummary: "Ensure every ARIA toggle field has an accessible name",
138
+ friendlySummary: "Every ARIA toggle field (elements with the checkbox, radio, or switch roles) needs an accessible name."
139
+ },
140
+ "aria-tooltip-name": {
141
+ title: "ARIA tooltip name",
142
+ axeSummary: "Ensure every ARIA tooltip node has an accessible name",
143
+ friendlySummary: 'Give each element with role="tooltip" a descriptive accessible name.'
144
+ },
145
+ "aria-valid-attr-value": {
146
+ title: "ARIA attribute values valid",
147
+ axeSummary: "Ensure all ARIA attributes have valid values",
148
+ friendlySummary: "Use only valid values for ARIA attributes (no typos or invalid values)."
149
+ },
150
+ "aria-valid-attr": {
151
+ title: "ARIA attribute valid",
152
+ axeSummary: "Ensure attributes that begin with aria- are valid ARIA attributes",
153
+ friendlySummary: "Use only valid aria-* attributes (make sure the attribute name is correct)."
154
+ },
155
+ blink: {
156
+ title: "<blink> element",
157
+ axeSummary: "Ensure <blink> elements are not used",
158
+ friendlySummary: "Don't use the deprecated <blink> element."
159
+ },
160
+ "button-name": {
161
+ title: "Button name",
162
+ axeSummary: "Ensure buttons have discernible text",
163
+ friendlySummary: "Every <button> needs a visible label or accessible name."
164
+ },
165
+ bypass: {
166
+ title: "Navigation bypass",
167
+ axeSummary: "Ensure each page has at least one mechanism to bypass navigation and jump to content",
168
+ friendlySummary: 'Provide a way to skip repetitive navigation (e.g. a "Skip to content" link).'
169
+ },
170
+ "color-contrast": {
171
+ title: "Color contrast",
172
+ axeSummary: "Ensure the contrast between foreground and background text meets WCAG 2 AA minimum thresholds",
173
+ friendlySummary: "The color contrast between text and its background meets WCAG AA contrast ratio."
174
+ },
175
+ "definition-list": {
176
+ title: "Definition list structure",
177
+ axeSummary: "Ensure <dl> elements are structured correctly",
178
+ friendlySummary: "Definition lists (<dl>) should directly contain <dt> and <dd> elements in order."
179
+ },
180
+ dlitem: {
181
+ title: "Definition list items",
182
+ axeSummary: "Ensure <dt> and <dd> elements are contained by a <dl>",
183
+ friendlySummary: "Ensure <dt> and <dd> elements are contained by a <dl>"
184
+ },
185
+ "document-title": {
186
+ title: "Document title",
187
+ axeSummary: "Ensure each HTML document contains a non-empty <title> element",
188
+ friendlySummary: "Include a non-empty <title> element for every page."
189
+ },
190
+ "duplicate-id-aria": {
191
+ title: "Unique id",
192
+ axeSummary: "Ensure every id attribute value used in ARIA and in labels is unique",
193
+ friendlySummary: "Every id used for ARIA or form labels should be unique on the page."
194
+ },
195
+ "form-field-multiple-labels": {
196
+ title: "Multiple form field labels",
197
+ axeSummary: "Ensure a form field does not have multiple <label> elements",
198
+ friendlySummary: "Don't give a single form field more than one <label>."
199
+ },
200
+ "frame-focusable-content": {
201
+ title: "Focusable frames",
202
+ axeSummary: 'Ensure <frame> and <iframe> with focusable content do not have tabindex="-1"',
203
+ friendlySummary: `Don't set tabindex="-1" on a <frame> or <iframe> that contains focusable elements.`
204
+ },
205
+ "frame-title-unique": {
206
+ title: "Unique frame title",
207
+ axeSummary: "Ensure <iframe> and <frame> elements contain a unique title attribute",
208
+ friendlySummary: "Use a unique title attribute for each <frame> or <iframe> on the page."
209
+ },
210
+ "frame-title": {
211
+ title: "Frame title",
212
+ axeSummary: "Ensure <iframe> and <frame> elements have an accessible name",
213
+ friendlySummary: "Every <frame> and <iframe> needs a title or accessible name."
214
+ },
215
+ "html-has-lang": {
216
+ title: "<html> has lang",
217
+ axeSummary: "Ensure every HTML document has a lang attribute",
218
+ friendlySummary: "Add a lang attribute to the <html> element."
219
+ },
220
+ "html-lang-valid": {
221
+ title: "<html> lang valid",
222
+ axeSummary: "Ensure the <html lang> attribute has a valid value",
223
+ friendlySummary: "Use a valid language code in the <html lang> attribute."
224
+ },
225
+ "html-xml-lang-mismatch": {
226
+ title: "HTML and XML lang mismatch",
227
+ axeSummary: "Ensure that HTML elements with both lang and xml:lang agree on the page's language",
228
+ friendlySummary: "If using both lang and xml:lang on <html>, make sure they are the same language."
229
+ },
230
+ "image-alt": {
231
+ title: "Image alt text",
232
+ axeSummary: "Ensure <img> elements have alternative text or a role of none/presentation",
233
+ friendlySummary: 'Give every image alt text or mark it as decorative with alt="".'
234
+ },
235
+ "input-button-name": {
236
+ title: "Input button name",
237
+ axeSummary: "Ensure input buttons have discernible text",
238
+ friendlySummary: 'Give each <input type="button"> or similar a clear label (text or aria-label).'
239
+ },
240
+ "input-image-alt": {
241
+ title: "Input image alt",
242
+ axeSummary: 'Ensure <input type="image"> elements have alternative text',
243
+ friendlySummary: '<input type="image"> must have alt text describing its image.'
244
+ },
245
+ label: {
246
+ title: "Form label",
247
+ axeSummary: "Ensure every form element has a label",
248
+ friendlySummary: "Every form field needs an associated label."
249
+ },
250
+ "link-in-text-block": {
251
+ title: "Identifiable links",
252
+ axeSummary: "Ensure links are distinguishable from surrounding text without relying on color",
253
+ friendlySummary: "Make sure links are obviously identifiable without relying only on color."
254
+ },
255
+ "link-name": {
256
+ title: "Link name",
257
+ axeSummary: "Ensure links have discernible text",
258
+ friendlySummary: "Give each link meaningful text or an aria-label so its purpose is clear."
259
+ },
260
+ list: {
261
+ title: "List structure",
262
+ axeSummary: "Ensure that lists are structured correctly",
263
+ friendlySummary: "Use proper list structure. Only use <li> inside <ul> or <ol>."
264
+ },
265
+ listitem: {
266
+ title: "List item",
267
+ axeSummary: "Ensure <li> elements are used semantically",
268
+ friendlySummary: "Only use <li> tags inside <ul> or <ol> lists."
269
+ },
270
+ marquee: {
271
+ title: "<marquee> element",
272
+ axeSummary: "Ensure <marquee> elements are not used",
273
+ friendlySummary: "Don't use the deprecated <marquee> element."
274
+ },
275
+ "meta-refresh": {
276
+ title: "<meta> refresh",
277
+ axeSummary: 'Ensure <meta http-equiv="refresh"> is not used for delayed refresh',
278
+ friendlySummary: 'Avoid auto-refreshing or redirecting pages using <meta http-equiv="refresh">.'
279
+ },
280
+ "meta-viewport": {
281
+ title: "<meta> viewport scaling",
282
+ axeSummary: 'Ensure <meta name="viewport"> does not disable text scaling and zooming',
283
+ friendlySummary: `Don't disable user zooming in <meta name="viewport"> to allow scaling.`
284
+ },
285
+ "nested-interactive": {
286
+ title: "Nested interactive controls",
287
+ axeSummary: "Ensure interactive controls are not nested (nesting causes screen reader/focus issues)",
288
+ friendlySummary: "Do not nest interactive elements; it can confuse screen readers and keyboard focus."
289
+ },
290
+ "no-autoplay-audio": {
291
+ title: "Autoplaying video",
292
+ axeSummary: "Ensure <video> or <audio> do not autoplay audio > 3 seconds without a control to stop/mute",
293
+ friendlySummary: "Don't autoplay audio for more than 3 seconds without providing a way to stop or mute it."
294
+ },
295
+ "object-alt": {
296
+ title: "<object> alt text",
297
+ axeSummary: "Ensure <object> elements have alternative text",
298
+ friendlySummary: "Provide alternative text or content for <object> elements."
299
+ },
300
+ "role-img-alt": {
301
+ title: 'role="img" alt text',
302
+ axeSummary: 'Ensure elements with role="img" have alternative text',
303
+ friendlySummary: 'Any element with role="img" needs alt text.'
304
+ },
305
+ "scrollable-region-focusable": {
306
+ title: "Scrollable element focusable",
307
+ axeSummary: "Ensure elements with scrollable content are keyboard-accessible",
308
+ friendlySummary: "If an area can scroll, ensure it can be focused and scrolled via keyboard."
309
+ },
310
+ "select-name": {
311
+ title: "<select> name",
312
+ axeSummary: "Ensure <select> elements have an accessible name",
313
+ friendlySummary: "Give each <select> field a label or other accessible name."
314
+ },
315
+ "server-side-image-map": {
316
+ title: "Server-side image map",
317
+ axeSummary: "Ensure that server-side image maps are not used",
318
+ friendlySummary: "Don't use server-side image maps."
319
+ },
320
+ "svg-img-alt": {
321
+ title: "SVG image alt text",
322
+ axeSummary: "Ensure <svg> images/graphics have accessible text",
323
+ friendlySummary: 'SVG images with role="img" or similar need a text description.'
324
+ },
325
+ "td-headers-attr": {
326
+ title: "Table headers attribute",
327
+ axeSummary: "Ensure each cell in a table using headers only refers to <th> in that table",
328
+ friendlySummary: "In tables using the headers attribute, only reference other cells in the same table."
329
+ },
330
+ "th-has-data-cells": {
331
+ title: "<th> has data cell",
332
+ axeSummary: "Ensure <th> (or header role) elements have data cells they describe",
333
+ friendlySummary: "Every table header (<th> or header role) should correspond to at least one data cell."
334
+ },
335
+ "valid-lang": {
336
+ title: "Valid lang",
337
+ axeSummary: "Ensure lang attributes have valid values",
338
+ friendlySummary: "Use valid language codes in all lang attributes."
339
+ },
340
+ "video-caption": {
341
+ title: "<video> captions",
342
+ axeSummary: "Ensure <video> elements have captions",
343
+ friendlySummary: "Provide captions for all <video> content."
344
+ }
345
+ };
346
+ var axeRuleMapping_wcag_2_1_a_aa = {
347
+ "autocomplete-valid": {
348
+ title: "autocomplete attribute valid",
349
+ axeSummary: "Ensure the autocomplete attribute is correct and suitable for the form field",
350
+ friendlySummary: "Use valid autocomplete values that match the form field's purpose."
351
+ },
352
+ "avoid-inline-spacing": {
353
+ title: "Forced inline spacing",
354
+ axeSummary: "Ensure that text spacing set via inline styles can be adjusted with custom CSS",
355
+ friendlySummary: "Don't lock in text spacing with forced (!important) inline styles\u2014allow user CSS to adjust text spacing."
356
+ }
357
+ };
358
+ var axeRuleMapping_wcag_2_2_a_aa = {
359
+ "target-size": {
360
+ title: "Touch target size",
361
+ axeSummary: "Ensure touch targets have sufficient size and space",
362
+ friendlySummary: "Make sure interactive elements are big enough and not too close together for touch."
363
+ }
364
+ };
365
+ var axeRuleMapping_best_practices = {
366
+ accesskeys: {
367
+ title: "Unique accesskey",
368
+ axeSummary: "Ensure every accesskey attribute value is unique",
369
+ friendlySummary: "Use unique values for all accesskey attributes."
370
+ },
371
+ "aria-allowed-role": {
372
+ title: "Appropriate role value",
373
+ axeSummary: "Ensure the role attribute has an appropriate value for the element",
374
+ friendlySummary: "ARIA roles should have a valid value for the element."
375
+ },
376
+ "aria-dialog-name": {
377
+ title: "ARIA dialog name",
378
+ axeSummary: "Ensure every ARIA dialog and alertdialog has an accessible name",
379
+ friendlySummary: "Give each ARIA dialog or alertdialog a title or accessible name."
380
+ },
381
+ "aria-text": {
382
+ title: 'ARIA role="text"',
383
+ axeSummary: 'Ensure role="text" is used on elements with no focusable descendants',
384
+ friendlySummary: `Only use role="text" on elements that don't contain focusable elements.`
385
+ },
386
+ "aria-treeitem-name": {
387
+ title: "ARIA treeitem name",
388
+ axeSummary: "Ensure every ARIA treeitem node has an accessible name",
389
+ friendlySummary: "Give each ARIA treeitem a label or accessible name."
390
+ },
391
+ "empty-heading": {
392
+ title: "Empty heading",
393
+ axeSummary: "Ensure headings have discernible text",
394
+ friendlySummary: "Don't leave heading elements empty or hide them."
395
+ },
396
+ "empty-table-header": {
397
+ title: "Empty table header",
398
+ axeSummary: "Ensure table headers have discernible text",
399
+ friendlySummary: "Make sure table header cells have visible text."
400
+ },
401
+ "frame-tested": {
402
+ title: "Test all frames",
403
+ axeSummary: "Ensure <iframe> and <frame> elements contain the axe-core script",
404
+ friendlySummary: "Make sure axe-core is injected into all frames or iframes so they are tested."
405
+ },
406
+ "heading-order": {
407
+ title: "Heading order",
408
+ axeSummary: "Ensure the order of headings is semantically correct (no skipping levels)",
409
+ friendlySummary: "Use proper heading order (don't skip heading levels)."
410
+ },
411
+ "image-redundant-alt": {
412
+ title: "Redundant image alt text",
413
+ axeSummary: "Ensure image alternative text is not repeated as nearby text",
414
+ friendlySummary: "Avoid repeating the same information in both an image's alt text and nearby text."
415
+ },
416
+ "label-title-only": {
417
+ title: "Visible form element label",
418
+ axeSummary: "Ensure each form element has a visible label (not only title/ARIA)",
419
+ friendlySummary: "Every form input needs a visible label (not only a title attribute or hidden text)."
420
+ },
421
+ "landmark-banner-is-top-level": {
422
+ title: "Top-level landmark banner",
423
+ axeSummary: "Ensure the banner landmark is at top level (not nested)",
424
+ friendlySummary: "Use the banner landmark (e.g. site header) only at the top level of the page, not inside another landmark."
425
+ },
426
+ "landmark-complementary-is-top-level": {
427
+ title: "Top-level <aside>",
428
+ axeSummary: "Ensure the complementary landmark (<aside>) is top level",
429
+ friendlySummary: 'The complementary landmark <aside> or role="complementary" should be a top-level region, not nested in another landmark.'
430
+ },
431
+ "landmark-contentinfo-is-top-level": {
432
+ title: "Top-level contentinfo",
433
+ axeSummary: "Ensure the contentinfo landmark (footer) is top level",
434
+ friendlySummary: "Make sure the contentinfo landmark (footer) is at the top level of the page and not contained in another landmark."
435
+ },
436
+ "landmark-main-is-top-level": {
437
+ title: "Top-level main",
438
+ axeSummary: "Ensure the main landmark is at top level",
439
+ friendlySummary: "The main landmark should be a top-level element and not nested inside another landmark."
440
+ },
441
+ "landmark-no-duplicate-banner": {
442
+ title: "Duplicate banner landmark",
443
+ axeSummary: "Ensure the document has at most one banner landmark",
444
+ friendlySummary: 'Have only one role="banner" or <header> on a page.'
445
+ },
446
+ "landmark-no-duplicate-contentinfo": {
447
+ title: "Duplicate contentinfo",
448
+ axeSummary: "Ensure the document has at most one contentinfo landmark",
449
+ friendlySummary: 'Have only one role="contentinfo" or <footer> on a page.'
450
+ },
451
+ "landmark-no-duplicate-main": {
452
+ title: "Duplicate main",
453
+ axeSummary: "Ensure the document has at most one main landmark",
454
+ friendlySummary: 'Have only one role="main" or <main> on a page.'
455
+ },
456
+ "landmark-one-main": {
457
+ title: "main landmark",
458
+ axeSummary: "Ensure the document has a main landmark",
459
+ friendlySummary: 'Include a main landmark on each page using a <main> region or role="main".'
460
+ },
461
+ "landmark-unique": {
462
+ title: "Unique landmark",
463
+ axeSummary: "Ensure landmarks have a unique role or role/label combination",
464
+ friendlySummary: "If you use multiple landmarks of the same type, give them unique labels (names)."
465
+ },
466
+ "meta-viewport-large": {
467
+ title: "Significant viewport scaling",
468
+ axeSummary: 'Ensure <meta name="viewport"> can scale a significant amount (e.g. 500%)',
469
+ friendlySummary: '<meta name="viewport"> should allow users to significantly scale content.'
470
+ },
471
+ "page-has-heading-one": {
472
+ title: "Has <h1>",
473
+ axeSummary: "Ensure the page (or at least one frame) contains a level-one heading",
474
+ friendlySummary: "Every page or frame should have at least one <h1> heading."
475
+ },
476
+ "presentation-role-conflict": {
477
+ title: "Presentational content",
478
+ axeSummary: 'Ensure elements with role="presentation"/"none" have no ARIA or tabindex',
479
+ friendlySummary: `Don't give elements with role="none"/"presentation" any ARIA attributes or a tabindex.`
480
+ },
481
+ region: {
482
+ title: "Landmark regions",
483
+ axeSummary: "Ensure all page content is contained by landmarks",
484
+ friendlySummary: "Wrap all page content in appropriate landmark regions (<header>, <main>, <footer>, etc.)."
485
+ },
486
+ "scope-attr-valid": {
487
+ title: "scope attribute",
488
+ axeSummary: "Ensure the scope attribute is used correctly on tables",
489
+ friendlySummary: "Use the scope attribute only on <th> elements, with proper values (col, row, etc.)."
490
+ },
491
+ "skip-link": {
492
+ title: "Skip link",
493
+ axeSummary: 'Ensure all "skip" links have a focusable target',
494
+ friendlySummary: 'Make sure any "skip to content" link targets an existing, focusable element.'
495
+ },
496
+ tabindex: {
497
+ title: "tabindex values",
498
+ axeSummary: "Ensure tabindex attribute values are not greater than 0",
499
+ friendlySummary: "Don't use tabindex values greater than 0."
500
+ },
501
+ "table-duplicate-name": {
502
+ title: "Duplicate names for table",
503
+ axeSummary: "Ensure the <caption> does not duplicate the summary attribute text",
504
+ friendlySummary: "Don't use the same text in both a table's <caption> and its summary attribute."
505
+ }
506
+ };
507
+ var axeRuleMapping_wcag_2_x_aaa = {
508
+ "color-contrast-enhanced": {
509
+ title: "Enhanced color contrast",
510
+ axeSummary: "Ensure contrast between text and background meets WCAG 2 AAA enhanced contrast thresholds",
511
+ friendlySummary: "Use extra-high contrast for text and background to meet WCAG AAA level."
512
+ },
513
+ "identical-links-same-purpose": {
514
+ title: "Same link name, same purpose",
515
+ axeSummary: "Ensure links with the same accessible name serve a similar purpose",
516
+ friendlySummary: "If two links have the same text, they should do the same thing (lead to the same content)."
517
+ },
518
+ "meta-refresh-no-exceptions": {
519
+ title: 'No <meta http-equiv="refresh">',
520
+ axeSummary: 'Ensure <meta http-equiv="refresh"> is not used for delayed refresh (no exceptions)',
521
+ friendlySummary: `Don't auto-refresh or redirect pages using <meta http-equiv="refresh"> even with a delay.`
522
+ }
523
+ };
524
+ var axeRuleMapping_experimental = {
525
+ "css-orientation-lock": {
526
+ title: "CSS orientation lock",
527
+ axeSummary: "Ensure content is not locked to a specific display orientation (works in all orientations)",
528
+ friendlySummary: "Don't lock content to one screen orientation; support both portrait and landscape modes."
529
+ },
530
+ "focus-order-semantics": {
531
+ title: "Focus order semantic role",
532
+ axeSummary: "Ensure elements in the tab order have a role appropriate for interactive content",
533
+ friendlySummary: "Ensure elements in the tab order have a role appropriate for interactive content"
534
+ },
535
+ "hidden-content": {
536
+ title: "Hidden content",
537
+ axeSummary: "Informs users about hidden content",
538
+ friendlySummary: "Display hidden content on the page for test analysis."
539
+ },
540
+ "label-content-name-mismatch": {
541
+ title: "Content name mismatch",
542
+ axeSummary: "Ensure elements labeled by their content include that text in their accessible name",
543
+ friendlySummary: "If an element's visible text serves as its label, include that text in its accessible name."
544
+ },
545
+ "p-as-heading": {
546
+ title: "No <p> headings",
547
+ axeSummary: "Ensure <p> elements aren't styled to look like headings (use real headings)",
548
+ friendlySummary: "Don't just style a <p> to look like a heading \u2013 use an actual heading tag for headings."
549
+ },
550
+ "table-fake-caption": {
551
+ title: "Table caption",
552
+ axeSummary: "Ensure that tables with a caption use the <caption> element",
553
+ friendlySummary: "Use a <caption> element for table captions instead of just styled text."
554
+ },
555
+ "td-has-header": {
556
+ title: "<td> has header",
557
+ axeSummary: "Ensure each non-empty data cell in large tables (3\xD73+) has one or more headers",
558
+ friendlySummary: "Every data cell in large tables should be associated with at least one header cell."
559
+ }
560
+ };
561
+ var axeRuleMapping_deprecated = {
562
+ "aria-roledescription": {
563
+ title: "aria-roledescription",
564
+ axeSummary: "Ensure aria-roledescription is only used on elements with an implicit or explicit role",
565
+ friendlySummary: "Only use aria-roledescription on elements that already have a defined role."
566
+ }
567
+ };
568
+ var combinedRulesMap = {
569
+ ...axeRuleMapping_wcag_2_0_a_aa,
570
+ ...axeRuleMapping_wcag_2_1_a_aa,
571
+ ...axeRuleMapping_wcag_2_2_a_aa,
572
+ ...axeRuleMapping_wcag_2_x_aaa,
573
+ ...axeRuleMapping_best_practices,
574
+ ...axeRuleMapping_experimental,
575
+ ...axeRuleMapping_deprecated
576
+ };
577
+
578
+ // src/axeRuleMappingHelper.ts
579
+ var getTitleForAxeResult = /* @__PURE__ */ __name((axeResult) => combinedRulesMap[axeResult.id]?.title || axeResult.id, "getTitleForAxeResult");
580
+ var getFriendlySummaryForAxeResult = /* @__PURE__ */ __name((axeResult) => combinedRulesMap[axeResult.id]?.friendlySummary || axeResult.description, "getFriendlySummaryForAxeResult");
581
+
582
+ // src/components/A11yContext.tsx
583
+ var unhighlightedSelectors = ["html", "body", "main"];
584
+ var theme = convert(themes.light);
585
+ var colorsByType = {
586
+ [RuleType.VIOLATION]: theme.color.negative,
587
+ [RuleType.PASS]: theme.color.positive,
588
+ [RuleType.INCOMPLETION]: theme.color.warning
589
+ };
590
+ var A11yContext = createContext({
591
+ parameters: {},
592
+ results: void 0,
593
+ highlighted: false,
594
+ toggleHighlight: /* @__PURE__ */ __name(() => {
595
+ }, "toggleHighlight"),
596
+ tab: RuleType.VIOLATION,
597
+ handleCopyLink: /* @__PURE__ */ __name(() => {
598
+ }, "handleCopyLink"),
599
+ setTab: /* @__PURE__ */ __name(() => {
600
+ }, "setTab"),
601
+ setStatus: /* @__PURE__ */ __name(() => {
602
+ }, "setStatus"),
603
+ status: "initial",
604
+ error: void 0,
605
+ handleManual: /* @__PURE__ */ __name(() => {
606
+ }, "handleManual"),
607
+ discrepancy: null,
608
+ selectedItems: /* @__PURE__ */ new Map(),
609
+ allExpanded: false,
610
+ toggleOpen: /* @__PURE__ */ __name(() => {
611
+ }, "toggleOpen"),
612
+ handleCollapseAll: /* @__PURE__ */ __name(() => {
613
+ }, "handleCollapseAll"),
614
+ handleExpandAll: /* @__PURE__ */ __name(() => {
615
+ }, "handleExpandAll"),
616
+ handleJumpToElement: /* @__PURE__ */ __name(() => {
617
+ }, "handleJumpToElement"),
618
+ handleSelectionChange: /* @__PURE__ */ __name(() => {
619
+ }, "handleSelectionChange")
620
+ });
621
+ var A11yContextProvider = /* @__PURE__ */ __name((props) => {
622
+ const parameters = useParameter("a11y", {});
623
+ const [globals] = useGlobals() ?? [];
624
+ const api = useStorybookApi();
625
+ const getInitialStatus = useCallback((manual2 = false) => manual2 ? "manual" : "initial", []);
626
+ const manual = useMemo(() => globals?.a11y?.manual ?? false, [globals?.a11y?.manual]);
627
+ const a11ySelection = useMemo(() => {
628
+ const value = api.getQueryParam("a11ySelection");
629
+ if (value) {
630
+ api.setQueryParams({ a11ySelection: "" });
631
+ }
632
+ return value;
633
+ }, [api]);
634
+ const [results, setResults] = useAddonState(ADDON_ID);
635
+ const [tab, setTab] = useState(() => {
636
+ const [type] = a11ySelection?.split(".") ?? [];
637
+ return type && Object.values(RuleType).includes(type) ? type : RuleType.VIOLATION;
638
+ });
639
+ const [error, setError] = useState(void 0);
640
+ const [status, setStatus] = useState(getInitialStatus(manual));
641
+ const [highlighted, setHighlighted] = useState(!!a11ySelection);
642
+ const { storyId } = useStorybookState();
643
+ const currentStoryA11yStatusValue = experimental_useStatusStore(
644
+ (allStatuses) => allStatuses[storyId]?.[STATUS_TYPE_ID_A11Y]?.value
645
+ );
646
+ useEffect(() => {
647
+ const unsubscribe = experimental_getStatusStore("storybook/component-test").onAllStatusChange(
648
+ (statuses, previousStatuses) => {
649
+ const current = statuses[storyId]?.[STATUS_TYPE_ID_COMPONENT_TEST];
650
+ const previous = previousStatuses[storyId]?.[STATUS_TYPE_ID_COMPONENT_TEST];
651
+ if (current?.value === "status-value:error" && previous?.value !== "status-value:error") {
652
+ setStatus("component-test-error");
653
+ }
654
+ }
655
+ );
656
+ return unsubscribe;
657
+ }, [storyId]);
658
+ const handleToggleHighlight = useCallback(
659
+ () => setHighlighted((prevHighlighted) => !prevHighlighted),
660
+ []
661
+ );
662
+ const [selectedItems, setSelectedItems] = useState(() => {
663
+ const initialValue = /* @__PURE__ */ new Map();
664
+ if (a11ySelection && /^[a-z]+.[a-z-]+.[0-9]+$/.test(a11ySelection)) {
665
+ const [type, id] = a11ySelection.split(".");
666
+ initialValue.set(`${type}.${id}`, a11ySelection);
667
+ }
668
+ return initialValue;
669
+ });
670
+ const allExpanded = useMemo(() => {
671
+ const currentResults = results?.[tab];
672
+ return currentResults?.every((result) => selectedItems.has(`${tab}.${result.id}`)) ?? false;
673
+ }, [results, selectedItems, tab]);
674
+ const toggleOpen = useCallback(
675
+ (event, type, item) => {
676
+ event.stopPropagation();
677
+ const key = `${type}.${item.id}`;
678
+ setSelectedItems((prev) => new Map(prev.delete(key) ? prev : prev.set(key, `${key}.1`)));
679
+ },
680
+ []
681
+ );
682
+ const handleCollapseAll = useCallback(() => {
683
+ setSelectedItems(/* @__PURE__ */ new Map());
684
+ }, []);
685
+ const handleExpandAll = useCallback(() => {
686
+ setSelectedItems(
687
+ (prev) => new Map(
688
+ results?.[tab]?.map((result) => {
689
+ const key = `${tab}.${result.id}`;
690
+ return [key, prev.get(key) ?? `${key}.1`];
691
+ }) ?? []
692
+ )
693
+ );
694
+ }, [results, tab]);
695
+ const handleSelectionChange = useCallback((key) => {
696
+ const [type, id] = key.split(".");
697
+ setSelectedItems((prev) => new Map(prev.set(`${type}.${id}`, key)));
698
+ }, []);
699
+ const handleError = useCallback((err) => {
700
+ setStatus("error");
701
+ setError(err);
702
+ }, []);
703
+ const handleResult = useCallback(
704
+ (axeResults, id) => {
705
+ if (storyId === id) {
706
+ setStatus("ran");
707
+ setResults(axeResults);
708
+ setTimeout(() => {
709
+ if (status === "ran") {
710
+ setStatus("ready");
711
+ }
712
+ if (selectedItems.size === 1) {
713
+ const [key] = selectedItems.values();
714
+ document.getElementById(key)?.scrollIntoView({ behavior: "smooth", block: "center" });
715
+ }
716
+ }, 900);
717
+ }
718
+ },
719
+ [setResults, status, storyId, selectedItems]
720
+ );
721
+ const handleSelect = useCallback(
722
+ (itemId, details) => {
723
+ const [type, id] = itemId.split(".");
724
+ const { helpUrl, nodes } = results?.[type]?.find((r) => r.id === id) || {};
725
+ const openedWindow = helpUrl && window.open(helpUrl, "_blank", "noopener,noreferrer");
726
+ if (nodes && !openedWindow) {
727
+ const index = nodes.findIndex((n) => details.selectors.some((s) => s === String(n.target))) ?? -1;
728
+ if (index !== -1) {
729
+ const key = `${type}.${id}.${index + 1}`;
730
+ setSelectedItems(/* @__PURE__ */ new Map([[`${type}.${id}`, key]]));
731
+ setTimeout(() => {
732
+ document.getElementById(key)?.scrollIntoView({ behavior: "smooth", block: "center" });
733
+ }, 100);
734
+ }
735
+ }
736
+ },
737
+ [results]
738
+ );
739
+ const handleReport = useCallback(
740
+ ({ reporters }) => {
741
+ const a11yReport = reporters.find((r) => r.type === "a11y");
742
+ if (a11yReport) {
743
+ if ("error" in a11yReport.result) {
744
+ handleError(a11yReport.result.error);
745
+ } else {
746
+ handleResult(a11yReport.result, storyId);
747
+ }
748
+ }
749
+ },
750
+ [handleError, handleResult, storyId]
751
+ );
752
+ const handleReset = useCallback(
753
+ ({ newPhase }) => {
754
+ if (newPhase === "loading") {
755
+ setResults(void 0);
756
+ setStatus(manual ? "manual" : "initial");
757
+ }
758
+ if (newPhase === "afterEach" && !manual) {
759
+ setStatus("running");
760
+ }
761
+ },
762
+ [manual, setResults]
763
+ );
764
+ const emit = useChannel(
765
+ {
766
+ [EVENTS.RESULT]: handleResult,
767
+ [EVENTS.ERROR]: handleError,
768
+ [EVENTS.SELECT]: handleSelect,
769
+ [STORY_CHANGED]: () => setSelectedItems(/* @__PURE__ */ new Map()),
770
+ [STORY_RENDER_PHASE_CHANGED]: handleReset,
771
+ [STORY_FINISHED]: handleReport,
772
+ [STORY_HOT_UPDATED]: () => {
773
+ setStatus("running");
774
+ emit(EVENTS.MANUAL, storyId, parameters);
775
+ }
776
+ },
777
+ [handleReset, handleReport, handleSelect, handleError, handleResult, parameters, storyId]
778
+ );
779
+ const handleManual = useCallback(() => {
780
+ setStatus("running");
781
+ emit(EVENTS.MANUAL, storyId, parameters);
782
+ }, [emit, parameters, storyId]);
783
+ const handleCopyLink = useCallback(async (linkPath) => {
784
+ const { createCopyToClipboardFunction } = await import("storybook/internal/components");
785
+ await createCopyToClipboardFunction()(`${window.location.origin}${linkPath}`);
786
+ }, []);
787
+ const handleJumpToElement = useCallback(
788
+ (target) => emit(SCROLL_INTO_VIEW, target),
789
+ [emit]
790
+ );
791
+ useEffect(() => {
792
+ setStatus(getInitialStatus(manual));
793
+ }, [getInitialStatus, manual]);
794
+ useEffect(() => {
795
+ emit(REMOVE_HIGHLIGHT, `${ADDON_ID}/selected`);
796
+ emit(REMOVE_HIGHLIGHT, `${ADDON_ID}/others`);
797
+ if (!highlighted) {
798
+ return;
799
+ }
800
+ const selected = Array.from(selectedItems.values()).flatMap((key) => {
801
+ const [type, id, number] = key.split(".");
802
+ if (type !== tab) {
803
+ return [];
804
+ }
805
+ const result = results?.[type]?.find((r) => r.id === id);
806
+ const target = result?.nodes[Number(number) - 1]?.target;
807
+ return target ? [String(target)] : [];
808
+ });
809
+ emit(HIGHLIGHT, {
810
+ id: `${ADDON_ID}/selected`,
811
+ priority: 1,
812
+ selectors: selected,
813
+ styles: {
814
+ outline: `1px solid color-mix(in srgb, ${colorsByType[tab]}, transparent 30%)`,
815
+ backgroundColor: "transparent"
816
+ },
817
+ hoverStyles: {
818
+ outlineWidth: "2px"
819
+ },
820
+ focusStyles: {
821
+ backgroundColor: "transparent"
822
+ },
823
+ menu: results?.[tab].map((result) => {
824
+ const selectors = result.nodes.flatMap((n) => n.target).map(String).filter((e) => selected.includes(e));
825
+ return [
826
+ {
827
+ id: `${tab}.${result.id}:info`,
828
+ title: getTitleForAxeResult(result),
829
+ description: getFriendlySummaryForAxeResult(result),
830
+ selectors
831
+ },
832
+ {
833
+ id: `${tab}.${result.id}`,
834
+ iconLeft: "info",
835
+ iconRight: "shareAlt",
836
+ title: "Learn how to resolve this violation",
837
+ clickEvent: EVENTS.SELECT,
838
+ selectors
839
+ }
840
+ ];
841
+ })
842
+ });
843
+ const others = results?.[tab].flatMap((r) => r.nodes.flatMap((n) => n.target).map(String)).filter((e) => ![...unhighlightedSelectors, ...selected].includes(e));
844
+ emit(HIGHLIGHT, {
845
+ id: `${ADDON_ID}/others`,
846
+ selectors: others,
847
+ styles: {
848
+ outline: `1px solid color-mix(in srgb, ${colorsByType[tab]}, transparent 30%)`,
849
+ backgroundColor: `color-mix(in srgb, ${colorsByType[tab]}, transparent 60%)`
850
+ },
851
+ hoverStyles: {
852
+ outlineWidth: "2px"
853
+ },
854
+ focusStyles: {
855
+ backgroundColor: "transparent"
856
+ },
857
+ menu: results?.[tab].map((result) => {
858
+ const selectors = result.nodes.flatMap((n) => n.target).map(String).filter((e) => !selected.includes(e));
859
+ return [
860
+ {
861
+ id: `${tab}.${result.id}:info`,
862
+ title: getTitleForAxeResult(result),
863
+ description: getFriendlySummaryForAxeResult(result),
864
+ selectors
865
+ },
866
+ {
867
+ id: `${tab}.${result.id}`,
868
+ iconLeft: "info",
869
+ iconRight: "shareAlt",
870
+ title: "Learn how to resolve this violation",
871
+ clickEvent: EVENTS.SELECT,
872
+ selectors
873
+ }
874
+ ];
875
+ })
876
+ });
877
+ }, [emit, highlighted, results, tab, selectedItems]);
878
+ const discrepancy = useMemo(() => {
879
+ if (!currentStoryA11yStatusValue) {
880
+ return null;
881
+ }
882
+ if (currentStoryA11yStatusValue === "status-value:success" && results?.violations.length) {
883
+ return "cliPassedBrowserFailed";
884
+ }
885
+ if (currentStoryA11yStatusValue === "status-value:error" && !results?.violations.length) {
886
+ if (status === "ready" || status === "ran") {
887
+ return "browserPassedCliFailed";
888
+ }
889
+ if (status === "manual") {
890
+ return "cliFailedButModeManual";
891
+ }
892
+ }
893
+ return null;
894
+ }, [results?.violations.length, status, currentStoryA11yStatusValue]);
895
+ return React.createElement(
896
+ A11yContext.Provider,
897
+ {
898
+ value: {
899
+ parameters,
900
+ results,
901
+ highlighted,
902
+ toggleHighlight: handleToggleHighlight,
903
+ tab,
904
+ setTab,
905
+ handleCopyLink,
906
+ status,
907
+ setStatus,
908
+ error,
909
+ handleManual,
910
+ discrepancy,
911
+ selectedItems,
912
+ toggleOpen,
913
+ allExpanded,
914
+ handleCollapseAll,
915
+ handleExpandAll,
916
+ handleJumpToElement,
917
+ handleSelectionChange
918
+ },
919
+ ...props
920
+ }
921
+ );
922
+ }, "A11yContextProvider");
923
+ var useA11yContext = /* @__PURE__ */ __name(() => useContext(A11yContext), "useA11yContext");
924
+
925
+ // src/components/Report/Report.tsx
926
+ import React3 from "react";
927
+ import { Badge, EmptyTabContent, IconButton } from "storybook/internal/components";
928
+ import { ChevronSmallDownIcon } from "@storybook/icons";
929
+ import { styled as styled2 } from "storybook/theming";
930
+
931
+ // src/components/Report/Details.tsx
932
+ import React2, { Fragment, useCallback as useCallback2, useState as useState3 } from "react";
933
+ import { Button, Link, SyntaxHighlighter } from "storybook/internal/components";
934
+ import { CheckIcon, CopyIcon, LocationIcon } from "@storybook/icons";
935
+
936
+ // ../../node_modules/@babel/runtime/helpers/esm/extends.js
937
+ function _extends() {
938
+ return _extends = Object.assign ? Object.assign.bind() : function(n) {
939
+ for (var e = 1; e < arguments.length; e++) {
940
+ var t = arguments[e];
941
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
942
+ }
943
+ return n;
944
+ }, _extends.apply(null, arguments);
945
+ }
946
+ __name(_extends, "_extends");
947
+
948
+ // ../../node_modules/@radix-ui/react-tabs/dist/index.mjs
949
+ import { forwardRef as $1IHzk$forwardRef, createElement as $1IHzk$createElement, useRef as $1IHzk$useRef, useEffect as $1IHzk$useEffect } from "react";
950
+
951
+ // ../../node_modules/@radix-ui/primitive/dist/index.mjs
952
+ function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
953
+ return /* @__PURE__ */ __name(function handleEvent(event) {
954
+ originalEventHandler === null || originalEventHandler === void 0 || originalEventHandler(event);
955
+ if (checkForDefaultPrevented === false || !event.defaultPrevented) return ourEventHandler === null || ourEventHandler === void 0 ? void 0 : ourEventHandler(event);
956
+ }, "handleEvent");
957
+ }
958
+ __name($e42e1063c40fb3ef$export$b9ecd428b558ff10, "$e42e1063c40fb3ef$export$b9ecd428b558ff10");
959
+
960
+ // ../../node_modules/@radix-ui/react-context/dist/index.mjs
961
+ import { createContext as $3bkAK$createContext, useMemo as $3bkAK$useMemo, createElement as $3bkAK$createElement, useContext as $3bkAK$useContext } from "react";
962
+ function $c512c27ab02ef895$export$50c7b4e9d9f19c1(scopeName, createContextScopeDeps = []) {
963
+ let defaultContexts = [];
964
+ function $c512c27ab02ef895$export$fd42f52fd3ae1109(rootComponentName, defaultContext) {
965
+ const BaseContext = $3bkAK$createContext(defaultContext);
966
+ const index = defaultContexts.length;
967
+ defaultContexts = [
968
+ ...defaultContexts,
969
+ defaultContext
970
+ ];
971
+ function Provider(props) {
972
+ const { scope, children, ...context } = props;
973
+ const Context = (scope === null || scope === void 0 ? void 0 : scope[scopeName][index]) || BaseContext;
974
+ const value = $3bkAK$useMemo(
975
+ () => context,
976
+ Object.values(context)
977
+ );
978
+ return $3bkAK$createElement(Context.Provider, {
979
+ value
980
+ }, children);
981
+ }
982
+ __name(Provider, "Provider");
983
+ function useContext2(consumerName, scope) {
984
+ const Context = (scope === null || scope === void 0 ? void 0 : scope[scopeName][index]) || BaseContext;
985
+ const context = $3bkAK$useContext(Context);
986
+ if (context) return context;
987
+ if (defaultContext !== void 0) return defaultContext;
988
+ throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
989
+ }
990
+ __name(useContext2, "useContext");
991
+ Provider.displayName = rootComponentName + "Provider";
992
+ return [
993
+ Provider,
994
+ useContext2
995
+ ];
996
+ }
997
+ __name($c512c27ab02ef895$export$fd42f52fd3ae1109, "$c512c27ab02ef895$export$fd42f52fd3ae1109");
998
+ const createScope = /* @__PURE__ */ __name(() => {
999
+ const scopeContexts = defaultContexts.map((defaultContext) => {
1000
+ return $3bkAK$createContext(defaultContext);
1001
+ });
1002
+ return /* @__PURE__ */ __name(function useScope(scope) {
1003
+ const contexts = (scope === null || scope === void 0 ? void 0 : scope[scopeName]) || scopeContexts;
1004
+ return $3bkAK$useMemo(
1005
+ () => ({
1006
+ [`__scope${scopeName}`]: {
1007
+ ...scope,
1008
+ [scopeName]: contexts
1009
+ }
1010
+ }),
1011
+ [
1012
+ scope,
1013
+ contexts
1014
+ ]
1015
+ );
1016
+ }, "useScope");
1017
+ }, "createScope");
1018
+ createScope.scopeName = scopeName;
1019
+ return [
1020
+ $c512c27ab02ef895$export$fd42f52fd3ae1109,
1021
+ $c512c27ab02ef895$var$composeContextScopes(createScope, ...createContextScopeDeps)
1022
+ ];
1023
+ }
1024
+ __name($c512c27ab02ef895$export$50c7b4e9d9f19c1, "$c512c27ab02ef895$export$50c7b4e9d9f19c1");
1025
+ function $c512c27ab02ef895$var$composeContextScopes(...scopes) {
1026
+ const baseScope = scopes[0];
1027
+ if (scopes.length === 1) return baseScope;
1028
+ const createScope1 = /* @__PURE__ */ __name(() => {
1029
+ const scopeHooks = scopes.map(
1030
+ (createScope) => ({
1031
+ useScope: createScope(),
1032
+ scopeName: createScope.scopeName
1033
+ })
1034
+ );
1035
+ return /* @__PURE__ */ __name(function useComposedScopes(overrideScopes) {
1036
+ const nextScopes1 = scopeHooks.reduce((nextScopes, { useScope, scopeName }) => {
1037
+ const scopeProps = useScope(overrideScopes);
1038
+ const currentScope = scopeProps[`__scope${scopeName}`];
1039
+ return {
1040
+ ...nextScopes,
1041
+ ...currentScope
1042
+ };
1043
+ }, {});
1044
+ return $3bkAK$useMemo(
1045
+ () => ({
1046
+ [`__scope${baseScope.scopeName}`]: nextScopes1
1047
+ }),
1048
+ [
1049
+ nextScopes1
1050
+ ]
1051
+ );
1052
+ }, "useComposedScopes");
1053
+ }, "createScope1");
1054
+ createScope1.scopeName = baseScope.scopeName;
1055
+ return createScope1;
1056
+ }
1057
+ __name($c512c27ab02ef895$var$composeContextScopes, "$c512c27ab02ef895$var$composeContextScopes");
1058
+
1059
+ // ../../node_modules/@radix-ui/react-roving-focus/dist/index.mjs
1060
+ import { forwardRef as $98Iye$forwardRef, createElement as $98Iye$createElement, useRef as $98Iye$useRef, useState as $98Iye$useState, useEffect as $98Iye$useEffect, useCallback as $98Iye$useCallback } from "react";
1061
+
1062
+ // ../../node_modules/@radix-ui/react-collection/dist/index.mjs
1063
+ import $6vYhU$react from "react";
1064
+
1065
+ // ../../node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-compose-refs/dist/index.mjs
1066
+ import { useCallback as $3vqmr$useCallback } from "react";
1067
+ function $6ed0406888f73fc4$var$setRef(ref, value) {
1068
+ if (typeof ref === "function") ref(value);
1069
+ else if (ref !== null && ref !== void 0) ref.current = value;
1070
+ }
1071
+ __name($6ed0406888f73fc4$var$setRef, "$6ed0406888f73fc4$var$setRef");
1072
+ function $6ed0406888f73fc4$export$43e446d32b3d21af(...refs) {
1073
+ return (node) => refs.forEach(
1074
+ (ref) => $6ed0406888f73fc4$var$setRef(ref, node)
1075
+ );
1076
+ }
1077
+ __name($6ed0406888f73fc4$export$43e446d32b3d21af, "$6ed0406888f73fc4$export$43e446d32b3d21af");
1078
+ function $6ed0406888f73fc4$export$c7b2cbe3552a0d05(...refs) {
1079
+ return $3vqmr$useCallback($6ed0406888f73fc4$export$43e446d32b3d21af(...refs), refs);
1080
+ }
1081
+ __name($6ed0406888f73fc4$export$c7b2cbe3552a0d05, "$6ed0406888f73fc4$export$c7b2cbe3552a0d05");
1082
+
1083
+ // ../../node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot/dist/index.mjs
1084
+ import { forwardRef as $9IrjX$forwardRef, Children as $9IrjX$Children, isValidElement as $9IrjX$isValidElement, createElement as $9IrjX$createElement, cloneElement as $9IrjX$cloneElement, Fragment as $9IrjX$Fragment } from "react";
1085
+ var $5e63c961fc1ce211$export$8c6ed5c666ac1360 = $9IrjX$forwardRef((props, forwardedRef) => {
1086
+ const { children, ...slotProps } = props;
1087
+ const childrenArray = $9IrjX$Children.toArray(children);
1088
+ const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable);
1089
+ if (slottable) {
1090
+ const newElement = slottable.props.children;
1091
+ const newChildren = childrenArray.map((child) => {
1092
+ if (child === slottable) {
1093
+ if ($9IrjX$Children.count(newElement) > 1) return $9IrjX$Children.only(null);
1094
+ return $9IrjX$isValidElement(newElement) ? newElement.props.children : null;
1095
+ } else return child;
1096
+ });
1097
+ return $9IrjX$createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
1098
+ ref: forwardedRef
1099
+ }), $9IrjX$isValidElement(newElement) ? $9IrjX$cloneElement(newElement, void 0, newChildren) : null);
1100
+ }
1101
+ return $9IrjX$createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
1102
+ ref: forwardedRef
1103
+ }), children);
1104
+ });
1105
+ $5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = "Slot";
1106
+ var $5e63c961fc1ce211$var$SlotClone = $9IrjX$forwardRef((props, forwardedRef) => {
1107
+ const { children, ...slotProps } = props;
1108
+ if ($9IrjX$isValidElement(children)) return $9IrjX$cloneElement(children, {
1109
+ ...$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
1110
+ ref: forwardedRef ? $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref) : children.ref
1111
+ });
1112
+ return $9IrjX$Children.count(children) > 1 ? $9IrjX$Children.only(null) : null;
1113
+ });
1114
+ $5e63c961fc1ce211$var$SlotClone.displayName = "SlotClone";
1115
+ var $5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = /* @__PURE__ */ __name(({ children }) => {
1116
+ return $9IrjX$createElement($9IrjX$Fragment, null, children);
1117
+ }, "$5e63c961fc1ce211$export$d9f1ccf0bdb05d45");
1118
+ function $5e63c961fc1ce211$var$isSlottable(child) {
1119
+ return $9IrjX$isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45;
1120
+ }
1121
+ __name($5e63c961fc1ce211$var$isSlottable, "$5e63c961fc1ce211$var$isSlottable");
1122
+ function $5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {
1123
+ const overrideProps = {
1124
+ ...childProps
1125
+ };
1126
+ for (const propName in childProps) {
1127
+ const slotPropValue = slotProps[propName];
1128
+ const childPropValue = childProps[propName];
1129
+ const isHandler = /^on[A-Z]/.test(propName);
1130
+ if (isHandler) {
1131
+ if (slotPropValue && childPropValue) overrideProps[propName] = (...args) => {
1132
+ childPropValue(...args);
1133
+ slotPropValue(...args);
1134
+ };
1135
+ else if (slotPropValue) overrideProps[propName] = slotPropValue;
1136
+ } else if (propName === "style") overrideProps[propName] = {
1137
+ ...slotPropValue,
1138
+ ...childPropValue
1139
+ };
1140
+ else if (propName === "className") overrideProps[propName] = [
1141
+ slotPropValue,
1142
+ childPropValue
1143
+ ].filter(Boolean).join(" ");
1144
+ }
1145
+ return {
1146
+ ...slotProps,
1147
+ ...overrideProps
1148
+ };
1149
+ }
1150
+ __name($5e63c961fc1ce211$var$mergeProps, "$5e63c961fc1ce211$var$mergeProps");
1151
+
1152
+ // ../../node_modules/@radix-ui/react-collection/dist/index.mjs
1153
+ function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name) {
1154
+ const PROVIDER_NAME = name + "CollectionProvider";
1155
+ const [createCollectionContext, createCollectionScope] = $c512c27ab02ef895$export$50c7b4e9d9f19c1(PROVIDER_NAME);
1156
+ const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, {
1157
+ collectionRef: {
1158
+ current: null
1159
+ },
1160
+ itemMap: /* @__PURE__ */ new Map()
1161
+ });
1162
+ const CollectionProvider = /* @__PURE__ */ __name((props) => {
1163
+ const { scope, children } = props;
1164
+ const ref = $6vYhU$react.useRef(null);
1165
+ const itemMap = $6vYhU$react.useRef(/* @__PURE__ */ new Map()).current;
1166
+ return $6vYhU$react.createElement(CollectionProviderImpl, {
1167
+ scope,
1168
+ itemMap,
1169
+ collectionRef: ref
1170
+ }, children);
1171
+ }, "CollectionProvider");
1172
+ Object.assign(CollectionProvider, {
1173
+ displayName: PROVIDER_NAME
1174
+ });
1175
+ const COLLECTION_SLOT_NAME = name + "CollectionSlot";
1176
+ const CollectionSlot = $6vYhU$react.forwardRef((props, forwardedRef) => {
1177
+ const { scope, children } = props;
1178
+ const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
1179
+ const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, context.collectionRef);
1180
+ return $6vYhU$react.createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360, {
1181
+ ref: composedRefs
1182
+ }, children);
1183
+ });
1184
+ Object.assign(CollectionSlot, {
1185
+ displayName: COLLECTION_SLOT_NAME
1186
+ });
1187
+ const ITEM_SLOT_NAME = name + "CollectionItemSlot";
1188
+ const ITEM_DATA_ATTR = "data-radix-collection-item";
1189
+ const CollectionItemSlot = $6vYhU$react.forwardRef((props, forwardedRef) => {
1190
+ const { scope, children, ...itemData } = props;
1191
+ const ref = $6vYhU$react.useRef(null);
1192
+ const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref);
1193
+ const context = useCollectionContext(ITEM_SLOT_NAME, scope);
1194
+ $6vYhU$react.useEffect(() => {
1195
+ context.itemMap.set(ref, {
1196
+ ref,
1197
+ ...itemData
1198
+ });
1199
+ return () => void context.itemMap.delete(ref);
1200
+ });
1201
+ return $6vYhU$react.createElement($5e63c961fc1ce211$export$8c6ed5c666ac1360, {
1202
+ [ITEM_DATA_ATTR]: "",
1203
+ ref: composedRefs
1204
+ }, children);
1205
+ });
1206
+ Object.assign(CollectionItemSlot, {
1207
+ displayName: ITEM_SLOT_NAME
1208
+ });
1209
+ function useCollection(scope) {
1210
+ const context = useCollectionContext(name + "CollectionConsumer", scope);
1211
+ const getItems = $6vYhU$react.useCallback(() => {
1212
+ const collectionNode = context.collectionRef.current;
1213
+ if (!collectionNode) return [];
1214
+ const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
1215
+ const items = Array.from(context.itemMap.values());
1216
+ const orderedItems = items.sort(
1217
+ (a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
1218
+ );
1219
+ return orderedItems;
1220
+ }, [
1221
+ context.collectionRef,
1222
+ context.itemMap
1223
+ ]);
1224
+ return getItems;
1225
+ }
1226
+ __name(useCollection, "useCollection");
1227
+ return [
1228
+ {
1229
+ Provider: CollectionProvider,
1230
+ Slot: CollectionSlot,
1231
+ ItemSlot: CollectionItemSlot
1232
+ },
1233
+ useCollection,
1234
+ createCollectionScope
1235
+ ];
1236
+ }
1237
+ __name($e02a7d9cb1dc128c$export$c74125a8e3af6bb2, "$e02a7d9cb1dc128c$export$c74125a8e3af6bb2");
1238
+
1239
+ // ../../node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-compose-refs/dist/index.mjs
1240
+ import { useCallback as $3vqmr$useCallback2 } from "react";
1241
+ function $6ed0406888f73fc4$var$setRef2(ref, value) {
1242
+ if (typeof ref === "function") ref(value);
1243
+ else if (ref !== null && ref !== void 0) ref.current = value;
1244
+ }
1245
+ __name($6ed0406888f73fc4$var$setRef2, "$6ed0406888f73fc4$var$setRef");
1246
+ function $6ed0406888f73fc4$export$43e446d32b3d21af2(...refs) {
1247
+ return (node) => refs.forEach(
1248
+ (ref) => $6ed0406888f73fc4$var$setRef2(ref, node)
1249
+ );
1250
+ }
1251
+ __name($6ed0406888f73fc4$export$43e446d32b3d21af2, "$6ed0406888f73fc4$export$43e446d32b3d21af");
1252
+ function $6ed0406888f73fc4$export$c7b2cbe3552a0d052(...refs) {
1253
+ return $3vqmr$useCallback2($6ed0406888f73fc4$export$43e446d32b3d21af2(...refs), refs);
1254
+ }
1255
+ __name($6ed0406888f73fc4$export$c7b2cbe3552a0d052, "$6ed0406888f73fc4$export$c7b2cbe3552a0d05");
1256
+
1257
+ // ../../node_modules/@radix-ui/react-id/dist/index.mjs
1258
+ import * as $2AODx$react from "react";
1259
+
1260
+ // ../../node_modules/@radix-ui/react-id/node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
1261
+ import { useLayoutEffect as $dxlwH$useLayoutEffect } from "react";
1262
+ var $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? $dxlwH$useLayoutEffect : () => {
1263
+ };
1264
+
1265
+ // ../../node_modules/@radix-ui/react-id/dist/index.mjs
1266
+ var $1746a345f3d73bb7$var$useReactId = $2AODx$react["useId".toString()] || (() => void 0);
1267
+ var $1746a345f3d73bb7$var$count = 0;
1268
+ function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId) {
1269
+ const [id, setId] = $2AODx$react.useState($1746a345f3d73bb7$var$useReactId());
1270
+ $9f79659886946c16$export$e5c5a5f917a5871c(() => {
1271
+ if (!deterministicId) setId(
1272
+ (reactId) => reactId !== null && reactId !== void 0 ? reactId : String($1746a345f3d73bb7$var$count++)
1273
+ );
1274
+ }, [
1275
+ deterministicId
1276
+ ]);
1277
+ return deterministicId || (id ? `radix-${id}` : "");
1278
+ }
1279
+ __name($1746a345f3d73bb7$export$f680877a34711e37, "$1746a345f3d73bb7$export$f680877a34711e37");
1280
+
1281
+ // ../../node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-primitive/dist/index.mjs
1282
+ import { forwardRef as $4q5Fq$forwardRef, useEffect as $4q5Fq$useEffect, createElement as $4q5Fq$createElement } from "react";
1283
+ import { flushSync as $4q5Fq$flushSync } from "react-dom";
1284
+
1285
+ // ../../node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-slot/dist/index.mjs
1286
+ 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";
1287
+ var $5e63c961fc1ce211$export$8c6ed5c666ac13602 = $9IrjX$forwardRef2((props, forwardedRef) => {
1288
+ const { children, ...slotProps } = props;
1289
+ const childrenArray = $9IrjX$Children2.toArray(children);
1290
+ const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable2);
1291
+ if (slottable) {
1292
+ const newElement = slottable.props.children;
1293
+ const newChildren = childrenArray.map((child) => {
1294
+ if (child === slottable) {
1295
+ if ($9IrjX$Children2.count(newElement) > 1) return $9IrjX$Children2.only(null);
1296
+ return $9IrjX$isValidElement2(newElement) ? newElement.props.children : null;
1297
+ } else return child;
1298
+ });
1299
+ return $9IrjX$createElement2($5e63c961fc1ce211$var$SlotClone2, _extends({}, slotProps, {
1300
+ ref: forwardedRef
1301
+ }), $9IrjX$isValidElement2(newElement) ? $9IrjX$cloneElement2(newElement, void 0, newChildren) : null);
1302
+ }
1303
+ return $9IrjX$createElement2($5e63c961fc1ce211$var$SlotClone2, _extends({}, slotProps, {
1304
+ ref: forwardedRef
1305
+ }), children);
1306
+ });
1307
+ $5e63c961fc1ce211$export$8c6ed5c666ac13602.displayName = "Slot";
1308
+ var $5e63c961fc1ce211$var$SlotClone2 = $9IrjX$forwardRef2((props, forwardedRef) => {
1309
+ const { children, ...slotProps } = props;
1310
+ if ($9IrjX$isValidElement2(children)) return $9IrjX$cloneElement2(children, {
1311
+ ...$5e63c961fc1ce211$var$mergeProps2(slotProps, children.props),
1312
+ ref: forwardedRef ? $6ed0406888f73fc4$export$43e446d32b3d21af2(forwardedRef, children.ref) : children.ref
1313
+ });
1314
+ return $9IrjX$Children2.count(children) > 1 ? $9IrjX$Children2.only(null) : null;
1315
+ });
1316
+ $5e63c961fc1ce211$var$SlotClone2.displayName = "SlotClone";
1317
+ var $5e63c961fc1ce211$export$d9f1ccf0bdb05d452 = /* @__PURE__ */ __name(({ children }) => {
1318
+ return $9IrjX$createElement2($9IrjX$Fragment2, null, children);
1319
+ }, "$5e63c961fc1ce211$export$d9f1ccf0bdb05d45");
1320
+ function $5e63c961fc1ce211$var$isSlottable2(child) {
1321
+ return $9IrjX$isValidElement2(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d452;
1322
+ }
1323
+ __name($5e63c961fc1ce211$var$isSlottable2, "$5e63c961fc1ce211$var$isSlottable");
1324
+ function $5e63c961fc1ce211$var$mergeProps2(slotProps, childProps) {
1325
+ const overrideProps = {
1326
+ ...childProps
1327
+ };
1328
+ for (const propName in childProps) {
1329
+ const slotPropValue = slotProps[propName];
1330
+ const childPropValue = childProps[propName];
1331
+ const isHandler = /^on[A-Z]/.test(propName);
1332
+ if (isHandler) {
1333
+ if (slotPropValue && childPropValue) overrideProps[propName] = (...args) => {
1334
+ childPropValue(...args);
1335
+ slotPropValue(...args);
1336
+ };
1337
+ else if (slotPropValue) overrideProps[propName] = slotPropValue;
1338
+ } else if (propName === "style") overrideProps[propName] = {
1339
+ ...slotPropValue,
1340
+ ...childPropValue
1341
+ };
1342
+ else if (propName === "className") overrideProps[propName] = [
1343
+ slotPropValue,
1344
+ childPropValue
1345
+ ].filter(Boolean).join(" ");
1346
+ }
1347
+ return {
1348
+ ...slotProps,
1349
+ ...overrideProps
1350
+ };
1351
+ }
1352
+ __name($5e63c961fc1ce211$var$mergeProps2, "$5e63c961fc1ce211$var$mergeProps");
1353
+
1354
+ // ../../node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-primitive/dist/index.mjs
1355
+ var $8927f6f2acc4f386$var$NODES = [
1356
+ "a",
1357
+ "button",
1358
+ "div",
1359
+ "form",
1360
+ "h2",
1361
+ "h3",
1362
+ "img",
1363
+ "input",
1364
+ "label",
1365
+ "li",
1366
+ "nav",
1367
+ "ol",
1368
+ "p",
1369
+ "span",
1370
+ "svg",
1371
+ "ul"
1372
+ ];
1373
+ var $8927f6f2acc4f386$export$250ffa63cdc0d034 = $8927f6f2acc4f386$var$NODES.reduce((primitive, node) => {
1374
+ const Node = $4q5Fq$forwardRef((props, forwardedRef) => {
1375
+ const { asChild, ...primitiveProps } = props;
1376
+ const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac13602 : node;
1377
+ $4q5Fq$useEffect(() => {
1378
+ window[Symbol.for("radix-ui")] = true;
1379
+ }, []);
1380
+ return $4q5Fq$createElement(Comp, _extends({}, primitiveProps, {
1381
+ ref: forwardedRef
1382
+ }));
1383
+ });
1384
+ Node.displayName = `Primitive.${node}`;
1385
+ return {
1386
+ ...primitive,
1387
+ [node]: Node
1388
+ };
1389
+ }, {});
1390
+
1391
+ // ../../node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs
1392
+ import { useRef as $lwiWj$useRef, useEffect as $lwiWj$useEffect, useMemo as $lwiWj$useMemo } from "react";
1393
+ function $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(callback) {
1394
+ const callbackRef = $lwiWj$useRef(callback);
1395
+ $lwiWj$useEffect(() => {
1396
+ callbackRef.current = callback;
1397
+ });
1398
+ return $lwiWj$useMemo(
1399
+ () => (...args) => {
1400
+ var _callbackRef$current;
1401
+ return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args);
1402
+ },
1403
+ []
1404
+ );
1405
+ }
1406
+ __name($b1b2314f5f9a1d84$export$25bec8c6f54ee79a, "$b1b2314f5f9a1d84$export$25bec8c6f54ee79a");
1407
+
1408
+ // ../../node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
1409
+ import { useCallback as $bnPw9$useCallback, useState as $bnPw9$useState, useRef as $bnPw9$useRef, useEffect as $bnPw9$useEffect } from "react";
1410
+
1411
+ // ../../node_modules/@radix-ui/react-use-controllable-state/node_modules/@radix-ui/react-use-callback-ref/dist/index.mjs
1412
+ import { useRef as $lwiWj$useRef2, useEffect as $lwiWj$useEffect2, useMemo as $lwiWj$useMemo2 } from "react";
1413
+ function $b1b2314f5f9a1d84$export$25bec8c6f54ee79a2(callback) {
1414
+ const callbackRef = $lwiWj$useRef2(callback);
1415
+ $lwiWj$useEffect2(() => {
1416
+ callbackRef.current = callback;
1417
+ });
1418
+ return $lwiWj$useMemo2(
1419
+ () => (...args) => {
1420
+ var _callbackRef$current;
1421
+ return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args);
1422
+ },
1423
+ []
1424
+ );
1425
+ }
1426
+ __name($b1b2314f5f9a1d84$export$25bec8c6f54ee79a2, "$b1b2314f5f9a1d84$export$25bec8c6f54ee79a");
1427
+
1428
+ // ../../node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
1429
+ function $71cd76cc60e0454e$export$6f32135080cb4c3({ prop, defaultProp, onChange = /* @__PURE__ */ __name(() => {
1430
+ }, "onChange") }) {
1431
+ const [uncontrolledProp, setUncontrolledProp] = $71cd76cc60e0454e$var$useUncontrolledState({
1432
+ defaultProp,
1433
+ onChange
1434
+ });
1435
+ const isControlled = prop !== void 0;
1436
+ const value1 = isControlled ? prop : uncontrolledProp;
1437
+ const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a2(onChange);
1438
+ const setValue = $bnPw9$useCallback((nextValue) => {
1439
+ if (isControlled) {
1440
+ const setter = nextValue;
1441
+ const value = typeof nextValue === "function" ? setter(prop) : nextValue;
1442
+ if (value !== prop) handleChange(value);
1443
+ } else setUncontrolledProp(nextValue);
1444
+ }, [
1445
+ isControlled,
1446
+ prop,
1447
+ setUncontrolledProp,
1448
+ handleChange
1449
+ ]);
1450
+ return [
1451
+ value1,
1452
+ setValue
1453
+ ];
1454
+ }
1455
+ __name($71cd76cc60e0454e$export$6f32135080cb4c3, "$71cd76cc60e0454e$export$6f32135080cb4c3");
1456
+ function $71cd76cc60e0454e$var$useUncontrolledState({ defaultProp, onChange }) {
1457
+ const uncontrolledState = $bnPw9$useState(defaultProp);
1458
+ const [value] = uncontrolledState;
1459
+ const prevValueRef = $bnPw9$useRef(value);
1460
+ const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a2(onChange);
1461
+ $bnPw9$useEffect(() => {
1462
+ if (prevValueRef.current !== value) {
1463
+ handleChange(value);
1464
+ prevValueRef.current = value;
1465
+ }
1466
+ }, [
1467
+ value,
1468
+ prevValueRef,
1469
+ handleChange
1470
+ ]);
1471
+ return uncontrolledState;
1472
+ }
1473
+ __name($71cd76cc60e0454e$var$useUncontrolledState, "$71cd76cc60e0454e$var$useUncontrolledState");
1474
+
1475
+ // ../../node_modules/@radix-ui/react-direction/dist/index.mjs
1476
+ import { createContext as $7Gjcd$createContext, createElement as $7Gjcd$createElement, useContext as $7Gjcd$useContext } from "react";
1477
+ var $f631663db3294ace$var$DirectionContext = $7Gjcd$createContext(void 0);
1478
+ function $f631663db3294ace$export$b39126d51d94e6f3(localDir) {
1479
+ const globalDir = $7Gjcd$useContext($f631663db3294ace$var$DirectionContext);
1480
+ return localDir || globalDir || "ltr";
1481
+ }
1482
+ __name($f631663db3294ace$export$b39126d51d94e6f3, "$f631663db3294ace$export$b39126d51d94e6f3");
1483
+
1484
+ // ../../node_modules/@radix-ui/react-roving-focus/dist/index.mjs
1485
+ var $d7bdfb9eb0fdf311$var$ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
1486
+ var $d7bdfb9eb0fdf311$var$EVENT_OPTIONS = {
1487
+ bubbles: false,
1488
+ cancelable: true
1489
+ };
1490
+ var $d7bdfb9eb0fdf311$var$GROUP_NAME = "RovingFocusGroup";
1491
+ var [$d7bdfb9eb0fdf311$var$Collection, $d7bdfb9eb0fdf311$var$useCollection, $d7bdfb9eb0fdf311$var$createCollectionScope] = $e02a7d9cb1dc128c$export$c74125a8e3af6bb2($d7bdfb9eb0fdf311$var$GROUP_NAME);
1492
+ var [$d7bdfb9eb0fdf311$var$createRovingFocusGroupContext, $d7bdfb9eb0fdf311$export$c7109489551a4f4] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($d7bdfb9eb0fdf311$var$GROUP_NAME, [
1493
+ $d7bdfb9eb0fdf311$var$createCollectionScope
1494
+ ]);
1495
+ var [$d7bdfb9eb0fdf311$var$RovingFocusProvider, $d7bdfb9eb0fdf311$var$useRovingFocusContext] = $d7bdfb9eb0fdf311$var$createRovingFocusGroupContext($d7bdfb9eb0fdf311$var$GROUP_NAME);
1496
+ var $d7bdfb9eb0fdf311$export$8699f7c8af148338 = $98Iye$forwardRef((props, forwardedRef) => {
1497
+ return $98Iye$createElement($d7bdfb9eb0fdf311$var$Collection.Provider, {
1498
+ scope: props.__scopeRovingFocusGroup
1499
+ }, $98Iye$createElement($d7bdfb9eb0fdf311$var$Collection.Slot, {
1500
+ scope: props.__scopeRovingFocusGroup
1501
+ }, $98Iye$createElement($d7bdfb9eb0fdf311$var$RovingFocusGroupImpl, _extends({}, props, {
1502
+ ref: forwardedRef
1503
+ }))));
1504
+ });
1505
+ Object.assign($d7bdfb9eb0fdf311$export$8699f7c8af148338, {
1506
+ displayName: $d7bdfb9eb0fdf311$var$GROUP_NAME
1507
+ });
1508
+ var $d7bdfb9eb0fdf311$var$RovingFocusGroupImpl = $98Iye$forwardRef((props, forwardedRef) => {
1509
+ const { __scopeRovingFocusGroup, orientation, loop = false, dir, currentTabStopId: currentTabStopIdProp, defaultCurrentTabStopId, onCurrentTabStopIdChange, onEntryFocus, ...groupProps } = props;
1510
+ const ref = $98Iye$useRef(null);
1511
+ const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d052(forwardedRef, ref);
1512
+ const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir);
1513
+ const [currentTabStopId = null, setCurrentTabStopId] = $71cd76cc60e0454e$export$6f32135080cb4c3({
1514
+ prop: currentTabStopIdProp,
1515
+ defaultProp: defaultCurrentTabStopId,
1516
+ onChange: onCurrentTabStopIdChange
1517
+ });
1518
+ const [isTabbingBackOut, setIsTabbingBackOut] = $98Iye$useState(false);
1519
+ const handleEntryFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onEntryFocus);
1520
+ const getItems = $d7bdfb9eb0fdf311$var$useCollection(__scopeRovingFocusGroup);
1521
+ const isClickFocusRef = $98Iye$useRef(false);
1522
+ const [focusableItemsCount, setFocusableItemsCount] = $98Iye$useState(0);
1523
+ $98Iye$useEffect(() => {
1524
+ const node = ref.current;
1525
+ if (node) {
1526
+ node.addEventListener($d7bdfb9eb0fdf311$var$ENTRY_FOCUS, handleEntryFocus);
1527
+ return () => node.removeEventListener($d7bdfb9eb0fdf311$var$ENTRY_FOCUS, handleEntryFocus);
1528
+ }
1529
+ }, [
1530
+ handleEntryFocus
1531
+ ]);
1532
+ return $98Iye$createElement($d7bdfb9eb0fdf311$var$RovingFocusProvider, {
1533
+ scope: __scopeRovingFocusGroup,
1534
+ orientation,
1535
+ dir: direction,
1536
+ loop,
1537
+ currentTabStopId,
1538
+ onItemFocus: $98Iye$useCallback(
1539
+ (tabStopId) => setCurrentTabStopId(tabStopId),
1540
+ [
1541
+ setCurrentTabStopId
1542
+ ]
1543
+ ),
1544
+ onItemShiftTab: $98Iye$useCallback(
1545
+ () => setIsTabbingBackOut(true),
1546
+ []
1547
+ ),
1548
+ onFocusableItemAdd: $98Iye$useCallback(
1549
+ () => setFocusableItemsCount(
1550
+ (prevCount) => prevCount + 1
1551
+ ),
1552
+ []
1553
+ ),
1554
+ onFocusableItemRemove: $98Iye$useCallback(
1555
+ () => setFocusableItemsCount(
1556
+ (prevCount) => prevCount - 1
1557
+ ),
1558
+ []
1559
+ )
1560
+ }, $98Iye$createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.div, _extends({
1561
+ tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0,
1562
+ "data-orientation": orientation
1563
+ }, groupProps, {
1564
+ ref: composedRefs,
1565
+ style: {
1566
+ outline: "none",
1567
+ ...props.style
1568
+ },
1569
+ onMouseDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onMouseDown, () => {
1570
+ isClickFocusRef.current = true;
1571
+ }),
1572
+ onFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocus, (event) => {
1573
+ const isKeyboardFocus = !isClickFocusRef.current;
1574
+ if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
1575
+ const entryFocusEvent = new CustomEvent($d7bdfb9eb0fdf311$var$ENTRY_FOCUS, $d7bdfb9eb0fdf311$var$EVENT_OPTIONS);
1576
+ event.currentTarget.dispatchEvent(entryFocusEvent);
1577
+ if (!entryFocusEvent.defaultPrevented) {
1578
+ const items = getItems().filter(
1579
+ (item) => item.focusable
1580
+ );
1581
+ const activeItem = items.find(
1582
+ (item) => item.active
1583
+ );
1584
+ const currentItem = items.find(
1585
+ (item) => item.id === currentTabStopId
1586
+ );
1587
+ const candidateItems = [
1588
+ activeItem,
1589
+ currentItem,
1590
+ ...items
1591
+ ].filter(Boolean);
1592
+ const candidateNodes = candidateItems.map(
1593
+ (item) => item.ref.current
1594
+ );
1595
+ $d7bdfb9eb0fdf311$var$focusFirst(candidateNodes);
1596
+ }
1597
+ }
1598
+ isClickFocusRef.current = false;
1599
+ }),
1600
+ onBlur: $e42e1063c40fb3ef$export$b9ecd428b558ff10(
1601
+ props.onBlur,
1602
+ () => setIsTabbingBackOut(false)
1603
+ )
1604
+ })));
1605
+ });
1606
+ var $d7bdfb9eb0fdf311$var$ITEM_NAME = "RovingFocusGroupItem";
1607
+ var $d7bdfb9eb0fdf311$export$ab9df7c53fe8454 = $98Iye$forwardRef((props, forwardedRef) => {
1608
+ const { __scopeRovingFocusGroup, focusable = true, active = false, tabStopId, ...itemProps } = props;
1609
+ const autoId = $1746a345f3d73bb7$export$f680877a34711e37();
1610
+ const id = tabStopId || autoId;
1611
+ const context = $d7bdfb9eb0fdf311$var$useRovingFocusContext($d7bdfb9eb0fdf311$var$ITEM_NAME, __scopeRovingFocusGroup);
1612
+ const isCurrentTabStop = context.currentTabStopId === id;
1613
+ const getItems = $d7bdfb9eb0fdf311$var$useCollection(__scopeRovingFocusGroup);
1614
+ const { onFocusableItemAdd, onFocusableItemRemove } = context;
1615
+ $98Iye$useEffect(() => {
1616
+ if (focusable) {
1617
+ onFocusableItemAdd();
1618
+ return () => onFocusableItemRemove();
1619
+ }
1620
+ }, [
1621
+ focusable,
1622
+ onFocusableItemAdd,
1623
+ onFocusableItemRemove
1624
+ ]);
1625
+ return $98Iye$createElement($d7bdfb9eb0fdf311$var$Collection.ItemSlot, {
1626
+ scope: __scopeRovingFocusGroup,
1627
+ id,
1628
+ focusable,
1629
+ active
1630
+ }, $98Iye$createElement($8927f6f2acc4f386$export$250ffa63cdc0d034.span, _extends({
1631
+ tabIndex: isCurrentTabStop ? 0 : -1,
1632
+ "data-orientation": context.orientation
1633
+ }, itemProps, {
1634
+ ref: forwardedRef,
1635
+ onMouseDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onMouseDown, (event) => {
1636
+ if (!focusable) event.preventDefault();
1637
+ else context.onItemFocus(id);
1638
+ }),
1639
+ onFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(
1640
+ props.onFocus,
1641
+ () => context.onItemFocus(id)
1642
+ ),
1643
+ onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown, (event) => {
1644
+ if (event.key === "Tab" && event.shiftKey) {
1645
+ context.onItemShiftTab();
1646
+ return;
1647
+ }
1648
+ if (event.target !== event.currentTarget) return;
1649
+ const focusIntent = $d7bdfb9eb0fdf311$var$getFocusIntent(event, context.orientation, context.dir);
1650
+ if (focusIntent !== void 0) {
1651
+ event.preventDefault();
1652
+ const items = getItems().filter(
1653
+ (item) => item.focusable
1654
+ );
1655
+ let candidateNodes = items.map(
1656
+ (item) => item.ref.current
1657
+ );
1658
+ if (focusIntent === "last") candidateNodes.reverse();
1659
+ else if (focusIntent === "prev" || focusIntent === "next") {
1660
+ if (focusIntent === "prev") candidateNodes.reverse();
1661
+ const currentIndex = candidateNodes.indexOf(event.currentTarget);
1662
+ candidateNodes = context.loop ? $d7bdfb9eb0fdf311$var$wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1);
1663
+ }
1664
+ setTimeout(
1665
+ () => $d7bdfb9eb0fdf311$var$focusFirst(candidateNodes)
1666
+ );
1667
+ }
1668
+ })
1669
+ })));
1670
+ });
1671
+ Object.assign($d7bdfb9eb0fdf311$export$ab9df7c53fe8454, {
1672
+ displayName: $d7bdfb9eb0fdf311$var$ITEM_NAME
1673
+ });
1674
+ var $d7bdfb9eb0fdf311$var$MAP_KEY_TO_FOCUS_INTENT = {
1675
+ ArrowLeft: "prev",
1676
+ ArrowUp: "prev",
1677
+ ArrowRight: "next",
1678
+ ArrowDown: "next",
1679
+ PageUp: "first",
1680
+ Home: "first",
1681
+ PageDown: "last",
1682
+ End: "last"
1683
+ };
1684
+ function $d7bdfb9eb0fdf311$var$getDirectionAwareKey(key, dir) {
1685
+ if (dir !== "rtl") return key;
1686
+ return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
1687
+ }
1688
+ __name($d7bdfb9eb0fdf311$var$getDirectionAwareKey, "$d7bdfb9eb0fdf311$var$getDirectionAwareKey");
1689
+ function $d7bdfb9eb0fdf311$var$getFocusIntent(event, orientation, dir) {
1690
+ const key = $d7bdfb9eb0fdf311$var$getDirectionAwareKey(event.key, dir);
1691
+ if (orientation === "vertical" && [
1692
+ "ArrowLeft",
1693
+ "ArrowRight"
1694
+ ].includes(key)) return void 0;
1695
+ if (orientation === "horizontal" && [
1696
+ "ArrowUp",
1697
+ "ArrowDown"
1698
+ ].includes(key)) return void 0;
1699
+ return $d7bdfb9eb0fdf311$var$MAP_KEY_TO_FOCUS_INTENT[key];
1700
+ }
1701
+ __name($d7bdfb9eb0fdf311$var$getFocusIntent, "$d7bdfb9eb0fdf311$var$getFocusIntent");
1702
+ function $d7bdfb9eb0fdf311$var$focusFirst(candidates) {
1703
+ const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
1704
+ for (const candidate of candidates) {
1705
+ if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
1706
+ candidate.focus();
1707
+ if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
1708
+ }
1709
+ }
1710
+ __name($d7bdfb9eb0fdf311$var$focusFirst, "$d7bdfb9eb0fdf311$var$focusFirst");
1711
+ function $d7bdfb9eb0fdf311$var$wrapArray(array, startIndex) {
1712
+ return array.map(
1713
+ (_, index) => array[(startIndex + index) % array.length]
1714
+ );
1715
+ }
1716
+ __name($d7bdfb9eb0fdf311$var$wrapArray, "$d7bdfb9eb0fdf311$var$wrapArray");
1717
+ var $d7bdfb9eb0fdf311$export$be92b6f5f03c0fe9 = $d7bdfb9eb0fdf311$export$8699f7c8af148338;
1718
+ var $d7bdfb9eb0fdf311$export$6d08773d2e66f8f2 = $d7bdfb9eb0fdf311$export$ab9df7c53fe8454;
1719
+
1720
+ // ../../node_modules/@radix-ui/react-presence/dist/index.mjs
1721
+ 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";
1722
+ import { flushSync as $iqq3r$flushSync } from "react-dom";
1723
+
1724
+ // ../../node_modules/@radix-ui/react-presence/node_modules/@radix-ui/react-compose-refs/dist/index.mjs
1725
+ import { useCallback as $3vqmr$useCallback3 } from "react";
1726
+ function $6ed0406888f73fc4$var$setRef3(ref, value) {
1727
+ if (typeof ref === "function") ref(value);
1728
+ else if (ref !== null && ref !== void 0) ref.current = value;
1729
+ }
1730
+ __name($6ed0406888f73fc4$var$setRef3, "$6ed0406888f73fc4$var$setRef");
1731
+ function $6ed0406888f73fc4$export$43e446d32b3d21af3(...refs) {
1732
+ return (node) => refs.forEach(
1733
+ (ref) => $6ed0406888f73fc4$var$setRef3(ref, node)
1734
+ );
1735
+ }
1736
+ __name($6ed0406888f73fc4$export$43e446d32b3d21af3, "$6ed0406888f73fc4$export$43e446d32b3d21af");
1737
+ function $6ed0406888f73fc4$export$c7b2cbe3552a0d053(...refs) {
1738
+ return $3vqmr$useCallback3($6ed0406888f73fc4$export$43e446d32b3d21af3(...refs), refs);
1739
+ }
1740
+ __name($6ed0406888f73fc4$export$c7b2cbe3552a0d053, "$6ed0406888f73fc4$export$c7b2cbe3552a0d05");
1741
+
1742
+ // ../../node_modules/@radix-ui/react-presence/node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
1743
+ import { useLayoutEffect as $dxlwH$useLayoutEffect2 } from "react";
1744
+ var $9f79659886946c16$export$e5c5a5f917a5871c2 = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? $dxlwH$useLayoutEffect2 : () => {
1745
+ };
1746
+
1747
+ // ../../node_modules/@radix-ui/react-presence/dist/index.mjs
1748
+ function $fe963b355347cc68$export$3e6543de14f8614f(initialState, machine) {
1749
+ return $iqq3r$useReducer((state, event) => {
1750
+ const nextState = machine[state][event];
1751
+ return nextState !== null && nextState !== void 0 ? nextState : state;
1752
+ }, initialState);
1753
+ }
1754
+ __name($fe963b355347cc68$export$3e6543de14f8614f, "$fe963b355347cc68$export$3e6543de14f8614f");
1755
+ var $921a889cee6df7e8$export$99c2b779aa4e8b8b = /* @__PURE__ */ __name((props) => {
1756
+ const { present, children } = props;
1757
+ const presence = $921a889cee6df7e8$var$usePresence(present);
1758
+ const child = typeof children === "function" ? children({
1759
+ present: presence.isPresent
1760
+ }) : $iqq3r$Children.only(children);
1761
+ const ref = $6ed0406888f73fc4$export$c7b2cbe3552a0d053(presence.ref, child.ref);
1762
+ const forceMount = typeof children === "function";
1763
+ return forceMount || presence.isPresent ? $iqq3r$cloneElement(child, {
1764
+ ref
1765
+ }) : null;
1766
+ }, "$921a889cee6df7e8$export$99c2b779aa4e8b8b");
1767
+ $921a889cee6df7e8$export$99c2b779aa4e8b8b.displayName = "Presence";
1768
+ function $921a889cee6df7e8$var$usePresence(present) {
1769
+ const [node1, setNode] = $iqq3r$useState();
1770
+ const stylesRef = $iqq3r$useRef({});
1771
+ const prevPresentRef = $iqq3r$useRef(present);
1772
+ const prevAnimationNameRef = $iqq3r$useRef("none");
1773
+ const initialState = present ? "mounted" : "unmounted";
1774
+ const [state, send] = $fe963b355347cc68$export$3e6543de14f8614f(initialState, {
1775
+ mounted: {
1776
+ UNMOUNT: "unmounted",
1777
+ ANIMATION_OUT: "unmountSuspended"
1778
+ },
1779
+ unmountSuspended: {
1780
+ MOUNT: "mounted",
1781
+ ANIMATION_END: "unmounted"
1782
+ },
1783
+ unmounted: {
1784
+ MOUNT: "mounted"
1785
+ }
1786
+ });
1787
+ $iqq3r$useEffect(() => {
1788
+ const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
1789
+ prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
1790
+ }, [
1791
+ state
1792
+ ]);
1793
+ $9f79659886946c16$export$e5c5a5f917a5871c2(() => {
1794
+ const styles = stylesRef.current;
1795
+ const wasPresent = prevPresentRef.current;
1796
+ const hasPresentChanged = wasPresent !== present;
1797
+ if (hasPresentChanged) {
1798
+ const prevAnimationName = prevAnimationNameRef.current;
1799
+ const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(styles);
1800
+ if (present) send("MOUNT");
1801
+ else if (currentAnimationName === "none" || (styles === null || styles === void 0 ? void 0 : styles.display) === "none")
1802
+ send("UNMOUNT");
1803
+ else {
1804
+ const isAnimating = prevAnimationName !== currentAnimationName;
1805
+ if (wasPresent && isAnimating) send("ANIMATION_OUT");
1806
+ else send("UNMOUNT");
1807
+ }
1808
+ prevPresentRef.current = present;
1809
+ }
1810
+ }, [
1811
+ present,
1812
+ send
1813
+ ]);
1814
+ $9f79659886946c16$export$e5c5a5f917a5871c2(() => {
1815
+ if (node1) {
1816
+ const handleAnimationEnd = /* @__PURE__ */ __name((event) => {
1817
+ const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
1818
+ const isCurrentAnimation = currentAnimationName.includes(event.animationName);
1819
+ if (event.target === node1 && isCurrentAnimation)
1820
+ $iqq3r$flushSync(
1821
+ () => send("ANIMATION_END")
1822
+ );
1823
+ }, "handleAnimationEnd");
1824
+ const handleAnimationStart = /* @__PURE__ */ __name((event) => {
1825
+ if (event.target === node1)
1826
+ prevAnimationNameRef.current = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
1827
+ }, "handleAnimationStart");
1828
+ node1.addEventListener("animationstart", handleAnimationStart);
1829
+ node1.addEventListener("animationcancel", handleAnimationEnd);
1830
+ node1.addEventListener("animationend", handleAnimationEnd);
1831
+ return () => {
1832
+ node1.removeEventListener("animationstart", handleAnimationStart);
1833
+ node1.removeEventListener("animationcancel", handleAnimationEnd);
1834
+ node1.removeEventListener("animationend", handleAnimationEnd);
1835
+ };
1836
+ } else
1837
+ send("ANIMATION_END");
1838
+ }, [
1839
+ node1,
1840
+ send
1841
+ ]);
1842
+ return {
1843
+ isPresent: [
1844
+ "mounted",
1845
+ "unmountSuspended"
1846
+ ].includes(state),
1847
+ ref: $iqq3r$useCallback((node) => {
1848
+ if (node) stylesRef.current = getComputedStyle(node);
1849
+ setNode(node);
1850
+ }, [])
1851
+ };
1852
+ }
1853
+ __name($921a889cee6df7e8$var$usePresence, "$921a889cee6df7e8$var$usePresence");
1854
+ function $921a889cee6df7e8$var$getAnimationName(styles) {
1855
+ return (styles === null || styles === void 0 ? void 0 : styles.animationName) || "none";
1856
+ }
1857
+ __name($921a889cee6df7e8$var$getAnimationName, "$921a889cee6df7e8$var$getAnimationName");
1858
+
1859
+ // ../../node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive/dist/index.mjs
1860
+ import { forwardRef as $4q5Fq$forwardRef2, useEffect as $4q5Fq$useEffect2, createElement as $4q5Fq$createElement2 } from "react";
1861
+ import { flushSync as $4q5Fq$flushSync2 } from "react-dom";
1862
+
1863
+ // ../../node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-slot/dist/index.mjs
1864
+ 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";
1865
+
1866
+ // ../../node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-compose-refs/dist/index.mjs
1867
+ import { useCallback as $3vqmr$useCallback4 } from "react";
1868
+ function $6ed0406888f73fc4$var$setRef4(ref, value) {
1869
+ if (typeof ref === "function") ref(value);
1870
+ else if (ref !== null && ref !== void 0) ref.current = value;
1871
+ }
1872
+ __name($6ed0406888f73fc4$var$setRef4, "$6ed0406888f73fc4$var$setRef");
1873
+ function $6ed0406888f73fc4$export$43e446d32b3d21af4(...refs) {
1874
+ return (node) => refs.forEach(
1875
+ (ref) => $6ed0406888f73fc4$var$setRef4(ref, node)
1876
+ );
1877
+ }
1878
+ __name($6ed0406888f73fc4$export$43e446d32b3d21af4, "$6ed0406888f73fc4$export$43e446d32b3d21af");
1879
+
1880
+ // ../../node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-slot/dist/index.mjs
1881
+ var $5e63c961fc1ce211$export$8c6ed5c666ac13603 = $9IrjX$forwardRef3((props, forwardedRef) => {
1882
+ const { children, ...slotProps } = props;
1883
+ const childrenArray = $9IrjX$Children3.toArray(children);
1884
+ const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable3);
1885
+ if (slottable) {
1886
+ const newElement = slottable.props.children;
1887
+ const newChildren = childrenArray.map((child) => {
1888
+ if (child === slottable) {
1889
+ if ($9IrjX$Children3.count(newElement) > 1) return $9IrjX$Children3.only(null);
1890
+ return $9IrjX$isValidElement3(newElement) ? newElement.props.children : null;
1891
+ } else return child;
1892
+ });
1893
+ return $9IrjX$createElement3($5e63c961fc1ce211$var$SlotClone3, _extends({}, slotProps, {
1894
+ ref: forwardedRef
1895
+ }), $9IrjX$isValidElement3(newElement) ? $9IrjX$cloneElement3(newElement, void 0, newChildren) : null);
1896
+ }
1897
+ return $9IrjX$createElement3($5e63c961fc1ce211$var$SlotClone3, _extends({}, slotProps, {
1898
+ ref: forwardedRef
1899
+ }), children);
1900
+ });
1901
+ $5e63c961fc1ce211$export$8c6ed5c666ac13603.displayName = "Slot";
1902
+ var $5e63c961fc1ce211$var$SlotClone3 = $9IrjX$forwardRef3((props, forwardedRef) => {
1903
+ const { children, ...slotProps } = props;
1904
+ if ($9IrjX$isValidElement3(children)) return $9IrjX$cloneElement3(children, {
1905
+ ...$5e63c961fc1ce211$var$mergeProps3(slotProps, children.props),
1906
+ ref: forwardedRef ? $6ed0406888f73fc4$export$43e446d32b3d21af4(forwardedRef, children.ref) : children.ref
1907
+ });
1908
+ return $9IrjX$Children3.count(children) > 1 ? $9IrjX$Children3.only(null) : null;
1909
+ });
1910
+ $5e63c961fc1ce211$var$SlotClone3.displayName = "SlotClone";
1911
+ var $5e63c961fc1ce211$export$d9f1ccf0bdb05d453 = /* @__PURE__ */ __name(({ children }) => {
1912
+ return $9IrjX$createElement3($9IrjX$Fragment3, null, children);
1913
+ }, "$5e63c961fc1ce211$export$d9f1ccf0bdb05d45");
1914
+ function $5e63c961fc1ce211$var$isSlottable3(child) {
1915
+ return $9IrjX$isValidElement3(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d453;
1916
+ }
1917
+ __name($5e63c961fc1ce211$var$isSlottable3, "$5e63c961fc1ce211$var$isSlottable");
1918
+ function $5e63c961fc1ce211$var$mergeProps3(slotProps, childProps) {
1919
+ const overrideProps = {
1920
+ ...childProps
1921
+ };
1922
+ for (const propName in childProps) {
1923
+ const slotPropValue = slotProps[propName];
1924
+ const childPropValue = childProps[propName];
1925
+ const isHandler = /^on[A-Z]/.test(propName);
1926
+ if (isHandler) {
1927
+ if (slotPropValue && childPropValue) overrideProps[propName] = (...args) => {
1928
+ childPropValue(...args);
1929
+ slotPropValue(...args);
1930
+ };
1931
+ else if (slotPropValue) overrideProps[propName] = slotPropValue;
1932
+ } else if (propName === "style") overrideProps[propName] = {
1933
+ ...slotPropValue,
1934
+ ...childPropValue
1935
+ };
1936
+ else if (propName === "className") overrideProps[propName] = [
1937
+ slotPropValue,
1938
+ childPropValue
1939
+ ].filter(Boolean).join(" ");
1940
+ }
1941
+ return {
1942
+ ...slotProps,
1943
+ ...overrideProps
1944
+ };
1945
+ }
1946
+ __name($5e63c961fc1ce211$var$mergeProps3, "$5e63c961fc1ce211$var$mergeProps");
1947
+
1948
+ // ../../node_modules/@radix-ui/react-tabs/node_modules/@radix-ui/react-primitive/dist/index.mjs
1949
+ var $8927f6f2acc4f386$var$NODES2 = [
1950
+ "a",
1951
+ "button",
1952
+ "div",
1953
+ "form",
1954
+ "h2",
1955
+ "h3",
1956
+ "img",
1957
+ "input",
1958
+ "label",
1959
+ "li",
1960
+ "nav",
1961
+ "ol",
1962
+ "p",
1963
+ "span",
1964
+ "svg",
1965
+ "ul"
1966
+ ];
1967
+ var $8927f6f2acc4f386$export$250ffa63cdc0d0342 = $8927f6f2acc4f386$var$NODES2.reduce((primitive, node) => {
1968
+ const Node = $4q5Fq$forwardRef2((props, forwardedRef) => {
1969
+ const { asChild, ...primitiveProps } = props;
1970
+ const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac13603 : node;
1971
+ $4q5Fq$useEffect2(() => {
1972
+ window[Symbol.for("radix-ui")] = true;
1973
+ }, []);
1974
+ return $4q5Fq$createElement2(Comp, _extends({}, primitiveProps, {
1975
+ ref: forwardedRef
1976
+ }));
1977
+ });
1978
+ Node.displayName = `Primitive.${node}`;
1979
+ return {
1980
+ ...primitive,
1981
+ [node]: Node
1982
+ };
1983
+ }, {});
1984
+
1985
+ // ../../node_modules/@radix-ui/react-tabs/dist/index.mjs
1986
+ var $69cb30bb0017df05$var$TABS_NAME = "Tabs";
1987
+ var [$69cb30bb0017df05$var$createTabsContext, $69cb30bb0017df05$export$355f5bd209d7b13a] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($69cb30bb0017df05$var$TABS_NAME, [
1988
+ $d7bdfb9eb0fdf311$export$c7109489551a4f4
1989
+ ]);
1990
+ var $69cb30bb0017df05$var$useRovingFocusGroupScope = $d7bdfb9eb0fdf311$export$c7109489551a4f4();
1991
+ var [$69cb30bb0017df05$var$TabsProvider, $69cb30bb0017df05$var$useTabsContext] = $69cb30bb0017df05$var$createTabsContext($69cb30bb0017df05$var$TABS_NAME);
1992
+ var $69cb30bb0017df05$export$b2539bed5023c21c = $1IHzk$forwardRef((props, forwardedRef) => {
1993
+ const { __scopeTabs, value: valueProp, onValueChange, defaultValue, orientation = "horizontal", dir, activationMode = "automatic", ...tabsProps } = props;
1994
+ const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir);
1995
+ const [value, setValue] = $71cd76cc60e0454e$export$6f32135080cb4c3({
1996
+ prop: valueProp,
1997
+ onChange: onValueChange,
1998
+ defaultProp: defaultValue
1999
+ });
2000
+ return $1IHzk$createElement($69cb30bb0017df05$var$TabsProvider, {
2001
+ scope: __scopeTabs,
2002
+ baseId: $1746a345f3d73bb7$export$f680877a34711e37(),
2003
+ value,
2004
+ onValueChange: setValue,
2005
+ orientation,
2006
+ dir: direction,
2007
+ activationMode
2008
+ }, $1IHzk$createElement($8927f6f2acc4f386$export$250ffa63cdc0d0342.div, _extends({
2009
+ dir: direction,
2010
+ "data-orientation": orientation
2011
+ }, tabsProps, {
2012
+ ref: forwardedRef
2013
+ })));
2014
+ });
2015
+ Object.assign($69cb30bb0017df05$export$b2539bed5023c21c, {
2016
+ displayName: $69cb30bb0017df05$var$TABS_NAME
2017
+ });
2018
+ var $69cb30bb0017df05$var$TAB_LIST_NAME = "TabsList";
2019
+ var $69cb30bb0017df05$export$9712d22edc0d78c1 = $1IHzk$forwardRef((props, forwardedRef) => {
2020
+ const { __scopeTabs, loop = true, ...listProps } = props;
2021
+ const context = $69cb30bb0017df05$var$useTabsContext($69cb30bb0017df05$var$TAB_LIST_NAME, __scopeTabs);
2022
+ const rovingFocusGroupScope = $69cb30bb0017df05$var$useRovingFocusGroupScope(__scopeTabs);
2023
+ return $1IHzk$createElement($d7bdfb9eb0fdf311$export$be92b6f5f03c0fe9, _extends({
2024
+ asChild: true
2025
+ }, rovingFocusGroupScope, {
2026
+ orientation: context.orientation,
2027
+ dir: context.dir,
2028
+ loop
2029
+ }), $1IHzk$createElement($8927f6f2acc4f386$export$250ffa63cdc0d0342.div, _extends({
2030
+ role: "tablist",
2031
+ "aria-orientation": context.orientation
2032
+ }, listProps, {
2033
+ ref: forwardedRef
2034
+ })));
2035
+ });
2036
+ Object.assign($69cb30bb0017df05$export$9712d22edc0d78c1, {
2037
+ displayName: $69cb30bb0017df05$var$TAB_LIST_NAME
2038
+ });
2039
+ var $69cb30bb0017df05$var$TRIGGER_NAME = "TabsTrigger";
2040
+ var $69cb30bb0017df05$export$8114b9fdfdf9f3ba = $1IHzk$forwardRef((props, forwardedRef) => {
2041
+ const { __scopeTabs, value, disabled = false, ...triggerProps } = props;
2042
+ const context = $69cb30bb0017df05$var$useTabsContext($69cb30bb0017df05$var$TRIGGER_NAME, __scopeTabs);
2043
+ const rovingFocusGroupScope = $69cb30bb0017df05$var$useRovingFocusGroupScope(__scopeTabs);
2044
+ const triggerId = $69cb30bb0017df05$var$makeTriggerId(context.baseId, value);
2045
+ const contentId = $69cb30bb0017df05$var$makeContentId(context.baseId, value);
2046
+ const isSelected = value === context.value;
2047
+ return $1IHzk$createElement($d7bdfb9eb0fdf311$export$6d08773d2e66f8f2, _extends({
2048
+ asChild: true
2049
+ }, rovingFocusGroupScope, {
2050
+ focusable: !disabled,
2051
+ active: isSelected
2052
+ }), $1IHzk$createElement($8927f6f2acc4f386$export$250ffa63cdc0d0342.button, _extends({
2053
+ type: "button",
2054
+ role: "tab",
2055
+ "aria-selected": isSelected,
2056
+ "aria-controls": contentId,
2057
+ "data-state": isSelected ? "active" : "inactive",
2058
+ "data-disabled": disabled ? "" : void 0,
2059
+ disabled,
2060
+ id: triggerId
2061
+ }, triggerProps, {
2062
+ ref: forwardedRef,
2063
+ onMouseDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onMouseDown, (event) => {
2064
+ if (!disabled && event.button === 0 && event.ctrlKey === false) context.onValueChange(value);
2065
+ else
2066
+ event.preventDefault();
2067
+ }),
2068
+ onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown, (event) => {
2069
+ if ([
2070
+ " ",
2071
+ "Enter"
2072
+ ].includes(event.key)) context.onValueChange(value);
2073
+ }),
2074
+ onFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocus, () => {
2075
+ const isAutomaticActivation = context.activationMode !== "manual";
2076
+ if (!isSelected && !disabled && isAutomaticActivation) context.onValueChange(value);
2077
+ })
2078
+ })));
2079
+ });
2080
+ Object.assign($69cb30bb0017df05$export$8114b9fdfdf9f3ba, {
2081
+ displayName: $69cb30bb0017df05$var$TRIGGER_NAME
2082
+ });
2083
+ var $69cb30bb0017df05$var$CONTENT_NAME = "TabsContent";
2084
+ var $69cb30bb0017df05$export$bd905d70e8fd2ebb = $1IHzk$forwardRef((props, forwardedRef) => {
2085
+ const { __scopeTabs, value, forceMount, children, ...contentProps } = props;
2086
+ const context = $69cb30bb0017df05$var$useTabsContext($69cb30bb0017df05$var$CONTENT_NAME, __scopeTabs);
2087
+ const triggerId = $69cb30bb0017df05$var$makeTriggerId(context.baseId, value);
2088
+ const contentId = $69cb30bb0017df05$var$makeContentId(context.baseId, value);
2089
+ const isSelected = value === context.value;
2090
+ const isMountAnimationPreventedRef = $1IHzk$useRef(isSelected);
2091
+ $1IHzk$useEffect(() => {
2092
+ const rAF = requestAnimationFrame(
2093
+ () => isMountAnimationPreventedRef.current = false
2094
+ );
2095
+ return () => cancelAnimationFrame(rAF);
2096
+ }, []);
2097
+ return $1IHzk$createElement(
2098
+ $921a889cee6df7e8$export$99c2b779aa4e8b8b,
2099
+ {
2100
+ present: forceMount || isSelected
2101
+ },
2102
+ ({ present }) => $1IHzk$createElement($8927f6f2acc4f386$export$250ffa63cdc0d0342.div, _extends({
2103
+ "data-state": isSelected ? "active" : "inactive",
2104
+ "data-orientation": context.orientation,
2105
+ role: "tabpanel",
2106
+ "aria-labelledby": triggerId,
2107
+ hidden: !present,
2108
+ id: contentId,
2109
+ tabIndex: 0
2110
+ }, contentProps, {
2111
+ ref: forwardedRef,
2112
+ style: {
2113
+ ...props.style,
2114
+ animationDuration: isMountAnimationPreventedRef.current ? "0s" : void 0
2115
+ }
2116
+ }), present && children)
2117
+ );
2118
+ });
2119
+ Object.assign($69cb30bb0017df05$export$bd905d70e8fd2ebb, {
2120
+ displayName: $69cb30bb0017df05$var$CONTENT_NAME
2121
+ });
2122
+ function $69cb30bb0017df05$var$makeTriggerId(baseId, value) {
2123
+ return `${baseId}-trigger-${value}`;
2124
+ }
2125
+ __name($69cb30bb0017df05$var$makeTriggerId, "$69cb30bb0017df05$var$makeTriggerId");
2126
+ function $69cb30bb0017df05$var$makeContentId(baseId, value) {
2127
+ return `${baseId}-content-${value}`;
2128
+ }
2129
+ __name($69cb30bb0017df05$var$makeContentId, "$69cb30bb0017df05$var$makeContentId");
2130
+ var $69cb30bb0017df05$export$be92b6f5f03c0fe9 = $69cb30bb0017df05$export$b2539bed5023c21c;
2131
+ var $69cb30bb0017df05$export$54c2e3dc7acea9f5 = $69cb30bb0017df05$export$9712d22edc0d78c1;
2132
+ var $69cb30bb0017df05$export$41fb9f06171c75f4 = $69cb30bb0017df05$export$8114b9fdfdf9f3ba;
2133
+ var $69cb30bb0017df05$export$7c6e2c02157bb7d2 = $69cb30bb0017df05$export$bd905d70e8fd2ebb;
2134
+
2135
+ // src/components/Report/Details.tsx
2136
+ import { styled } from "storybook/theming";
2137
+ var StyledSyntaxHighlighter = styled(SyntaxHighlighter)(
2138
+ ({ theme: theme2 }) => ({
2139
+ fontSize: theme2.typography.size.s1
2140
+ }),
2141
+ ({ language }) => (
2142
+ // We appended ' {}' to the selector in order to get proper syntax highlighting. This rule hides the last 3 spans
2143
+ // (one character each) in the displayed output. Only siblings of .selector (the actual CSS selector characters)
2144
+ // are targeted so that the code comment line isn't affected.
2145
+ language === "css" && {
2146
+ ".selector ~ span:nth-last-of-type(-n+3)": {
2147
+ display: "none"
2148
+ }
2149
+ }
2150
+ )
2151
+ );
2152
+ var Info = styled.div({
2153
+ display: "flex",
2154
+ flexDirection: "column"
2155
+ });
2156
+ var RuleId = styled.div(({ theme: theme2 }) => ({
2157
+ display: "block",
2158
+ color: theme2.textMutedColor,
2159
+ fontFamily: theme2.typography.fonts.mono,
2160
+ fontSize: theme2.typography.size.s1,
2161
+ marginTop: -8,
2162
+ marginBottom: 12,
2163
+ "@container (min-width: 800px)": {
2164
+ display: "none"
2165
+ }
2166
+ }));
2167
+ var Description = styled.p({
2168
+ margin: 0
2169
+ });
2170
+ var Wrapper = styled.div({
2171
+ display: "flex",
2172
+ flexDirection: "column",
2173
+ padding: "0 15px 20px 15px",
2174
+ gap: 20
2175
+ });
2176
+ var Columns = styled.div({
2177
+ gap: 15,
2178
+ "@container (min-width: 800px)": {
2179
+ display: "grid",
2180
+ gridTemplateColumns: "50% 50%"
2181
+ }
2182
+ });
2183
+ var Content = styled.div(({ theme: theme2, side }) => ({
2184
+ display: side === "left" ? "flex" : "none",
2185
+ flexDirection: "column",
2186
+ gap: 15,
2187
+ margin: side === "left" ? "15px 0" : 0,
2188
+ padding: side === "left" ? "0 15px" : 0,
2189
+ borderLeft: side === "left" ? `1px solid ${theme2.color.border}` : "none",
2190
+ "&:focus-visible": {
2191
+ outline: "none",
2192
+ borderRadius: 4,
2193
+ boxShadow: `0 0 0 1px inset ${theme2.color.secondary}`
2194
+ },
2195
+ "@container (min-width: 800px)": {
2196
+ display: side === "left" ? "none" : "flex"
2197
+ }
2198
+ }));
2199
+ var Item = styled(Button)(({ theme: theme2 }) => ({
2200
+ fontFamily: theme2.typography.fonts.mono,
2201
+ fontWeight: theme2.typography.weight.regular,
2202
+ color: theme2.textMutedColor,
2203
+ height: 40,
2204
+ overflow: "hidden",
2205
+ textOverflow: "ellipsis",
2206
+ whiteSpace: "nowrap",
2207
+ display: "block",
2208
+ width: "100%",
2209
+ textAlign: "left",
2210
+ padding: "0 12px",
2211
+ '&[data-state="active"]': {
2212
+ color: theme2.color.secondary,
2213
+ backgroundColor: theme2.background.hoverable
2214
+ }
2215
+ }));
2216
+ var Messages = styled.div({
2217
+ display: "flex",
2218
+ flexDirection: "column",
2219
+ gap: 10
2220
+ });
2221
+ var Actions = styled.div({
2222
+ display: "flex",
2223
+ gap: 10
2224
+ });
2225
+ var CopyButton = /* @__PURE__ */ __name(({ onClick }) => {
2226
+ const [copied, setCopied] = useState3(false);
2227
+ const handleClick = useCallback2(() => {
2228
+ onClick();
2229
+ setCopied(true);
2230
+ const timeout = setTimeout(() => setCopied(false), 2e3);
2231
+ return () => clearTimeout(timeout);
2232
+ }, [onClick]);
2233
+ return React2.createElement(Button, { onClick: handleClick }, copied ? React2.createElement(CheckIcon, null) : React2.createElement(CopyIcon, null), " ", copied ? "Copied" : "Copy link");
2234
+ }, "CopyButton");
2235
+ 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(
2236
+ $69cb30bb0017df05$export$be92b6f5f03c0fe9,
2237
+ {
2238
+ defaultValue: selection,
2239
+ orientation: "vertical",
2240
+ value: selection,
2241
+ onValueChange: handleSelectionChange,
2242
+ asChild: true
2243
+ },
2244
+ React2.createElement(Columns, null, React2.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, { "aria-label": type }, item.nodes.map((node, index) => {
2245
+ const key = `${type}.${item.id}.${index + 1}`;
2246
+ 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))));
2247
+ })), item.nodes.map((node, index) => {
2248
+ const key = `${type}.${item.id}.${index + 1}`;
2249
+ return React2.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { key, value: key, asChild: true }, React2.createElement(Content, { side: "right" }, getContent(node)));
2250
+ }))
2251
+ )), "Details");
2252
+ function getContent(node) {
2253
+ const { handleCopyLink, handleJumpToElement } = useA11yContext();
2254
+ const { any, all, none, html, target } = node;
2255
+ const rules = [...any, ...all, ...none];
2256
+ 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(
2257
+ StyledSyntaxHighlighter,
2258
+ {
2259
+ language: "jsx",
2260
+ wrapLongLines: true
2261
+ },
2262
+ `/* element */
2263
+ ${html}`
2264
+ ), React2.createElement(
2265
+ StyledSyntaxHighlighter,
2266
+ {
2267
+ language: "css",
2268
+ wrapLongLines: true
2269
+ },
2270
+ `/* selector */
2271
+ ${target} {}`
2272
+ ));
2273
+ }
2274
+ __name(getContent, "getContent");
2275
+
2276
+ // src/components/Report/Report.tsx
2277
+ var impactStatus = {
2278
+ minor: "neutral",
2279
+ moderate: "warning",
2280
+ serious: "negative",
2281
+ critical: "critical"
2282
+ };
2283
+ var impactLabels = {
2284
+ minor: "Minor",
2285
+ moderate: "Moderate",
2286
+ serious: "Serious",
2287
+ critical: "Critical"
2288
+ };
2289
+ var Wrapper2 = styled2.div(({ theme: theme2 }) => ({
2290
+ display: "flex",
2291
+ flexDirection: "column",
2292
+ width: "100%",
2293
+ borderBottom: `1px solid ${theme2.appBorderColor}`,
2294
+ containerType: "inline-size",
2295
+ fontSize: theme2.typography.size.s2
2296
+ }));
2297
+ var Icon = styled2(ChevronSmallDownIcon)({
2298
+ transition: "transform 0.1s ease-in-out"
2299
+ });
2300
+ var HeaderBar = styled2.div(({ theme: theme2 }) => ({
2301
+ display: "flex",
2302
+ justifyContent: "space-between",
2303
+ alignItems: "center",
2304
+ gap: 6,
2305
+ padding: "6px 10px 6px 15px",
2306
+ minHeight: 40,
2307
+ background: "none",
2308
+ color: "inherit",
2309
+ textAlign: "left",
2310
+ cursor: "pointer",
2311
+ width: "100%",
2312
+ "&:hover": {
2313
+ color: theme2.color.secondary
2314
+ }
2315
+ }));
2316
+ var Title = styled2.div(({ theme: theme2 }) => ({
2317
+ display: "flex",
2318
+ alignItems: "baseline",
2319
+ flexGrow: 1,
2320
+ fontSize: theme2.typography.size.s2,
2321
+ gap: 8
2322
+ }));
2323
+ var RuleId2 = styled2.div(({ theme: theme2 }) => ({
2324
+ display: "none",
2325
+ color: theme2.textMutedColor,
2326
+ fontFamily: theme2.typography.fonts.mono,
2327
+ fontSize: theme2.typography.size.s1,
2328
+ "@container (min-width: 800px)": {
2329
+ display: "block"
2330
+ }
2331
+ }));
2332
+ var Count = styled2.div(({ theme: theme2 }) => ({
2333
+ display: "flex",
2334
+ alignItems: "center",
2335
+ justifyContent: "center",
2336
+ color: theme2.textMutedColor,
2337
+ width: 28,
2338
+ height: 28
2339
+ }));
2340
+ var Report = /* @__PURE__ */ __name(({
2341
+ items,
2342
+ empty,
2343
+ type,
2344
+ handleSelectionChange,
2345
+ selectedItems,
2346
+ toggleOpen
2347
+ }) => React3.createElement(React3.Fragment, null, items && items.length ? items.map((item) => {
2348
+ const id = `${type}.${item.id}`;
2349
+ const detailsId = `details:${id}`;
2350
+ const selection = selectedItems.get(id);
2351
+ const title = getTitleForAxeResult(item);
2352
+ 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(
2353
+ IconButton,
2354
+ {
2355
+ onClick: (event) => toggleOpen(event, type, item),
2356
+ "aria-label": `${selection ? "Collapse" : "Expand"} details for ${title}`,
2357
+ "aria-expanded": !!selection,
2358
+ "aria-controls": detailsId
2359
+ },
2360
+ React3.createElement(Icon, { style: { transform: `rotate(${selection ? -180 : 0}deg)` } })
2361
+ )), selection ? React3.createElement(
2362
+ Details,
2363
+ {
2364
+ id: detailsId,
2365
+ item,
2366
+ type,
2367
+ selection,
2368
+ handleSelectionChange
2369
+ }
2370
+ ) : React3.createElement("div", { id: detailsId }));
2371
+ }) : React3.createElement(EmptyTabContent, { title: empty })), "Report");
2372
+
2373
+ // src/components/Tabs.tsx
2374
+ import * as React5 from "react";
2375
+ import { IconButton as IconButton2, ScrollArea, TooltipNote, WithTooltip } from "storybook/internal/components";
2376
+ import { CollapseIcon, ExpandAltIcon, EyeCloseIcon, EyeIcon, SyncIcon } from "@storybook/icons";
2377
+
2378
+ // ../../node_modules/react-resize-detector/build/index.esm.js
2379
+ import * as React4 from "react";
2380
+ import { cloneElement, isValidElement, createRef, PureComponent, Component, forwardRef, useRef, useState as useState4, useEffect as useEffect2, useLayoutEffect } from "react";
2381
+ import { findDOMNode } from "react-dom";
2382
+ var extendStatics = /* @__PURE__ */ __name(function(d, b) {
2383
+ extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b2) {
2384
+ d2.__proto__ = b2;
2385
+ } || function(d2, b2) {
2386
+ for (var p in b2) if (Object.prototype.hasOwnProperty.call(b2, p)) d2[p] = b2[p];
2387
+ };
2388
+ return extendStatics(d, b);
2389
+ }, "extendStatics");
2390
+ function __extends(d, b) {
2391
+ if (typeof b !== "function" && b !== null)
2392
+ throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
2393
+ extendStatics(d, b);
2394
+ function __() {
2395
+ this.constructor = d;
2396
+ }
2397
+ __name(__, "__");
2398
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
2399
+ }
2400
+ __name(__extends, "__extends");
2401
+ var __assign = /* @__PURE__ */ __name(function() {
2402
+ __assign = Object.assign || /* @__PURE__ */ __name(function __assign2(t) {
2403
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
2404
+ s = arguments[i];
2405
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
2406
+ }
2407
+ return t;
2408
+ }, "__assign");
2409
+ return __assign.apply(this, arguments);
2410
+ }, "__assign");
2411
+ function __rest(s, e) {
2412
+ var t = {};
2413
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
2414
+ t[p] = s[p];
2415
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
2416
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
2417
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
2418
+ t[p[i]] = s[p[i]];
2419
+ }
2420
+ return t;
2421
+ }
2422
+ __name(__rest, "__rest");
2423
+ var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
2424
+ function isObject$3(value) {
2425
+ var type = typeof value;
2426
+ return value != null && (type == "object" || type == "function");
2427
+ }
2428
+ __name(isObject$3, "isObject$3");
2429
+ var isObject_1 = isObject$3;
2430
+ var freeGlobal$1 = typeof commonjsGlobal == "object" && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
2431
+ var _freeGlobal = freeGlobal$1;
2432
+ var freeGlobal = _freeGlobal;
2433
+ var freeSelf = typeof self == "object" && self && self.Object === Object && self;
2434
+ var root$2 = freeGlobal || freeSelf || Function("return this")();
2435
+ var _root = root$2;
2436
+ var root$1 = _root;
2437
+ var now$1 = /* @__PURE__ */ __name(function() {
2438
+ return root$1.Date.now();
2439
+ }, "now$1");
2440
+ var now_1 = now$1;
2441
+ var reWhitespace = /\s/;
2442
+ function trimmedEndIndex$1(string) {
2443
+ var index = string.length;
2444
+ while (index-- && reWhitespace.test(string.charAt(index))) {
2445
+ }
2446
+ return index;
2447
+ }
2448
+ __name(trimmedEndIndex$1, "trimmedEndIndex$1");
2449
+ var _trimmedEndIndex = trimmedEndIndex$1;
2450
+ var trimmedEndIndex = _trimmedEndIndex;
2451
+ var reTrimStart = /^\s+/;
2452
+ function baseTrim$1(string) {
2453
+ return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, "") : string;
2454
+ }
2455
+ __name(baseTrim$1, "baseTrim$1");
2456
+ var _baseTrim = baseTrim$1;
2457
+ var root = _root;
2458
+ var Symbol$2 = root.Symbol;
2459
+ var _Symbol = Symbol$2;
2460
+ var Symbol$1 = _Symbol;
2461
+ var objectProto$1 = Object.prototype;
2462
+ var hasOwnProperty = objectProto$1.hasOwnProperty;
2463
+ var nativeObjectToString$1 = objectProto$1.toString;
2464
+ var symToStringTag$1 = Symbol$1 ? Symbol$1.toStringTag : void 0;
2465
+ function getRawTag$1(value) {
2466
+ var isOwn = hasOwnProperty.call(value, symToStringTag$1), tag = value[symToStringTag$1];
2467
+ try {
2468
+ value[symToStringTag$1] = void 0;
2469
+ var unmasked = true;
2470
+ } catch (e) {
2471
+ }
2472
+ var result = nativeObjectToString$1.call(value);
2473
+ if (unmasked) {
2474
+ if (isOwn) {
2475
+ value[symToStringTag$1] = tag;
2476
+ } else {
2477
+ delete value[symToStringTag$1];
2478
+ }
2479
+ }
2480
+ return result;
2481
+ }
2482
+ __name(getRawTag$1, "getRawTag$1");
2483
+ var _getRawTag = getRawTag$1;
2484
+ var objectProto = Object.prototype;
2485
+ var nativeObjectToString = objectProto.toString;
2486
+ function objectToString$1(value) {
2487
+ return nativeObjectToString.call(value);
2488
+ }
2489
+ __name(objectToString$1, "objectToString$1");
2490
+ var _objectToString = objectToString$1;
2491
+ var Symbol2 = _Symbol;
2492
+ var getRawTag = _getRawTag;
2493
+ var objectToString = _objectToString;
2494
+ var nullTag = "[object Null]";
2495
+ var undefinedTag = "[object Undefined]";
2496
+ var symToStringTag = Symbol2 ? Symbol2.toStringTag : void 0;
2497
+ function baseGetTag$1(value) {
2498
+ if (value == null) {
2499
+ return value === void 0 ? undefinedTag : nullTag;
2500
+ }
2501
+ return symToStringTag && symToStringTag in Object(value) ? getRawTag(value) : objectToString(value);
2502
+ }
2503
+ __name(baseGetTag$1, "baseGetTag$1");
2504
+ var _baseGetTag = baseGetTag$1;
2505
+ function isObjectLike$1(value) {
2506
+ return value != null && typeof value == "object";
2507
+ }
2508
+ __name(isObjectLike$1, "isObjectLike$1");
2509
+ var isObjectLike_1 = isObjectLike$1;
2510
+ var baseGetTag = _baseGetTag;
2511
+ var isObjectLike = isObjectLike_1;
2512
+ var symbolTag = "[object Symbol]";
2513
+ function isSymbol$1(value) {
2514
+ return typeof value == "symbol" || isObjectLike(value) && baseGetTag(value) == symbolTag;
2515
+ }
2516
+ __name(isSymbol$1, "isSymbol$1");
2517
+ var isSymbol_1 = isSymbol$1;
2518
+ var baseTrim = _baseTrim;
2519
+ var isObject$2 = isObject_1;
2520
+ var isSymbol = isSymbol_1;
2521
+ var NAN = 0 / 0;
2522
+ var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
2523
+ var reIsBinary = /^0b[01]+$/i;
2524
+ var reIsOctal = /^0o[0-7]+$/i;
2525
+ var freeParseInt = parseInt;
2526
+ function toNumber$1(value) {
2527
+ if (typeof value == "number") {
2528
+ return value;
2529
+ }
2530
+ if (isSymbol(value)) {
2531
+ return NAN;
2532
+ }
2533
+ if (isObject$2(value)) {
2534
+ var other = typeof value.valueOf == "function" ? value.valueOf() : value;
2535
+ value = isObject$2(other) ? other + "" : other;
2536
+ }
2537
+ if (typeof value != "string") {
2538
+ return value === 0 ? value : +value;
2539
+ }
2540
+ value = baseTrim(value);
2541
+ var isBinary = reIsBinary.test(value);
2542
+ return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
2543
+ }
2544
+ __name(toNumber$1, "toNumber$1");
2545
+ var toNumber_1 = toNumber$1;
2546
+ var isObject$1 = isObject_1;
2547
+ var now = now_1;
2548
+ var toNumber = toNumber_1;
2549
+ var FUNC_ERROR_TEXT$1 = "Expected a function";
2550
+ var nativeMax = Math.max;
2551
+ var nativeMin = Math.min;
2552
+ function debounce$1(func, wait, options) {
2553
+ var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
2554
+ if (typeof func != "function") {
2555
+ throw new TypeError(FUNC_ERROR_TEXT$1);
2556
+ }
2557
+ wait = toNumber(wait) || 0;
2558
+ if (isObject$1(options)) {
2559
+ leading = !!options.leading;
2560
+ maxing = "maxWait" in options;
2561
+ maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
2562
+ trailing = "trailing" in options ? !!options.trailing : trailing;
2563
+ }
2564
+ function invokeFunc(time) {
2565
+ var args = lastArgs, thisArg = lastThis;
2566
+ lastArgs = lastThis = void 0;
2567
+ lastInvokeTime = time;
2568
+ result = func.apply(thisArg, args);
2569
+ return result;
2570
+ }
2571
+ __name(invokeFunc, "invokeFunc");
2572
+ function leadingEdge(time) {
2573
+ lastInvokeTime = time;
2574
+ timerId = setTimeout(timerExpired, wait);
2575
+ return leading ? invokeFunc(time) : result;
2576
+ }
2577
+ __name(leadingEdge, "leadingEdge");
2578
+ function remainingWait(time) {
2579
+ var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime, timeWaiting = wait - timeSinceLastCall;
2580
+ return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
2581
+ }
2582
+ __name(remainingWait, "remainingWait");
2583
+ function shouldInvoke(time) {
2584
+ var timeSinceLastCall = time - lastCallTime, timeSinceLastInvoke = time - lastInvokeTime;
2585
+ return lastCallTime === void 0 || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
2586
+ }
2587
+ __name(shouldInvoke, "shouldInvoke");
2588
+ function timerExpired() {
2589
+ var time = now();
2590
+ if (shouldInvoke(time)) {
2591
+ return trailingEdge(time);
2592
+ }
2593
+ timerId = setTimeout(timerExpired, remainingWait(time));
2594
+ }
2595
+ __name(timerExpired, "timerExpired");
2596
+ function trailingEdge(time) {
2597
+ timerId = void 0;
2598
+ if (trailing && lastArgs) {
2599
+ return invokeFunc(time);
2600
+ }
2601
+ lastArgs = lastThis = void 0;
2602
+ return result;
2603
+ }
2604
+ __name(trailingEdge, "trailingEdge");
2605
+ function cancel() {
2606
+ if (timerId !== void 0) {
2607
+ clearTimeout(timerId);
2608
+ }
2609
+ lastInvokeTime = 0;
2610
+ lastArgs = lastCallTime = lastThis = timerId = void 0;
2611
+ }
2612
+ __name(cancel, "cancel");
2613
+ function flush() {
2614
+ return timerId === void 0 ? result : trailingEdge(now());
2615
+ }
2616
+ __name(flush, "flush");
2617
+ function debounced() {
2618
+ var time = now(), isInvoking = shouldInvoke(time);
2619
+ lastArgs = arguments;
2620
+ lastThis = this;
2621
+ lastCallTime = time;
2622
+ if (isInvoking) {
2623
+ if (timerId === void 0) {
2624
+ return leadingEdge(lastCallTime);
2625
+ }
2626
+ if (maxing) {
2627
+ clearTimeout(timerId);
2628
+ timerId = setTimeout(timerExpired, wait);
2629
+ return invokeFunc(lastCallTime);
2630
+ }
2631
+ }
2632
+ if (timerId === void 0) {
2633
+ timerId = setTimeout(timerExpired, wait);
2634
+ }
2635
+ return result;
2636
+ }
2637
+ __name(debounced, "debounced");
2638
+ debounced.cancel = cancel;
2639
+ debounced.flush = flush;
2640
+ return debounced;
2641
+ }
2642
+ __name(debounce$1, "debounce$1");
2643
+ var debounce_1 = debounce$1;
2644
+ var debounce = debounce_1;
2645
+ var isObject = isObject_1;
2646
+ var FUNC_ERROR_TEXT = "Expected a function";
2647
+ function throttle(func, wait, options) {
2648
+ var leading = true, trailing = true;
2649
+ if (typeof func != "function") {
2650
+ throw new TypeError(FUNC_ERROR_TEXT);
2651
+ }
2652
+ if (isObject(options)) {
2653
+ leading = "leading" in options ? !!options.leading : leading;
2654
+ trailing = "trailing" in options ? !!options.trailing : trailing;
2655
+ }
2656
+ return debounce(func, wait, {
2657
+ "leading": leading,
2658
+ "maxWait": wait,
2659
+ "trailing": trailing
2660
+ });
2661
+ }
2662
+ __name(throttle, "throttle");
2663
+ var throttle_1 = throttle;
2664
+ var patchResizeHandler = /* @__PURE__ */ __name(function(resizeCallback, refreshMode, refreshRate, refreshOptions) {
2665
+ switch (refreshMode) {
2666
+ case "debounce":
2667
+ return debounce_1(resizeCallback, refreshRate, refreshOptions);
2668
+ case "throttle":
2669
+ return throttle_1(resizeCallback, refreshRate, refreshOptions);
2670
+ default:
2671
+ return resizeCallback;
2672
+ }
2673
+ }, "patchResizeHandler");
2674
+ var isFunction = /* @__PURE__ */ __name(function(fn) {
2675
+ return typeof fn === "function";
2676
+ }, "isFunction");
2677
+ var isSSR = /* @__PURE__ */ __name(function() {
2678
+ return typeof window === "undefined";
2679
+ }, "isSSR");
2680
+ var isDOMElement = /* @__PURE__ */ __name(function(element) {
2681
+ return element instanceof Element || element instanceof HTMLDocument;
2682
+ }, "isDOMElement");
2683
+ var createNotifier = /* @__PURE__ */ __name(function(onResize, setSize, handleWidth, handleHeight) {
2684
+ return function(_a) {
2685
+ var width = _a.width, height = _a.height;
2686
+ setSize(function(prev) {
2687
+ if (prev.width === width && prev.height === height) {
2688
+ return prev;
2689
+ }
2690
+ if (prev.width === width && !handleHeight || prev.height === height && !handleWidth) {
2691
+ return prev;
2692
+ }
2693
+ if (onResize && isFunction(onResize)) {
2694
+ onResize(width, height);
2695
+ }
2696
+ return { width, height };
2697
+ });
2698
+ };
2699
+ }, "createNotifier");
2700
+ var ResizeDetector = (
2701
+ /** @class */
2702
+ function(_super) {
2703
+ __extends(ResizeDetector2, _super);
2704
+ function ResizeDetector2(props) {
2705
+ var _this = _super.call(this, props) || this;
2706
+ _this.cancelHandler = function() {
2707
+ if (_this.resizeHandler && _this.resizeHandler.cancel) {
2708
+ _this.resizeHandler.cancel();
2709
+ _this.resizeHandler = null;
2710
+ }
2711
+ };
2712
+ _this.attachObserver = function() {
2713
+ var _a2 = _this.props, targetRef = _a2.targetRef, observerOptions = _a2.observerOptions;
2714
+ if (isSSR()) {
2715
+ return;
2716
+ }
2717
+ if (targetRef && targetRef.current) {
2718
+ _this.targetRef.current = targetRef.current;
2719
+ }
2720
+ var element = _this.getElement();
2721
+ if (!element) {
2722
+ return;
2723
+ }
2724
+ if (_this.observableElement && _this.observableElement === element) {
2725
+ return;
2726
+ }
2727
+ _this.observableElement = element;
2728
+ _this.resizeObserver.observe(element, observerOptions);
2729
+ };
2730
+ _this.getElement = function() {
2731
+ var _a2 = _this.props, querySelector = _a2.querySelector, targetDomEl = _a2.targetDomEl;
2732
+ if (isSSR())
2733
+ return null;
2734
+ if (querySelector)
2735
+ return document.querySelector(querySelector);
2736
+ if (targetDomEl && isDOMElement(targetDomEl))
2737
+ return targetDomEl;
2738
+ if (_this.targetRef && isDOMElement(_this.targetRef.current))
2739
+ return _this.targetRef.current;
2740
+ var currentElement = findDOMNode(_this);
2741
+ if (!currentElement)
2742
+ return null;
2743
+ var renderType = _this.getRenderType();
2744
+ switch (renderType) {
2745
+ case "renderProp":
2746
+ return currentElement;
2747
+ case "childFunction":
2748
+ return currentElement;
2749
+ case "child":
2750
+ return currentElement;
2751
+ case "childArray":
2752
+ return currentElement;
2753
+ default:
2754
+ return currentElement.parentElement;
2755
+ }
2756
+ };
2757
+ _this.createResizeHandler = function(entries) {
2758
+ 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;
2759
+ if (!handleWidth && !handleHeight)
2760
+ return;
2761
+ var notifyResize = createNotifier(onResize, _this.setState.bind(_this), handleWidth, handleHeight);
2762
+ entries.forEach(function(entry) {
2763
+ var _a3 = entry && entry.contentRect || {}, width = _a3.width, height = _a3.height;
2764
+ var shouldSetSize = !_this.skipOnMount && !isSSR();
2765
+ if (shouldSetSize) {
2766
+ notifyResize({ width, height });
2767
+ }
2768
+ _this.skipOnMount = false;
2769
+ });
2770
+ };
2771
+ _this.getRenderType = function() {
2772
+ var _a2 = _this.props, render = _a2.render, children = _a2.children;
2773
+ if (isFunction(render)) {
2774
+ return "renderProp";
2775
+ }
2776
+ if (isFunction(children)) {
2777
+ return "childFunction";
2778
+ }
2779
+ if (isValidElement(children)) {
2780
+ return "child";
2781
+ }
2782
+ if (Array.isArray(children)) {
2783
+ return "childArray";
2784
+ }
2785
+ return "parent";
2786
+ };
2787
+ var skipOnMount = props.skipOnMount, refreshMode = props.refreshMode, _a = props.refreshRate, refreshRate = _a === void 0 ? 1e3 : _a, refreshOptions = props.refreshOptions;
2788
+ _this.state = {
2789
+ width: void 0,
2790
+ height: void 0
2791
+ };
2792
+ _this.skipOnMount = skipOnMount;
2793
+ _this.targetRef = createRef();
2794
+ _this.observableElement = null;
2795
+ if (isSSR()) {
2796
+ return _this;
2797
+ }
2798
+ _this.resizeHandler = patchResizeHandler(_this.createResizeHandler, refreshMode, refreshRate, refreshOptions);
2799
+ _this.resizeObserver = new window.ResizeObserver(_this.resizeHandler);
2800
+ return _this;
2801
+ }
2802
+ __name(ResizeDetector2, "ResizeDetector");
2803
+ ResizeDetector2.prototype.componentDidMount = function() {
2804
+ this.attachObserver();
2805
+ };
2806
+ ResizeDetector2.prototype.componentDidUpdate = function() {
2807
+ this.attachObserver();
2808
+ };
2809
+ ResizeDetector2.prototype.componentWillUnmount = function() {
2810
+ if (isSSR()) {
2811
+ return;
2812
+ }
2813
+ this.observableElement = null;
2814
+ this.resizeObserver.disconnect();
2815
+ this.cancelHandler();
2816
+ };
2817
+ ResizeDetector2.prototype.render = function() {
2818
+ var _a = this.props, render = _a.render, children = _a.children, _b = _a.nodeType, WrapperTag = _b === void 0 ? "div" : _b;
2819
+ var _c = this.state, width = _c.width, height = _c.height;
2820
+ var childProps = { width, height, targetRef: this.targetRef };
2821
+ var renderType = this.getRenderType();
2822
+ var typedChildren;
2823
+ switch (renderType) {
2824
+ case "renderProp":
2825
+ return render && render(childProps);
2826
+ case "childFunction":
2827
+ typedChildren = children;
2828
+ return typedChildren(childProps);
2829
+ case "child":
2830
+ typedChildren = children;
2831
+ if (typedChildren.type && typeof typedChildren.type === "string") {
2832
+ childProps.targetRef;
2833
+ var nativeProps = __rest(childProps, ["targetRef"]);
2834
+ return cloneElement(typedChildren, nativeProps);
2835
+ }
2836
+ return cloneElement(typedChildren, childProps);
2837
+ case "childArray":
2838
+ typedChildren = children;
2839
+ return typedChildren.map(function(el) {
2840
+ return !!el && cloneElement(el, childProps);
2841
+ });
2842
+ default:
2843
+ return React4.createElement(WrapperTag, null);
2844
+ }
2845
+ };
2846
+ return ResizeDetector2;
2847
+ }(PureComponent)
2848
+ );
2849
+ var useEnhancedEffect = isSSR() ? useEffect2 : useLayoutEffect;
2850
+ function useResizeDetector(props) {
2851
+ if (props === void 0) {
2852
+ props = {};
2853
+ }
2854
+ 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;
2855
+ var skipResize = useRef(skipOnMount);
2856
+ var localRef = useRef(null);
2857
+ var ref = targetRef !== null && targetRef !== void 0 ? targetRef : localRef;
2858
+ var resizeHandler = useRef();
2859
+ var _e = useState4({
2860
+ width: void 0,
2861
+ height: void 0
2862
+ }), size = _e[0], setSize = _e[1];
2863
+ useEnhancedEffect(function() {
2864
+ if (isSSR()) {
2865
+ return;
2866
+ }
2867
+ var notifyResize = createNotifier(onResize, setSize, handleWidth, handleHeight);
2868
+ var resizeCallback = /* @__PURE__ */ __name(function(entries) {
2869
+ if (!handleWidth && !handleHeight)
2870
+ return;
2871
+ entries.forEach(function(entry) {
2872
+ var _a2 = entry && entry.contentRect || {}, width = _a2.width, height = _a2.height;
2873
+ var shouldSetSize = !skipResize.current && !isSSR();
2874
+ if (shouldSetSize) {
2875
+ notifyResize({ width, height });
2876
+ }
2877
+ skipResize.current = false;
2878
+ });
2879
+ }, "resizeCallback");
2880
+ resizeHandler.current = patchResizeHandler(resizeCallback, refreshMode, refreshRate, refreshOptions);
2881
+ var resizeObserver = new window.ResizeObserver(resizeHandler.current);
2882
+ if (ref.current) {
2883
+ resizeObserver.observe(ref.current, observerOptions);
2884
+ }
2885
+ return function() {
2886
+ resizeObserver.disconnect();
2887
+ var patchedResizeHandler = resizeHandler.current;
2888
+ if (patchedResizeHandler && patchedResizeHandler.cancel) {
2889
+ patchedResizeHandler.cancel();
2890
+ }
2891
+ };
2892
+ }, [refreshMode, refreshRate, refreshOptions, handleWidth, handleHeight, onResize, observerOptions, ref.current]);
2893
+ return __assign({ ref }, size);
2894
+ }
2895
+ __name(useResizeDetector, "useResizeDetector");
2896
+
2897
+ // src/components/Tabs.tsx
2898
+ import { styled as styled3 } from "storybook/theming";
2899
+ var Container = styled3.div({
2900
+ width: "100%",
2901
+ position: "relative",
2902
+ minHeight: "100%"
2903
+ });
2904
+ var Item2 = styled3.button(
2905
+ ({ theme: theme2 }) => ({
2906
+ textDecoration: "none",
2907
+ padding: "10px 15px",
2908
+ cursor: "pointer",
2909
+ color: theme2.textMutedColor,
2910
+ fontWeight: theme2.typography.weight.bold,
2911
+ fontSize: theme2.typography.size.s2 - 1,
2912
+ lineHeight: 1,
2913
+ height: 40,
2914
+ border: "none",
2915
+ borderBottom: "3px solid transparent",
2916
+ background: "transparent",
2917
+ "&:focus": {
2918
+ outline: "0 none",
2919
+ borderColor: theme2.color.secondary
2920
+ }
2921
+ }),
2922
+ ({ active, theme: theme2 }) => active ? {
2923
+ opacity: 1,
2924
+ color: theme2.color.secondary,
2925
+ borderColor: theme2.color.secondary
2926
+ } : {}
2927
+ );
2928
+ var Subnav = styled3.div(({ theme: theme2 }) => ({
2929
+ boxShadow: `${theme2.appBorderColor} 0 -1px 0 0 inset`,
2930
+ background: theme2.background.app,
2931
+ position: "sticky",
2932
+ top: 0,
2933
+ zIndex: 1,
2934
+ display: "flex",
2935
+ alignItems: "center",
2936
+ whiteSpace: "nowrap",
2937
+ overflow: "auto",
2938
+ paddingRight: 10,
2939
+ gap: 6,
2940
+ scrollbarColor: `${theme2.barTextColor} ${theme2.background.app}`,
2941
+ scrollbarWidth: "thin"
2942
+ }));
2943
+ var TabsWrapper = styled3.div({});
2944
+ var ActionsWrapper = styled3.div({
2945
+ display: "flex",
2946
+ flexBasis: "100%",
2947
+ justifyContent: "flex-end",
2948
+ containerType: "inline-size",
2949
+ // 96px is the total width of the buttons without labels
2950
+ minWidth: 96,
2951
+ gap: 6
2952
+ });
2953
+ var ToggleButton = styled3(IconButton2)({
2954
+ // 193px is the total width of the action buttons when the label is visible
2955
+ "@container (max-width: 193px)": {
2956
+ span: {
2957
+ display: "none"
2958
+ }
2959
+ }
2960
+ });
2961
+ var Tabs = /* @__PURE__ */ __name(({ tabs }) => {
2962
+ const { ref } = useResizeDetector({
2963
+ refreshMode: "debounce",
2964
+ handleHeight: false,
2965
+ handleWidth: true
2966
+ });
2967
+ const {
2968
+ tab: activeTab,
2969
+ setTab,
2970
+ toggleHighlight,
2971
+ highlighted,
2972
+ handleManual,
2973
+ allExpanded,
2974
+ handleCollapseAll,
2975
+ handleExpandAll
2976
+ } = useA11yContext();
2977
+ const handleToggle = React5.useCallback(
2978
+ (event) => {
2979
+ setTab(event.currentTarget.getAttribute("data-type"));
2980
+ },
2981
+ [setTab]
2982
+ );
2983
+ return React5.createElement(Container, { ref }, React5.createElement(Subnav, null, React5.createElement(TabsWrapper, { role: "tablist" }, tabs.map((tab, index) => React5.createElement(
2984
+ Item2,
2985
+ {
2986
+ role: "tab",
2987
+ key: index,
2988
+ "data-type": tab.type,
2989
+ "data-active": activeTab === tab.type,
2990
+ "aria-selected": activeTab === tab.type,
2991
+ active: activeTab === tab.type,
2992
+ onClick: handleToggle
2993
+ },
2994
+ tab.label
2995
+ ))), React5.createElement(ActionsWrapper, null, React5.createElement(
2996
+ WithTooltip,
2997
+ {
2998
+ as: "div",
2999
+ hasChrome: false,
3000
+ placement: "top",
3001
+ tooltip: React5.createElement(TooltipNote, { note: "Highlight elements with accessibility violations" }),
3002
+ trigger: "hover"
3003
+ },
3004
+ 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"))
3005
+ ), React5.createElement(
3006
+ WithTooltip,
3007
+ {
3008
+ as: "div",
3009
+ hasChrome: false,
3010
+ placement: "top",
3011
+ tooltip: React5.createElement(TooltipNote, { note: allExpanded ? "Collapse all" : "Expand all" }),
3012
+ trigger: "hover"
3013
+ },
3014
+ React5.createElement(
3015
+ IconButton2,
3016
+ {
3017
+ onClick: allExpanded ? handleCollapseAll : handleExpandAll,
3018
+ "aria-label": allExpanded ? "Collapse all" : "Expand all"
3019
+ },
3020
+ allExpanded ? React5.createElement(CollapseIcon, null) : React5.createElement(ExpandAltIcon, null)
3021
+ )
3022
+ ), React5.createElement(
3023
+ WithTooltip,
3024
+ {
3025
+ as: "div",
3026
+ hasChrome: false,
3027
+ placement: "top",
3028
+ tooltip: React5.createElement(TooltipNote, { note: "Rerun the accessibility scan" }),
3029
+ trigger: "hover"
3030
+ },
3031
+ React5.createElement(IconButton2, { onClick: handleManual, "aria-label": "Rerun accessibility scan" }, React5.createElement(SyncIcon, null))
3032
+ ))), React5.createElement(ScrollArea, { vertical: true, horizontal: true }, tabs.find((t) => t.type === activeTab)?.panel));
3033
+ }, "Tabs");
3034
+
3035
+ // src/components/TestDiscrepancyMessage.tsx
3036
+ import React6, { useMemo as useMemo2 } from "react";
3037
+ import { Link as Link2 } from "storybook/internal/components";
3038
+ import { useStorybookApi as useStorybookApi2 } from "storybook/manager-api";
3039
+ import { styled as styled4 } from "storybook/theming";
3040
+ var Wrapper3 = styled4.div(({ theme: { color, typography, background } }) => ({
3041
+ textAlign: "start",
3042
+ padding: "11px 15px",
3043
+ fontSize: `${typography.size.s2}px`,
3044
+ fontWeight: typography.weight.regular,
3045
+ lineHeight: "1rem",
3046
+ background: background.app,
3047
+ borderBottom: `1px solid ${color.border}`,
3048
+ color: color.defaultText,
3049
+ backgroundClip: "padding-box",
3050
+ position: "relative",
3051
+ code: {
3052
+ fontSize: `${typography.size.s1 - 1}px`,
3053
+ color: "inherit",
3054
+ margin: "0 0.2em",
3055
+ padding: "0 0.2em",
3056
+ background: "rgba(255, 255, 255, 0.8)",
3057
+ borderRadius: "2px",
3058
+ boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1)"
3059
+ }
3060
+ }));
3061
+ var TestDiscrepancyMessage = /* @__PURE__ */ __name(({ discrepancy }) => {
3062
+ const api = useStorybookApi2();
3063
+ const docsUrl = api.getDocsUrl({
3064
+ subpath: DOCUMENTATION_DISCREPANCY_LINK,
3065
+ versioned: true,
3066
+ renderer: true
3067
+ });
3068
+ const message = useMemo2(() => {
3069
+ switch (discrepancy) {
3070
+ case "browserPassedCliFailed":
3071
+ return "Accessibility checks passed in this browser but failed in the CLI.";
3072
+ case "cliPassedBrowserFailed":
3073
+ return "Accessibility checks passed in the CLI but failed in this browser.";
3074
+ case "cliFailedButModeManual":
3075
+ return "Accessibility checks failed in the CLI. Run the tests manually to see the results.";
3076
+ default:
3077
+ return null;
3078
+ }
3079
+ }, [discrepancy]);
3080
+ if (!message) {
3081
+ return null;
3082
+ }
3083
+ return React6.createElement(Wrapper3, null, message, " ", React6.createElement(Link2, { href: docsUrl, target: "_blank", withArrow: true }, "Learn what could cause this"));
3084
+ }, "TestDiscrepancyMessage");
3085
+
3086
+ // src/components/A11YPanel.tsx
3087
+ var RotatingIcon = styled5(SyncIcon2)(({ theme: theme2 }) => ({
3088
+ animation: `${theme2.animation.rotate360} 1s linear infinite;`,
3089
+ margin: 4
3090
+ }));
3091
+ var Tab = styled5.div({
3092
+ display: "flex",
3093
+ alignItems: "center",
3094
+ gap: 6
3095
+ });
3096
+ var Centered = styled5.span(({ theme: theme2 }) => ({
3097
+ display: "flex",
3098
+ flexDirection: "column",
3099
+ alignItems: "center",
3100
+ justifyContent: "center",
3101
+ textAlign: "center",
3102
+ fontSize: theme2.typography.size.s2,
3103
+ height: "100%",
3104
+ gap: 24,
3105
+ div: {
3106
+ display: "flex",
3107
+ flexDirection: "column",
3108
+ alignItems: "center",
3109
+ gap: 8
3110
+ },
3111
+ p: {
3112
+ margin: 0,
3113
+ color: theme2.textMutedColor
3114
+ },
3115
+ code: {
3116
+ display: "inline-block",
3117
+ fontSize: theme2.typography.size.s2 - 1,
3118
+ backgroundColor: theme2.background.app,
3119
+ border: `1px solid ${theme2.color.border}`,
3120
+ borderRadius: 4,
3121
+ padding: "2px 3px"
3122
+ }
3123
+ }));
3124
+ var A11YPanel = /* @__PURE__ */ __name(() => {
3125
+ const {
3126
+ parameters,
3127
+ tab,
3128
+ results,
3129
+ status,
3130
+ handleManual,
3131
+ error,
3132
+ discrepancy,
3133
+ handleSelectionChange,
3134
+ selectedItems,
3135
+ toggleOpen
3136
+ } = useA11yContext();
3137
+ const tabs = useMemo3(() => {
3138
+ const { passes, incomplete, violations } = results ?? {
3139
+ passes: [],
3140
+ incomplete: [],
3141
+ violations: []
3142
+ };
3143
+ return [
3144
+ {
3145
+ label: React7.createElement(Tab, null, "Violations", React7.createElement(Badge2, { compact: true, status: tab === "violations" ? "active" : "neutral" }, violations.length)),
3146
+ panel: React7.createElement(
3147
+ Report,
3148
+ {
3149
+ items: violations,
3150
+ type: RuleType.VIOLATION,
3151
+ empty: "No accessibility violations found.",
3152
+ handleSelectionChange,
3153
+ selectedItems,
3154
+ toggleOpen
3155
+ }
3156
+ ),
3157
+ items: violations,
3158
+ type: RuleType.VIOLATION
3159
+ },
3160
+ {
3161
+ label: React7.createElement(Tab, null, "Passes", React7.createElement(Badge2, { compact: true, status: tab === "passes" ? "active" : "neutral" }, passes.length)),
3162
+ panel: React7.createElement(
3163
+ Report,
3164
+ {
3165
+ items: passes,
3166
+ type: RuleType.PASS,
3167
+ empty: "No passing accessibility checks found.",
3168
+ handleSelectionChange,
3169
+ selectedItems,
3170
+ toggleOpen
3171
+ }
3172
+ ),
3173
+ items: passes,
3174
+ type: RuleType.PASS
3175
+ },
3176
+ {
3177
+ label: React7.createElement(Tab, null, "Inconclusive", React7.createElement(Badge2, { compact: true, status: tab === "incomplete" ? "active" : "neutral" }, incomplete.length)),
3178
+ panel: React7.createElement(
3179
+ Report,
3180
+ {
3181
+ items: incomplete,
3182
+ type: RuleType.INCOMPLETION,
3183
+ empty: "No inconclusive accessibility checks found.",
3184
+ handleSelectionChange,
3185
+ selectedItems,
3186
+ toggleOpen
3187
+ }
3188
+ ),
3189
+ items: incomplete,
3190
+ type: RuleType.INCOMPLETION
3191
+ }
3192
+ ];
3193
+ }, [tab, results, handleSelectionChange, selectedItems, toggleOpen]);
3194
+ if (parameters.disable || parameters.test === "off") {
3195
+ 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.")));
3196
+ }
3197
+ 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"))));
3198
+ }, "A11YPanel");
3199
+
3200
+ // src/components/VisionSimulator.tsx
3201
+ import React9, { useState as useState5 } from "react";
3202
+ import { IconButton as IconButton3, TooltipLinkList, WithTooltip as WithTooltip2 } from "storybook/internal/components";
3203
+ import { AccessibilityIcon } from "@storybook/icons";
3204
+ import { Global, styled as styled6 } from "storybook/theming";
3205
+
3206
+ // src/components/ColorFilters.tsx
3207
+ import * as React8 from "react";
3208
+ var Filters = /* @__PURE__ */ __name((props) => React8.createElement("svg", { ...props }, React8.createElement("defs", null, React8.createElement("filter", { id: "protanopia" }, React8.createElement(
3209
+ "feColorMatrix",
3210
+ {
3211
+ in: "SourceGraphic",
3212
+ type: "matrix",
3213
+ 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"
3214
+ }
3215
+ )), React8.createElement("filter", { id: "protanomaly" }, React8.createElement(
3216
+ "feColorMatrix",
3217
+ {
3218
+ in: "SourceGraphic",
3219
+ type: "matrix",
3220
+ 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"
3221
+ }
3222
+ )), React8.createElement("filter", { id: "deuteranopia" }, React8.createElement(
3223
+ "feColorMatrix",
3224
+ {
3225
+ in: "SourceGraphic",
3226
+ type: "matrix",
3227
+ 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"
3228
+ }
3229
+ )), React8.createElement("filter", { id: "deuteranomaly" }, React8.createElement(
3230
+ "feColorMatrix",
3231
+ {
3232
+ in: "SourceGraphic",
3233
+ type: "matrix",
3234
+ 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"
3235
+ }
3236
+ )), React8.createElement("filter", { id: "tritanopia" }, React8.createElement(
3237
+ "feColorMatrix",
3238
+ {
3239
+ in: "SourceGraphic",
3240
+ type: "matrix",
3241
+ 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"
3242
+ }
3243
+ )), React8.createElement("filter", { id: "tritanomaly" }, React8.createElement(
3244
+ "feColorMatrix",
3245
+ {
3246
+ in: "SourceGraphic",
3247
+ type: "matrix",
3248
+ 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"
3249
+ }
3250
+ )), React8.createElement("filter", { id: "achromatopsia" }, React8.createElement(
3251
+ "feColorMatrix",
3252
+ {
3253
+ in: "SourceGraphic",
3254
+ type: "matrix",
3255
+ values: "0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0"
3256
+ }
3257
+ )))), "Filters");
3258
+
3259
+ // src/components/VisionSimulator.tsx
3260
+ var iframeId = "storybook-preview-iframe";
3261
+ var baseList = [
3262
+ { name: "blurred vision", percentage: 22.9 },
3263
+ { name: "deuteranomaly", percentage: 2.7 },
3264
+ { name: "deuteranopia", percentage: 0.56 },
3265
+ { name: "protanomaly", percentage: 0.66 },
3266
+ { name: "protanopia", percentage: 0.59 },
3267
+ { name: "tritanomaly", percentage: 0.01 },
3268
+ { name: "tritanopia", percentage: 0.016 },
3269
+ { name: "achromatopsia", percentage: 1e-4 },
3270
+ { name: "grayscale" }
3271
+ ];
3272
+ var getFilter = /* @__PURE__ */ __name((filterName) => {
3273
+ if (!filterName) {
3274
+ return "none";
3275
+ }
3276
+ if (filterName === "blurred vision") {
3277
+ return "blur(2px)";
3278
+ }
3279
+ if (filterName === "grayscale") {
3280
+ return "grayscale(100%)";
3281
+ }
3282
+ return `url('#${filterName}')`;
3283
+ }, "getFilter");
3284
+ var Hidden = styled6.div({
3285
+ "&, & svg": {
3286
+ position: "absolute",
3287
+ width: 0,
3288
+ height: 0
3289
+ }
3290
+ });
3291
+ var ColorIcon = styled6.span(
3292
+ {
3293
+ background: "linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)",
3294
+ borderRadius: "1rem",
3295
+ display: "block",
3296
+ height: "1rem",
3297
+ width: "1rem"
3298
+ },
3299
+ ({ filter }) => ({
3300
+ filter: getFilter(filter)
3301
+ }),
3302
+ ({ theme: theme2 }) => ({
3303
+ boxShadow: `${theme2.appBorderColor} 0 0 0 1px inset`
3304
+ })
3305
+ );
3306
+ var Column = styled6.span({
3307
+ display: "flex",
3308
+ flexDirection: "column"
3309
+ });
3310
+ var Title2 = styled6.span({
3311
+ textTransform: "capitalize"
3312
+ });
3313
+ var Description2 = styled6.span(({ theme: theme2 }) => ({
3314
+ fontSize: 11,
3315
+ color: theme2.textMutedColor
3316
+ }));
3317
+ var getColorList = /* @__PURE__ */ __name((active, set) => [
3318
+ ...active !== null ? [
3319
+ {
3320
+ id: "reset",
3321
+ title: "Reset color filter",
3322
+ onClick: /* @__PURE__ */ __name(() => {
3323
+ set(null);
3324
+ }, "onClick"),
3325
+ right: void 0,
3326
+ active: false
3327
+ }
3328
+ ] : [],
3329
+ ...baseList.map((i) => {
3330
+ const description = i.percentage !== void 0 ? `${i.percentage}% of users` : void 0;
3331
+ return {
3332
+ id: i.name,
3333
+ title: React9.createElement(Column, null, React9.createElement(Title2, null, i.name), description && React9.createElement(Description2, null, description)),
3334
+ onClick: /* @__PURE__ */ __name(() => {
3335
+ set(i);
3336
+ }, "onClick"),
3337
+ right: React9.createElement(ColorIcon, { filter: i.name }),
3338
+ active: active === i
3339
+ };
3340
+ })
3341
+ ], "getColorList");
3342
+ var VisionSimulator = /* @__PURE__ */ __name(() => {
3343
+ const [filter, setFilter] = useState5(null);
3344
+ return React9.createElement(React9.Fragment, null, filter && React9.createElement(
3345
+ Global,
3346
+ {
3347
+ styles: {
3348
+ [`#${iframeId}`]: {
3349
+ filter: getFilter(filter.name)
3350
+ }
3351
+ }
3352
+ }
3353
+ ), React9.createElement(
3354
+ WithTooltip2,
3355
+ {
3356
+ placement: "top",
3357
+ tooltip: ({ onHide }) => {
3358
+ const colorList = getColorList(filter, (i) => {
3359
+ setFilter(i);
3360
+ onHide();
3361
+ });
3362
+ return React9.createElement(TooltipLinkList, { links: colorList });
3363
+ },
3364
+ closeOnOutsideClick: true,
3365
+ onDoubleClick: () => setFilter(null)
3366
+ },
3367
+ React9.createElement(IconButton3, { key: "filter", active: !!filter, title: "Vision simulator" }, React9.createElement(AccessibilityIcon, null))
3368
+ ), React9.createElement(Hidden, null, React9.createElement(Filters, null)));
3369
+ }, "VisionSimulator");
3370
+
3371
+ // src/manager.tsx
3372
+ var Title3 = /* @__PURE__ */ __name(() => {
3373
+ const api = useStorybookApi3();
3374
+ const selectedPanel = api.getSelectedPanel();
3375
+ const [addonState] = useAddonState2(ADDON_ID);
3376
+ const violationsNb = addonState?.violations?.length || 0;
3377
+ const incompleteNb = addonState?.incomplete?.length || 0;
3378
+ const count = violationsNb + incompleteNb;
3379
+ const suffix = count === 0 ? null : React10.createElement(Badge3, { compact: true, status: selectedPanel === PANEL_ID ? "active" : "neutral" }, count);
3380
+ return React10.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6 } }, React10.createElement("span", null, "Accessibility"), suffix);
3381
+ }, "Title");
3382
+ addons.register(ADDON_ID, (api) => {
3383
+ addons.add(PANEL_ID, {
3384
+ title: "",
3385
+ type: types.TOOL,
3386
+ match: /* @__PURE__ */ __name(({ viewMode, tabId }) => viewMode === "story" && !tabId, "match"),
3387
+ render: /* @__PURE__ */ __name(() => React10.createElement(VisionSimulator, null), "render")
3388
+ });
3389
+ addons.add(PANEL_ID, {
3390
+ title: Title3,
3391
+ type: types.PANEL,
3392
+ render: /* @__PURE__ */ __name(({ active = true }) => React10.createElement(A11yContextProvider, null, active ? React10.createElement(A11YPanel, null) : null), "render"),
3393
+ paramKey: PARAM_KEY
3394
+ });
3395
+ });